@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap";* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 30px;
    background-color: #dc143c;
    color: #fff;
    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)
}
html{
    scroll-behavior: smooth;
}
body,html {
    font-family: Raleway,sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff
}

section {
    width: 100%;
    padding: 3.48% 5.2%;
    position: relative;
    z-index: 3;
    background: transparent
}

@media (min-width: 1440px) and (max-width: 1536px) {
    section {
        padding:3% 5%
    }
}

.Toastify {
    padding: 0
}

button,input,textarea {
    font-family: Raleway,sans-serif
}

.animated-button {
    width: max-content;
    display: flex;
    height: 50px;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 25px;
    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
}

.animated-button .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
}

.animated-button .btn-text {
    position: relative;
    z-index: 2;
    transition: color .3s ease
}

.animated-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 .6s ease-out;
    z-index: 1
}

.animated-button:hover .btn-background {
    transform: translateY(0)
}

.animated-button:hover .btn-text {
    color: #000
}

.animated-button:hover .btn-text:after {
    transform: translateY(100%)
}

.animated-button:not(:hover) .btn-background {
    transform: translateY(100%)
}

.animated-button:not(:hover) .btn-text:after {
    transform: translateY(0)
}

.head-content {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.heading {
    font-size: 3.5rem;
    font-weight: 600;
    color: #f0af13;
    line-height: normal;
    font-family: Raleway,sans-serif
}

.title {
    font-family: Raleway,sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: normal
}

.title-desc {
    font-family: Raleway,sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: normal
}

@media (min-width: 1440px) and (max-width: 1536px) {
    .animated-button {
        height:42px;
        padding: 9px 20px;
        font-size: 16px
    }

    .heading {
        font-size: 2.8rem
    }

    .title {
        font-size: 1.3rem
    }

    .title-desc {
        font-size: .85rem
    }
}

@media (max-width: 1400px) {
    .animated-button {
        height:40px;
        padding: 8px 18px;
        font-size: 15px
    }

    .heading {
        font-size: 2.5rem
    }

    .title {
        font-size: 1.2rem
    }

    .title-desc {
        font-size: .8rem
    }
}

a {
    color: #fff;
    text-decoration: none
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
.fa {
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
    font-weight: var(--fa-style,900)
}

.fa,.fa-brands,.fa-regular,.fa-solid,.fab,.far,.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.fa-brands:before,.fa-regular:before,.fa-solid:before,.fa:before,.fab:before,.far:before,.fas:before {
    content: var(--fa)
}

.fa-classic,.fa-regular,.fa-solid,.far,.fas {
    font-family: "Font Awesome 6 Free"
}

.fa-brands,.fab {
    font-family: "Font Awesome 6 Brands"
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-6x {
    font-size: 6em
}

.fa-7x {
    font-size: 7em
}

.fa-8x {
    font-size: 8em
}

.fa-9x {
    font-size: 9em
}

.fa-10x {
    font-size: 10em
}

.fa-2xs {
    font-size: .625em;
    line-height: .1em;
    vertical-align: .225em
}

.fa-xs {
    font-size: .75em;
    line-height: .08333em;
    vertical-align: .125em
}

.fa-sm {
    font-size: .875em;
    line-height: .07143em;
    vertical-align: .05357em
}

.fa-lg {
    font-size: 1.25em;
    line-height: .05em;
    vertical-align: -.075em
}

.fa-xl {
    font-size: 1.5em;
    line-height: .04167em;
    vertical-align: -.125em
}

.fa-2xl {
    font-size: 2em;
    line-height: .03125em;
    vertical-align: -.1875em
}

.fa-fw {
    text-align: center;
    width: 1.25em
}

.fa-ul {
    list-style-type: none;
    margin-left: var(--fa-li-margin,2.5em);
    padding-left: 0
}

.fa-ul>li {
    position: relative
}

.fa-li {
    left: calc(var(--fa-li-width, 2em)*-1);
    position: absolute;
    text-align: center;
    width: var(--fa-li-width,2em);
    line-height: inherit
}

.fa-border {
    border-radius: var(--fa-border-radius,.1em);
    border: var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);
    padding: var(--fa-border-padding,.2em .25em .15em)
}

.fa-pull-left {
    float: left;
    margin-right: var(--fa-pull-margin,.3em)
}

.fa-pull-right {
    float: right;
    margin-left: var(--fa-pull-margin,.3em)
}

.fa-beat {
    animation-name: fa-beat;
    animation-delay: var(--fa-animation-delay,0s);
    animation-direction: var(--fa-animation-direction,normal);
    animation-duration: var(--fa-animation-duration,1s);
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,ease-in-out)
}

.fa-bounce {
    animation-name: fa-bounce;
    animation-delay: var(--fa-animation-delay,0s);
    animation-direction: var(--fa-animation-direction,normal);
    animation-duration: var(--fa-animation-duration,1s);
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))
}

.fa-fade {
    animation-name: fa-fade;
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))
}

.fa-beat-fade,.fa-fade {
    animation-delay: var(--fa-animation-delay,0s);
    animation-direction: var(--fa-animation-direction,normal);
    animation-duration: var(--fa-animation-duration,1s)
}

.fa-beat-fade {
    animation-name: fa-beat-fade;
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))
}

.fa-flip {
    animation-name: fa-flip;
    animation-delay: var(--fa-animation-delay,0s);
    animation-direction: var(--fa-animation-direction,normal);
    animation-duration: var(--fa-animation-duration,1s);
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,ease-in-out)
}

.fa-shake {
    animation-name: fa-shake;
    animation-duration: var(--fa-animation-duration,1s);
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,linear)
}

.fa-shake,.fa-spin {
    animation-delay: var(--fa-animation-delay,0s);
    animation-direction: var(--fa-animation-direction,normal)
}

.fa-spin {
    animation-name: fa-spin;
    animation-duration: var(--fa-animation-duration,2s);
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,linear)
}

.fa-spin-reverse {
    --fa-animation-direction: reverse
}

.fa-pulse,.fa-spin-pulse {
    animation-name: fa-spin;
    animation-direction: var(--fa-animation-direction,normal);
    animation-duration: var(--fa-animation-duration,1s);
    animation-iteration-count: var(--fa-animation-iteration-count,infinite);
    animation-timing-function: var(--fa-animation-timing,steps(8))
}

@media (prefers-reduced-motion:reduce) {
    .fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse {
        animation-delay: -1ms;
        animation-duration: 1ms;
        animation-iteration-count: 1;
        transition-delay: 0s;
        transition-duration: 0s
    }
}

@keyframes fa-beat {
    0%,90% {
        transform: scale(1)
    }

    45% {
        transform: scale(var(--fa-beat-scale,1.25))
    }
}

@keyframes fa-bounce {
    0% {
        transform: scale(1) translateY(0)
    }

    10% {
        transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)
    }

    30% {
        transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))
    }

    50% {
        transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)
    }

    57% {
        transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em))
    }

    64% {
        transform: scale(1) translateY(0)
    }

    to {
        transform: scale(1) translateY(0)
    }
}

@keyframes fa-fade {
    50% {
        opacity: var(--fa-fade-opacity,.4)
    }
}

@keyframes fa-beat-fade {
    0%,to {
        opacity: var(--fa-beat-fade-opacity,.4);
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(var(--fa-beat-fade-scale,1.125))
    }
}

@keyframes fa-flip {
    50% {
        transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))
    }
}

@keyframes fa-shake {
    0% {
        transform: rotate(-15deg)
    }

    4% {
        transform: rotate(15deg)
    }

    8%,24% {
        transform: rotate(-18deg)
    }

    12%,28% {
        transform: rotate(18deg)
    }

    16% {
        transform: rotate(-22deg)
    }

    20% {
        transform: rotate(22deg)
    }

    32% {
        transform: rotate(-12deg)
    }

    36% {
        transform: rotate(12deg)
    }

    40%,to {
        transform: rotate(0)
    }
}

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

    to {
        transform: rotate(1turn)
    }
}

.fa-rotate-90 {
    transform: rotate(90deg)
}

.fa-rotate-180 {
    transform: rotate(180deg)
}

.fa-rotate-270 {
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    transform: scaleX(-1)
}

.fa-flip-vertical {
    transform: scaleY(-1)
}

.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical {
    transform: scale(-1)
}

.fa-rotate-by {
    transform: rotate(var(--fa-rotate-angle,0))
}

.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em
}

.fa-stack-1x,.fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: var(--fa-stack-z-index,auto)
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: var(--fa-inverse,#fff)
}

.fa-0 {
    --fa: "0"
}

.fa-1 {
    --fa: "1"
}

.fa-2 {
    --fa: "2"
}

.fa-3 {
    --fa: "3"
}

.fa-4 {
    --fa: "4"
}

.fa-5 {
    --fa: "5"
}

.fa-6 {
    --fa: "6"
}

.fa-7 {
    --fa: "7"
}

.fa-8 {
    --fa: "8"
}

.fa-9 {
    --fa: "9"
}

.fa-fill-drip {
    --fa: ""
}

.fa-arrows-to-circle {
    --fa: ""
}

.fa-chevron-circle-right,.fa-circle-chevron-right {
    --fa: ""
}

.fa-at {
    --fa: "@"
}

.fa-trash-alt,.fa-trash-can {
    --fa: ""
}

.fa-text-height {
    --fa: ""
}

.fa-user-times,.fa-user-xmark {
    --fa: ""
}

.fa-stethoscope {
    --fa: ""
}

.fa-comment-alt,.fa-message {
    --fa: ""
}

.fa-info {
    --fa: ""
}

.fa-compress-alt,.fa-down-left-and-up-right-to-center {
    --fa: ""
}

.fa-explosion {
    --fa: ""
}

.fa-file-alt,.fa-file-lines,.fa-file-text {
    --fa: ""
}

.fa-wave-square {
    --fa: ""
}

.fa-ring {
    --fa: ""
}

.fa-building-un {
    --fa: ""
}

.fa-dice-three {
    --fa: ""
}

.fa-calendar-alt,.fa-calendar-days {
    --fa: ""
}

.fa-anchor-circle-check {
    --fa: ""
}

.fa-building-circle-arrow-right {
    --fa: ""
}

.fa-volleyball,.fa-volleyball-ball {
    --fa: ""
}

.fa-arrows-up-to-line {
    --fa: ""
}

.fa-sort-desc,.fa-sort-down {
    --fa: ""
}

.fa-circle-minus,.fa-minus-circle {
    --fa: ""
}

.fa-door-open {
    --fa: ""
}

.fa-right-from-bracket,.fa-sign-out-alt {
    --fa: ""
}

.fa-atom {
    --fa: ""
}

.fa-soap {
    --fa: ""
}

.fa-heart-music-camera-bolt,.fa-icons {
    --fa: ""
}

.fa-microphone-alt-slash,.fa-microphone-lines-slash {
    --fa: ""
}

.fa-bridge-circle-check {
    --fa: ""
}

.fa-pump-medical {
    --fa: ""
}

.fa-fingerprint {
    --fa: ""
}

.fa-hand-point-right {
    --fa: ""
}

.fa-magnifying-glass-location,.fa-search-location {
    --fa: ""
}

.fa-forward-step,.fa-step-forward {
    --fa: ""
}

.fa-face-smile-beam,.fa-smile-beam {
    --fa: ""
}

.fa-flag-checkered {
    --fa: ""
}

.fa-football,.fa-football-ball {
    --fa: ""
}

.fa-school-circle-exclamation {
    --fa: ""
}

.fa-crop {
    --fa: ""
}

.fa-angle-double-down,.fa-angles-down {
    --fa: ""
}

.fa-users-rectangle {
    --fa: ""
}

.fa-people-roof {
    --fa: ""
}

.fa-people-line {
    --fa: ""
}

.fa-beer,.fa-beer-mug-empty {
    --fa: ""
}

.fa-diagram-predecessor {
    --fa: ""
}

.fa-arrow-up-long,.fa-long-arrow-up {
    --fa: ""
}

.fa-burn,.fa-fire-flame-simple {
    --fa: ""
}

.fa-male,.fa-person {
    --fa: ""
}

.fa-laptop {
    --fa: ""
}

.fa-file-csv {
    --fa: ""
}

.fa-menorah {
    --fa: ""
}

.fa-truck-plane {
    --fa: ""
}

.fa-record-vinyl {
    --fa: ""
}

.fa-face-grin-stars,.fa-grin-stars {
    --fa: ""
}

.fa-bong {
    --fa: ""
}

.fa-pastafarianism,.fa-spaghetti-monster-flying {
    --fa: ""
}

.fa-arrow-down-up-across-line {
    --fa: ""
}

.fa-spoon,.fa-utensil-spoon {
    --fa: ""
}

.fa-jar-wheat {
    --fa: ""
}

.fa-envelopes-bulk,.fa-mail-bulk {
    --fa: ""
}

.fa-file-circle-exclamation {
    --fa: ""
}

.fa-circle-h,.fa-hospital-symbol {
    --fa: ""
}

.fa-pager {
    --fa: ""
}

.fa-address-book,.fa-contact-book {
    --fa: ""
}

.fa-strikethrough {
    --fa: ""
}

.fa-k {
    --fa: "K"
}

.fa-landmark-flag {
    --fa: ""
}

.fa-pencil,.fa-pencil-alt {
    --fa: ""
}

.fa-backward {
    --fa: ""
}

.fa-caret-right {
    --fa: ""
}

.fa-comments {
    --fa: ""
}

.fa-file-clipboard,.fa-paste {
    --fa: ""
}

.fa-code-pull-request {
    --fa: ""
}

.fa-clipboard-list {
    --fa: ""
}

.fa-truck-loading,.fa-truck-ramp-box {
    --fa: ""
}

.fa-user-check {
    --fa: ""
}

.fa-vial-virus {
    --fa: ""
}

.fa-sheet-plastic {
    --fa: ""
}

.fa-blog {
    --fa: ""
}

.fa-user-ninja {
    --fa: ""
}

.fa-person-arrow-up-from-line {
    --fa: ""
}

.fa-scroll-torah,.fa-torah {
    --fa: ""
}

.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball {
    --fa: ""
}

.fa-toggle-off {
    --fa: ""
}

.fa-archive,.fa-box-archive {
    --fa: ""
}

.fa-person-drowning {
    --fa: ""
}

.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt {
    --fa: ""
}

.fa-face-grin-tongue-squint,.fa-grin-tongue-squint {
    --fa: ""
}

.fa-spray-can {
    --fa: ""
}

.fa-truck-monster {
    --fa: ""
}

.fa-w {
    --fa: "W"
}

.fa-earth-africa,.fa-globe-africa {
    --fa: ""
}

.fa-rainbow {
    --fa: ""
}

.fa-circle-notch {
    --fa: ""
}

.fa-tablet-alt,.fa-tablet-screen-button {
    --fa: ""
}

.fa-paw {
    --fa: ""
}

.fa-cloud {
    --fa: ""
}

.fa-trowel-bricks {
    --fa: ""
}

.fa-face-flushed,.fa-flushed {
    --fa: ""
}

.fa-hospital-user {
    --fa: ""
}

.fa-tent-arrow-left-right {
    --fa: ""
}

.fa-gavel,.fa-legal {
    --fa: ""
}

.fa-binoculars {
    --fa: ""
}

.fa-microphone-slash {
    --fa: ""
}

.fa-box-tissue {
    --fa: ""
}

.fa-motorcycle {
    --fa: ""
}

.fa-bell-concierge,.fa-concierge-bell {
    --fa: ""
}

.fa-pen-ruler,.fa-pencil-ruler {
    --fa: ""
}

.fa-people-arrows,.fa-people-arrows-left-right {
    --fa: ""
}

.fa-mars-and-venus-burst {
    --fa: ""
}

.fa-caret-square-right,.fa-square-caret-right {
    --fa: ""
}

.fa-cut,.fa-scissors {
    --fa: ""
}

.fa-sun-plant-wilt {
    --fa: ""
}

.fa-toilets-portable {
    --fa: ""
}

.fa-hockey-puck {
    --fa: ""
}

.fa-table {
    --fa: ""
}

.fa-magnifying-glass-arrow-right {
    --fa: ""
}

.fa-digital-tachograph,.fa-tachograph-digital {
    --fa: ""
}

.fa-users-slash {
    --fa: ""
}

.fa-clover {
    --fa: ""
}

.fa-mail-reply,.fa-reply {
    --fa: ""
}

.fa-star-and-crescent {
    --fa: ""
}

.fa-house-fire {
    --fa: ""
}

.fa-minus-square,.fa-square-minus {
    --fa: ""
}

.fa-helicopter {
    --fa: ""
}

.fa-compass {
    --fa: ""
}

.fa-caret-square-down,.fa-square-caret-down {
    --fa: ""
}

.fa-file-circle-question {
    --fa: ""
}

.fa-laptop-code {
    --fa: ""
}

.fa-swatchbook {
    --fa: ""
}

.fa-prescription-bottle {
    --fa: ""
}

.fa-bars,.fa-navicon {
    --fa: ""
}

.fa-people-group {
    --fa: ""
}

.fa-hourglass-3,.fa-hourglass-end {
    --fa: ""
}

.fa-heart-broken,.fa-heart-crack {
    --fa: ""
}

.fa-external-link-square-alt,.fa-square-up-right {
    --fa: ""
}

.fa-face-kiss-beam,.fa-kiss-beam {
    --fa: ""
}

.fa-film {
    --fa: ""
}

.fa-ruler-horizontal {
    --fa: ""
}

.fa-people-robbery {
    --fa: ""
}

.fa-lightbulb {
    --fa: ""
}

.fa-caret-left {
    --fa: ""
}

.fa-circle-exclamation,.fa-exclamation-circle {
    --fa: ""
}

.fa-school-circle-xmark {
    --fa: ""
}

.fa-arrow-right-from-bracket,.fa-sign-out {
    --fa: ""
}

.fa-chevron-circle-down,.fa-circle-chevron-down {
    --fa: ""
}

.fa-unlock-alt,.fa-unlock-keyhole {
    --fa: ""
}

.fa-cloud-showers-heavy {
    --fa: ""
}

.fa-headphones-alt,.fa-headphones-simple {
    --fa: ""
}

.fa-sitemap {
    --fa: ""
}

.fa-circle-dollar-to-slot,.fa-donate {
    --fa: ""
}

.fa-memory {
    --fa: ""
}

.fa-road-spikes {
    --fa: ""
}

.fa-fire-burner {
    --fa: ""
}

.fa-flag {
    --fa: ""
}

.fa-hanukiah {
    --fa: ""
}

.fa-feather {
    --fa: ""
}

.fa-volume-down,.fa-volume-low {
    --fa: ""
}

.fa-comment-slash {
    --fa: ""
}

.fa-cloud-sun-rain {
    --fa: ""
}

.fa-compress {
    --fa: ""
}

.fa-wheat-alt,.fa-wheat-awn {
    --fa: ""
}

.fa-ankh {
    --fa: ""
}

.fa-hands-holding-child {
    --fa: ""
}

.fa-asterisk {
    --fa: "*"
}

.fa-check-square,.fa-square-check {
    --fa: ""
}

.fa-peseta-sign {
    --fa: ""
}

.fa-header,.fa-heading {
    --fa: ""
}

.fa-ghost {
    --fa: ""
}

.fa-list,.fa-list-squares {
    --fa: ""
}

.fa-phone-square-alt,.fa-square-phone-flip {
    --fa: ""
}

.fa-cart-plus {
    --fa: ""
}

.fa-gamepad {
    --fa: ""
}

.fa-circle-dot,.fa-dot-circle {
    --fa: ""
}

.fa-dizzy,.fa-face-dizzy {
    --fa: ""
}

.fa-egg {
    --fa: ""
}

.fa-house-medical-circle-xmark {
    --fa: ""
}

.fa-campground {
    --fa: ""
}

.fa-folder-plus {
    --fa: ""
}

.fa-futbol,.fa-futbol-ball,.fa-soccer-ball {
    --fa: ""
}

.fa-paint-brush,.fa-paintbrush {
    --fa: ""
}

.fa-lock {
    --fa: ""
}

.fa-gas-pump {
    --fa: ""
}

.fa-hot-tub,.fa-hot-tub-person {
    --fa: ""
}

.fa-map-location,.fa-map-marked {
    --fa: ""
}

.fa-house-flood-water {
    --fa: ""
}

.fa-tree {
    --fa: ""
}

.fa-bridge-lock {
    --fa: ""
}

.fa-sack-dollar {
    --fa: ""
}

.fa-edit,.fa-pen-to-square {
    --fa: ""
}

.fa-car-side {
    --fa: ""
}

.fa-share-alt,.fa-share-nodes {
    --fa: ""
}

.fa-heart-circle-minus {
    --fa: ""
}

.fa-hourglass-2,.fa-hourglass-half {
    --fa: ""
}

.fa-microscope {
    --fa: ""
}

.fa-sink {
    --fa: ""
}

.fa-bag-shopping,.fa-shopping-bag {
    --fa: ""
}

.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt {
    --fa: ""
}

.fa-mitten {
    --fa: ""
}

.fa-person-rays {
    --fa: ""
}

.fa-users {
    --fa: ""
}

.fa-eye-slash {
    --fa: ""
}

.fa-flask-vial {
    --fa: ""
}

.fa-hand,.fa-hand-paper {
    --fa: ""
}

.fa-om {
    --fa: ""
}

.fa-worm {
    --fa: ""
}

.fa-house-circle-xmark {
    --fa: ""
}

.fa-plug {
    --fa: ""
}

.fa-chevron-up {
    --fa: ""
}

.fa-hand-spock {
    --fa: ""
}

.fa-stopwatch {
    --fa: ""
}

.fa-face-kiss,.fa-kiss {
    --fa: ""
}

.fa-bridge-circle-xmark {
    --fa: ""
}

.fa-face-grin-tongue,.fa-grin-tongue {
    --fa: ""
}

.fa-chess-bishop {
    --fa: ""
}

.fa-face-grin-wink,.fa-grin-wink {
    --fa: ""
}

.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing {
    --fa: ""
}

.fa-road-circle-check {
    --fa: ""
}

.fa-dice-five {
    --fa: ""
}

.fa-rss-square,.fa-square-rss {
    --fa: ""
}

.fa-land-mine-on {
    --fa: ""
}

.fa-i-cursor {
    --fa: ""
}

.fa-stamp {
    --fa: ""
}

.fa-stairs {
    --fa: ""
}

.fa-i {
    --fa: "I"
}

.fa-hryvnia,.fa-hryvnia-sign {
    --fa: ""
}

.fa-pills {
    --fa: ""
}

.fa-face-grin-wide,.fa-grin-alt {
    --fa: ""
}

.fa-tooth {
    --fa: ""
}

.fa-v {
    --fa: "V"
}

.fa-bangladeshi-taka-sign {
    --fa: ""
}

.fa-bicycle {
    --fa: ""
}

.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake {
    --fa: ""
}

.fa-head-side-cough-slash {
    --fa: ""
}

.fa-ambulance,.fa-truck-medical {
    --fa: ""
}

.fa-wheat-awn-circle-exclamation {
    --fa: ""
}

.fa-snowman {
    --fa: ""
}

.fa-mortar-pestle {
    --fa: ""
}

.fa-road-barrier {
    --fa: ""
}

.fa-school {
    --fa: ""
}

.fa-igloo {
    --fa: ""
}

.fa-joint {
    --fa: ""
}

.fa-angle-right {
    --fa: ""
}

.fa-horse {
    --fa: ""
}

.fa-q {
    --fa: "Q"
}

.fa-g {
    --fa: "G"
}

.fa-notes-medical {
    --fa: ""
}

.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half {
    --fa: ""
}

.fa-dong-sign {
    --fa: ""
}

.fa-capsules {
    --fa: ""
}

.fa-poo-bolt,.fa-poo-storm {
    --fa: ""
}

.fa-face-frown-open,.fa-frown-open {
    --fa: ""
}

.fa-hand-point-up {
    --fa: ""
}

.fa-money-bill {
    --fa: ""
}

.fa-bookmark {
    --fa: ""
}

.fa-align-justify {
    --fa: ""
}

.fa-umbrella-beach {
    --fa: ""
}

.fa-helmet-un {
    --fa: ""
}

.fa-bullseye {
    --fa: ""
}

.fa-bacon {
    --fa: ""
}

.fa-hand-point-down {
    --fa: ""
}

.fa-arrow-up-from-bracket {
    --fa: ""
}

.fa-folder,.fa-folder-blank {
    --fa: ""
}

.fa-file-medical-alt,.fa-file-waveform {
    --fa: ""
}

.fa-radiation {
    --fa: ""
}

.fa-chart-simple {
    --fa: ""
}

.fa-mars-stroke {
    --fa: ""
}

.fa-vial {
    --fa: ""
}

.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average {
    --fa: ""
}

.fa-magic-wand-sparkles,.fa-wand-magic-sparkles {
    --fa: ""
}

.fa-e {
    --fa: "E"
}

.fa-pen-alt,.fa-pen-clip {
    --fa: ""
}

.fa-bridge-circle-exclamation {
    --fa: ""
}

.fa-user {
    --fa: ""
}

.fa-school-circle-check {
    --fa: ""
}

.fa-dumpster {
    --fa: ""
}

.fa-shuttle-van,.fa-van-shuttle {
    --fa: ""
}

.fa-building-user {
    --fa: ""
}

.fa-caret-square-left,.fa-square-caret-left {
    --fa: ""
}

.fa-highlighter {
    --fa: ""
}

.fa-key {
    --fa: ""
}

.fa-bullhorn {
    --fa: ""
}

.fa-globe {
    --fa: ""
}

.fa-synagogue {
    --fa: ""
}

.fa-person-half-dress {
    --fa: ""
}

.fa-road-bridge {
    --fa: ""
}

.fa-location-arrow {
    --fa: ""
}

.fa-c {
    --fa: "C"
}

.fa-tablet-button {
    --fa: ""
}

.fa-building-lock {
    --fa: ""
}

.fa-pizza-slice {
    --fa: ""
}

.fa-money-bill-wave {
    --fa: ""
}

.fa-area-chart,.fa-chart-area {
    --fa: ""
}

.fa-house-flag {
    --fa: ""
}

.fa-person-circle-minus {
    --fa: ""
}

.fa-ban,.fa-cancel {
    --fa: ""
}

.fa-camera-rotate {
    --fa: ""
}

.fa-air-freshener,.fa-spray-can-sparkles {
    --fa: ""
}

.fa-star {
    --fa: ""
}

.fa-repeat {
    --fa: ""
}

.fa-cross {
    --fa: ""
}

.fa-box {
    --fa: ""
}

.fa-venus-mars {
    --fa: ""
}

.fa-arrow-pointer,.fa-mouse-pointer {
    --fa: ""
}

.fa-expand-arrows-alt,.fa-maximize {
    --fa: ""
}

.fa-charging-station {
    --fa: ""
}

.fa-shapes,.fa-triangle-circle-square {
    --fa: ""
}

.fa-random,.fa-shuffle {
    --fa: ""
}

.fa-person-running,.fa-running {
    --fa: ""
}

.fa-mobile-retro {
    --fa: ""
}

.fa-grip-lines-vertical {
    --fa: ""
}

.fa-spider {
    --fa: ""
}

.fa-hands-bound {
    --fa: ""
}

.fa-file-invoice-dollar {
    --fa: ""
}

.fa-plane-circle-exclamation {
    --fa: ""
}

.fa-x-ray {
    --fa: ""
}

.fa-spell-check {
    --fa: ""
}

.fa-slash {
    --fa: ""
}

.fa-computer-mouse,.fa-mouse {
    --fa: ""
}

.fa-arrow-right-to-bracket,.fa-sign-in {
    --fa: ""
}

.fa-shop-slash,.fa-store-alt-slash {
    --fa: ""
}

.fa-server {
    --fa: ""
}

.fa-virus-covid-slash {
    --fa: ""
}

.fa-shop-lock {
    --fa: ""
}

.fa-hourglass-1,.fa-hourglass-start {
    --fa: ""
}

.fa-blender-phone {
    --fa: ""
}

.fa-building-wheat {
    --fa: ""
}

.fa-person-breastfeeding {
    --fa: ""
}

.fa-right-to-bracket,.fa-sign-in-alt {
    --fa: ""
}

.fa-venus {
    --fa: ""
}

.fa-passport {
    --fa: ""
}

.fa-thumb-tack-slash,.fa-thumbtack-slash {
    --fa: ""
}

.fa-heart-pulse,.fa-heartbeat {
    --fa: ""
}

.fa-people-carry,.fa-people-carry-box {
    --fa: ""
}

.fa-temperature-high {
    --fa: ""
}

.fa-microchip {
    --fa: ""
}

.fa-crown {
    --fa: ""
}

.fa-weight-hanging {
    --fa: ""
}

.fa-xmarks-lines {
    --fa: ""
}

.fa-file-prescription {
    --fa: ""
}

.fa-weight,.fa-weight-scale {
    --fa: ""
}

.fa-user-friends,.fa-user-group {
    --fa: ""
}

.fa-arrow-up-a-z,.fa-sort-alpha-up {
    --fa: ""
}

.fa-chess-knight {
    --fa: ""
}

.fa-face-laugh-squint,.fa-laugh-squint {
    --fa: ""
}

.fa-wheelchair {
    --fa: ""
}

.fa-arrow-circle-up,.fa-circle-arrow-up {
    --fa: ""
}

.fa-toggle-on {
    --fa: ""
}

.fa-person-walking,.fa-walking {
    --fa: ""
}

.fa-l {
    --fa: "L"
}

.fa-fire {
    --fa: ""
}

.fa-bed-pulse,.fa-procedures {
    --fa: ""
}

.fa-shuttle-space,.fa-space-shuttle {
    --fa: ""
}

.fa-face-laugh,.fa-laugh {
    --fa: ""
}

.fa-folder-open {
    --fa: ""
}

.fa-heart-circle-plus {
    --fa: ""
}

.fa-code-fork {
    --fa: ""
}

.fa-city {
    --fa: ""
}

.fa-microphone-alt,.fa-microphone-lines {
    --fa: ""
}

.fa-pepper-hot {
    --fa: ""
}

.fa-unlock {
    --fa: ""
}

.fa-colon-sign {
    --fa: ""
}

.fa-headset {
    --fa: ""
}

.fa-store-slash {
    --fa: ""
}

.fa-road-circle-xmark {
    --fa: ""
}

.fa-user-minus {
    --fa: ""
}

.fa-mars-stroke-up,.fa-mars-stroke-v {
    --fa: ""
}

.fa-champagne-glasses,.fa-glass-cheers {
    --fa: ""
}

.fa-clipboard {
    --fa: ""
}

.fa-house-circle-exclamation {
    --fa: ""
}

.fa-file-arrow-up,.fa-file-upload {
    --fa: ""
}

.fa-wifi,.fa-wifi-3,.fa-wifi-strong {
    --fa: ""
}

.fa-bath,.fa-bathtub {
    --fa: ""
}

.fa-underline {
    --fa: ""
}

.fa-user-edit,.fa-user-pen {
    --fa: ""
}

.fa-signature {
    --fa: ""
}

.fa-stroopwafel {
    --fa: ""
}

.fa-bold {
    --fa: ""
}

.fa-anchor-lock {
    --fa: ""
}

.fa-building-ngo {
    --fa: ""
}

.fa-manat-sign {
    --fa: ""
}

.fa-not-equal {
    --fa: ""
}

.fa-border-style,.fa-border-top-left {
    --fa: ""
}

.fa-map-location-dot,.fa-map-marked-alt {
    --fa: ""
}

.fa-jedi {
    --fa: ""
}

.fa-poll,.fa-square-poll-vertical {
    --fa: ""
}

.fa-mug-hot {
    --fa: ""
}

.fa-battery-car,.fa-car-battery {
    --fa: ""
}

.fa-gift {
    --fa: ""
}

.fa-dice-two {
    --fa: ""
}

.fa-chess-queen {
    --fa: ""
}

.fa-glasses {
    --fa: ""
}

.fa-chess-board {
    --fa: ""
}

.fa-building-circle-check {
    --fa: ""
}

.fa-person-chalkboard {
    --fa: ""
}

.fa-mars-stroke-h,.fa-mars-stroke-right {
    --fa: ""
}

.fa-hand-back-fist,.fa-hand-rock {
    --fa: ""
}

.fa-caret-square-up,.fa-square-caret-up {
    --fa: ""
}

.fa-cloud-showers-water {
    --fa: ""
}

.fa-bar-chart,.fa-chart-bar {
    --fa: ""
}

.fa-hands-bubbles,.fa-hands-wash {
    --fa: ""
}

.fa-less-than-equal {
    --fa: ""
}

.fa-train {
    --fa: ""
}

.fa-eye-low-vision,.fa-low-vision {
    --fa: ""
}

.fa-crow {
    --fa: ""
}

.fa-sailboat {
    --fa: ""
}

.fa-window-restore {
    --fa: ""
}

.fa-plus-square,.fa-square-plus {
    --fa: ""
}

.fa-torii-gate {
    --fa: ""
}

.fa-frog {
    --fa: ""
}

.fa-bucket {
    --fa: ""
}

.fa-image {
    --fa: ""
}

.fa-microphone {
    --fa: ""
}

.fa-cow {
    --fa: ""
}

.fa-caret-up {
    --fa: ""
}

.fa-screwdriver {
    --fa: ""
}

.fa-folder-closed {
    --fa: ""
}

.fa-house-tsunami {
    --fa: ""
}

.fa-square-nfi {
    --fa: ""
}

.fa-arrow-up-from-ground-water {
    --fa: ""
}

.fa-glass-martini-alt,.fa-martini-glass {
    --fa: ""
}

.fa-square-binary {
    --fa: ""
}

.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt {
    --fa: ""
}

.fa-columns,.fa-table-columns {
    --fa: ""
}

.fa-lemon {
    --fa: ""
}

.fa-head-side-mask {
    --fa: ""
}

.fa-handshake {
    --fa: ""
}

.fa-gem {
    --fa: ""
}

.fa-dolly,.fa-dolly-box {
    --fa: ""
}

.fa-smoking {
    --fa: ""
}

.fa-compress-arrows-alt,.fa-minimize {
    --fa: ""
}

.fa-monument {
    --fa: ""
}

.fa-snowplow {
    --fa: ""
}

.fa-angle-double-right,.fa-angles-right {
    --fa: ""
}

.fa-cannabis {
    --fa: ""
}

.fa-circle-play,.fa-play-circle {
    --fa: ""
}

.fa-tablets {
    --fa: ""
}

.fa-ethernet {
    --fa: ""
}

.fa-eur,.fa-euro,.fa-euro-sign {
    --fa: ""
}

.fa-chair {
    --fa: ""
}

.fa-check-circle,.fa-circle-check {
    --fa: ""
}

.fa-circle-stop,.fa-stop-circle {
    --fa: ""
}

.fa-compass-drafting,.fa-drafting-compass {
    --fa: ""
}

.fa-plate-wheat {
    --fa: ""
}

.fa-icicles {
    --fa: ""
}

.fa-person-shelter {
    --fa: ""
}

.fa-neuter {
    --fa: ""
}

.fa-id-badge {
    --fa: ""
}

.fa-marker {
    --fa: ""
}

.fa-face-laugh-beam,.fa-laugh-beam {
    --fa: ""
}

.fa-helicopter-symbol {
    --fa: ""
}

.fa-universal-access {
    --fa: ""
}

.fa-chevron-circle-up,.fa-circle-chevron-up {
    --fa: ""
}

.fa-lari-sign {
    --fa: ""
}

.fa-volcano {
    --fa: ""
}

.fa-person-walking-dashed-line-arrow-right {
    --fa: ""
}

.fa-gbp,.fa-pound-sign,.fa-sterling-sign {
    --fa: ""
}

.fa-viruses {
    --fa: ""
}

.fa-square-person-confined {
    --fa: ""
}

.fa-user-tie {
    --fa: ""
}

.fa-arrow-down-long,.fa-long-arrow-down {
    --fa: ""
}

.fa-tent-arrow-down-to-line {
    --fa: ""
}

.fa-certificate {
    --fa: ""
}

.fa-mail-reply-all,.fa-reply-all {
    --fa: ""
}

.fa-suitcase {
    --fa: ""
}

.fa-person-skating,.fa-skating {
    --fa: ""
}

.fa-filter-circle-dollar,.fa-funnel-dollar {
    --fa: ""
}

.fa-camera-retro {
    --fa: ""
}

.fa-arrow-circle-down,.fa-circle-arrow-down {
    --fa: ""
}

.fa-arrow-right-to-file,.fa-file-import {
    --fa: ""
}

.fa-external-link-square,.fa-square-arrow-up-right {
    --fa: ""
}

.fa-box-open {
    --fa: ""
}

.fa-scroll {
    --fa: ""
}

.fa-spa {
    --fa: ""
}

.fa-location-pin-lock {
    --fa: ""
}

.fa-pause {
    --fa: ""
}

.fa-hill-avalanche {
    --fa: ""
}

.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty {
    --fa: ""
}

.fa-bomb {
    --fa: ""
}

.fa-registered {
    --fa: ""
}

.fa-address-card,.fa-contact-card,.fa-vcard {
    --fa: ""
}

.fa-balance-scale-right,.fa-scale-unbalanced-flip {
    --fa: ""
}

.fa-subscript {
    --fa: ""
}

.fa-diamond-turn-right,.fa-directions {
    --fa: ""
}

.fa-burst {
    --fa: ""
}

.fa-house-laptop,.fa-laptop-house {
    --fa: ""
}

.fa-face-tired,.fa-tired {
    --fa: ""
}

.fa-money-bills {
    --fa: ""
}

.fa-smog {
    --fa: ""
}

.fa-crutch {
    --fa: ""
}

.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt {
    --fa: ""
}

.fa-palette {
    --fa: ""
}

.fa-arrows-turn-right {
    --fa: ""
}

.fa-vest {
    --fa: ""
}

.fa-ferry {
    --fa: ""
}

.fa-arrows-down-to-people {
    --fa: ""
}

.fa-seedling,.fa-sprout {
    --fa: ""
}

.fa-arrows-alt-h,.fa-left-right {
    --fa: ""
}

.fa-boxes-packing {
    --fa: ""
}

.fa-arrow-circle-left,.fa-circle-arrow-left {
    --fa: ""
}

.fa-group-arrows-rotate {
    --fa: ""
}

.fa-bowl-food {
    --fa: ""
}

.fa-candy-cane {
    --fa: ""
}

.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down {
    --fa: ""
}

.fa-cloud-bolt,.fa-thunderstorm {
    --fa: ""
}

.fa-remove-format,.fa-text-slash {
    --fa: ""
}

.fa-face-smile-wink,.fa-smile-wink {
    --fa: ""
}

.fa-file-word {
    --fa: ""
}

.fa-file-powerpoint {
    --fa: ""
}

.fa-arrows-h,.fa-arrows-left-right {
    --fa: ""
}

.fa-house-lock {
    --fa: ""
}

.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt {
    --fa: ""
}

.fa-children {
    --fa: ""
}

.fa-blackboard,.fa-chalkboard {
    --fa: ""
}

.fa-user-alt-slash,.fa-user-large-slash {
    --fa: ""
}

.fa-envelope-open {
    --fa: ""
}

.fa-handshake-alt-slash,.fa-handshake-simple-slash {
    --fa: ""
}

.fa-mattress-pillow {
    --fa: ""
}

.fa-guarani-sign {
    --fa: ""
}

.fa-arrows-rotate,.fa-refresh,.fa-sync {
    --fa: ""
}

.fa-fire-extinguisher {
    --fa: ""
}

.fa-cruzeiro-sign {
    --fa: ""
}

.fa-greater-than-equal {
    --fa: ""
}

.fa-shield-alt,.fa-shield-halved {
    --fa: ""
}

.fa-atlas,.fa-book-atlas {
    --fa: ""
}

.fa-virus {
    --fa: ""
}

.fa-envelope-circle-check {
    --fa: ""
}

.fa-layer-group {
    --fa: ""
}

.fa-arrows-to-dot {
    --fa: ""
}

.fa-archway {
    --fa: ""
}

.fa-heart-circle-check {
    --fa: ""
}

.fa-house-chimney-crack,.fa-house-damage {
    --fa: ""
}

.fa-file-archive,.fa-file-zipper {
    --fa: ""
}

.fa-square {
    --fa: ""
}

.fa-glass-martini,.fa-martini-glass-empty {
    --fa: ""
}

.fa-couch {
    --fa: ""
}

.fa-cedi-sign {
    --fa: ""
}

.fa-italic {
    --fa: ""
}

.fa-table-cells-column-lock {
    --fa: ""
}

.fa-church {
    --fa: ""
}

.fa-comments-dollar {
    --fa: ""
}

.fa-democrat {
    --fa: ""
}

.fa-z {
    --fa: "Z"
}

.fa-person-skiing,.fa-skiing {
    --fa: ""
}

.fa-road-lock {
    --fa: ""
}

.fa-a {
    --fa: "A"
}

.fa-temperature-arrow-down,.fa-temperature-down {
    --fa: ""
}

.fa-feather-alt,.fa-feather-pointed {
    --fa: ""
}

.fa-p {
    --fa: "P"
}

.fa-snowflake {
    --fa: ""
}

.fa-newspaper {
    --fa: ""
}

.fa-ad,.fa-rectangle-ad {
    --fa: ""
}

.fa-arrow-circle-right,.fa-circle-arrow-right {
    --fa: ""
}

.fa-filter-circle-xmark {
    --fa: ""
}

.fa-locust {
    --fa: ""
}

.fa-sort,.fa-unsorted {
    --fa: ""
}

.fa-list-1-2,.fa-list-numeric,.fa-list-ol {
    --fa: ""
}

.fa-person-dress-burst {
    --fa: ""
}

.fa-money-check-alt,.fa-money-check-dollar {
    --fa: ""
}

.fa-vector-square {
    --fa: ""
}

.fa-bread-slice {
    --fa: ""
}

.fa-language {
    --fa: ""
}

.fa-face-kiss-wink-heart,.fa-kiss-wink-heart {
    --fa: ""
}

.fa-filter {
    --fa: ""
}

.fa-question {
    --fa: "?"
}

.fa-file-signature {
    --fa: ""
}

.fa-arrows-alt,.fa-up-down-left-right {
    --fa: ""
}

.fa-house-chimney-user {
    --fa: ""
}

.fa-hand-holding-heart {
    --fa: ""
}

.fa-puzzle-piece {
    --fa: ""
}

.fa-money-check {
    --fa: ""
}

.fa-star-half-alt,.fa-star-half-stroke {
    --fa: ""
}

.fa-code {
    --fa: ""
}

.fa-glass-whiskey,.fa-whiskey-glass {
    --fa: ""
}

.fa-building-circle-exclamation {
    --fa: ""
}

.fa-magnifying-glass-chart {
    --fa: ""
}

.fa-arrow-up-right-from-square,.fa-external-link {
    --fa: ""
}

.fa-cubes-stacked {
    --fa: ""
}

.fa-krw,.fa-won,.fa-won-sign {
    --fa: ""
}

.fa-virus-covid {
    --fa: ""
}

.fa-austral-sign {
    --fa: ""
}

.fa-f {
    --fa: "F"
}

.fa-leaf {
    --fa: ""
}

.fa-road {
    --fa: ""
}

.fa-cab,.fa-taxi {
    --fa: ""
}

.fa-person-circle-plus {
    --fa: ""
}

.fa-chart-pie,.fa-pie-chart {
    --fa: ""
}

.fa-bolt-lightning {
    --fa: ""
}

.fa-sack-xmark {
    --fa: ""
}

.fa-file-excel {
    --fa: ""
}

.fa-file-contract {
    --fa: ""
}

.fa-fish-fins {
    --fa: ""
}

.fa-building-flag {
    --fa: ""
}

.fa-face-grin-beam,.fa-grin-beam {
    --fa: ""
}

.fa-object-ungroup {
    --fa: ""
}

.fa-poop {
    --fa: ""
}

.fa-location-pin,.fa-map-marker {
    --fa: ""
}

.fa-kaaba {
    --fa: ""
}

.fa-toilet-paper {
    --fa: ""
}

.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety {
    --fa: ""
}

.fa-eject {
    --fa: ""
}

.fa-arrow-alt-circle-right,.fa-circle-right {
    --fa: ""
}

.fa-plane-circle-check {
    --fa: ""
}

.fa-face-rolling-eyes,.fa-meh-rolling-eyes {
    --fa: ""
}

.fa-object-group {
    --fa: ""
}

.fa-chart-line,.fa-line-chart {
    --fa: ""
}

.fa-mask-ventilator {
    --fa: ""
}

.fa-arrow-right {
    --fa: ""
}

.fa-map-signs,.fa-signs-post {
    --fa: ""
}

.fa-cash-register {
    --fa: ""
}

.fa-person-circle-question {
    --fa: ""
}

.fa-h {
    --fa: "H"
}

.fa-tarp {
    --fa: ""
}

.fa-screwdriver-wrench,.fa-tools {
    --fa: ""
}

.fa-arrows-to-eye {
    --fa: ""
}

.fa-plug-circle-bolt {
    --fa: ""
}

.fa-heart {
    --fa: ""
}

.fa-mars-and-venus {
    --fa: ""
}

.fa-home-user,.fa-house-user {
    --fa: ""
}

.fa-dumpster-fire {
    --fa: ""
}

.fa-house-crack {
    --fa: ""
}

.fa-cocktail,.fa-martini-glass-citrus {
    --fa: ""
}

.fa-face-surprise,.fa-surprise {
    --fa: ""
}

.fa-bottle-water {
    --fa: ""
}

.fa-circle-pause,.fa-pause-circle {
    --fa: ""
}

.fa-toilet-paper-slash {
    --fa: ""
}

.fa-apple-alt,.fa-apple-whole {
    --fa: ""
}

.fa-kitchen-set {
    --fa: ""
}

.fa-r {
    --fa: "R"
}

.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter {
    --fa: ""
}

.fa-cube {
    --fa: ""
}

.fa-bitcoin-sign {
    --fa: ""
}

.fa-shield-dog {
    --fa: ""
}

.fa-solar-panel {
    --fa: ""
}

.fa-lock-open {
    --fa: ""
}

.fa-elevator {
    --fa: ""
}

.fa-money-bill-transfer {
    --fa: ""
}

.fa-money-bill-trend-up {
    --fa: ""
}

.fa-house-flood-water-circle-arrow-right {
    --fa: ""
}

.fa-poll-h,.fa-square-poll-horizontal {
    --fa: ""
}

.fa-circle {
    --fa: ""
}

.fa-backward-fast,.fa-fast-backward {
    --fa: ""
}

.fa-recycle {
    --fa: ""
}

.fa-user-astronaut {
    --fa: ""
}

.fa-plane-slash {
    --fa: ""
}

.fa-trademark {
    --fa: ""
}

.fa-basketball,.fa-basketball-ball {
    --fa: ""
}

.fa-satellite-dish {
    --fa: ""
}

.fa-arrow-alt-circle-up,.fa-circle-up {
    --fa: ""
}

.fa-mobile-alt,.fa-mobile-screen-button {
    --fa: ""
}

.fa-volume-high,.fa-volume-up {
    --fa: ""
}

.fa-users-rays {
    --fa: ""
}

.fa-wallet {
    --fa: ""
}

.fa-clipboard-check {
    --fa: ""
}

.fa-file-audio {
    --fa: ""
}

.fa-burger,.fa-hamburger {
    --fa: ""
}

.fa-wrench {
    --fa: ""
}

.fa-bugs {
    --fa: ""
}

.fa-rupee,.fa-rupee-sign {
    --fa: ""
}

.fa-file-image {
    --fa: ""
}

.fa-circle-question,.fa-question-circle {
    --fa: ""
}

.fa-plane-departure {
    --fa: ""
}

.fa-handshake-slash {
    --fa: ""
}

.fa-book-bookmark {
    --fa: ""
}

.fa-code-branch {
    --fa: ""
}

.fa-hat-cowboy {
    --fa: ""
}

.fa-bridge {
    --fa: ""
}

.fa-phone-alt,.fa-phone-flip {
    --fa: ""
}

.fa-truck-front {
    --fa: ""
}

.fa-cat {
    --fa: ""
}

.fa-anchor-circle-exclamation {
    --fa: ""
}

.fa-truck-field {
    --fa: ""
}

.fa-route {
    --fa: ""
}

.fa-clipboard-question {
    --fa: ""
}

.fa-panorama {
    --fa: ""
}

.fa-comment-medical {
    --fa: ""
}

.fa-teeth-open {
    --fa: ""
}

.fa-file-circle-minus {
    --fa: ""
}

.fa-tags {
    --fa: ""
}

.fa-wine-glass {
    --fa: ""
}

.fa-fast-forward,.fa-forward-fast {
    --fa: ""
}

.fa-face-meh-blank,.fa-meh-blank {
    --fa: ""
}

.fa-parking,.fa-square-parking {
    --fa: ""
}

.fa-house-signal {
    --fa: ""
}

.fa-bars-progress,.fa-tasks-alt {
    --fa: ""
}

.fa-faucet-drip {
    --fa: ""
}

.fa-cart-flatbed,.fa-dolly-flatbed {
    --fa: ""
}

.fa-ban-smoking,.fa-smoking-ban {
    --fa: ""
}

.fa-terminal {
    --fa: ""
}

.fa-mobile-button {
    --fa: ""
}

.fa-house-medical-flag {
    --fa: ""
}

.fa-basket-shopping,.fa-shopping-basket {
    --fa: ""
}

.fa-tape {
    --fa: ""
}

.fa-bus-alt,.fa-bus-simple {
    --fa: ""
}

.fa-eye {
    --fa: ""
}

.fa-face-sad-cry,.fa-sad-cry {
    --fa: ""
}

.fa-audio-description {
    --fa: ""
}

.fa-person-military-to-person {
    --fa: ""
}

.fa-file-shield {
    --fa: ""
}

.fa-user-slash {
    --fa: ""
}

.fa-pen {
    --fa: ""
}

.fa-tower-observation {
    --fa: ""
}

.fa-file-code {
    --fa: ""
}

.fa-signal,.fa-signal-5,.fa-signal-perfect {
    --fa: ""
}

.fa-bus {
    --fa: ""
}

.fa-heart-circle-xmark {
    --fa: ""
}

.fa-home-lg,.fa-house-chimney {
    --fa: ""
}

.fa-window-maximize {
    --fa: ""
}

.fa-face-frown,.fa-frown {
    --fa: ""
}

.fa-prescription {
    --fa: ""
}

.fa-shop,.fa-store-alt {
    --fa: ""
}

.fa-floppy-disk,.fa-save {
    --fa: ""
}

.fa-vihara {
    --fa: ""
}

.fa-balance-scale-left,.fa-scale-unbalanced {
    --fa: ""
}

.fa-sort-asc,.fa-sort-up {
    --fa: ""
}

.fa-comment-dots,.fa-commenting {
    --fa: ""
}

.fa-plant-wilt {
    --fa: ""
}

.fa-diamond {
    --fa: ""
}

.fa-face-grin-squint,.fa-grin-squint {
    --fa: ""
}

.fa-hand-holding-dollar,.fa-hand-holding-usd {
    --fa: ""
}

.fa-chart-diagram {
    --fa: ""
}

.fa-bacterium {
    --fa: ""
}

.fa-hand-pointer {
    --fa: ""
}

.fa-drum-steelpan {
    --fa: ""
}

.fa-hand-scissors {
    --fa: ""
}

.fa-hands-praying,.fa-praying-hands {
    --fa: ""
}

.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo {
    --fa: ""
}

.fa-biohazard {
    --fa: ""
}

.fa-location,.fa-location-crosshairs {
    --fa: ""
}

.fa-mars-double {
    --fa: ""
}

.fa-child-dress {
    --fa: ""
}

.fa-users-between-lines {
    --fa: ""
}

.fa-lungs-virus {
    --fa: ""
}

.fa-face-grin-tears,.fa-grin-tears {
    --fa: ""
}

.fa-phone {
    --fa: ""
}

.fa-calendar-times,.fa-calendar-xmark {
    --fa: ""
}

.fa-child-reaching {
    --fa: ""
}

.fa-head-side-virus {
    --fa: ""
}

.fa-user-cog,.fa-user-gear {
    --fa: ""
}

.fa-arrow-up-1-9,.fa-sort-numeric-up {
    --fa: ""
}

.fa-door-closed {
    --fa: ""
}

.fa-shield-virus {
    --fa: ""
}

.fa-dice-six {
    --fa: ""
}

.fa-mosquito-net {
    --fa: ""
}

.fa-file-fragment {
    --fa: ""
}

.fa-bridge-water {
    --fa: ""
}

.fa-person-booth {
    --fa: ""
}

.fa-text-width {
    --fa: ""
}

.fa-hat-wizard {
    --fa: ""
}

.fa-pen-fancy {
    --fa: ""
}

.fa-digging,.fa-person-digging {
    --fa: ""
}

.fa-trash {
    --fa: ""
}

.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average {
    --fa: ""
}

.fa-book-medical {
    --fa: ""
}

.fa-poo {
    --fa: ""
}

.fa-quote-right,.fa-quote-right-alt {
    --fa: ""
}

.fa-shirt,.fa-t-shirt,.fa-tshirt {
    --fa: ""
}

.fa-cubes {
    --fa: ""
}

.fa-divide {
    --fa: ""
}

.fa-tenge,.fa-tenge-sign {
    --fa: ""
}

.fa-headphones {
    --fa: ""
}

.fa-hands-holding {
    --fa: ""
}

.fa-hands-clapping {
    --fa: ""
}

.fa-republican {
    --fa: ""
}

.fa-arrow-left {
    --fa: ""
}

.fa-person-circle-xmark {
    --fa: ""
}

.fa-ruler {
    --fa: ""
}

.fa-align-left {
    --fa: ""
}

.fa-dice-d6 {
    --fa: ""
}

.fa-restroom {
    --fa: ""
}

.fa-j {
    --fa: "J"
}

.fa-users-viewfinder {
    --fa: ""
}

.fa-file-video {
    --fa: ""
}

.fa-external-link-alt,.fa-up-right-from-square {
    --fa: ""
}

.fa-table-cells,.fa-th {
    --fa: ""
}

.fa-file-pdf {
    --fa: ""
}

.fa-bible,.fa-book-bible {
    --fa: ""
}

.fa-o {
    --fa: "O"
}

.fa-medkit,.fa-suitcase-medical {
    --fa: ""
}

.fa-user-secret {
    --fa: ""
}

.fa-otter {
    --fa: ""
}

.fa-female,.fa-person-dress {
    --fa: ""
}

.fa-comment-dollar {
    --fa: ""
}

.fa-briefcase-clock,.fa-business-time {
    --fa: ""
}

.fa-table-cells-large,.fa-th-large {
    --fa: ""
}

.fa-book-tanakh,.fa-tanakh {
    --fa: ""
}

.fa-phone-volume,.fa-volume-control-phone {
    --fa: ""
}

.fa-hat-cowboy-side {
    --fa: ""
}

.fa-clipboard-user {
    --fa: ""
}

.fa-child {
    --fa: ""
}

.fa-lira-sign {
    --fa: ""
}

.fa-satellite {
    --fa: ""
}

.fa-plane-lock {
    --fa: ""
}

.fa-tag {
    --fa: ""
}

.fa-comment {
    --fa: ""
}

.fa-birthday-cake,.fa-cake,.fa-cake-candles {
    --fa: ""
}

.fa-envelope {
    --fa: ""
}

.fa-angle-double-up,.fa-angles-up {
    --fa: ""
}

.fa-paperclip {
    --fa: ""
}

.fa-arrow-right-to-city {
    --fa: ""
}

.fa-ribbon {
    --fa: ""
}

.fa-lungs {
    --fa: ""
}

.fa-arrow-up-9-1,.fa-sort-numeric-up-alt {
    --fa: ""
}

.fa-litecoin-sign {
    --fa: ""
}

.fa-border-none {
    --fa: ""
}

.fa-circle-nodes {
    --fa: ""
}

.fa-parachute-box {
    --fa: ""
}

.fa-indent {
    --fa: ""
}

.fa-truck-field-un {
    --fa: ""
}

.fa-hourglass,.fa-hourglass-empty {
    --fa: ""
}

.fa-mountain {
    --fa: ""
}

.fa-user-doctor,.fa-user-md {
    --fa: ""
}

.fa-circle-info,.fa-info-circle {
    --fa: ""
}

.fa-cloud-meatball {
    --fa: ""
}

.fa-camera,.fa-camera-alt {
    --fa: ""
}

.fa-square-virus {
    --fa: ""
}

.fa-meteor {
    --fa: ""
}

.fa-car-on {
    --fa: ""
}

.fa-sleigh {
    --fa: ""
}

.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down {
    --fa: ""
}

.fa-hand-holding-droplet,.fa-hand-holding-water {
    --fa: ""
}

.fa-water {
    --fa: ""
}

.fa-calendar-check {
    --fa: ""
}

.fa-braille {
    --fa: ""
}

.fa-prescription-bottle-alt,.fa-prescription-bottle-medical {
    --fa: ""
}

.fa-landmark {
    --fa: ""
}

.fa-truck {
    --fa: ""
}

.fa-crosshairs {
    --fa: ""
}

.fa-person-cane {
    --fa: ""
}

.fa-tent {
    --fa: ""
}

.fa-vest-patches {
    --fa: ""
}

.fa-check-double {
    --fa: ""
}

.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down {
    --fa: ""
}

.fa-money-bill-wheat {
    --fa: ""
}

.fa-cookie {
    --fa: ""
}

.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo {
    --fa: ""
}

.fa-hard-drive,.fa-hdd {
    --fa: ""
}

.fa-face-grin-squint-tears,.fa-grin-squint-tears {
    --fa: ""
}

.fa-dumbbell {
    --fa: ""
}

.fa-list-alt,.fa-rectangle-list {
    --fa: ""
}

.fa-tarp-droplet {
    --fa: ""
}

.fa-house-medical-circle-check {
    --fa: ""
}

.fa-person-skiing-nordic,.fa-skiing-nordic {
    --fa: ""
}

.fa-calendar-plus {
    --fa: ""
}

.fa-plane-arrival {
    --fa: ""
}

.fa-arrow-alt-circle-left,.fa-circle-left {
    --fa: ""
}

.fa-subway,.fa-train-subway {
    --fa: ""
}

.fa-chart-gantt {
    --fa: ""
}

.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr {
    --fa: ""
}

.fa-crop-alt,.fa-crop-simple {
    --fa: ""
}

.fa-money-bill-1,.fa-money-bill-alt {
    --fa: ""
}

.fa-left-long,.fa-long-arrow-alt-left {
    --fa: ""
}

.fa-dna {
    --fa: ""
}

.fa-virus-slash {
    --fa: ""
}

.fa-minus,.fa-subtract {
    --fa: ""
}

.fa-chess {
    --fa: ""
}

.fa-arrow-left-long,.fa-long-arrow-left {
    --fa: ""
}

.fa-plug-circle-check {
    --fa: ""
}

.fa-street-view {
    --fa: ""
}

.fa-franc-sign {
    --fa: ""
}

.fa-volume-off {
    --fa: ""
}

.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting {
    --fa: ""
}

.fa-cog,.fa-gear {
    --fa: ""
}

.fa-droplet-slash,.fa-tint-slash {
    --fa: ""
}

.fa-mosque {
    --fa: ""
}

.fa-mosquito {
    --fa: ""
}

.fa-star-of-david {
    --fa: ""
}

.fa-person-military-rifle {
    --fa: ""
}

.fa-cart-shopping,.fa-shopping-cart {
    --fa: ""
}

.fa-vials {
    --fa: ""
}

.fa-plug-circle-plus {
    --fa: ""
}

.fa-place-of-worship {
    --fa: ""
}

.fa-grip-vertical {
    --fa: ""
}

.fa-hexagon-nodes {
    --fa: ""
}

.fa-arrow-turn-up,.fa-level-up {
    --fa: ""
}

.fa-u {
    --fa: "U"
}

.fa-square-root-alt,.fa-square-root-variable {
    --fa: ""
}

.fa-clock,.fa-clock-four {
    --fa: ""
}

.fa-backward-step,.fa-step-backward {
    --fa: ""
}

.fa-pallet {
    --fa: ""
}

.fa-faucet {
    --fa: ""
}

.fa-baseball-bat-ball {
    --fa: ""
}

.fa-s {
    --fa: "S"
}

.fa-timeline {
    --fa: ""
}

.fa-keyboard {
    --fa: ""
}

.fa-caret-down {
    --fa: ""
}

.fa-clinic-medical,.fa-house-chimney-medical {
    --fa: ""
}

.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters {
    --fa: ""
}

.fa-mobile-android-alt,.fa-mobile-screen {
    --fa: ""
}

.fa-plane-up {
    --fa: ""
}

.fa-piggy-bank {
    --fa: ""
}

.fa-battery-3,.fa-battery-half {
    --fa: ""
}

.fa-mountain-city {
    --fa: ""
}

.fa-coins {
    --fa: ""
}

.fa-khanda {
    --fa: ""
}

.fa-sliders,.fa-sliders-h {
    --fa: ""
}

.fa-folder-tree {
    --fa: ""
}

.fa-network-wired {
    --fa: ""
}

.fa-map-pin {
    --fa: ""
}

.fa-hamsa {
    --fa: ""
}

.fa-cent-sign {
    --fa: ""
}

.fa-flask {
    --fa: ""
}

.fa-person-pregnant {
    --fa: ""
}

.fa-wand-sparkles {
    --fa: ""
}

.fa-ellipsis-v,.fa-ellipsis-vertical {
    --fa: ""
}

.fa-ticket {
    --fa: ""
}

.fa-power-off {
    --fa: ""
}

.fa-long-arrow-alt-right,.fa-right-long {
    --fa: ""
}

.fa-flag-usa {
    --fa: ""
}

.fa-laptop-file {
    --fa: ""
}

.fa-teletype,.fa-tty {
    --fa: ""
}

.fa-diagram-next {
    --fa: ""
}

.fa-person-rifle {
    --fa: ""
}

.fa-house-medical-circle-exclamation {
    --fa: ""
}

.fa-closed-captioning {
    --fa: ""
}

.fa-hiking,.fa-person-hiking {
    --fa: ""
}

.fa-venus-double {
    --fa: ""
}

.fa-images {
    --fa: ""
}

.fa-calculator {
    --fa: ""
}

.fa-people-pulling {
    --fa: ""
}

.fa-n {
    --fa: "N"
}

.fa-cable-car,.fa-tram {
    --fa: ""
}

.fa-cloud-rain {
    --fa: ""
}

.fa-building-circle-xmark {
    --fa: ""
}

.fa-ship {
    --fa: ""
}

.fa-arrows-down-to-line {
    --fa: ""
}

.fa-download {
    --fa: ""
}

.fa-face-grin,.fa-grin {
    --fa: ""
}

.fa-backspace,.fa-delete-left {
    --fa: ""
}

.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper {
    --fa: ""
}

.fa-file-circle-check {
    --fa: ""
}

.fa-forward {
    --fa: ""
}

.fa-mobile,.fa-mobile-android,.fa-mobile-phone {
    --fa: ""
}

.fa-face-meh,.fa-meh {
    --fa: ""
}

.fa-align-center {
    --fa: ""
}

.fa-book-dead,.fa-book-skull {
    --fa: ""
}

.fa-drivers-license,.fa-id-card {
    --fa: ""
}

.fa-dedent,.fa-outdent {
    --fa: ""
}

.fa-heart-circle-exclamation {
    --fa: ""
}

.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house {
    --fa: ""
}

.fa-calendar-week {
    --fa: ""
}

.fa-laptop-medical {
    --fa: ""
}

.fa-b {
    --fa: "B"
}

.fa-file-medical {
    --fa: ""
}

.fa-dice-one {
    --fa: ""
}

.fa-kiwi-bird {
    --fa: ""
}

.fa-arrow-right-arrow-left,.fa-exchange {
    --fa: ""
}

.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right {
    --fa: ""
}

.fa-cutlery,.fa-utensils {
    --fa: ""
}

.fa-arrow-up-wide-short,.fa-sort-amount-up {
    --fa: ""
}

.fa-mill-sign {
    --fa: ""
}

.fa-bowl-rice {
    --fa: ""
}

.fa-skull {
    --fa: ""
}

.fa-broadcast-tower,.fa-tower-broadcast {
    --fa: ""
}

.fa-truck-pickup {
    --fa: ""
}

.fa-long-arrow-alt-up,.fa-up-long {
    --fa: ""
}

.fa-stop {
    --fa: ""
}

.fa-code-merge {
    --fa: ""
}

.fa-upload {
    --fa: ""
}

.fa-hurricane {
    --fa: ""
}

.fa-mound {
    --fa: ""
}

.fa-toilet-portable {
    --fa: ""
}

.fa-compact-disc {
    --fa: ""
}

.fa-file-arrow-down,.fa-file-download {
    --fa: ""
}

.fa-caravan {
    --fa: ""
}

.fa-shield-cat {
    --fa: ""
}

.fa-bolt,.fa-zap {
    --fa: ""
}

.fa-glass-water {
    --fa: ""
}

.fa-oil-well {
    --fa: ""
}

.fa-vault {
    --fa: ""
}

.fa-mars {
    --fa: ""
}

.fa-toilet {
    --fa: ""
}

.fa-plane-circle-xmark {
    --fa: ""
}

.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign {
    --fa: ""
}

.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign {
    --fa: ""
}

.fa-sun {
    --fa: ""
}

.fa-guitar {
    --fa: ""
}

.fa-face-laugh-wink,.fa-laugh-wink {
    --fa: ""
}

.fa-horse-head {
    --fa: ""
}

.fa-bore-hole {
    --fa: ""
}

.fa-industry {
    --fa: ""
}

.fa-arrow-alt-circle-down,.fa-circle-down {
    --fa: ""
}

.fa-arrows-turn-to-dots {
    --fa: ""
}

.fa-florin-sign {
    --fa: ""
}

.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt {
    --fa: ""
}

.fa-less-than {
    --fa: "<"
}

.fa-angle-down {
    --fa: ""
}

.fa-car-tunnel {
    --fa: ""
}

.fa-head-side-cough {
    --fa: ""
}

.fa-grip-lines {
    --fa: ""
}

.fa-thumbs-down {
    --fa: ""
}

.fa-user-lock {
    --fa: ""
}

.fa-arrow-right-long,.fa-long-arrow-right {
    --fa: ""
}

.fa-anchor-circle-xmark {
    --fa: ""
}

.fa-ellipsis,.fa-ellipsis-h {
    --fa: ""
}

.fa-chess-pawn {
    --fa: ""
}

.fa-first-aid,.fa-kit-medical {
    --fa: ""
}

.fa-person-through-window {
    --fa: ""
}

.fa-toolbox {
    --fa: ""
}

.fa-hands-holding-circle {
    --fa: ""
}

.fa-bug {
    --fa: ""
}

.fa-credit-card,.fa-credit-card-alt {
    --fa: ""
}

.fa-automobile,.fa-car {
    --fa: ""
}

.fa-hand-holding-hand {
    --fa: ""
}

.fa-book-open-reader,.fa-book-reader {
    --fa: ""
}

.fa-mountain-sun {
    --fa: ""
}

.fa-arrows-left-right-to-line {
    --fa: ""
}

.fa-dice-d20 {
    --fa: ""
}

.fa-truck-droplet {
    --fa: ""
}

.fa-file-circle-xmark {
    --fa: ""
}

.fa-temperature-arrow-up,.fa-temperature-up {
    --fa: ""
}

.fa-medal {
    --fa: ""
}

.fa-bed {
    --fa: ""
}

.fa-h-square,.fa-square-h {
    --fa: ""
}

.fa-podcast {
    --fa: ""
}

.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full {
    --fa: ""
}

.fa-bell {
    --fa: ""
}

.fa-superscript {
    --fa: ""
}

.fa-plug-circle-xmark {
    --fa: ""
}

.fa-star-of-life {
    --fa: ""
}

.fa-phone-slash {
    --fa: ""
}

.fa-paint-roller {
    --fa: ""
}

.fa-hands-helping,.fa-handshake-angle {
    --fa: ""
}

.fa-location-dot,.fa-map-marker-alt {
    --fa: ""
}

.fa-file {
    --fa: ""
}

.fa-greater-than {
    --fa: ">"
}

.fa-person-swimming,.fa-swimmer {
    --fa: ""
}

.fa-arrow-down {
    --fa: ""
}

.fa-droplet,.fa-tint {
    --fa: ""
}

.fa-eraser {
    --fa: ""
}

.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas {
    --fa: ""
}

.fa-person-burst {
    --fa: ""
}

.fa-dove {
    --fa: ""
}

.fa-battery-0,.fa-battery-empty {
    --fa: ""
}

.fa-socks {
    --fa: ""
}

.fa-inbox {
    --fa: ""
}

.fa-section {
    --fa: ""
}

.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast {
    --fa: ""
}

.fa-envelope-open-text {
    --fa: ""
}

.fa-hospital,.fa-hospital-alt,.fa-hospital-wide {
    --fa: ""
}

.fa-wine-bottle {
    --fa: ""
}

.fa-chess-rook {
    --fa: ""
}

.fa-bars-staggered,.fa-reorder,.fa-stream {
    --fa: ""
}

.fa-dharmachakra {
    --fa: ""
}

.fa-hotdog {
    --fa: ""
}

.fa-blind,.fa-person-walking-with-cane {
    --fa: ""
}

.fa-drum {
    --fa: ""
}

.fa-ice-cream {
    --fa: ""
}

.fa-heart-circle-bolt {
    --fa: ""
}

.fa-fax {
    --fa: ""
}

.fa-paragraph {
    --fa: ""
}

.fa-check-to-slot,.fa-vote-yea {
    --fa: ""
}

.fa-star-half {
    --fa: ""
}

.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked {
    --fa: ""
}

.fa-chain,.fa-link {
    --fa: ""
}

.fa-assistive-listening-systems,.fa-ear-listen {
    --fa: ""
}

.fa-tree-city {
    --fa: ""
}

.fa-play {
    --fa: ""
}

.fa-font {
    --fa: ""
}

.fa-table-cells-row-lock {
    --fa: ""
}

.fa-rupiah-sign {
    --fa: ""
}

.fa-magnifying-glass,.fa-search {
    --fa: ""
}

.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball {
    --fa: ""
}

.fa-diagnoses,.fa-person-dots-from-line {
    --fa: ""
}

.fa-trash-can-arrow-up,.fa-trash-restore-alt {
    --fa: ""
}

.fa-naira-sign {
    --fa: ""
}

.fa-cart-arrow-down {
    --fa: ""
}

.fa-walkie-talkie {
    --fa: ""
}

.fa-file-edit,.fa-file-pen {
    --fa: ""
}

.fa-receipt {
    --fa: ""
}

.fa-pen-square,.fa-pencil-square,.fa-square-pen {
    --fa: ""
}

.fa-suitcase-rolling {
    --fa: ""
}

.fa-person-circle-exclamation {
    --fa: ""
}

.fa-chevron-down {
    --fa: ""
}

.fa-battery,.fa-battery-5,.fa-battery-full {
    --fa: ""
}

.fa-skull-crossbones {
    --fa: ""
}

.fa-code-compare {
    --fa: ""
}

.fa-list-dots,.fa-list-ul {
    --fa: ""
}

.fa-school-lock {
    --fa: ""
}

.fa-tower-cell {
    --fa: ""
}

.fa-down-long,.fa-long-arrow-alt-down {
    --fa: ""
}

.fa-ranking-star {
    --fa: ""
}

.fa-chess-king {
    --fa: ""
}

.fa-person-harassing {
    --fa: ""
}

.fa-brazilian-real-sign {
    --fa: ""
}

.fa-landmark-alt,.fa-landmark-dome {
    --fa: ""
}

.fa-arrow-up {
    --fa: ""
}

.fa-television,.fa-tv,.fa-tv-alt {
    --fa: ""
}

.fa-shrimp {
    --fa: ""
}

.fa-list-check,.fa-tasks {
    --fa: ""
}

.fa-jug-detergent {
    --fa: ""
}

.fa-circle-user,.fa-user-circle {
    --fa: ""
}

.fa-user-shield {
    --fa: ""
}

.fa-wind {
    --fa: ""
}

.fa-car-burst,.fa-car-crash {
    --fa: ""
}

.fa-y {
    --fa: "Y"
}

.fa-person-snowboarding,.fa-snowboarding {
    --fa: ""
}

.fa-shipping-fast,.fa-truck-fast {
    --fa: ""
}

.fa-fish {
    --fa: ""
}

.fa-user-graduate {
    --fa: ""
}

.fa-adjust,.fa-circle-half-stroke {
    --fa: ""
}

.fa-clapperboard {
    --fa: ""
}

.fa-circle-radiation,.fa-radiation-alt {
    --fa: ""
}

.fa-baseball,.fa-baseball-ball {
    --fa: ""
}

.fa-jet-fighter-up {
    --fa: ""
}

.fa-diagram-project,.fa-project-diagram {
    --fa: ""
}

.fa-copy {
    --fa: ""
}

.fa-volume-mute,.fa-volume-times,.fa-volume-xmark {
    --fa: ""
}

.fa-hand-sparkles {
    --fa: ""
}

.fa-grip,.fa-grip-horizontal {
    --fa: ""
}

.fa-share-from-square,.fa-share-square {
    --fa: ""
}

.fa-child-combatant,.fa-child-rifle {
    --fa: ""
}

.fa-gun {
    --fa: ""
}

.fa-phone-square,.fa-square-phone {
    --fa: ""
}

.fa-add,.fa-plus {
    --fa: "+"
}

.fa-expand {
    --fa: ""
}

.fa-computer {
    --fa: ""
}

.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark {
    --fa: ""
}

.fa-arrows,.fa-arrows-up-down-left-right {
    --fa: ""
}

.fa-chalkboard-teacher,.fa-chalkboard-user {
    --fa: ""
}

.fa-peso-sign {
    --fa: ""
}

.fa-building-shield {
    --fa: ""
}

.fa-baby {
    --fa: ""
}

.fa-users-line {
    --fa: ""
}

.fa-quote-left,.fa-quote-left-alt {
    --fa: ""
}

.fa-tractor {
    --fa: ""
}

.fa-trash-arrow-up,.fa-trash-restore {
    --fa: ""
}

.fa-arrow-down-up-lock {
    --fa: ""
}

.fa-lines-leaning {
    --fa: ""
}

.fa-ruler-combined {
    --fa: ""
}

.fa-copyright {
    --fa: ""
}

.fa-equals {
    --fa: "="
}

.fa-blender {
    --fa: ""
}

.fa-teeth {
    --fa: ""
}

.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign {
    --fa: ""
}

.fa-map {
    --fa: ""
}

.fa-rocket {
    --fa: ""
}

.fa-photo-film,.fa-photo-video {
    --fa: ""
}

.fa-folder-minus {
    --fa: ""
}

.fa-hexagon-nodes-bolt {
    --fa: ""
}

.fa-store {
    --fa: ""
}

.fa-arrow-trend-up {
    --fa: ""
}

.fa-plug-circle-minus {
    --fa: ""
}

.fa-sign,.fa-sign-hanging {
    --fa: ""
}

.fa-bezier-curve {
    --fa: ""
}

.fa-bell-slash {
    --fa: ""
}

.fa-tablet,.fa-tablet-android {
    --fa: ""
}

.fa-school-flag {
    --fa: ""
}

.fa-fill {
    --fa: ""
}

.fa-angle-up {
    --fa: ""
}

.fa-drumstick-bite {
    --fa: ""
}

.fa-holly-berry {
    --fa: ""
}

.fa-chevron-left {
    --fa: ""
}

.fa-bacteria {
    --fa: ""
}

.fa-hand-lizard {
    --fa: ""
}

.fa-notdef {
    --fa: ""
}

.fa-disease {
    --fa: ""
}

.fa-briefcase-medical {
    --fa: ""
}

.fa-genderless {
    --fa: ""
}

.fa-chevron-right {
    --fa: ""
}

.fa-retweet {
    --fa: ""
}

.fa-car-alt,.fa-car-rear {
    --fa: ""
}

.fa-pump-soap {
    --fa: ""
}

.fa-video-slash {
    --fa: ""
}

.fa-battery-2,.fa-battery-quarter {
    --fa: ""
}

.fa-radio {
    --fa: ""
}

.fa-baby-carriage,.fa-carriage-baby {
    --fa: ""
}

.fa-traffic-light {
    --fa: ""
}

.fa-thermometer {
    --fa: ""
}

.fa-vr-cardboard {
    --fa: ""
}

.fa-hand-middle-finger {
    --fa: ""
}

.fa-percent,.fa-percentage {
    --fa: "%"
}

.fa-truck-moving {
    --fa: ""
}

.fa-glass-water-droplet {
    --fa: ""
}

.fa-display {
    --fa: ""
}

.fa-face-smile,.fa-smile {
    --fa: ""
}

.fa-thumb-tack,.fa-thumbtack {
    --fa: ""
}

.fa-trophy {
    --fa: ""
}

.fa-person-praying,.fa-pray {
    --fa: ""
}

.fa-hammer {
    --fa: ""
}

.fa-hand-peace {
    --fa: ""
}

.fa-rotate,.fa-sync-alt {
    --fa: ""
}

.fa-spinner {
    --fa: ""
}

.fa-robot {
    --fa: ""
}

.fa-peace {
    --fa: ""
}

.fa-cogs,.fa-gears {
    --fa: ""
}

.fa-warehouse {
    --fa: ""
}

.fa-arrow-up-right-dots {
    --fa: ""
}

.fa-splotch {
    --fa: ""
}

.fa-face-grin-hearts,.fa-grin-hearts {
    --fa: ""
}

.fa-dice-four {
    --fa: ""
}

.fa-sim-card {
    --fa: ""
}

.fa-transgender,.fa-transgender-alt {
    --fa: ""
}

.fa-mercury {
    --fa: ""
}

.fa-arrow-turn-down,.fa-level-down {
    --fa: ""
}

.fa-person-falling-burst {
    --fa: ""
}

.fa-award {
    --fa: ""
}

.fa-ticket-alt,.fa-ticket-simple {
    --fa: ""
}

.fa-building {
    --fa: ""
}

.fa-angle-double-left,.fa-angles-left {
    --fa: ""
}

.fa-qrcode {
    --fa: ""
}

.fa-clock-rotate-left,.fa-history {
    --fa: ""
}

.fa-face-grin-beam-sweat,.fa-grin-beam-sweat {
    --fa: ""
}

.fa-arrow-right-from-file,.fa-file-export {
    --fa: ""
}

.fa-shield,.fa-shield-blank {
    --fa: ""
}

.fa-arrow-up-short-wide,.fa-sort-amount-up-alt {
    --fa: ""
}

.fa-comment-nodes {
    --fa: ""
}

.fa-house-medical {
    --fa: ""
}

.fa-golf-ball,.fa-golf-ball-tee {
    --fa: ""
}

.fa-chevron-circle-left,.fa-circle-chevron-left {
    --fa: ""
}

.fa-house-chimney-window {
    --fa: ""
}

.fa-pen-nib {
    --fa: ""
}

.fa-tent-arrow-turn-left {
    --fa: ""
}

.fa-tents {
    --fa: ""
}

.fa-magic,.fa-wand-magic {
    --fa: ""
}

.fa-dog {
    --fa: ""
}

.fa-carrot {
    --fa: ""
}

.fa-moon {
    --fa: ""
}

.fa-wine-glass-alt,.fa-wine-glass-empty {
    --fa: ""
}

.fa-cheese {
    --fa: ""
}

.fa-yin-yang {
    --fa: ""
}

.fa-music {
    --fa: ""
}

.fa-code-commit {
    --fa: ""
}

.fa-temperature-low {
    --fa: ""
}

.fa-biking,.fa-person-biking {
    --fa: ""
}

.fa-broom {
    --fa: ""
}

.fa-shield-heart {
    --fa: ""
}

.fa-gopuram {
    --fa: ""
}

.fa-earth-oceania,.fa-globe-oceania {
    --fa: ""
}

.fa-square-xmark,.fa-times-square,.fa-xmark-square {
    --fa: ""
}

.fa-hashtag {
    --fa: "#"
}

.fa-expand-alt,.fa-up-right-and-down-left-from-center {
    --fa: ""
}

.fa-oil-can {
    --fa: ""
}

.fa-t {
    --fa: "T"
}

.fa-hippo {
    --fa: ""
}

.fa-chart-column {
    --fa: ""
}

.fa-infinity {
    --fa: ""
}

.fa-vial-circle-check {
    --fa: ""
}

.fa-person-arrow-down-to-line {
    --fa: ""
}

.fa-voicemail {
    --fa: ""
}

.fa-fan {
    --fa: ""
}

.fa-person-walking-luggage {
    --fa: ""
}

.fa-arrows-alt-v,.fa-up-down {
    --fa: ""
}

.fa-cloud-moon-rain {
    --fa: ""
}

.fa-calendar {
    --fa: ""
}

.fa-trailer {
    --fa: ""
}

.fa-bahai,.fa-haykal {
    --fa: ""
}

.fa-sd-card {
    --fa: ""
}

.fa-dragon {
    --fa: ""
}

.fa-shoe-prints {
    --fa: ""
}

.fa-circle-plus,.fa-plus-circle {
    --fa: ""
}

.fa-face-grin-tongue-wink,.fa-grin-tongue-wink {
    --fa: ""
}

.fa-hand-holding {
    --fa: ""
}

.fa-plug-circle-exclamation {
    --fa: ""
}

.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink {
    --fa: ""
}

.fa-clone {
    --fa: ""
}

.fa-person-walking-arrow-loop-left {
    --fa: ""
}

.fa-arrow-up-z-a,.fa-sort-alpha-up-alt {
    --fa: ""
}

.fa-fire-alt,.fa-fire-flame-curved {
    --fa: ""
}

.fa-tornado {
    --fa: ""
}

.fa-file-circle-plus {
    --fa: ""
}

.fa-book-quran,.fa-quran {
    --fa: ""
}

.fa-anchor {
    --fa: ""
}

.fa-border-all {
    --fa: ""
}

.fa-angry,.fa-face-angry {
    --fa: ""
}

.fa-cookie-bite {
    --fa: ""
}

.fa-arrow-trend-down {
    --fa: ""
}

.fa-feed,.fa-rss {
    --fa: ""
}

.fa-draw-polygon {
    --fa: ""
}

.fa-balance-scale,.fa-scale-balanced {
    --fa: ""
}

.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast {
    --fa: ""
}

.fa-shower {
    --fa: ""
}

.fa-desktop,.fa-desktop-alt {
    --fa: ""
}

.fa-m {
    --fa: "M"
}

.fa-table-list,.fa-th-list {
    --fa: ""
}

.fa-comment-sms,.fa-sms {
    --fa: ""
}

.fa-book {
    --fa: ""
}

.fa-user-plus {
    --fa: ""
}

.fa-check {
    --fa: ""
}

.fa-battery-4,.fa-battery-three-quarters {
    --fa: ""
}

.fa-house-circle-check {
    --fa: ""
}

.fa-angle-left {
    --fa: ""
}

.fa-diagram-successor {
    --fa: ""
}

.fa-truck-arrow-right {
    --fa: ""
}

.fa-arrows-split-up-and-left {
    --fa: ""
}

.fa-fist-raised,.fa-hand-fist {
    --fa: ""
}

.fa-cloud-moon {
    --fa: ""
}

.fa-briefcase {
    --fa: ""
}

.fa-person-falling {
    --fa: ""
}

.fa-image-portrait,.fa-portrait {
    --fa: ""
}

.fa-user-tag {
    --fa: ""
}

.fa-rug {
    --fa: ""
}

.fa-earth-europe,.fa-globe-europe {
    --fa: ""
}

.fa-cart-flatbed-suitcase,.fa-luggage-cart {
    --fa: ""
}

.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close {
    --fa: ""
}

.fa-baht-sign {
    --fa: ""
}

.fa-book-open {
    --fa: ""
}

.fa-book-journal-whills,.fa-journal-whills {
    --fa: ""
}

.fa-handcuffs {
    --fa: ""
}

.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning {
    --fa: ""
}

.fa-database {
    --fa: ""
}

.fa-mail-forward,.fa-share {
    --fa: ""
}

.fa-bottle-droplet {
    --fa: ""
}

.fa-mask-face {
    --fa: ""
}

.fa-hill-rockslide {
    --fa: ""
}

.fa-exchange-alt,.fa-right-left {
    --fa: ""
}

.fa-paper-plane {
    --fa: ""
}

.fa-road-circle-exclamation {
    --fa: ""
}

.fa-dungeon {
    --fa: ""
}

.fa-align-right {
    --fa: ""
}

.fa-money-bill-1-wave,.fa-money-bill-wave-alt {
    --fa: ""
}

.fa-life-ring {
    --fa: ""
}

.fa-hands,.fa-sign-language,.fa-signing {
    --fa: ""
}

.fa-calendar-day {
    --fa: ""
}

.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder {
    --fa: ""
}

.fa-arrows-up-down,.fa-arrows-v {
    --fa: ""
}

.fa-face-grimace,.fa-grimace {
    --fa: ""
}

.fa-wheelchair-alt,.fa-wheelchair-move {
    --fa: ""
}

.fa-level-down-alt,.fa-turn-down {
    --fa: ""
}

.fa-person-walking-arrow-right {
    --fa: ""
}

.fa-envelope-square,.fa-square-envelope {
    --fa: ""
}

.fa-dice {
    --fa: ""
}

.fa-bowling-ball {
    --fa: ""
}

.fa-brain {
    --fa: ""
}

.fa-band-aid,.fa-bandage {
    --fa: ""
}

.fa-calendar-minus {
    --fa: ""
}

.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle {
    --fa: ""
}

.fa-gifts {
    --fa: ""
}

.fa-hotel {
    --fa: ""
}

.fa-earth-asia,.fa-globe-asia {
    --fa: ""
}

.fa-id-card-alt,.fa-id-card-clip {
    --fa: ""
}

.fa-magnifying-glass-plus,.fa-search-plus {
    --fa: ""
}

.fa-thumbs-up {
    --fa: ""
}

.fa-user-clock {
    --fa: ""
}

.fa-allergies,.fa-hand-dots {
    --fa: ""
}

.fa-file-invoice {
    --fa: ""
}

.fa-window-minimize {
    --fa: ""
}

.fa-coffee,.fa-mug-saucer {
    --fa: ""
}

.fa-brush {
    --fa: ""
}

.fa-file-half-dashed {
    --fa: ""
}

.fa-mask {
    --fa: ""
}

.fa-magnifying-glass-minus,.fa-search-minus {
    --fa: ""
}

.fa-ruler-vertical {
    --fa: ""
}

.fa-user-alt,.fa-user-large {
    --fa: ""
}

.fa-train-tram {
    --fa: ""
}

.fa-user-nurse {
    --fa: ""
}

.fa-syringe {
    --fa: ""
}

.fa-cloud-sun {
    --fa: ""
}

.fa-stopwatch-20 {
    --fa: ""
}

.fa-square-full {
    --fa: ""
}

.fa-magnet {
    --fa: ""
}

.fa-jar {
    --fa: ""
}

.fa-note-sticky,.fa-sticky-note {
    --fa: ""
}

.fa-bug-slash {
    --fa: ""
}

.fa-arrow-up-from-water-pump {
    --fa: ""
}

.fa-bone {
    --fa: ""
}

.fa-table-cells-row-unlock {
    --fa: ""
}

.fa-user-injured {
    --fa: ""
}

.fa-face-sad-tear,.fa-sad-tear {
    --fa: ""
}

.fa-plane {
    --fa: ""
}

.fa-tent-arrows-down {
    --fa: ""
}

.fa-exclamation {
    --fa: "!"
}

.fa-arrows-spin {
    --fa: ""
}

.fa-print {
    --fa: ""
}

.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign {
    --fa: ""
}

.fa-dollar,.fa-dollar-sign,.fa-usd {
    --fa: "$"
}

.fa-x {
    --fa: "X"
}

.fa-magnifying-glass-dollar,.fa-search-dollar {
    --fa: ""
}

.fa-users-cog,.fa-users-gear {
    --fa: ""
}

.fa-person-military-pointing {
    --fa: ""
}

.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university {
    --fa: ""
}

.fa-umbrella {
    --fa: ""
}

.fa-trowel {
    --fa: ""
}

.fa-d {
    --fa: "D"
}

.fa-stapler {
    --fa: ""
}

.fa-masks-theater,.fa-theater-masks {
    --fa: ""
}

.fa-kip-sign {
    --fa: ""
}

.fa-hand-point-left {
    --fa: ""
}

.fa-handshake-alt,.fa-handshake-simple {
    --fa: ""
}

.fa-fighter-jet,.fa-jet-fighter {
    --fa: ""
}

.fa-share-alt-square,.fa-square-share-nodes {
    --fa: ""
}

.fa-barcode {
    --fa: ""
}

.fa-plus-minus {
    --fa: ""
}

.fa-video,.fa-video-camera {
    --fa: ""
}

.fa-graduation-cap,.fa-mortar-board {
    --fa: ""
}

.fa-hand-holding-medical {
    --fa: ""
}

.fa-person-circle-check {
    --fa: ""
}

.fa-level-up-alt,.fa-turn-up {
    --fa: ""
}

.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0
}

:host,:root {
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../assets/fa-brands-400-D_cYUPeE.woff2) format("woff2"),url(../assets/fa-brands-400-D1LuMI3I.ttf) format("truetype")
}

.fa-brands,.fab {
    font-weight: 400
}

.fa-monero {
    --fa: ""
}

.fa-hooli {
    --fa: ""
}

.fa-yelp {
    --fa: ""
}

.fa-cc-visa {
    --fa: ""
}

.fa-lastfm {
    --fa: ""
}

.fa-shopware {
    --fa: ""
}

.fa-creative-commons-nc {
    --fa: ""
}

.fa-aws {
    --fa: ""
}

.fa-redhat {
    --fa: ""
}

.fa-yoast {
    --fa: ""
}

.fa-cloudflare {
    --fa: ""
}

.fa-ups {
    --fa: ""
}

.fa-pixiv {
    --fa: ""
}

.fa-wpexplorer {
    --fa: ""
}

.fa-dyalog {
    --fa: ""
}

.fa-bity {
    --fa: ""
}

.fa-stackpath {
    --fa: ""
}

.fa-buysellads {
    --fa: ""
}

.fa-first-order {
    --fa: ""
}

.fa-modx {
    --fa: ""
}

.fa-guilded {
    --fa: ""
}

.fa-vnv {
    --fa: ""
}

.fa-js-square,.fa-square-js {
    --fa: ""
}

.fa-microsoft {
    --fa: ""
}

.fa-qq {
    --fa: ""
}

.fa-orcid {
    --fa: ""
}

.fa-java {
    --fa: ""
}

.fa-invision {
    --fa: ""
}

.fa-creative-commons-pd-alt {
    --fa: ""
}

.fa-centercode {
    --fa: ""
}

.fa-glide-g {
    --fa: ""
}

.fa-drupal {
    --fa: ""
}

.fa-jxl {
    --fa: ""
}

.fa-dart-lang {
    --fa: ""
}

.fa-hire-a-helper {
    --fa: ""
}

.fa-creative-commons-by {
    --fa: ""
}

.fa-unity {
    --fa: ""
}

.fa-whmcs {
    --fa: ""
}

.fa-rocketchat {
    --fa: ""
}

.fa-vk {
    --fa: ""
}

.fa-untappd {
    --fa: ""
}

.fa-mailchimp {
    --fa: ""
}

.fa-css3-alt {
    --fa: ""
}

.fa-reddit-square,.fa-square-reddit {
    --fa: ""
}

.fa-vimeo-v {
    --fa: ""
}

.fa-contao {
    --fa: ""
}

.fa-square-font-awesome {
    --fa: ""
}

.fa-deskpro {
    --fa: ""
}

.fa-brave {
    --fa: ""
}

.fa-sistrix {
    --fa: ""
}

.fa-instagram-square,.fa-square-instagram {
    --fa: ""
}

.fa-battle-net {
    --fa: ""
}

.fa-the-red-yeti {
    --fa: ""
}

.fa-hacker-news-square,.fa-square-hacker-news {
    --fa: ""
}

.fa-edge {
    --fa: ""
}

.fa-threads {
    --fa: ""
}

.fa-napster {
    --fa: ""
}

.fa-snapchat-square,.fa-square-snapchat {
    --fa: ""
}

.fa-google-plus-g {
    --fa: ""
}

.fa-artstation {
    --fa: ""
}

.fa-markdown {
    --fa: ""
}

.fa-sourcetree {
    --fa: ""
}

.fa-google-plus {
    --fa: ""
}

.fa-diaspora {
    --fa: ""
}

.fa-foursquare {
    --fa: ""
}

.fa-stack-overflow {
    --fa: ""
}

.fa-github-alt {
    --fa: ""
}

.fa-phoenix-squadron {
    --fa: ""
}

.fa-pagelines {
    --fa: ""
}

.fa-algolia {
    --fa: ""
}

.fa-red-river {
    --fa: ""
}

.fa-creative-commons-sa {
    --fa: ""
}

.fa-safari {
    --fa: ""
}

.fa-google {
    --fa: ""
}

.fa-font-awesome-alt,.fa-square-font-awesome-stroke {
    --fa: ""
}

.fa-atlassian {
    --fa: ""
}

.fa-linkedin-in {
    --fa: ""
}

.fa-digital-ocean {
    --fa: ""
}

.fa-nimblr {
    --fa: ""
}

.fa-chromecast {
    --fa: ""
}

.fa-evernote {
    --fa: ""
}

.fa-hacker-news {
    --fa: ""
}

.fa-creative-commons-sampling {
    --fa: ""
}

.fa-adversal {
    --fa: ""
}

.fa-creative-commons {
    --fa: ""
}

.fa-watchman-monitoring {
    --fa: ""
}

.fa-fonticons {
    --fa: ""
}

.fa-weixin {
    --fa: ""
}

.fa-shirtsinbulk {
    --fa: ""
}

.fa-codepen {
    --fa: ""
}

.fa-git-alt {
    --fa: ""
}

.fa-lyft {
    --fa: ""
}

.fa-rev {
    --fa: ""
}

.fa-windows {
    --fa: ""
}

.fa-wizards-of-the-coast {
    --fa: ""
}

.fa-square-viadeo,.fa-viadeo-square {
    --fa: ""
}

.fa-meetup {
    --fa: ""
}

.fa-centos {
    --fa: ""
}

.fa-adn {
    --fa: ""
}

.fa-cloudsmith {
    --fa: ""
}

.fa-opensuse {
    --fa: ""
}

.fa-pied-piper-alt {
    --fa: ""
}

.fa-dribbble-square,.fa-square-dribbble {
    --fa: ""
}

.fa-codiepie {
    --fa: ""
}

.fa-node {
    --fa: ""
}

.fa-mix {
    --fa: ""
}

.fa-steam {
    --fa: ""
}

.fa-cc-apple-pay {
    --fa: ""
}

.fa-scribd {
    --fa: ""
}

.fa-debian {
    --fa: ""
}

.fa-openid {
    --fa: ""
}

.fa-instalod {
    --fa: ""
}

.fa-files-pinwheel {
    --fa: ""
}

.fa-expeditedssl {
    --fa: ""
}

.fa-sellcast {
    --fa: ""
}

.fa-square-twitter,.fa-twitter-square {
    --fa: ""
}

.fa-r-project {
    --fa: ""
}

.fa-delicious {
    --fa: ""
}

.fa-freebsd {
    --fa: ""
}

.fa-vuejs {
    --fa: ""
}

.fa-accusoft {
    --fa: ""
}

.fa-ioxhost {
    --fa: ""
}

.fa-fonticons-fi {
    --fa: ""
}

.fa-app-store {
    --fa: ""
}

.fa-cc-mastercard {
    --fa: ""
}

.fa-itunes-note {
    --fa: ""
}

.fa-golang {
    --fa: ""
}

.fa-kickstarter,.fa-square-kickstarter {
    --fa: ""
}

.fa-grav {
    --fa: ""
}

.fa-weibo {
    --fa: ""
}

.fa-uncharted {
    --fa: ""
}

.fa-firstdraft {
    --fa: ""
}

.fa-square-youtube,.fa-youtube-square {
    --fa: ""
}

.fa-wikipedia-w {
    --fa: ""
}

.fa-rendact,.fa-wpressr {
    --fa: ""
}

.fa-angellist {
    --fa: ""
}

.fa-galactic-republic {
    --fa: ""
}

.fa-nfc-directional {
    --fa: ""
}

.fa-skype {
    --fa: ""
}

.fa-joget {
    --fa: ""
}

.fa-fedora {
    --fa: ""
}

.fa-stripe-s {
    --fa: ""
}

.fa-meta {
    --fa: ""
}

.fa-laravel {
    --fa: ""
}

.fa-hotjar {
    --fa: ""
}

.fa-bluetooth-b {
    --fa: ""
}

.fa-square-letterboxd {
    --fa: ""
}

.fa-sticker-mule {
    --fa: ""
}

.fa-creative-commons-zero {
    --fa: ""
}

.fa-hips {
    --fa: ""
}

.fa-css {
    --fa: ""
}

.fa-behance {
    --fa: ""
}

.fa-reddit {
    --fa: ""
}

.fa-discord {
    --fa: ""
}

.fa-chrome {
    --fa: ""
}

.fa-app-store-ios {
    --fa: ""
}

.fa-cc-discover {
    --fa: ""
}

.fa-wpbeginner {
    --fa: ""
}

.fa-confluence {
    --fa: ""
}

.fa-shoelace {
    --fa: ""
}

.fa-mdb {
    --fa: ""
}

.fa-dochub {
    --fa: ""
}

.fa-accessible-icon {
    --fa: ""
}

.fa-ebay {
    --fa: ""
}

.fa-amazon {
    --fa: ""
}

.fa-unsplash {
    --fa: ""
}

.fa-yarn {
    --fa: ""
}

.fa-square-steam,.fa-steam-square {
    --fa: ""
}

.fa-500px {
    --fa: ""
}

.fa-square-vimeo,.fa-vimeo-square {
    --fa: ""
}

.fa-asymmetrik {
    --fa: ""
}

.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full {
    --fa: ""
}

.fa-gratipay {
    --fa: ""
}

.fa-apple {
    --fa: ""
}

.fa-hive {
    --fa: ""
}

.fa-gitkraken {
    --fa: ""
}

.fa-keybase {
    --fa: ""
}

.fa-apple-pay {
    --fa: ""
}

.fa-padlet {
    --fa: ""
}

.fa-amazon-pay {
    --fa: ""
}

.fa-github-square,.fa-square-github {
    --fa: ""
}

.fa-stumbleupon {
    --fa: ""
}

.fa-fedex {
    --fa: ""
}

.fa-phoenix-framework {
    --fa: ""
}

.fa-shopify {
    --fa: ""
}

.fa-neos {
    --fa: ""
}

.fa-square-threads {
    --fa: ""
}

.fa-hackerrank {
    --fa: ""
}

.fa-researchgate {
    --fa: ""
}

.fa-swift {
    --fa: ""
}

.fa-angular {
    --fa: ""
}

.fa-speakap {
    --fa: ""
}

.fa-angrycreative {
    --fa: ""
}

.fa-y-combinator {
    --fa: ""
}

.fa-empire {
    --fa: ""
}

.fa-envira {
    --fa: ""
}

.fa-google-scholar {
    --fa: ""
}

.fa-gitlab-square,.fa-square-gitlab {
    --fa: ""
}

.fa-studiovinari {
    --fa: ""
}

.fa-pied-piper {
    --fa: ""
}

.fa-wordpress {
    --fa: ""
}

.fa-product-hunt {
    --fa: ""
}

.fa-firefox {
    --fa: ""
}

.fa-linode {
    --fa: ""
}

.fa-goodreads {
    --fa: ""
}

.fa-odnoklassniki-square,.fa-square-odnoklassniki {
    --fa: ""
}

.fa-jsfiddle {
    --fa: ""
}

.fa-sith {
    --fa: ""
}

.fa-themeisle {
    --fa: ""
}

.fa-page4 {
    --fa: ""
}

.fa-hashnode {
    --fa: ""
}

.fa-react {
    --fa: ""
}

.fa-cc-paypal {
    --fa: ""
}

.fa-squarespace {
    --fa: ""
}

.fa-cc-stripe {
    --fa: ""
}

.fa-creative-commons-share {
    --fa: ""
}

.fa-bitcoin {
    --fa: ""
}

.fa-keycdn {
    --fa: ""
}

.fa-opera {
    --fa: ""
}

.fa-itch-io {
    --fa: ""
}

.fa-umbraco {
    --fa: ""
}

.fa-galactic-senate {
    --fa: ""
}

.fa-ubuntu {
    --fa: ""
}

.fa-draft2digital {
    --fa: ""
}

.fa-stripe {
    --fa: ""
}

.fa-houzz {
    --fa: ""
}

.fa-gg {
    --fa: ""
}

.fa-dhl {
    --fa: ""
}

.fa-pinterest-square,.fa-square-pinterest {
    --fa: ""
}

.fa-xing {
    --fa: ""
}

.fa-blackberry {
    --fa: ""
}

.fa-creative-commons-pd {
    --fa: ""
}

.fa-playstation {
    --fa: ""
}

.fa-quinscape {
    --fa: ""
}

.fa-less {
    --fa: ""
}

.fa-blogger-b {
    --fa: ""
}

.fa-opencart {
    --fa: ""
}

.fa-vine {
    --fa: ""
}

.fa-signal-messenger {
    --fa: ""
}

.fa-paypal {
    --fa: ""
}

.fa-gitlab {
    --fa: ""
}

.fa-typo3 {
    --fa: ""
}

.fa-reddit-alien {
    --fa: ""
}

.fa-yahoo {
    --fa: ""
}

.fa-dailymotion {
    --fa: ""
}

.fa-affiliatetheme {
    --fa: ""
}

.fa-pied-piper-pp {
    --fa: ""
}

.fa-bootstrap {
    --fa: ""
}

.fa-odnoklassniki {
    --fa: ""
}

.fa-nfc-symbol {
    --fa: ""
}

.fa-mintbit {
    --fa: ""
}

.fa-ethereum {
    --fa: ""
}

.fa-speaker-deck {
    --fa: ""
}

.fa-creative-commons-nc-eu {
    --fa: ""
}

.fa-patreon {
    --fa: ""
}

.fa-avianex {
    --fa: ""
}

.fa-ello {
    --fa: ""
}

.fa-gofore {
    --fa: ""
}

.fa-bimobject {
    --fa: ""
}

.fa-brave-reverse {
    --fa: ""
}

.fa-facebook-f {
    --fa: ""
}

.fa-google-plus-square,.fa-square-google-plus {
    --fa: ""
}

.fa-web-awesome {
    --fa: ""
}

.fa-mandalorian {
    --fa: ""
}

.fa-first-order-alt {
    --fa: ""
}

.fa-osi {
    --fa: ""
}

.fa-google-wallet {
    --fa: ""
}

.fa-d-and-d-beyond {
    --fa: ""
}

.fa-periscope {
    --fa: ""
}

.fa-fulcrum {
    --fa: ""
}

.fa-cloudscale {
    --fa: ""
}

.fa-forumbee {
    --fa: ""
}

.fa-mizuni {
    --fa: ""
}

.fa-schlix {
    --fa: ""
}

.fa-square-xing,.fa-xing-square {
    --fa: ""
}

.fa-bandcamp {
    --fa: ""
}

.fa-wpforms {
    --fa: ""
}

.fa-cloudversify {
    --fa: ""
}

.fa-usps {
    --fa: ""
}

.fa-megaport {
    --fa: ""
}

.fa-magento {
    --fa: ""
}

.fa-spotify {
    --fa: ""
}

.fa-optin-monster {
    --fa: ""
}

.fa-fly {
    --fa: ""
}

.fa-square-bluesky {
    --fa: ""
}

.fa-aviato {
    --fa: ""
}

.fa-itunes {
    --fa: ""
}

.fa-cuttlefish {
    --fa: ""
}

.fa-blogger {
    --fa: ""
}

.fa-flickr {
    --fa: ""
}

.fa-viber {
    --fa: ""
}

.fa-soundcloud {
    --fa: ""
}

.fa-digg {
    --fa: ""
}

.fa-tencent-weibo {
    --fa: ""
}

.fa-letterboxd {
    --fa: ""
}

.fa-symfony {
    --fa: ""
}

.fa-maxcdn {
    --fa: ""
}

.fa-etsy {
    --fa: ""
}

.fa-facebook-messenger {
    --fa: ""
}

.fa-audible {
    --fa: ""
}

.fa-think-peaks {
    --fa: ""
}

.fa-bilibili {
    --fa: ""
}

.fa-erlang {
    --fa: ""
}

.fa-x-twitter {
    --fa: ""
}

.fa-cotton-bureau {
    --fa: ""
}

.fa-dashcube {
    --fa: ""
}

.fa-42-group,.fa-innosoft {
    --fa: ""
}

.fa-stack-exchange {
    --fa: ""
}

.fa-elementor {
    --fa: ""
}

.fa-pied-piper-square,.fa-square-pied-piper {
    --fa: ""
}

.fa-creative-commons-nd {
    --fa: ""
}

.fa-palfed {
    --fa: ""
}

.fa-superpowers {
    --fa: ""
}

.fa-resolving {
    --fa: ""
}

.fa-xbox {
    --fa: ""
}

.fa-square-web-awesome-stroke {
    --fa: ""
}

.fa-searchengin {
    --fa: ""
}

.fa-tiktok {
    --fa: ""
}

.fa-facebook-square,.fa-square-facebook {
    --fa: ""
}

.fa-renren {
    --fa: ""
}

.fa-linux {
    --fa: ""
}

.fa-glide {
    --fa: ""
}

.fa-linkedin {
    --fa: ""
}

.fa-hubspot {
    --fa: ""
}

.fa-deploydog {
    --fa: ""
}

.fa-twitch {
    --fa: ""
}

.fa-flutter {
    --fa: ""
}

.fa-ravelry {
    --fa: ""
}

.fa-mixer {
    --fa: ""
}

.fa-lastfm-square,.fa-square-lastfm {
    --fa: ""
}

.fa-vimeo {
    --fa: ""
}

.fa-mendeley {
    --fa: ""
}

.fa-uniregistry {
    --fa: ""
}

.fa-figma {
    --fa: ""
}

.fa-creative-commons-remix {
    --fa: ""
}

.fa-cc-amazon-pay {
    --fa: ""
}

.fa-dropbox {
    --fa: ""
}

.fa-instagram {
    --fa: ""
}

.fa-cmplid {
    --fa: ""
}

.fa-upwork {
    --fa: ""
}

.fa-facebook {
    --fa: ""
}

.fa-gripfire {
    --fa: ""
}

.fa-jedi-order {
    --fa: ""
}

.fa-uikit {
    --fa: ""
}

.fa-fort-awesome-alt {
    --fa: ""
}

.fa-phabricator {
    --fa: ""
}

.fa-ussunnah {
    --fa: ""
}

.fa-earlybirds {
    --fa: ""
}

.fa-trade-federation {
    --fa: ""
}

.fa-autoprefixer {
    --fa: ""
}

.fa-whatsapp {
    --fa: ""
}

.fa-square-upwork {
    --fa: ""
}

.fa-slideshare {
    --fa: ""
}

.fa-google-play {
    --fa: ""
}

.fa-viadeo {
    --fa: ""
}

.fa-line {
    --fa: ""
}

.fa-google-drive {
    --fa: ""
}

.fa-servicestack {
    --fa: ""
}

.fa-simplybuilt {
    --fa: ""
}

.fa-bitbucket {
    --fa: ""
}

.fa-imdb {
    --fa: ""
}

.fa-deezer {
    --fa: ""
}

.fa-raspberry-pi {
    --fa: ""
}

.fa-jira {
    --fa: ""
}

.fa-docker {
    --fa: ""
}

.fa-screenpal {
    --fa: ""
}

.fa-bluetooth {
    --fa: ""
}

.fa-gitter {
    --fa: ""
}

.fa-d-and-d {
    --fa: ""
}

.fa-microblog {
    --fa: ""
}

.fa-cc-diners-club {
    --fa: ""
}

.fa-gg-circle {
    --fa: ""
}

.fa-pied-piper-hat {
    --fa: ""
}

.fa-kickstarter-k {
    --fa: ""
}

.fa-yandex {
    --fa: ""
}

.fa-readme {
    --fa: ""
}

.fa-html5 {
    --fa: ""
}

.fa-sellsy {
    --fa: ""
}

.fa-square-web-awesome {
    --fa: ""
}

.fa-sass {
    --fa: ""
}

.fa-wirsindhandwerk,.fa-wsh {
    --fa: ""
}

.fa-buromobelexperte {
    --fa: ""
}

.fa-salesforce {
    --fa: ""
}

.fa-octopus-deploy {
    --fa: ""
}

.fa-medapps {
    --fa: ""
}

.fa-ns8 {
    --fa: ""
}

.fa-pinterest-p {
    --fa: ""
}

.fa-apper {
    --fa: ""
}

.fa-fort-awesome {
    --fa: ""
}

.fa-waze {
    --fa: ""
}

.fa-bluesky {
    --fa: ""
}

.fa-cc-jcb {
    --fa: ""
}

.fa-snapchat,.fa-snapchat-ghost {
    --fa: ""
}

.fa-fantasy-flight-games {
    --fa: ""
}

.fa-rust {
    --fa: ""
}

.fa-wix {
    --fa: ""
}

.fa-behance-square,.fa-square-behance {
    --fa: ""
}

.fa-supple {
    --fa: ""
}

.fa-webflow {
    --fa: ""
}

.fa-rebel {
    --fa: ""
}

.fa-css3 {
    --fa: ""
}

.fa-staylinked {
    --fa: ""
}

.fa-kaggle {
    --fa: ""
}

.fa-space-awesome {
    --fa: ""
}

.fa-deviantart {
    --fa: ""
}

.fa-cpanel {
    --fa: ""
}

.fa-goodreads-g {
    --fa: ""
}

.fa-git-square,.fa-square-git {
    --fa: ""
}

.fa-square-tumblr,.fa-tumblr-square {
    --fa: ""
}

.fa-trello {
    --fa: ""
}

.fa-creative-commons-nc-jp {
    --fa: ""
}

.fa-get-pocket {
    --fa: ""
}

.fa-perbyte {
    --fa: ""
}

.fa-grunt {
    --fa: ""
}

.fa-weebly {
    --fa: ""
}

.fa-connectdevelop {
    --fa: ""
}

.fa-leanpub {
    --fa: ""
}

.fa-black-tie {
    --fa: ""
}

.fa-themeco {
    --fa: ""
}

.fa-python {
    --fa: ""
}

.fa-android {
    --fa: ""
}

.fa-bots {
    --fa: ""
}

.fa-free-code-camp {
    --fa: ""
}

.fa-hornbill {
    --fa: ""
}

.fa-js {
    --fa: ""
}

.fa-ideal {
    --fa: ""
}

.fa-git {
    --fa: ""
}

.fa-dev {
    --fa: ""
}

.fa-sketch {
    --fa: ""
}

.fa-yandex-international {
    --fa: ""
}

.fa-cc-amex {
    --fa: ""
}

.fa-uber {
    --fa: ""
}

.fa-github {
    --fa: ""
}

.fa-php {
    --fa: ""
}

.fa-alipay {
    --fa: ""
}

.fa-youtube {
    --fa: ""
}

.fa-skyatlas {
    --fa: ""
}

.fa-firefox-browser {
    --fa: ""
}

.fa-replyd {
    --fa: ""
}

.fa-suse {
    --fa: ""
}

.fa-jenkins {
    --fa: ""
}

.fa-twitter {
    --fa: ""
}

.fa-rockrms {
    --fa: ""
}

.fa-pinterest {
    --fa: ""
}

.fa-buffer {
    --fa: ""
}

.fa-npm {
    --fa: ""
}

.fa-yammer {
    --fa: ""
}

.fa-btc {
    --fa: ""
}

.fa-dribbble {
    --fa: ""
}

.fa-stumbleupon-circle {
    --fa: ""
}

.fa-internet-explorer {
    --fa: ""
}

.fa-stubber {
    --fa: ""
}

.fa-telegram,.fa-telegram-plane {
    --fa: ""
}

.fa-old-republic {
    --fa: ""
}

.fa-odysee {
    --fa: ""
}

.fa-square-whatsapp,.fa-whatsapp-square {
    --fa: ""
}

.fa-node-js {
    --fa: ""
}

.fa-edge-legacy {
    --fa: ""
}

.fa-slack,.fa-slack-hash {
    --fa: ""
}

.fa-medrt {
    --fa: ""
}

.fa-usb {
    --fa: ""
}

.fa-tumblr {
    --fa: ""
}

.fa-vaadin {
    --fa: ""
}

.fa-quora {
    --fa: ""
}

.fa-square-x-twitter {
    --fa: ""
}

.fa-reacteurope {
    --fa: ""
}

.fa-medium,.fa-medium-m {
    --fa: ""
}

.fa-amilia {
    --fa: ""
}

.fa-mixcloud {
    --fa: ""
}

.fa-flipboard {
    --fa: ""
}

.fa-viacoin {
    --fa: ""
}

.fa-critical-role {
    --fa: ""
}

.fa-sitrox {
    --fa: ""
}

.fa-discourse {
    --fa: ""
}

.fa-joomla {
    --fa: ""
}

.fa-mastodon {
    --fa: ""
}

.fa-airbnb {
    --fa: ""
}

.fa-wolf-pack-battalion {
    --fa: ""
}

.fa-buy-n-large {
    --fa: ""
}

.fa-gulp {
    --fa: ""
}

.fa-creative-commons-sampling-plus {
    --fa: ""
}

.fa-strava {
    --fa: ""
}

.fa-ember {
    --fa: ""
}

.fa-canadian-maple-leaf {
    --fa: ""
}

.fa-teamspeak {
    --fa: ""
}

.fa-pushed {
    --fa: ""
}

.fa-wordpress-simple {
    --fa: ""
}

.fa-nutritionix {
    --fa: ""
}

.fa-wodu {
    --fa: ""
}

.fa-google-pay {
    --fa: ""
}

.fa-intercom {
    --fa: ""
}

.fa-zhihu {
    --fa: ""
}

.fa-korvue {
    --fa: ""
}

.fa-pix {
    --fa: ""
}

.fa-steam-symbol {
    --fa: ""
}

:host,:root {
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../assets/fa-regular-400-BjRzuEpd.woff2) format("woff2"),url(../assets/fa-regular-400-DZaxPHgR.ttf) format("truetype")
}

.fa-regular,.far {
    font-weight: 400
}

:host,:root {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../assets/fa-solid-900-CTAAxXor.woff2) format("woff2"),url(../assets/fa-solid-900-D0aA9rwL.ttf) format("truetype")
}

.fa-solid,.fas {
    font-weight: 900
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400;
    src: url(../assets/fa-brands-400-D_cYUPeE.woff2) format("woff2"),url(../assets/fa-brands-400-D1LuMI3I.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 900;
    src: url(../assets/fa-solid-900-CTAAxXor.woff2) format("woff2"),url(../assets/fa-solid-900-D0aA9rwL.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 400;
    src: url(../assets/fa-regular-400-BjRzuEpd.woff2) format("woff2"),url(../assets/fa-regular-400-DZaxPHgR.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(../assets/fa-solid-900-CTAAxXor.woff2) format("woff2"),url(../assets/fa-solid-900-D0aA9rwL.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(../assets/fa-brands-400-D_cYUPeE.woff2) format("woff2"),url(../assets/fa-brands-400-D1LuMI3I.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(../assets/fa-regular-400-BjRzuEpd.woff2) format("woff2"),url(../assets/fa-regular-400-DZaxPHgR.ttf) format("truetype");
    unicode-range: u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(../assets/fa-v4compatibility-C9RhG_FT.woff2) format("woff2"),url(../assets/fa-v4compatibility-CCth-dXg.ttf) format("truetype");
    unicode-range: u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a
}

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: hsl(6, 78%, 57%);
    --toastify-color-transparent: rgba(255, 255, 255, .7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-container-width: fit-content;
    --toastify-toast-width: 320px;
    --toastify-toast-offset: 16px;
    --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
    --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
    --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
    --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
    --toastify-toast-background: #fff;
    --toastify-toast-padding: 14px;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-toast-bd-radius: 6px;
    --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    --toastify-color-progress-bgo: .2
}

.Toastify__toast-container {
    z-index: var(--toastify-z-index);
    -webkit-transform: translate3d(0,0,var(--toastify-z-index));
    position: fixed;
    width: var(--toastify-container-width);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column
}

.Toastify__toast-container--top-left {
    top: var(--toastify-toast-top);
    left: var(--toastify-toast-left)
}

.Toastify__toast-container--top-center {
    top: var(--toastify-toast-top);
    left: 50%;
    transform: translate(-50%);
    align-items: center
}

.Toastify__toast-container--top-right {
    top: var(--toastify-toast-top);
    right: var(--toastify-toast-right);
    align-items: end
}

.Toastify__toast-container--bottom-left {
    bottom: var(--toastify-toast-bottom);
    left: var(--toastify-toast-left)
}

.Toastify__toast-container--bottom-center {
    bottom: var(--toastify-toast-bottom);
    left: 50%;
    transform: translate(-50%);
    align-items: center
}

.Toastify__toast-container--bottom-right {
    bottom: var(--toastify-toast-bottom);
    right: var(--toastify-toast-right);
    align-items: end
}

.Toastify__toast {
    --y: 0;
    position: relative;
    touch-action: none;
    width: var(--toastify-toast-width);
    min-height: var(--toastify-toast-min-height);
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: var(--toastify-toast-padding);
    border-radius: var(--toastify-toast-bd-radius);
    box-shadow: var(--toastify-toast-shadow);
    max-height: var(--toastify-toast-max-height);
    font-family: var(--toastify-font-family);
    z-index: 0;
    display: flex;
    flex: 1 auto;
    align-items: center;
    word-break: break-word
}

@media only screen and (max-width: 480px) {
    .Toastify__toast-container {
        width:100vw;
        left: env(safe-area-inset-left);
        margin: 0
    }

    .Toastify__toast-container--top-left,.Toastify__toast-container--top-center,.Toastify__toast-container--top-right {
        top: env(safe-area-inset-top);
        transform: translate(0)
    }

    .Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-right {
        bottom: env(safe-area-inset-bottom);
        transform: translate(0)
    }

    .Toastify__toast-container--rtl {
        right: env(safe-area-inset-right);
        left: initial
    }

    .Toastify__toast {
        --toastify-toast-width: 100%;
        margin-bottom: 0;
        border-radius: 0
    }
}

.Toastify__toast-container[data-stacked=true] {
    width: var(--toastify-toast-width)
}

.Toastify__toast--stacked {
    position: absolute;
    width: 100%;
    transform: translate3d(0,var(--y),0) scale(var(--s));
    transition: transform .3s
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
    transition: opacity .1s
}

.Toastify__toast--stacked[data-collapsed=false] {
    overflow: visible
}

.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>* {
    opacity: 0
}

.Toastify__toast--stacked:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--g) * 1px);
    bottom: 100%
}

.Toastify__toast--stacked[data-pos=top] {
    top: 0
}

.Toastify__toast--stacked[data-pos=bot] {
    bottom: 0
}

.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
    transform-origin: top
}

.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
    transform-origin: bottom
}

.Toastify__toast--stacked:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    transform: scaleY(3);
    z-index: -1
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast--close-on-click {
    cursor: pointer
}

.Toastify__toast-icon {
    margin-inline-end:10px;width: 22px;
    flex-shrink: 0;
    display: flex
}

.Toastify--animate {
    animation-fill-mode: both;
    animation-duration: .5s
}

.Toastify--animate-icon {
    animation-fill-mode: both;
    animation-duration: .3s
}

.Toastify__toast-theme--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--light,.Toastify__toast-theme--colored.Toastify__toast--default {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    color: var(--toastify-text-color-info);
    background: var(--toastify-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    color: var(--toastify-text-color-success);
    background: var(--toastify-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    color: var(--toastify-text-color-warning);
    background: var(--toastify-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    color: var(--toastify-text-color-error);
    background: var(--toastify-color-error)
}

.Toastify__progress-bar-theme--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    color: #fff;
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: .7;
    transition: .3s ease;
    z-index: 1
}

.Toastify__toast--rtl .Toastify__close-button {
    left: 6px;
    right: unset
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentColor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:hover,.Toastify__close-button:focus {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .7;
    transform-origin: left
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    right: 0;
    left: initial;
    transform-origin: right;
    border-bottom-left-radius: initial
}

.Toastify__progress-bar--wrp {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-bottom-left-radius: var(--toastify-toast-bd-radius);
    border-bottom-right-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--wrp[data-hidden=true] {
    opacity: 0
}

.Toastify__progress-bar--bg {
    opacity: var(--toastify-color-progress-bgo);
    width: 100%;
    height: 100%
}

.Toastify__spinner {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 100%;
    border-color: var(--toastify-spinner-color-empty-area);
    border-right-color: var(--toastify-spinner-color);
    animation: Toastify__spin .65s linear infinite
}

@keyframes Toastify__bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,var(--y),0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,var(--y),0)
    }
}

@keyframes Toastify__bounceInLeft {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px,0,0)
    }

    75% {
        transform: translate3d(-10px,0,0)
    }

    90% {
        transform: translate3d(5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px,var(--y),0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,var(--y),0)
    }
}

@keyframes Toastify__bounceInUp {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0,calc(var(--y) - 10px),0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,calc(var(--y) + 20px),0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

@keyframes Toastify__bounceInDown {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,25px,0)
    }

    75% {
        transform: translate3d(0,-10px,0)
    }

    90% {
        transform: translate3d(0,5px,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0,calc(var(--y) - 10px),0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,calc(var(--y) + 20px),0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

.Toastify__bounce-enter--top-left,.Toastify__bounce-enter--bottom-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--top-right,.Toastify__bounce-enter--bottom-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--top-left,.Toastify__bounce-exit--bottom-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--top-right,.Toastify__bounce-exit--bottom-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: translate3d(0,var(--y),0) scale3d(.3,.3,.3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: translate3d(0,var(--y),0) perspective(400px)
    }

    30% {
        transform: translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0,110%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0,-110%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,var(--y),0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(110%,var(--y),0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-110%,var(--y),0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,500px,0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translate3d(0,var(--y),0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,-500px,0)
    }
}

.Toastify__slide-enter--top-left,.Toastify__slide-enter--bottom-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--top-right,.Toastify__slide-enter--bottom-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--top-left,.Toastify__slide-exit--bottom-left {
    animation-name: Toastify__slideOutLeft;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--top-right,.Toastify__slide-exit--bottom-right {
    animation-name: Toastify__slideOutRight;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.shape1 {
    z-index: 1;
    position: absolute;
    top: 1200px;
    left: 100px;
    --circle-size: 39.3%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #c7253e;
    filter: blur(450px)
}

.shape2 {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 3200px;
    --circle-size: 39.3%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #fabc3f;
    filter: blur(450px)
}

.shape3 {
    z-index: 1;
    position: absolute;
    top: 4200px;
    --circle-size: 29.58%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #c7253e;
    filter: blur(450px)
}

.shape4 {
    z-index: 1;
    position: absolute;
    top: 5600px;
    --circle-size: 39.3%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #c7253e;
    filter: blur(450px)
}

.shape5 {
    z-index: 1;
    position: absolute;
    right: 111px;
    top: 6562px;
    --circle-size: 32.2%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #821131;
    filter: blur(450px)
}

.shape6 {
    z-index: 1;
    position: absolute;
    top: 10005px;
    left: 31px;
    --circle-size: 39.3%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #c7253e;
    filter: blur(450px)
}

.shape7 {
    z-index: 1;
    position: absolute;
    top: 10900px;
    right: 50px;
    --circle-size: 39.3%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #821131;
    filter: blur(450px)
}

@media (max-width: 1536px) {
    .shape1 {
        top:1000px;
        left: 80px;
        filter: blur(400px)
    }

    .shape2 {
        top: 1800px;
        right: 50px;
        filter: blur(400px)
    }

    .shape3 {
        top: 2800px;
        left: 100px;
        filter: blur(400px)
    }

    .shape4 {
        top: 4200px;
        right: 80px;
        filter: blur(400px)
    }

    .shape5 {
        top: 5100px;
        left: 150px;
        filter: blur(350px)
    }

    .shape6 {
        top: 7800px;
        left: 50px;
        filter: blur(400px)
    }

    .shape7 {
        top: 9000px;
        right: 100px;
        filter: blur(350px)
    }
}

@media (max-width: 1440px) {
    .shape1 {
        top:900px;
        left: 60px;
        filter: blur(350px)
    }

    .shape2 {
        top: 1600px;
        right: 40px;
        filter: blur(350px)
    }

    .shape3 {
        top: 2600px;
        left: 80px;
        filter: blur(350px)
    }

    .shape4 {
        top: 3900px;
        right: 60px;
        filter: blur(350px)
    }

    .shape5 {
        top: 4700px;
        left: 120px;
        filter: blur(300px)
    }

    .shape6 {
        top: 7200px;
        left: 40px;
        filter: blur(350px)
    }

    .shape7 {
        top: 8300px;
        right: 80px;
        filter: blur(300px)
    }
}

@media (max-width: 1280px) {
    .shape1 {
        top:800px;
        left: 40px;
        filter: blur(300px)
    }

    .shape2 {
        top: 1400px;
        right: 30px;
        filter: blur(300px)
    }

    .shape3 {
        top: 2300px;
        left: 60px;
        filter: blur(300px)
    }

    .shape4 {
        top: 3600px;
        right: 50px;
        filter: blur(300px)
    }

    .shape5 {
        top: 4300px;
        left: 100px;
        filter: blur(250px)
    }

    .shape6 {
        top: 6500px;
        left: 30px;
        filter: blur(300px)
    }

    .shape7 {
        top: 7500px;
        right: 60px;
        filter: blur(250px)
    }
}

@media (max-width: 480px) {
    .shape1 {
        top:300px;
        left: 10px;
        filter: blur(100px)
    }

    .shape2 {
        top: 1141px;
        right: 0;
        filter: blur(100px)
    }

    .shape3 {
        top: 1678px;
        left: 0;
        filter: blur(100px)
    }

    .shape4 {
        top: 2212px;
        right: 0;
        filter: blur(100px);
        background: #fabc3f
    }

    .shape5 {
        top: 2936px;
        left: -24px;
        filter: blur(70px);
        --circle-size: 42.2%
    }

    .shape6 {
        top: 3791px;
        left: 206px;
        filter: blur(100px);
        --circle-size: 42.2%;
        background-color: #fabc3f
    }

    .shape7 {
        top: 4491px;
        right: 246px;
        filter: blur(80px);
        --circle-size: 42.2%
    }
}

.whyChooseMaac .head {
    display: flex;
    justify-content: space-between
}

.whyChooseMaac .head .title-desc {
    width: 60%
}

.whyChooseMaac .accordion {
    display: flex;
    align-items: stretch;
    gap: 50px;
    overflow: hidden;
    margin-top: 50px;
    justify-content: center;
    height: 580.19px
}

.whyChooseMaac .accordion-item {
    background: #bc2329;
    color: #fff;
    text-align: center;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 700;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.whyChooseMaac .active {
    min-width: 450px;
    max-width: 450px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    writing-mode: horizontal-tb;
    transform: rotate(0);
    justify-content: center;
    text-align: center;
    border-radius: 12px
}

.whyChooseMaac .active .accordion-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left
}

.whyChooseMaac .active .accordion-content img {
    width: 100%;
    max-height: 420px;
    min-height: 420px;
    object-fit: cover;
    border-radius: 12px
}

.whyChooseMaac .active .accordion-content p {
    margin: 20px 0;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    padding: 20px 15px
}

@media (max-width: 1536px) {
    .whyChooseMaac .accordion {
        gap:40px;
        margin-top: 40px
    }

    .whyChooseMaac .accordion-item {
        min-width: 70px;
        font-size: 20px
    }

    .whyChooseMaac .active {
        min-width: 400px;
        max-width: 400px
    }

    .whyChooseMaac .active .accordion-content img {
        max-height: 460px;
        min-height: 460px
    }

    .whyChooseMaac .active .accordion-content p {
        font-size: 16px;
        margin: 15px 0;
        padding: 15px 12px
    }
}

@media (max-width: 1440px) {
    .whyChooseMaac .accordion {
        gap:35px;
        margin-top: 35px;
        height: 540px
    }

    .whyChooseMaac .accordion-item {
        min-width: 65px;
        font-size: 22px
    }

    .whyChooseMaac .active {
        min-width: 420px;
        max-width: 420px
    }

    .whyChooseMaac .active .accordion-content img {
        max-height: 400px;
        min-height: 400px
    }

    .whyChooseMaac .active .accordion-content p {
        font-size: 17px;
        margin: 18px 0;
        padding: 18px 14px
    }

    .whyChooseMaac .head .title-desc {
        width: 62%
    }

    .whyChooseMaac .head .heading {
        font-size: 2.5rem
    }
}

@media (max-width: 1280px) {
    .whyChooseMaac .accordion {
        gap:30px;
        margin-top: 30px;
        height: 500px
    }

    .whyChooseMaac .accordion-item {
        min-width: 60px;
        font-size: 18px
    }

    .whyChooseMaac .active {
        min-width: 360px;
        max-width: 350px
    }

    .whyChooseMaac .active .accordion-content img {
        max-height: 390px;
        min-height: 390px
    }

    .whyChooseMaac .active .accordion-content p {
        font-size: 15px;
        margin: 12px 0;
        padding: 12px 10px
    }

    .whyChooseMaac .head .title-desc {
        width: 65%
    }

    .whyChooseMaac .head .heading {
        font-size: 2.4rem
    }
}

@media (max-width: 992px) {
    .whyChooseMaac .accordion {
        gap:24px;
        margin-top: 25px;
        height: 460px
    }

    .whyChooseMaac .accordion-item {
        min-width: 55px;
        font-size: 16px
    }

    .whyChooseMaac .active {
        min-width: 300px;
        max-width: 300px
    }

    .whyChooseMaac .active .accordion-content img {
        max-height: 360px;
        min-height: 360px
    }

    .whyChooseMaac .active .accordion-content p {
        font-size: 14px;
        margin: 10px 0;
        padding: 10px 8px
    }

    .whyChooseMaac .head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .whyChooseMaac .head .title-desc {
        width: 100%
    }

    .whyChooseMaac .head .heading {
        font-size: 2.2rem
    }
}

@media (max-width: 480px) {
    .whyChooseMaac {
        padding:1% 1% 15%
    }

    .whyChooseMaac .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .whyChooseMaac .head h2 {
        font-size: 20px!important
    }

    .whyChooseMaac .head h3 {
        font-size: 16px!important
    }

    .whyChooseMaac .head p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .whyChooseMaac .accordion {
        margin-top: 20%;
        margin-bottom: 20%;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        overflow: visible;
        padding: 4%
    }

    .whyChooseMaac .accordion-item {
        writing-mode: horizontal-tb;
        transform: rotate(0);
        min-width: 100%;
        max-width: 100%;
        height: auto;
        font-size: 18px;
        border-radius: 8px
    }

    .whyChooseMaac .active {
        min-width: 100%;
        max-width: 100%;
        height: auto
    }

    .whyChooseMaac .active .accordion-content {
        text-align: left
    }

    .whyChooseMaac .active .accordion-content img {
        width: 100%;
        height: auto;
        max-height: 200px!important;
        min-height: 200px!important;
        object-fit: cover!important;
        border-radius: 8px
    }

    .whyChooseMaac .active .accordion-content p {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0!important
    }

    .whyChooseMaac .active .accordion-content .animated-button {
        width: 60%;
        height: auto;
        text-align: center;
        margin: 0 0 10px 10px;
        font-size: 14px!important
    }

    .whyChooseMaac .accordion-item:nth-child(1) img {
        object-position: center center!important
    }

    .whyChooseMaac .accordion-item:nth-child(2) img {
        object-position: top center!important
    }

    .whyChooseMaac .accordion-item:nth-child(3) img {
        object-position: center center!important
    }

    .whyChooseMaac .accordion-item:nth-child(4) img {
        object-position: center center!important
    }

    .whyChooseMaac .accordion-item:nth-child(5) img {
        object-position: 50% center!important
    }

    .whyChooseMaac .accordion-item:nth-child(6) img {
        object-position: 50% center!important
    }

    .whyChooseMaac .accordion-item:nth-child(7) img {
        object-position: top center!important
    }

    .whyChooseMaac .accordion-title {
        padding: 5%!important;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
}

.OurCourses .head {
    display: flex;
    justify-content: space-between
}

.OurCourses .head .head-content {
    width: 40%
}

.OurCourses .coursesContainer {
    padding: 2% 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4.166%;
    width: 100%;
    height: auto;
    row-gap: 40px
}

.OurCourses .coursesContainer .course {
    position: relative;
    width: 30.097%;
    height: 48.81%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 16px #f3f3f340;
    overflow: hidden;
    background-color: #fff;
    transition: background-color .4s ease-in-out
}

.OurCourses .coursesContainer .course:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #770006;
    transition: height .4s ease-in-out;
    z-index: 1
}

.OurCourses .coursesContainer .course .image {
    width: 100%;
    height: 100%
}

.OurCourses .coursesContainer .course .image img {
    border-radius: 10px;
    height: 560px;
    width: 100%;
    object-fit: cover
}

.OurCourses .coursesContainer .course .desc {
    border-radius: 10px;
    height: 34.3%;
    background-color: #770006;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 25px;
    transition: transform .4s ease-in-out;
    transform: translateY(0);
    z-index: 2
}

.OurCourses .coursesContainer .course .desc h3 {
    padding-top: 5%;
    font-size: 1.6rem;
    color: #f0af13
}

.OurCourses .coursesContainer .course .desc .ogdesc {
    padding-top: 2%;
    opacity: 1
}

.OurCourses .coursesContainer .course .desc .hoverDesc {
    padding: 2% 5% 5%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease-in-out,transform .4s ease-in-out
}

.OurCourses .coursesContainer .course .desc .viewDetails {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease-in-out,transform .4s ease-in-out
}

.OurCourses .coursesContainer .course:hover:before {
    height: 100%
}

.OurCourses .coursesContainer .course:hover .desc {
    transform: translateY(-120%)
}

.OurCourses .coursesContainer .course:hover .ogdesc {
    opacity: 0
}

.OurCourses .coursesContainer .course:hover .hoverDesc {
    opacity: 1;
    transform: translateY(0);
    margin-top: -10%
}

.OurCourses .coursesContainer .course:hover .viewDetails {
    opacity: 1;
    transform: translateY(0);
    padding-top: 1%
}

.OurCourses .mobile-button {
    opacity: 0
}

@media (max-width: 1536px) {
    .OurCourses .coursesContainer {
        row-gap:30px
    }

    .OurCourses .coursesContainer .course {
        width: 30%;
        height: 40%
    }

    .OurCourses .coursesContainer .course .image img {
        height: 450px
    }

    .OurCourses .coursesContainer .course .desc {
        height: 30%;
        padding: 0 20px
    }

    .OurCourses .coursesContainer .course .desc h3 {
        font-size: 1.4rem
    }

    .OurCourses .coursesContainer .course .desc .hoverDesc {
        margin-top: -8%
    }

    .OurCourses .coursesContainer .course .desc .viewDetails {
        padding-top: .8%
    }

    .OurCourses .coursesContainer .course:hover .desc {
        transform: translateY(-110%)
    }
}

@media (max-width: 992px) {
    .OurCourses .head .head-content {
        width:45%
    }

    .OurCourses .coursesContainer .course {
        width: 30.5%;
        height: auto
    }

    .OurCourses .coursesContainer .course .image img {
        height: 400px
    }

    .OurCourses .coursesContainer .course .desc {
        height: 28%;
        padding: 0 18px
    }

    .OurCourses .coursesContainer .course .desc h3 {
        font-size: 1.2rem
    }

    .OurCourses .coursesContainer .course .desc .ogdesc {
        font-size: .75rem
    }

    .OurCourses .coursesContainer .course .desc .hoverDesc {
        font-size: .75rem;
        margin-top: -25%;
        padding: 2% 4%
    }

    .OurCourses .coursesContainer .course .desc .viewDetails {
        padding-top: 5%
    }

    .OurCourses .coursesContainer .course:hover .desc {
        transform: translateY(-105%)
    }

    .OurCourses .mobile-button {
        opacity: 0
    }
}

@media (max-width: 480px) {
    .OurCourses {
        padding:1% 1% 10%;
        overflow: hidden
    }

    .OurCourses .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .OurCourses .head .head-content {
        width: 100%!important
    }

    .OurCourses .head .head-content h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .OurCourses .head .head-content h3 {
        font-size: 16px!important;
        width: 100%!important
    }

    .OurCourses .head .head-content p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .OurCourses .head .corner-button {
        display: none!important
    }

    .OurCourses .coursesContainer {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        gap: 40px;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .OurCourses .coursesContainer::-webkit-scrollbar {
        display: none
    }

    .OurCourses .course {
        flex-shrink: 0;
        min-width: 68%!important;
        max-width: 68%!important;
        height: 300px!important;
        scroll-snap-align: start
    }

    .OurCourses .course .image img {
        height: 100%!important;
        width: 100%!important;
        object-fit: cover!important
    }

    .OurCourses .course .desc {
        padding: 0!important;
        font-size: 12px!important
    }

    .OurCourses .course .desc h3 {
        font-size: 16px!important
    }

    .OurCourses .course .desc .viewDetails .animated-button {
        height: 30px;
        font-size: 12px
    }

    .OurCourses .course .desc .hoverDesc {
        padding: 10% 0!important;
        transform: translateY(-10px)!important
    }

    .OurCourses .mobile-button {
        width: 100%;
        opacity: 1;
        margin-top: 8%
    }

    .OurCourses .mobile-button .animated-button {
        margin: auto;
        font-size: 16px!important;
        height: 50px;
        color: #f0af13;
        background-color: transparent;
        border-color: #f0af13
    }

    .OurCourses .mobile-button .animated-button:hover .btn-text {
        color: #000
    }

    .custom-scroller {
        display: block;
        margin-top: 20px
    }

    .custom-scroller .scroller {
        width: 60%
    }

    .custom-scroller .scroller .slider-bar {
        align-items: start;
        width: 100%!important
    }
}

@media (max-width: 1400px) {
    .scroller {
        width:35%;
        margin: auto;
        padding-top: 1.2%
    }

    .scroller .slider img {
        width: 75%
    }

    .scroller .slider-bar {
        height: 4.5px;
        width: 85%
    }
}

@media (max-width: 1280px) {
    .scroller {
        width:40%;
        margin: auto;
        padding-top: 1.5%
    }

    .scroller .slider img {
        width: 70%
    }

    .scroller .slider-bar {
        height: 4px;
        width: 80%
    }
}

.Placements {
    padding: 3.48% 0
}

.Placements .head {
    padding: 0 5.2%;
    display: flex;
    justify-content: space-between
}

.Placements .head .head-content .heading {
    width: 60%
}

.Placements .head .head-content .title-desc {
    width: 55%
}

.Placements .scrolling-container {
    margin-top: 5%;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    border-top: 2px solid rgba(188,35,41,.4);
    border-bottom: 2px solid rgba(188,35,41,.4)
}

.Placements .scrolling-container .scrolling-wrapper,.Placements .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: none
}

.Placements .scrolling-container .scrolling-wrapper {
    animation: scroll-left 35s linear infinite
}

.Placements .scrolling-container .scrolling-wrapper-2 {
    animation: scroll-right 35s linear infinite;
    margin-top: 40px
}

.Placements .scrolling-container .scroll-box,.Placements .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 95px;
    padding: 22.5px 53px;
    background: #0f0f0f99;
    border-radius: 5px;
    border: 1px solid #fabc3f;
    font-family: Trajan Pro,sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px
}

@media (max-width: 1536px) {
    .Placements .head .head-content .heading {
        width:65%;
        font-size: 3rem
    }

    .Placements .head .head-content .title-desc {
        width: 50%;
        font-size: 1.2rem
    }

    .Placements .scrolling-container {
        width: 100%;
        padding: 25px 0
    }

    .Placements .scrolling-container .scrolling-wrapper,.Placements .scrolling-container .scrolling-wrapper-2 {
        gap: 18px
    }

    .Placements .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .Placements .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 35px
    }

    .Placements .scrolling-container .scroll-box,.Placements .scrolling-container .scroll-box-2 {
        height: 90px;
        padding: 20px 50px;
        font-size: 18px;
        border-radius: 4px
    }
}

@media (max-width: 1440px) {
    .Placements .head .head-content .heading {
        width:70%;
        font-size: 2.6rem
    }

    .Placements .head .head-content .title-desc {
        width: 55%;
        font-size: 1.1rem
    }

    .Placements .scrolling-container {
        width: 100%;
        padding: 20px 0
    }

    .Placements .scrolling-container .scrolling-wrapper,.Placements .scrolling-container .scrolling-wrapper-2 {
        gap: 16px
    }

    .Placements .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .Placements .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 30px
    }

    .Placements .scrolling-container .scroll-box,.Placements .scrolling-container .scroll-box-2 {
        height: 80px;
        padding: 18px 40px;
        font-size: 16px;
        border-radius: 4px
    }
}

@media (max-width: 992px) {
    .Placements {
        padding:3% 0
    }

    .Placements .head {
        padding: 0 4%
    }

    .Placements .head .head-content .heading {
        width: 75%;
        font-size: 2.2rem
    }

    .Placements .head .head-content .title-desc {
        width: 60%;
        font-size: 1rem
    }

    .Placements .scrolling-container {
        padding: 18px 0
    }

    .Placements .scrolling-container .scrolling-wrapper,.Placements .scrolling-container .scrolling-wrapper-2 {
        gap: 14px
    }

    .Placements .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .Placements .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 25px
    }

    .Placements .scrolling-container .scroll-box,.Placements .scrolling-container .scroll-box-2 {
        height: 70px;
        padding: 16px 35px;
        font-size: 14px;
        border-radius: 3px
    }
}

@media (max-width: 480px) {
    .Placements {
        padding:1% 1% 10%
    }

    .Placements .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .Placements .head h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .Placements .head h3 {
        font-size: 16px!important
    }

    .Placements .head p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .Placements .head .corner-button {
        display: none!important
    }

    .Placements .scrolling-container {
        width: 110%;
        margin-left: -10%;
        margin-top: 5%;
        position: relative;
        overflow: hidden;
        padding: 20px 0;
        border-top: 2px solid rgba(188,35,41,.4);
        border-bottom: 2px solid rgba(188,35,41,.4)
    }

    .Placements .scrolling-container .scrolling-wrapper,.Placements .scrolling-container .scrolling-wrapper-2,.Placements .scrolling-container .scrolling-wrapper-3 {
        display: flex;
        gap: 15px;
        width: max-content;
        animation: none
    }

    .Placements .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .Placements .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 30px
    }

    .Placements .scrolling-container .scrolling-wrapper-3 {
        animation: scroll-left 20s linear infinite;
        margin-top: 30px
    }

    .Placements .scrolling-container .scroll-box,.Placements .scrolling-container .scroll-box-2,.Placements .scrolling-container .scroll-box-3 {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        height: 73px;
        padding: 15px 40px;
        background: #0f0f0f99;
        border-radius: 5px;
        border: 1px solid #fabc3f;
        font-family: Trajan Pro,sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

.StProjects .head {
    display: flex;
    justify-content: space-between
}

.StProjects .head .head-content {
    width: 50%
}

.StProjects .stcontainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-top: 3%;
    position: relative;
    transition: opacity .5s ease-in-out;
    overflow-x: auto;
    gap: 20px;
    width: 100%;
    padding-bottom: 20px
}

.StProjects .stcontainer::-webkit-scrollbar {
    display: none
}

.StProjects .stcontainer .grid-section {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start
}

.StProjects .stcontainer .grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    justify-content: space-between;
    align-items: start;
    width: 100%
}

.StProjects .stcontainer .image,.StProjects .stcontainer .video {
    max-width: 553.2px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.StProjects .stcontainer .image p,.StProjects .stcontainer .video p {
    position: absolute;
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 600;
    bottom: 5.7%;
    left: 6.7%
}

.StProjects .stcontainer .image .expand,.StProjects .stcontainer .video .expand {
    position: absolute;
    top: 9%;
    right: .5%;
    transform: translate(-50%,-50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s
}

.StProjects .stcontainer .image .expand:hover,.StProjects .stcontainer .video .expand:hover {
    transform: translate(-50%,-50%) scale(1.2)
}

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

.StProjects .stcontainer .image1,.StProjects .stcontainer .video1 {
    height: 747.59px
}

.StProjects .stcontainer .image2,.StProjects .stcontainer .video2 {
    height: 424.56px
}

.StProjects .stcontainer .image3,.StProjects .stcontainer .video3 {
    height: 299.03px
}

.StProjects .stcontainer .image4,.StProjects .stcontainer .video4 {
    height: 295.86px
}

.StProjects .stcontainer .image5,.StProjects .stcontainer .video5 {
    height: 427.73px
}

.StProjects .stcontainer .column-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.StProjects .stcontainer .column-stack .image {
    margin-bottom: 12px
}

.StProjects .swipe-text,.StProjects .mobile-button {
    display: none
}

@media (max-width: 1536px) {
    .StProjects .head-content {
        width:48%
    }

    .StProjects .stcontainer {
        gap: 15px;
        padding-top: 2.5%;
        padding-bottom: 15px
    }

    .StProjects .stcontainer .grid {
        grid-template-columns: 32% 32% 32%
    }

    .StProjects .stcontainer .image,.StProjects .stcontainer .video {
        max-width: 500px
    }

    .StProjects .stcontainer .image p,.StProjects .stcontainer .video p {
        font-size: 18px;
        bottom: 6%;
        left: 7%
    }

    .StProjects .stcontainer .image .expand,.StProjects .stcontainer .video .expand {
        width: 2.2rem;
        height: 2.2rem
    }

    .StProjects .stcontainer .image1,.StProjects .stcontainer .video1 {
        height: 700px
    }

    .StProjects .stcontainer .image2,.StProjects .stcontainer .video2 {
        height: 400px
    }

    .StProjects .stcontainer .image3,.StProjects .stcontainer .video3,.StProjects .stcontainer .image4,.StProjects .stcontainer .video4 {
        height: 280px
    }

    .StProjects .stcontainer .image5,.StProjects .stcontainer .video5 {
        height: 400px
    }
}

@media (max-width: 992px) {
    .StProjects .head-content {
        width:70%
    }

    .StProjects .head-content h1 {
        font-size: 28px
    }

    .StProjects .stcontainer {
        gap: 12px;
        padding-top: 2%;
        padding-bottom: 12px
    }

    .StProjects .stcontainer .grid {
        grid-template-columns: 33% 33% 33%
    }

    .StProjects .stcontainer .image,.StProjects .stcontainer .video {
        border-radius: 8px
    }

    .StProjects .stcontainer .image p,.StProjects .stcontainer .video p {
        font-size: 14px;
        bottom: 5%;
        left: 6%
    }

    .StProjects .stcontainer .image .expand,.StProjects .stcontainer .video .expand {
        width: 1.8rem;
        height: 1.8rem
    }

    .StProjects .stcontainer .image img,.StProjects .stcontainer .image video,.StProjects .stcontainer .video img,.StProjects .stcontainer .video video {
        border-radius: 8px
    }

    .StProjects .stcontainer .image1,.StProjects .stcontainer .video1 {
        height: 400px
    }

    .StProjects .stcontainer .image2,.StProjects .stcontainer .video2 {
        height: 230px
    }

    .StProjects .stcontainer .image3,.StProjects .stcontainer .video3,.StProjects .stcontainer .image4,.StProjects .stcontainer .video4 {
        height: 160px
    }

    .StProjects .stcontainer .image5,.StProjects .stcontainer .video5 {
        height: 230px
    }

    .StProjects .scroller {
        width: 36%
    }

    .StProjects .corner-button {
        margin-top: 1.8%
    }
}

@media (max-width: 480px) {
    .StProjects {
        padding:1% 1% 10%
    }

    .StProjects .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .StProjects .head .head-content {
        width: 100%!important
    }

    .StProjects .head .head-content h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .StProjects .head .head-content h3 {
        font-size: 16px!important;
        width: 100%!important
    }

    .StProjects .head .head-content p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .StProjects .head .corner-button {
        display: none!important
    }

    .StProjects .stcontainer {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 0;
        align-items: center;
        padding: 0
    }

    .StProjects .stcontainer .grid-section {
        flex: 0 0 100vw;
        width: 100vw;
        height: 520px;
        scroll-snap-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap
    }

    .StProjects .stcontainer .grid {
        display: flex;
        flex-direction: row;
        width: 100vw;
        height: 520px;
        gap: 5%;
        overflow-x: auto;
        scroll-behavior: smooth
    }

    .StProjects .stcontainer .grid::-webkit-scrollbar {
        display: none
    }

    .StProjects .stcontainer .image1,.StProjects .stcontainer .video1,.StProjects .stcontainer .column-stack {
        flex: 0 0 100vw;
        width: 100vw;
        height: 520px;
        object-fit: cover;
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .StProjects .stcontainer .image1 .image2,.StProjects .stcontainer .image1 .video2,.StProjects .stcontainer .image1 .image5,.StProjects .stcontainer .image1 .video5,.StProjects .stcontainer .video1 .image2,.StProjects .stcontainer .video1 .video2,.StProjects .stcontainer .video1 .image5,.StProjects .stcontainer .video1 .video5,.StProjects .stcontainer .column-stack .image2,.StProjects .stcontainer .column-stack .video2,.StProjects .stcontainer .column-stack .image5,.StProjects .stcontainer .column-stack .video5 {
        height: 45%
    }

    .StProjects .stcontainer .image1 .image3,.StProjects .stcontainer .image1 .video3,.StProjects .stcontainer .image1 .image4,.StProjects .stcontainer .image1 .video4,.StProjects .stcontainer .video1 .image3,.StProjects .stcontainer .video1 .video3,.StProjects .stcontainer .video1 .image4,.StProjects .stcontainer .video1 .video4,.StProjects .stcontainer .column-stack .image3,.StProjects .stcontainer .column-stack .video3,.StProjects .stcontainer .column-stack .image4,.StProjects .stcontainer .column-stack .video4 {
        height: 55%
    }

    .StProjects .swipe-text {
        display: block;
        margin-top: 2%;
        text-align: right;
        font-size: 14px;
        color: #fabc3f
    }

    .StProjects .mobile-button {
        margin-top: 2%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        width: 100%!important;
        text-align: center!important
    }

    .StProjects .mobile-button .animated-button {
        width: 80%!important;
        font-size: 15.2px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .StProjects .mobile-button .animated-button:hover .btn-text {
        color: #000
    }

    .stScroll .scroller {
        opacity: 0
    }
}

.Hero {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    max-height: 850px;
    min-height: 850px;
    width: 100%
}

.Hero .head {
    width: 55%;
    margin-top: 1%
}

.Hero .head .head-content .title p {
    font-weight: 700;
    font-size: 20px
}

.Hero .head .corner-button {
    padding: 4% 0
}

.Hero .head .corner-button .animated-button {
    color: #fff;
    border: 1px solid #bc2329;
    background-color: #bc2329;
    transition: none
}

.Hero .head .corner-button .animated-button:hover {
    border: none
}

.Hero .head .thumbnail_Container {
    display: flex;
    justify-content: start;
    padding-top: 5%;
    flex-direction: row-reverse;
    gap: 4%;
    height: 40%;
    transition: transform .5s ease-in-out;
    max-height: 270px;
    min-height: 270px
}

.Hero .head .thumbnail_Container .thumbnail-wrapper {
    position: relative;
    display: inline-block;
    transition: transform 1s ease-in-out,opacity 1s ease-in-out
}

.Hero .head .thumbnail_Container .scaling-thumbnail {
    animation: scaleAndFade 1s ease-in-out forwards
}

@keyframes scaleAndFade {
    0% {
        transform: scale(1);
        opacity: 1
    }
}

.Hero .head .thumbnail_Container .thumbnail {
    opacity: .9;
    width: 100%;
    height: 250px;
    border-radius: 8px
}

.Hero .head .thumbnail_Container .thumbnail-text {
    z-index: 2;
    position: absolute;
    top: 70%;
    left: 40%;
    transform: translate(-50%);
    color: #fff;
    padding: 5px 0%;
    font-size: 16px;
    border-radius: 5px
}

.Hero .head .timerWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 3%
}

.Hero .head .progressBar {
    width: 80%;
    height: 4px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-top: 6%
}

.Hero .head .progress {
    height: 100%;
    background: #f0af13;
    width: 0;
    transition: width 5s linear
}

@media (max-width: 1536px) {
    .Hero {
        background-size:cover;
        max-height: 640px;
        min-height: 640px;
        margin-top: 1%
    }

    .Hero .head {
        width: 60%
    }

    .Hero .head .head-content .title p {
        font-size: 18px
    }

    .Hero .head .corner-button {
        padding: 3% 0
    }

    .Hero .head .thumbnail_Container {
        padding-top: 6%;
        gap: 3%;
        height: 35%
    }

    .Hero .head .thumbnail_Container .scaling-thumbnail {
        animation: scaleAndFade 1s ease-in-out forwards
    }

    @keyframes scaleAndFade {
        0% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .Hero .head .thumbnail_Container .thumbnail {
        height: 200px
    }

    .Hero .head .thumbnail_Container .thumbnail-text {
        font-size: 12px;
        top: 60%
    }

    .Hero .head .timerWrapper {
        margin-top: 0
    }

    .Hero .head .progressBar {
        width: 75%;
        height: 3px;
        margin-top: 2%
    }
}

@media (max-width: 1440px) {
    .Hero {
        background-size:cover;
        min-height: 90vh;
        max-height: 90vh
    }

    .Hero .head {
        width: 65%
    }

/*    .Hero .head .head-content .title p {
        font-size: 176x
    }*/

    .Hero .head .corner-button {
        padding: 3% 0
    }

    .Hero .head .thumbnail_Container {
        padding-top: 10%;
        gap: 2.5%;
        height: 35%
    }

    .Hero .head .thumbnail_Container .scaling-thumbnail {
        animation: scaleAndFade 1s ease-in-out forwards
    }

    @keyframes scaleAndFade {
        0% {
            transform: scale(1);
            opacity: 1
        }
    }

    .Hero .head .thumbnail_Container .thumbnail {
        height: 200px
    }

    .Hero .head .thumbnail_Container .thumbnail-text {
        font-size: 13px;
        top: 60%
    }

    .Hero .head .timerWrapper {
        margin-top: 2%
    }

    .Hero .head .progressBar {
        width: 70%;
        height: 3px
    }
}

@media (max-width: 992px) {
    .Hero {
        background-size:cover;
        max-height: 650px;
        min-height: 650px
    }

    .Hero .head {
        width: 72%;
        margin-top: 2%
    }

    .Hero .head .head-content .title p {
        font-size: 16px
    }

    .Hero .head .corner-button {
        padding: 3% 0
    }

    .Hero .head .corner-button .animated-button {
        font-size: 14px;
        padding: 10px 20px
    }

    .Hero .head .thumbnail_Container {
        padding-top: 20%;
        gap: 2%;
        height: 33%;
        max-height: 200px;
        min-height: 200px
    }

    .Hero .head .thumbnail_Container .thumbnail {
        height: 170px
    }

    .Hero .head .thumbnail_Container .thumbnail-text {
        font-size: 12px;
        top: 120%
    }

    .Hero .head .timerWrapper {
        margin-top: 13%
    }

    .Hero .head .progressBar {
        width: 68%;
        height: 3px;
        margin-top: 4%
    }
}

@media (max-width: 480px) {
    .Hero {
        background-size:contain;
        margin-top: 0;
        width: 100%;
        min-height: 210px;
        max-height: 210px;
        margin-bottom: 2%
    }

    .Hero .head {
        width: 100%;
        padding: 8px!important;
        text-align: left;
        margin-top: 3%
    }

    .Hero .head .head-content {
        width: 100%!important
    }

    .Hero .head .head-content h2 {
        font-size: 16px!important;
        width: 50%!important
    }

    .Hero .head .head-content h3 {
        margin-top: -5%;
        font-size: 12px!important;
        width: 100%!important
    }

    .Hero .head .head-content p {
        font-size: 13px!important;
        margin-bottom: 1%;
        width: 100%!important
    }

    .Hero .head .corner-button .animated-button {
        height: 25px;
        font-size: 12px
    }

    .Hero .head .thumbnail_Container,.Hero .head .timerWrapper {
        display: none
    }
}

.Virtual {
    margin: 5% 0;
    padding: 0;
    display: flex;
    background-color: #fabc3f;
    box-shadow: -4px -4px 20px #f0af13 inset,4px 4px 20px #f0af13 inset;
    position: relative
}

.Virtual .head {
    width: 45%;
    padding: 8% 6%
}

.Virtual .head .heading {
    color: #bc2329
}

.Virtual .head .title,.Virtual .head .title-desc {
    color: #000;
    width: 80%
}

.Virtual .container {
    width: 60%;
    height: 700px;
    position: relative
}

.Virtual .container img {
    width: 100%;
    height: 100%
}

.Virtual .container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    transition: transform .3s ease-in-out
}

.Virtual .container .play-button:hover {
    transform: translate(-50%,-50%) scale(1.1)
}

.Virtual .video-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.Virtual .video-modal .video-container {
    position: relative;
    width: 80%;
    max-width: 900px
}

.Virtual .video-modal .video-container iframe {
    width: 100%;
    height: 500px;
    border-radius: 8px
}

.Virtual .video-modal .video-container .close-button {
    position: absolute;
    top: -40px;
    right: -40px;
    background: #bc2329;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 50%;
    transition: .3s
}

.Virtual .video-modal .video-container .close-button:hover {
    background: #821131
}

@media (max-width: 1536px) {
    .Virtual {
        margin:4% 0
    }

    .Virtual .head {
        width: 50%;
        padding: 6% 5%
    }

    .Virtual .head .title,.Virtual .head .title-desc {
        width: 85%
    }

    .Virtual .container {
        width: 55%;
        height: 600px
    }

    .Virtual .container .play-button {
        width: 70px;
        height: 70px
    }

    .Virtual .container .play-button svg {
        width: 50px;
        height: 50px
    }

    .Virtual .video-modal .video-container {
        width: 85%;
        max-width: 800px
    }

    .Virtual .video-modal .video-container iframe {
        height: 450px
    }

    .Virtual .video-modal .video-container .close-button {
        top: -30px;
        right: -30px;
        font-size: 18px;
        padding: 7px 12px
    }
}

@media (max-width: 992px) {
    .Virtual {
        margin:3% 0;
        background-color: #fabc3f;
        box-shadow: -3px -3px 15px #f0af13 inset,3px 3px 15px #f0af13 inset
    }

    .Virtual .head {
        width: 55%;
        padding: 5% 4%
    }

    .Virtual .head .heading {
        font-size: 1.8rem;
        color: #bc2329
    }

    .Virtual .head .title,.Virtual .head .title-desc {
        width: 85%;
        color: #000;
        font-size: 14px
    }

    .Virtual .container {
        width: 45%;
        height: 380px;
        position: relative
    }

    .Virtual .container img {
        width: 100%;
        height: 100%
    }

    .Virtual .container .play-button {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 55%;
        left: 55%;
        transform: translate(-50%,-50%);
        cursor: pointer;
        transition: transform .3s ease-in-out
    }

    .Virtual .container .play-button:hover {
        transform: translate(-50%,-50%) scale(1.1)
    }

    .Virtual .container .play-button svg {
        width: 40px;
        height: 40px
    }

    .Virtual .video-modal .video-container {
        width: 80%;
        max-width: 600px
    }

    .Virtual .video-modal .video-container iframe {
        width: 100%;
        height: 340px;
        border-radius: 8px
    }

    .Virtual .video-modal .video-container .close-button {
        top: -25px;
        right: -25px;
        font-size: 16px;
        padding: 6px 10px;
        background: #bc2329;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
        transition: .3s
    }

    .Virtual .video-modal .video-container .close-button:hover {
        background: #821131
    }
}

@media (max-width: 480px) {
    .Virtual {
        flex-direction:column;
        align-items: center;
        text-align: center
    }

    .Virtual .head {
        width: 100%;
        padding: 10px!important
    }

    .Virtual .head h2 {
        text-align: left;
        font-size: 20px!important
    }

    .Virtual .head h3 {
        width: 100%!important;
        font-size: 16px!important;
        text-align: left
    }

    .Virtual .head p {
        width: 100%!important;
        font-size: 14px!important;
        text-align: left;
        margin-bottom: 4%
    }

    .Virtual .container {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center
    }

    .Virtual .container img {
        width: 100%;
        height: auto
    }

    .Virtual .container .play-button {
        width: 60px;
        height: 60px
    }

    .Virtual .container .play-button svg {
        width: 40px;
        height: 40px
    }

    .Virtual .video-modal .video-container {
        width: 90%
    }

    .Virtual .video-modal .video-container iframe {
        height: 250px
    }

    .Virtual .video-modal .video-container .close-button {
        top: -20px;
        right: -20px;
        font-size: 16px;
        padding: 6px 10px
    }
}

.EventSection {
    padding: 0 0 3.48%
}

.EventSection .head {
    padding: 3.48% 6% 0;
    display: flex;
    justify-content: space-between
}

.EventSection .head .heading {
    width: 50%
}

.EventSection .head .title-desc {
    width: 58%;
    font-size: 18px
}

.EventSection .head .title-desc a {
    text-decoration: underline;
    color: #fabc3f
}

.EventSection .head .title-desc a:hover {
    text-decoration: none
}

.EventSection .events_container {
    display: flex;
    padding-top: 4%;
    overflow: scroll
}

.EventSection .events_container::-webkit-scrollbar {
    display: none
}

.EventSection .events_container .event {
    position: relative;
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

.EventSection .events_container .event .bg {
    position: relative;
    z-index: 1;
    width: 100%
}

.EventSection .events_container .event .bg img {
    width: 100%;
    height: auto
}

.EventSection .events_container .event .image {
    position: absolute;
    width: 24vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center
}

.EventSection .events_container .event .image img {
    width: 100%;
    height: 34vh;
    display: block;
    cursor: pointer
}

.EventSection .events_container .event .image p {
    position: absolute;
    font-size: 20px;
    padding: 30px 10% 0;
    width: 100%;
    height: 100%;
    background: #821131;
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.EventSection .events_container .event .image .animated-button {
    background: #f0af13;
    color: #000;
    position: absolute;
    opacity: 0;
    bottom: 30px;
    z-index: 3;
    cursor: pointer
}

.EventSection .events_container .event:hover .image p {
    cursor: pointer;
    opacity: 1
}

.EventSection .events_container .event:hover .animated-button {
    opacity: 1;
    z-index: 3;
    cursor: pointer
}

.EventSection .scroller {
    width: 32%
}

.EventSection .scroller .slider-bar {
    width: 100%
}

.EventSection .mobile-button {
    display: none
}

@media (max-width: 1536px) {
    .EventSection .head .heading {
        width:65%
    }

    .EventSection .head .title-desc {
        width: 60%;
        font-size: 14px
    }

    .EventSection .events_container {
        padding-top: 2%
    }



    .EventSection .events_container .event .image p {
        font-size: 17px
    }

    .EventSection .events_container .event .image .animated-button {
        bottom: 10px
    }

    .EventSection .scroller {
        margin-top: 2%;
        width: 37%
    }
}

@media (max-width: 992px) {
    .EventSection {
        padding-bottom:2.5%
    }

    .EventSection .head {
        padding: 2.5% 5% 0;
        display: flex;
        justify-content: space-between
    }

    .EventSection .head .heading {
        width: 55%;
        font-size: 2rem
    }

    .EventSection .head .title-desc {
        width: 50%;
        font-size: 14px
    }

    .EventSection .events_container {
        padding-top: 3%;
        overflow-x: scroll
    }

    .EventSection .events_container .event {
        width: 22vw;
        flex-shrink: 0;
        position: relative
    }

    .EventSection .events_container .event .bg {
        width: 100%
    }

    .EventSection .events_container .event .bg img {
        width: 100%;
        height: auto
    }

    .EventSection .events_container .event .image {
        width: 22.5vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .EventSection .events_container .event .image img {
        height: 24vh;
        width: 100%;
        cursor: pointer
    }

    .EventSection .events_container .event .image p {
        font-size: 14px;
        padding: 40px 10%
    }

    .EventSection .events_container .event .image .animated-button {
        bottom: 36px;
        opacity: 0;
        background: #f0af13;
        color: #000;
        position: absolute;
        cursor: pointer
    }

    .EventSection .events_container .event:hover .image p {
        opacity: 1;
        cursor: pointer
    }

    .EventSection .events_container .event:hover .image .animated-button {
        opacity: 1;
        z-index: 3;
        cursor: pointer
    }

    .EventSection .scroller {
        width: 30%;
        margin-top: 1.5%
    }

    .EventSection .scroller .slider-bar {
        width: 100%
    }

    .EventSection .mobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .EventSection {
        padding:1% 1% 10%;
        flex: 0 0 100%
    }

    .EventSection .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .EventSection .head .head-content {
        width: 100%!important
    }

    .EventSection .head .head-content h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .EventSection .head .head-content h3 {
        font-size: 16px!important;
        width: 100%!important
    }

    .EventSection .head .head-content p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important;
        font-weight: 400!important
    }

    .EventSection .head .corner-button {
        display: none!important
    }

    
}

@media (max-width: 1536px) {
    .BigLeague {
        background-size: cover;
        padding: 4% 0 4% 5%;
    }
}
.BigLeague {
    background-image: url(../assets/bg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    padding: 5% 0 5% 6%;
    height: auto;
}

@media (max-width: 1536px) {
    .BigLeague .head {
        flex: 1.3;
    }
}
.BigLeague .head {
    flex: 1.5;
    width: 100%;
}
@media (max-width: 1536px) {
    .BigLeague .Student_container {
        margin-top: -40px;
        flex: 2;
        /*height: 550px;*/
    }
}
.BigLeague .Student_container {
    margin-top: -50px;
    flex: 2;
    display: flex;
    flex-direction: column;
    overflow-x: scroll;
    /*height: 620px;*/
}
@media (max-width: 1536px) {
    .BigLeague .Student_container .studentWrapper {
        height: 550px;
        margin-left: 6%;
        gap: 20px;
    }
}
@media (max-width: 1536px) {
    .BigLeague .Student_container .studentWrapper .Student_card {
        max-width: 200px;
        height: 75%;
        flex: 0 0 32%;
    }
}
.BigLeague .Student_container .studentWrapper .Student_card {
    background-color: #fabc3f;
    max-width: 200px;
    border-radius: 10px;
    height: 80%;
    flex: 0 0 33%;
}
@media (max-width: 1536px) {
    .BigLeague .Student_container .studentWrapper .Student_card .image {
        height: 65%;
    }
}
.BigLeague .Student_container .studentWrapper .Student_card .image {
    width: 100%;
    height: 70%;
}
.BigLeague .Student_container .studentWrapper .Student_card .name {
    /*padding: 2% 0 0 8%;*/
    color: #bc2329;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
@media (max-width: 1536px) {
    .BigLeague .Student_container .studentWrapper .Student_card .name {
        font-size: 15px;
    }
}
.BigLeague .Student_container .studentWrapper .Student_card .desc {
    color: #000;
    padding: 0 8%;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
@media (max-width: 1536px) {
    .BigLeague .Student_container .studentWrapper .Student_card .desc {
        font-size: 13px;
    }
}
.BigLeague .Student_container .studentWrapper .Student_card .image img {
    width: 100%;
    height: 100%;
}

/* 1. Viewport Container */
#maac-slider-container { 
    width: 100%;
    max-width: 1200px;
    /*margin: 40px auto;*/
    overflow: hidden !important; 
    position: relative !important;
    user-select: none !important; 
    touch-action: pan-y !important;
}

/* 2. Slidable Wrapper */
#maac-wrapper {
    display: flex !important;
    /* 10 cards / 3 visible */
    width: 300.333333% !important; 
    transition: transform 0.3s ease-out !important; 
}

/* 3. Individual Cards (NEW UNIQUE CLASS) */
#maac-wrapper .maac-slide-card {
    min-width: 10% !important; /* 1/10th of the wrapper width */
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 10px; 
}

/* 4. Scroll Bar Track */
#maac-big-scroll, #maac-big-scroll-event {
    width: 300px; 
    height: 30px;
    margin: 0px auto;
    position: relative;
}

.maac-scroller-track, .maac-scroller-track-event {
    position: relative;
    /*height: 10px;*/
}

#maac-slider-bar, #maac-slider-bar-event {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #888; 
}
#maac-big-scroll {
    top: -10px;
}
/* 5. Draggable Handle */
#maac-handle,  #maac-handle-event {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0px); 
    width: 40px; 
    height: 40px;
    /*background-color: #e5a000; */
    border-radius: 50%;
    cursor: grab !important;
    touch-action: none !important; 
}

#maac-handle img, #maac-handle-event img {
    pointer-events: none !important; 
}

/* Add any specific styling for the card content back in here, if needed */
#maac-wrapper .maac-slide-card .name h3,
#maac-wrapper .maac-slide-card .desc {
    color: #333;
    /*background-color: #e5a000;*/
    padding: 10px;
}

.corner-button {
    margin-top: 50px;
}


#maac-events-container { 
    max-width: 1200px;
    margin: 40px auto;
    overflow: hidden !important; 
    position: relative !important;
    user-select: none !important; 
    touch-action: pan-y !important;
}

#maac-events-wrapper {
    display: flex !important;
    /* 7 events total, 3 visible. */
    width: 233.333333% !important; 
    transition: transform 0.3s ease-out !important; 
}

/* Individual Events */
#maac-events-wrapper .event {
    min-width: 14.2857% !important; 
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 10px; 
}





















.tPartner {
    background-color: #821131;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    display: flex
}

.tPartner .head {
    width: 60%;
    display: flex;
    flex-direction: column
}

.tPartner .head .heading {
    width: 70%
}

.tPartner .head .title {
    width: 65%;
    align-self: stretch
}

.tPartner .corner-button {
    padding-top: 8%
}

.tPartner .tp_Container {
    width: 40%;
    justify-content: center;
    align-items: center;
    gap: 5%;
    display: flex
}

.tPartner .tp_Container img {
    width: 100%;
    height: 80%
}

@media (max-width: 1536px) {
    .tPartner .head {
        width:55%
    }

    .tPartner .head .title {
        width: 70%
    }

    .tPartner .corner-button {
        padding-top: 6%
    }

    .tPartner .tp_Container {
        width: 40%;
        gap: 3%
    }

    .tPartner .tp_Container img {
        width: 100%;
        height: 60%
    }
}

@media (max-width: 992px) {
    .tPartner {
        padding:5% 10% 5% 5%
    }

    .tPartner .head {
        width: 70%;
        align-items: left;
        padding: 0
    }

    .tPartner .head h2 {
        text-align: left;
        font-size: 34px
    }

    .tPartner .head h3 {
        width: 100%;
        font-size: 18px;
        text-align: left;
        margin-bottom: 4%
    }
}

@media (max-width: 480px) {
    .tPartner {
        flex-direction:column;
        align-items: center;
        padding: 10px;
        text-align: center
    }

    .tPartner .head {
        width: 100%;
        align-items: left;
        padding: 0!important
    }

    .tPartner .head h2 {
        text-align: left;
        font-size: 20px!important
    }

    .tPartner .head h3 {
        width: 100%!important;
        font-size: 14px!important;
        text-align: left;
        margin-bottom: 4%
    }

    .tPartner .head .corner-button {
        display: none
    }

    .tPartner .corner-button {
        padding-top: 5%
    }

    .tPartner .tp_Container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0!important
    }

    .tPartner .tp_Container img {
        width: 80%;
        object-fit: cover;
        border-radius: 10px
    }

    .tPartner .tp_Container img:nth-of-type(1) {
        object-fit: fill;
        width: 60%;
        height: 30vh
    }

    .tPartner .tp_Container img:nth-of-type(3) {
        object-fit: cover;
        width: 100%
    }
}

.homeEnquiry {
    padding: 4% 10%;
    text-align: left;
    position: relative
}

.homeEnquiry .heading {
    margin-bottom: 1rem
}

.homeEnquiry .title {
    width: 50%
}

.homeEnquiry .he-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem
}

.homeEnquiry .he-container .he-left {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: center
}

.homeEnquiry .he-container .he-left .he-shape1,.homeEnquiry .he-container .he-left .he-shape2 {
    position: absolute
}

.homeEnquiry .he-container .he-left .he-shape1 {
    background: #fabc3f;
    width: 8vw;
    height: 80vh;
    top: -5vh;
    left: 10%
}

.homeEnquiry .he-container .he-left .he-shape2 {
    transform: rotate(90deg);
    width: 5vw;
    height: 45vh;
    background: #821131;
    bottom: -32.5%;
    right: 25%
}

.homeEnquiry .he-container .he-left .main {
    z-index: 2;
    width: 27vw;
    height: 70vh;
    object-fit: cover
}

.homeEnquiry .he-container .he-left .main img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.homeEnquiry .he-container .he-right {
    width: 50%;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px #0000001a
}

.homeEnquiry .he-container .he-right .enquiry-form {
    display: flex;
    flex-direction: column
}

.homeEnquiry .he-container .he-right .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 1.5vh
}

.homeEnquiry .he-container .he-right .enquiry-form .input-field {
    background: transparent;
    width: 100%;
    padding: .8vw;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.4);
    font-size: 1rem;
    color: #fff
}

.homeEnquiry .he-container .he-right .enquiry-form .input-field label {
    color: #fff
}

.homeEnquiry .he-container .he-right .enquiry-form .input-field::placeholder {
    color: #ccc;
    opacity: 1
}

.homeEnquiry .he-container .he-right .enquiry-form select.input-field {
    color: #ccc
}

.homeEnquiry .he-container .he-right .enquiry-form select.input-field option {
    color: #000
}

.homeEnquiry .he-container .he-right .enquiry-form .privacy-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem
}

.homeEnquiry .he-container .he-right .enquiry-form .animated-button {
    margin-top: 1.5rem;
    padding: 0 4.6vw
}

@media (max-width: 992px) {
    .homeEnquiry {
        padding:5% 4%
    }

    .homeEnquiry .title {
        width: 70%
    }

    .homeEnquiry .he-container {
        gap: 1.5rem;
        margin-top: 2rem
    }

    .homeEnquiry .he-container .he-left {
        width: 45%
    }

    .homeEnquiry .he-container .he-left .he-shape1 {
        width: 10vw;
        height: 65vh;
        top: -4vh;
        left: 8%
    }

    .homeEnquiry .he-container .he-left .he-shape2 {
        width: 6vw;
        height: 40vh;
        bottom: -29%;
        right: 20%
    }

    .homeEnquiry .he-container .he-left .main {
        width: 29vw;
        height: 60vh
    }

    .homeEnquiry .he-container .he-right {
        width: 50%;
        padding: 1.5rem
    }

    .homeEnquiry .he-container .he-right .enquiry-form .input-group {
        width: 90%;
        gap: 1rem
    }

    .homeEnquiry .he-container .he-right .enquiry-form .input-field {
        padding: 1vw;
        font-size: .85rem
    }

    .homeEnquiry .he-container .he-right .enquiry-form .animated-button {
        margin-top: 1.2rem;
        padding: 0 4vw
    }
}

@media (max-width: 480px) {
    .homeEnquiry {
        padding:1% 3%
    }

    .homeEnquiry .heading {
        font-size: 20px;
        margin-bottom: 1%
    }

    .homeEnquiry .title {
        width: 100%;
        font-size: 16px
    }

    .homeEnquiry .he-container {
        display: flex;
        flex-direction: column
    }

    .homeEnquiry .he-container .he-left .main {
        width: 80vw;
        height: auto
    }

    .homeEnquiry .he-container .he-left .he-shape1 {
        width: 15vw;
        height: 50vh;
        left: -40%;
        top: -10%
    }

    .homeEnquiry .he-container .he-left .he-shape2 {
        width: 15vw;
        height: 30vh;
        bottom: -40%;
        right: 15%
    }

    .homeEnquiry .he-container .he-left .main {
        width: 100%;
        height: 40vh
    }

    .homeEnquiry .he-container .he-left .main img {
        object-fit: contain
    }

    .homeEnquiry .he-container .he-right {
        padding: 2rem 1rem 1rem;
        width: 100%
    }

    .homeEnquiry .he-container .he-right .enquiry-form label {
        font-size: 14px!important
    }

    .homeEnquiry .he-container .he-right .enquiry-form .input-field {
        width: 120%;
        font-size: .8rem;
        padding: .8rem
    }

    .homeEnquiry .he-container .he-right .enquiry-form .animated-button {
        font-size: 14px;
        padding: .8rem 12.6vw
    }
}

.homeVideoTest .head {
    display: flex;
    justify-content: space-between
}

.homeVideoTest .testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.homeVideoTest .testimonials-section .stories-container {
    padding: 5% 0 2%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(500px,1fr));
    justify-items: center;
    align-items: center
}

.homeVideoTest .testimonials-section .stories-container .story {
    background-color: #0f0f0f;
    position: relative;
    min-width: 33%;
    height: 600px;
    display: flex;
    padding: 4% 2%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.5);
    text-align: center;
    align-items: stretch;
    margin: 8%
}

.homeVideoTest .testimonials-section .stories-container .story .qopen {
    position: absolute;
    top: 3%;
    left: 3%
}

.homeVideoTest .testimonials-section .stories-container .story .qopen img {
    width: 60px;
    height: 60px
}

.homeVideoTest .testimonials-section .stories-container .story .qclose {
    bottom: 3%;
    right: 3%;
    position: absolute
}

.homeVideoTest .testimonials-section .stories-container .story .qclose img {
    width: 60px;
    height: 60px
}

.homeVideoTest .testimonials-section .stories-container .story .image {
    width: 25%;
    position: absolute;
    top: -10%;
    left: 41%
}

.homeVideoTest .testimonials-section .stories-container .story .image img {
    height: 100%;
    width: 100%
}

.homeVideoTest .testimonials-section .stories-container .story .quoteContainer .top {
    width: 100%;
    margin-top: 102px;
    margin-left: auto;
    margin-right: auto
}

.homeVideoTest .testimonials-section .stories-container .story .quoteContainer .middle {
    width: 100%;
    margin-top: 20px
}

.homeVideoTest .testimonials-section .stories-container .story .quoteContainer .bottom {
    width: 100%;
    margin-top: 30px
}

.homeVideoTest .testimonials-section .stories-container .story .quoteContainer .name {
    color: #bc2329;
    font-size: 20px;
    padding: 4% 16% 0;
    font-weight: 600
}

.homeVideoTest .testimonials-section .stories-container .story .quoteContainer .desc {
    font-family: Raleway,sans-serif;
    padding: 0 16%;
    font-size: 16px
}

.homeVideoTest .testimonials-section .video-stories-container {
    display: flex;
    width: 100%;
    overflow: scroll;
    position: relative
}

.homeVideoTest .testimonials-section .video-stories-container::-webkit-scrollbar {
    display: none
}

.homeVideoTest .mobile-button {
    display: none;
    margin-top: 80px
}

.homeVideoTest .mobile-button button {
    margin: auto
}

@media (max-width: 1536px) {
    .homeVideoTest .testimonials-section .stories-container {
        grid-template-columns:repeat(auto-fit,minmax(400px,1fr))
    }

    .homeVideoTest .testimonials-section .stories-container .story {
        height: 550px;
        padding: 3% 2%;
        margin: 6%
    }

    .homeVideoTest .testimonials-section .stories-container .story .image {
        top: -8%;
        left: 40%
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 90px
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 4% 12% 0
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 15px;
        padding: 0 12%
    }

    .homeVideoTest .mobile-button {
        display: none;
        margin-top: 80px
    }

    .homeVideoTest .mobile-button button {
        margin: auto
    }
}

@media (max-width: 992px) {
    .homeVideoTest .testimonials-section .stories-container {
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr))
    }

    .homeVideoTest .testimonials-section .stories-container .story {
        height: 450px;
        padding: 3% 1.5%;
        margin: 4%
    }

    .homeVideoTest .testimonials-section .stories-container .story .image {
        top: -6%;
        left: 38%;
        width: 20%
    }

    .homeVideoTest .testimonials-section .stories-container .story .image img {
        width: 100%;
        height: 100%
    }

    .homeVideoTest .testimonials-section .stories-container .story .qopen img,.homeVideoTest .testimonials-section .stories-container .story .qclose img {
        width: 45px;
        height: 45px
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 70px
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .middle {
        margin-top: 15px
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .bottom {
        margin-top: 20px
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 16px;
        padding: 3% 10% 0
    }

    .homeVideoTest .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 10%
    }

    .homeVideoTest .mobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .homeVideoTest {
        padding:0;
        padding-bottom: 2rem
    }

    .homeVideoTest .head {
        padding: 1rem
    }

    .homeVideoTest .head .head-content {
        gap: 10px
    }

    .homeVideoTest .head .head-content .heading {
        font-size: 1.5rem;
        line-height: 1.2
    }

    .homeVideoTest .head .head-content .title {
        font-size: 1rem;
        margin-top: .5rem
    }

    .homeVideoTest .head .head-content .title-desc {
        font-size: .875rem;
        margin-top: .25rem
    }

    .homeVideoTest .head .corner-button {
        display: none
    }

    .homeVideoTest .testimonials-section .video-stories-container {
        flex-direction: row;
        flex: 0 0 100%;
        gap: 2rem
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        width: 100%!important
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story .left {
        height: 220px;
        width: 100%;
        padding: 2rem
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story .left h1 {
        font-size: 1.2rem;
        width: 100%;
        margin-bottom: .5rem
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story .left p {
        width: 100%;
        font-size: .875rem;
        line-height: 1.4
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story .right {
        right: 0;
        width: 100%;
        height: 180px;
        background-size: cover!important;
        background-position: center center!important;
        position: relative
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton {
        width: 48px;
        height: 48px
    }

    .homeVideoTest .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton img {
        width: 100%;
        height: auto
    }

    .homeVideoTest .testimonials-section .modal-content {
        width: 90%;
        max-width: 100%;
        position: relative
    }

    .homeVideoTest .testimonials-section .modal-content iframe {
        width: 100%;
        height: 200px
    }

    .homeVideoTest .mobile-button {
        margin-top: 10%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        width: 100%!important;
        text-align: center!important
    }

    .homeVideoTest .mobile-button .animated-button {
        width: 80%!important;
        font-size: 16px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .homeVideoTest .mobile-button .animated-button:hover .btn-text {
        color: #000
    }
}

.CoursesCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.CoursesCTA .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 80%
}

.CoursesCTA .desc,.CoursesCTA .desc2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%;
    width: 45%
}

.CoursesCTA .coursesCTAButton .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.CoursesCTA .coursesCTAButton .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .CoursesCTA {
        height:400px;
        background-size: cover
    }

    .CoursesCTA .title {
        font-size: 52px;
        width: 65%
    }

    .CoursesCTA .desc,.CoursesCTA .desc2 {
        font-size: 22px;
        width: 55%
    }

    .CoursesCTA .coursesCTAButton .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .CoursesCTA {
        height:380px
    }

    .CoursesCTA .title {
        font-size: 48px;
        width: 70%
    }

    .CoursesCTA .desc,.CoursesCTA .desc2 {
        font-size: 20px;
        width: 55%
    }

    .CoursesCTA .coursesCTAButton .animated-button {
        font-size: 17px;
        padding: 10px 22px
    }
}

@media (max-width: 1280px) {
    .CoursesCTA {
        height:360px
    }

    .CoursesCTA .title {
        font-size: 44px;
        width: 75%
    }

    .CoursesCTA .desc,.CoursesCTA .desc2 {
        font-size: 18px;
        width: 50%
    }

    .CoursesCTA .coursesCTAButton .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .CoursesCTA {
        height:340px
    }

    .CoursesCTA .title {
        font-size: 40px;
        width: 80%
    }

    .CoursesCTA .desc,.CoursesCTA .desc2 {
        font-size: 16px;
        width: 60%
    }

    .CoursesCTA .coursesCTAButton .animated-button {
        font-size: 15px;
        padding: 10px 18px
    }
}

@media (max-width: 480px) {
    .CoursesCTA {
        display:flex;
        height: 286px;
        padding: 16px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
        background-position: center center
    }

    .CoursesCTA .title {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .CoursesCTA .desc,.CoursesCTA .desc2 {
        font-size: 16px;
        width: 90%
    }

    .CoursesCTA .coursesCTAButton {
        width: 100%
    }

    .CoursesCTA .coursesCTAButton .animated-button {
        font-size: 16px;
        width: 60%
    }
}

.CoursesExciting {
    display: flex;
    justify-content: center;
    gap: 40px
}

.CoursesExciting .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 600.804px
}

.CoursesExciting .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.CoursesExciting .left .content {
    display: flex;
    margin: auto;
    width: 100%;
    height: 100%;
    padding: 27px;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px
}

.CoursesExciting .left .content .title {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.CoursesExciting .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.CoursesExciting .left .content .desc a {
    text-decoration: none;
    color: #00f
}

.CoursesExciting .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.CoursesExciting .left .cbutton {
    padding-top: 20px
}

.CoursesExciting .right {
    display: flex;
    width: 706px;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    flex-wrap: wrap
}

.CoursesExciting .right .photo {
    width: 343px;
    height: 297px
}

.CoursesExciting .right .photo img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.CoursesExciting .mobile_cbutton {
    display: none
}

@media (max-width: 1536px) {
    .CoursesExciting {
        gap:30px
    }

    .CoursesExciting .left {
        width: 45%;
        height: 550px
    }

    .CoursesExciting .left .content {
        padding: 20px;
        gap: 15px
    }

    .CoursesExciting .left .content .title {
        font-size: 48px
    }

    .CoursesExciting .left .content .desc {
        font-size: 22px
    }

    .CoursesExciting .right {
        width: 650px;
        gap: 15px
    }

    .CoursesExciting .right .photo {
        width: 300px;
        height: 270px
    }
}

@media (max-width: 1440px) {
    .CoursesExciting {
        gap:25px
    }

    .CoursesExciting .left {
        width: 47%;
        height: 500px
    }

    .CoursesExciting .left .content {
        padding: 18px;
        gap: 12px
    }

    .CoursesExciting .left .content .title {
        font-size: 44px
    }

    .CoursesExciting .left .content .desc {
        font-size: 20px
    }

    .CoursesExciting .right {
        width: 600px;
        gap: 12px
    }

    .CoursesExciting .right .photo {
        width: 280px;
        height: 250px
    }
}

@media (max-width: 992px) {
    .CoursesExciting {
        gap:20px
    }

    .CoursesExciting .left {
        width: 42%;
        height: 440px
    }

    .CoursesExciting .left .content {
        padding: 16px;
        gap: 10px
    }

    .CoursesExciting .left .content .title {
        font-size: 26px
    }

    .CoursesExciting .left .content .desc {
        font-size: 16px
    }

    .CoursesExciting .left .cbutton {
        padding-top: 12px
    }

    .CoursesExciting .right {
        width: 58%;
        gap: 10px
    }

    .CoursesExciting .right .photo {
        width: 220px;
        height: 180px
    }

    .CoursesExciting .mobile_cbutton {
        display: none
    }
}

@media (max-width: 480px) {
    .CoursesExciting {
        flex-direction:column;
        gap: 20px
    }

    .CoursesExciting .left {
        width: 100%;
        height: 306px
    }

    .CoursesExciting .left .content {
        padding: 10px;
        gap: 10px
    }

    .CoursesExciting .left .content .title {
        font-size: 20px
    }

    .CoursesExciting .left .content .desc {
        font-size: 16px
    }

    .CoursesExciting .left .content .cbutton {
        display: none
    }

    .CoursesExciting .right {
        width: 100%;
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 9px 8px;
        flex-wrap: wrap
    }

    .CoursesExciting .right .photo {
        width: 48%;
        height: 144px;
        flex-shrink: 0
    }

    .CoursesExciting .mobile_cbutton {
        display: flex;
        margin: auto
    }

    .CoursesExciting .mobile_cbutton .animated-button {
        padding: 12px 50px;
        font-size: 14px
    }
}

.CoursesExplore {
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    gap: 40px
}

.CoursesExplore .heading {
    text-align: center
}

.CoursesExplore .exploreCards {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.CoursesExplore .exploreCards .exploreCard {
    display: flex;
    width: 100%;
    border-radius: 20px;
    overflow: hidden
}

.CoursesExplore .exploreCards .exploreCard.reverse {
    flex-direction: row-reverse
}

.CoursesExplore .exploreCards .exploreCard .left {
    width: 50%
}

.CoursesExplore .exploreCards .exploreCard .left video {
    width: 100%;
    height: 555px;
    object-fit: cover
}

.CoursesExplore .exploreCards .exploreCard .right {
    height: 555px;
    background: linear-gradient(248deg,#770006cc 1.48%,#c7253e);
    width: 50%;
    display: flex;
    padding: 5%;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.CoursesExplore .exploreCards .exploreCard .right .title {
    color: #f0af13;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.CoursesExplore .exploreCards .exploreCard .right .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.CoursesExplore .exploreCards .exploreCard .right .roles p {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.CoursesExplore .exploreCards .exploreCard .right .roles p h4 {
    color: #f0af13
}

@media (max-width: 1536px) {
    .CoursesExplore,.CoursesExplore .exploreCards {
        gap:30px
    }

    .CoursesExplore .exploreCards .exploreCard .left video {
        height: 500px
    }

    .CoursesExplore .exploreCards .exploreCard .right {
        height: 500px;
        padding: 4%;
        gap: 30px
    }

    .CoursesExplore .exploreCards .exploreCard .right .title {
        font-size: 36px
    }

    .CoursesExplore .exploreCards .exploreCard .right .desc,.CoursesExplore .exploreCards .exploreCard .right .roles p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .CoursesExplore,.CoursesExplore .exploreCards {
        gap:35px
    }

    .CoursesExplore .exploreCards .exploreCard .left {
        width: 50%
    }

    .CoursesExplore .exploreCards .exploreCard .left video {
        height: 530px
    }

    .CoursesExplore .exploreCards .exploreCard .right {
        width: 50%;
        height: 530px;
        padding: 4.5%;
        gap: 35px
    }

    .CoursesExplore .exploreCards .exploreCard .right .title {
        font-size: 38px
    }

    .CoursesExplore .exploreCards .exploreCard .right .desc,.CoursesExplore .exploreCards .exploreCard .right .roles p {
        font-size: 23px
    }
}

@media (max-width: 1280px) {
    .CoursesExplore,.CoursesExplore .exploreCards {
        gap:25px
    }

    .CoursesExplore .exploreCards .exploreCard .left {
        width: 50%
    }

    .CoursesExplore .exploreCards .exploreCard .left video {
        height: 450px
    }

    .CoursesExplore .exploreCards .exploreCard .right {
        width: 50%;
        height: 450px;
        padding: 3.5%;
        gap: 25px
    }

    .CoursesExplore .exploreCards .exploreCard .right .title {
        font-size: 32px
    }

    .CoursesExplore .exploreCards .exploreCard .right .desc,.CoursesExplore .exploreCards .exploreCard .right .roles p {
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .CoursesExplore,.CoursesExplore .exploreCards {
        gap:20px
    }

    .CoursesExplore .exploreCards .exploreCard .left {
        width: 50%
    }

    .CoursesExplore .exploreCards .exploreCard .left video {
        height: 400px
    }

    .CoursesExplore .exploreCards .exploreCard .right {
        width: 50%;
        height: 400px;
        padding: 3%;
        gap: 20px
    }

    .CoursesExplore .exploreCards .exploreCard .right .title {
        font-size: 28px
    }

    .CoursesExplore .exploreCards .exploreCard .right .desc,.CoursesExplore .exploreCards .exploreCard .right .roles p {
        font-size: 18px
    }

    .CoursesExplore .exploreCards .exploreCard .right .roles p h4 {
        color: #f0af13
    }
}

@media (max-width: 480px) {
    .CoursesExplore {
        gap:20px
    }

    .CoursesExplore .heading {
        font-size: 20px
    }

    .CoursesExplore .exploreCards {
        gap: 20px
    }

    .CoursesExplore .exploreCards .exploreCard,.CoursesExplore .exploreCards .exploreCard.reverse {
        flex-direction: column
    }

    .CoursesExplore .exploreCards .exploreCard .left {
        width: 100%;
        height: 222px
    }

    .CoursesExplore .exploreCards .exploreCard .left video {
        height: 100%;
        width: 100%
    }

    .CoursesExplore .exploreCards .exploreCard .right {
        width: 100%;
        height: 277px;
        padding: 10px;
        gap: 12px
    }

    .CoursesExplore .exploreCards .exploreCard .right .title {
        font-size: 18px
    }

    .CoursesExplore .exploreCards .exploreCard .right .desc,.CoursesExplore .exploreCards .exploreCard .right .roles p {
        font-size: 16px
    }

    .CoursesExplore .exploreCards .exploreCard .right .roles h4 {
        font-size: 16px;
        color: #f0af13
    }

    .CoursesExplore .exploreCards .exploreCard .right button {
        font-size: 14px
    }
}

.CoursesHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 637px;
    flex-shrink: 0;
    overflow: hidden
}

.CoursesHero video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
    z-index: 0
}

.CoursesHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.CoursesHero h1 {
    position: relative;
    color: #fff;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    z-index: 2
}

.CoursesHero p {
    position: relative;
    padding-top: 20px;
    color: #fff;
    width: 68%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    z-index: 2
}

@media (max-width: 1536px) {
    .CoursesHero {
        height:500px
    }

    .CoursesHero h1 {
        font-size: 70px
    }

    .CoursesHero p {
        font-size: 22px;
        width: 85%
    }
}

@media (max-width: 1440px) {
    .CoursesHero {
        height:480px
    }

    .CoursesHero h1 {
        font-size: 64px
    }

    .CoursesHero p {
        font-size: 20px;
        width: 85%
    }
}

@media (max-width: 1280px) {
    .CoursesHero {
        height:450px
    }

    .CoursesHero h1 {
        font-size: 58px
    }

    .CoursesHero p {
        font-size: 18px;
        width: 90%
    }
}

@media (max-width: 992px) {
    .CoursesHero {
        height:400px
    }

    .CoursesHero h1 {
        font-size: 48px
    }

    .CoursesHero p {
        font-size: 16px;
        width: 95%
    }
}

@media (max-width: 480px) {
    .CoursesHero {
        height:229px;
        padding: 20px
    }

    .CoursesHero h1 {
        font-size: 20px
    }

    .CoursesHero p {
        width: 100%;
        font-size: 14px;
        padding-top: 20px
    }
}

.CoursesNote {
    padding: 0;
    height: 136px;
    background: #fabc3f;
    display: flex;
    align-items: center
}

.CoursesNote .note {
    width: 55%;
    margin: auto;
    color: #000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

@media (max-width: 1536px) {
    .CoursesNote {
        height:120px
    }

    .CoursesNote .note {
        width: 65%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .CoursesNote {
        height:110px
    }

    .CoursesNote .note {
        width: 68%;
        font-size: 21px
    }
}

@media (max-width: 1280px) {
    .CoursesNote {
        height:100px
    }

    .CoursesNote .note {
        width: 70%;
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .CoursesNote .note {
        width:100%;
        padding: 16px;
        font-size: 16px
    }
}

.CoursesSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.CoursesSubHero .top {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    top: 25%;
    left: 31%;
    font-size: 32px;
    font-weight: 600;
    position: absolute;
    border-radius: 0 50px;
    background: #770006;
    width: 480.536px;
    height: 83.17px
}

.CoursesSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.CoursesSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.CoursesSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.CoursesSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    box-shadow: -5px -5px 20px #a07a1c inset,5px 5px 20px #a07a1c inset
}

.CoursesSubHero .bottom .left .content .title {
    color: #bc2329;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.CoursesSubHero .bottom .left .content .desc {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.CoursesSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.CoursesSubHero .bottom .right {
    width: 60%;
    height: 100%;
    box-shadow: 0 4px 15px #f3f3f340;
    border-radius: 0 50px
}

.CoursesSubHero .bottom .right img {
    border-radius: 0 50px;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .CoursesSubHero .top {
        font-size:28px;
        width: 420px;
        height: 75px;
        left: 30%;
        top: 22%
    }

    .CoursesSubHero .bottom {
        gap: 30px;
        height: 500px
    }

    .CoursesSubHero .bottom .left {
        width: 42%;
        height: 460px
    }

    .CoursesSubHero .bottom .left .content {
        padding: 30px;
        width: 94%;
        height: 90%
    }

    .CoursesSubHero .bottom .left .content .title {
        font-size: 50px
    }

    .CoursesSubHero .bottom .left .content .desc {
        font-size: 22px
    }

    .CoursesSubHero .bottom .right {
        width: 58%;
        height: 100%
    }

    .CoursesSubHero .bottom .right img {
        border-radius: 0 40px
    }
}

@media (max-width: 1440px) {
    .CoursesSubHero .top {
        font-size:26px;
        width: 390px;
        height: 70px;
        left: 29%;
        top: 22%
    }

    .CoursesSubHero .bottom {
        gap: 25px;
        height: 470px
    }

    .CoursesSubHero .bottom .left {
        width: 43%;
        height: 430px
    }

    .CoursesSubHero .bottom .left .content {
        padding: 25px;
        width: 92%;
        height: 88%
    }

    .CoursesSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .CoursesSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .CoursesSubHero .bottom .right {
        width: 57%;
        height: 100%
    }

    .CoursesSubHero .bottom .right img {
        border-radius: 0 35px
    }
}

@media (max-width: 1280px) {
    .CoursesSubHero .top {
        font-size:24px;
        width: 350px;
        height: 65px;
        left: 28%;
        top: 20%
    }

    .CoursesSubHero .bottom {
        gap: 20px;
        height: 440px
    }

    .CoursesSubHero .bottom .left {
        width: 44%;
        height: 400px
    }

    .CoursesSubHero .bottom .left .content {
        padding: 20px;
        width: 90%;
        height: 86%
    }

    .CoursesSubHero .bottom .left .content .title {
        font-size: 42px
    }

    .CoursesSubHero .bottom .left .content .desc {
        font-size: 18px
    }

    .CoursesSubHero .bottom .right {
        width: 56%;
        height: 100%
    }

    .CoursesSubHero .bottom .right img {
        border-radius: 0 30px
    }
}

@media (max-width: 992px) {
    .CoursesSubHero .top {
        font-size:22px;
        width: 300px;
        height: 58px;
        left: 25%;
        top: 18%
    }

    .CoursesSubHero .bottom {
        gap: 16px;
        height: 400px
    }

    .CoursesSubHero .bottom .left {
        width: 45%;
        height: 370px
    }

    .CoursesSubHero .bottom .left .content {
        padding: 18px;
        width: 88%;
        height: 84%
    }

    .CoursesSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .CoursesSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .CoursesSubHero .bottom .right {
        width: 55%;
        height: 100%
    }

    .CoursesSubHero .bottom .right img {
        border-radius: 0 25px
    }
}

@media (max-width: 480px) {
    .CoursesSubHero {
        flex-direction:column
    }

    .CoursesSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .CoursesSubHero .bottom .left {
        width: 100%;
        height: 248px
    }

    .CoursesSubHero .bottom .left .content {
        padding: 40px 20px;
        gap: 0
    }

    .CoursesSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .CoursesSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .CoursesSubHero .bottom .right {
        width: 100%;
        height: 192px
    }

    .CoursesSubHero .top {
        width: 60%;
        height: 39px;
        font-size: 16px;
        left: 47px;
        top: 51%
    }
}

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

.Popup {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000b3;
    z-index: 1000;
    margin: auto;
    background-image: url(../assets/Popup_bg-uIhfEpDB.png);
    background-color: #fff;
    width: 919px;
    height: 598px;
    background-size: contain;
    background-repeat: no-repeat;
    gap: 10px;
    padding: 1% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.Popup .heading h1 {
    color: #bc2329;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Popup .desc p {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.Popup .popup-form {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%
}

.Popup .popup-form form {
    padding: 0 4%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 20px;
    width: 100%
}

.Popup .popup-form form label {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    display: flex;
    flex-direction: column
}

.Popup .popup-form form input,.Popup .popup-form form select {
    width: 100%;
    display: block;
    height: 4.17rem;
    padding: .83rem 1.67rem;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.4);
    color: #0009;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.Popup .popup-form form input option,.Popup .popup-form form select option {
    font-size: 12px
}

.Popup .popup-form form input::placeholder,.Popup .popup-form form select::placeholder {
    color: #0009
}

.Popup .popup-form form label {
    display: flex;
    gap: 12px;
    color: #000;
    font-size: 1rem;
    font-weight: 500
}

.Popup .popup-form .privacy-checkbox {
    width: 213%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    color: #d1d1d1
}

.Popup .popup-form .privacy-checkbox label {
    gap: 0;
    font-size: 1rem;
    color: #000;
    font-weight: 500
}

.Popup .animated-button {
    margin-right: 10px;
    width: 35%;
    color: #fff;
    border: 1px solid #fabc3f;
    background-color: #bc2329;
    transition: none
}

.Popup .close {
    position: absolute;
    right: .3%;
    top: 0%
}

.Popup .close img {
    width: 25px;
    height: 25px
}

.Popup .close img:hover {
    scale: 1.2
}

@media (max-width: 1536px) {
    .Popup {
        margin-top:9%;
        width: 780px;
        height: 520px;
        background-size: cover
    }

    .Popup .heading h1 {
        font-size: 22px
    }

    .Popup .desc p {
        font-size: 15px
    }

    .Popup .popup-form form {
        column-gap: 40px
    }

    .Popup .popup-form form label {
        font-size: 15px
    }

    .Popup .popup-form form input,.Popup .popup-form form select {
        height: 3rem;
        padding: .75rem 1.5rem;
        font-size: 15px
    }

    .Popup .popup-form form input option,.Popup .popup-form form select option {
        font-size: 11px
    }

    .Popup .popup-form .privacy-checkbox {
        font-size: .95rem;
        width: 200%
    }

    .Popup .popup-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem
    }

    .Popup .popup-form .privacy-checkbox label {
        font-size: .95rem
    }

    .Popup .animated-button {
        width: 40%
    }
}

@media (max-width: 1440px) {
    .Popup {
        width:700px;
        height: 480px;
        padding: 1% 0
    }

    .Popup .heading h1 {
        font-size: 20px
    }

    .Popup .desc p {
        font-size: 14px
    }

    .Popup .popup-form form {
        column-gap: 30px;
        row-gap: 16px
    }

    .Popup .popup-form form label {
        font-size: 14px
    }

    .Popup .popup-form form input,.Popup .popup-form form select {
        height: 2.5rem;
        padding: .7rem 1.2rem;
        font-size: 14px
    }

    .Popup .popup-form form input option,.Popup .popup-form form select option {
        font-size: 10px
    }

    .Popup .popup-form .privacy-checkbox {
        font-size: .9rem;
        width: 190%
    }

    .Popup .popup-form .privacy-checkbox .checkbox-input {
        width: .9rem;
        height: .9rem
    }

    .Popup .popup-form .privacy-checkbox label {
        font-size: .9rem
    }

    .Popup .animated-button {
        width: 45%
    }

    .Popup .close img {
        width: 22px;
        height: 22px
    }
}

@media (max-width: 1280px) {
    .Popup {
        margin-top:12%;
        width: 650px;
        height: 440px;
        padding: 1.2% 0
    }

    .Popup .heading h1 {
        font-size: 18px
    }

    .Popup .desc p {
        font-size: 13px
    }

    .Popup .popup-form form {
        column-gap: 24px;
        row-gap: 14px
    }

    .Popup .popup-form form label {
        font-size: 13px
    }

    .Popup .popup-form form input,.Popup .popup-form form select {
        height: 2.3rem;
        padding: .6rem 1rem;
        font-size: 13px
    }

    .Popup .popup-form .privacy-checkbox {
        font-size: .85rem;
        width: 180%
    }

    .Popup .popup-form .privacy-checkbox .checkbox-input {
        width: .85rem;
        height: .85rem
    }

    .Popup .popup-form .privacy-checkbox label {
        font-size: .85rem
    }

    .Popup .animated-button {
        width: 42%
    }

    .Popup .close img {
        width: 20px;
        height: 20px
    }
}

@media (max-width: 480px) {
    .Popup {
        width:90%;
        height: 85vh;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVcAAAKDCAYAAACudkm8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA+ISURBVHgB7d1diGb3XcDxk7eNZhMDScRGMCukCaakVLuCyob4ctHE+gbNhbZSc6NVqKJ4oSjFK72IF9YboUVvoqi9SUCxaioo0QQUumuE0ELThe4KZovZQrovIZu22+c/22knszM7M7v7nTnP5vOBZd4eMmTm/L9znvOc8zvXnV+YALiqrp8AuOrEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAuIKEBBXgIC4AgTEFSAgrgABcQUIiCtAQFwBAjeu/8TJzx+bTvzPZ6cvn/j/6fTi35cWH79+5rXp3Okz33zMvlv3Tzfv//bp1rd95+L9W6bv/v53THfce2C68+0HVj4GWDbnTp9d6d+Xjh6bXhlvF/9G9zbq323fdddK6+5YNO87Fh1827seWOnfWte9furM+WPPfXr6v0VQjz1/+E3/kctx9+Kb3P/ow4u371jE964JYK5GUF965t+nLywaePLo8Svq34jugUMHFzubD0z3PfLwdN2TP/Mr5680qJsZ3+jBx35yunvxzQDm4uUXPjsdefKp6eXFTmVhPKu/7s9//APnp9j4Rgcff99KzQH2Sh3VtXYlrqvGnuyPfPiXHC4AdtXpE69Mzz7xsV2J6qpdjeuqdy/2Yt/9+GMTQO3Fp/55+s8/+6tpt9047YEjTz69snv+o7/7a/ZigcRe7K2utWfnuY7/4X/47T9c+QEAXE3jNKrRl70K67CnFxGM82if/tDvrZxbBnA1XAjrH630ZS/t+RVa4zyzTy7+wggscKVWw1qdXroTs7j8VWCBKzWnsA6zmS0wAvsvf/BRx2CBHRvd+NSiH3MJ67Anp2Jdyp33Hph+6qMf2faMgvNvfHl64/jfTl955fnF+69O1910+3TT3e+dbrrnFyZg/s4d/8T0lZf/cWX9Dvvuef+O1+8nPvBbe36Mdb3ZxXV48LFHpx/+8Ae3fNzXzv7vdOa5n115u971t3zPtP+hv195C8zPWLdn/+uD01dfffGir+1k/Y5zWMe5rHMzy5GD4wc1zoPdymZhHVZ/ccA8jfW7UViH1R2n1b3ZzYxOzDGsw2znuT77xx+/5NfHU4nNwrpq/OLeWDwOmJftrN/x9XNbrN+tOrGXZhvXcfzkxaf+adOvj+Os2zGOxQLzMo6xbutxl1i/Y1Tg3I6zrjXrOxGMy2THWQQb+drZ49N2fHWbjwN2z1ZP97/5uEus38OLPszZrOM6wrrZ3usNt79z2o5x9gAwL9tel5s8bu57rcPs76H1uWf+Y8PPX3/7g9N27Lv7vRMwLzduc13efM/7N/z83Pdah9nHdfx12ujMgZvv/dUtT9MYX3e+K8zPvsW6vGGLHaTN1u/owdz3WoeluPvrsec/fdHnxtOK/Q/93aaBHb+48XVgnm75ob/cdP1eOM914/X7ucUhgWWwJ/Ncd2r8MDe6qOD6W+6ZbnvPf6+crnHuG2cPrFyhddehad9izxaYr0ut37HHutlx2b0cI7gTSxHX8cLWeCqw2Y0Ox1OMfZ7+w1LayfpdlkMCw1IcFhhOHv3CBLy1nTy6PJPzlmLPdRh/scZtuq/U2At+ffFv/V+/O99+YNvDYoCNjfV1arG21p6fPtbVWF9Xw3Yui5+LpYnryaOXfzHAmBM7XhQbv5hLHa8ZtwC/+10PTN976OB04KEfnICtjXU1Xhc58cJnplNf3Hxk6Fhbdywi+87FTtLl3jvv9BeX45DAMMupWJv55X/96x09/kruUT5Ce/Dx9033PfLwBFxsrK0Xn3rmsmaojtCOF6l3ukf7Fz/xi9OyWKq4/vzf/Ol02yJ6WxlPSZ594uMbnsK1UyOyP/0nH3GXWviGsdMyBqZcjReWxs7Lwccf29b6Gt9vzG1dFkvzgtaw2ZyBtcatHp7+0O9flbAOF36hv7nyVxre6sY6+OTKXZuvztPzcRnrdu8CfWrJ7lJyTcW1vOvjGCIjsLyVje3/SHDZ6bV6F+iliuul7MbNyQSWt6oqrKuuxZuUXhNx3c2bk40NbKNJXWMo96lP/cB05rmf23IIMMzJGCo/ttvT//Zj0xsbzFkdk/6P7MKglGvtJqXXRFwPL/6q7uZVG2NDW7sBjNmUZ4/8+kpUx3Bft5dhmYztdWy3I7KvHfmNN81aHdv5kV2cQDXW8bNPfGy6FixVXDd6RXEcEH9plwc5XDgb4VsbwPrBv/ZcWSbjDsrfev/VN308dlx2+3bV49TJjS4WuG3JzthZqrjefOv+iz63V3Md124AYwDFTWvmUxoawzJZu73uWzPKc+y1vrRHE6g2em1j3wbrf86W5gqtcQnd+stT93qIwzjda3WYzBifNp5ajUk+N2xzkDfMwbd93+9MN9516KJt9/Aevni7uvOydljThQbs3/U96cu1NHuuG13JsddzHcf3X3t62NhAhZVltH7bHdv1SzNYX+vdee8907JYnrjee3Fcjz1/eNpLYwO81s7Ng2EOM1M3uhDoag2A2Q1LE9cDh948SOXk54/P4unB1boSDObk5Rc+M+211Qlba63vwJwt7WGBuUzHObUkg3thJ+byjOzEuj3oC6NBl+OFraWI6ziovf7FrLlE7dQSjUCD7Tp3Zus5Hrvh9XXPTldmwy7JcdeliOt977l47N9cXjE8d/q1Ca4181lfF0d+WWYtzz6u48KB+x81UxW44P5HHl6KQwNfB5FSbYSOhZOrAAAAAElFTkSuQmCC);
        margin: 20% auto auto;
        background-size: cover;
        padding: 1% 2%;
        gap: 10px;
        left: 0
    }

    .Popup .heading h1 {
        font-size: 20px
    }

    .Popup .desc p {
        font-size: 14px
    }

    .Popup .popup-form {
        width: 100%
    }

    .Popup .popup-form form {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .Popup .popup-form form label {
        gap: 2px;
        font-size: 14px
    }

    .Popup .popup-form form input,.Popup .popup-form form select {
        height: 2rem;
        font-size: 14px;
        padding: .2rem 1.5rem
    }

    .Popup .popup-form .privacy-checkbox {
        width: 100%;
        font-size: 14px;
        justify-content: flex-start
    }

    .Popup .popup-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem
    }

    .Popup .popup-form .privacy-checkbox label {
        font-size: 14px
    }

    .Popup .animated-button {
        width: 60%;
        font-size: 14px
    }

    .Popup .close {
        right: 0%;
        top: 0%
    }

    .Popup .close img {
        width: 20px;
        height: 20px
    }
}

.coursesNewCTA {
    padding: 47px 100px;
    height: 136px;
    background: #fabc3f;
    display: flex;
    justify-content: space-between
}

.coursesNewCTA .ctatext {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.coursesNewCTA .cnctaButton .animated-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    border: 2px solid #333;
    font-size: 20px;
    font-weight: 600
}

.coursesNewCTA .cnctaButton .animated-button .btn-logo {
    margin-left: 1vw;
    vertical-align: middle
}

@media (max-width: 1536px) {
    .coursesNewCTA .ctatext {
        font-size:30px
    }

    .coursesNewCTA .cnctaButton .animated-button {
        font-size: 18px
    }

    .coursesNewCTA .cnctaButton .animated-button .btn-logo {
        width: 18px;
        height: 18px
    }
}

@media (max-width: 1440px) {
    .coursesNewCTA .ctatext {
        font-size:30px
    }

    .coursesNewCTA .cnctaButton .animated-button {
        font-size: 17px
    }

    .coursesNewCTA .cnctaButton .animated-button .btn-logo {
        width: 17px;
        height: 17px
    }
}

@media (max-width: 1280px) {
    .coursesNewCTA {
        height:auto;
        gap: 20px;
        padding: 30px 40px
    }

    .coursesNewCTA .ctatext {
        font-size: 28px
    }

    .coursesNewCTA .cnctaButton .animated-button {
        font-size: 16px
    }

    .coursesNewCTA .cnctaButton .animated-button .btn-logo {
        width: 16px;
        height: 16px
    }
}

@media (max-width: 992px) {
    .coursesNewCTA {
        height:auto;
        gap: 20px;
        padding: 25px 30px
    }

    .coursesNewCTA .ctatext {
        font-size: 24px
    }

    .coursesNewCTA .cnctaButton .animated-button {
        font-size: 15px
    }

    .coursesNewCTA .cnctaButton .animated-button .btn-logo {
        width: 15px;
        height: 15px
    }
}

@media (max-width: 480px) {
    .coursesNewCTA {
        flex-direction:column;
        height: auto;
        gap: 16px;
        padding: 24px 20px;
        text-align: center
    }

    .coursesNewCTA .ctatext {
        font-size: 20px;
        line-height: 1.4
    }

    .coursesNewCTA .cnctaButton {
        width: 100%
    }

    .coursesNewCTA .cnctaButton .animated-button {
        width: 100%;
        font-size: 15px;
        padding: 10px;
        justify-content: center
    }

    .coursesNewCTA .cnctaButton .animated-button .btn-logo {
        width: 16px;
        height: 16px;
        margin-left: 8px
    }
}

.ashape1 {
    z-index: 1;
    position: absolute;
    top: 500px;
    right: 0;
    --circle-size: 37.5%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 37.5%;
    background: #c7253e;
    filter: blur(450px)
}

.ashape2 {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 1500px;
    --circle-size: 29.11%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 29.11%;
    background: #fabc3f;
    filter: blur(450px)
}

.ashape3 {
    z-index: 1;
    position: absolute;
    top: 2300px;
    right: 0;
    --circle-size: 37.5%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 37.5%;
    background: #c7253e;
    filter: blur(450px)
}

.ashape4 {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 3200px;
    --circle-size: 29.11%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 29.11%;
    background: #fabc3f;
    filter: blur(450px)
}

.ashape5 {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 4400px;
    --circle-size: 37.5%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 37.5%;
    background: #821131;
    filter: blur(450px)
}

.ashape6 {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 5400px;
    --circle-size: 29.11%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 29.11%;
    background: #fabc3f;
    filter: blur(450px)
}

@media (max-width: 1536px) {
    .ashape1 {
        top:450px;
        right: 15px;
        --circle-size: 35%;
        filter: blur(400px)
    }

    .ashape2 {
        top: 1300px;
        left: 15px;
        --circle-size: 28%;
        filter: blur(400px)
    }

    .ashape3 {
        top: 2100px;
        right: 15px;
        --circle-size: 35%;
        filter: blur(400px)
    }

    .ashape4 {
        top: 3000px;
        left: 15px;
        --circle-size: 28%;
        filter: blur(400px)
    }

    .ashape5 {
        top: 3800px;
        right: 15px;
        --circle-size: 35%;
        filter: blur(400px)
    }

    .ashape6 {
        top: 4400px;
        left: 15px;
        --circle-size: 28%;
        filter: blur(400px)
    }
}

@media (max-width: 1440px) {
    .ashape1 {
        top:420px;
        right: 15px;
        --circle-size: 33%;
        filter: blur(350px)
    }

    .ashape2 {
        top: 1200px;
        left: 15px;
        --circle-size: 26.5%;
        filter: blur(350px)
    }

    .ashape3 {
        top: 1950px;
        right: 15px;
        --circle-size: 33%;
        filter: blur(350px)
    }

    .ashape4 {
        top: 2800px;
        left: 15px;
        --circle-size: 26.5%;
        filter: blur(350px)
    }

    .ashape5 {
        top: 3600px;
        right: 15px;
        --circle-size: 33%;
        filter: blur(350px)
    }

    .ashape6 {
        top: 4200px;
        left: 15px;
        --circle-size: 26.5%;
        filter: blur(350px)
    }
}

@media (max-width: 1280px) {
    .ashape1 {
        top:390px;
        right: 10px;
        --circle-size: 30%;
        filter: blur(300px)
    }

    .ashape2 {
        top: 1100px;
        left: 10px;
        --circle-size: 25%;
        filter: blur(300px)
    }

    .ashape3 {
        top: 1800px;
        right: 10px;
        --circle-size: 30%;
        filter: blur(300px)
    }

    .ashape4 {
        top: 2600px;
        left: 10px;
        --circle-size: 25%;
        filter: blur(300px)
    }

    .ashape5 {
        top: 3400px;
        right: 10px;
        --circle-size: 30%;
        filter: blur(300px)
    }

    .ashape6 {
        top: 4000px;
        left: 10px;
        --circle-size: 25%;
        filter: blur(300px)
    }
}

@media (max-width: 992px) {
    .ashape1 {
        top:350px;
        right: 10px;
        --circle-size: 26%;
        filter: blur(250px)
    }

    .ashape2 {
        top: 950px;
        left: 10px;
        --circle-size: 22%;
        filter: blur(250px)
    }

    .ashape3 {
        top: 1550px;
        right: 10px;
        --circle-size: 26%;
        filter: blur(250px)
    }

    .ashape4 {
        top: 2250px;
        left: 10px;
        --circle-size: 22%;
        filter: blur(250px)
    }

    .ashape5 {
        top: 2900px;
        right: 10px;
        --circle-size: 26%;
        filter: blur(250px)
    }

    .ashape6 {
        top: 3450px;
        left: 10px;
        --circle-size: 22%;
        filter: blur(250px)
    }
}

@media (max-width: 480px) {
    .ashape1 {
        top:300px;
        right: 10px;
        filter: blur(100px)
    }

    .ashape2 {
        top: 700px;
        left: 0;
        filter: blur(100px)
    }

    .ashape3 {
        top: 1000px;
        right: 0;
        filter: blur(100px)
    }

    .ashape4 {
        top: 2212px;
        left: 0;
        filter: blur(100px);
        background: #fabc3f
    }

    .ashape5 {
        top: 2936px;
        left: -24px;
        filter: blur(70px);
        --circle-size: 42.2%
    }

    .ashape6 {
        top: 3791px;
        left: 206px;
        filter: blur(100px);
        --circle-size: 42.2%;
        background-color: #fabc3f
    }
}

.whyMaacCTA {
    margin: 3.4% 0 0;
    background: linear-gradient(0deg,#0009,#0009),url(../assets/bg-img-BH25ilh2.jfif) #d3d3d3 -270.36px -236.472px/134.205% 192.131% no-repeat;
    height: 671px;
    display: flex;
    justify-content: center;
    align-items: center
}

.whyMaacCTA .svg-container {
    margin-right: 1%;
    transform: translateY(-20%)
}

.whyMaacCTA .content {
    width: 100%
}

.whyMaacCTA .content h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px
}

.whyMaacCTA .content h2 {
    width: 90%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 20px
}

.whyMaacCTA .content p {
    font-size: 16px;
    font-style: normal;
    font-weight: 0;
    line-height: normal;
    padding-bottom: 40px
}

.whyMaacCTA .content .cta-button .animated-button {
    color: #fff;
    border-color: #fff
}

.whyMaacCTA .content .cta-button .animated-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .whyMaacCTA {
        margin:3% 0 0;
        height: 630px
    }

    .whyMaacCTA .svg-container {
        margin-right: .8%;
        transform: translateY(-10%)
    }

    .whyMaacCTA .content h1 {
        font-size: 50px;
        padding-bottom: 18px
    }

    .whyMaacCTA .content h2 {
        width: 85%;
        font-size: 22px;
        padding-bottom: 18px
    }

    .whyMaacCTA .content p {
        font-size: 15px;
        padding-bottom: 35px
    }
}

@media (max-width: 1440px) {
    .whyMaacCTA {
        height:600px
    }

    .whyMaacCTA .svg-container {
        margin-right: .6%;
        transform: translateY(-8%)
    }

    .whyMaacCTA .content h1 {
        font-size: 46px;
        padding-bottom: 16px
    }

    .whyMaacCTA .content h2 {
        width: 85%;
        font-size: 20px;
        padding-bottom: 16px
    }

    .whyMaacCTA .content p {
        font-size: 14px;
        padding-bottom: 32px
    }
}

@media (max-width: 1280px) {
    .whyMaacCTA {
        height:550px
    }

    .whyMaacCTA .svg-container {
        margin-right: .5%;
        transform: translateY(-6%)
    }

    .whyMaacCTA .content h1 {
        font-size: 42px;
        padding-bottom: 14px
    }

    .whyMaacCTA .content h2 {
        width: 85%;
        font-size: 18px;
        padding-bottom: 14px
    }

    .whyMaacCTA .content p {
        font-size: 13px;
        padding-bottom: 28px
    }
}

@media (max-width: 992px) {
    .whyMaacCTA {
        margin:2.4% 0 0;
        height: 480px
    }

    .whyMaacCTA .svg-container {
        margin-right: .4%;
        transform: translateY(-4%)
    }

    .whyMaacCTA .content h1 {
        font-size: 36px;
        padding-bottom: 12px
    }

    .whyMaacCTA .content h2 {
        width: 80%;
        font-size: 16px;
        padding-bottom: 12px
    }

    .whyMaacCTA .content p {
        font-size: 12px;
        padding-bottom: 24px
    }

    .whyMaacCTA .content .cta-button .animated-button {
        font-size: 14px
    }

    .whyMaacCTA .content .cta-button .animated-button .btn-background {
        background-color: #fff
    }
}

@media (max-width: 480px) {
    .whyMaacCTA {
        height:288px;
        flex-direction: column;
        padding: 20px 16px;
        background-size: cover;
        background-position: center center
    }

    .whyMaacCTA .svg-container {
        display: none
    }

    .whyMaacCTA .content {
        padding-left: 0;
        text-align: left
    }

    .whyMaacCTA .content h1 {
        font-size: 20px;
        padding-bottom: 12px
    }

    .whyMaacCTA .content h2 {
        font-size: 16px;
        width: 100%;
        padding-bottom: 12px
    }

    .whyMaacCTA .content p {
        font-size: 14px;
        padding-bottom: 20px
    }

    .whyMaacCTA .content .cta-button {
        display: flex;
        justify-content: left
    }
}

.WhyMaacDifferent .head {
    width: 60%
}

.WhyMaacDifferent .MDContainer {
    display: flex;
    margin: 40px auto;
    width: 84%;
    gap: 2%;
    overflow-x: scroll
}

.WhyMaacDifferent .MDContainer::-webkit-scrollbar {
    display: none
}

.WhyMaacDifferent .MDContainer .MDCard {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    gap: 2%;
    height: 485px
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer {
    position: relative;
    display: flex;
    width: 50%;
    height: 100%;
    gap: 2%
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .top {
    position: absolute
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .image {
    padding: 2.5%;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .image img {
    width: 100%;
    height: 100%
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform .3s ease
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon:hover {
    scale: 1.2
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.WhyMaacDifferent .MDContainer .MDCard .imageContainer .bottom {
    position: absolute;
    bottom: 0;
    right: 0
}

.WhyMaacDifferent .MDContainer .MDCard .description {
    width: 50%
}

.WhyMaacDifferent .MDContainer .MDCard .description .title h1 {
    color: #f0af13;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.WhyMaacDifferent .MDContainer .MDCard .description .desc p {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.WhyMaacDifferent .disclaimer {
    width: 80%;
    margin: 50px auto
}

.WhyMaacDifferent .disclaimer p {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.WhyMaacDifferent .video-modal {
    position: absolute;
    z-index: 3;
    top: 10;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.WhyMaacDifferent .video-modal .video-container {
    position: relative;
    width: 80%;
    max-width: 900px
}

.WhyMaacDifferent .video-modal .video-container iframe {
    width: 100%;
    height: 500px;
    border-radius: 8px
}

.WhyMaacDifferent .video-modal .video-container .close-button {
    position: absolute;
    top: -40px;
    right: -40px;
    background: #bc2329;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 50%;
    transition: .3s
}

.WhyMaacDifferent .video-modal .video-container .close-button:hover {
    background: #821131
}

@media (max-width: 1536px) {
    .WhyMaacDifferent .head {
        width:80%
    }

    .WhyMaacDifferent .head h2 {
        font-size: 52px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .WhyMaacDifferent .head h3 {
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 3%
    }

    .WhyMaacDifferent .MDContainer {
        margin: 10px auto;
        width: 78%;
        gap: 1%
    }

    .WhyMaacDifferent .MDContainer .MDCard {
        height: 430px
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer {
        width: 55%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .image {
        padding: 1.8%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon {
        width: 50px;
        height: 50px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description {
        width: 55%
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .title h1 {
        font-size: 28px;
        font-weight: 550
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .desc p {
        font-size: 20px
    }

    .WhyMaacDifferent .disclaimer {
        width: 70%;
        margin: 20px auto
    }

    .WhyMaacDifferent .disclaimer p {
        font-size: 16px
    }

    .video-modal .video-container {
        width: 70%;
        max-width: 800px
    }

    .video-modal .video-container iframe {
        height: 450px
    }

    .video-modal .video-container .close-button {
        top: -30px;
        right: -30px;
        font-size: 16px;
        padding: 6px 10px
    }
}

@media (max-width: 1440px) {
    .WhyMaacDifferent .head {
        width:85%
    }

    .WhyMaacDifferent .head h2 {
        font-size: 48px
    }

    .WhyMaacDifferent .head h3 {
        font-size: 18px;
        padding-bottom: 2.5%
    }

    .WhyMaacDifferent .MDContainer {
        width: 82%;
        gap: .8%
    }

    .WhyMaacDifferent .MDContainer .MDCard {
        height: 400px
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer {
        width: 54%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .image {
        padding: 1.5%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon {
        width: 45px;
        height: 45px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description {
        width: 54%
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .title h1 {
        font-size: 26px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .desc p {
        font-size: 18px
    }

    .WhyMaacDifferent .disclaimer {
        width: 75%
    }

    .WhyMaacDifferent .disclaimer p {
        font-size: 15px
    }

    .video-modal .video-container {
        width: 75%
    }

    .video-modal .video-container iframe {
        height: 420px
    }

    .video-modal .video-container .close-button {
        top: -28px;
        right: -28px;
        font-size: 15px;
        padding: 5px 9px
    }
}

@media (max-width: 1280px) {
    .WhyMaacDifferent .head {
        width:88%
    }

    .WhyMaacDifferent .head h2 {
        font-size: 44px
    }

    .WhyMaacDifferent .head h3 {
        font-size: 17px;
        padding-bottom: 2%
    }

    .WhyMaacDifferent .MDContainer {
        width: 85%;
        gap: .6%
    }

    .WhyMaacDifferent .MDContainer .MDCard {
        height: 370px
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer {
        width: 52%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .image {
        padding: 1.2%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon {
        width: 40px;
        height: 40px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description {
        width: 52%
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .title h1 {
        font-size: 24px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .desc p {
        font-size: 16px
    }

    .WhyMaacDifferent .disclaimer {
        width: 80%
    }

    .WhyMaacDifferent .disclaimer p {
        font-size: 14px
    }

    .video-modal .video-container {
        width: 80%
    }

    .video-modal .video-container iframe {
        height: 390px
    }

    .video-modal .video-container .close-button {
        top: -26px;
        right: -26px;
        font-size: 14px;
        padding: 5px 8px
    }
}

@media (max-width: 992px) {
    .WhyMaacDifferent .head {
        width:90%
    }

    .WhyMaacDifferent .head h2 {
        font-size: 38px
    }

    .WhyMaacDifferent .head h3 {
        font-size: 16px;
        padding-bottom: 2%
    }

    .WhyMaacDifferent .MDContainer {
        width: 88%;
        gap: .5%
    }

    .WhyMaacDifferent .MDContainer .MDCard {
        height: 340px
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer {
        width: 50%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .image {
        padding: 1%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon {
        width: 35px;
        height: 35px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description {
        width: 50%
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .title h1 {
        font-size: 22px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .desc p {
        font-size: 15px
    }

    .WhyMaacDifferent .disclaimer {
        width: 85%;
        margin: 20px auto
    }

    .WhyMaacDifferent .disclaimer p {
        font-size: 13px
    }

    .video-modal .video-container {
        width: 85%;
        max-width: 600px
    }

    .video-modal .video-container iframe {
        height: 340px
    }

    .video-modal .video-container .close-button {
        top: -22px;
        right: -22px;
        font-size: 13px;
        padding: 5px 8px
    }
}

@media (max-width: 480px) {
    .WhyMaacDifferent {
        display:flex;
        flex-direction: column;
        padding: 20px 16px
    }

    .WhyMaacDifferent .head {
        order: 1;
        width: 100%
    }

    .WhyMaacDifferent .head h2 {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .WhyMaacDifferent .head h3 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 3%
    }

    .WhyMaacDifferent .MDContainer {
        order: 3;
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }

    .WhyMaacDifferent .MDContainer .MDCard {
        flex: 0 0 100%;
        flex-direction: column;
        height: auto;
        text-align: left
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer {
        width: 100%;
        height: 212px;
        justify-content: normal
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .image {
        padding: 0% 0;
        width: 97%;
        height: 202px;
        object-fit: cover;
        margin: auto
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .image img {
        padding: 0;
        height: 100%;
        width: 100%
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .playIcon {
        width: 50px;
        height: 50px
    }

    .WhyMaacDifferent .MDContainer .MDCard .imageContainer .top img,.WhyMaacDifferent .MDContainer .MDCard .imageContainer .bottom img {
        width: 100px;
        height: auto
    }

    .WhyMaacDifferent .MDContainer .MDCard .description {
        width: 100%;
        padding: 10px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .title h1 {
        font-size: 16px
    }

    .WhyMaacDifferent .MDContainer .MDCard .description .desc p {
        font-size: 14px
    }

    .WhyMaacDifferent .disclaimer {
        width: 100%;
        order: 2;
        margin: 0
    }

    .WhyMaacDifferent .disclaimer p {
        text-align: left;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .WhyMaacDifferent .MDscroller {
        order: 4;
        padding: 0 0 20px
    }

    .video-modal .video-container {
        width: 90%
    }

    .video-modal .video-container iframe {
        height: 250px!important
    }

    .video-modal .video-container .close-button {
        scale: .7
    }
}

.whyMaacHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-BAGZPJFl.webp) #d3d3d3 0px -443.938px/100% 172.194% no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 637px
}

.whyMaacHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 500
}

.whyMaacHero h2 {
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    color: #fabc3f;
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.whyMaacHero p {
    padding-top: 20px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .whyMaacHero {
        height:600px;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/whyMaacHeroBg-Ct-T1ILO.jfif) #d3d3d3 0px -400px/100% 170% no-repeat
    }

    .whyMaacHero h1,.whyMaacHero h2 {
        font-size: 72px
    }

    .whyMaacHero p {
        padding-top: 18px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .whyMaacHero {
        height:570px;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/whyMaacHeroBg-Ct-T1ILO.jfif) #d3d3d3 0px -360px/100% 168% no-repeat
    }

    .whyMaacHero h1,.whyMaacHero h2 {
        font-size: 66px
    }

    .whyMaacHero p {
        padding-top: 16px;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .whyMaacHero {
        height:530px;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/whyMaacHeroBg-Ct-T1ILO.jfif) #d3d3d3 0px -320px/100% 165% no-repeat
    }

    .whyMaacHero h1,.whyMaacHero h2 {
        font-size: 60px
    }

    .whyMaacHero p {
        padding-top: 14px;
        font-size: 18px
    }
}

@media (max-width: 992px) {
    .whyMaacHero {
        height:480px;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/whyMaacHeroBg-Ct-T1ILO.jfif) #d3d3d3 0px -280px/100% 160% no-repeat
    }

    .whyMaacHero h1,.whyMaacHero h2 {
        font-size: 52px
    }

    .whyMaacHero p {
        padding-top: 12px;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .whyMaacHero {
        height:229px;
        background-size: cover;
        background-position: center;
        padding: 20px
    }

    .whyMaacHero h1,.whyMaacHero h2 {
        font-size: 20px
    }

    .whyMaacHero p {
        font-size: 16px;
        padding-top: 20px
    }
}

.whyMaacLegacy {
    margin: 2% 0;
    width: 100%;
    height: 477px;
    background: #821131;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset
}

.whyMaacLegacy .left {
    display: flex;
    justify-content: center;
    align-items: center
}

.whyMaacLegacy .left .svg-container {
    margin-right: 1%;
    transform: translateY(-20%)
}

.whyMaacLegacy .left .content h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px
}

.whyMaacLegacy .left .content p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 20px;
    width: 55%
}

.whyMaacLegacy .left .content h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 40px
}

.whyMaacLegacy .right {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    right: 0;
    top: -50px;
}

.whyMaacLegacy .right .l-image {
    max-width: 800px;
}

@media (max-width: 1536px) {
    .whyMaacLegacy {
        margin:1.8% 0;
        height: 450px
    }

    .whyMaacLegacy .left .svg-container {
        margin-right: .8%;
        transform: translateY(-15%)
    }

    .whyMaacLegacy .left .content h1 {
        font-size: 50px;
        padding-bottom: 18px
    }

    .whyMaacLegacy .left .content p {
        font-size: 22px;
        width: 50%;
        padding-bottom: 18px
    }

    .whyMaacLegacy .left .content h2 {
        font-size: 30px;
        padding-bottom: 35px
    }

    .whyMaacLegacy .right .l-image {
        max-width: 750px;
    }
}

@media (max-width: 1440px) {
    .whyMaacLegacy {
        margin:1.6% 0;
        height: 420px
    }

    .whyMaacLegacy .left .svg-container {
        margin-right: .7%;
        transform: translateY(-13%)
    }

    .whyMaacLegacy .left .content h1 {
        font-size: 46px;
        padding-bottom: 16px
    }

    .whyMaacLegacy .left .content p {
        font-size: 20px;
        width: 48%;
        padding-bottom: 16px
    }

    .whyMaacLegacy .left .content h2 {
        font-size: 28px;
        padding-bottom: 32px
    }

    .whyMaacLegacy .right .l-image {
        width: 700px;
        height: 500px;
        margin-bottom: -9%
    }
}

@media (max-width: 1280px) {
    .whyMaacLegacy {
        margin:1.4% 0;
        height: 390px
    }

    .whyMaacLegacy .left .svg-container {
        margin-right: .6%;
        transform: translateY(-11%)
    }

    .whyMaacLegacy .left .content h1 {
        font-size: 42px;
        padding-bottom: 14px
    }

    .whyMaacLegacy .left .content p {
        font-size: 18px;
        width: 46%;
        padding-bottom: 14px
    }

    .whyMaacLegacy .left .content h2 {
        font-size: 26px;
        padding-bottom: 28px
    }

    .whyMaacLegacy .right .l-image {
        width: 650px;
        height: 460px;
        margin-bottom: -9.8%
    }
}

@media (max-width: 992px) {
    .whyMaacLegacy {
        margin:1.2% 0;
        height: 360px
    }

    .whyMaacLegacy .left .svg-container {
        margin-right: .5%;
        transform: translateY(-10%)
    }

    .whyMaacLegacy .left .content h1 {
        font-size: 38px;
        padding-bottom: 12px
    }

    .whyMaacLegacy .left .content p {
        font-size: 16px;
        width: 44%;
        padding-bottom: 12px
    }

    .whyMaacLegacy .left .content h2 {
        font-size: 24px;
        padding-bottom: 24px
    }

    .whyMaacLegacy .right .l-image {
        width: 580px;
        height: 420px;
        margin-bottom: -10.2%
    }
}

@media (max-width: 480px) {
    .whyMaacLegacy {
        height:554px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left
    }

    .whyMaacLegacy .left {
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .whyMaacLegacy .left .svg-container {
        display: none
    }

    .whyMaacLegacy .left .content {
        width: 100%
    }

    .whyMaacLegacy .left .content h1 {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding-bottom: 12px
    }

    .whyMaacLegacy .left .content p {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: 100%;
        padding-bottom: 12px
    }

    .whyMaacLegacy .left .content h2 {
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding-bottom: 20px
    }

    .whyMaacLegacy .left .content .lbutton {
        display: flex;
        justify-content: flex-start
    }

    .whyMaacLegacy .right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .whyMaacLegacy .right .l-image {
        width: 370px;
        height: 273px;
        position: static;
        margin-top: 25px;
        margin-right: 2%
    }
}

.whyMaacSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.whyMaacSubHero .left {
    width: 55%
}

.whyMaacSubHero .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px
}

.whyMaacSubHero .left p span {
    color: #f0af13
}

.whyMaacSubHero .right {
    padding-left: 60px;
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}

.whyMaacSubHero .right .image-container {
    position: relative;
    display: inline-block
}

.whyMaacSubHero .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.whyMaacSubHero .right .image-container .play-button {
    position: absolute;
    top: 45%;
    left: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s ease
}

.whyMaacSubHero .right .image-container .play-button:hover {
    transform: scale(1.1)
}

.whyMaacSubHero .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.whyMaacSubHero .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

.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
}

.video-modal .video-container {
    position: relative;
    width: 80%;
    max-width: 900px
}

.video-modal .video-container iframe {
    width: 100%;
    height: 500px;
    border-radius: 8px
}

.video-modal .video-container .close-button {
    position: absolute;
    top: -40px;
    right: -40px;
    background: #bc2329;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 50%;
    transition: .3s
}

.video-modal .video-container .close-button:hover {
    background: #821131
}

@media (max-width: 1536px) {
    .whyMaacSubHero .left {
        width:45%
    }

    .whyMaacSubHero .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .whyMaacSubHero .right {
        padding-left: 0;
        width: 50%
    }

    .whyMaacSubHero .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .whyMaacSubHero .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .whyMaacSubHero .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .whyMaacSubHero .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }

    .video-modal .video-container {
        width: 70%;
        max-width: 800px
    }

    .video-modal .video-container iframe {
        height: 450px
    }

    .video-modal .video-container .close-button {
        top: -30px;
        right: -30px;
        font-size: 16px;
        padding: 6px 10px
    }
}

@media (max-width: 1440px) {
    .whyMaacSubHero .left {
        width:43%
    }

    .whyMaacSubHero .left p {
        font-size: 18px;
        padding-bottom: 14px
    }

    .whyMaacSubHero .right {
        padding-left: 0;
        width: 50%
    }

    .whyMaacSubHero .right .image-container .sb-image {
        width: 600px;
        height: 410px
    }

    .whyMaacSubHero .right .image-container .play-button {
        top: 41%;
        left: 41%
    }

    .whyMaacSubHero .right .image-container .top-border {
        top: -8px;
        left: -12px
    }

    .whyMaacSubHero .right .image-container .bottom-border {
        bottom: -8px;
        right: -12px
    }

    .video-modal .video-container {
        width: 70%;
        max-width: 750px
    }

    .video-modal .video-container iframe {
        height: 420px
    }

    .video-modal .video-container .close-button {
        top: -28px;
        right: -28px;
        font-size: 15px;
        padding: 6px 9px
    }
}

@media (max-width: 1280px) {
    .whyMaacSubHero .left {
        width:40%
    }

    .whyMaacSubHero .left p {
        font-size: 16px;
        padding-bottom: 12px
    }

    .whyMaacSubHero .right {
        padding-left: 0;
        width: 52%
    }

    .whyMaacSubHero .right .image-container .sb-image {
        width: 550px;
        height: 375px
    }

    .whyMaacSubHero .right .image-container .play-button {
        top: 40%;
        left: 44%;
        width: 6vw
    }

    .whyMaacSubHero .right .image-container .top-border {
        top: -6px;
        left: -10px
    }

    .whyMaacSubHero .right .image-container .bottom-border {
        bottom: -6px;
        right: -10px
    }

    .video-modal .video-container {
        width: 75%;
        max-width: 700px
    }

    .video-modal .video-container iframe {
        height: 390px
    }

    .video-modal .video-container .close-button {
        top: -26px;
        right: -26px;
        font-size: 14px;
        padding: 5px 8px
    }
}

@media (max-width: 992px) {
    .whyMaacSubHero .left {
        width:38%
    }

    .whyMaacSubHero .left p {
        font-size: 14px;
        padding-bottom: 10px
    }

    .whyMaacSubHero .right {
        padding-left: 0;
        width: 58%
    }

    .whyMaacSubHero .right .image-container .sb-image {
        width: 480px;
        height: 330px
    }

    .whyMaacSubHero .right .image-container .play-button {
        top: 38%;
        left: 48%
    }

    .whyMaacSubHero .right .image-container .top-border {
        top: -5px;
        left: -8px
    }

    .whyMaacSubHero .right .image-container .bottom-border {
        bottom: -5px;
        right: -8px
    }

    .video-modal .video-container {
        width: 80%;
        max-width: 600px
    }

    .video-modal .video-container iframe {
        height: 340px
    }

    .video-modal .video-container .close-button {
        top: -22px;
        right: -22px;
        font-size: 13px;
        padding: 5px 8px
    }
}

@media (max-width: 768px) {
    .video-modal .video-container iframe {
        height:300px
    }
}

@media (max-width: 480px) {
    .whyMaacSubHero {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .whyMaacSubHero .left {
        width: 100%
    }

    .whyMaacSubHero .left p {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .whyMaacSubHero .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .whyMaacSubHero .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .whyMaacSubHero .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .whyMaacSubHero .right .image-container .play-button {
        top: 35%;
        left: 40%;
        width: 60px;
        height: 60px
    }

    .whyMaacSubHero .right .image-container .play-button svg {
        width: 40px;
        height: 40px
    }

    .whyMaacSubHero .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .whyMaacSubHero .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .whyMaacSubHero .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .whyMaacSubHero .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }

    .video-modal {
        position: absolute;
        z-index: 3
    }

    .video-modal .video-container {
        width: 90%
    }

    .video-modal .video-container iframe {
        height: 250px
    }

    .video-modal .video-container .close-button {
        top: -20px;
        right: -5px;
        font-size: 18px;
        padding: 6px 10px
    }
}

.whyMaacVT {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.whyMaacVT .left {
    width: 35%
}

.whyMaacVT .left h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px
}

.whyMaacVT .left h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 24px
}

.whyMaacVT .left p {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 40px
}

.whyMaacVT .right {
    width: 60%;
    display: flex;
    justify-content: center;
    position: relative
}

.whyMaacVT .right .image-container {
    position: relative;
    display: inline-block
}

.whyMaacVT .right .image-container .vt-image {
    width: 835px;
    height: 644px;
    padding: 1.67% 2.1%
}

.whyMaacVT .right .image-container .play-button {
    position: absolute;
    top: 45%;
    left: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.whyMaacVT .right .image-container .top-border {
    position: absolute;
    top: 0;
    left: 0
}

.whyMaacVT .right .image-container .bottom-border {
    position: absolute;
    bottom: 0;
    right: 0
}

.whyMaacVT .mobile-button {
    display: none
}

@media (max-width: 1536px) {
    .whyMaacVT .left {
        width:33%
    }

    .whyMaacVT .left h1 {
        font-size: 50px;
        padding-bottom: 18px
    }

    .whyMaacVT .left h2 {
        font-size: 22px;
        padding-bottom: 22px
    }

    .whyMaacVT .left p {
        font-size: 18px;
        padding-bottom: 35px
    }

    .whyMaacVT .right {
        width: 58%
    }

    .whyMaacVT .right .image-container .vt-image {
        width: 700px;
        height: 500px;
        padding: 1.5% 2%
    }

    .whyMaacVT .right .image-container .play-button {
        top: 44%;
        left: 44%
    }

    .whyMaacVT .video-modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000c;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000
    }

    .whyMaacVT .video-modal .video-container {
        position: relative;
        width: 80%;
        max-width: 900px
    }

    .whyMaacVT .video-modal .video-container iframe {
        width: 100%;
        height: 500px;
        border-radius: 8px
    }

    .whyMaacVT .video-modal .video-container .close-button {
        position: absolute;
        top: -40px;
        right: -40px;
        background: #bc2329;
        color: #fff;
        border: none;
        font-size: 20px;
        cursor: pointer;
        padding: 8px 13px;
        border-radius: 50%;
        transition: .3s
    }

    .whyMaacVT .video-modal .video-container .close-button:hover {
        background: #821131
    }
}

@media (max-width: 1440px) {
    .whyMaacVT .left {
        width:32%
    }

    .whyMaacVT .left h1 {
        font-size: 46px;
        padding-bottom: 16px
    }

    .whyMaacVT .left h2 {
        font-size: 20px;
        padding-bottom: 20px
    }

    .whyMaacVT .left p {
        font-size: 17px;
        padding-bottom: 30px
    }

    .whyMaacVT .right {
        width: 56%
    }

    .whyMaacVT .right .image-container .vt-image {
        width: 640px;
        height: 460px;
        padding: 1.4% 1.8%
    }

    .whyMaacVT .right .image-container .play-button {
        top: 43%;
        left: 43%
    }

    .whyMaacVT .video-modal .video-container {
        width: 75%;
        max-width: 800px
    }

    .whyMaacVT .video-modal .video-container iframe {
        height: 460px
    }

    .whyMaacVT .video-modal .video-container .close-button {
        top: -36px;
        right: -36px;
        font-size: 18px;
        padding: 7px 11px
    }
}

@media (max-width: 1280px) {
    .whyMaacVT .left {
        width:30%
    }

    .whyMaacVT .left h1 {
        font-size: 42px;
        padding-bottom: 14px
    }

    .whyMaacVT .left h2 {
        font-size: 18px;
        padding-bottom: 18px
    }

    .whyMaacVT .left p {
        font-size: 16px;
        padding-bottom: 26px
    }

    .whyMaacVT .right {
        width: 54%
    }

    .whyMaacVT .right .image-container .vt-image {
        width: 580px;
        height: 420px;
        padding: 1.2% 1.5%
    }

    .whyMaacVT .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .whyMaacVT .video-modal .video-container {
        width: 70%;
        max-width: 720px
    }

    .whyMaacVT .video-modal .video-container iframe {
        height: 420px
    }

    .whyMaacVT .video-modal .video-container .close-button {
        top: -30px;
        right: -30px;
        font-size: 16px;
        padding: 6px 10px
    }
}

@media (max-width: 992px) {
    .whyMaacVT .left {
        width:100%;
        text-align: left;
        margin-bottom: 20px
    }

    .whyMaacVT .left h1 {
        font-size: 36px;
        padding-bottom: 12px
    }

    .whyMaacVT .left h2 {
        font-size: 16px;
        padding-bottom: 16px
    }

    .whyMaacVT .left p {
        font-size: 14px;
        padding-bottom: 22px
    }

    .whyMaacVT .right {
        width: 100%;
        justify-content: center
    }

    .whyMaacVT .right .image-container .vt-image {
        width: 480px;
        height: 340px;
        padding: 1% 1.2%
    }

    .whyMaacVT .right .image-container .play-button {
        width: 6vw;
        top: 40%;
        left: 46%
    }

    .whyMaacVT .video-modal .video-container {
        width: 90%;
        max-width: 640px
    }

    .whyMaacVT .video-modal .video-container iframe {
        height: 360px
    }

    .whyMaacVT .video-modal .video-container .close-button {
        top: -28px;
        right: -28px;
        font-size: 14px;
        padding: 5px 9px
    }
}

@media (max-width: 480px) {
    .whyMaacVT {
        flex-direction:column;
        align-items: center;
        text-align: left;
        padding: 40px 16px 0
    }

    .whyMaacVT .left {
        width: 100%
    }

    .whyMaacVT .left h1 {
        color: #bc2329;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding-bottom: 12px
    }

    .whyMaacVT .left h2 {
        padding-bottom: 12px;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .whyMaacVT .left p {
        padding-bottom: 20px;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .whyMaacVT .left .vtbutton {
        display: none
    }

    .whyMaacVT .right {
        width: 100%;
        margin-top: 20px
    }

    .whyMaacVT .right .image-container .vt-image {
        width: 100%;
        height: auto
    }

    .whyMaacVT .right .image-container .play-button {
        top: 40%;
        left: 40%;
        width: 50px;
        height: 50px
    }

    .whyMaacVT .right .image-container .top-border img,.whyMaacVT .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }

    .mobile-button {
        margin: 10% 0!important;
        display: flex!important;
        align-items: start!important;
        justify-content: flex-start!important;
        width: 100%!important;
        text-align: center!important
    }

    .mobile-button .animated-button {
        width: 80%!important;
        font-size: 20px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .mobile-button .animated-button:hover .btn-text {
        color: #000
    }
}

.sshape1 {
    z-index: 1;
    position: absolute;
    top: 581px;
    left: 100px;
    --circle-size: 28.75%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #821131;
    filter: blur(450px)
}

.sshape2 {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 1920px;
    --circle-size: 30.36%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #fabc3f;
    filter: blur(450px)
}

.sshape3 {
    z-index: 1;
    position: absolute;
    top: 2975px;
    --circle-size: 30.63%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #821131;
    filter: blur(450px)
}

.sshape4 {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 3615px;
    --circle-size: 36.88%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #821131;
    filter: blur(450px)
}

.sshape5 {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 4916px;
    --circle-size: 28.91%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #f0af13;
    filter: blur(450px)
}

.sshape6 {
    z-index: 1;
    position: absolute;
    top: 5073px;
    right: 0;
    --circle-size: 30.26%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #c7253e;
    filter: blur(450px)
}

.sshape7 {
    z-index: 1;
    position: absolute;
    top: 7382px;
    left: 0;
    --circle-size: 36.88%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #821131;
    filter: blur(450px)
}

.sshape8 {
    z-index: 1;
    position: absolute;
    top: 7649.5px;
    right: 0;
    --circle-size: 24.64%;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #f0af13;
    filter: blur(450px)
}

@media (max-width: 1536px) {
    .sshape1 {
        --circle-size: 26%
    }

    .sshape2 {
        --circle-size: 27.5%
    }

    .sshape3 {
        --circle-size: 27.75%
    }

    .sshape4 {
        --circle-size: 33.5%
    }

    .sshape5 {
        --circle-size: 26%
    }

    .sshape6 {
        --circle-size: 27.25%
    }

    .sshape7 {
        --circle-size: 33.5%
    }

    .sshape8 {
        --circle-size: 22.5%
    }
}

@media (max-width: 1440px) {
    .sshape1 {
        --circle-size: 24%
    }

    .sshape2 {
        --circle-size: 25.75%
    }

    .sshape3 {
        --circle-size: 26%
    }

    .sshape4 {
        --circle-size: 31.5%
    }

    .sshape5 {
        --circle-size: 24.5%
    }

    .sshape6 {
        --circle-size: 25.25%
    }

    .sshape7 {
        --circle-size: 31.5%
    }

    .sshape8 {
        --circle-size: 21%
    }
}

@media (max-width: 1280px) {
    .sshape1 {
        --circle-size: 22%
    }

    .sshape2 {
        --circle-size: 24%
    }

    .sshape3 {
        --circle-size: 24.5%
    }

    .sshape4 {
        --circle-size: 29%
    }

    .sshape5 {
        --circle-size: 22.5%
    }

    .sshape6 {
        --circle-size: 23.5%
    }

    .sshape7 {
        --circle-size: 29%
    }

    .sshape8 {
        --circle-size: 19.5%
    }
}

@media (max-width: 480px) {
    .sshape1 {
        top:239px;
        right: 0;
        filter: blur(100px)
    }

    .sshape2 {
        top: 857px;
        left: 0;
        filter: blur(100px)
    }

    .sshape3 {
        top: 1632px;
        right: 0;
        filter: blur(100px)
    }

    .sshape4 {
        top: 2500px;
        right: 10px;
        filter: blur(100px)
    }

    .sshape5 {
        top: 3400px;
        left: 0;
        filter: blur(100px)
    }

    .sshape6 {
        top: 3700px;
        right: 20px;
        filter: blur(100px)
    }

    .sshape7 {
        top: 4900px;
        left: 0;
        filter: blur(100px)
    }

    .sshape8 {
        top: 5200px;
        right: 0;
        filter: blur(100px)
    }
}

.DidYouKnow h1 {
    color: #f0af13;
    text-align: center;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 40px
}

.DidYouKnow .DYNContainer {
    display: flex;
    gap: 40px;
    overflow: scroll
}

.DidYouKnow .DYNContainer::-webkit-scrollbar {
    display: none
}

.DidYouKnow .DYNContainer .card {
    background: #bc2329;
    display: flex;
    flex: 0 0 33%;
    position: relative;
    width: 33%;
    height: 700px;
    overflow: hidden
}

.DidYouKnow .DYNContainer .card .image {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: transform .8s ease-in-out,opacity .8s ease-in-out
}

.DidYouKnow .DYNContainer .card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.DidYouKnow .DYNContainer .card .image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,#77000600 56.57%,#770006cc 82.94%)
}

.DidYouKnow .DYNContainer .card .content .number,.DidYouKnow .DYNContainer .card .content .desc {
    position: absolute;
    width: 70%
}

.DidYouKnow .DYNContainer .card .content .number p,.DidYouKnow .DYNContainer .card .content .desc p {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.DidYouKnow .DYNContainer .card .content .desc {
    left: 24px;
    top: 520px
}

.DidYouKnow .DYNContainer .card .content .number {
    left: -23%;
    top: 380px
}

.DidYouKnow .DYNContainer .card .content .number h1 {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    font-size: 120px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.DidYouKnow .DYNContainer .card:hover .image {
    opacity: 1;
    transform: translateY(0)
}

@media (max-width: 1536px) {
    .DidYouKnow h1 {
        font-size:52px;
        padding-bottom: 35px
    }

    .DidYouKnow .DYNContainer {
        gap: 35px;
        margin-bottom: 2%
    }

    .DidYouKnow .DYNContainer .card {
        flex: 0 0 32%;
        width: 32%;
        height: 550px
    }

    .DidYouKnow .DYNContainer .card .image {
        transition: transform .7s ease-in-out,opacity .7s ease-in-out
    }

    .DidYouKnow .DYNContainer .card .content .number {
        left: -100px;
        top: 280px
    }

    .DidYouKnow .DYNContainer .card .content .number h1 {
        font-size: 100px
    }

    .DidYouKnow .DYNContainer .card .content .desc {
        top: 390px
    }

    .DidYouKnow .DYNContainer .card .content .desc p {
        font-size: 20px
    }
}

@media (max-width: 1440px) {
    .DidYouKnow h1 {
        font-size:48px;
        padding-bottom: 32px
    }

    .DidYouKnow .DYNContainer {
        gap: 30px;
        margin-bottom: 2%
    }

    .DidYouKnow .DYNContainer .card {
        flex: 0 0 31%;
        width: 31%;
        height: 500px
    }

    .DidYouKnow .DYNContainer .card .image {
        transition: transform .7s ease-in-out,opacity .7s ease-in-out
    }

    .DidYouKnow .DYNContainer .card .content .number {
        left: -90px;
        top: 260px
    }

    .DidYouKnow .DYNContainer .card .content .number h1 {
        font-size: 90px
    }

    .DidYouKnow .DYNContainer .card .content .desc {
        top: 360px
    }

    .DidYouKnow .DYNContainer .card .content .desc p {
        font-size: 18px
    }
}

@media (max-width: 1280px) {
    .DidYouKnow h1 {
        font-size:44px;
        padding-bottom: 28px
    }

    .DidYouKnow .DYNContainer {
        gap: 25px;
        margin-bottom: 2%
    }

    .DidYouKnow .DYNContainer .card {
        flex: 0 0 30%;
        width: 30%;
        height: 450px
    }

    .DidYouKnow .DYNContainer .card .image {
        transition: transform .6s ease-in-out,opacity .6s ease-in-out
    }

    .DidYouKnow .DYNContainer .card .content .number {
        left: -80px;
        top: 240px
    }

    .DidYouKnow .DYNContainer .card .content .number h1 {
        font-size: 80px
    }

    .DidYouKnow .DYNContainer .card .content .desc {
        top: 330px
    }

    .DidYouKnow .DYNContainer .card .content .desc p {
        font-size: 16px
    }
}

@media (max-width: 992px) {
    .DidYouKnow h1 {
        font-size:40px;
        padding-bottom: 24px
    }

    .DidYouKnow .DYNContainer {
        gap: 20px;
        margin-bottom: 1.5%
    }

    .DidYouKnow .DYNContainer .card {
        flex: 0 0 28%;
        width: 28%;
        height: 400px
    }

    .DidYouKnow .DYNContainer .card .image {
        transition: transform .6s ease-in-out,opacity .6s ease-in-out
    }

    .DidYouKnow .DYNContainer .card .content .number {
        left: -50px;
        top: 190px
    }

    .DidYouKnow .DYNContainer .card .content .number h1 {
        font-size: 70px
    }

    .DidYouKnow .DYNContainer .card .content .desc {
        top: 270px
    }

    .DidYouKnow .DYNContainer .card .content .desc p {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .DidYouKnow {
        padding:5% 1% 10%
    }

    .DidYouKnow h1 {
        font-size: 20px;
        padding-bottom: 0
    }

    .DidYouKnow .DYNContainer {
        width: 100%;
        padding: 4% 2%
    }

    .DidYouKnow .DYNContainer .card {
        flex: 0 0 100%;
        width: 100%;
        height: 435px
    }

    .DidYouKnow .DYNContainer .card .image {
        width: 100%;
        height: auto
    }

    .DidYouKnow .DYNContainer .card .content {
        width: 100%
    }

    .DidYouKnow .DYNContainer .card .content .number {
        top: 220px;
        left: -80px
    }

    .DidYouKnow .DYNContainer .card .content .number h1 {
        font-size: 64px
    }

    .DidYouKnow .DYNContainer .card .content .desc {
        top: 300px
    }

    .DidYouKnow .DYNContainer .card .content .desc p {
        font-size: 16px
    }

    .DidYouKnow .DYNScroll {
        width: 100%
    }

    .DidYouKnow .DYNScroll .scroller {
        scale: 1.2;
        width: 35%!important
    }

    .DidYouKnow .DYNScroll .scroller .slider-bar {
        scale: 1.2;
        width: 80%!important
    }
}

.Glimpse {
    padding: 0;
    overflow: hidden
}

.Glimpse h1 {
    color: #f0af13;
    font-size: 56px;
    font-weight: 600;
    text-align: center
}

.Glimpse .carouselContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}
/* Scope everything to .Glimpse so nothing leaks outside */
.Glimpse .carouselContainer {
  width: 100%;
  /*max-width: 1300px;*/
  margin: auto;
  position: relative;
  overflow: hidden;
  padding: 40px 0;
}

.Glimpse .imageContainer {
  position: relative;
  height: 500px;
}

.Glimpse .image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 460px;
  opacity: 0;
  transition: all .6s ease-in-out;
  filter: brightness(40%);
}

.Glimpse .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.Glimpse .image.center {
  left: 50%;
  transform: translate(-50%, -50%) scale(1.06);
  opacity: 1;
  z-index: 10;
  filter: brightness(100%);
}

.Glimpse .image.left {
  left: 5%;
  transform: translateY(-50%) scale(.9) rotateY(18deg);
  opacity: .6;
  z-index: 5;
}

.Glimpse .image.right {
  right: 5%;
  transform: translateY(-50%) scale(.9) rotateY(-18deg);
  opacity: .6;
  z-index: 5;
}

.Glimpse .navButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 20;
}


.Glimpse .carouselContainer .redline {
    position: absolute;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329;
    bottom: 0;
}

.Glimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.Glimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.Glimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.Glimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.Glimpse .left,.Glimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.Glimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.Glimpse .navButton img {
    width: 50px;
    height: 50px
}

.Glimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.Glimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .Glimpse {
        padding:0;
        overflow: hidden
    }

    .Glimpse h1 {
        font-size: 52px
    }

    .Glimpse .carouselContainer {
        margin: 40px 0
    }

    .Glimpse .carouselContainer .redline {
        margin-top: 35%;
        width: 48.5%;
        height: 8px
    }

    .Glimpse .imageContainer {
        gap: 30px
    }

    .Glimpse .image {
        height: 500px
    }

    .Glimpse .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .Glimpse .center {
        width: 48%;
        height: 530px
    }

    .Glimpse .left,.Glimpse .right {
        transform: scale(.82)
    }

    .Glimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .Glimpse .left.navButton {
        left: 0%
    }

    .Glimpse .right.navButton {
        left: 78%
    }
}

@media (max-width: 1440px) {
    .Glimpse h1 {
        font-size:48px
    }

    .Glimpse .carouselContainer {
        margin: 35px 0
    }

    .Glimpse .carouselContainer .redline {
        margin-top: 36%;
        width: 47.5%;
        height: 7px
    }

    .Glimpse .imageContainer {
        gap: 25px
    }

    .Glimpse .image {
        height: 460px
    }

    .Glimpse .center {
        width: 47.5%;
        height: 500px
    }

    .Glimpse .left,.Glimpse .right {
        transform: scale(.8)
    }

    .Glimpse .navButton img {
        width: 42px;
        height: 42px
    }

    .Glimpse .left.navButton {
        left: 16%
    }

    .Glimpse .right.navButton {
        left: 77%
    }
}

@media (max-width: 1280px) {
    .Glimpse h1 {
        font-size:44px
    }

    .Glimpse .carouselContainer {
        margin: 30px 0
    }

    .Glimpse .carouselContainer .redline {
        margin-top: 37%;
        width: 46.5%;
        height: 6px
    }

    .Glimpse .imageContainer {
        gap: 20px
    }

    .Glimpse .image {
        height: 420px
    }

    .Glimpse .center {
        width: 46.5%;
        height: 470px
    }

    .Glimpse .left,.Glimpse .right {
        transform: scale(.78)
    }

    .Glimpse .navButton img {
        width: 38px;
        height: 38px
    }

    .Glimpse .left.navButton {
        left: 15%
    }

    .Glimpse .right.navButton {
        left: 75%
    }
}

@media (max-width: 992px) {
    .Glimpse h1 {
        font-size:38px
    }

    .Glimpse .carouselContainer {
        margin: 25px 0
    }

    .Glimpse .carouselContainer .redline {
        margin-top: 40%;
        width: 45%;
        height: 5px
    }

    .Glimpse .imageContainer {
        gap: 15px
    }

    .Glimpse .image {
        height: 350px
    }

    .Glimpse .center {
        width: 45%;
        height: 390px;
        margin-bottom: 15px
    }

    .Glimpse .left,.Glimpse .right {
        width: calc((55% - 30px)/2);
        opacity: .5;
        transform: scale(.75)
    }

    .Glimpse .navButton img {
        width: 32px;
        height: 32px
    }

    .Glimpse .left.navButton {
        left: 14%
    }

    .Glimpse .right.navButton {
        left: 77%
    }
}

@media (max-width: 480px) {
    .Glimpse {
        padding:5% 1%
    }

    .Glimpse h1 {
        font-size: 20px;
        padding-bottom: 0
    }

    .Glimpse .carouselContainer {
        width: 100%;
        margin: 40px 0
    }

    .Glimpse .carouselContainer .redline {
        width: 75%;
        height: 5px;
        margin-top: 45%
    }

    .Glimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .Glimpse .image img,.Glimpse .center,.Glimpse .left,.Glimpse .right {
        width: 260px;
        height: 163px
    }

    .Glimpse .navButton {
        top: 30%
    }

    .Glimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .Glimpse .left.navButton {
        left: -1%
    }

    .Glimpse .right.navButton {
        left: 82%
    }
}

.LifeAtMAAC {
    padding: 80px 10% 0
}

.LifeAtMAAC h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin: auto;
    padding-bottom: 1.2%
}

.LifeAtMAAC .lamContainer {
    margin-top: 40px;
    display: flex;
    justify-content: space-between
}

.LifeAtMAAC .lamContainer .left,.LifeAtMAAC .lamContainer .right {
    width: 46%;
    display: flex;
    flex-direction: column
}

.LifeAtMAAC .lamContainer .right {
    margin-top: 216px
}

.LifeAtMAAC .lamContainer .lamCard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 120px
}

.LifeAtMAAC .lamContainer .lamCard .imageContainer {
    width: 100%;
    position: relative;
    display: flex
}

.LifeAtMAAC .lamContainer .lamCard .imageContainer .top {
    position: absolute;
    top: -16px;
    left: -16px
}

.LifeAtMAAC .lamContainer .lamCard .imageContainer .image {
    width: 100%;
    height: 517px
}

.LifeAtMAAC .lamContainer .lamCard .imageContainer .image img {
    width: 100%;
    object-fit: cover;
    height: 100%
}

.LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom {
    position: absolute;
    bottom: -16px;
    right: -16px
}

.LifeAtMAAC .lamContainer .lamCard h3 {
    margin-left: 2%;
    width: 100%;
    color: #fabc3f;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.LifeAtMAAC .lamContainer .lamCard p {
    margin-left: 2%;
    width: 100%;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 15px
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc {
    position: relative;
    overflow: hidden
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc .desc-content {
    max-height: 80px;
    overflow: hidden;
    transition: max-height .5s ease-in-out,opacity .3s ease-in-out;
    opacity: .9
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc .desc-content.expanded {
    max-height: 1000px;
    opacity: 1
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc p {
    margin-bottom: 10px
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc ul {
    margin: 0 0 0 30px;
    padding: 0
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc ul li {
    margin-bottom: 10px;
    line-height: 1.313
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc ul li:last-child {
    margin-bottom: 15px
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc a {
    text-decoration: underline;
    color: #f0af13
}

.LifeAtMAAC .lamContainer .lamCard .lam-desc a:hover {
    text-decoration: none
}

.LifeAtMAAC .lamContainer .lamCard .know-more-btn {
    background: none;
    border: none;
    color: #bc2329;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    margin-top: 10px;
    display: inline-block;
    transition: color .2s ease;
    margin-left: 13px
}

.LifeAtMAAC .lamContainer .lamCard .know-more-btn:hover {
    text-decoration: underline
}

.LifeAtMAAC .LifeAtMAAC-scroller {
    display: none
}

@media (max-width: 1536px) {
    .LifeAtMAAC {
        padding:35px 8%
    }

    .LifeAtMAAC h1 {
        font-size: 52px
    }

    .LifeAtMAAC .lamContainer {
        margin-top: 35px;
        display: flex;
        justify-content: space-between
    }

    .LifeAtMAAC .lamContainer .left,.LifeAtMAAC .lamContainer .right {
        width: 47%
    }

    .LifeAtMAAC .lamContainer .right {
        margin-top: 200px
    }

    .LifeAtMAAC .lamContainer .lamCard {
        gap: 18px;
        margin-bottom: 70px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .top {
        top: -14px;
        left: -14px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image {
        height: 450px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom {
        bottom: -14px;
        right: -14px
    }

    .LifeAtMAAC .lamContainer .lamCard h3 {
        font-size: 30px;
        width: 100%
    }

    .LifeAtMAAC .lamContainer .lamCard p {
        font-size: 18px;
        width: 100%
    }

    .LifeAtMAAC .lamContainer .lamCard .lamButton {
        padding: 25px 0
    }

    .LifeAtMAAC .LifeAtMAAC-scroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .LifeAtMAAC {
        padding:30px 7%
    }

    .LifeAtMAAC h1 {
        font-size: 48px
    }

    .LifeAtMAAC .lamContainer {
        margin-top: 30px;
        display: flex;
        justify-content: space-between
    }

    .LifeAtMAAC .lamContainer .left,.LifeAtMAAC .lamContainer .right {
        width: 46%
    }

    .LifeAtMAAC .lamContainer .right {
        margin-top: 170px
    }

    .LifeAtMAAC .lamContainer .lamCard {
        gap: 15px;
        margin-bottom: 60px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .top {
        top: -12px;
        left: -12px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image {
        height: 420px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom {
        bottom: -12px;
        right: -12px
    }

    .LifeAtMAAC .lamContainer .lamCard h3 {
        font-size: 28px;
        width: 85%
    }

    .LifeAtMAAC .lamContainer .lamCard p {
        font-size: 16px;
        width: 70%
    }

    .LifeAtMAAC .lamContainer .lamCard .lamButton {
        padding: 20px 0
    }

    .LifeAtMAAC .LifeAtMAAC-scroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .LifeAtMAAC {
        padding:25px 6%
    }

    .LifeAtMAAC h1 {
        font-size: 44px
    }

    .LifeAtMAAC .lamContainer {
        margin-top: 25px;
        display: flex;
        justify-content: space-between
    }

    .LifeAtMAAC .lamContainer .left,.LifeAtMAAC .lamContainer .right {
        width: 45%
    }

    .LifeAtMAAC .lamContainer .right {
        margin-top: 140px
    }

    .LifeAtMAAC .lamContainer .lamCard {
        gap: 12px;
        margin-bottom: 50px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .top {
        top: -10px;
        left: -10px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image {
        height: 380px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom {
        bottom: -10px;
        right: -10px
    }

    .LifeAtMAAC .lamContainer .lamCard h3 {
        font-size: 24px;
        width: 85%
    }

    .LifeAtMAAC .lamContainer .lamCard p {
        font-size: 14px;
        width: 68%
    }

    .LifeAtMAAC .lamContainer .lamCard .lamButton {
        padding: 15px 0
    }

    .LifeAtMAAC .LifeAtMAAC-scroller {
        display: none
    }
}

@media (max-width: 992px) {
    .LifeAtMAAC {
        padding:20px 5% 0
    }

    .LifeAtMAAC h1 {
        font-size: 36px;
        padding-bottom: 1%
    }

    .LifeAtMAAC .lamContainer {
        margin-top: 20px;
        display: flex;
        justify-content: space-between
    }

    .LifeAtMAAC .lamContainer .left,.LifeAtMAAC .lamContainer .right {
        width: 48%
    }

    .LifeAtMAAC .lamContainer .right {
        margin-top: 100px
    }

    .LifeAtMAAC .lamContainer .lamCard {
        gap: 10px;
        margin-bottom: 35px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .top {
        top: -8px;
        left: -8px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image {
        height: 300px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image img {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom {
        bottom: -8px;
        right: -8px
    }

    .LifeAtMAAC .lamContainer .lamCard h3 {
        font-size: 20px;
        width: 85%
    }

    .LifeAtMAAC .lamContainer .lamCard p {
        font-size: 12px;
        width: 70%
    }

    .LifeAtMAAC .lamContainer .lamCard .lamButton {
        padding: 10px 0
    }

    .LifeAtMAAC .LifeAtMAAC-scroller {
        display: none
    }
}

@media (max-width: 480px) {
    .LifeAtMAAC {
        padding:5% 1%
    }

    .LifeAtMAAC h1 {
        font-size: 20px
    }

    .LifeAtMAAC .lamContainer {
        width: 100%;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
        overflow: scroll
    }

    .LifeAtMAAC .lamContainer::-webkit-scrollbar {
        display: none
    }

    .LifeAtMAAC .lamContainer .left,.LifeAtMAAC .lamContainer .right {
        width: 100%;
        margin-top: 0
    }

    .LifeAtMAAC .lamContainer .right {
        margin-top: 0
    }

    .LifeAtMAAC .lamContainer .lamCard {
        flex: 0 0 100%;
        padding: 3%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image {
        padding: 1% 2%;
        height: auto;
        width: 100%
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .image img {
        height: 245.953px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .top {
        top: -8px;
        left: -8px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .top img {
        width: 78.972px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom {
        bottom: -8px;
        right: -8px
    }

    .LifeAtMAAC .lamContainer .lamCard .imageContainer .bottom img {
        width: 78.972px
    }

    .LifeAtMAAC .lamContainer .lamCard h3 {
        font-size: 18px;
        width: 100%;
        text-align: center
    }

    .LifeAtMAAC .lamContainer .lamCard p {
        font-size: 14px;
        width: 90%;
        text-align: center
    }

    .LifeAtMAAC .LifeAtMAAC-scroller {
        display: block
    }
}

.RealStoriesLAM {
    padding: 3.48% 0
}

.RealStoriesLAM .head {
    margin: auto;
    align-items: center;
    text-align: center
}

.RealStoriesLAM .stories-container {
    display: flex;
    padding: 6% 0 2%;
    width: 100%;
    gap: 3.22%;
    overflow: scroll
}

.RealStoriesLAM .stories-container::-webkit-scrollbar {
    display: none
}

.RealStoriesLAM .stories-container .story {
    background-color: #0f0f0f;
    position: relative;
    min-width: 33%;
    height: 369px;
    display: flex;
    padding: 4% 2%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.5);
    text-align: center;
    align-items: stretch
}

.RealStoriesLAM .stories-container .story .qopen {
    position: absolute;
    top: 6%;
    left: 6%
}

.RealStoriesLAM .stories-container .story .qclose {
    bottom: 20%;
    right: 6%;
    position: absolute
}

.RealStoriesLAM .stories-container .story .image {
    width: 19%;
    position: absolute;
    top: -15%;
    left: 41%
}

.RealStoriesLAM .stories-container .story .image img {
    height: 100%;
    width: 100%
}

.RealStoriesLAM .stories-container .story .quoteContainer {
    position: relative
}

.RealStoriesLAM .stories-container .story .quoteContainer .top {
    width: 100%
}

.RealStoriesLAM .stories-container .story .quoteContainer .bottom {
    width: 100%;
    position: absolute;
    bottom: -60px
}

.RealStoriesLAM .stories-container .story .quoteContainer .name {
    color: #bc2329;
    font-size: 20px;
    padding: 4% 16% 0;
    font-weight: 600
}

.RealStoriesLAM .stories-container .story .quoteContainer .desc {
    font-family: Raleway,sans-serif;
    padding: 0 16%;
    font-size: 16px
}

.RealStoriesLAM .mobile-button {
    margin-top: 80px
}

.RealStoriesLAM .mobile-button button {
    margin: auto
}

@media (max-width: 1536px) {
    .RealStoriesLAM .head {
        text-align:center;
        margin: auto;
        font-size: 52px
    }

    .RealStoriesLAM .stories-container {
        padding: 5% 0 2%;
        width: 100%;
        gap: 3%
    }

    .RealStoriesLAM .stories-container .story {
        min-width: 32%;
        height: 320px;
        padding: 3.5% 2%;
        border-radius: 8px
    }

    .RealStoriesLAM .stories-container .story p {
        font-size: 14px
    }

    .RealStoriesLAM .stories-container .story .qopen {
        top: 5%;
        left: 5%
    }

    .RealStoriesLAM .stories-container .story .qclose {
        bottom: 18%;
        right: 5%
    }

    .RealStoriesLAM .stories-container .story .image {
        width: 18%;
        top: -12%;
        left: 42%
    }

    .RealStoriesLAM .stories-container .story .image img {
        height: 100%;
        width: 100%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer {
        margin-bottom: 6%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .name {
        font-size: 16px;
        padding: 2% 14% 0
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .desc {
        font-size: 13px;
        padding: 0 14%
    }

    .RealStoriesLAM .mobile-button {
        display: none
    }
}

@media (max-width: 1440px) {
    .RealStoriesLAM .head {
        font-size:48px
    }

    .RealStoriesLAM .stories-container {
        padding: 4% 0 2%;
        width: 100%;
        gap: 2.5%
    }

    .RealStoriesLAM .stories-container .story {
        min-width: 31%;
        height: 280px;
        padding: 3% 2%;
        border-radius: 8px
    }

    .RealStoriesLAM .stories-container .story p {
        font-size: 12px
    }

    .RealStoriesLAM .stories-container .story .qopen {
        top: 5%;
        left: 5%
    }

    .RealStoriesLAM .stories-container .story .qclose {
        bottom: 15%;
        right: 5%
    }

    .RealStoriesLAM .stories-container .story .image {
        width: 17%;
        top: -10%;
        left: 43%
    }

    .RealStoriesLAM .stories-container .story .image img {
        height: 100%;
        width: 100%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer {
        margin-bottom: 8%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .name {
        font-size: 15px;
        padding: 2% 12% 0
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .desc {
        font-size: 12px;
        padding: 0 12%
    }

    .RealStoriesLAM .mobile-button {
        margin-top: 60px;
        display: none
    }
}

@media (max-width: 1280px) {
    .RealStoriesLAM .head {
        font-size:44px
    }

    .RealStoriesLAM .stories-container {
        padding: 3% 0 2%;
        width: 100%;
        gap: 2%
    }

    .RealStoriesLAM .stories-container .story {
        min-width: 30%;
        height: 250px;
        padding: 3% 2%;
        border-radius: 8px
    }

    .RealStoriesLAM .stories-container .story .qopen {
        top: 4%;
        left: 4%
    }

    .RealStoriesLAM .stories-container .story .qclose {
        bottom: 12%;
        right: 4%
    }

    .RealStoriesLAM .stories-container .story .image {
        width: 16%;
        top: -8%;
        left: 44%
    }

    .RealStoriesLAM .stories-container .story .image img {
        height: 100%;
        width: 100%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .name {
        font-size: 14px;
        padding: 2% 10% 0
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .desc {
        font-size: 11px;
        padding: 0 10%
    }

    .RealStoriesLAM .mobile-button {
        margin-top: 50px;
        display: none
    }
}

@media (max-width: 992px) {
    .RealStoriesLAM .head {
        font-size:38px
    }

    .RealStoriesLAM .stories-container {
        padding: 2.5% 0 2%;
        gap: 1.8%
    }

    .RealStoriesLAM .stories-container .story {
        min-width: 45%;
        height: 300px;
        padding: 6.5% 1.5%;
        border-radius: 7px
    }

    .RealStoriesLAM .stories-container .story .qopen {
        top: 3.5%;
        left: 3.5%
    }

    .RealStoriesLAM .stories-container .story .qclose {
        bottom: 10%;
        right: 3.5%
    }

    .RealStoriesLAM .stories-container .story .image {
        width: 14%;
        top: -7%;
        left: 45%
    }

    .RealStoriesLAM .stories-container .story .image img {
        height: 100%;
        width: 100%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .name {
        font-size: 13px;
        padding: 1% 4% 0%
    }

    .RealStoriesLAM .stories-container .story .quoteContainer .desc {
        font-size: 10px;
        padding: 0 8%
    }

    .RealStoriesLAM .mobile-button {
        margin-top: 40px;
        display: none
    }
}

@media (max-width: 480px) {
    .RealStoriesLAM {
        padding:1% 1% 10%
    }

    .RealStoriesLAM .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .RealStoriesLAM .head .head-content {
        width: 100%!important
    }

    .RealStoriesLAM .head .head-content h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .RealStoriesLAM .head .head-content h3 {
        font-size: 16px!important;
        width: 100%!important
    }

    .RealStoriesLAM .head .head-content p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .RealStoriesLAM .head .corner-button {
        display: none!important
    }

    .RealStoriesLAM .stories-container {
        margin-left: 0;
        flex-direction: row!important;
        align-items: center!important;
        gap: 20px!important;
        width: 100%!important;
        padding: 16% 2% 3%!important;
        height: auto
    }

    .RealStoriesLAM .story {
        max-height: 250px!important;
        min-width: 100%!important;
        max-width: 100%!important;
        padding: 5%!important;
        border-radius: 10px
    }

    .RealStoriesLAM .story p {
        font-size: 11px!important
    }

    .RealStoriesLAM .image {
        width: 15%!important;
        top: -15%!important;
        left: 43%!important
    }

    .RealStoriesLAM .quoteContainer {
        position: relative;
        margin-bottom: -4%!important
    }

    .RealStoriesLAM .quoteContainer .top {
        width: 100%;
        padding-top: 8%
    }

    .RealStoriesLAM .quoteContainer .top p {
        font-size: 12px
    }

    .RealStoriesLAM .quoteContainer .bottom {
        width: 100%;
        position: absolute;
        bottom: 0!important
    }

    .RealStoriesLAM .quoteContainer .name {
        font-size: 14px!important;
        font-weight: 600
    }

    .RealStoriesLAM .quoteContainer .desc {
        font-family: Raleway,sans-serif;
        padding: 0 16%;
        font-size: 12px!important
    }

    .RealStoriesLAM .qclose,.RealStoriesLAM .qopen {
        width: 17px!important
    }

    .RealStoriesLAM .qclose img,.RealStoriesLAM .qopen img {
        width: 20px;
        height: 20px
    }

    .RealStoriesLAM .scroller .slider img {
        border: none;
        background: transparent
    }

    .RealStoriesLAM .mobile-button {
        margin-top: 10%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        width: 100%!important;
        text-align: center!important
    }

    .RealStoriesLAM .mobile-button .animated-button {
        width: 80%!important;
        font-size: 16px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .RealStoriesLAM .mobile-button .animated-button:hover .btn-text {
        color: #000
    }
}

.SWCTA {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 382px;
    text-align: center;
    background: linear-gradient(0deg,#c7253e80,#c7253e80),url(../assets/banner-DwOW9Kk2.jpeg) #d3d3d3 0px -378.891px/100% 281.618% no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.SWCTA .ctaTitle {
    width: 80%
}

.SWCTA .ctaTitle h1 {
    text-align: center;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.SWCTA .ctaButton .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.SWCTA .ctaButton .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .SWCTA {
        height:350px
    }

    .SWCTA .ctaTitle {
        width: 85%
    }

    .SWCTA .ctaTitle h1 {
        font-size: 52px
    }

    .SWCTA .ctaButton .animated-button {
        border: 1px solid #fff;
        color: #fff;
        padding: 12px 24px
    }

    .SWCTA .ctaButton .btn-background {
        background-color: #fff;
        opacity: .9
    }
}

@media (max-width: 1440px) {
    .SWCTA {
        height:320px
    }

    .SWCTA .ctaTitle {
        width: 85%
    }

    .SWCTA .ctaTitle h1 {
        font-size: 48px
    }

    .SWCTA .ctaButton .animated-button {
        padding: 10px 20px
    }

    .SWCTA .ctaButton .btn-background {
        background-color: #fff;
        opacity: .85
    }
}

@media (max-width: 1280px) {
    .SWCTA {
        height:280px
    }

    .SWCTA .ctaTitle {
        width: 90%
    }

    .SWCTA .ctaTitle h1 {
        font-size: 44px
    }

    .SWCTA .ctaButton .animated-button {
        padding: 8px 16px
    }

    .SWCTA .ctaButton .btn-background {
        background-color: #fff;
        opacity: .85
    }
}

@media (max-width: 992px) {
    .SWCTA {
        height:240px
    }

    .SWCTA .ctaTitle {
        width: 95%
    }

    .SWCTA .ctaTitle h1 {
        font-size: 36px
    }

    .SWCTA .ctaButton .animated-button {
        padding: 6px 14px;
        border: 1px solid #fff;
        color: #fff
    }

    .SWCTA .ctaButton .btn-background {
        background-color: #fff;
        opacity: .85
    }
}

@media (max-width: 480px) {
    .SWCTA {
        height:188px
    }

    .SWCTA .ctaTitle {
        width: 100%;
        margin-top: 8%
    }

    .SWCTA .ctaTitle h1 {
        font-size: 20px
    }

    .SWCTA .ctaButton {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%
    }

    .SWCTA .ctaButton .animated-button {
        font-size: 16px;
        padding: 12px 26px;
        width: auto
    }
}

.SWHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 695px;
    overflow: hidden
}

.SWHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.SWHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.SWHero h1,.SWHero h2,.SWHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.SWHero h1 {
    color: var(--WHITE-COLOR, #fff);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.SWHero h2 {
    color: var(--YELLOW-PRIMARY-COLOR, #f0af13);
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.SWHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .SWHero {
        height:500px
    }

    .SWHero video {
        height: 100%
    }

    .SWHero:before {
        background: #0006
    }

    .SWHero h1,.SWHero h2 {
        font-size: 72px
    }

    .SWHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .SWHero {
        height:450px
    }

    .SWHero video {
        height: 100%
    }

    .SWHero:before {
        background: #00000059
    }

    .SWHero h1,.SWHero h2 {
        font-size: 64px
    }

    .SWHero p {
        width: 80%;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .SWHero {
        height:400px
    }

    .SWHero video {
        height: 100%
    }

    .SWHero:before {
        background: #0000004d
    }

    .SWHero h1,.SWHero h2 {
        font-size: 56px
    }

    .SWHero p {
        width: 85%;
        font-size: 18px
    }
}

@media (max-width: 992px) {
    .SWHero {
        height:320px
    }

    .SWHero video {
        height: 100%
    }

    .SWHero:before {
        background: #00000040
    }

    .SWHero h1,.SWHero h2 {
        font-size: 40px;
        margin-bottom: .8%
    }

    .SWHero p {
        width: 90%;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .SWHero {
        height:229px;
        margin-top: 0
    }

    .SWHero h1,.SWHero h2,.SWHero p {
        margin-bottom: 12px
    }

    .SWHero h1,.SWHero h2 {
        font-size: 22px
    }

    .SWHero p {
        width: 100%;
        font-size: 16px
    }
}

.swStProjects .head {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center
}

.swStProjects .head .head-content {
    width: 70%
}

.swStProjects .stcontainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-top: 3%;
    position: relative;
    transition: opacity .5s ease-in-out;
    overflow-x: auto;
    gap: 20px;
    width: 100%;
    padding-bottom: 20px
}

.swStProjects .stcontainer::-webkit-scrollbar {
    display: none
}

.swStProjects .stcontainer .grid-section {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start
}

.swStProjects .stcontainer .grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    justify-content: space-between;
    align-items: start;
    width: 100%
}

.swStProjects .stcontainer .image,.swStProjects .stcontainer .video {
    max-width: 553.2px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.swStProjects .stcontainer .image p,.swStProjects .stcontainer .video p {
    position: absolute;
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 600;
    bottom: 5.7%;
    left: 6.7%
}

.swStProjects .stcontainer .image .expand,.swStProjects .stcontainer .video .expand {
    position: absolute;
    top: 9%;
    right: .5%;
    transform: translate(-50%,-50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s
}

.swStProjects .stcontainer .image .expand:hover,.swStProjects .stcontainer .video .expand:hover {
    transform: translate(-50%,-50%) scale(1.2)
}

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

.swStProjects .stcontainer .image1,.swStProjects .stcontainer .video1 {
    height: 747.59px
}

.swStProjects .stcontainer .image2,.swStProjects .stcontainer .video2 {
    height: 424.56px
}

.swStProjects .stcontainer .image3,.swStProjects .stcontainer .video3 {
    height: 299.03px
}

.swStProjects .stcontainer .image4,.swStProjects .stcontainer .video4 {
    height: 295.86px
}

.swStProjects .stcontainer .image5,.swStProjects .stcontainer .video5 {
    height: 427.73px
}

.swStProjects .stcontainer .column-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.swStProjects .stcontainer .column-stack .image {
    margin-bottom: 12px
}

.swStProjects .swipe-text,.swStProjects .mobile-button {
    display: none
}

.swStProjects .scroller {
    width: 36%
}

.swStProjects .scroller .slider-bar {
    width: 100%
}

.swStProjects .corner-button {
    margin-top: 2.4%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 1536px) {
    .swStProjects .head-content {
        width:48%
    }

    .swStProjects .head-content h1 {
        font-size: 52px
    }

    .swStProjects .stcontainer {
        gap: 15px;
        padding-top: 2.5%;
        padding-bottom: 15px
    }

    .swStProjects .stcontainer .grid {
        grid-template-columns: 32% 32% 32%
    }

    .swStProjects .stcontainer .image,.swStProjects .stcontainer .video {
        max-width: 500px
    }

    .swStProjects .stcontainer .image p,.swStProjects .stcontainer .video p {
        font-size: 18px;
        bottom: 6%;
        left: 7%
    }

    .swStProjects .stcontainer .image .expand,.swStProjects .stcontainer .video .expand {
        width: 2.2rem;
        height: 2.2rem
    }

    .swStProjects .stcontainer .image1,.swStProjects .stcontainer .video1 {
        height: 700px
    }

    .swStProjects .stcontainer .image2,.swStProjects .stcontainer .video2 {
        height: 400px
    }

    .swStProjects .stcontainer .image3,.swStProjects .stcontainer .video3,.swStProjects .stcontainer .image4,.swStProjects .stcontainer .video4 {
        height: 280px
    }

    .swStProjects .stcontainer .image5,.swStProjects .stcontainer .video5 {
        height: 400px
    }

    .swStProjects .scroller {
        width: 34%
    }
}

@media (max-width: 1440px) {
    .swStProjects .head-content {
        width:60%
    }

    .swStProjects .stcontainer {
        gap: 18px;
        padding-top: 2.8%;
        padding-bottom: 18px
    }

    .swStProjects .stcontainer .grid {
        grid-template-columns: 33% 33% 33%
    }

    .swStProjects .stcontainer .image,.swStProjects .stcontainer .video {
        max-width: 500px
    }

    .swStProjects .stcontainer .image p,.swStProjects .stcontainer .video p {
        font-size: 18px;
        bottom: 6%;
        left: 7%
    }

    .swStProjects .stcontainer .image .expand,.swStProjects .stcontainer .video .expand {
        width: 2.3rem;
        height: 2.3rem
    }

    .swStProjects .stcontainer .image1,.swStProjects .stcontainer .video1 {
        height: 700px
    }

    .swStProjects .stcontainer .image2,.swStProjects .stcontainer .video2 {
        height: 400px
    }

    .swStProjects .stcontainer .image3,.swStProjects .stcontainer .video3,.swStProjects .stcontainer .image4,.swStProjects .stcontainer .video4 {
        height: 280px
    }

    .swStProjects .stcontainer .image5,.swStProjects .stcontainer .video5 {
        height: 400px
    }

    .swStProjects .scroller {
        width: 34%
    }
}

@media (max-width: 1280px) {
    .swStProjects .head-content {
        width:50%
    }

    .swStProjects .stcontainer {
        gap: 12px;
        padding-top: 2%;
        padding-bottom: 15px
    }

    .swStProjects .stcontainer .grid {
        grid-template-columns: 32% 32% 32%
    }

    .swStProjects .stcontainer .image,.swStProjects .stcontainer .video {
        max-width: 480px
    }

    .swStProjects .stcontainer .image p,.swStProjects .stcontainer .video p {
        font-size: 16px;
        bottom: 7%;
        left: 8%
    }

    .swStProjects .stcontainer .image .expand,.swStProjects .stcontainer .video .expand {
        width: 2rem;
        height: 2rem
    }

    .swStProjects .stcontainer .image1,.swStProjects .stcontainer .video1 {
        height: 650px
    }

    .swStProjects .stcontainer .image2,.swStProjects .stcontainer .video2 {
        height: 380px
    }

    .swStProjects .stcontainer .image3,.swStProjects .stcontainer .video3,.swStProjects .stcontainer .image4,.swStProjects .stcontainer .video4 {
        height: 270px
    }

    .swStProjects .stcontainer .image5,.swStProjects .stcontainer .video5 {
        height: 380px
    }

    .swStProjects .scroller {
        width: 32%
    }
}

@media (max-width: 992px) {
    .swStProjects .head-content {
        width:70%
    }

    .swStProjects .head-content h1 {
        font-size: 24px
    }

    .swStProjects .stcontainer {
        gap: 12px;
        padding-top: 2%;
        padding-bottom: 12px
    }

    .swStProjects .stcontainer .grid {
        grid-template-columns: 33% 33% 33%
    }

    .swStProjects .stcontainer .image,.swStProjects .stcontainer .video {
        border-radius: 8px
    }

    .swStProjects .stcontainer .image p,.swStProjects .stcontainer .video p {
        font-size: 14px;
        bottom: 5%;
        left: 6%
    }

    .swStProjects .stcontainer .image .expand,.swStProjects .stcontainer .video .expand {
        width: 1.8rem;
        height: 1.8rem
    }

    .swStProjects .stcontainer .image img,.swStProjects .stcontainer .image video,.swStProjects .stcontainer .video img,.swStProjects .stcontainer .video video {
        border-radius: 8px
    }

    .swStProjects .stcontainer .image1,.swStProjects .stcontainer .video1 {
        height: 400px
    }

    .swStProjects .stcontainer .image2,.swStProjects .stcontainer .video2 {
        height: 230px
    }

    .swStProjects .stcontainer .image3,.swStProjects .stcontainer .video3,.swStProjects .stcontainer .image4,.swStProjects .stcontainer .video4 {
        height: 160px
    }

    .swStProjects .stcontainer .image5,.swStProjects .stcontainer .video5 {
        height: 230px
    }

    .swStProjects .scroller {
        width: 36%
    }

    .swStProjects .corner-button {
        margin-top: 1.8%
    }
}

@media (max-width: 480px) {
    .swStProjects {
        padding:1% 1% 10%
    }

    .swStProjects .head {
        width: 100%;
        padding: 10px!important;
        text-align: center
    }

    .swStProjects .head .head-content {
        width: 100%!important
    }

    .swStProjects .head .head-content h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .swStProjects .head .head-content h3 {
        font-size: 16px!important;
        width: 100%!important
    }

    .swStProjects .head .head-content p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .swStProjects .stcontainer {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 0;
        align-items: center;
        padding: 0
    }

    .swStProjects .stcontainer .grid-section {
        flex: 0 0 100vw;
        width: 100vw;
        height: 520px;
        scroll-snap-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap
    }

    .swStProjects .stcontainer .grid {
        display: flex;
        flex-direction: row;
        width: 100vw;
        height: 520px;
        gap: 5%;
        overflow-x: auto;
        scroll-behavior: smooth
    }

    .swStProjects .stcontainer .grid::-webkit-scrollbar {
        display: none
    }

    .swStProjects .stcontainer .image1,.swStProjects .stcontainer .video1,.swStProjects .stcontainer .column-stack {
        flex: 0 0 100vw;
        width: 100vw;
        height: 520px;
        object-fit: cover;
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .swStProjects .stcontainer .image1 .image2,.swStProjects .stcontainer .image1 .video2,.swStProjects .stcontainer .image1 .image5,.swStProjects .stcontainer .image1 .video5,.swStProjects .stcontainer .video1 .image2,.swStProjects .stcontainer .video1 .video2,.swStProjects .stcontainer .video1 .image5,.swStProjects .stcontainer .video1 .video5,.swStProjects .stcontainer .column-stack .image2,.swStProjects .stcontainer .column-stack .video2,.swStProjects .stcontainer .column-stack .image5,.swStProjects .stcontainer .column-stack .video5 {
        height: 45%
    }

    .swStProjects .stcontainer .image1 .image3,.swStProjects .stcontainer .image1 .video3,.swStProjects .stcontainer .image1 .image4,.swStProjects .stcontainer .image1 .video4,.swStProjects .stcontainer .video1 .image3,.swStProjects .stcontainer .video1 .video3,.swStProjects .stcontainer .video1 .image4,.swStProjects .stcontainer .video1 .video4,.swStProjects .stcontainer .column-stack .image3,.swStProjects .stcontainer .column-stack .video3,.swStProjects .stcontainer .column-stack .image4,.swStProjects .stcontainer .column-stack .video4 {
        height: 55%
    }

    .swStProjects .swipe-text {
        display: block;
        margin-top: 2%;
        text-align: right;
        font-size: 14px;
        color: #fabc3f
    }

    .stScroll .scroller {
        opacity: 0
    }

    .corner-button .animated-button {
        font-size: 16px
    }
}

.testimonials-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 3%;
    background: radial-gradient(circle at top left,var(--vibrant-crimson-red, #C7253E) -45%,transparent 30%),radial-gradient(circle at top right,var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F) -40%,transparent 40%),radial-gradient(circle at bottom right,var(--vibrant-crimson-red, #C7253E) -40%,transparent 40%)
}

.video-testimonial-story {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    min-width: 100VW
}

.video-testimonial-story .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: #bc2329;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.video-testimonial-story .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-testimonial-story .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.fill-the-form-section {
    padding: 50px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.fill-the-form-section h1 {
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.fill-the-form-section h4 {
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 40px
}

@media (max-width: 1536px) {
    .testimonials-container .testimonials-header {
        height:65vh
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 72px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 22px;
        width: 50vw
    }

    .testimonials-container .testimonials-section .testimonials-title {
        font-size: 48px;
        margin-top: 80px
    }

    .testimonials-container .testimonials-section .testimonials-sub-title {
        font-size: 22px;
        margin-bottom: 80px
    }

    .testimonials-container .testimonials-section .stories-container {
        grid-template-columns: repeat(auto-fit,minmax(450px,1fr))
    }

    .testimonials-container .testimonials-section .stories-container .story {
        height: 450px;
        padding: 3% 2%
    }

    .testimonials-container .testimonials-section .stories-container .story p {
        font-size: 14px
    }

    .testimonials-container .testimonials-section .stories-container .story .qopen img,.testimonials-container .testimonials-section .stories-container .story .qclose img {
        width: 36px;
        height: 36px
    }

    .testimonials-container .testimonials-section .stories-container .story .image {
        top: -8%;
        left: 40%
    }

    .testimonials-container .testimonials-section .stories-container .story .image img {
        width: 100%;
        height: 100%
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 4% 14% 0
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 15px;
        padding: 0 14%
    }

    .video-testimonial-story .left {
        height: 520px
    }

    .video-testimonial-story .left h1 {
        font-size: 48px
    }

    .video-testimonial-story .left p {
        font-size: 22px
    }

    .video-testimonial-story .right {
        height: 440px
    }

    .video-testimonial-story .playbutton {
        width: 72px;
        height: 72px
    }

    .modal-content {
        width: 700px
    }

    .close-button {
        width: 32px;
        height: 32px;
        font-size: 18px
    }

    .fill-the-form-section h1 {
        font-size: 48px
    }

    .fill-the-form-section h4 {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .testimonials-container .testimonials-header {
        height:60vh
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 64px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 20px;
        width: 55vw
    }

    .testimonials-container .testimonials-section .testimonials-title {
        font-size: 44px
    }

    .testimonials-container .testimonials-section .testimonials-sub-title {
        font-size: 20px
    }

    .testimonials-container .testimonials-section .stories-container {
        grid-template-columns: repeat(auto-fit,minmax(400px,1fr))
    }

    .testimonials-container .testimonials-section .stories-container .story {
        height: 440px
    }

    .testimonials-container .testimonials-section .stories-container .story p {
        font-size: 12px
    }

    .testimonials-container .testimonials-section .stories-container .story .qopen img,.testimonials-container .testimonials-section .stories-container .story .qclose img {
        width: 32px;
        height: 32px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 17px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px
    }

    .video-testimonial-story .left {
        height: 500px
    }

    .video-testimonial-story .left h1 {
        font-size: 44px
    }

    .video-testimonial-story .left p {
        font-size: 20px
    }

    .video-testimonial-story .right {
        height: 420px
    }

    .video-testimonial-story .playbutton {
        width: 64px;
        height: 64px
    }

    .modal-content {
        width: 640px
    }

    .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px
    }

    .fill-the-form-section h1 {
        font-size: 44px
    }

    .fill-the-form-section h4 {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .testimonials-container .testimonials-header {
        height:55vh
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 56px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 18px;
        width: 60vw
    }

    .testimonials-container .testimonials-section .testimonials-title {
        font-size: 40px
    }

    .testimonials-container .testimonials-section .testimonials-sub-title {
        font-size: 18px
    }

    .testimonials-container .testimonials-section .stories-container {
        grid-template-columns: repeat(auto-fit,minmax(360px,1fr))
    }

    .testimonials-container .testimonials-section .stories-container .story {
        height: 420px;
        padding: 3% 1.5%
    }

    .testimonials-container .testimonials-section .stories-container .story .qopen img,.testimonials-container .testimonials-section .stories-container .story .qclose img {
        width: 30px;
        height: 30px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 16px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 13px
    }

    .video-testimonial-story .left {
        height: 460px
    }

    .video-testimonial-story .left h1 {
        font-size: 40px
    }

    .video-testimonial-story .left p {
        font-size: 18px
    }

    .video-testimonial-story .right {
        height: 400px
    }

    .video-testimonial-story .playbutton {
        width: 60px;
        height: 60px
    }

    .modal-content {
        width: 600px
    }

    .close-button {
        width: 28px;
        height: 28px;
        font-size: 15px
    }

    .fill-the-form-section h1 {
        font-size: 40px
    }

    .fill-the-form-section h4 {
        font-size: 18px
    }
}

@media (max-width: 992px) {
    .testimonials-container .testimonials-header {
        height:50vh
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 40px;
        margin-bottom: 15px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 16px;
        width: 75vw;
        padding: 0 20px
    }

    .video-testimonial-story .left {
        padding: 0 4%;
        height: 340px
    }

    .video-testimonial-story .left h1 {
        font-size: 32px;
        width: 90%
    }

    .video-testimonial-story .left p {
        font-size: 16px;
        width: 85%
    }

    .video-testimonial-story .right {
        height: 340px;
        right: 40px;
        width: 48%;
        top: 18%
    }

    .video-testimonial-story .playbutton {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 30%;
        left: 50%
    }

    .modal-content {
        width: 90%;
        max-width: 450px;
        padding: 8px
    }

    .close-button {
        width: 24px;
        height: 24px;
        font-size: 14px;
        top: -8px;
        right: -15px
    }

    .fill-the-form-section {
        padding: 30px 15px
    }

    .fill-the-form-section h1 {
        font-size: 32px;
        margin-bottom: 25px
    }

    .fill-the-form-section h4 {
        font-size: 16px;
        margin-bottom: 25px
    }
}

@media (max-width: 480px) {
    .testimonials-container {
        padding-bottom:10%
    }

    .testimonials-container .testimonials-header {
        height: auto;
        padding: 60px 20px
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 36px;
        margin-bottom: 16px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 16px;
        padding: 0 10px;
        width: 100%
    }

    .testimonials-container .testimonials-section .testimonials-title {
        font-size: 32px;
        margin-top: 60px;
        margin-bottom: 16px
    }

    .testimonials-container .testimonials-section .testimonials-sub-title {
        font-size: 16px;
        margin-bottom: 40px;
        padding: 0 10px
    }

    .testimonials-container .testimonials-section .stories-container {
        grid-template-columns: 1fr;
        padding: 5% 10px
    }

    .testimonials-container .testimonials-section .stories-container .story {
        height: auto;
        margin: 20px 0;
        flex-direction: column;
        padding: 20px
    }

    .testimonials-container .testimonials-section .stories-container .story .image {
        width: 80px;
        top: -40px;
        left: 50%;
        transform: translate(-50%)
    }

    .testimonials-container .testimonials-section .stories-container .story .qopen img,.testimonials-container .testimonials-section .stories-container .story .qclose img {
        width: 30px;
        height: 30px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .top,.testimonials-container .testimonials-section .stories-container .story .quoteContainer .middle,.testimonials-container .testimonials-section .stories-container .story .quoteContainer .bottom {
        margin-top: 16px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 10px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 10px
    }

    .testimonials-container .testimonials-section .video-stories-container {
        flex-direction: row;
        gap: 40px;
        padding: 5px 20px
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story {
        flex-direction: column;
        padding: 20px 0;
        height: 500px;
        min-width: 90vw
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .left {
        padding: 2rem 1rem;
        width: 100%;
        height: max-content
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .left h1 {
        font-size: 20px;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .left p {
        font-size: 14px;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .right {
        margin-top: 40px;
        background-size: cover;
        background-position: center;
        height: 250px;
        right: 0;
        top: 40%;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton img {
        width: 40px;
        height: 40px
    }

    .video-testimonial-story {
        flex-direction: column
    }

    .video-testimonial-story .left {
        width: 100%;
        height: auto;
        padding: 40px 20px
    }

    .video-testimonial-story .left h1 {
        font-size: 28px;
        margin-bottom: 12px
    }

    .video-testimonial-story .left p {
        font-size: 16px
    }

    .video-testimonial-story .right {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 20px
    }

    .video-testimonial-story .playbutton {
        width: 60px;
        height: 60px
    }

    .modal-content {
        width: 95%
    }

    .fill-the-form-section {
        padding: 40px 15px
    }

    .fill-the-form-section h1 {
        font-size: 32px
    }

    .fill-the-form-section h4 {
        font-size: 16px;
        margin-bottom: 30px
    }
}

.Signature h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Signature .EventsContainer {
    margin-top: 40px;
    display: flex;
    flex-direction: column
}

.Signature .EventsContainer .card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    position: relative
}

.Signature .EventsContainer .card .left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%
}

.Signature .EventsContainer .card .left .icon {
    width: max-content;
    height: 75px;
    object-fit: cover
}

.Signature .EventsContainer .card .left .icon img {
    width: 100%;
    height: 100%
}

.Signature .EventsContainer .card .left .heading {
    width: 75%;
    color: #fff;
    font-size: 40px;
    font-weight: 700
}

.Signature .EventsContainer .card .left .desc {
    width: 75%;
    font-size: 20px;
    font-weight: 400
}

.Signature .EventsContainer .card .left .cardButton {
    padding: 30px 0
}

.Signature .EventsContainer .card .mid {
    position: absolute;
    right: 54%;
    opacity: 1;
    transition: scale .4s ease-in-out,opacity .4s ease-in-out
}

.Signature .EventsContainer .card .right {
    flex: 1;
    position: relative
}

.Signature .EventsContainer .card .right .image {
    width: 100%;
    height: 100%;
    position: relative
}

.Signature .EventsContainer .card .right .image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    scale: .5;
    opacity: .1;
    transition: scale .4s ease-in-out,opacity .4s ease-in-out
}

.Signature .EventsContainer .card .right .image .play-button {
    position: absolute;
    top: 40%;
    left: 45%;
    cursor: pointer;
    transition: transform .3s ease
}

.Signature .EventsContainer .card .right .image .play-button img {
    opacity: 0;
    scale: 0;
    pointer-events: none;
    transition: opacity .4s ease-in-out,scale .4s ease-in-out
}

.Signature .EventsContainer .card .right .image .play-button:hover {
    transform: scale(1.1)
}

.Signature .EventsContainer .card .right .image .mobile-button {
    position: absolute;
    width: 40px!important;
    top: 40%;
    left: 45%;
    cursor: pointer;
    height: 40px;
    opacity: 0
}

.Signature .EventsContainer .card .right .image .video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.Signature .EventsContainer .card .right .image .video-container iframe {
    width: 50%;
    height: 500px;
    border-radius: 10px
}

.Signature .EventsContainer .card .right .image .close-button {
    position: absolute;
    top: 20%;
    right: 23%;
    background: #bc2329;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 50%;
    transition: .3s
}

.Signature .EventsContainer .card .right .image .close-button:hover {
    background: #821131
}

.Signature .EventsContainer .card .right:hover .mid {
    opacity: 1
}

.Signature .EventsContainer .card .right:hover .image img,.Signature .EventsContainer .card .right:hover .play-button img {
    opacity: 1;
    scale: 1
}

@media (max-width: 1536px) {
    .Signature h1 {
        font-size:52px
    }

    .Signature .EventsContainer {
        margin-top: 35px
    }

    .Signature .EventsContainer .card {
        padding: 50px 0
    }

    .Signature .EventsContainer .card .left {
        gap: 18px
    }

    .Signature .EventsContainer .card .left .icon {
        height: 65px
    }

    .Signature .EventsContainer .card .left .heading {
        font-size: 36px
    }

    .Signature .EventsContainer .card .left .desc {
        font-size: 18px
    }

    .Signature .EventsContainer .card .mid {
        right: 52%
    }

    .Signature .EventsContainer .card .right .image img {
        scale: .6;
        opacity: .2
    }

    .Signature .EventsContainer .card .right .image .play-button {
        top: 38%;
        left: 42%
    }

    .Signature .EventsContainer .card .right .image .video-container iframe {
        width: 45%;
        height: 450px
    }

    .Signature .EventsContainer .card .right .image .close-button {
        top: 18%;
        right: 21%
    }
}

@media (max-width: 1440px) {
    .Signature h1 {
        font-size:48px
    }

    .Signature .EventsContainer {
        margin-top: 30px
    }

    .Signature .EventsContainer .card {
        padding: 45px 0
    }

    .Signature .EventsContainer .card .left {
        gap: 16px
    }

    .Signature .EventsContainer .card .left .icon {
        height: 60px
    }

    .Signature .EventsContainer .card .left .heading {
        font-size: 32px
    }

    .Signature .EventsContainer .card .left .desc {
        font-size: 17px
    }

    .Signature .EventsContainer .card .mid {
        right: 50%
    }

    .Signature .EventsContainer .card .right .image img {
        scale: .65;
        opacity: .25
    }

    .Signature .EventsContainer .card .right .image .play-button {
        top: 36%;
        left: 40%
    }

    .Signature .EventsContainer .card .right .image .video-container iframe {
        width: 42%;
        height: 420px
    }

    .Signature .EventsContainer .card .right .image .close-button {
        top: 16%;
        right: 20%
    }
}

@media (max-width: 1280px) {
    .Signature h1 {
        font-size:44px
    }

    .Signature .EventsContainer {
        margin-top: 25px
    }

    .Signature .EventsContainer .card {
        padding: 40px 0
    }

    .Signature .EventsContainer .card .left {
        gap: 14px
    }

    .Signature .EventsContainer .card .left .icon {
        height: 55px
    }

    .Signature .EventsContainer .card .left .heading {
        font-size: 28px
    }

    .Signature .EventsContainer .card .left .desc {
        font-size: 16px
    }

    .Signature .EventsContainer .card .mid {
        right: 48%
    }

    .Signature .EventsContainer .card .right .image img {
        scale: .7;
        opacity: .3
    }

    .Signature .EventsContainer .card .right .image .play-button {
        top: 34%;
        left: 38%
    }

    .Signature .EventsContainer .card .right .image .video-container iframe {
        width: 40%;
        height: 400px
    }

    .Signature .EventsContainer .card .right .image .close-button {
        top: 15%;
        right: 18%
    }
}

@media (max-width: 992px) {
    .Signature h1 {
        font-size:38px
    }

    .Signature .EventsContainer {
        margin-top: 20px
    }

    .Signature .EventsContainer .card {
        padding: 35px 0
    }

    .Signature .EventsContainer .card .left {
        gap: 12px
    }

    .Signature .EventsContainer .card .left .icon {
        height: 50px
    }

    .Signature .EventsContainer .card .left .heading {
        font-size: 24px;
        width: 80%
    }

    .Signature .EventsContainer .card .left .desc {
        font-size: 14px;
        width: 80%
    }

    .Signature .EventsContainer .card .left .cardButton {
        padding: 20px 0
    }

    .Signature .EventsContainer .card .mid {
        right: 46%
    }

    .Signature .EventsContainer .card .right .image .play-button {
        top: 32%;
        left: 40%
    }

    .Signature .EventsContainer .card .right .image .play-button img {
        scale: .5
    }
}

@media (max-width: 480px) {
    .Signature {
        padding:40px 16px 0
    }

    .Signature h1 {
        font-size: 20px
    }

    .Signature .EventsContainer {
        padding: 0;
        margin-top: 20px
    }

    .Signature .EventsContainer .card {
        margin-bottom: 20px;
        flex-direction: column;
        padding: 0;
        position: relative;
        border: none
    }

    .Signature .EventsContainer .card .left {
        align-items: flex-start;
        width: 100%
    }

    .Signature .EventsContainer .card .left .icon {
        height: 41px;
        margin-bottom: 218px
    }

    .Signature .EventsContainer .card .left .heading {
        font-size: 18px;
        width: 100%
    }

    .Signature .EventsContainer .card .left .desc {
        font-size: 14px;
        width: 100%;
        font-weight: 500
    }

    .Signature .EventsContainer .card .left .cardButton {
        padding: 0
    }

    .Signature .EventsContainer .card .left .cardButton .animated-button {
        height: 36px;
        font-size: 14px
    }

    .Signature .EventsContainer .card .mid {
        display: none
    }

    .Signature .EventsContainer .card .right {
        position: absolute;
        width: 343px;
        height: 193.447px;
        top: 57px
    }

    .Signature .EventsContainer .card .right .image img {
        opacity: 1;
        scale: 1
    }

    .Signature .EventsContainer .card .right .image .video-container {
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%
    }

    .Signature .EventsContainer .card .right .image .video-container iframe {
        width: 95%;
        height: 100%
    }

    .Signature .EventsContainer .card .right .image .video-container .close-button {
        top: -20px;
        right: -10px;
        font-size: 18px;
        padding: 6px 10px
    }

    .Signature .EventsContainer .card .right .image .play-button {
        display: none;
        opacity: 0!important
    }

    .Signature .EventsContainer .card .right .image .mobile-button {
        opacity: 1;
        top: 23%
    }
}

.WhatsIn {
    display: flex;
    flex-direction: column
}

.WhatsIn .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0
}

.WhatsIn .top .left {
    padding-left: 100px;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.WhatsIn .top .left h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.WhatsIn .top .left h3 {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.WhatsIn .top .left .WhatInButton {
    padding-top: 20px
}

.WhatsIn .top .right {
    width: 57.5%
}

.WhatsIn .top .right .whatInWrapper {
    display: flex;
    gap: 20px;
    /*overflow-x: scroll;*/
    /*overflow-y: hidden*/
}

.WhatsIn .top .right .whatInWrapper::-webkit-scrollbar {
    display: none
}

.WhatsIn .top .right .whatInWrapper .whatInCard {
    display: flex;
    flex-direction: column;
    width: 415px;
    height: 499px;
    gap: 20px
}
.WhatsIn .right {
  flex: 1.3;
  overflow: hidden;
  position: relative;
}

.WhatsIn .top .right .whatInWrapper .whatInCard .image {
    width: 415px;
    height: 433px;
    object-fit: cover
}

.WhatsIn .top .right .whatInWrapper .whatInCard .image img {
    width: 100%;
    height: 100%
}

.WhatsIn .top .right .whatInWrapper .whatInCard .textdesc {
    width: 100%
}

.WhatsIn .top .right .whatInWrapper .whatInCard .textdesc p {
    margin: auto;
    width: 80%;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.WhatsIn .WhatInButton-mobile {
    opacity: 0
}

@media (max-width: 1536px) {
    .WhatsIn .top {
        display:flex;
        justify-content: space-between;
        align-items: center
    }

    .WhatsIn .top .left {
        padding-left: 80px;
        width: 50%;
        gap: 18px
    }

    .WhatsIn .top .left h1 {
        font-size: 52px
    }

    .WhatsIn .top .left h3 {
        font-size: 22px
    }

    .WhatsIn .top .left .WhatInButton {
        padding-top: 15px
    }

    .WhatsIn .top .right {
        width: 55%
    }

    .WhatsIn .top .right .whatInWrapper {
        gap: 15px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard {
        width: 390px;
        height: auto
    }
.WhatInscroller {
    margin-top: 30px;
}
    .WhatsIn .top .right .whatInWrapper .whatInCard .image {
        width: 390px;
        height: 410px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .image img {
        width: 100%;
        height: 100%
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .textdesc {
        margin-top: 15px;
        width: 100%
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .textdesc p {
        width: 85%;
        font-size: 18px
    }

    .WhatsIn .WhatInButton-mobile {
        display: none
    }
}

@media (max-width: 1440px) {
    .WhatsIn .top .left {
        padding-left:70px;
        gap: 16px
    }

    .WhatsIn .top .left h1 {
        font-size: 48px
    }

    .WhatsIn .top .left h3 {
        font-size: 20px
    }

    .WhatsIn .top .left .WhatInButton {
        padding-top: 12px
    }

    .WhatsIn .top .right {
        width: 53%
    }

    .WhatsIn .top .right .whatInWrapper {
        gap: 12px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard {
        width: 360px;
        height: 480px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .image {
        width: 360px;
        height: 380px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .textdesc p {
        font-size: 14px
    }
}

@media (max-width: 1280px) {
    .WhatsIn .top .left {
        padding-left:60px;
        gap: 14px
    }

    .WhatsIn .top .left h1 {
        font-size: 44px
    }

    .WhatsIn .top .left h3 {
        font-size: 18px
    }

    .WhatsIn .top .left .WhatInButton {
        padding-top: 10px
    }

    .WhatsIn .top .right {
        width: 52%
    }

    .WhatsIn .top .right .whatInWrapper {
        gap: 10px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard {
        width: 330px;
        height: 420px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .image {
        width: 330px;
        height: 370px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .textdesc p {
        font-size: 16px
    }
}

@media (max-width: 992px) {
    .WhatsIn .top {
        flex-direction:column;
        align-items: flex-start;
        gap: 30px
    }

    .WhatsIn .top .left {
        padding-left: 40px;
        width: 100%;
        gap: 12px
    }

    .WhatsIn .top .left h1 {
        font-size: 36px
    }

    .WhatsIn .top .left h3 {
        font-size: 16px
    }

    .WhatsIn .top .left .WhatInButton {
        padding-top: 10px
    }

    .WhatsIn .top .right {
        width: 100%
    }

    .WhatsIn .top .right .whatInWrapper {
        gap: 10px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard {
        width: 290px;
        height: 390px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .image {
        width: 290px;
        height: 320px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .textdesc p {
        width: 90%;
        font-size: 14px
    }

    .WhatsIn .WhatInButton {
        display: none
    }

    .WhatsIn .WhatInButton-mobile {
        display: block;
        opacity: 1;
        margin: 20px auto 0;
        text-align: center
    }
}

@media (max-width: 480px) {
    .WhatsIn {
        margin-top:25%
    }

    .WhatsIn .top {
        flex-direction: column
    }

    .WhatsIn .top .left {
        width: 100%;
        padding-left: 0
    }

    .WhatsIn .top .left h1 {
        font-size: 20px
    }

    .WhatsIn .top .left h3 {
        font-size: 16px
    }

    .WhatsIn .top .left .WhatInButton {
        opacity: 0
    }

    .WhatsIn .top .right {
        width: 100%;
        margin-top: 10%
    }

    .WhatsIn .top .right .whatInWrapper {
        gap: 20px!important;
        height: 440px;
        margin-top: -70px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard {
        height: 370px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .image {
        width: 380px;
        height: 353px
    }

    .WhatsIn .top .right .whatInWrapper .whatInCard .textdesc p {
        width: 100%;
        font-size: 16px
    }

    .WhatInButton-mobile {
        opacity: 1!important;
        margin: 40px auto
    }

    .WhatInButton-mobile .animated-button {
        height: 36px;
        font-size: 16px
    }
}

.WhoCanAttend .heading {
    width: 70%;
    color: #f0af13;
    font-size: 56px;
    font-weight: 600
}

.WhoCanAttend .heading p {
    color: #fff;
    text-align: left;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.WhoCanAttend .body {
    background-image: url(../assets/bg-CV8UdXYA.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 70%;
    height: 614px;
    margin: 40px auto auto
}

.WhoCanAttend .body .whoContainer {
    padding-top: 10%
}

.WhoCanAttend .body .whoContainer .who {
    display: flex;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    align-items: center;
    position: relative
}

.WhoCanAttend .body .whoContainer .who .number {
    position: absolute;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--RED-PRIMAEY-COLOR, #bc2329);
    color: transparent;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    left: -51px
}

.WhoCanAttend .body .whoContainer .who .desc {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 40px;
    margin-left: -38px
}

.WhoCanAttend .body .whoContainer .who .tick {
    position: absolute;
    right: 0
}

@media (max-width: 1536px) {
    .WhoCanAttend .heading {
        width:65%;
        font-size: 52px
    }

    .WhoCanAttend .heading p {
        font-size: 22px
    }

    .WhoCanAttend .body {
        width: 65%;
        height: 580px;
        margin-top: 35px
    }

    .WhoCanAttend .body .whoContainer {
        padding-top: 8%
    }

    .WhoCanAttend .body .whoContainer .who {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        padding: 20px 0
    }

    .WhoCanAttend .body .whoContainer .who .number {
        font-size: 58px;
        left: -45px
    }

    .WhoCanAttend .body .whoContainer .who .desc {
        font-size: 22px;
        padding: 35px;
        margin-left: -30px
    }

    .WhoCanAttend .body .whoContainer .who .tick {
        right: 10px
    }
}

@media (max-width: 1440px) {
    .WhoCanAttend .heading {
        width:60%;
        font-size: 48px
    }

    .WhoCanAttend .heading p {
        font-size: 20px
    }

    .WhoCanAttend .body {
        width: 60%;
        height: 550px;
        margin-top: 30px
    }

    .WhoCanAttend .body .whoContainer {
        padding-top: 7%
    }

    .WhoCanAttend .body .whoContainer .who .number {
        font-size: 52px;
        left: -42px
    }

    .WhoCanAttend .body .whoContainer .who .desc {
        font-size: 20px;
        padding: 30px;
        margin-left: -28px
    }

    .WhoCanAttend .body .whoContainer .who .tick {
        right: 8px
    }
}

@media (max-width: 1280px) {
    .WhoCanAttend .heading {
        width:58%;
        font-size: 44px
    }

    .WhoCanAttend .heading p {
        font-size: 18px
    }

    .WhoCanAttend .body {
        width: 58%;
        height: 520px;
        margin-top: 25px
    }

    .WhoCanAttend .body .whoContainer {
        padding-top: 6%
    }

    .WhoCanAttend .body .whoContainer .who .number {
        font-size: 48px;
        left: -38px
    }

    .WhoCanAttend .body .whoContainer .who .desc {
        font-size: 18px;
        padding: 25px;
        margin-left: -24px
    }

    .WhoCanAttend .body .whoContainer .who .tick {
        right: 5px
    }
}

@media (max-width: 992px) {
    .WhoCanAttend .heading {
        width:90%;
        font-size: 38px
    }

    .WhoCanAttend .heading p {
        font-size: 16px
    }

    .WhoCanAttend .body {
        width: 90%;
        height: 480px;
        margin-top: 20px
    }

    .WhoCanAttend .body .whoContainer {
        padding-top: 5%
    }

    .WhoCanAttend .body .whoContainer .who {
        padding: 15px 0
    }

    .WhoCanAttend .body .whoContainer .who .number {
        font-size: 42px;
        left: -30px
    }

    .WhoCanAttend .body .whoContainer .who .desc {
        font-size: 16px;
        padding: 20px;
        margin-left: -20px
    }

    .WhoCanAttend .body .whoContainer .who .tick {
        right: 2px
    }
}

@media (max-width: 480px) {
    .WhoCanAttend {
        flex-direction:column
    }

    .WhoCanAttend .heading {
        width: 100%;
        font-size: 20px
    }

    .WhoCanAttend .heading p {
        font-size: 16px
    }

    .WhoCanAttend .body {
        width: 100%;
        height: 335px;
        background-size: cover;
        margin-top: 20px
    }

    .WhoCanAttend .body .whoContainer {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 13px
    }

    .WhoCanAttend .body .whoContainer .who {
        border-top: none;
        width: 90%
    }

    .WhoCanAttend .body .whoContainer .who .number {
        font-size: 40px;
        left: -40px
    }

    .WhoCanAttend .body .whoContainer .who .desc {
        font-size: 16px;
        width: 100%;
        padding: 15px 20px 15px 40px
    }
}

.WhyAttend {
    display: flex;
    align-items: center;
    background: var(--Burgundy-color, #821131);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    height: 574px
}

.WhyAttend .left {
    width: 50%
}

.WhyAttend .left .lhead {
    width: 50%;
    color: #f0af13;
    font-size: 56px;
    font-weight: 600
}

.WhyAttend .left .lbody {
    width: 85%;
    font-size: 24px;
    font-weight: 500
}

.WhyAttend .right {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 70px
}

.WhyAttend .right .WAEvent {
    flex-direction: column;
    align-items: start;
    text-align: left;
    display: flex;
    gap: 20px
}

.WhyAttend .right .WAEvent .image {
    width: 80px;
    height: 80px
}

.WhyAttend .right .WAEvent .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.WhyAttend .right .WAEvent .title {
    color: #f0af13;
    font-size: 24px;
    font-weight: 600
}

.WhyAttend .right .WAEvent .desc {
    width: 100%
}

.WhyAttend .right .WAEvent .desc p {
    font-size: 18px;
    font-weight: 500
}

@media (max-width: 1536px) {
    .WhyAttend {
        height:550px
    }

    .WhyAttend .left .lhead {
        width: 80%;
        font-size: 52px
    }

    .WhyAttend .left .lbody {
        font-size: 22px
    }

    .WhyAttend .right {
        gap: 60px
    }

    .WhyAttend .right .WAEvent {
        gap: 18px
    }

    .WhyAttend .right .WAEvent .image {
        width: 70px;
        height: 70px
    }

    .WhyAttend .right .WAEvent .title {
        font-size: 22px
    }

    .WhyAttend .right .WAEvent .desc p {
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .WhyAttend {
        height:530px
    }

    .WhyAttend .left .lhead {
        width: 75%;
        font-size: 48px
    }

    .WhyAttend .left .lbody {
        font-size: 20px
    }

    .WhyAttend .right {
        gap: 50px
    }

    .WhyAttend .right .WAEvent {
        gap: 16px
    }

    .WhyAttend .right .WAEvent .image {
        width: 60px;
        height: 60px
    }

    .WhyAttend .right .WAEvent .title {
        font-size: 20px
    }

    .WhyAttend .right .WAEvent .desc p {
        font-size: 14px
    }
}

@media (max-width: 1280px) {
    .WhyAttend {
        height:500px
    }

    .WhyAttend .left .lhead {
        width: 70%;
        font-size: 44px
    }

    .WhyAttend .left .lbody {
        font-size: 18px
    }

    .WhyAttend .right {
        gap: 40px
    }

    .WhyAttend .right .WAEvent {
        gap: 14px
    }

    .WhyAttend .right .WAEvent .image {
        width: 50px;
        height: 50px
    }

    .WhyAttend .right .WAEvent .title {
        font-size: 18px
    }

    .WhyAttend .right .WAEvent .desc p {
        font-size: 12px
    }
}

@media (max-width: 992px) {
    .WhyAttend {
        height:480px
    }

    .WhyAttend .left .lhead {
        width: 65%;
        font-size: 38px
    }

    .WhyAttend .left .lbody {
        font-size: 16px
    }

    .WhyAttend .right {
        gap: 32px
    }

    .WhyAttend .right .WAEvent {
        gap: 12px
    }

    .WhyAttend .right .WAEvent .image {
        width: 45px;
        height: 45px
    }

    .WhyAttend .right .WAEvent .title {
        font-size: 16px
    }

    .WhyAttend .right .WAEvent .desc p {
        font-size: 12px
    }
}

@media (max-width: 480px) {
    .WhyAttend {
        flex-direction:column;
        padding: 20px 16px 40px;
        height: 630px;
        gap: 28px
    }

    .WhyAttend .left {
        width: 100%
    }

    .WhyAttend .left .lhead {
        font-size: 20px
    }

    .WhyAttend .left .lbody {
        font-size: 16px;
        padding-top: 12px
    }

    .WhyAttend .right {
        gap: 8px;
        width: 100%;
        height: 326px
    }

    .WhyAttend .right .WAEvent {
        gap: 12px
    }

    .WhyAttend .right .WAEvent .image {
        width: 40px;
        height: 40px
    }

    .WhyAttend .right .WAEvent .title {
        font-size: 16px
    }

    .WhyAttend .right .WAEvent .desc p {
        font-size: 14px;
        font-weight: 400
    }
}

.student-enquiry-container .enquiry-form-container {
    padding: 4rem 6rem;
    border-radius: 1rem;
    max-width: 1440px;
    margin: 0 auto
}

.student-enquiry-container .enquiry-form-container .form-title {
    font-size: 3.5rem;
    font-weight: 600;
    color: #f0af13;
    line-height: normal;
    margin-bottom: 1.5rem
}

.student-enquiry-container .enquiry-form-container .form-description {
    font-size: 1.125rem;
    font-weight: 500;
    color: #d1d1d1;
    margin-bottom: 3rem;
    max-width: 40rem
}

.student-enquiry-container .enquiry-form-container .enquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

.student-enquiry-container .enquiry-form-container .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.student-enquiry-container .enquiry-form-container .enquiry-form .input-group label {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: -1rem
}

.student-enquiry-container .enquiry-form-container .enquiry-form .input-group .input-field {
    background-color: transparent;
    display: flex;
    height: 3.5rem;
    padding: .5rem 1.5rem;
    align-items: center;
    align-self: stretch;
    border-radius: .75rem;
    border: 1px solid rgba(243,243,243,.568627451);
    color: #f3f3f3
}

.student-enquiry-container .enquiry-form-container .enquiry-form .input-group .input-field::placeholder {
    color: #f3f3f3;
    opacity: 1
}

.student-enquiry-container .enquiry-form-container .enquiry-form .input-group textarea.input-field {
    height: 5rem;
    padding-top: 1rem
}

.student-enquiry-container .enquiry-form-container .enquiry-form select.input-field {
    color: #f3f3f3
}

.student-enquiry-container .enquiry-form-container .enquiry-form select.input-field option {
    color: #000
}

.student-enquiry-container .enquiry-form-container .enquiry-form input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    color: #d1d1d1;
    height: max-content
}

.student-enquiry-container .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;
    transition: all .3s ease
}

.student-enquiry-container .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;
    transition: opacity .3s ease
}

.student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
    opacity: 1
}

.student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
    background-color: #f3f3f3;
    border-color: #f3f3f3
}

.student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox label {
    font-size: 1rem;
    margin-left: .4rem
}

.student-enquiry-container .enquiry-form-container .image-container {
    display: flex;
    justify-content: flex-start;
    margin-left: 4rem
}

.student-enquiry-container .enquiry-form-container .image-container .enquiry-image {
    width: 20rem;
    height: 16rem;
    flex-shrink: 0
}

.student-enquiry-container .enquiry-form-container .animated-button {
    margin-top: -13rem;
    max-width: 17rem
}

@media (max-width: 1536px) {
    .student-enquiry-container .scrollup {
        width:62px;
        bottom: 28px
    }

    .student-enquiry-container .scrollup img {
        scale: .7
    }

    .student-enquiry-container .enquiry-form-container {
        padding: 3.5rem 5rem;
        max-width: 1400px
    }

    .student-enquiry-container .enquiry-form-container .form-title {
        font-size: 3.25rem
    }

    .student-enquiry-container .enquiry-form-container .form-description {
        font-size: 1.0625rem;
        max-width: 38rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form {
        gap: 1.25rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group {
        gap: 2rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group label {
        font-size: 1.0625rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group .input-field {
        height: 3.25rem;
        padding: .5rem 1.25rem;
        border-radius: .65rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4.75rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .95rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 1.1rem;
        height: 1.1rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .95rem
    }

    .student-enquiry-container .enquiry-form-container .image-container {
        margin-left: 3.5rem
    }

    .student-enquiry-container .enquiry-form-container .image-container .enquiry-image {
        width: 19rem;
        height: 15rem
    }

    .student-enquiry-container .enquiry-form-container .animated-button {
        max-width: 16rem
    }
}

@media (max-width: 1440px) {
    .student-enquiry-container .scrollup {
        width:58px;
        bottom: 24px
    }

    .student-enquiry-container .scrollup img {
        scale: .65
    }

    .student-enquiry-container .enquiry-form-container {
        padding: 3rem 4.5rem;
        max-width: 1200px
    }

    .student-enquiry-container .enquiry-form-container .form-title {
        font-size: 2.75rem
    }

    .student-enquiry-container .enquiry-form-container .form-description {
        font-size: 1rem;
        max-width: 36rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form {
        gap: 1.15rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group {
        gap: 1.75rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group label {
        font-size: 1rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group .input-field {
        height: 3rem;
        padding: .45rem 1.15rem;
        border-radius: .6rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4.5rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .9rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .9rem
    }

    .student-enquiry-container .enquiry-form-container .image-container {
        margin-left: 3rem
    }

    .student-enquiry-container .enquiry-form-container .image-container .enquiry-image {
        width: 17rem;
        height: 13rem
    }

    .student-enquiry-container .enquiry-form-container .animated-button {
        max-width: 14rem;
        margin-top: -10rem
    }
}

@media (max-width: 1280px) {
    .student-enquiry-container .scrollup {
        width:54px;
        bottom: 20px
    }

    .student-enquiry-container .scrollup img {
        scale: .6
    }

    .student-enquiry-container .enquiry-form-container {
        padding: 2.5rem 4rem;
        max-width: 1000px
    }

    .student-enquiry-container .enquiry-form-container .form-title {
        font-size: 2.5rem
    }

    .student-enquiry-container .enquiry-form-container .form-description {
        font-size: .95rem;
        max-width: 32rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form {
        gap: 1rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group {
        gap: 1.5rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group label {
        font-size: .95rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group .input-field {
        width: 100%;
        height: 2.75rem;
        font-size: 12px;
        padding: .4rem 1rem;
        border-radius: .55rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4.25rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .85rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: .95rem;
        height: .95rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .85rem
    }

    .student-enquiry-container .enquiry-form-container .image-container {
        margin-left: 2.5rem
    }

    .student-enquiry-container .enquiry-form-container .image-container .enquiry-image {
        width: 15rem;
        height: 12rem
    }

    .student-enquiry-container .enquiry-form-container .animated-button {
        max-width: 13rem;
        margin-top: -10rem
    }
}

@media (max-width: 480px) {
    .student-enquiry-container .enquiry-form-container {
        padding:2rem 1rem;
        margin: 0 auto;
        max-width: 100%
    }

    .student-enquiry-container .enquiry-form-container .form-title {
        font-size: 20px;
        margin-bottom: 1.25rem
    }

    .student-enquiry-container .enquiry-form-container .form-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        max-width: 100%
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form {
        display: flex;
        flex-direction: column;
        gap: .5rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: .8rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group label {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: .1rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group .input-field {
        height: 3rem;
        padding: .5rem 1rem;
        border-radius: .5rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4rem;
        padding-top: 1rem
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .875rem;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .student-enquiry-container .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
    }

    .student-enquiry-container .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
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
        opacity: 1
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
        background-color: #bc2329;
        border-color: #bc2329
    }

    .student-enquiry-container .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .875rem
    }

    .student-enquiry-container .enquiry-form-container .animated-button {
        margin-bottom: 16rem;
        margin-top: -20rem;
        max-width: 100%;
        font-size: 16px;
        width: 80%;
        height: auto
    }

    .student-enquiry-container .image-container {
        padding-top: 2rem;
        margin-top: 4rem!important;
        display: flex;
        justify-content: flex-start;
        margin-left: 0!important
    }

    .student-enquiry-container .image-container .enquiry-image {
        width: 290px!important;
        height: 241px!important
    }
}

.subfooter {
    position: relative;
    z-index: 3;
    background-color: #821131;
    padding: 3.9375rem 4rem 4.375rem 5rem
}

.subfooter .container {
    display: flex;
    gap: 5rem;
    margin: 0 auto
}

.subfooter .subfooter-left {
    width: 26vw;
    display: flex;
    flex-direction: column;
    gap: 1.75rem
}

.subfooter .subfooter-left .logo {
    width: 11rem;
    height: 4.25rem
}

.subfooter .subfooter-left .description {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.subfooter .subfooter-middle {
    display: flex;
    gap: 5rem
}

.subfooter .subfooter-middle .column {
    display: flex;
    flex-direction: column;
    gap: 1.75rem
}

.subfooter .subfooter-middle .column p {
    margin: 0
}

.subfooter .subfooter-middle .column p a {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    color: #fff
}

.subfooter .subfooter-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-self: end;
    align-items: self-start;
    justify-content: center
}

.subfooter .subfooter-right .subscribe-title {
    text-align: center;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.subfooter .subfooter-right .button-group {
    display: flex;
    gap: 1rem
}

.subfooter .subfooter-right .button-group .animated-button {
    position: relative;
    padding: .75rem 6rem
}

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

    .subfooter .container {
        gap: 6rem;
        max-width: 1400px
    }

    .subfooter .subfooter-left {
        width: 24rem;
        gap: 1.5rem
    }

    .subfooter .subfooter-left .logo {
        width: 10rem;
        height: 4rem
    }

    .subfooter .subfooter-left .description {
        font-size: 1.0625rem
    }

    .subfooter .subfooter-middle {
        gap: 4rem
    }

    .subfooter .subfooter-middle .column {
        gap: 1.5rem
    }

    .subfooter .subfooter-middle .column p a {
        font-size: 1rem
    }

    .subfooter .subfooter-right {
        gap: 1.5rem
    }

    .subfooter .subfooter-right .subscribe-title {
        font-size: 1.25rem
    }

    .subfooter .subfooter-right .button-group {
        gap: 1.5rem
    }

    .subfooter .subfooter-right .button-group .animated-button {
        padding: 0 2.5vw
    }
}

@media (max-width: 1440px) {
    .subfooter {
        padding:3.5rem 3rem 4rem 4rem
    }

    .subfooter .container {
        gap: 4rem
    }

    .subfooter .subfooter-left {
        width: 30vw;
        gap: 1.5rem
    }

    .subfooter .subfooter-left .logo {
        width: 10rem;
        height: 3.75rem
    }

    .subfooter .subfooter-left .description {
        font-size: 1rem
    }

    .subfooter .subfooter-middle {
        gap: 2rem
    }

    .subfooter .subfooter-middle .column {
        gap: 1rem
    }

    .subfooter .subfooter-middle .column p a {
        font-size: 1rem
    }

    .subfooter .subfooter-right {
        gap: 1.75rem
    }

    .subfooter .subfooter-right .subscribe-title {
        font-size: 1.5rem
    }

    .subfooter .subfooter-right .button-group {
        gap: .75rem
    }

    .subfooter .subfooter-right .button-group .animated-button {
        padding: .7rem 5rem
    }
}

@media (max-width: 1280px) {
    .subfooter {
        padding:3rem 2.5rem 3.5rem 3rem
    }

    .subfooter .container {
        gap: 3rem
    }

    .subfooter .subfooter-left {
        width: 40%
    }

    .subfooter .subfooter-left .logo {
        width: 9rem;
        height: 3.25rem
    }

    .subfooter .subfooter-left .description {
        font-size: .95rem;
        max-width: 20rem
    }

    .subfooter .subfooter-middle {
        gap: 2rem
    }

    .subfooter .subfooter-middle .column {
        gap: 1.25rem
    }

    .subfooter .subfooter-middle .column p a {
        font-size: .8rem
    }

    .subfooter .subfooter-right {
        gap: 1.5rem
    }

    .subfooter .subfooter-right .subscribe-title {
        font-size: 1rem
    }

    .subfooter .subfooter-right .button-group {
        gap: .75rem
    }

    .subfooter .subfooter-right .button-group .animated-button {
        padding: .7rem 2rem
    }
}

@media (max-width: 992px) {
    .subfooter {
        padding:2rem 3rem 2.5rem
    }

    .subfooter .container {
        gap: 2.5rem;
        max-width: 900px;
        margin: 0 auto
    }

    .subfooter .subfooter-left {
        width: 22vw;
        gap: 1rem
    }

    .subfooter .subfooter-left .logo {
        width: 8rem;
        height: 3rem
    }

    .subfooter .subfooter-left .description {
        font-size: .9rem
    }

    .subfooter .subfooter-middle,.subfooter .subfooter-middle .column {
        gap: 1rem
    }

    .subfooter .subfooter-middle .column p a {
        font-size: .9rem
    }

    .subfooter .subfooter-right {
        gap: 1rem
    }

    .subfooter .subfooter-right .subscribe-title {
        font-size: 1rem
    }

    .subfooter .subfooter-right .button-group {
        gap: .5rem
    }

    .subfooter .subfooter-right .button-group .animated-button {
        padding: .6rem 2.5rem;
        font-size: .9rem
    }
}

@media (max-width: 480px) {
    .subfooter {
        padding:2.5rem 1rem
    }

    .subfooter .container {
        flex-direction: column;
        gap: 2rem;
        text-align: left
    }

    .subfooter .subfooter-left {
        width: 100%
    }

    .subfooter .subfooter-left .logo {
        width: 10rem;
        height: auto;
        margin: 0
    }

    .subfooter .subfooter-left .description {
        font-size: 14px
    }

    .subfooter .subfooter-middle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(1,1fr);
        gap: 1.5rem;
        width: 100%;
        text-align: left
    }

    .subfooter .subfooter-middle .column {
        display: flex;
        flex-direction: column;
        gap: 1rem
    }

    .subfooter .subfooter-middle .column p {
        margin: 0
    }

    .subfooter .subfooter-middle .column p a {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-decoration: none;
        color: #fff
    }

    .subfooter .subfooter-right {
        margin-left: 0;
        align-items: start
    }

    .subfooter .subfooter-right .subscribe-title {
        font-size: 1rem;
        text-align: left
    }

    .subfooter .subfooter-right .button-group {
        gap: 1rem;
        margin-left: 0
    }

    .subfooter .subfooter-right .button-group .animated-button {
        padding: 0 10.6vw;
        font-size: 14px
    }
}

.footer {
    position: relative;
    z-index: 3;
    padding: 1.5rem 0rem;
    background-color: #c7253e;
    display: flex;
    flex-direction: column;
    align-items: center
}

.footer .footer-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1740px
}

.footer .footer-left {
    width: 22rem
}

.footer .footer-left p {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: .875rem
}

.footer .footer-left .footer-social-icons {
    display: flex;
    gap: .875rem
}

.footer .footer-left .footer-social-icons a {
    color: #fff;
    font-size: 1.75rem;
    text-decoration: none
}

.footer .footer-left .footer-social-icons a:hover {
    opacity: .8
}

.footer .footer-right {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 4.5rem
}

.footer .footer-copyright {
    margin-top: 3rem;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    letter-spacing: .01rem;
    text-align: center
}

.footer .stamp img {
    max-width: 90px
}

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

    .footer .footer-content {
        max-width: 1400px
    }

    .footer .footer-left {
        width: 20rem
    }

    .footer .footer-left p {
        font-size: 1.0625rem;
        margin-bottom: .75rem
    }

    .footer .footer-left .footer-social-icons {
        gap: .75rem
    }

    .footer .footer-left .footer-social-icons a {
        font-size: 1.625rem
    }

    .footer .footer-right {
        font-size: 1.0625rem;
        margin-bottom: 4rem
    }

    .footer .footer-copyright {
        font-size: 1.0625rem;
        line-height: 1.65rem
    }
}

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

    .footer .footer-content {
        max-width: 1280px
    }

    .footer .footer-left {
        width: 18rem
    }

    .footer .footer-left p {
        font-size: 1rem;
        margin-bottom: .7rem
    }

    .footer .footer-left .footer-social-icons {
        gap: .6rem
    }

    .footer .footer-left .footer-social-icons a {
        font-size: 1.5rem
    }

    .footer .footer-right {
        font-size: 1rem;
        margin-bottom: 3.5rem
    }

    .footer .footer-copyright {
        font-size: 1rem;
        line-height: 1.6rem
    }
}

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

    .footer .footer-content {
        max-width: 1150px
    }

    .footer .footer-left {
        width: 17rem
    }

    .footer .footer-left p {
        font-size: .95rem;
        margin-bottom: .65rem
    }

    .footer .footer-left .footer-social-icons {
        gap: .5rem
    }

    .footer .footer-left .footer-social-icons a {
        font-size: 1.4rem
    }

    .footer .footer-right {
        font-size: .95rem;
        margin-bottom: 3rem
    }

    .footer .footer-copyright {
        font-size: .95rem;
        line-height: 1.5rem
    }
}

@media (max-width: 992px) {
    .footer {
        padding:.75rem 0
    }

    .footer .footer-content {
        max-width: 900px;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .footer .footer-left {
        width: 14rem
    }

    .footer .footer-left p {
        font-size: .85rem;
        margin-bottom: .5rem
    }

    .footer .footer-left .footer-social-icons {
        gap: .4rem
    }

    .footer .footer-left .footer-social-icons a {
        font-size: 1.1rem
    }

    .footer .footer-right {
        font-size: .85rem;
        margin-bottom: 2rem
    }

    .footer .footer-copyright {
        margin-top: 1.5rem;
        font-size: .85rem;
        line-height: 1.25rem;
        text-align: center
    }
}

@media (max-width: 480px) {
    .footer {
        padding:2rem 1.5rem;
        text-align: center
    }

    .footer .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .footer .footer-left {
        width: 100%;
        margin-bottom: 2rem
    }

    .footer .footer-left p {
        font-size: 14px
    }

    .footer .footer-left .footer-social-icons {
        justify-content: center
    }

    .footer .footer-right {
        font-size: 14px;
        margin-top: 1rem;
        margin-bottom: -1rem
    }

    .footer .footer-copyright {
        font-size: 12px;
        line-height: 1.5rem
    }
}

.partnerBoom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4.16vw 0
}

.partnerBoom .pbLeft {
    width: 55%
}

.partnerBoom .pbLeft .heading span {
    color: #fff;
    display: block
}

.partnerBoom .pbLeft .color-box {
    width: 100%;
    background-color: #fabc3f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2.08vw 6.25vw 2.08vw 2.08vw;
    z-index: 2;
    margin-top: 10%
}

.partnerBoom .pbLeft .color-box p {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.04vw
}

.partnerBoom .pbRight {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.partnerBoom .pbRight .top-img,.partnerBoom .pbRight .bottom-img {
    width: 3.64vw;
    position: absolute
}

.partnerBoom .pbRight .top-img {
    top: -3.12vw;
    left: -3.12vw
}

.partnerBoom .pbRight .bottom-img {
    bottom: -3.12vw;
    right: 1.04vw
}

.partnerBoom .pbRight .image-box {
    display: flex;
    gap: 1.04vw;
    position: relative
}

.partnerBoom .pbRight .image-box img {
    width: 19.99vw;
    height: 76.05vh;
    object-fit: cover
}

.partnerBoom .pbRight .image-box img:first-child {
    position: absolute;
    right: 12.5vw;
    top: -5.6vh;
    z-index: -1
}

.partnerBoom .pbRight .image-box img:last-child {
    position: relative;
    top: 5.63vh;
    left: 8.33vw
}

@media (max-width: 992px) {
    .partnerBoom {
        margin:2vw 0
    }

    .partnerBoom .pbLeft {
        width: 50%
    }

    .partnerBoom .pbRight .top-img,.partnerBoom .pbRight .bottom-img {
        width: 8vw
    }

    .partnerBoom .pbRight .top-img {
        top: -4.5vw;
        left: -5
    }

    .partnerBoom .pbRight .bottom-img {
        bottom: -4.5vw;
        right: 1.5vw
    }
}

@media (max-width: 480px) {
    .partnerBoom {
        display:flex;
        flex-direction: column;
        margin: 0;
        padding: 0
    }

    .partnerBoom .pbLeft {
        width: 100%
    }

    .partnerBoom .pbLeft .heading {
        padding: 20px 16px 0;
        font-size: 20px
    }

    .partnerBoom .pbLeft .color-box {
        width: 100%;
        margin-top: 5%;
        padding: 20px 16px
    }

    .partnerBoom .pbLeft .color-box p {
        font-size: 14px;
        padding-bottom: 2%
    }

    .partnerBoom .pbRight {
        padding: 20px
    }

    .partnerBoom .pbRight .top-img,.partnerBoom .pbRight .bottom-img {
        width: 10.64vw
    }

    .partnerBoom .pbRight .top-img {
        top: 3.6vw;
        left: -20.12vw
    }

    .partnerBoom .pbRight .bottom-img {
        bottom: 9.12vw;
        right: -22.04vw
    }

    .partnerBoom .pbRight .image-box {
        padding: 20px 0
    }

    .partnerBoom .pbRight .image-box img {
        width: 153px;
        height: 311px
    }

    .partnerBoom .pbRight .image-box img:first-child {
        left: -80px;
        top: 0
    }

    .partnerBoom .pbRight .image-box img:last-child {
        left: 80px;
        top: 0
    }
}

.partnerCTA {
    background: linear-gradient(0deg,#000c,#000c),url(../assets/CTA-CI6m4wRx.webp) #d3d3d3 -15.637px -375.836px/101.392% 391.946% no-repeat
}

.partnerCTA h1 {
    color: #f0af13;
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.85vh
}

.partnerCTA p {
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 3.7vh
}

@media (max-width: 480px) {
    .partnerCTA {
        background:linear-gradient(0deg,#000000a6,#000000a6),url(../assets//CTA.jpeg) #d3d3d3 50%/cover no-repeat;
        height: 220px;
        padding: 40px 16px
    }

    .partnerCTA h1 {
        font-size: 20px
    }

    .partnerCTA p {
        font-size: 16px
    }

    .partnerCTA .patnerCTA-button .animated-button {
        font-size: 14px;
        padding: 0 40px
    }
}

.partnerForm {
    padding: 1.5rem
}

.partnerForm .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
}

.partnerForm .pos-rel {
    position: relative
}

.partnerForm .input-amt {
    margin-top: 10px;
    width: 100%
}

.partnerForm .amt-txt {
    position: absolute;
    width: 100%;
    bottom: -20px;
    left: 0;
    color: #fff;
    font-size: .7rem;
    font-style: italic;
    font-weight: 500
}

.partnerForm .enquiry-form-container {
    max-width: 1260px;
    margin: 0 auto 45px
}

.partnerForm .enquiry-form-container #state,.partnerForm .enquiry-form-container #city {
    text-transform: uppercase
}

.partnerForm .enquiry-form-container #state option:first-child,.partnerForm .enquiry-form-container #city option:first-child {
    text-transform: capitalize
}

.partnerForm .enquiry-form-container .input-field::placeholder {
    color: #d1d1d1;
    opacity: 1
}

.partnerForm .enquiry-form-container .input-field {
    color: #d1d1d1;
    padding-right: 1.5rem
}

.partnerForm .enquiry-form-container select.input-field {
    color: #d1d1d1
}

.partnerForm .enquiry-form-container select.input-field option {
    color: #000;
    text-transform: uppercase
}

.partnerForm .enquiry-form-container .form-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #f0af13;
    line-height: normal;
    margin-bottom: 1rem
}

.partnerForm .enquiry-form-container .form-description {
    font-size: 1.125rem;
    font-weight: 500;
    color: #d1d1d1;
    margin-bottom: 3rem
}

.partnerForm .enquiry-form-container .enquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

.partnerForm .enquiry-form-container .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.partnerForm .enquiry-form-container .enquiry-form .input-group label {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: -1rem
}

.partnerForm .enquiry-form-container .enquiry-form .input-group .input-field {
    background-color: transparent;
    display: flex;
    height: 3.5rem;
    padding: .5rem 1.5rem;
    align-items: center;
    align-self: stretch;
    border-radius: .75rem;
    border: 1px solid rgba(243,243,243,.568627451)
}

.partnerForm .enquiry-form-container .enquiry-form .input-group textarea.input-field {
    height: 5rem;
    padding-top: 1rem
}

.partnerForm .enquiry-form-container .enquiry-form input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    color: #d1d1d1;
    margin-top: -10rem
}

.partnerForm .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;
    transition: all .3s ease
}

.partnerForm .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;
    transition: opacity .3s ease
}

.partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
    opacity: 1
}

.partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
    background-color: #f3f3f3;
    border-color: #f3f3f3
}

.partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox label {
    font-size: 1rem;
    margin-left: .4rem
}

.partnerForm .enquiry-form-container .enquiry-form .input-group-otp {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.partnerForm .enquiry-form-container .enquiry-form .input-group-otp label {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 0rem
}

.partnerForm .enquiry-form-container .enquiry-form .input-group-otp .input-field {
    background-color: transparent;
    display: flex;
    height: 3.5rem;
    padding: .5rem 1.5rem;
    align-items: center;
    align-self: stretch;
    border-radius: .75rem;
    border: 1px solid rgba(243,243,243,.568627451)
}

.partnerForm .enquiry-form-container .enquiry-form .verify {
    font-size: .9rem;
    text-align: lef
}

.partnerForm .enquiry-form-container .enquiry-form .otp {
    font-size: 16px;
    color: #bc2329
}

.partnerForm .enquiry-form-container .image-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 2rem
}

.partnerForm .enquiry-form-container .image-container .enquiry-image {
    width: 20rem;
    height: 16rem;
    flex-shrink: 0
}

.partnerForm .enquiry-form-container .animated-button {
    margin-top: 0rem;
    max-width: 20rem;
    padding: 0 80px
}

.partnerForm .enquiry-form-container label.privacy-label {
    font-size: .9rem!important;
    margin-bottom: .5rem!important;
    font-style: italic
}

.partnerForm .enquiry-form-container label.privacy-label a {
    text-decoration: underline
}

.partnerForm .enquiry-form-container label.privacy-label a:hover {
    text-decoration: none
}

.partnerForm .scrollup {
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    scale: .7;
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 1%;
    width: 5%;
    border: 1px solid white;
    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)
    }
}

.mt-15 {
    margin-top: 15px
}

@media (max-width: 992px) {
    .partnerForm .enquiry-form-container {
        padding:1rem 0rem;
        max-width: 992px;
        margin-bottom: 15px
    }

    .partnerForm .enquiry-form-container .form-title {
        font-size: 2rem;
        text-align: left
    }

    .partnerForm .enquiry-form-container .form-description {
        text-align: left
    }

    .partnerForm .enquiry-form-container .enquiry-form {
        gap: 1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group {
        gap: 1.5rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group label {
        font-size: 1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group .input-field {
        height: 3rem;
        padding: .5rem 1.25rem;
        border-radius: .5rem;
        font-size: .95rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4.25rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .875rem;
        margin-top: -11rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .875rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group-otp label {
        font-size: 1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group-otp .input-field {
        height: 3rem;
        padding: .5rem 1.25rem;
        border-radius: .5rem;
        font-size: .95rem
    }

    .partnerForm .enquiry-form-container .image-container .enquiry-image {
        width: 17rem;
        height: 13.5rem
    }

    .partnerForm .enquiry-form-container .animated-button {
        max-width: 14rem;
        padding: 0 60px
    }
}

@media (max-width: 767px) {
    .partnerForm .enquiry-form-container {
        padding:1rem 0rem;
        margin: 0 auto;
        max-width: 100%
    }

    .partnerForm .enquiry-form-container .form-description {
        margin-bottom: 2rem
    }

    .partnerForm .enquiry-form-container .enquiry-form {
        display: flex;
        flex-direction: column;
        gap: 1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-amt {
        margin-top: 5px
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group {
        display: flex;
        flex-direction: column;
        gap: .8rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group label {
        font-size: .9rem;
        margin-bottom: -.5rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group .input-field {
        padding: .5rem .75rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 4rem;
        padding-top: 1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group-otp {
        display: flex;
        flex-direction: column
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group-otp label {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.1rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .input-group-otp .input-field {
        height: 3rem;
        padding: .5rem 1rem;
        border-radius: .5rem
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .875rem;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .partnerForm .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
    }

    .partnerForm .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
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
        opacity: 1
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
        background-color: #bc2329;
        border-color: #bc2329
    }

    .partnerForm .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .875rem
    }

    .partnerForm .enquiry-form-container .animated-button {
        max-width: 100%;
        font-size: 1.25rem;
        width: 80%;
        height: auto;
        padding: 12px 26px;
        margin: 0 auto
    }

    .partnerForm .image-container {
        padding-top: 2rem;
        display: flex;
        justify-content: flex-start;
        margin: 0 auto
    }

    .partnerForm .image-container .enquiry-image {
        width: 290px;
        height: auto
    }

    .partnerForm .scrollup {
        width: 16vw;
        padding: 2%;
        right: 6%;
        bottom: 16%;
        scale: .5
    }

    .mb-15 {
        margin-bottom: 15px
    }
}

.partnerFranchisee .heading {
    font-weight: 500
}

.partnerFranchisee .partnerFranchiseeContainer {
    display: flex;
    justify-content: center;
    gap: 2vw;
    padding-top: 6vh
}

.partnerFranchisee .partnerFranchiseeContainer .franchiseeBox {
    width: 35vw;
    height: 50vh;
    border-radius: 10px;
    background: #821131;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative
}

.partnerFranchisee .partnerFranchiseeContainer .franchiseeBox img {
    width: 100%;
    height: auto;
    margin-bottom: 2vh;
    position: absolute
}

.partnerFranchisee .partnerFranchiseeContainer .franchiseeBox p {
    position: absolute;
    bottom: 5vh;
    font-size: 1vw;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    width: 80%;
    left: 3vw
}

.partnerFranchisee .partnerFranchiseeContainer .franchiseeBox:nth-child(1) img {
    width: 85%;
    height: auto;
    left: 0;
    top: 0
}

.partnerFranchisee .partnerFranchiseeContainer .franchiseeBox:nth-child(2) img {
    width: 85%;
    height: auto;
    top: 5vh
}

.partnerFranchisee .partnerFranchiseeContainer .franchiseeBox:nth-child(3) img {
    top: 6vh;
    width: 55%;
    height: auto
}

@media (max-width: 992px) {
    .partnerFranchisee .partnerFranchiseeContainer {
        gap:1vw;
        padding-top: 3vh
    }

    .partnerFranchisee .partnerFranchiseeContainer .franchiseeBox {
        height: 36vh;
        border-radius: 6px
    }

    .partnerFranchisee .partnerFranchiseeContainer .franchiseeBox img {
        margin-bottom: 1vh;
        position: absolute
    }
}

@media (max-width: 480px) {
    .partnerFranchisee .heading {
        font-size:20px
    }

    .partnerFranchisee .partnerFranchiseeContainer {
        display: flex;
        flex-direction: column;
        padding-top: 4%
    }

    .partnerFranchisee .partnerFranchiseeContainer .franchiseeBox {
        width: 100%;
        height: 48vh
    }

    .partnerFranchisee .partnerFranchiseeContainer .franchiseeBox img {
        margin-bottom: 0
    }

    .partnerFranchisee .partnerFranchiseeContainer .franchiseeBox p {
        font-size: 4.27vw
    }
}

.partnerHero {
    background: linear-gradient(0deg,#000000a6,#000000a6),url(../assets/hero-DX93PJJH.webp) #d3d3d3 0px -584.832px/100% 308.187% no-repeat;
    height: 51vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.partnerHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width: 992px) {
    .partnerHero {
        height:40vh
    }

    .partnerHero h1 {
        font-size: 5vw;
        text-shadow: 0px .3vh .3vh rgba(0,0,0,.25)
    }
}

@media (max-width: 480px) {
    .partnerHero {
        background:linear-gradient(0deg,#000000a6,#000000a6),url(../assets//hero.jpeg) #d3d3d3 0px -17.037px/100% 107.7% no-repeat;
        height: 233px
    }

    .partnerHero h1 {
        font-size: 20px
    }
}

.partnerLead {
    padding: 0
}

.partnerLead .heading {
    padding: 3.4% 6.25% 0
}

.partnerLead .controls {
    display: flex;
    margin-top: 2vw;
    gap: 2vw;
    margin-bottom: 2vh;
    padding: 0 0 0 6.25vw
}

.partnerLead .controls button {
    background: none;
    border: .15vw solid #fabc3f;
    color: #fabc3f;
    padding: 1.2vw;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2vw;
    justify-self: start
}

.partnerLead .controls button:active {
    color: #000;
    background-color: #fabc3f
}

.partnerLead .controls button:disabled {
    opacity: .4;
    cursor: not-allowed
}

.partnerLead .cards-container {
    display: flex;
    justify-content: flex-end;
    gap: 2vw;
    margin-top: 5vh;
    width: 100%
}

.partnerLead .cards-container .card {
    background: #bc2329;
    color: #fff;
    padding: 2vw 1.5vw;
    border-radius: .8vw;
    width: 23.5vw;
    height: 15.1vw;
    box-shadow: 0 .4vw .8vw #0000004d
}

.partnerLead .cards-container .card h3 {
    font-size: 1.5vw;
    color: #f0af13;
    margin-bottom: 2vh
}

.partnerLead .cards-container .card p {
    font-size: 1.1vw;
    line-height: 1.5
}

.partnerLead .progress-bar {
    width: 90%;
    height: 1vh;
    background: #d9d9d980;
    margin: 2vh auto;
    position: relative;
    border-radius: .5vw;
    justify-self: start
}

.partnerLead .progress-bar .progress {
    height: 100%;
    background: #dc143c;
    width: 0%;
    border-radius: .5vw;
    transition: width .4s ease-in-out
}

.partnerLead .source {
    font-size: 1.25vw;
    color: #ddd;
    text-align: center;
    padding: 3vh 0;
    margin-left: -8vw
}

.partnerLead .source a {
    text-decoration: underline
}

@media (max-width: 480px) {
    .partnerLead .heading {
        font-size:20px
    }

    .partnerLead .controls button {
        padding: .6rem;
        font-size: 12px
    }

    .partnerLead .cards-container {
        margin-top: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 4vw;
        padding: 3vw 2vw
    }

    .partnerLead .cards-container::-webkit-scrollbar {
        display: none
    }

    .partnerLead .cards-container .card {
        flex: 0 0 75vw;
        width: 293px;
        height: 190px
    }

    .partnerLead .cards-container .card h3 {
        font-size: 18px
    }

    .partnerLead .cards-container .card p {
        font-size: 16px
    }

    .partnerLead .source {
        margin-left: 0;
        text-align: left;
        font-size: 14px;
        padding-left: 2%
    }
}

.partnerWho {
    margin-bottom: 12vh
}

.partnerWho .title {
    margin-top: 1.6vh
}

.partnerWho .partnerWho-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw
}

.partnerWho .partnerWho-container .p-left {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15vh 0
}

.partnerWho .partnerWho-container .p-left .pshape1 {
    width: 12.8vw;
    height: 80vh;
    background-color: #770006;
    left: -4vw;
    bottom: -17vh;
    position: absolute
}

.partnerWho .partnerWho-container .p-left .pshape2 {
    position: absolute;
    width: 9vw;
    height: 60vh;
    transform: rotate(90deg);
    background-color: #fabc3f;
    bottom: 18vh;
    right: 10vw
}

.partnerWho .partnerWho-container .p-left .pshape3 {
    position: absolute;
    width: 10vw;
    height: 55vh;
    background-color: #821131;
    bottom: -10vh;
    left: 20vw
}

.partnerWho .partnerWho-container .p-left .lImg {
    width: 36vw;
    height: auto;
    z-index: 2
}

.partnerWho .partnerWho-container .p-right {
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 4vh;
    column-gap: 1vw
}

.partnerWho .partnerWho-container .p-right .partner-box {
    background: #ffffff1a;
    padding: 3vh 2vw;
    border-radius: .5vw;
    font-size: 1.1vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2)
}

.partnerWho .partnerWho-container .cta-text-mobile {
    display: none
}

.partnerWho .cta-text {
    justify-self: end;
    font-size: 1vw;
    color: #fabc3f;
    margin-top: -18vh;
    margin-right: 13.5vw
}

@media (max-width: 1440px) {
    .partnerWho .partnerWho-container .p-left .pshape1 {
        width:10vw;
        height: 70vh
    }

    .partnerWho .partnerWho-container .p-left .pshape2 {
        width: 7.5vw;
        height: 50vh
    }

    .partnerWho .partnerWho-container .p-left .pshape3 {
        width: 8.5vw;
        height: 45vh;
        left: 20vh
    }
}

@media (max-width: 1280px) {
    .partnerWho .partnerWho-container .p-left .pshape1 {
        width:8.5vw;
        height: 65vh
    }

    .partnerWho .partnerWho-container .p-left .pshape2 {
        width: 8vw;
        height: 55vh;
        bottom: 10vh;
        right: 20vh
    }

    .partnerWho .partnerWho-container .p-left .pshape3 {
        width: 8vw;
        height: 38vh;
        left: 15vh
    }
}

@media (max-width: 992px) {
    .partnerWho {
        margin-bottom:6vh
    }

    .partnerWho .title {
        margin-top: 1vh;
        font-size: 2vw
    }

    .partnerWho .partnerWho-container {
        gap: 2vw
    }

    .partnerWho .partnerWho-container .p-left {
        width: 48%;
        margin: 10vh 0
    }

    .partnerWho .partnerWho-container .p-left .pshape1 {
        width: 8vw;
        height: 45vh;
        left: -3vw;
        bottom: -12vh
    }

    .partnerWho .partnerWho-container .p-left .pshape2 {
        width: 6vw;
        height: 40vh;
        bottom: 5vh;
        right: 7vw;
        transform: rotate(90deg)
    }

    .partnerWho .partnerWho-container .p-left .pshape3 {
        width: 6vw;
        height: 30vh;
        bottom: -8vh;
        left: 14vw
    }

    .partnerWho .partnerWho-container .p-left .lImg {
        width: 30vw;
        height: auto;
        z-index: 2
    }

    .partnerWho .partnerWho-container .p-right {
        width: 48%;
        grid-template-columns: repeat(2,1fr);
        row-gap: 3vh;
        column-gap: 1vw
    }

    .partnerWho .partnerWho-container .p-right .partner-box {
        font-size: .9vw;
        padding: 2vh 1vw;
        border-radius: .4vw;
        border: 1px solid rgba(255,255,255,.15)
    }

    .partnerWho .partnerWho-container .cta-text-mobile {
        display: none
    }

    .partnerWho .cta-text {
        font-size: 1.2vw;
        margin-top: -12vh;
        margin-right: 9vw
    }
}

@media (max-width: 480px) {
    .partnerWho {
        margin-bottom:2%
    }

    .partnerWho .heading {
        font-size: 20px
    }

    .partnerWho .title {
        font-size: 16px
    }

    .partnerWho .partnerWho-container {
        display: flex;
        flex-direction: column
    }

    .partnerWho .partnerWho-container .p-left {
        width: 100%;
        margin-top: 50%
    }

    .partnerWho .partnerWho-container .p-left .pshape1 {
        width: 97.442px;
        height: 272.206px
    }

    .partnerWho .partnerWho-container .p-left .pshape2 {
        width: 75.744px;
        height: 228.417px;
        bottom: -10px;
        left: 52vw
    }

    .partnerWho .partnerWho-container .p-left .pshape3 {
        width: 75.744px;
        height: 200.765px;
        bottom: -100px;
        left: 120px
    }

    .partnerWho .partnerWho-container .p-left .lImg {
        position: absolute;
        width: 307.317px;
        height: 181.076px;
        margin: -2% 10% 10%
    }

    .partnerWho .partnerWho-container .p-right {
        margin-top: 2%;
        width: 100%;
        grid-template-columns: repeat(1,1fr);
        row-gap: 10px
    }

    .partnerWho .partnerWho-container .p-right .partner-box {
        font-size: 16px
    }

    .partnerWho .partnerWho-container .cta-text-mobile {
        font-size: 16px;
        color: #fabc3f;
        display: block;
        width: 100%
    }

    .partnerWho .cta-text {
        display: none
    }
}

.partnerWhyCTA {
    background: linear-gradient(0deg,#000000a6,#000000a6),url(../assets/whyCTA-29EFp-4a.webp) #d3d3d3 50%/cover no-repeat;
    height: 50.31vh
}

.partnerWhyCTA h1 {
    color: #f0af13;
    font-size: 2.92vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.85vh
}

.partnerWhyCTA p {
    font-size: 1.25vw;
    width: 60%;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 3.7vh
}

.partnerWhyCTA .patnerWhyCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff;
    padding: 0 2.6vw
}

.partnerWhyCTA .patnerWhyCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 480px) {
    .partnerWhyCTA {
        height:292px
    }

    .partnerWhyCTA h1 {
        font-size: 20px
    }

    .partnerWhyCTA p {
        width: 100%;
        font-size: 16px
    }

    .partnerWhyCTA .patnerWhyCTA-button .animated-button {
        font-size: 14px;
        padding: 0 46px
    }
}

.avgc-banner {
    background: radial-gradient(circle at right,#2b1b00,#000);
    color: #fff;
    padding: 0rem 1.5rem
}

@media (min-width: 768px) {
    .avgc-banner {
        padding:3rem 1.5rem
    }
}

.avgc-banner .avgc-header {
    margin: 2.5rem auto;
    max-width: 1260px
}

.avgc-banner .avgc-header h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left
}

.avgc-banner .avgc-header h2 .highlight {
    color: #fc0
}

@media (min-width: 768px) {
    .avgc-banner .avgc-header h2 {
        font-size:2.5rem
    }
}

.avgc-banner .avgc-header .quote {
    font-size: 1.2rem;
    font-style: italic;
    color: #d1d5db;
    margin-bottom: .5rem
}

.avgc-banner .avgc-header .author {
    font-size: .9rem;
    color: #aaa;
    text-align: center
}

.avgc-banner .avgc-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto
}

@media (min-width: 992px) {
    .avgc-banner .avgc-container {
        grid-template-columns:450px 1fr;
        align-items: center
    }
}

.avgc-banner .avgc-image {
    position: relative;
    display: inline-block
}

.avgc-banner .avgc-image img {
    width: 100%;
    border-radius: 0;
    display: block
}

.avgc-banner .avgc-image .corner {
    position: absolute;
    width: 20%;
    height: 30%
}

.avgc-banner .avgc-image .corner.top-left {
    top: -9px;
    left: -9px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 0rem;
    border-top: 3px solid #BC2329;
    border-left: 3px solid #F0AF13
}

.avgc-banner .avgc-image .corner.bottom-right {
    bottom: -9px;
    right: -9px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 0rem;
    border-right: 3px solid #F0AF13;
    border-bottom: 3px solid #BC2329
}

.avgc-banner .avgc-content ul {
    list-style: none;
    padding: 0
}

.avgc-banner .avgc-content ul li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.5rem
}

.avgc-banner .avgc-content ul li .bullet {
    color: #c7253e;
    font-size: 1.2rem;
    line-height: 1.2
}

.avgc-banner .avgc-content ul li p {
    margin: 0;
    font-size: 1rem
}

.avgc-banner .avgc-content ul li p .highlight {
    color: #fc0;
    font-weight: 600
}

.avgc-banner .avgc-content ul li p .bold {
    font-weight: 600
}

@media (min-width: 992px) {
    .avgc-banner .avgc-content ul li p {
        font-size:1.35rem
    }
}

.avgc-banner .avgc-content .cta-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #facc15;
    color: #000;
    font-weight: 600;
    padding: .9rem 1.6rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: background .3s ease;
    width: fit-content;
    font-size: 1rem;
    margin-top: 1rem
}

.avgc-banner .avgc-content .cta-button:hover {
    background: #fbbf24
}

.about-maac {
    background: linear-gradient(to right,#000,#1a1a1a);
    color: #fff;
    padding: 3rem 1.5rem
}

.about-maac .about-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1260px;
    margin: 0 auto
}

@media (min-width: 992px) {
    .about-maac .about-container {
        grid-template-columns:1fr 1fr;
        align-items: center
    }
}

.about-maac .about-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem
}

.about-maac .about-content h2 .highlight {
    color: #fc0
}

@media (min-width: 768px) {
    .about-maac .about-content h2 {
        font-size:2.5rem
    }
}

.about-maac .about-content .description {
    font-size: 1rem;
    line-height: 1.6;
    color: #efefef;
    margin-bottom: 2rem
}

.about-maac .about-content .info-box-content {
    background: #770006;
    border-radius: .75rem;
    padding: 1rem 1rem .5rem
}

.about-maac .about-content .info-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem
}

.about-maac .about-content .info-box .icon {
    flex-shrink: 0;
    background: #bc2329;
    border-radius: .5rem;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.about-maac .about-content .info-box p {
    margin: 0;
    font-size: .85rem;
    color: #fff
}

.about-maac .about-content .accordion {
    margin-top: 2rem
}

.about-maac .about-content .accordion .accordion-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fc0
}

.about-maac .about-content .accordion .accordion-item {
    background: #770006;
    border-radius: .5rem;
    margin-bottom: .8rem;
    overflow: hidden;
    transition: all .3s ease;
    border: 1px solid #770006
}

.about-maac .about-content .accordion .accordion-item.active {
    background: #000;
    padding-bottom: 15px
}

.about-maac .about-content .accordion .accordion-header {
    width: 100%;
    padding: .8rem 1rem;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fabc3f;
    font-size: 1.15rem;
    font-weight: 500;
    cursor: pointer
}

.about-maac .about-content .accordion .accordion-header svg {
    color: #fc0;
    transition: transform .3s
}

.about-maac .about-content .accordion .accordion-header .accordion-arrow {
    width: 22px;
    height: 15px;
    transition: transform .3s ease
}

.about-maac .about-content .accordion .accordion-header span {
    width: 100%;
    text-align: left;
    margin-left: 12px
}

.about-maac .about-content .accordion .accordion-content {
    padding: 0 1rem 0 3rem;
    color: #fff;
    font-size: .9rem;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.about-maac .about-image {
    position: relative;
    width: 86%;
    max-width: 85%;
    margin: 0 auto
}

@media (min-width: 768px) {
    .about-maac .about-image {
        width:100%
    }
}

.about-maac .about-image .bg-yellow {
    position: absolute;
    top: -8%;
    left: -7%;
    width: 26%;
    height: 116%;
    background: #facc15;
    border-radius: 0rem;
    z-index: 1
}

.about-maac .about-image .bg-red {
    position: absolute;
    bottom: -8%;
    left: 30%;
    width: 75%;
    height: 20%;
    background: #7f1d1d;
    border-radius: 0rem;
    z-index: 0
}

.about-maac .about-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 0rem;
    display: block;
    box-shadow: 0 10px 20px #00000080
}

.CpWhyMaac {
    padding: 3rem 1.5rem
}

.CpWhyMaac .bpHead {
    max-width: 1260px;
    margin: 0 auto
}

.CpWhyMaac .heading {
    font-weight: 600;
    text-align: left;
    font-size: 2.5rem
}

.CpWhyMaac .heading span {
    color: #fff
}

.CpWhyMaac .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.CpWhyMaac .E100Container .Event100 {
    box-sizing: border-box;
    padding: 20px;
    height: 345px;
    border: 1px solid rgba(240,175,19,.2);
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    gap: 20px;
    transition: background-color .3s ease;
    flex: 0 1 calc((100% - 60px)/2)
}

.CpWhyMaac .E100Container .Event100:hover {
    background-color: #bc2329
}

.CpWhyMaac .E100Container .Event100 .image {
    width: 80px;
    height: 80px;
    margin: 10px auto
}

.CpWhyMaac .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.CpWhyMaac .E100Container .Event100 .titleText {
    color: var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F);
    font-family: Raleway;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.335;
    text-align: center;
    margin-bottom: 15px
}

.CpWhyMaac .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.CpWhyMaac .E100Container .Event100 .desc p {
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.435
}

.CpWhyMaac .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.CpWhyMaac .EventFPScroller {
    display: none
}

.CpWhyMaac .whyCTABtn {
    margin: 0 auto;
    display: flex;
    justify-content: center
}

@media only screen and (max-width: 1366px) {
    .CpWhyMaac .E100Container .Event100 .titleText {
        font-size:1.25rem
    }
}

@media (max-width: 1024px) {
    .CpWhyMaac .E100Container {
        padding:20px 0;
        gap: 10px
    }

    .CpWhyMaac .E100Container .Event100 {
        flex: 0 1 calc((100% - 40px) / 3);
        padding: 10px;
        gap: 0px;
        height: auto
    }

    .CpWhyMaac .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .CpWhyMaac .E100Container .Event100 .title {
        font-size: 1.05rem;
        line-height: 1.335;
        margin-bottom: 15px
    }

    .CpWhyMaac .E100Container .Event100 .desc p {
        font-size: .95rem
    }

    .CpWhyMaac .E100Container .Event100 .line {
        margin: 15px auto 10px;
        border-bottom: 5px solid #fff
    }
}

@media (max-width: 768px) {
    .CpWhyMaac .heading {
        width:100%;
        font-size: 2.05rem
    }

    .CpWhyMaac .title-desc {
        font-size: 1rem
    }

    .CpWhyMaac .E100Container {
        padding: 20px 0;
        gap: 10px
    }

    .CpWhyMaac .E100Container .Event100 {
        flex: 0 1 calc((100% - 20px)/2);
        padding: 10px;
        gap: 0px;
        height: auto
    }

    .CpWhyMaac .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .CpWhyMaac .E100Container .Event100 .title {
        font-size: 1.05rem;
        line-height: 1.335;
        margin-bottom: 15px
    }

    .CpWhyMaac .E100Container .Event100 .desc p {
        font-size: .95rem
    }

    .CpWhyMaac .E100Container .Event100 .line {
        margin: 15px auto 10px;
        border-bottom: 5px solid #fff
    }
}

@media (max-width: 480px) {
    .CpWhyMaac .E100Container {
        padding:20px 0;
        gap: 10px
    }

    .CpWhyMaac .E100Container .Event100 {
        flex: 0 1 100%;
        padding: 10px;
        gap: 0px;
        height: auto
    }

    .CpWhyMaac .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .CpWhyMaac .E100Container .Event100 .titleText {
        font-size: 1.05rem;
        line-height: 1.335
    }

    .CpWhyMaac .E100Container .Event100 .desc p {
        font-size: .95rem
    }

    .CpWhyMaac .E100Container .Event100 .line {
        margin: 15px auto 10px;
        border-bottom: 5px solid #fff
    }
}

.affiliations {
    background: #821131;
    padding: 3rem 2rem
}

.affiliations .container {
    max-width: 1260px;
    margin: 1.5rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #821131;
    gap: 2rem;
    flex-wrap: wrap;
    color: #fff
}

.affiliations .content {
    flex: 1;
    min-width: 300px
}

.affiliations .content h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #f0af13
}

.affiliations .content h2 .highlight {
    color: #f0af13
}

.affiliations .content p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 600px
}

.affiliations .logos {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    min-width: 250px
}

.affiliations .logos img {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    max-width: 180px;
    height: auto;
    box-shadow: 0 4px 8px #0003
}

@media (max-width: 1024px) {
    .affiliations .content h2 {
        font-size:1.8rem
    }

    .affiliations .content p {
        font-size: .95rem
    }

    .affiliations .logos img {
        max-width: 150px
    }
}

@media (max-width: 768px) {
    .affiliations {
        flex-direction:column
    }

    .affiliations .content h2 {
        font-size: 2rem
    }

    .affiliations .content p {
        font-size: .9rem;
        margin: 0 auto
    }

    .affiliations .logos {
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap
    }

    .affiliations .logos img {
        max-width: 120px
    }
}

.requirements {
    padding: 3rem 1.5rem;
    color: #f0af13
}

.requirements .top {
    text-align: left;
    margin: 0 auto 2.5rem;
    max-width: 1260px
}

.requirements .top h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #f0af13
}

.requirements .top h2 .highlight {
    color: #f0af13
}

.requirements .top p {
    font-size: 1.1rem;
    color: #fff
}

.requirements .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 4rem;
    flex-wrap: wrap;
    max-width: 1260px;
    margin: 0 auto
}

.requirements .bottom .image-box {
    position: relative;
    flex: 1;
    min-width: 300px;
    max-width: 550px
}

.requirements .bottom .image-box img {
    width: 90%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    margin: 0 auto
}

@media (min-width: 768px) {
    .requirements .bottom .image-box img {
        width:100%
    }
}

.requirements .bottom .image-box .decor {
    position: absolute;
    z-index: 1;
    width: 48%;
    height: 111%
}

.requirements .bottom .image-box .decor.red {
    border: 20px solid #770006;
    top: -20px;
    left: 0
}

@media (min-width: 768px) {
    .requirements .bottom .image-box .decor.red {
        left:-20px
    }
}

.requirements .bottom .image-box .decor.yellow {
    border: 20px solid #FABC3F;
    bottom: -20px;
    right: 0;
    height: 50%
}

@media (min-width: 768px) {
    .requirements .bottom .image-box .decor.yellow {
        right:-20px
    }
}

.requirements .bottom .list {
    flex: 1;
    min-width: 280px
}

.requirements .bottom .list .item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem
}

.requirements .bottom .list .item .icon-box {
    width: 60px;
    height: 60px;
    border: 1px solid #ffb300;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    transition: all .3s ease
}

.requirements .bottom .list .item .icon-box svg {
    color: #ffb300
}

.requirements .bottom .list .item .icon-box:hover {
    background: #b71c1c
}

.requirements .bottom .list .item .icon-box:hover svg {
    color: #000
}

.requirements .bottom .list .item .text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0af13
}

.requirements .bottom .list .item .text p {
    margin: .3rem 0 0;
    color: #fff;
    font-size: .95rem;
    line-height: 1.4
}

@media (max-width: 768px) {
    .requirements .bottom {
        flex-direction:column
    }

    .requirements .bottom .image-box {
        margin-bottom: 2rem
    }

    .requirements .bottom .list .item {
        flex-direction: row;
        align-items: flex-start
    }

    .requirements .top h2 {
        font-size: 2rem
    }

    .requirements .top p {
        font-size: 1rem
    }
}

.franchise-advantage {
    padding: 60px 20px;
    background: linear-gradient(to right,#0a0a0a,#1a1a1a);
    color: #fff
}

.franchise-advantage .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1260px;
    margin: 0 auto
}

@media (max-width: 768px) {
    .franchise-advantage .container {
        flex-direction:column;
        text-align: center
    }
}

.franchise-advantage .content {
    flex: 1
}

.franchise-advantage .content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #f0af13
}

@media (min-width: 768px) {
    .franchise-advantage .content h2 {
        font-size:2.5rem
    }
}

.franchise-advantage .content h2 .highlight {
    color: #f0af13
}

.franchise-advantage .content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #fff
}

.franchise-advantage .content .bpCtaAdvantage .animated-button {
    height: auto;
    padding: 9px 20px
}

.franchise-advantage .content .bpCtaAdvantage .cta-button {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #f9b233;
    border-radius: 30px;
    color: #f9b233;
    font-weight: 500;
    transition: all .3s ease
}

.franchise-advantage .content .bpCtaAdvantage .cta-button:hover {
    background: #f9b233;
    color: #000
}

@media (max-width: 768px) {
    .franchise-advantage .content .bpCtaAdvantage {
        margin-top:20px
    }
}

.franchise-advantage .video-box {
    flex: 1;
    position: relative
}

.franchise-advantage .video-box .video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #111
}

.franchise-advantage .video-box .video-frame iframe,.franchise-advantage .video-box .video-frame .video-thumbnail {
    width: 100%;
    height: 100%
}

.franchise-advantage .video-box .video-frame .video-thumbnail {
    position: relative
}

.franchise-advantage .video-box .video-frame .video-thumbnail .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.franchise-advantage .video-box .video-frame .video-thumbnail .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #d32f2f;
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: pulse 1.5s infinite
}

.franchise-advantage .video-box .video-frame .video-thumbnail .play-button svg {
    color: #fff
}

.franchise-advantage .video-box .video-frame .border {
    position: absolute;
    border: 3px solid #f9b233;
    pointer-events: none
}

.franchise-advantage .video-box .video-frame .top-left {
    top: -9px;
    left: -9px;
    width: 20%;
    height: 30%;
    border-right: none;
    border-bottom: none;
    border-top: 3px solid #BC2329;
    border-left: 3px solid #F0AF13
}

.franchise-advantage .video-box .video-frame .bottom-right {
    bottom: -9px;
    right: -9px;
    width: 20%;
    height: 30%;
    border-left: none;
    border-top: none;
    border-right: 3px solid #F0AF13;
    border-bottom: 3px solid #BC2329
}

@keyframes pulse {
    0% {
        transform: translate(-50%,-50%) scale(1);
        opacity: 1
    }

    50% {
        transform: translate(-50%,-50%) scale(1.1);
        opacity: .7
    }

    to {
        transform: translate(-50%,-50%) scale(1);
        opacity: 1
    }
}

/*! 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: #ffffffbf;
    border: none;
    color: #333
}

.flickity-button:hover {
    background: #fff;
    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
}

.voices-partners {
    color: #fff;
    padding: 3rem 1.5rem;
    text-align: center
}

.voices-partners .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
    background-color: transparent;
    max-width: 1260px;
    margin: 1.5rem auto 1rem
}

@media (min-width: 768px) {
    .voices-partners .header {
        flex-direction:row;
        justify-content: space-between;
        text-align: left
    }
}

.voices-partners .header h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: .5rem
}

@media (min-width: 768px) {
    .voices-partners .header h2 {
        font-size:2.5rem
    }
}

.voices-partners .header h2 .highlight {
    color: #f0af13
}

.voices-partners .header p {
    color: #fff;
    font-size: 1.1rem
}

.voices-partners .header .controls {
    display: flex;
    gap: .5rem;
    margin-top: 1rem
}

@media (min-width: 768px) {
    .voices-partners .header .controls {
        margin-top:0
    }
}

.voices-partners .header .controls button {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .3s ease
}

.voices-partners .header .controls button svg {
    color: #000
}

.voices-partners .header .controls button:hover {
    background: #fc0
}

.voices-partners .carousel .testimonial {
    background: #111;
    border-radius: .75rem;
    margin-right: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 280px;
    max-width: 550px;
    min-height: 200px;
    border: 1px solid rgba(255,0,0,.3)
}

@media (min-width: 768px) {
    .voices-partners .carousel .testimonial {
        flex-direction:row
    }
}

.voices-partners .carousel .testimonial .image {
    flex-shrink: 0;
    margin: auto
}

.voices-partners .carousel .testimonial .image img {
    border-radius: .5rem;
    width: 120px;
    height: 120px;
    object-fit: cover
}

.voices-partners .carousel .testimonial .content {
    margin-top: 1rem
}

@media (min-width: 768px) {
    .voices-partners .carousel .testimonial .content {
        margin-left:1rem;
        margin-top: 0
    }
}

.voices-partners .carousel .testimonial .content .quote-icon {
    color: red;
    margin-bottom: .5rem
}

.voices-partners .carousel .testimonial .content blockquote {
    font-size: 1rem;
    color: #ddd;
    margin-bottom: 1rem
}

.voices-partners .carousel .testimonial .content h4 {
    font-weight: 700;
    color: #fc0;
    margin: 0;
    text-transform: uppercase
}

.voices-partners .carousel .testimonial .content .designation {
    font-size: .9rem;
    color: #ccc
}

.voices-partners .bpcta {
    margin: 2rem auto 0
}

.voices-partners .bpcta .animated-button {
    margin: auto
}

.voices-partners .bpcta .cta-button {
    display: inline-block;
    background: #facc15;
    color: #000;
    font-weight: 600;
    padding: .9rem 1.6rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: background .3s ease
}

.voices-partners .bpcta .cta-button:hover {
    background: #fbbf24
}

.event100HrsOfMaacChallenge {
    padding: 2.4% 0
}

.event100HrsOfMaacChallenge h1 {
    padding: 0 6%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 2.4% 10%;
    position: relative
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop,.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
    position: absolute
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop {
    right: 60px;
    top: 110px
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
    bottom: 90px;
    left: 60px
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step {
    background-color: #770006;
    display: flex;
    width: 60%;
    align-items: center;
    justify-content: center;
    gap: 31px
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .left {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    font-size: 120px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right {
    display: flex;
    flex-direction: column;
    width: 65%;
    gap: 15px
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rtop {
    color: #fabc3f;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rbottom {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step:nth-child(2) {
    align-self: flex-end
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner {
    margin-top: 2.4%;
    width: 100%;
    padding: 0;
    height: 136px;
    background-color: #fabc3f
}

.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner p {
    padding: 40px 425px;
    color: #000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .event100HrsOfMaacChallenge {
        padding:2% 0
    }

    .event100HrsOfMaacChallenge h1 {
        font-size: 52px;
        padding: 0 5%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps {
        width: 85%;
        padding: 2% 8%;
        gap: 80px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop {
        right: -90px;
        top: 90px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 80%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 20px;
        bottom: 70px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 80%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step {
        width: 65%;
        gap: 25px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right {
        width: 60%;
        gap: 12px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 28px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 18px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner {
        height: 120px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner p {
        padding: 35px 300px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .event100HrsOfMaacChallenge {
        padding:2% 0
    }

    .event100HrsOfMaacChallenge h1 {
        font-size: 54px;
        padding: 0 5%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps {
        width: 80%;
        padding: 2% 8%;
        gap: 90px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop {
        right: -12%;
        top: 100px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 70%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 0;
        bottom: 80px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 75%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step {
        width: 65%;
        gap: 25px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 110px;
        -webkit-text-stroke-width: 2px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right {
        width: 60%;
        gap: 12px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 30px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 18px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner {
        height: 130px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner p {
        padding: 35px 350px;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .event100HrsOfMaacChallenge {
        padding:2% 0
    }

    .event100HrsOfMaacChallenge h1 {
        font-size: 50px;
        padding: 0 5%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps {
        width: 85%;
        padding: 2% 8%;
        gap: 80px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop {
        right: -90px;
        top: 90px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 80%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 0;
        bottom: 70px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 80%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step {
        width: 60%;
        gap: 20px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 95px;
        -webkit-text-stroke-width: 2px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right {
        width: 60%;
        gap: 10px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 28px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 16px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner {
        height: 120px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner p {
        padding: 30px 300px;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .event100HrsOfMaacChallenge {
        padding:1.8% 0
    }

    .event100HrsOfMaacChallenge h1 {
        font-size: 42px;
        padding: 0 4%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps {
        width: 90%;
        padding: 1.8% 6%;
        gap: 60px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop,.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
        display: none
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step {
        width: 70%;
        gap: 15px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 75px;
        -webkit-text-stroke-width: 1.5px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right {
        width: 65%;
        gap: 8px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 22px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 14px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step:nth-child(2) {
        align-self: flex-end
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner {
        height: 100px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner p {
        padding: 25px 180px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .event100HrsOfMaacChallenge {
        padding:1% 0 5%
    }

    .event100HrsOfMaacChallenge h1 {
        font-size: 20px;
        padding: 0 3%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps {
        gap: 14px;
        width: 100%;
        padding: 2% 3%
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step {
        width: 100%;
        height: 85px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 40px;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #fff)
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right {
        gap: 5px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 18px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 14px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgTop,.event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-steps .imgBottom {
        display: none
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner {
        height: 116px
    }

    .event100HrsOfMaacChallenge .event100HrsOfMaacChallenge-banner p {
        padding: 20px 16px;
        font-size: 16px
    }
}

.event100HrsOfMaacCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0009,#0009),url(../assets/cta-CLpoIHdL.jpg) #d3d3d3 0px -321.579px/100% 291.607% no-repeat
}

.event100HrsOfMaacCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 60%
}

.event100HrsOfMaacCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%
}

.event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .event100HrsOfMaacCTA {
        height:400px;
        background-size: cover
    }

    .event100HrsOfMaacCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .event100HrsOfMaacCTA p {
        font-size: 22px;
        width: 70%
    }

    .event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .event100HrsOfMaacCTA {
        height:420px;
        background-size: cover
    }

    .event100HrsOfMaacCTA h1 {
        font-size: 54px;
        width: 65%
    }

    .event100HrsOfMaacCTA p {
        font-size: 22px;
        width: 75%
    }

    .event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1280px) {
    .event100HrsOfMaacCTA {
        height:380px;
        background-size: cover
    }

    .event100HrsOfMaacCTA h1 {
        font-size: 48px;
        width: 70%
    }

    .event100HrsOfMaacCTA p {
        font-size: 20px;
        width: 80%
    }

    .event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .event100HrsOfMaacCTA {
        height:320px;
        background-position: center center;
        background-size: cover
    }

    .event100HrsOfMaacCTA h1 {
        font-size: 38px;
        width: 80%;
        padding-bottom: 1%
    }

    .event100HrsOfMaacCTA p {
        font-size: 18px;
        width: 85%;
        padding-bottom: 2%
    }

    .event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 14px;
        padding: 8px 18px
    }
}

@media (max-width: 480px) {
    .event100HrsOfMaacCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center;
        background: linear-gradient(0deg,#c7253e80,#c7253e80),url(../assets/cta-CLpoIHdL.jpg) #d3d3d3 -291.753px -209.282px/251.245% 281.618% no-repeat
    }

    .event100HrsOfMaacCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 80%
    }

    .event100HrsOfMaacCTA p {
        font-size: 16px;
        width: 80%
    }

    .event100HrsOfMaacCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.event100HrsOfMaacGlimpse {
    padding: 0;
    overflow: hidden
}

.event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.event100HrsOfMaacGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.event100HrsOfMaacGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.event100HrsOfMaacGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.event100HrsOfMaacGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.event100HrsOfMaacGlimpse .left,.event100HrsOfMaacGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.event100HrsOfMaacGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.event100HrsOfMaacGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.event100HrsOfMaacGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.event100HrsOfMaacGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer {
        margin:60px 0
    }

    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .event100HrsOfMaacGlimpse .imageContainer {
        gap: 30px
    }

    .event100HrsOfMaacGlimpse .image {
        height: 550px
    }

    .event100HrsOfMaacGlimpse .center {
        width: 50%;
        height: 520px
    }

    .event100HrsOfMaacGlimpse .left,.event100HrsOfMaacGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .event100HrsOfMaacGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .event100HrsOfMaacGlimpse .left.navButton {
        left: 12%
    }

    .event100HrsOfMaacGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer {
        margin:70px 0
    }

    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer .redline {
        width: 49%;
        height: 7px;
        margin-top: 39%
    }

    .event100HrsOfMaacGlimpse .imageContainer {
        gap: 35px
    }

    .event100HrsOfMaacGlimpse .image {
        height: 570px
    }

    .event100HrsOfMaacGlimpse .center {
        width: 49%;
        height: 530px
    }

    .event100HrsOfMaacGlimpse .left,.event100HrsOfMaacGlimpse .right {
        width: calc((51% - 50px)/2);
        transform: scale(.82)
    }

    .event100HrsOfMaacGlimpse .navButton img {
        width: 48px;
        height: 48px
    }

    .event100HrsOfMaacGlimpse .left.navButton {
        left: 13%
    }

    .event100HrsOfMaacGlimpse .right.navButton {
        left: 79%
    }
}

@media (max-width: 1280px) {
    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer {
        margin:60px 0
    }

    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer .redline {
        width: 50%;
        height: 5px;
        margin-top: 38%
    }

    .event100HrsOfMaacGlimpse .imageContainer {
        gap: 25px
    }

    .event100HrsOfMaacGlimpse .image {
        height: 500px
    }

    .event100HrsOfMaacGlimpse .center {
        width: 51%;
        height: 480px
    }

    .event100HrsOfMaacGlimpse .left,.event100HrsOfMaacGlimpse .right {
        width: calc((49% - 40px)/2);
        transform: scale(.75)
    }

    .event100HrsOfMaacGlimpse .navButton img {
        width: 42px;
        height: 42px
    }

    .event100HrsOfMaacGlimpse .left.navButton {
        left: 10%
    }

    .event100HrsOfMaacGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 992px) {
    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer {
        margin:50px 0
    }

    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer .redline {
        width: 54%;
        height: 4px;
        margin-top: 41%
    }

    .event100HrsOfMaacGlimpse .imageContainer {
        gap: 20px
    }

    .event100HrsOfMaacGlimpse .image {
        height: 420px
    }

    .event100HrsOfMaacGlimpse .center {
        width: 54%;
        height: 400px;
        margin-bottom: 15px;
        opacity: 1;
        transform: scale(1)
    }

    .event100HrsOfMaacGlimpse .left,.event100HrsOfMaacGlimpse .right {
        width: calc((46% - 40px)/2);
        opacity: .5;
        transform: scale(.7)
    }

    .event100HrsOfMaacGlimpse .navButton img {
        width: 38px;
        height: 38px
    }

    .event100HrsOfMaacGlimpse .left.navButton {
        left: 9%
    }

    .event100HrsOfMaacGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 480px) {
    .event100HrsOfMaacGlimpse {
        padding:0% 1% 0
    }

    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer {
        width: 100%;
        margin: 40px 0
    }

    .event100HrsOfMaacGlimpse .EventGlimpsecarouselContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 43%
    }

    .event100HrsOfMaacGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .event100HrsOfMaacGlimpse .image img,.event100HrsOfMaacGlimpse .center,.event100HrsOfMaacGlimpse .left,.event100HrsOfMaacGlimpse .right {
        width: 260px;
        height: 163px
    }

    .event100HrsOfMaacGlimpse .navButton {
        top: 32%
    }

    .event100HrsOfMaacGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .event100HrsOfMaacGlimpse .left.navButton {
        left: 0%
    }

    .event100HrsOfMaacGlimpse .right.navButton {
        left: 78%
    }
}

.event100HrsOfMaacHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.event100HrsOfMaacHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.event100HrsOfMaacHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.event100HrsOfMaacHero img,.event100HrsOfMaacHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.event100HrsOfMaacHero img {
    width: 428px;
    height: 160px
}

.event100HrsOfMaacHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .event100HrsOfMaacHero {
        height:500px
    }

    .event100HrsOfMaacHero video {
        height: 100%
    }

    .event100HrsOfMaacHero:before {
        background: #0006
    }

    .event100HrsOfMaacHero img {
        width: 180px;
        height: 67px
    }

    .event100HrsOfMaacHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .event100HrsOfMaacHero {
        height:480px
    }

    .event100HrsOfMaacHero video {
        height: 100%
    }

    .event100HrsOfMaacHero:before {
        background: #0006
    }

    .event100HrsOfMaacHero img {
        width: 200px;
        height: 75px
    }

    .event100HrsOfMaacHero p {
        width: 80%;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .event100HrsOfMaacHero {
        height:450px
    }

    .event100HrsOfMaacHero video {
        height: 100%
    }

    .event100HrsOfMaacHero:before {
        background: #0000004d
    }

    .event100HrsOfMaacHero img {
        width: 180px;
        height: 65px
    }

    .event100HrsOfMaacHero p {
        width: 85%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .event100HrsOfMaacHero {
        height:380px
    }

    .event100HrsOfMaacHero video {
        height: 100%
    }

    .event100HrsOfMaacHero:before {
        background: #0000004d
    }

    .event100HrsOfMaacHero img {
        width: 140px;
        height: 50px
    }

    .event100HrsOfMaacHero p {
        width: 90%;
        font-size: 18px;
        margin-bottom: 1%
    }
}

@media (max-width: 480px) {
    .event100HrsOfMaacHero {
        height:229px
    }

    .event100HrsOfMaacHero img,.event100HrsOfMaacHero p {
        margin-bottom: 12px
    }

    .event100HrsOfMaacHero img {
        width: 97px;
        height: auto
    }

    .event100HrsOfMaacHero p {
        width: 100%;
        font-size: 16px
    }
}

.event100HrsOfMaacMarathon .heading {
    width: 65%;
    font-weight: 500
}

.event100HrsOfMaacMarathon .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.event100HrsOfMaacMarathon .E100Container .Event100 {
    width: 100%;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.event100HrsOfMaacMarathon .E100Container .Event100:hover {
    background-color: #bc2329
}

.event100HrsOfMaacMarathon .E100Container .Event100 .image {
    width: 80px;
    height: 80px
}

.event100HrsOfMaacMarathon .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.event100HrsOfMaacMarathon .E100Container .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.event100HrsOfMaacMarathon .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.event100HrsOfMaacMarathon .E100Container .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.event100HrsOfMaacMarathon .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9),.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(10) {
    grid-column: span 2;
    width: 50%
}

.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9) {
    justify-self: right
}

.event100HrsOfMaacMarathon .Event100scroller {
    display: none
}

@media (max-width: 1536px) {
    .event100HrsOfMaacMarathon .heading {
        width:70%;
        font-size: 52px
    }

    .event100HrsOfMaacMarathon .E100Container {
        padding: 35px 3.5%;
        gap: 18px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 {
        height: 320px;
        padding: 18px;
        gap: 18px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .image {
        width: 75px;
        height: 75px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .title {
        font-size: 22px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .desc p {
        font-size: 17px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9),.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(10) {
        grid-column: span 2;
        width: 55%
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9) {
        justify-self: right
    }

    .event100HrsOfMaacMarathon .Event100scroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .event100HrsOfMaacMarathon .heading {
        width:75%;
        font-size: 48px
    }

    .event100HrsOfMaacMarathon .E100Container {
        padding: 30px 5%;
        gap: 16px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 {
        height: 300px;
        padding: 16px;
        gap: 16px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .image {
        width: 70px;
        height: 70px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .title {
        font-size: 20px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .desc p {
        font-size: 16px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9),.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(10) {
        grid-column: span 2;
        width: 60%
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9) {
        justify-self: right
    }

    .event100HrsOfMaacMarathon .Event100scroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .event100HrsOfMaacMarathon .heading {
        width:80%;
        font-size: 44px
    }

    .event100HrsOfMaacMarathon .E100Container {
        padding: 25px 4%;
        gap: 14px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 {
        height: 280px;
        padding: 14px;
        gap: 14px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .title {
        font-size: 18px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .desc p {
        font-size: 15px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9),.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(10) {
        grid-column: span 2;
        width: 65%
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9) {
        justify-self: right
    }

    .event100HrsOfMaacMarathon .Event100scroller {
        display: none
    }
}

@media (max-width: 992px) {
    .event100HrsOfMaacMarathon .heading {
        width:90%;
        font-size: 38px;
        font-weight: 500
    }

    .event100HrsOfMaacMarathon .E100Container {
        padding: 20px 3%;
        gap: 12px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 {
        height: 220px;
        padding: 12px;
        gap: 12px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .image {
        width: 50px;
        height: 50px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .title {
        font-size: 16px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .desc p {
        font-size: 14px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .line {
        border-bottom: 3px solid #fff
    }

    .event100HrsOfMaacMarathon .E100Container .Event100:nth-child(9),.event100HrsOfMaacMarathon .E100Container .Event100:nth-child(10) {
        grid-column: span 2;
        width: 50%
    }
}

@media (max-width: 480px) {
    .event100HrsOfMaacMarathon {
        padding:1% 3% 5%
    }

    .event100HrsOfMaacMarathon .heading {
        width: 95%;
        font-size: 20px
    }

    .event100HrsOfMaacMarathon .E100Container {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .event100HrsOfMaacMarathon .E100Container::-webkit-scrollbar {
        display: none
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .image {
        width: 40px;
        height: 40px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .title {
        font-size: 18px
    }

    .event100HrsOfMaacMarathon .E100Container .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .event100HrsOfMaacMarathon .Event100scroller {
        display: block;
        padding: 0 0 20px
    }
}

.event100HrsOfMaacSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.event100HrsOfMaacSubHero .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: #bc2329;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.event100HrsOfMaacSubHero .left h1 {
    width: 80%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.event100HrsOfMaacSubHero .left p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.event100HrsOfMaacSubHero .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/h2-RcpduVkv.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.event100HrsOfMaacSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.event100HrsOfMaacSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.event100HrsOfMaacSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.event100HrsOfMaacSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.event100HrsOfMaacSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.event100HrsOfMaacSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.event100HrsOfMaacSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .event100HrsOfMaacSubHero .left {
        height:520px;
        width: 56%
    }

    .event100HrsOfMaacSubHero .left h1 {
        font-size: 52px
    }

    .event100HrsOfMaacSubHero .left p {
        font-size: 22px
    }

    .event100HrsOfMaacSubHero .right {
        width: 42%;
        height: 420px;
        right: 60px
    }

    .event100HrsOfMaacSubHero .playbutton {
        width: 75px;
        height: 75px
    }

    .event100HrsOfMaacSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .event100HrsOfMaacSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .event100HrsOfMaacSubHero .modal-overlay {
        background: #000000b3
    }

    .event100HrsOfMaacSubHero .modal-content {
        width: 750px;
        padding: 8px
    }

    .event100HrsOfMaacSubHero .close-button {
        top: -8px;
        right: -80px;
        width: 32px;
        height: 32px;
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .event100HrsOfMaacSubHero .left {
        height:500px;
        width: 58%
    }

    .event100HrsOfMaacSubHero .left h1 {
        font-size: 50px
    }

    .event100HrsOfMaacSubHero .left p {
        font-size: 20px
    }

    .event100HrsOfMaacSubHero .right {
        width: 40%;
        height: 400px;
        right: 50px
    }

    .event100HrsOfMaacSubHero .playbutton {
        width: 70px;
        height: 70px
    }

    .event100HrsOfMaacSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .event100HrsOfMaacSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .event100HrsOfMaacSubHero .modal-overlay {
        background: #000000bf
    }

    .event100HrsOfMaacSubHero .modal-content {
        width: 700px;
        padding: 7px
    }

    .event100HrsOfMaacSubHero .close-button {
        top: -7px;
        right: -70px;
        width: 30px;
        height: 30px;
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .event100HrsOfMaacSubHero .left {
        height:480px;
        width: 60%
    }

    .event100HrsOfMaacSubHero .left h1 {
        font-size: 48px
    }

    .event100HrsOfMaacSubHero .left p {
        font-size: 18px
    }

    .event100HrsOfMaacSubHero .right {
        width: 38%;
        height: 380px;
        right: 40px
    }

    .event100HrsOfMaacSubHero .playbutton {
        width: 65px;
        height: 65px
    }

    .event100HrsOfMaacSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .event100HrsOfMaacSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .event100HrsOfMaacSubHero .modal-overlay {
        background: #000000b3
    }

    .event100HrsOfMaacSubHero .modal-content {
        width: 650px;
        padding: 6px
    }

    .event100HrsOfMaacSubHero .close-button {
        top: -5px;
        right: -60px;
        width: 28px;
        height: 28px;
        font-size: 14px
    }
}

@media (max-width: 992px) {
    .event100HrsOfMaacSubHero .left {
        height:420px;
        width: 52%
    }

    .event100HrsOfMaacSubHero .left h1 {
        font-size: 40px
    }

    .event100HrsOfMaacSubHero .left p {
        font-size: 16px;
        width: 75%
    }

    .event100HrsOfMaacSubHero .right {
        width: 46%;
        height: 340px;
        right: 30px
    }

    .event100HrsOfMaacSubHero .playbutton {
        width: 60px;
        height: 60px
    }

    .event100HrsOfMaacSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .event100HrsOfMaacSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .event100HrsOfMaacSubHero .modal-overlay {
        background: #000000a6
    }

    .event100HrsOfMaacSubHero .modal-content {
        width: 550px;
        padding: 5px
    }

    .event100HrsOfMaacSubHero .close-button {
        top: -4px;
        right: -50px;
        width: 26px;
        height: 26px;
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .event100HrsOfMaacSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .event100HrsOfMaacSubHero .left {
        text-align: left;
        width: 100%;
        height: auto;
        padding: 20px;
        box-shadow: none
    }

    .event100HrsOfMaacSubHero .left h1 {
        font-size: 20px;
        width: 100%
    }

    .event100HrsOfMaacSubHero .left p {
        font-size: 16px;
        width: 100%
    }

    .event100HrsOfMaacSubHero .right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -3%
    }

    .event100HrsOfMaacSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .event100HrsOfMaacSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .event100HrsOfMaacSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .event100HrsOfMaacSubHero .modal-content {
        padding: 0
    }

    .event100HrsOfMaacSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .event100HrsOfMaacSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.ECLGlimpse {
    padding: 0;
    overflow: hidden
}

.ECLGlimpse .EventGlimpsecarouselContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.ECLGlimpse .EventGlimpsecarouselContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.ECLGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.ECLGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.ECLGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ECLGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.ECLGlimpse .left,.ECLGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.ECLGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.ECLGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.ECLGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.ECLGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .ECLGlimpse .EventGlimpsecarouselContainer {
        margin:60px 0
    }

    .ECLGlimpse .EventGlimpsecarouselContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .ECLGlimpse .imageContainer {
        gap: 30px
    }

    .ECLGlimpse .image {
        height: 550px
    }

    .ECLGlimpse .center {
        width: 50%;
        height: 520px
    }

    .ECLGlimpse .left,.ECLGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .ECLGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .ECLGlimpse .left.navButton {
        left: 12%
    }

    .ECLGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .ECLGlimpse .EventGlimpsecarouselContainer {
        margin:50px 0
    }

    .ECLGlimpse .EventGlimpsecarouselContainer .redline {
        width: 52%;
        height: 6px;
        margin-top: 35%
    }

    .ECLGlimpse .imageContainer {
        gap: 25px
    }

    .ECLGlimpse .image {
        height: 500px
    }

    .ECLGlimpse .center {
        width: 52%;
        height: 480px
    }

    .ECLGlimpse .left,.ECLGlimpse .right {
        width: calc((48% - 35px)/2);
        transform: scale(.75)
    }

    .ECLGlimpse .navButton img {
        width: 40px;
        height: 40px
    }

    .ECLGlimpse .left.navButton {
        left: 15%
    }

    .ECLGlimpse .right.navButton {
        left: 77%
    }
}

@media (max-width: 1280px) {
    .ECLGlimpse .EventGlimpsecarouselContainer {
        margin:40px 0
    }

    .ECLGlimpse .EventGlimpsecarouselContainer .redline {
        width: 55%;
        height: 5px;
        margin-top: 35%
    }

    .ECLGlimpse .imageContainer {
        gap: 20px
    }

    .ECLGlimpse .image {
        height: 460px
    }

    .ECLGlimpse .center {
        width: 55%;
        height: 450px
    }

    .ECLGlimpse .left,.ECLGlimpse .right {
        width: calc((45% - 30px)/2);
        transform: scale(.7)
    }

    .ECLGlimpse .navButton img {
        width: 35px;
        height: 35px
    }

    .ECLGlimpse .left.navButton {
        left: 15%
    }

    .ECLGlimpse .right.navButton {
        left: 77%
    }
}

@media (max-width: 992px) {
    .ECLGlimpse .EventGlimpsecarouselContainer {
        margin:30px 0
    }

    .ECLGlimpse .EventGlimpsecarouselContainer .redline {
        width: 58%;
        height: 4px;
        margin-top: 39%
    }

    .ECLGlimpse .imageContainer {
        gap: 16px
    }

    .ECLGlimpse .image {
        height: 400px
    }

    .ECLGlimpse .center {
        width: 58%;
        height: 390px
    }

    .ECLGlimpse .left,.ECLGlimpse .right {
        width: calc((42% - 16px)/2);
        transform: scale(.65)
    }

    .ECLGlimpse .navButton img {
        width: 30px;
        height: 30px
    }

    .ECLGlimpse .left.navButton {
        left: 13%
    }

    .ECLGlimpse .right.navButton {
        left: 78%
    }
}

@media (max-width: 480px) {
    .ECLGlimpse {
        padding:0% 1% 0
    }

    .ECLGlimpse .EventGlimpsecarouselContainer {
        width: 100%;
        margin: 40px 0
    }

    .ECLGlimpse .EventGlimpsecarouselContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 43%
    }

    .ECLGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .ECLGlimpse .image img,.ECLGlimpse .center,.ECLGlimpse .left,.ECLGlimpse .right {
        width: 260px;
        height: 163px
    }

    .ECLGlimpse .navButton {
        top: 32%
    }

    .ECLGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .ECLGlimpse .left.navButton {
        left: -5%
    }

    .ECLGlimpse .right.navButton {
        left: 80%
    }
}

.eventMaacCreativeHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.eventMaacCreativeHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.eventMaacCreativeHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#0009,#0009);
    z-index: 1
}

.eventMaacCreativeHero img,.eventMaacCreativeHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.eventMaacCreativeHero img {
    width: 160px;
    height: 160px
}

.eventMaacCreativeHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1440px) {
    .eventMaacCreativeHero {
        height:500px
    }

    .eventMaacCreativeHero video {
        height: 100%
    }

    .eventMaacCreativeHero:before {
        background: linear-gradient(0deg,#00000080,#00000080)
    }

    .eventMaacCreativeHero img {
        width: 140px;
        height: 140px
    }

    .eventMaacCreativeHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .eventMaacCreativeHero {
        height:450px
    }

    .eventMaacCreativeHero video {
        height: 100%
    }

    .eventMaacCreativeHero:before {
        background: linear-gradient(0deg,#0006,#0006)
    }

    .eventMaacCreativeHero img {
        width: 120px;
        height: 120px
    }

    .eventMaacCreativeHero p {
        width: 80%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .eventMaacCreativeHero {
        height:400px
    }

    .eventMaacCreativeHero video {
        height: 100%
    }

    .eventMaacCreativeHero:before {
        background: linear-gradient(0deg,#00000059,#00000059)
    }

    .eventMaacCreativeHero img {
        width: 100px;
        height: 100px
    }

    .eventMaacCreativeHero p {
        width: 85%;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .eventMaacCreativeHero {
        height:229px
    }

    .eventMaacCreativeHero img,.eventMaacCreativeHero p {
        margin-bottom: 12px
    }

    .eventMaacCreativeHero img {
        width: 97px;
        height: auto
    }

    .eventMaacCreativeHero p {
        width: 100%;
        font-size: 16px
    }
}

.eventMaacCreativeSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 80px 0 50px 100px
}

.eventMaacCreativeSubHero .mc-left {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 910px;
    background: #821131;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.eventMaacCreativeSubHero .mc-left h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.eventMaacCreativeSubHero .mc-left p {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.eventMaacCreativeSubHero .mc-right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 862px;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/h5-BbUzpcaw.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.eventMaacCreativeSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.eventMaacCreativeSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.eventMaacCreativeSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.eventMaacCreativeSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.eventMaacCreativeSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.eventMaacCreativeSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.eventMaacCreativeSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .eventMaacCreativeSubHero .mc-left {
        width:45%
    }

    .eventMaacCreativeSubHero .mc-left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .eventMaacCreativeSubHero .mc-right {
        padding-left: 0;
        width: 50%
    }

    .eventMaacCreativeSubHero .mc-right .playbutton {
        top: 42%;
        left: 42%
    }

    .eventMaacCreativeSubHero .mc-right .top-border {
        top: -10px;
        left: -15px
    }

    .eventMaacCreativeSubHero .mc-right .bottom-border {
        bottom: -10px;
        right: -15px
    }

    .modal-overlay .modal-content {
        width: 70%;
        max-width: 800px
    }

    .modal-overlay .modal-content iframe {
        height: 450px
    }

    .modal-overlay .modal-content .close-button {
        top: -30px;
        right: -30px;
        font-size: 16px;
        padding: 6px 10px
    }
}

@media (max-width: 1440px) {
    .eventMaacCreativeSubHero .mc-left {
        width:48%;
        padding: 30px
    }

    .eventMaacCreativeSubHero .mc-left h1 {
        font-size: 44px
    }

    .eventMaacCreativeSubHero .mc-left p {
        font-size: 20px
    }

    .eventMaacCreativeSubHero .mc-right {
        width: 48%;
        height: 400px;
        right: 60px
    }

    .eventMaacCreativeSubHero .mc-right .playbutton {
        width: 70px;
        height: 70px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content {
        width: 80%;
        padding: 8px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content .close-button {
        top: -25px;
        right: -25px;
        font-size: 18px
    }
}

@media (max-width: 1280px) {
    .eventMaacCreativeSubHero .mc-left {
        width:50%;
        padding: 20px
    }

    .eventMaacCreativeSubHero .mc-left h1 {
        font-size: 45px
    }

    .eventMaacCreativeSubHero .mc-left p {
        font-size: 20px
    }

    .eventMaacCreativeSubHero .mc-right {
        width: 45%;
        height: 380px;
        right: 50px
    }

    .eventMaacCreativeSubHero .mc-right .playbutton {
        width: 60px;
        height: 60px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content {
        width: 75%;
        padding: 6px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content .close-button {
        top: -20px;
        right: -20px;
        font-size: 16px
    }
}

@media (max-width: 992px) {
    .eventMaacCreativeSubHero {
        padding-left:40px;
        padding-top: 60px;
        padding-bottom: 40px
    }

    .eventMaacCreativeSubHero .mc-left {
        width: 80%;
        padding: 20px;
        height: auto
    }

    .eventMaacCreativeSubHero .mc-left h1 {
        font-size: 36px
    }

    .eventMaacCreativeSubHero .mc-left p {
        font-size: 18px;
        width: 90%
    }

    .eventMaacCreativeSubHero .mc-right {
        margin-right: 2%;
        position: relative;
        width: 90%;
        height: 300px;
        right: auto;
        margin-top: 24px
    }

    .eventMaacCreativeSubHero .mc-right .playbutton {
        width: 55px;
        height: 55px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content {
        width: 90%;
        padding: 5px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content iframe {
        height: 300px
    }

    .eventMaacCreativeSubHero .modal-overlay .modal-content .close-button {
        top: -18px;
        right: -18px;
        font-size: 14px;
        width: 30px;
        height: 30px
    }
}

@media (max-width: 480px) {
    .eventMaacCreativeSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .eventMaacCreativeSubHero .mc-left {
        text-align: center;
        width: 100%;
        height: auto;
        padding: 10px 20px;
        box-shadow: none
    }

    .eventMaacCreativeSubHero .mc-left h1 {
        font-size: 20px;
        width: 100%
    }

    .eventMaacCreativeSubHero .mc-left p {
        font-size: 16px;
        width: 100%
    }

    .eventMaacCreativeSubHero .mc-right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -2%
    }

    .eventMaacCreativeSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .eventMaacCreativeSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .eventMaacCreativeSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .eventMaacCreativeSubHero .modal-content {
        padding: 0
    }

    .eventMaacCreativeSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .eventMaacCreativeSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.MCLBenefits .MCLContainer {
    padding: 40px 7.4%;
    width: 100%;
    display: flex;
    gap: 20px
}

.MCLBenefits .MCLContainer .Event100 {
    width: 342px;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.MCLBenefits .MCLContainer .Event100:hover {
    background-color: #bc2329
}

.MCLBenefits .MCLContainer .Event100 .image {
    width: 80px;
    height: 80px
}

.MCLBenefits .MCLContainer .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.MCLBenefits .MCLContainer .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.MCLBenefits .MCLContainer .Event100 .desc {
    color: #fff;
    width: 100%
}

.MCLBenefits .MCLContainer .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.MCLBenefits .MCLContainer .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.MCLBenefits .Benefitscroller {
    display: none
}

@media (max-width: 1536px) {
    .MCLBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .MCLBenefits .MCLContainer {
        padding: 35px 3.5%;
        gap: 18px
    }

    .MCLBenefits .MCLContainer .Event100 {
        height: 320px;
        padding: 18px;
        gap: 18px
    }

    .MCLBenefits .MCLContainer .Event100 .image {
        width: 75px;
        height: 75px
    }

    .MCLBenefits .MCLContainer .Event100 .title {
        font-size: 22px
    }

    .MCLBenefits .MCLContainer .Event100 .desc p {
        font-size: 17px
    }

    .MCLBenefits .MCLContainer .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9),.MCLBenefits .MCLContainer .Event100:nth-child(10) {
        grid-column: span 2;
        width: 55%
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }

    .MCLBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .MCLBenefits .MCLContainer {
        padding:35px 6%;
        gap: 18px
    }

    .MCLBenefits .MCLContainer .Event100 {
        width: 320px;
        height: 330px;
        padding: 18px;
        gap: 18px
    }

    .MCLBenefits .MCLContainer .Event100 .image {
        width: 70px;
        height: 70px
    }

    .MCLBenefits .MCLContainer .Event100 .title {
        font-size: 22px
    }

    .MCLBenefits .MCLContainer .Event100 .desc p {
        font-size: 16px
    }

    .MCLBenefits .MCLContainer .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9),.MCLBenefits .MCLContainer .Event100:nth-child(10) {
        width: 50%
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }
}

@media (max-width: 1280px) {
    .MCLBenefits .MCLContainer {
        padding:30px 4%;
        gap: 15px
    }

    .MCLBenefits .MCLContainer .Event100 {
        width: 280px;
        height: 300px;
        padding: 16px;
        gap: 16px
    }

    .MCLBenefits .MCLContainer .Event100 .image {
        width: 65px;
        height: 65px
    }

    .MCLBenefits .MCLContainer .Event100 .title {
        font-size: 20px
    }

    .MCLBenefits .MCLContainer .Event100 .desc p {
        font-size: 15px
    }

    .MCLBenefits .MCLContainer .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9),.MCLBenefits .MCLContainer .Event100:nth-child(10) {
        width: 45%
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }
}

@media (max-width: 992px) {
    .MCLBenefits .heading {
        width:90%;
        font-size: 40px
    }

    .MCLBenefits .MCLContainer {
        padding: 25px 2%;
        gap: 12px
    }

    .MCLBenefits .MCLContainer .Event100 {
        height: 260px;
        padding: 14px;
        gap: 14px
    }

    .MCLBenefits .MCLContainer .Event100 .image {
        width: 60px;
        height: 60px
    }

    .MCLBenefits .MCLContainer .Event100 .title {
        font-size: 18px
    }

    .MCLBenefits .MCLContainer .Event100 .desc p {
        font-size: 14px
    }

    .MCLBenefits .MCLContainer .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .MCLBenefits .MCLContainer .Event100:nth-child(9),.MCLBenefits .MCLContainer .Event100:nth-child(10) {
        width: 90%;
        justify-self: center
    }
}

@media (max-width: 480px) {
    .MCLBenefits {
        padding:1% 3% 5%
    }

    .MCLBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .MCLBenefits .MCLContainer {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .MCLBenefits .MCLContainer::-webkit-scrollbar {
        display: none
    }

    .MCLBenefits .MCLContainer .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .MCLBenefits .MCLContainer .Event100 .image {
        width: 40px;
        height: 40px
    }

    .MCLBenefits .MCLContainer .Event100 .title {
        font-size: 18px
    }

    .MCLBenefits .MCLContainer .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .MCLBenefits .Benefitscroller {
        display: block;
        padding: 0 0 20px
    }
}

.MCLCategory {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.MCLCategory .left {
    width: 55%
}

.MCLCategory .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px
}

.MCLCategory .left p span {
    color: #f0af13
}

.MCLCategory .right {
    padding-left: 60px;
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}

.MCLCategory .right .image-container {
    position: relative;
    display: inline-block
}

.MCLCategory .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.MCLCategory .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.MCLCategory .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .MCLCategory .left {
        width:45%
    }

    .MCLCategory .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .MCLCategory .right {
        padding-left: 0;
        width: 50%
    }

    .MCLCategory .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .MCLCategory .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .MCLCategory .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .MCLCategory .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .MCLCategory .left {
        width:45%
    }

    .MCLCategory .left p {
        font-size: 22px;
        padding-bottom: 18px
    }

    .MCLCategory .right {
        width: 50%
    }

    .MCLCategory .right .image-container .sb-image {
        width: 600px;
        height: 400px
    }

    .MCLCategory .right .image-container .top-border {
        top: -12px;
        left: -18px
    }

    .MCLCategory .right .image-container .bottom-border {
        bottom: -12px;
        right: -18px
    }
}

@media (max-width: 1280px) {
    .MCLCategory .left {
        width:40%
    }

    .MCLCategory .left p {
        font-size: 20px;
        padding-bottom: 14px
    }

    .MCLCategory .right {
        width: 55%
    }

    .MCLCategory .right .image-container .sb-image {
        width: 550px;
        height: 380px
    }

    .MCLCategory .right .image-container .top-border {
        top: -10px;
        left: -12px
    }

    .MCLCategory .right .image-container .bottom-border {
        bottom: -10px;
        right: -12px
    }
}

@media (max-width: 992px) {
    .MCLCategory {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        text-align: center
    }

    .MCLCategory .left {
        width: 90%
    }

    .MCLCategory .left p {
        font-size: 18px;
        padding-bottom: 12px
    }

    .MCLCategory .right {
        width: 90%;
        padding-left: 0;
        margin-top: 20px
    }

    .MCLCategory .right .image-container .sb-image {
        width: 450px;
        height: 320px
    }

    .MCLCategory .right .image-container .top-border {
        top: -8px;
        left: -10px
    }

    .MCLCategory .right .image-container .bottom-border {
        bottom: -8px;
        right: -10px
    }
}

@media (max-width: 480px) {
    .MCLCategory {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .MCLCategory .left {
        width: 100%
    }

    .MCLCategory .left .heading {
        font-size: 20px;
        padding-bottom: 12px
    }

    .MCLCategory .left p {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .MCLCategory .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .MCLCategory .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .MCLCategory .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .MCLCategory .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .MCLCategory .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .MCLCategory .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .MCLCategory .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.MCLCompete {
    display: flex;
    flex-direction: column
}

.MCLCompete .top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.MCLCompete .top .left {
    width: 40%;
    display: flex;
    justify-content: center;
    position: relative
}

.MCLCompete .top .left .image-container {
    position: relative;
    display: inline-block
}

.MCLCompete .top .left .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.MCLCompete .top .left .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.MCLCompete .top .left .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

.MCLCompete .top .right {
    width: 53%
}

.MCLCompete .top .right .competeHead {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.MCLCompete .top .right .categories {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px
}

.MCLCompete .top .right .categories .category {
    display: flex;
    width: 31.5%;
    align-items: center;
    height: 50px;
    border-radius: 10px;
    border: 1px solid rgba(243,243,243,.2);
    background: #0f0f0f;
    padding: 15px;
    gap: 10px
}

.MCLCompete .top .right .categories .category .dot {
    scale: 1.2
}

.MCLCompete .top .right .categories .category .name {
    font-weight: 500;
    text-align: left;
    font-size: 16px
}

.MCLCompete .MCLScroller {
    display: none
}

@media (max-width: 1536px) {
    .MCLCompete .top .left {
        width:50%;
        justify-content: center
    }

    .MCLCompete .top .left .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .MCLCompete .top .left .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .MCLCompete .top .left .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .MCLCompete .top .left .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }

    .MCLCompete .top .right {
        width: 45%
    }

    .MCLCompete .top .right .competeHead {
        font-size: 40px
    }

    .MCLCompete .top .right .categories {
        padding-top: 20px;
        width: 100%
    }

    .MCLCompete .top .right .categories .category {
        width: 31%
    }

    .MCLCompete .top .right .categories .category .name {
        font-size: 14px
    }

    .MCLCompete .MCLScroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .MCLCompete .top .left {
        width:48%;
        justify-content: center
    }

    .MCLCompete .top .left .image-container .sb-image {
        width: 600px;
        height: 400px
    }

    .MCLCompete .top .left .image-container .top-border {
        top: -10px;
        left: -12px
    }

    .MCLCompete .top .left .image-container .bottom-border {
        bottom: -10px;
        right: -12px
    }

    .MCLCompete .top .right {
        width: 48%
    }

    .MCLCompete .top .right .competeHead {
        font-size: 50px
    }

    .MCLCompete .top .right .categories {
        padding-top: 18px;
        width: 100%
    }

    .MCLCompete .top .right .categories .category {
        width: 30%
    }

    .MCLCompete .top .right .categories .category .name {
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .MCLCompete .top .left {
        width:55%;
        justify-content: center
    }

    .MCLCompete .top .left .image-container .sb-image {
        width: 550px;
        height: 370px
    }

    .MCLCompete .top .left .image-container .top-border {
        top: -8px;
        left: -10px
    }

    .MCLCompete .top .left .image-container .bottom-border {
        bottom: -8px;
        right: -10px
    }

    .MCLCompete .top .right {
        width: 40%
    }

    .MCLCompete .top .right .competeHead {
        font-size: 44px
    }

    .MCLCompete .top .right .categories {
        padding-top: 15px;
        width: 100%
    }

    .MCLCompete .top .right .categories .category {
        width: 45%
    }

    .MCLCompete .top .right .categories .category .name {
        font-size: 13px
    }
}

@media (max-width: 992px) {
    .MCLCompete .top {
        flex-direction:column;
        align-items: center;
        justify-content: center
    }

    .MCLCompete .top .left {
        width: 90%;
        margin-bottom: 30px;
        justify-content: center
    }

    .MCLCompete .top .left .image-container .sb-image {
        width: 450px;
        height: 320px
    }

    .MCLCompete .top .left .image-container .top-border {
        top: -6px;
        left: -8px
    }

    .MCLCompete .top .left .image-container .bottom-border {
        bottom: -6px;
        right: -8px
    }

    .MCLCompete .top .right {
        width: 90%;
        text-align: center
    }

    .MCLCompete .top .right .competeHead {
        font-size: 32px;
        margin-bottom: 20px
    }

    .MCLCompete .top .right .categories {
        justify-content: center;
        gap: 15px
    }

    .MCLCompete .top .right .categories .category {
        width: 45%;
        height: 45px;
        padding: 12px
    }

    .MCLCompete .top .right .categories .category .name {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .MCLCompete .top {
        flex-direction:column;
        gap: 20px;
        text-align: left;
        padding: 20px 16px
    }

    .MCLCompete .top .left {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .MCLCompete .top .left .image-container {
        width: 100%;
        max-width: 350px
    }

    .MCLCompete .top .left .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .MCLCompete .top .left .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .MCLCompete .top .left .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .MCLCompete .top .left .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .MCLCompete .top .left .image-container .bottom-border img {
        width: 100px;
        height: auto
    }

    .MCLCompete .top .right {
        width: 100%
    }

    .MCLCompete .top .right .competeHead {
        font-size: 20px
    }

    .MCLCompete .top .right .categories {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit,minmax(282px,1fr));
        grid-template-rows: repeat(4,auto);
        gap: 10px;
        overflow-x: scroll;
        padding-bottom: 10px;
        width: 100%
    }

    .MCLCompete .top .right .categories::-webkit-scrollbar {
        display: none
    }

    .MCLCompete .top .right .categories .category {
        width: 282px;
        height: 50px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        border: 1px solid rgba(243,243,243,.2);
        background: #0f0f0f;
        padding: 15px;
        gap: 10px;
        flex: 0 0 100%
    }

    .MCLCompete .MCLScroller {
        display: block;
        padding: 0 0 20px
    }
}

.mclCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/cta-jaoB2ByR.jpeg) #d3d3d3 50%/cover no-repeat
}

.mclCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 60%
}

.mclCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%
}

.mclCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.mclCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .mclCTA {
        height:400px;
        background-size: cover
    }

    .mclCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .mclCTA p {
        font-size: 22px;
        width: 70%
    }

    .mclCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .mclCTA {
        height:380px;
        background-size: cover
    }

    .mclCTA h1 {
        font-size: 48px;
        width: 70%
    }

    .mclCTA p {
        font-size: 20px;
        width: 75%
    }

    .mclCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 1280px) {
    .mclCTA {
        height:350px;
        background-size: cover
    }

    .mclCTA h1 {
        font-size: 44px;
        width: 80%
    }

    .mclCTA p {
        font-size: 18px;
        width: 85%
    }

    .mclCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 14px;
        padding: 8px 18px
    }
}

@media (max-width: 992px) {
    .mclCTA {
        height:320px;
        background-size: cover
    }

    .mclCTA h1 {
        font-size: 38px;
        width: 90%
    }

    .mclCTA p {
        font-size: 16px;
        width: 90%
    }

    .mclCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 13px;
        padding: 7px 16px
    }
}

@media (max-width: 480px) {
    .mclCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background: linear-gradient(0deg,#c7253e80,#c7253e80),url(../assets/cta-jaoB2ByR.jpeg) #d3d3d3 0px -137.715px/100% 259.821% no-repeat
    }

    .mclCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 80%
    }

    .mclCTA p {
        font-size: 16px;
        width: 80%
    }

    .mclCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.KlickHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.KlickHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.KlickHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#0009,#0009);
    z-index: 1
}

.KlickHero img,.KlickHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.KlickHero img {
    width: 257px;
    height: 160px
}

.KlickHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1440px) {
    .KlickHero {
        height:500px
    }

    .KlickHero img {
        width: 230px;
        height: 145px
    }

    .KlickHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .KlickHero {
        height:460px
    }

    .KlickHero img {
        width: 210px;
        height: 130px
    }

    .KlickHero p {
        width: 80%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .KlickHero {
        height:420px
    }

    .KlickHero img {
        width: 180px;
        height: 115px
    }

    .KlickHero p {
        width: 85%;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .KlickHero {
        height:229px
    }

    .KlickHero img,.KlickHero p {
        margin-bottom: 12px
    }

    .KlickHero img {
        width: 97px;
        height: auto
    }

    .KlickHero p {
        width: 100%;
        font-size: 16px
    }
}

.klickSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.klickSubHero .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: var(--vibrant-crimson-red, #C7253E);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.klickSubHero .left h1 {
    width: 85%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.klickSubHero .left p {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.klickSubHero .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/h6-Ci8oUjVw.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.klickSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.klickSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.klickSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.klickSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.klickSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.klickSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.klickSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .klickSubHero .left {
        height:520px;
        width: 56%
    }

    .klickSubHero .left h1 {
        font-size: 52px
    }

    .klickSubHero .left p {
        font-size: 22px
    }

    .klickSubHero .right {
        width: 42%;
        height: 420px;
        right: 60px
    }

    .klickSubHero .playbutton {
        width: 75px;
        height: 75px
    }

    .klickSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .klickSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .klickSubHero .modal-overlay {
        background: #000000b3
    }

    .klickSubHero .modal-content {
        width: 750px;
        padding: 8px
    }

    .klickSubHero .close-button {
        top: -8px;
        right: -80px;
        width: 32px;
        height: 32px;
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .klickSubHero .left {
        height:500px;
        width: 58%
    }

    .klickSubHero .left h1 {
        font-size: 48px
    }

    .klickSubHero .left p {
        font-size: 20px
    }

    .klickSubHero .right {
        width: 40%;
        height: 400px;
        right: 50px
    }

    .klickSubHero .playbutton {
        width: 70px;
        height: 70px
    }

    .klickSubHero .modal-content {
        width: 700px;
        padding: 8px
    }

    .klickSubHero .close-button {
        top: -6px;
        right: -70px;
        width: 30px;
        height: 30px;
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .klickSubHero .left {
        width:100%;
        height: auto;
        padding: 40px 20px
    }

    .klickSubHero .left h1 {
        font-size: 42px;
        width: 90%
    }

    .klickSubHero .left p {
        font-size: 18px;
        width: 90%
    }

    .klickSubHero .right {
        position: static;
        width: 100%;
        height: 360px;
        margin-top: 0
    }

    .klickSubHero .playbutton {
        width: 60px;
        height: 60px
    }

    .klickSubHero .modal-content {
        width: 90%;
        padding: 6px
    }

    .klickSubHero .close-button {
        top: -5px;
        right: -60px;
        width: 28px;
        height: 28px;
        font-size: 16px
    }
}

@media (max-width: 992px) {
    .klickSubHero .left {
        height:340px;
        width: 50%;
        padding: 20px
    }

    .klickSubHero .left h1 {
        font-size: 36px;
        width: 90%
    }

    .klickSubHero .left p {
        font-size: 16px;
        width: 85%
    }

    .klickSubHero .right {
        width: 48%;
        height: 340px;
        right: 40px
    }

    .klickSubHero .playbutton {
        width: 50px;
        height: 50px
    }

    .klickSubHero .modal-content {
        width: 600px;
        padding: 6px
    }

    .klickSubHero .close-button {
        top: -4px;
        right: -50px;
        width: 26px;
        height: 26px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .klickSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .klickSubHero .left {
        text-align: left;
        width: 100%;
        height: auto;
        padding: 20px;
        box-shadow: none
    }

    .klickSubHero .left h1 {
        font-size: 20px;
        width: 100%
    }

    .klickSubHero .left p {
        font-size: 16px;
        width: 100%
    }

    .klickSubHero .right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -3%
    }

    .klickSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .klickSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .klickSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .klickSubHero .modal-content {
        padding: 0
    }

    .klickSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .klickSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.klickCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/klickCTA-JGllp8ZQ.jpeg) #d3d3d3 0px -33.234px/100% 147.032% no-repeat
}

.klickCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 80%
}

.klickCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%;
    width: 65%
}

.klickCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.klickCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .klickCTA {
        height:400px;
        background-size: cover
    }

    .klickCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .klickCTA p {
        font-size: 22px;
        width: 70%
    }

    .klickCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .klickCTA {
        height:380px;
        background-size: cover
    }

    .klickCTA h1 {
        font-size: 48px;
        width: 70%
    }

    .klickCTA p {
        font-size: 20px;
        width: 68%
    }

    .klickCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 17px;
        padding: 11px 22px
    }
}

@media (max-width: 1280px) {
    .klickCTA {
        height:360px;
        background-size: cover
    }

    .klickCTA h1 {
        font-size: 44px;
        width: 75%
    }

    .klickCTA p {
        font-size: 18px;
        width: 70%
    }

    .klickCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .klickCTA {
        height:280px;
        background-size: cover
    }

    .klickCTA h1 {
        font-size: 38px;
        width: 80%
    }

    .klickCTA p {
        font-size: 16px;
        width: 75%
    }

    .klickCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 15px;
        padding: 9px 18px
    }
}

@media (max-width: 480px) {
    .klickCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/klickCTA-JGllp8ZQ.jpeg) #d3d3d3 0px -15.974px/100% 147.032% no-repeat
    }

    .klickCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .klickCTA p {
        font-size: 16px;
        width: 90%
    }

    .klickCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.klickGlimpse {
    padding: 0;
    overflow: hidden
}

.klickGlimpse .klickGlimpseContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.klickGlimpse .klickGlimpseContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.klickGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.klickGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.klickGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.klickGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.klickGlimpse .left,.klickGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.klickGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.klickGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.klickGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.klickGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .klickGlimpse .klickGlimpseContainer {
        margin:60px 0
    }

    .klickGlimpse .klickGlimpseContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .klickGlimpse .imageContainer {
        gap: 30px
    }

    .klickGlimpse .image {
        height: 550px
    }

    .klickGlimpse .center {
        width: 50%;
        height: 520px
    }

    .klickGlimpse .left,.klickGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .klickGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .klickGlimpse .left.navButton {
        left: 12%
    }

    .klickGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .klickGlimpse .klickGlimpseContainer {
        margin:50px 0
    }

    .klickGlimpse .klickGlimpseContainer .redline {
        width: 52%;
        height: 5px;
        margin-top: 35%
    }

    .klickGlimpse .imageContainer {
        gap: 25px
    }

    .klickGlimpse .image {
        height: 500px
    }

    .klickGlimpse .center {
        width: 52%;
        height: 480px
    }

    .klickGlimpse .left,.klickGlimpse .right {
        width: calc((48% - 25px)/2);
        transform: scale(.75)
    }

    .klickGlimpse .navButton img {
        width: 42px;
        height: 42px
    }

    .klickGlimpse .left.navButton {
        left: 12%
    }

    .klickGlimpse .right.navButton {
        left: 80%
    }
}

@media (max-width: 1280px) {
    .klickGlimpse .klickGlimpseContainer {
        margin:40px 0
    }

    .klickGlimpse .klickGlimpseContainer .redline {
        width: 52%;
        height: 4px;
        margin-top: 33%
    }

    .klickGlimpse .imageContainer {
        gap: 20px
    }

    .klickGlimpse .image {
        height: 450px
    }

    .klickGlimpse .center {
        width: 54%;
        height: 430px
    }

    .klickGlimpse .left,.klickGlimpse .right {
        width: calc((46% - 20px)/2);
        transform: scale(.7)
    }

    .klickGlimpse .navButton img {
        width: 38px;
        height: 38px
    }

    .klickGlimpse .left.navButton {
        left: 13.5%
    }

    .klickGlimpse .right.navButton {
        left: 78%
    }
}

@media (max-width: 992px) {
    .klickGlimpse .klickGlimpseContainer {
        margin:30px 0
    }

    .klickGlimpse .klickGlimpseContainer .redline {
        width: 56%;
        height: 3px;
        margin-top: 38%
    }

    .klickGlimpse .imageContainer {
        gap: 15px
    }

    .klickGlimpse .image {
        height: 400px
    }

    .klickGlimpse .center {
        width: 56%;
        height: 380px
    }

    .klickGlimpse .left,.klickGlimpse .right {
        width: calc((44% - 15px)/2);
        transform: scale(.65)
    }

    .klickGlimpse .navButton img {
        width: 32px;
        height: 32px
    }

    .klickGlimpse .left.navButton {
        left: 15%
    }

    .klickGlimpse .right.navButton {
        left: 76%
    }
}

@media (max-width: 480px) {
    .klickGlimpse {
        padding:0% 1% 0
    }

    .klickGlimpse .klickGlimpseContainer {
        width: 100%;
        margin: 40px 0
    }

    .klickGlimpse .klickGlimpseContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 44%
    }

    .klickGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .klickGlimpse .image img,.klickGlimpse .center,.klickGlimpse .left,.klickGlimpse .right {
        width: 260px;
        height: 163px
    }

    .klickGlimpse .navButton {
        top: 32%
    }

    .klickGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .klickGlimpse .left.navButton {
        left: -5%
    }

    .klickGlimpse .right.navButton {
        left: 80%
    }
}

.klickBenefits .heading {
    width: 65%;
    font-weight: 600
}

.klickBenefits .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.klickBenefits .E100Container .Event100 {
    width: 100%;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.klickBenefits .E100Container .Event100:hover {
    background-color: #bc2329
}

.klickBenefits .E100Container .Event100 .image {
    width: 80px;
    height: 80px
}

.klickBenefits .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.klickBenefits .E100Container .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.klickBenefits .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.klickBenefits .E100Container .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.klickBenefits .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.klickBenefits .E100Container .Event100:nth-child(5),.klickBenefits .E100Container .Event100:nth-child(6) {
    grid-column: span 2;
    width: 50%
}

.klickBenefits .E100Container .Event100:nth-child(5) {
    justify-self: right
}

.klickBenefits .EventKlickScroller {
    display: none
}

@media (max-width: 1536px) {
    .klickBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .klickBenefits .E100Container {
        padding: 35px 3.5%;
        gap: 18px
    }

    .klickBenefits .E100Container .Event100 {
        height: 320px;
        padding: 18px;
        gap: 18px
    }

    .klickBenefits .E100Container .Event100 .image {
        width: 75px;
        height: 75px
    }

    .klickBenefits .E100Container .Event100 .title {
        font-size: 22px
    }

    .klickBenefits .E100Container .Event100 .desc p {
        font-size: 17px
    }

    .klickBenefits .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .klickBenefits .E100Container .Event100:nth-child(5),.klickBenefits .E100Container .Event100:nth-child(6) {
        grid-column: span 2;
        width: 55%
    }

    .klickBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right
    }

    .klickBenefits .EventKlickScroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .klickBenefits .heading {
        width:75%;
        font-size: 48px
    }

    .klickBenefits .E100Container {
        padding: 30px 3%;
        gap: 16px
    }

    .klickBenefits .E100Container .Event100 {
        height: 300px;
        padding: 16px;
        gap: 16px
    }

    .klickBenefits .E100Container .Event100 .image {
        width: 70px;
        height: 70px
    }

    .klickBenefits .E100Container .Event100 .title {
        font-size: 20px
    }

    .klickBenefits .E100Container .Event100 .desc p {
        font-size: 16px
    }

    .klickBenefits .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .klickBenefits .E100Container .Event100:nth-child(5),.klickBenefits .E100Container .Event100:nth-child(6) {
        grid-column: span 2;
        width: 50%
    }

    .klickBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right
    }

    .klickBenefits .EventKlickScroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .klickBenefits .heading {
        width:80%;
        font-size: 44px
    }

    .klickBenefits .E100Container {
        padding: 25px 2.5%;
        gap: 14px
    }

    .klickBenefits .E100Container .Event100 {
        height: 280px;
        padding: 14px;
        gap: 14px
    }

    .klickBenefits .E100Container .Event100 .image {
        width: 65px;
        height: 65px
    }

    .klickBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .klickBenefits .E100Container .Event100 .desc p {
        font-size: 15px
    }

    .klickBenefits .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .klickBenefits .E100Container .Event100:nth-child(5),.klickBenefits .E100Container .Event100:nth-child(6) {
        grid-column: span 2;
        width: 50%
    }

    .klickBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right
    }

    .klickBenefits .EventKlickScroller {
        display: none
    }
}

@media (max-width: 992px) {
    .klickBenefits .heading {
        width:85%;
        font-size: 38px
    }

    .klickBenefits .E100Container {
        padding: 20px 2%;
        gap: 12px
    }

    .klickBenefits .E100Container .Event100 {
        height: 260px;
        padding: 12px;
        gap: 12px
    }

    .klickBenefits .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .klickBenefits .E100Container .Event100 .title {
        font-size: 17px
    }

    .klickBenefits .E100Container .Event100 .desc p {
        font-size: 14px
    }

    .klickBenefits .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .klickBenefits .E100Container .Event100:nth-child(5),.klickBenefits .E100Container .Event100:nth-child(6) {
        grid-column: span 2;
        width: 52%
    }

    .klickBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right
    }

    .klickBenefits .EventKlickScroller {
        display: none
    }
}

@media (max-width: 480px) {
    .klickBenefits {
        padding:1% 3% 5%
    }

    .klickBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .klickBenefits .E100Container {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .klickBenefits .E100Container::-webkit-scrollbar {
        display: none
    }

    .klickBenefits .E100Container .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .klickBenefits .E100Container .Event100 .image {
        width: 40px;
        height: 40px
    }

    .klickBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .klickBenefits .E100Container .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .klickBenefits .EventKlickScroller {
        display: block;
        padding: 0 0 20px
    }
}

.klickLearning .heading {
    padding-bottom: 2%
}

.klickLearning .title {
    width: 45%
}

.klickLearning .locations-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    padding-top: 2%
}

.klickLearning .locations-grid .location-card {
    position: relative;
    overflow: hidden
}

.klickLearning .locations-grid .location-card img {
    width: 100%;
    height: 329px;
    object-fit: cover
}

.klickLearning .locations-grid .location-card .location-title {
    padding-top: 2%;
    color: var(--YELLOW-PRIMARY-COLOR, #f0af13);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.klickLearning .locations-grid .location-card .location-desc {
    padding-top: 3%;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.klickLearning .KlickLearningScroller {
    display: none
}

@media (max-width: 1536px) {
    .klickLearning .locations-grid {
        gap:15px
    }

    .klickLearning .locations-grid .location-card img {
        height: 280px
    }

    .klickLearning .locations-grid .location-card .location-title {
        font-size: 22px
    }

    .klickLearning .locations-grid .location-card .location-desc {
        font-size: 18px
    }

    .klickLearning .KlickLearningScroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .klickLearning .title {
        width:50%
    }

    .klickLearning .locations-grid {
        gap: 14px
    }

    .klickLearning .locations-grid .location-card img {
        height: 260px
    }

    .klickLearning .locations-grid .location-card .location-title {
        font-size: 20px
    }

    .klickLearning .locations-grid .location-card .location-desc {
        font-size: 17px
    }
}

@media (max-width: 1280px) {
    .klickLearning .title {
        width:55%
    }

    .klickLearning .locations-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }

    .klickLearning .locations-grid .location-card img {
        height: 240px
    }

    .klickLearning .locations-grid .location-card .location-title {
        font-size: 18px
    }

    .klickLearning .locations-grid .location-card .location-desc {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .klickLearning {
        padding:1% 3% 5%
    }

    .klickLearning .heading {
        width: 95%;
        font-size: 20px
    }

    .klickLearning .title {
        font-size: 16px;
        width: 100%
    }

    .klickLearning .locations-grid {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .klickLearning .locations-grid::-webkit-scrollbar {
        display: none
    }

    .klickLearning .locations-grid .location-card {
        width: 100%;
        flex: 0 0 100%
    }

    .klickLearning .locations-grid .location-card .location-image {
        width: 100%;
        height: auto;
        min-height: 200px;
        max-height: 200px
    }

    .klickLearning .locations-grid .location-card .location-title {
        font-size: 18px
    }

    .klickLearning .locations-grid .location-card .location-desc {
        font-size: 14px;
        font-weight: 400
    }

    .klickLearning .KlickLearningScroller {
        display: block;
        padding: 0 0 20px
    }
}

.maacManifestHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.maacManifestHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.maacManifestHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.maacManifestHero img,.maacManifestHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.maacManifestHero img {
    width: 255px;
    height: 160px
}

.maacManifestHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .maacManifestHero {
        height:500px
    }

    .maacManifestHero video {
        height: 100%
    }

    .maacManifestHero:before {
        background: #0006
    }

    .maacManifestHero img {
        width: 220px;
        height: 150px
    }

    .maacManifestHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .maacManifestHero {
        height:460px
    }

    .maacManifestHero video {
        height: 100%
    }

    .maacManifestHero:before {
        background: #00000059
    }

    .maacManifestHero img {
        width: 200px;
        height: 135px
    }

    .maacManifestHero p {
        width: 78%;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .maacManifestHero {
        height:420px
    }

    .maacManifestHero video {
        height: 100%
    }

    .maacManifestHero:before {
        background: #0000004d
    }

    .maacManifestHero img {
        width: 180px;
        height: 120px
    }

    .maacManifestHero p {
        width: 80%;
        font-size: 18px
    }
}

@media (max-width: 992px) {
    .maacManifestHero {
        height:350px
    }

    .maacManifestHero video {
        height: 100%
    }

    .maacManifestHero:before {
        background: #00000040
    }

    .maacManifestHero img {
        width: 180px;
        height: 105px
    }

    .maacManifestHero p {
        width: 75%;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .maacManifestHero {
        height:229px
    }

    .maacManifestHero img,.maacManifestHero p {
        margin-bottom: 12px
    }

    .maacManifestHero img {
        width: 97px;
        height: auto
    }

    .maacManifestHero p {
        width: 100%;
        font-size: 16px
    }
}

.maacManifestSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.maacManifestSubHero .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: var(--RED-PRIMAEY-COLOR, #bc2329);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.maacManifestSubHero .left h1 {
    width: 85%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.maacManifestSubHero .left p {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.maacManifestSubHero .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/thumbnail-Drt2-vZ3.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.maacManifestSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.maacManifestSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.maacManifestSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.maacManifestSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.maacManifestSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.maacManifestSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.maacManifestSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .maacManifestSubHero .left {
        height:520px;
        width: 56%
    }

    .maacManifestSubHero .left h1 {
        font-size: 52px
    }

    .maacManifestSubHero .left p {
        font-size: 22px
    }

    .maacManifestSubHero .right {
        width: 42%;
        height: 420px;
        right: 60px
    }

    .maacManifestSubHero .playbutton {
        width: 75px;
        height: 75px
    }

    .maacManifestSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .maacManifestSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .maacManifestSubHero .modal-overlay {
        background: #000000b3
    }

    .maacManifestSubHero .modal-content {
        width: 750px;
        padding: 8px
    }

    .maacManifestSubHero .close-button {
        top: -8px;
        right: -80px;
        width: 32px;
        height: 32px;
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .maacManifestSubHero .left {
        height:540px;
        width: 55%
    }

    .maacManifestSubHero .left h1 {
        font-size: 54px
    }

    .maacManifestSubHero .left p {
        font-size: 22px
    }

    .maacManifestSubHero .right {
        width: 43%;
        height: 450px;
        right: 70px
    }

    .maacManifestSubHero .playbutton {
        width: 75px;
        height: 75px
    }
}

@media (max-width: 1280px) {
    .maacManifestSubHero .left {
        height:500px;
        width: 58%
    }

    .maacManifestSubHero .left h1 {
        font-size: 4px
    }

    .maacManifestSubHero .left p {
        font-size: 20px
    }

    .maacManifestSubHero .right {
        width: 40%;
        height: 420px;
        right: 60px
    }

    .maacManifestSubHero .playbutton {
        width: 70px;
        height: 70px
    }
}

@media (max-width: 992px) {
    .maacManifestSubHero .left {
        height:350px;
        width: 50%;
        padding: 1rem
    }

    .maacManifestSubHero .left h1 {
        font-size: 28px;
        width: 90%;
        margin-bottom: .8rem
    }

    .maacManifestSubHero .left p {
        font-size: 16px;
        width: 90%
    }

    .maacManifestSubHero .right {
        width: 45%;
        height: 350px;
        right: 40px;
        background-size: cover;
        background-position: center
    }

    .maacManifestSubHero .playbutton {
        width: 50px;
        height: 50px
    }

    .maacManifestSubHero .playbutton img {
        transition: transform .3s ease-in-out
    }

    .maacManifestSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .maacManifestSubHero .modal-content {
        width: 600px;
        max-width: 90%;
        padding: 8px
    }

    .maacManifestSubHero .close-button {
        top: -8px;
        right: -20px;
        width: 30px;
        height: 30px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .maacManifestSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .maacManifestSubHero .left {
        text-align: left;
        width: 100%;
        height: auto;
        padding: 20px;
        box-shadow: none
    }

    .maacManifestSubHero .left h1 {
        font-size: 20px;
        width: 100%
    }

    .maacManifestSubHero .left p {
        font-size: 16px;
        width: 100%
    }

    .maacManifestSubHero .right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -3%
    }

    .maacManifestSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .maacManifestSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .maacManifestSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .maacManifestSubHero .modal-content {
        padding: 0
    }

    .maacManifestSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .maacManifestSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.maacManifestGlimpse {
    padding: 0;
    overflow: hidden
}

.maacManifestGlimpse .heading-mm {
    display: flex;
    justify-content: center;
    align-items: center
}

.maacManifestGlimpse .heading-mm .mmg {
    width: 40%;
    text-align: center
}

.maacManifestGlimpse .heading-mm .mmg p {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.maacManifestGlimpse .maacManifestGlimpseContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.maacManifestGlimpse .maacManifestGlimpseContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.maacManifestGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.maacManifestGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.maacManifestGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.maacManifestGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.maacManifestGlimpse .left,.maacManifestGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.maacManifestGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.maacManifestGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.maacManifestGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.maacManifestGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .maacManifestGlimpse .heading-mm .mmg {
        width:50%;
        text-align: center
    }

    .maacManifestGlimpse .heading-mm .mmg p {
        font-size: 22px
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer {
        margin: 60px 0
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .maacManifestGlimpse .imageContainer {
        gap: 30px
    }

    .maacManifestGlimpse .image {
        height: 550px
    }

    .maacManifestGlimpse .center {
        width: 50%;
        height: 520px
    }

    .maacManifestGlimpse .left,.maacManifestGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .maacManifestGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .maacManifestGlimpse .left.navButton {
        left: 12%
    }

    .maacManifestGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .maacManifestGlimpse .heading-mm .mmg {
        width:55%
    }

    .maacManifestGlimpse .heading-mm .mmg p {
        font-size: 20px
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer {
        margin: 50px 0
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer .redline {
        width: 52%;
        height: 5px;
        margin-top: 34%
    }

    .maacManifestGlimpse .imageContainer {
        gap: 25px
    }

    .maacManifestGlimpse .image {
        height: 500px
    }

    .maacManifestGlimpse .center {
        width: 52%;
        height: 470px
    }

    .maacManifestGlimpse .left,.maacManifestGlimpse .right {
        width: calc((48% - 25px)/2);
        transform: scale(.75)
    }

    .maacManifestGlimpse .navButton img {
        width: 40px;
        height: 40px
    }

    .maacManifestGlimpse .left.navButton {
        left: 10%
    }

    .maacManifestGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 1280px) {
    .maacManifestGlimpse .heading-mm .mmg {
        width:70%
    }

    .maacManifestGlimpse .heading-mm .mmg p {
        font-size: 18px
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer {
        margin: 40px 0
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer .redline {
        width: 59%;
        height: 4px;
        margin-top: 32%
    }

    .maacManifestGlimpse .imageContainer {
        gap: 20px
    }

    .maacManifestGlimpse .image {
        height: 440px
    }

    .maacManifestGlimpse .center {
        width: 60%;
        height: 410px
    }

    .maacManifestGlimpse .left,.maacManifestGlimpse .right {
        width: calc((40% - 20px)/2);
        transform: scale(.7)
    }

    .maacManifestGlimpse .navButton img {
        width: 35px;
        height: 35px
    }

    .maacManifestGlimpse .left.navButton {
        left: 8%
    }

    .maacManifestGlimpse .right.navButton {
        left: 84%
    }
}

@media (max-width: 992px) {
    .maacManifestGlimpse .heading-mm .mmg {
        width:80%
    }

    .maacManifestGlimpse .heading-mm .mmg p {
        font-size: 16px
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer {
        margin: 30px 0
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer .redline {
        width: 65%;
        height: 3px;
        margin-top: 30%
    }

    .maacManifestGlimpse .imageContainer {
        gap: 15px
    }

    .maacManifestGlimpse .image {
        height: 320px;
        transition: transform .5s ease-in-out,opacity .5s ease-in-out
    }

    .maacManifestGlimpse .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .maacManifestGlimpse .center {
        width: 65%;
        height: 300px;
        margin-bottom: 15px;
        opacity: 1;
        transform: scale(1)
    }

    .maacManifestGlimpse .left,.maacManifestGlimpse .right {
        width: calc((35% - 15px)/2);
        opacity: .5;
        transform: scale(.6)
    }

    .maacManifestGlimpse .navButton img {
        width: 30px;
        height: 30px
    }

    .maacManifestGlimpse .left.navButton {
        left: 6%
    }

    .maacManifestGlimpse .right.navButton {
        left: 85%
    }
}

@media (max-width: 480px) {
    .maacManifestGlimpse {
        padding:0% 1% 0
    }

    .maacManifestGlimpse .heading-mm {
        padding-top: 2%
    }

    .maacManifestGlimpse .heading-mm .mmg {
        width: 100%;
        text-align: center
    }

    .maacManifestGlimpse .heading-mm .mmg p {
        font-size: 12px!important
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer {
        width: 100%;
        margin: 40px 0
    }

    .maacManifestGlimpse .maacManifestGlimpseContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 44%
    }

    .maacManifestGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .maacManifestGlimpse .image img,.maacManifestGlimpse .center,.maacManifestGlimpse .left,.maacManifestGlimpse .right {
        width: 260px;
        height: 163px
    }

    .maacManifestGlimpse .navButton {
        top: 32%
    }

    .maacManifestGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .maacManifestGlimpse .left.navButton {
        left: -5%
    }

    .maacManifestGlimpse .right.navButton {
        left: 80%
    }
}

.maacManifestBenefits .MCLContainer {
    padding: 40px 7.4%;
    width: 100%;
    display: flex;
    gap: 20px
}

.maacManifestBenefits .MCLContainer .Event100 {
    width: 342px;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.maacManifestBenefits .MCLContainer .Event100:hover {
    background-color: #bc2329
}

.maacManifestBenefits .MCLContainer .Event100 .image {
    width: 80px;
    height: 80px
}

.maacManifestBenefits .MCLContainer .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.maacManifestBenefits .MCLContainer .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.maacManifestBenefits .MCLContainer .Event100 .desc {
    color: #fff;
    width: 100%
}

.maacManifestBenefits .MCLContainer .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.maacManifestBenefits .MCLContainer .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.maacManifestBenefits .Benefitscroller {
    display: none
}

@media (max-width: 1536px) {
    .maacManifestBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .maacManifestBenefits .MCLContainer {
        padding: 35px 3.5%;
        gap: 18px
    }

    .maacManifestBenefits .MCLContainer .Event100 {
        height: 300px;
        padding: 18px;
        gap: 18px
    }

    .maacManifestBenefits .MCLContainer .Event100 .image {
        width: 75px;
        height: 75px
    }

    .maacManifestBenefits .MCLContainer .Event100 .title {
        font-size: 22px
    }

    .maacManifestBenefits .MCLContainer .Event100 .desc p {
        font-size: 17px
    }

    .maacManifestBenefits .MCLContainer .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .maacManifestBenefits .MCLContainer .Event100:nth-child(9),.maacManifestBenefits .MCLContainer .Event100:nth-child(10) {
        grid-column: span 2;
        width: 55%
    }

    .maacManifestBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }

    .maacManifestBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .maacManifestBenefits .heading {
        width:75%;
        font-size: 48px
    }

    .maacManifestBenefits .MCLContainer {
        padding: 30px 3%;
        gap: 16px
    }

    .maacManifestBenefits .MCLContainer .Event100 {
        height: 280px;
        padding: 16px;
        gap: 16px
    }

    .maacManifestBenefits .MCLContainer .Event100 .image {
        width: 70px;
        height: 70px
    }

    .maacManifestBenefits .MCLContainer .Event100 .title {
        font-size: 20px
    }

    .maacManifestBenefits .MCLContainer .Event100 .desc p {
        font-size: 16px
    }

    .maacManifestBenefits .MCLContainer .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .maacManifestBenefits .MCLContainer .Event100:nth-child(9),.maacManifestBenefits .MCLContainer .Event100:nth-child(10) {
        width: 60%
    }
}

@media (max-width: 1280px) {
    .maacManifestBenefits .heading {
        width:100%;
        font-size: 44px
    }

    .maacManifestBenefits .MCLContainer {
        align-items: center;
        gap: 20px;
        padding: 25px 5%
    }

    .maacManifestBenefits .MCLContainer .Event100 {
        width: 100%;
        height: auto;
        padding: 20px;
        gap: 14px
    }

    .maacManifestBenefits .MCLContainer .Event100 .image {
        width: 65px;
        height: 65px
    }

    .maacManifestBenefits .MCLContainer .Event100 .title {
        font-size: 18px
    }

    .maacManifestBenefits .MCLContainer .Event100 .desc p {
        font-size: 15px
    }

    .maacManifestBenefits .MCLContainer .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .maacManifestBenefits .MCLContainer .Event100:nth-child(9),.maacManifestBenefits .MCLContainer .Event100:nth-child(10) {
        width: 100%
    }
}

@media (max-width: 992px) {
    .maacManifestBenefits .heading {
        width:100%;
        font-size: 36px
    }

    .maacManifestBenefits .MCLContainer {
        padding: 20px 4%;
        gap: 12px;
        align-items: center
    }

    .maacManifestBenefits .MCLContainer .Event100 {
        width: 100%;
        max-width: 300px;
        height: 220px;
        padding: 15px;
        gap: 12px
    }

    .maacManifestBenefits .MCLContainer .Event100 .image {
        width: 55px;
        height: 55px
    }

    .maacManifestBenefits .MCLContainer .Event100 .title {
        font-size: 16px
    }

    .maacManifestBenefits .MCLContainer .Event100 .desc p {
        font-size: 14px
    }

    .maacManifestBenefits .MCLContainer .Event100 .line {
        border-bottom: 3px solid #fff
    }

    .maacManifestBenefits .MCLContainer .Event100:nth-child(9),.maacManifestBenefits .MCLContainer .Event100:nth-child(10) {
        width: 100%;
        max-width: 300px
    }

    .maacManifestBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 480px) {
    .maacManifestBenefits {
        padding:1% 3% 5%
    }

    .maacManifestBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .maacManifestBenefits .MCLContainer {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .maacManifestBenefits .MCLContainer::-webkit-scrollbar {
        display: none
    }

    .maacManifestBenefits .MCLContainer .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .maacManifestBenefits .MCLContainer .Event100 .image {
        width: 40px;
        height: 40px
    }

    .maacManifestBenefits .MCLContainer .Event100 .title {
        font-size: 18px
    }

    .maacManifestBenefits .MCLContainer .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .maacManifestBenefits .Benefitscroller {
        display: block;
        padding: 20px 0
    }
}

.maacManifestLegacy {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.maacManifestLegacy .left {
    width: 55%
}

.maacManifestLegacy .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px;
    padding-top: 30px
}

.maacManifestLegacy .right {
    padding-left: 60px;
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}

.maacManifestLegacy .right .image-container {
    position: relative;
    display: inline-block
}

.maacManifestLegacy .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.maacManifestLegacy .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.maacManifestLegacy .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .maacManifestLegacy .left {
        width:45%
    }

    .maacManifestLegacy .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .maacManifestLegacy .right {
        padding-left: 0;
        width: 50%
    }

    .maacManifestLegacy .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .maacManifestLegacy .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .maacManifestLegacy .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .maacManifestLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .maacManifestLegacy .left {
        width:50%
    }

    .maacManifestLegacy .left p {
        font-size: 22px;
        padding-bottom: 18px
    }

    .maacManifestLegacy .right {
        width: 50%
    }

    .maacManifestLegacy .right .image-container .sb-image {
        width: 680px;
        height: 460px
    }

    .maacManifestLegacy .right .image-container .top-border {
        top: -12px;
        left: -18px
    }

    .maacManifestLegacy .right .image-container .bottom-border {
        bottom: -12px;
        right: -18px
    }
}

@media (max-width: 1280px) {
    .maacManifestLegacy .left {
        width:48%
    }

    .maacManifestLegacy .left p {
        font-size: 20px;
        padding-bottom: 14px
    }

    .maacManifestLegacy .right {
        width: 50%
    }

    .maacManifestLegacy .right .image-container .sb-image {
        width: 600px;
        height: 420px
    }

    .maacManifestLegacy .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .maacManifestLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 992px) {
    .maacManifestLegacy .left {
        width:45%
    }

    .maacManifestLegacy .left p {
        font-size: 18px;
        padding-top: 20px;
        padding-bottom: 12px
    }

    .maacManifestLegacy .right {
        width: 50%;
        padding-left: 20px
    }

    .maacManifestLegacy .right .image-container .sb-image {
        width: 480px;
        height: 350px
    }

    .maacManifestLegacy .right .image-container .top-border {
        top: -8px;
        left: -12px
    }

    .maacManifestLegacy .right .image-container .bottom-border {
        bottom: -8px;
        right: -12px
    }
}

@media (max-width: 480px) {
    .maacManifestLegacy {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .maacManifestLegacy .left {
        width: 100%
    }

    .maacManifestLegacy .left .heading {
        font-size: 20px;
        padding-bottom: 12px
    }

    .maacManifestLegacy .left p {
        padding-top: 0;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .maacManifestLegacy .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .maacManifestLegacy .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .maacManifestLegacy .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .maacManifestLegacy .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .maacManifestLegacy .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .maacManifestLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .maacManifestLegacy .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.maacManifestCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/maccManifestCTA-CEvxqMIK.jpeg) #d3d3d3 50%/cover no-repeat
}

.maacManifestCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 50%
}

.maacManifestCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%
}

.maacManifestCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.maacManifestCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .maacManifestCTA {
        height:400px;
        background-size: cover
    }

    .maacManifestCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .maacManifestCTA p {
        font-size: 22px;
        width: 70%
    }

    .maacManifestCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .maacManifestCTA {
        height:360px;
        background-size: cover
    }

    .maacManifestCTA h1 {
        font-size: 48px;
        width: 70%
    }

    .maacManifestCTA p {
        font-size: 20px;
        width: 75%
    }

    .maacManifestCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 17px;
        padding: 10px 22px
    }
}

@media (max-width: 1280px) {
    .maacManifestCTA {
        height:320px;
        padding: 0 5%;
        align-items: flex-start
    }

    .maacManifestCTA h1 {
        font-size: 42px;
        width: 100%
    }

    .maacManifestCTA p {
        font-size: 18px;
        width: 100%
    }

    .maacManifestCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .maacManifestCTA {
        height:280px;
        padding: 0 4%;
        align-items: flex-start;
        background-size: cover
    }

    .maacManifestCTA h1 {
        font-size: 34px;
        width: 100%
    }

    .maacManifestCTA p {
        font-size: 16px;
        width: 100%
    }

    .maacManifestCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 14px;
        padding: 8px 16px
    }
}

@media (max-width: 480px) {
    .maacManifestCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center
    }

    .maacManifestCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 80%
    }

    .maacManifestCTA p {
        font-size: 16px;
        width: 80%
    }

    .maacManifestCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.eventNSMBenefits .heading {
    width: 60%
}

.eventNSMBenefits .MCLContainer {
    padding: 40px 7.4%;
    width: 100%;
    display: flex;
    gap: 20px
}

.eventNSMBenefits .MCLContainer .Event100 {
    width: 342px;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.eventNSMBenefits .MCLContainer .Event100:hover {
    background-color: #bc2329
}

.eventNSMBenefits .MCLContainer .Event100 .image {
    width: 80px;
    height: 80px
}

.eventNSMBenefits .MCLContainer .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.eventNSMBenefits .MCLContainer .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.eventNSMBenefits .MCLContainer .Event100 .desc {
    color: #fff;
    width: 100%
}

.eventNSMBenefits .MCLContainer .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.eventNSMBenefits .MCLContainer .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.eventNSMBenefits .Benefitscroller {
    display: none
}

@media (max-width: 1536px) {
    .eventNSMBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .eventNSMBenefits .MCLContainer {
        padding: 35px 3.5%;
        gap: 18px
    }

    .eventNSMBenefits .MCLContainer .Event100 {
        height: 320px;
        padding: 18px;
        gap: 18px
    }

    .eventNSMBenefits .MCLContainer .Event100 .image {
        width: 75px;
        height: 75px
    }

    .eventNSMBenefits .MCLContainer .Event100 .title {
        font-size: 22px
    }

    .eventNSMBenefits .MCLContainer .Event100 .desc p {
        font-size: 17px
    }

    .eventNSMBenefits .MCLContainer .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9),.eventNSMBenefits .MCLContainer .Event100:nth-child(10) {
        grid-column: span 2;
        width: 55%
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }

    .eventNSMBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .eventNSMBenefits .heading {
        width:65%;
        font-size: 50px
    }

    .eventNSMBenefits .MCLContainer {
        padding: 32px 5%;
        gap: 16px
    }

    .eventNSMBenefits .MCLContainer .Event100 {
        height: 300px;
        padding: 16px;
        gap: 16px
    }

    .eventNSMBenefits .MCLContainer .Event100 .image {
        width: 70px;
        height: 70px
    }

    .eventNSMBenefits .MCLContainer .Event100 .title {
        font-size: 20px
    }

    .eventNSMBenefits .MCLContainer .Event100 .desc p {
        font-size: 16px
    }

    .eventNSMBenefits .MCLContainer .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9),.eventNSMBenefits .MCLContainer .Event100:nth-child(10) {
        grid-column: span 2;
        width: 50%
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }

    .eventNSMBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .eventNSMBenefits .heading {
        width:60%;
        font-size: 48px
    }

    .eventNSMBenefits .MCLContainer {
        padding: 28px 4%;
        gap: 14px
    }

    .eventNSMBenefits .MCLContainer .Event100 {
        height: 280px;
        padding: 14px;
        gap: 14px
    }

    .eventNSMBenefits .MCLContainer .Event100 .image {
        width: 65px;
        height: 65px
    }

    .eventNSMBenefits .MCLContainer .Event100 .title {
        font-size: 18px
    }

    .eventNSMBenefits .MCLContainer .Event100 .desc p {
        font-size: 15px
    }

    .eventNSMBenefits .MCLContainer .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9),.eventNSMBenefits .MCLContainer .Event100:nth-child(10) {
        grid-column: span 2;
        width: 48%
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }

    .eventNSMBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 992px) {
    .eventNSMBenefits .heading {
        width:68%;
        font-size: 44px
    }

    .eventNSMBenefits .MCLContainer {
        padding: 24px 4%;
        gap: 12px
    }

    .eventNSMBenefits .MCLContainer .Event100 {
        width: 300px;
        height: 260px;
        padding: 12px;
        gap: 12px
    }

    .eventNSMBenefits .MCLContainer .Event100 .image {
        width: 60px;
        height: 60px
    }

    .eventNSMBenefits .MCLContainer .Event100 .image img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

    .eventNSMBenefits .MCLContainer .Event100 .title {
        font-size: 17px
    }

    .eventNSMBenefits .MCLContainer .Event100 .desc p {
        font-size: 15px
    }

    .eventNSMBenefits .MCLContainer .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9),.eventNSMBenefits .MCLContainer .Event100:nth-child(10) {
        grid-column: span 2;
        width: 45%
    }

    .eventNSMBenefits .MCLContainer .Event100:nth-child(9) {
        justify-self: right
    }

    .eventNSMBenefits .Benefitscroller {
        display: none
    }
}

@media (max-width: 480px) {
    .eventNSMBenefits {
        padding:1% 3% 5%
    }

    .eventNSMBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .eventNSMBenefits .MCLContainer {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .eventNSMBenefits .MCLContainer::-webkit-scrollbar {
        display: none
    }

    .eventNSMBenefits .MCLContainer .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .eventNSMBenefits .MCLContainer .Event100 .image {
        width: 40px;
        height: 40px
    }

    .eventNSMBenefits .MCLContainer .Event100 .title {
        font-size: 18px
    }

    .eventNSMBenefits .MCLContainer .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .eventNSMBenefits .Benefitscroller {
        display: block;
        padding: 0 0 20px
    }
}

.eventNSMCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/nsmCTA-BQUHvrQ9.jpeg) #d3d3d3 0px -28.828px/100% 187.393% no-repeat
}

.eventNSMCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 80%
}

.eventNSMCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%;
    width: 65%
}

.eventNSMCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.eventNSMCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .eventNSMCTA {
        height:400px;
        background-size: cover
    }

    .eventNSMCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .eventNSMCTA p {
        font-size: 22px;
        width: 70%
    }

    .eventNSMCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .eventNSMCTA {
        height:420px;
        background-size: cover
    }

    .eventNSMCTA h1 {
        font-size: 54px;
        width: 75%
    }

    .eventNSMCTA p {
        font-size: 23px;
        width: 68%
    }

    .eventNSMCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 19px;
        padding: 13px 26px
    }
}

@media (max-width: 1280px) {
    .eventNSMCTA {
        height:380px;
        background-size: cover
    }

    .eventNSMCTA h1 {
        font-size: 50px;
        width: 70%
    }

    .eventNSMCTA p {
        font-size: 20px;
        width: 72%
    }

    .eventNSMCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 17px;
        padding: 11px 22px
    }
}

@media (max-width: 992px) {
    .eventNSMCTA {
        height:340px;
        background-size: cover;
        padding: 0 5%
    }

    .eventNSMCTA h1 {
        font-size: 42px;
        width: 75%;
        padding-bottom: 1.5%
    }

    .eventNSMCTA p {
        font-size: 18px;
        width: 80%;
        padding-bottom: 2.5%
    }

    .eventNSMCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }

    .eventNSMCTA .event100HrsOfMaacCTA-button .btn-background {
        background-color: #fff
    }
}

@media (max-width: 480px) {
    .eventNSMCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/nsmCTA-BQUHvrQ9.jpeg) #d3d3d3 0px -13.856px/100% 187.393% no-repeat
    }

    .eventNSMCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .eventNSMCTA p {
        font-size: 16px;
        width: 90%
    }

    .eventNSMCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.eventNSMGlimpse {
    padding: 0;
    overflow: hidden
}

.eventNSMGlimpse .eventNSMGlimpseGlimpseContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.eventNSMGlimpse .eventNSMGlimpseGlimpseContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.eventNSMGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.eventNSMGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.eventNSMGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.eventNSMGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.eventNSMGlimpse .left,.eventNSMGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.eventNSMGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.eventNSMGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.eventNSMGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.eventNSMGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer {
        margin:60px 0
    }

    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .eventNSMGlimpse .imageContainer {
        gap: 30px
    }

    .eventNSMGlimpse .image {
        height: 550px
    }

    .eventNSMGlimpse .center {
        width: 50%;
        height: 520px
    }

    .eventNSMGlimpse .left,.eventNSMGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .eventNSMGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .eventNSMGlimpse .left.navButton {
        left: 12%
    }

    .eventNSMGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer {
        margin:70px 0
    }

    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer .redline {
        width: 49%;
        height: 8px;
        margin-top: 38%
    }

    .eventNSMGlimpse .imageContainer {
        gap: 35px
    }

    .eventNSMGlimpse .image {
        height: 570px
    }

    .eventNSMGlimpse .center {
        width: 49%;
        height: 530px
    }

    .eventNSMGlimpse .left,.eventNSMGlimpse .right {
        width: calc((51% - 45px)/2);
        transform: scale(.85)
    }

    .eventNSMGlimpse .navButton img {
        width: 48px;
        height: 48px
    }

    .eventNSMGlimpse .left.navButton {
        left: 13%
    }

    .eventNSMGlimpse .right.navButton {
        left: 80%
    }
}

@media (max-width: 1280px) {
    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer {
        margin:50px 0
    }

    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer .redline {
        width: 51%;
        height: 6px;
        margin-top: 39%
    }

    .eventNSMGlimpse .imageContainer {
        gap: 25px
    }

    .eventNSMGlimpse .image {
        height: 530px
    }

    .eventNSMGlimpse .center {
        width: 51%;
        height: 500px
    }

    .eventNSMGlimpse .left,.eventNSMGlimpse .right {
        width: calc((49% - 35px)/2);
        transform: scale(.75)
    }

    .eventNSMGlimpse .navButton img {
        width: 40px;
        height: 40px
    }

    .eventNSMGlimpse .left.navButton {
        left: 10%
    }

    .eventNSMGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 992px) {
    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer {
        margin:40px 0
    }

    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer .redline {
        width: 52%;
        height: 5px;
        margin-top: 44%
    }

    .eventNSMGlimpse .imageContainer {
        gap: 20px
    }

    .eventNSMGlimpse .image {
        height: 460px
    }

    .eventNSMGlimpse .center {
        width: 52%;
        height: 440px
    }

    .eventNSMGlimpse .left,.eventNSMGlimpse .right {
        width: calc((48% - 20px)/2);
        transform: scale(.7)
    }

    .eventNSMGlimpse .navButton img {
        width: 35px;
        height: 35px
    }

    .eventNSMGlimpse .left.navButton {
        left: 9%
    }

    .eventNSMGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 480px) {
    .eventNSMGlimpse {
        padding:0% 1% 0
    }

    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer {
        width: 100%;
        margin: 40px 0
    }

    .eventNSMGlimpse .eventNSMGlimpseGlimpseContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 44%
    }

    .eventNSMGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .eventNSMGlimpse .image img,.eventNSMGlimpse .center,.eventNSMGlimpse .left,.eventNSMGlimpse .right {
        width: 260px;
        height: 163px
    }

    .eventNSMGlimpse .navButton {
        top: 32%
    }

    .eventNSMGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .eventNSMGlimpse .left.navButton {
        left: -2%
    }

    .eventNSMGlimpse .right.navButton {
        left: 81%
    }
}

.eventNSMHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.eventNSMHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.eventNSMHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.eventNSMHero img,.eventNSMHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.eventNSMHero img {
    width: 378px;
    height: 160px
}

.eventNSMHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .eventNSMHero {
        height:500px
    }

    .eventNSMHero video {
        height: 100%
    }

    .eventNSMHero:before {
        background: #0006
    }

    .eventNSMHero img {
        width: 320px;
        height: 150px
    }

    .eventNSMHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .eventNSMHero {
        height:480px
    }

    .eventNSMHero video {
        height: 100%
    }

    .eventNSMHero:before {
        background: #0006
    }

    .eventNSMHero img {
        width: 350px;
        height: 155px
    }

    .eventNSMHero p {
        width: 72%;
        font-size: 23px
    }
}

@media (max-width: 1280px) {
    .eventNSMHero {
        height:450px
    }

    .eventNSMHero video {
        height: 100%
    }

    .eventNSMHero:before {
        background: #0000004d
    }

    .eventNSMHero img {
        width: 300px;
        height: 140px
    }

    .eventNSMHero p {
        width: 78%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .eventNSMHero {
        height:420px
    }

    .eventNSMHero video {
        height: 100%
    }

    .eventNSMHero:before {
        background: #00000040
    }

    .eventNSMHero img {
        width: 260px;
        height: 125px
    }

    .eventNSMHero p {
        width: 80%;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .eventNSMHero {
        height:229px
    }

    .eventNSMHero img,.eventNSMHero p {
        margin-bottom: 12px
    }

    .eventNSMHero img {
        width: 97px;
        height: auto
    }

    .eventNSMHero p {
        width: 100%;
        font-size: 16px
    }
}

.eventNSMLegacy {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.eventNSMLegacy .left {
    width: 55%
}

.eventNSMLegacy .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px;
    padding-top: 30px
}

.eventNSMLegacy .right {
    padding-left: 60px;
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}

.eventNSMLegacy .right .image-container {
    position: relative;
    display: inline-block
}

.eventNSMLegacy .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.eventNSMLegacy .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.eventNSMLegacy .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .eventNSMLegacy .left {
        width:45%
    }

    .eventNSMLegacy .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .eventNSMLegacy .right {
        padding-left: 0;
        width: 50%
    }

    .eventNSMLegacy .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .eventNSMLegacy .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .eventNSMLegacy .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .eventNSMLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .eventNSMLegacy .left {
        width:48%
    }

    .eventNSMLegacy .left p {
        font-size: 22px;
        padding-bottom: 18px
    }

    .eventNSMLegacy .right {
        padding-left: 30px;
        width: 52%
    }

    .eventNSMLegacy .right .image-container .sb-image {
        width: 700px;
        height: 460px
    }

    .eventNSMLegacy .right .image-container .top-border {
        top: -12px;
        left: -18px
    }

    .eventNSMLegacy .right .image-container .bottom-border {
        bottom: -12px;
        right: -18px
    }
}

@media (max-width: 1280px) {
    .eventNSMLegacy .left {
        width:45%
    }

    .eventNSMLegacy .left p {
        font-size: 20px;
        padding-bottom: 14px
    }

    .eventNSMLegacy .right {
        padding-left: 0;
        width: 50%
    }

    .eventNSMLegacy .right .image-container .sb-image {
        width: 620px;
        height: 430px
    }

    .eventNSMLegacy .right .image-container .top-border {
        top: -8px;
        left: -12px
    }

    .eventNSMLegacy .right .image-container .bottom-border {
        bottom: -8px;
        right: -12px
    }
}

@media (max-width: 992px) {
    .eventNSMLegacy {
        flex-direction:column;
        align-items: center
    }

    .eventNSMLegacy .left {
        width: 90%;
        text-align: center
    }

    .eventNSMLegacy .left p {
        font-size: 18px;
        padding-top: 20px;
        padding-bottom: 12px
    }

    .eventNSMLegacy .right {
        padding-left: 0;
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .eventNSMLegacy .right .image-container .sb-image {
        width: 480px;
        height: 330px
    }

    .eventNSMLegacy .right .image-container .top-border {
        top: -6px;
        left: -10px
    }

    .eventNSMLegacy .right .image-container .bottom-border {
        bottom: -6px;
        right: -10px
    }
}

@media (max-width: 480px) {
    .eventNSMLegacy {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .eventNSMLegacy .left {
        width: 100%
    }

    .eventNSMLegacy .left .heading {
        font-size: 20px;
        padding-bottom: 12px
    }

    .eventNSMLegacy .left p {
        padding-top: 0;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .eventNSMLegacy .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .eventNSMLegacy .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .eventNSMLegacy .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .eventNSMLegacy .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .eventNSMLegacy .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .eventNSMLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .eventNSMLegacy .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.eventNSMSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.eventNSMSubHero .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.eventNSMSubHero .left h1 {
    width: 80%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.eventNSMSubHero .left p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.eventNSMSubHero .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/thumbnail-CwQT-LYh.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.eventNSMSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.eventNSMSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.eventNSMSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.eventNSMSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.eventNSMSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.eventNSMSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.eventNSMSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .eventNSMSubHero .left {
        height:520px;
        width: 56%
    }

    .eventNSMSubHero .left h1 {
        font-size: 52px
    }

    .eventNSMSubHero .left p {
        font-size: 22px
    }

    .eventNSMSubHero .right {
        width: 42%;
        height: 420px;
        right: 60px
    }

    .eventNSMSubHero .playbutton {
        width: 75px;
        height: 75px
    }

    .eventNSMSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .eventNSMSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .eventNSMSubHero .modal-overlay {
        background: #000000b3
    }

    .eventNSMSubHero .modal-content {
        width: 750px;
        padding: 8px
    }

    .eventNSMSubHero .close-button {
        top: -8px;
        right: -80px;
        width: 32px;
        height: 32px;
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .eventNSMSubHero .left {
        height:510px;
        width: 58%
    }

    .eventNSMSubHero .left h1 {
        font-size: 44px
    }

    .eventNSMSubHero .left p {
        font-size: 23px
    }

    .eventNSMSubHero .right {
        width: 43%;
        height: 430px;
        right: 55px
    }

    .eventNSMSubHero .playbutton {
        width: 78px;
        height: 78px
    }

    .eventNSMSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .eventNSMSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .eventNSMSubHero .modal-overlay {
        background: #000000bf
    }

    .eventNSMSubHero .modal-content {
        width: 780px;
        padding: 9px
    }

    .eventNSMSubHero .close-button {
        top: -9px;
        right: -75px;
        width: 34px;
        height: 34px;
        font-size: 19px
    }
}

@media (max-width: 1280px) {
    .eventNSMSubHero .left {
        height:490px;
        width: 60%
    }

    .eventNSMSubHero .left h1 {
        font-size: 44px
    }

    .eventNSMSubHero .left p {
        font-size: 20px
    }

    .eventNSMSubHero .right {
        width: 45%;
        height: 400px;
        right: 50px
    }

    .eventNSMSubHero .playbutton {
        width: 70px;
        height: 70px
    }

    .eventNSMSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .eventNSMSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .eventNSMSubHero .modal-overlay {
        background: #000000b3
    }

    .eventNSMSubHero .modal-content {
        width: 720px;
        padding: 7px
    }

    .eventNSMSubHero .close-button {
        top: -7px;
        right: -70px;
        width: 30px;
        height: 30px;
        font-size: 17px
    }
}

@media (max-width: 992px) {
    .eventNSMSubHero .left {
        height:460px;
        width: 53%
    }

    .eventNSMSubHero .left h1 {
        font-size: 34px
    }

    .eventNSMSubHero .left p {
        font-size: 18px;
        width: 75%
    }

    .eventNSMSubHero .right {
        width: 47%;
        height: 360px;
        right: 40px
    }

    .eventNSMSubHero .playbutton {
        width: 65px;
        height: 65px
    }

    .eventNSMSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .eventNSMSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .eventNSMSubHero .modal-overlay {
        background: #000000bf
    }

    .eventNSMSubHero .modal-content {
        width: 640px;
        padding: 6px
    }

    .eventNSMSubHero .close-button {
        top: -6px;
        right: -60px;
        width: 28px;
        height: 28px;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .eventNSMSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .eventNSMSubHero .left {
        text-align: left;
        width: 100%;
        height: auto;
        padding: 20px;
        box-shadow: none
    }

    .eventNSMSubHero .left h1 {
        font-size: 20px;
        width: 100%
    }

    .eventNSMSubHero .left p {
        font-size: 16px;
        width: 100%
    }

    .eventNSMSubHero .right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -3%
    }

    .eventNSMSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .eventNSMSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .eventNSMSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .eventNSMSubHero .modal-content {
        padding: 0
    }

    .eventNSMSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .eventNSMSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.event24FPSBenefits .heading {
    width: 65%;
    font-weight: 600
}

.event24FPSBenefits .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.event24FPSBenefits .E100Container .Event100 {
    width: 100%;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.event24FPSBenefits .E100Container .Event100:hover {
    background-color: #bc2329
}

.event24FPSBenefits .E100Container .Event100 .image {
    width: 80px;
    height: 80px
}

.event24FPSBenefits .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.event24FPSBenefits .E100Container .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.event24FPSBenefits .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.event24FPSBenefits .E100Container .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.event24FPSBenefits .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.event24FPSBenefits .E100Container .Event100:nth-child(5) {
    grid-column: span 3;
    width: 32%
}

.event24FPSBenefits .E100Container .Event100:nth-child(5) {
    justify-self: right;
    margin-right: 190px
}

.event24FPSBenefits .EventFPScroller {
    display: none
}

@media (max-width: 1536px) {
    .event24FPSBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .event24FPSBenefits .E100Container {
        padding: 35px 3.5%;
        gap: 18px
    }

    .event24FPSBenefits .E100Container .Event100 {
        height: 300px;
        padding: 18px;
        gap: 18px
    }

    .event24FPSBenefits .E100Container .Event100 .image {
        width: 75px;
        height: 75px
    }

    .event24FPSBenefits .E100Container .Event100 .title {
        font-size: 22px
    }

    .event24FPSBenefits .E100Container .Event100 .desc p {
        font-size: 17px
    }

    .event24FPSBenefits .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .event24FPSBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 32%
    }

    .event24FPSBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right;
        margin-right: 160px
    }

    .event24FPSBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .event24FPSBenefits .heading {
        width:72%;
        font-size: 50px
    }

    .event24FPSBenefits .E100Container {
        padding: 30px 5%;
        gap: 16px
    }

    .event24FPSBenefits .E100Container .Event100 {
        height: 280px;
        padding: 16px;
        gap: 16px
    }

    .event24FPSBenefits .E100Container .Event100 .image {
        width: 70px;
        height: 70px
    }

    .event24FPSBenefits .E100Container .Event100 .title {
        font-size: 20px
    }

    .event24FPSBenefits .E100Container .Event100 .desc p {
        font-size: 16px
    }

    .event24FPSBenefits .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .event24FPSBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 33%;
        justify-self: right;
        margin-right: 150px
    }

    .event24FPSBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .event24FPSBenefits .heading {
        width:75%;
        font-size: 48px
    }

    .event24FPSBenefits .E100Container {
        padding: 25px 4%;
        gap: 14px
    }

    .event24FPSBenefits .E100Container .Event100 {
        height: 260px;
        padding: 14px;
        gap: 14px
    }

    .event24FPSBenefits .E100Container .Event100 .image {
        width: 65px;
        height: 65px
    }

    .event24FPSBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .event24FPSBenefits .E100Container .Event100 .desc p {
        font-size: 15px
    }

    .event24FPSBenefits .E100Container .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .event24FPSBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 35%;
        justify-self: right;
        margin-right: 140px
    }

    .event24FPSBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 992px) {
    .event24FPSBenefits .heading {
        width:90%;
        font-size: 36px;
        font-weight: 600;
        padding: 0 2%
    }

    .event24FPSBenefits .E100Container {
        padding: 20px 5%;
        gap: 12px
    }

    .event24FPSBenefits .E100Container .Event100 {
        height: auto;
        padding: 12px;
        gap: 12px
    }

    .event24FPSBenefits .E100Container .Event100 .image {
        width: 50px;
        height: 50px
    }

    .event24FPSBenefits .E100Container .Event100 .title {
        font-size: 16px;
        font-weight: 600
    }

    .event24FPSBenefits .E100Container .Event100 .desc p {
        font-size: 14px
    }

    .event24FPSBenefits .E100Container .Event100 .line {
        border-bottom: 3px solid #fff
    }

    .event24FPSBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 480px) {
    .event24FPSBenefits {
        padding:1% 3% 5%
    }

    .event24FPSBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .event24FPSBenefits .E100Container {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .event24FPSBenefits .E100Container::-webkit-scrollbar {
        display: none
    }

    .event24FPSBenefits .E100Container .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .event24FPSBenefits .E100Container .Event100 .image {
        width: 40px;
        height: 40px
    }

    .event24FPSBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .event24FPSBenefits .E100Container .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .event24FPSBenefits .E100Container .Event100:nth-child(5) {
        margin-right: 0
    }

    .event24FPSBenefits .EventFPScroller {
        display: block;
        padding: 0 0 20px
    }
}

.event24FPSCategories {
    padding: 2.4% 0
}

.event24FPSCategories h1 {
    padding: 0 6%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps {
    width: 88%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 2.4% 10%;
    position: relative
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
    position: absolute
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop {
    right: 100px;
    top: 110px
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom {
    bottom: 90px;
    left: 100px
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
    right: 100px;
    top: 600px
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
    bottom: 580px;
    left: 100px
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step {
    background-color: #821131;
    display: flex;
    width: 60%;
    align-items: center;
    justify-content: center;
    gap: 31px
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step .left {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    font-size: 120px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right {
    display: flex;
    flex-direction: column;
    width: 70%;
    gap: 15px
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
    color: #fabc3f;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step:nth-child(2) {
    align-self: flex-end
}

.event24FPSCategories .event100HrsOfMaacChallenge-steps .step:nth-child(4) {
    align-self: flex-end
}

@media (max-width: 1536px) {
    .event24FPSCategories {
        padding:2% 0
    }

    .event24FPSCategories h1 {
        font-size: 52px;
        padding: 0 5%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps {
        width: 70%;
        padding: 2%;
        gap: 50px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop {
        right: -200px;
        top: 90px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 70%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom {
        left: -20px;
        bottom: 70px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 60%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        right: -200px;
        top: 420px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 img {
        width: 70%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        left: -20px;
        bottom: 410px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 img {
        width: 60%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step {
        width: 76%;
        gap: 20px;
        z-index: 1
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 60%;
        gap: 12px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 28px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .event24FPSCategories {
        padding:2.2% 0
    }

    .event24FPSCategories h1 {
        font-size: 54px;
        padding: 0 5%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps {
        width: 70%;
        padding: 2% 5%;
        gap: 45px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop {
        right: -19%;
        top: 90px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 65%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 2%;
        bottom: 120px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 55%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        right: -19%;
        top: 440px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 img {
        width: 65%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        left: 2%;
        bottom: 480px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 img {
        width: 55%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step {
        width: 78%;
        gap: 18px;
        z-index: 1
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 110px;
        -webkit-text-stroke-width: 2px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 63%;
        gap: 10px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 30px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 19px
    }
}

@media (max-width: 1280px) {
    .event24FPSCategories {
        padding:2% 0
    }

    .event24FPSCategories h1 {
        font-size: 50px;
        padding: 0 4%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps {
        width: 65%;
        padding: 2% 4%;
        gap: 40px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop {
        right: -26%;
        top: 80px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 60%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 0;
        bottom: 80px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 50%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        right: -26%;
        top: 400px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 img {
        width: 60%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        left: 0;
        bottom: 400px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 img {
        width: 50%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step {
        width: 80%;
        gap: 16px;
        z-index: 1
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 65%;
        gap: 8px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 28px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 17px
    }
}

@media (max-width: 992px) {
    .event24FPSCategories {
        padding:1.5% 0
    }

    .event24FPSCategories h1 {
        font-size: 42px;
        padding: 0 3%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps {
        width: 80%;
        padding: 1.5% 3%;
        gap: 30px;
        position: relative
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        display: none
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step {
        width: 90%;
        gap: 14px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 70px;
        -webkit-text-stroke-width: 1.5px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 70%;
        gap: 6px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 22px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 14px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step:nth-child(2),.event24FPSCategories .event100HrsOfMaacChallenge-steps .step:nth-child(4) {
        align-self: flex-start
    }
}

@media (max-width: 480px) {
    .event24FPSCategories {
        padding:1% 0 5%
    }

    .event24FPSCategories h1 {
        font-size: 20px;
        padding: 0 3%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps {
        gap: 14px;
        width: 100%;
        padding: 2% 3%
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step {
        width: 100%;
        height: 95px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 40px;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #fff)
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right {
        gap: 5px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 18px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 14px
    }

    .event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgBottom2,.event24FPSCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        display: none
    }
}

.event24FPSCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/fpsCTA-BDn3OtY5.png) #d3d3d3 50%/cover no-repeat
}

.event24FPSCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 80%
}

.event24FPSCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%;
    width: 65%
}

.event24FPSCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.event24FPSCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .event24FPSCTA {
        height:400px;
        background-size: cover
    }

    .event24FPSCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .event24FPSCTA p {
        font-size: 22px;
        width: 70%
    }

    .event24FPSCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .event24FPSCTA {
        height:420px;
        background-size: cover
    }

    .event24FPSCTA h1 {
        font-size: 54px;
        width: 70%
    }

    .event24FPSCTA p {
        font-size: 23px;
        width: 68%
    }

    .event24FPSCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 19px;
        padding: 12px 26px
    }
}

@media (max-width: 1280px) {
    .event24FPSCTA {
        height:380px;
        background-size: cover
    }

    .event24FPSCTA h1 {
        font-size: 50px;
        width: 60%
    }

    .event24FPSCTA p {
        font-size: 20px;
        width: 75%
    }

    .event24FPSCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 17px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .event24FPSCTA {
        height:350px;
        background-size: cover
    }

    .event24FPSCTA h1 {
        font-size: 44px;
        width: 75%
    }

    .event24FPSCTA p {
        font-size: 18px;
        width: 80%
    }

    .event24FPSCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 18px
    }
}

@media (max-width: 480px) {
    .event24FPSCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center
    }

    .event24FPSCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .event24FPSCTA p {
        font-size: 16px;
        width: 90%
    }

    .event24FPSCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.event24FPSGlimpse {
    padding: 0;
    overflow: hidden
}

.event24FPSGlimpse .eventFPSGlimpseGlimpseContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.event24FPSGlimpse .eventFPSGlimpseGlimpseContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.event24FPSGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.event24FPSGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.event24FPSGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.event24FPSGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.event24FPSGlimpse .left,.event24FPSGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.event24FPSGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.event24FPSGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.event24FPSGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.event24FPSGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:60px 0
    }

    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .event24FPSGlimpse .imageContainer {
        gap: 30px
    }

    .event24FPSGlimpse .image {
        height: 550px
    }

    .event24FPSGlimpse .center {
        width: 50%;
        height: 520px
    }

    .event24FPSGlimpse .left,.event24FPSGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .event24FPSGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .event24FPSGlimpse .left.navButton {
        left: 12%
    }

    .event24FPSGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:70px 0
    }

    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 50%;
        height: 8px;
        margin-top: 39%
    }

    .event24FPSGlimpse .imageContainer {
        gap: 35px
    }

    .event24FPSGlimpse .image {
        height: 560px
    }

    .event24FPSGlimpse .center {
        width: 51%;
        height: 530px
    }

    .event24FPSGlimpse .left,.event24FPSGlimpse .right {
        width: calc((49% - 50px)/2);
        transform: scale(.82)
    }

    .event24FPSGlimpse .navButton img {
        width: 48px;
        height: 48px
    }

    .event24FPSGlimpse .left.navButton {
        left: 13%
    }

    .event24FPSGlimpse .right.navButton {
        left: 80%
    }
}

@media (max-width: 1280px) {
    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:50px 0
    }

    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 52%;
        height: 6px;
        margin-top: 40%
    }

    .event24FPSGlimpse .imageContainer {
        gap: 25px
    }

    .event24FPSGlimpse .image {
        height: 500px
    }

    .event24FPSGlimpse .center {
        width: 52%;
        height: 500px
    }

    .event24FPSGlimpse .left,.event24FPSGlimpse .right {
        width: calc((48% - 30px)/2);
        transform: scale(.75)
    }

    .event24FPSGlimpse .navButton img {
        width: 40px;
        height: 40px
    }

    .event24FPSGlimpse .left.navButton {
        left: 10%
    }

    .event24FPSGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 992px) {
    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:40px 0
    }

    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 52%;
        height: 5px;
        margin-top: 44%
    }

    .event24FPSGlimpse .imageContainer {
        gap: 20px
    }

    .event24FPSGlimpse .image {
        height: 440px
    }

    .event24FPSGlimpse .center {
        width: 54%;
        height: 440px
    }

    .event24FPSGlimpse .left,.event24FPSGlimpse .right {
        width: calc((46% - 20px)/2);
        transform: scale(.7)
    }

    .event24FPSGlimpse .navButton img {
        width: 36px;
        height: 36px
    }

    .event24FPSGlimpse .left.navButton {
        left: 9%
    }

    .event24FPSGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 480px) {
    .event24FPSGlimpse {
        padding:0% 1% 0
    }

    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer {
        width: 100%;
        margin: 40px 0
    }

    .event24FPSGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 44%
    }

    .event24FPSGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .event24FPSGlimpse .image img,.event24FPSGlimpse .center,.event24FPSGlimpse .left,.event24FPSGlimpse .right {
        width: 260px;
        height: 163px
    }

    .event24FPSGlimpse .navButton {
        top: 32%
    }

    .event24FPSGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .event24FPSGlimpse .left.navButton {
        left: -2%
    }

    .event24FPSGlimpse .right.navButton {
        left: 80%
    }
}

.event24FPSHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.event24FPSHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.event24FPSHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.event24FPSHero img,.event24FPSHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.event24FPSHero img {
    width: 428px;
    height: 160px
}

.event24FPSHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .event24FPSHero {
        height:500px
    }

    .event24FPSHero video {
        height: 100%
    }

    .event24FPSHero:before {
        background: #0006
    }

    .event24FPSHero img {
        width: 360px;
        height: 150px
    }

    .event24FPSHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .event24FPSHero {
        height:480px
    }

    .event24FPSHero video {
        height: 100%
    }

    .event24FPSHero:before {
        background: #00000073
    }

    .event24FPSHero img {
        width: 380px;
        height: 160px
    }

    .event24FPSHero p {
        width: 80%;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .event24FPSHero {
        height:450px
    }

    .event24FPSHero video {
        height: 100%
    }

    .event24FPSHero:before {
        background: #00000080
    }

    .event24FPSHero img {
        width: 340px;
        height: 140px
    }

    .event24FPSHero p {
        width: 80%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .event24FPSHero {
        height:400px
    }

    .event24FPSHero video {
        height: 100%
    }

    .event24FPSHero:before {
        background: #00000080
    }

    .event24FPSHero img {
        width: 300px;
        height: 120px
    }

    .event24FPSHero p {
        width: 85%;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .event24FPSHero {
        height:229px
    }

    .event24FPSHero img,.event24FPSHero p {
        margin-bottom: 12px
    }

    .event24FPSHero img {
        width: 100px;
        height: auto
    }

    .event24FPSHero p {
        width: 100%;
        font-size: 16px
    }
}

.event24FPSLegacy {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.event24FPSLegacy .left {
    width: 55%
}

.event24FPSLegacy .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px;
    padding-top: 30px
}

.event24FPSLegacy .right {
    padding-left: 60px;
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}

.event24FPSLegacy .right .image-container {
    position: relative;
    display: inline-block
}

.event24FPSLegacy .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.event24FPSLegacy .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.event24FPSLegacy .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .event24FPSLegacy .left {
        width:45%
    }

    .event24FPSLegacy .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .event24FPSLegacy .right {
        padding-left: 0;
        width: 50%
    }

    .event24FPSLegacy .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .event24FPSLegacy .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .event24FPSLegacy .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .event24FPSLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .event24FPSLegacy {
        gap:4%
    }

    .event24FPSLegacy .left {
        width: 45%
    }

    .event24FPSLegacy .left p {
        font-size: 22px;
        padding-bottom: 18px
    }

    .event24FPSLegacy .right {
        width: 48%
    }

    .event24FPSLegacy .right .image-container .sb-image {
        width: 680px;
        height: 460px
    }

    .event24FPSLegacy .right .image-container .top-border {
        top: -12px;
        left: -18px
    }

    .event24FPSLegacy .right .image-container .bottom-border {
        bottom: -12px;
        right: -18px
    }
}

@media (max-width: 1280px) {
    .event24FPSLegacy {
        gap:4%
    }

    .event24FPSLegacy .left {
        width: 50%;
        text-align: left
    }

    .event24FPSLegacy .left p {
        font-size: 18px;
        padding-bottom: 14px
    }

    .event24FPSLegacy .right {
        width: 50%;
        padding-left: 0
    }

    .event24FPSLegacy .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .event24FPSLegacy .right .image-container .top-border {
        top: -8px;
        left: -12px
    }

    .event24FPSLegacy .right .image-container .bottom-border {
        bottom: -8px;
        right: -12px
    }
}

@media (max-width: 992px) {
    .event24FPSLegacy {
        gap:3%
    }

    .event24FPSLegacy .left {
        width: 50%
    }

    .event24FPSLegacy .left p {
        font-size: 16px;
        padding-top: 24px;
        padding-bottom: 12px
    }

    .event24FPSLegacy .right {
        width: 50%;
        padding-left: 0
    }

    .event24FPSLegacy .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .event24FPSLegacy .right .image-container .top-border {
        top: -6px;
        left: -10px
    }

    .event24FPSLegacy .right .image-container .top-border img {
        width: 12vw
    }

    .event24FPSLegacy .right .image-container .bottom-border {
        bottom: -6px;
        right: -10px
    }

    .event24FPSLegacy .right .image-container .bottom-border img {
        width: 12vw
    }
}

@media (max-width: 480px) {
    .event24FPSLegacy {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .event24FPSLegacy .left {
        width: 100%
    }

    .event24FPSLegacy .left .heading {
        font-size: 20px;
        padding-bottom: 12px
    }

    .event24FPSLegacy .left p {
        padding-top: 0;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .event24FPSLegacy .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .event24FPSLegacy .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .event24FPSLegacy .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .event24FPSLegacy .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .event24FPSLegacy .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .event24FPSLegacy .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .event24FPSLegacy .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.event24FPSSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.event24FPSSubHero .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.event24FPSSubHero .left h1 {
    width: 85%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.event24FPSSubHero .left p {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.event24FPSSubHero .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/h1-DFHTRenr.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.event24FPSSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.event24FPSSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.event24FPSSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.event24FPSSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.event24FPSSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.event24FPSSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.event24FPSSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .event24FPSSubHero .left {
        height:520px;
        width: 56%
    }

    .event24FPSSubHero .left h1 {
        font-size: 52px
    }

    .event24FPSSubHero .left p {
        font-size: 22px
    }

    .event24FPSSubHero .right {
        width: 42%;
        height: 420px;
        right: 60px
    }

    .event24FPSSubHero .playbutton {
        width: 75px;
        height: 75px
    }

    .event24FPSSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .event24FPSSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .event24FPSSubHero .modal-overlay {
        background: #000000b3
    }

    .event24FPSSubHero .modal-content {
        width: 750px;
        padding: 8px
    }

    .event24FPSSubHero .close-button {
        top: -8px;
        right: -80px;
        width: 32px;
        height: 32px;
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .event24FPSSubHero .left {
        height:500px;
        width: 58%
    }

    .event24FPSSubHero .left h1 {
        font-size: 48px
    }

    .event24FPSSubHero .left p {
        font-size: 20px;
        width: 85%
    }

    .event24FPSSubHero .right {
        width: 40%;
        height: 400px;
        right: 40px
    }

    .event24FPSSubHero .playbutton {
        width: 70px;
        height: 70px
    }

    .event24FPSSubHero .modal-content {
        width: 700px;
        padding: 8px
    }

    .event24FPSSubHero .close-button {
        top: -8px;
        right: -60px;
        width: 30px;
        height: 30px;
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .event24FPSSubHero .left {
        width:100%;
        height: auto;
        padding: 40px 0
    }

    .event24FPSSubHero .left h1 {
        font-size: 40px;
        width: 90%
    }

    .event24FPSSubHero .left p {
        font-size: 18px;
        width: 90%
    }

    .event24FPSSubHero .right {
        position: static;
        width: 90%;
        height: 300px;
        background-size: cover
    }

    .event24FPSSubHero .playbutton {
        width: 64px;
        height: 64px
    }

    .event24FPSSubHero .modal-content {
        width: 90%
    }

    .event24FPSSubHero .close-button {
        right: -10px
    }
}

@media (max-width: 992px) {
    .event24FPSSubHero .left {
        width:50%;
        height: auto;
        padding: 30px 0
    }

    .event24FPSSubHero .left h1 {
        font-size: 34px;
        width: 90%;
        margin-bottom: 1.5%
    }

    .event24FPSSubHero .left p {
        font-size: 16px;
        width: 90%
    }

    .event24FPSSubHero .right {
        position: absolute;
        width: 48%;
        height: 280px;
        right: 20px;
        background-size: cover;
        background-position: center
    }

    .event24FPSSubHero .playbutton {
        width: 56px;
        height: 56px
    }

    .event24FPSSubHero .modal-content {
        width: 90%;
        padding: 6px
    }

    .event24FPSSubHero .close-button {
        top: -6px;
        right: -20px;
        width: 28px;
        height: 28px;
        font-size: 15px
    }
}

@media (max-width: 480px) {
    .event24FPSSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .event24FPSSubHero .left {
        text-align: left;
        width: 100%;
        height: auto;
        padding: 20px;
        box-shadow: none
    }

    .event24FPSSubHero .left h1 {
        font-size: 20px;
        width: 100%
    }

    .event24FPSSubHero .left p {
        font-size: 16px;
        width: 100%
    }

    .event24FPSSubHero .right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -3%
    }

    .event24FPSSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .event24FPSSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .event24FPSSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .event24FPSSubHero .modal-content {
        padding: 0
    }

    .event24FPSSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .event24FPSSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.event24FPSTalent {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.event24FPSTalent .left {
    width: 55%
}

.event24FPSTalent .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px;
    padding-top: 30px
}

.event24FPSTalent .right {
    padding-left: 60px;
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}

.event24FPSTalent .right .image-container {
    position: relative;
    display: inline-block
}

.event24FPSTalent .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.event24FPSTalent .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.event24FPSTalent .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .event24FPSTalent .left {
        width:45%
    }

    .event24FPSTalent .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .event24FPSTalent .right {
        padding-left: 0;
        width: 50%
    }

    .event24FPSTalent .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .event24FPSTalent .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .event24FPSTalent .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .event24FPSTalent .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .event24FPSTalent .left {
        width:47%
    }

    .event24FPSTalent .left p {
        font-size: 18px;
        padding-bottom: 16px;
        padding-top: 24px
    }

    .event24FPSTalent .right {
        padding-left: 30px;
        width: 53%
    }

    .event24FPSTalent .right .image-container .sb-image {
        width: 620px;
        height: 420px
    }

    .event24FPSTalent .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .event24FPSTalent .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1280px) {
    .event24FPSTalent .left {
        width:100%;
        text-align: left;
        padding: 20px
    }

    .event24FPSTalent .left p {
        font-size: 16px;
        width: 90%
    }

    .event24FPSTalent .right {
        padding-left: 0;
        width: 90%
    }

    .event24FPSTalent .right .image-container .sb-image {
        width: 100%;
        max-width: 600px;
        height: auto
    }

    .event24FPSTalent .right .image-container .top-border {
        top: -8px;
        left: -12px
    }

    .event24FPSTalent .right .image-container .bottom-border {
        bottom: -8px;
        right: -12px
    }
}

@media (max-width: 992px) {
    .event24FPSTalent .left {
        width:48%;
        padding: 16px
    }

    .event24FPSTalent .left p {
        font-size: 15px;
        padding-bottom: 14px;
        padding-top: 20px;
        width: 95%
    }

    .event24FPSTalent .right {
        padding-left: 20px;
        width: 52%
    }

    .event24FPSTalent .right .image-container .sb-image {
        width: 500px;
        height: auto
    }

    .event24FPSTalent .right .image-container .top-border {
        top: -6px;
        left: -10px
    }

    .event24FPSTalent .right .image-container .top-border img {
        width: 12vw
    }

    .event24FPSTalent .right .image-container .bottom-border {
        bottom: -6px;
        right: -10px
    }

    .event24FPSTalent .right .image-container .bottom-border img {
        width: 12vw
    }
}

@media (max-width: 480px) {
    .event24FPSTalent {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .event24FPSTalent .left {
        width: 100%
    }

    .event24FPSTalent .left .heading {
        font-size: 20px;
        padding-bottom: 12px
    }

    .event24FPSTalent .left p {
        padding-top: 0;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .event24FPSTalent .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .event24FPSTalent .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .event24FPSTalent .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .event24FPSTalent .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .event24FPSTalent .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .event24FPSTalent .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .event24FPSTalent .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.GHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/GHero-Da7jAco0.png),no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 695px
}

.GHero h1 {
    width: 55%;
    color: #fff;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 500
}

.GHero p {
    width: 58%;
    padding-top: 20px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .GHero {
        height:620px;
        background-size: cover
    }

    .GHero h1 {
        font-size: 72px
    }

    .GHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .GHero {
        height:580px
    }

    .GHero h1 {
        font-size: 64px;
        width: 60%
    }

    .GHero p {
        font-size: 20px;
        width: 70%
    }
}

@media (max-width: 1280px) {
    .GHero {
        height:520px
    }

    .GHero h1 {
        font-size: 54px;
        width: 65%
    }

    .GHero p {
        font-size: 18px;
        width: 75%
    }
}

@media (max-width: 992px) {
    .GHero {
        height:450px
    }

    .GHero h1 {
        font-size: 42px;
        width: 80%
    }

    .GHero p {
        font-size: 16px;
        width: 85%;
        padding-top: 12px
    }
}

@media (max-width: 480px) {
    .GHero {
        height:229px;
        background-size: cover;
        background-position: center;
        padding: 20px
    }

    .GHero h1 {
        font-size: 20px;
        width: 100%;
        font-weight: 600
    }

    .GHero p {
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        padding-top: 20px
    }
}

.GalleryBest {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 20px
}

.GalleryBest .heading {
    font-size: 56px;
    width: 50%;
    margin: auto
}

.GalleryBest .subheading {
    margin: auto;
    width: 65%;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.GalleryBest .imgvideoSeperator {
    color: #fff;
    width: 40%;
    justify-content: space-between;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: auto;
    display: flex;
    padding: 20px;
    position: relative
}

.GalleryBest .imgvideoSeperator div {
    cursor: pointer;
    position: relative;
    padding-bottom: 5px;
    transition: color .3s ease
}

.GalleryBest .imgvideoSeperator div:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 3px;
    background-color: #fabc3f;
    transition: width .3s ease
}

.GalleryBest .imgvideoSeperator div:hover:after {
    width: 100%
}

.GalleryBest .imgvideoSeperator .active {
    color: #fabc3f;
    font-weight: 700
}

.GalleryBest .imgvideoSeperator .active:after {
    width: 100%
}

.GalleryBest .imgvideoCards {
    display: flex;
    width: 100%;
    gap: 2.5%
}

.GalleryBest .imgvideoCards .imgvideoCard {
    width: 24%
}

.GalleryBest .imgvideoCards .imgvideoCard img,.GalleryBest .imgvideoCards .imgvideoCard video {
    width: 100%;
    height: 460px;
    object-fit: cover
}

.GalleryBest .galleryBestScroller {
    display: none
}

@media (max-width: 1536px) {
    .GalleryBest .heading {
        font-size:48px
    }

    .GalleryBest .subheading {
        font-size: 18px
    }

    .GalleryBest .imgvideoSeperator {
        width: 28%;
        font-size: 18px
    }

    .GalleryBest .imgvideoCards .imgvideoCard img,.GalleryBest .imgvideoCards .imgvideoCard video {
        height: 380px
    }
}

@media (max-width: 1440px) {
    .GalleryBest .heading {
        font-size:42px
    }

    .GalleryBest .subheading {
        font-size: 16px;
        width: 60%
    }

    .GalleryBest .imgvideoSeperator {
        width: 30%;
        font-size: 16px
    }

    .GalleryBest .imgvideoCards .imgvideoCard img,.GalleryBest .imgvideoCards .imgvideoCard video {
        height: 340px
    }
}

@media (max-width: 1280px) {
    .GalleryBest .heading {
        font-size:36px
    }

    .GalleryBest .subheading {
        font-size: 14px;
        width: 58%
    }

    .GalleryBest .imgvideoSeperator {
        width: 32%;
        font-size: 14px
    }

    .GalleryBest .imgvideoCards .imgvideoCard img,.GalleryBest .imgvideoCards .imgvideoCard video {
        height: 300px
    }
}

@media (max-width: 992px) {
    .GalleryBest .heading {
        font-size:30px;
        width: 70%
    }

    .GalleryBest .subheading {
        font-size: 12px;
        width: 70%
    }

    .GalleryBest .imgvideoSeperator {
        width: 40%;
        font-size: 12px;
        padding: 15px
    }

    .GalleryBest .imgvideoCards {
        gap: 2%
    }

    .GalleryBest .imgvideoCards .imgvideoCard {
        width: 48%
    }

    .GalleryBest .imgvideoCards .imgvideoCard img,.GalleryBest .imgvideoCards .imgvideoCard video {
        height: 220px
    }
}

@media (max-width: 480px) {
    .GalleryBest {
        gap:12px
    }

    .GalleryBest .heading {
        width: 75%;
        font-size: 20px
    }

    .GalleryBest .subheading {
        width: 100%;
        font-size: 16px
    }

    .GalleryBest .imgvideoSeperator {
        font-size: 16px;
        width: 85%;
        padding: 8px 0
    }

    .GalleryBest .imgvideoSeperator div:after {
        display: none
    }

    .GalleryBest .imgvideoSeperator div:hover:after {
        width: 0
    }

    .GalleryBest .imgvideoCards {
        overflow-x: scroll
    }

    .GalleryBest .imgvideoCards::-webkit-scrollbar {
        display: none
    }

    .GalleryBest .imgvideoCards .imgvideoCard {
        flex: 0 0 100%
    }

    .GalleryBest .imgvideoCards .imgvideoCard img,.GalleryBest .imgvideoCards .imgvideoCard video {
        object-fit: cover;
        height: 386px
    }

    .GalleryBest .galleryBestScroller {
        display: block
    }
}

.GalleryMasterpiece {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.GalleryMasterpiece .heading {
    text-align: center
}

.GalleryMasterpiece .gmHeader {
    display: flex;
    width: 80%;
    gap: 3%;
    padding: .5% 1.8%;
    margin: auto;
    border-radius: 40px;
    justify-content: center;
    background-color: #f3f3f3
}

.GalleryMasterpiece .gmHeader .animated-button {
    width: 28%;
    color: #0f0f0f;
    border: none;
    background: transparent
}

.GalleryMasterpiece .gmHeader .animated-button .btn-background {
    background-color: #bc2329
}

.GalleryMasterpiece .gmHeader .animated-button.active {
    background-color: #bc2329;
    color: #f3f3f3
}

.GalleryMasterpiece .GMContainer {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.GalleryMasterpiece .GMContainer .title {
    color: #f0af13;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.GalleryMasterpiece .GMContainer .titleDesc {
    color: #fff;
    margin: auto;
    text-align: center;
    width: 50%;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.GalleryMasterpiece .GMContainer .GMCards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    width: 100%;
    margin-top: 50px;
}

.GalleryMasterpiece .GMContainer .GMCards .GMCard {
    position: relative;
    width: 100%;
    height: 460px
}

.GalleryMasterpiece .GMContainer .GMCards .GMCard .bg {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.GalleryMasterpiece .GMContainer .GMCards .GMCard .playButton {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.GalleryMasterpiece .GMContainer .videoModal {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 2%;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center
}

.GalleryMasterpiece .GMContainer .videoModal .videoOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c
}

.GalleryMasterpiece .GMContainer .videoModal .videoContent {
    position: relative;
    z-index: 2;
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #000
}

.GalleryMasterpiece .GMContainer .videoModal .videoContent .videoPlayer {
    width: 100%;
    height: 100%;
    border: none
}

.GalleryMasterpiece .pagination {
    display: none;
    align-items: center;
    justify-content: center;
    padding-top: 2%;
    gap: 20px
}

.GalleryMasterpiece .pagination img {
    width: 45px;
    height: 30px;
    cursor: pointer;
    transition: .3s
}

.GalleryMasterpiece .pagination img.disabled {
    opacity: .5;
    cursor: not-allowed
}

.GalleryMasterpiece .pagination img:hover:not(.disabled) {
    transform: scale(1.1)
}

.GalleryMasterpiece .pagination .pages {
    display: flex;
    gap: 20px
}

.GalleryMasterpiece .pagination .pages span {
    font-size: 24px;
    height: 60px;
    width: 60px;
    padding: 15px 22px;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s
}

.GalleryMasterpiece .pagination .pages span.active {
    margin-top: 0!important;
    border: 1px solid #c7253e;
    font-weight: 700
}

@media (max-width: 1536px) {
    .GalleryMasterpiece .heading {
        font-size:48px
    }

    .GalleryMasterpiece .GMContainer .title {
        font-size: 28px
    }

    .GalleryMasterpiece .GMContainer .titleDesc {
        font-size: 18px
    }

    .GalleryMasterpiece .GMContainer .GMCards .GMCard {
        height: 420px
    }
}

@media (max-width: 1440px) {
    .GalleryMasterpiece .heading {
        font-size:42px
    }

    .GalleryMasterpiece .gmHeader {
        width: 85%
    }

    .GalleryMasterpiece .gmHeader .animated-button {
        width: 30%
    }

    .GalleryMasterpiece .GMContainer .title {
        font-size: 24px
    }

    .GalleryMasterpiece .GMContainer .titleDesc {
        font-size: 16px;
        width: 60%
    }

    .GalleryMasterpiece .GMContainer .GMCards .GMCard {
        height: 380px
    }

    .GalleryMasterpiece .pagination .pages span {
        font-size: 20px;
        height: 50px;
        width: 50px
    }
}

@media (max-width: 1280px) {
    .GalleryMasterpiece .heading {
        font-size:36px
    }

    .GalleryMasterpiece .gmHeader {
        width: 90%
    }

    .GalleryMasterpiece .gmHeader .animated-button {
        width: 32%
    }

    .GalleryMasterpiece .GMContainer .title {
        font-size: 20px
    }

    .GalleryMasterpiece .GMContainer .titleDesc {
        font-size: 14px;
        width: 65%
    }

    .GalleryMasterpiece .GMContainer .GMCards .GMCard {
        height: 340px
    }

    .GalleryMasterpiece .pagination .pages span {
        font-size: 18px;
        height: 44px;
        width: 44px
    }

    .GalleryMasterpiece .pagination img {
        width: 38px;
        height: 26px
    }
}

@media (max-width: 992px) {
    .GalleryMasterpiece .heading {
        font-size:30px
    }

    .GalleryMasterpiece .gmHeader {
        width: 95%
    }

    .GalleryMasterpiece .gmHeader .animated-button {
        width: 45%;
        font-size: 14px
    }

    .GalleryMasterpiece .GMContainer .title {
        font-size: 18px
    }

    .GalleryMasterpiece .GMContainer .titleDesc {
        font-size: 12px;
        width: 80%
    }

    .GalleryMasterpiece .GMContainer .GMCards {
        grid-template-columns: repeat(4,1fr);
        gap: 15px
    }

    .GalleryMasterpiece .GMContainer .GMCards .GMCard {
        height: 280px
    }
}

@media (max-width: 480px) {
    .GalleryMasterpiece .heading {
        width:100%;
        font-size: 24px
    }

    .GalleryMasterpiece .gmHeader {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: start;
        width: 100%;
        overflow-x: scroll;
        border-radius: 0;
        margin: 0
    }

    .GalleryMasterpiece .gmHeader::-webkit-scrollbar {
        display: none
    }

    .GalleryMasterpiece .gmHeader .animated-button {
        flex: 0 0 40%;
        font-size: 14px;
        padding: 0
    }

    .GalleryMasterpiece .GMContainer .title {
        width: 100%;
        font-size: 18px
    }

    .GalleryMasterpiece .GMContainer .titleDesc {
        width: 90%;
        font-size: 14px
    }

    .GalleryMasterpiece .GMContainer .GMCards {
        display: flex;
        flex-direction: column
    }

    .GalleryMasterpiece .GMContainer .GMCards .GMCard {
        height: 387px
    }

    .GalleryMasterpiece .pagination {
        display: flex;
        width: 100%;
        scale: .5
    }
}

.GalleryCTA {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 382px;
    text-align: center;
    background: linear-gradient(0deg,#00000080,#00000080),url(../assets/cta-BK-u3lJs.jpeg) #d3d3d3 -12.013px -498px/101.393% 285.541% no-repeat;
    background-repeat: no-repeat;
    gap: 20px
}

.GalleryCTA .ctaTitle {
    width: 65%
}

.GalleryCTA .ctaTitle h1 {
    text-align: center;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.GalleryCTA .ctaDesc {
    width: 65%
}

.GalleryCTA .ctaDesc p {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.GalleryCTA .ctaButton {
    padding: 40px 0
}

.GalleryCTA .ctaButton .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.GalleryCTA .ctaButton .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .GalleryCTA {
        height:350px
    }

    .GalleryCTA .ctaTitle {
        width: 100%
    }

    .GalleryCTA .ctaTitle h1 {
        margin: auto;
        width: 75%;
        font-size: 52px
    }

    .GalleryCTA .ctaDesc p {
        text-align: center;
        font-size: 24px
    }

    .GalleryCTA .ctaButton .animated-button {
        border: 1px solid #fff;
        color: #fff;
        padding: 12px 24px
    }

    .GalleryCTA .ctaButton .btn-background {
        background-color: #fff;
        opacity: .9
    }
}

@media (max-width: 1440px) {
    .GalleryCTA {
        height:320px
    }

    .GalleryCTA .ctaTitle h1 {
        font-size: 44px;
        width: 80%
    }

    .GalleryCTA .ctaDesc p {
        font-size: 20px
    }

    .GalleryCTA .ctaButton .animated-button {
        padding: 10px 22px;
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .GalleryCTA {
        height:300px
    }

    .GalleryCTA .ctaTitle h1 {
        font-size: 36px;
        width: 85%
    }

    .GalleryCTA .ctaDesc p {
        font-size: 18px
    }

    .GalleryCTA .ctaButton .animated-button {
        padding: 8px 20px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .GalleryCTA {
        background-position:center;
        height: 192px;
        gap: 0
    }

    .GalleryCTA .ctaTitle {
        width: 100%;
        margin-top: 1%
    }

    .GalleryCTA .ctaTitle h1 {
        font-size: 20px
    }

    .GalleryCTA .ctaDesc {
        width: 100%
    }

    .GalleryCTA .ctaDesc p {
        font-size: 14px
    }

    .GalleryCTA .ctaButton {
        padding: 1% 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%
    }

    .GalleryCTA .ctaButton .animated-button {
        font-size: 14px;
        padding: 12px 26px;
        width: auto
    }
}

.placementAssistance {
    width: 100%;
    height: 60vh;
    background: #821131;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    margin: 5vh 0;
    padding: 5vh 13.7vw;
    display: flex
}

.placementAssistance .pa-left {
    width: 60%;
    position: relative
}

.placementAssistance .pa-left .heading {
    width: 90%;
    margin-bottom: 3vh
}

.placementAssistance .pa-left .ta-top {
    position: absolute
}

.placementAssistance .pa-left p {
    position: absolute;
    font-size: 1.25vw;
    line-height: 1.5;
    color: #fff;
    width: 90%;
    bottom: 14%;
    left: 5%;
    text-align: center
}

.placementAssistance .pa-left .ta-bottom {
    left: 80%;
    bottom: -.5vh;
    position: absolute
}

.placementAssistance .pa-right {
    position: relative;
    width: 40%;
    display: flex;
    justify-content: flex-end
}

.placementAssistance .pa-right img {
    position: absolute;
    right: -10vw;
    bottom: -5vh;
    width: 36vw;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 71/110
}

@media (max-width: 1440px) {
    .placementAssistance {
        height:55vh;
        padding: 5vh 10vw
    }

    .placementAssistance .pa-left .heading {
        width: 95%;
        margin-bottom: 2.5vh
    }

    .placementAssistance .pa-left p {
        font-size: 1.4vw;
        width: 95%;
        bottom: 13%
    }

    .placementAssistance .pa-left .ta-bottom {
        left: 78%
    }

    .placementAssistance .pa-right img {
        right: -9vw;
        width: 34vw
    }
}

@media (max-width: 1280px) {
    .placementAssistance {
        height:50vh;
        padding: 4.5vh 8vw
    }

    .placementAssistance .pa-left .heading {
        width: 100%;
        margin-bottom: 2vh
    }

    .placementAssistance .pa-left p {
        font-size: 1.5vw;
        width: 90%;
        bottom: 12%
    }

    .placementAssistance .pa-left .ta-bottom {
        left: 75%
    }

    .placementAssistance .pa-right img {
        right: -8vw;
        width: 32vw
    }
}

@media (max-width: 992px) {
    .placementAssistance {
        height:45vh;
        padding: 4vh 6vw
    }

    .placementAssistance .pa-left .heading {
        width: 100%;
        margin-bottom: 1.5vh
    }

    .placementAssistance .pa-left p {
        font-size: 1.8vw;
        width: 100%;
        bottom: 10%;
        left: 2%
    }

    .placementAssistance .pa-left .ta-bottom {
        left: 72%;
        bottom: -1vh
    }

    .placementAssistance .pa-right img {
        right: -6vw;
        width: 30vw;
        bottom: -4vh
    }
}

@media (max-width: 480px) {
    .placementAssistance {
        height:521px;
        padding: 5vh 4vw;
        flex-direction: column;
        align-items: left;
        text-align: left
    }

    .placementAssistance .pa-left {
        width: 100%;
        order: 1;
        position: relative
    }

    .placementAssistance .pa-left .heading {
        width: 100%;
        font-size: 20px
    }

    .placementAssistance .pa-left .ta-top {
        position: absolute;
        left: -10px;
        top: 16vw
    }

    .placementAssistance .pa-left .ta-top img {
        width: 50%
    }

    .placementAssistance .pa-left p {
        font-size: 16px;
        width: 100%;
        text-align: left;
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 3vh
    }

    .placementAssistance .pa-left .ta-bottom {
        position: absolute;
        bottom: -20px;
        right: 20px
    }

    .placementAssistance .pa-left .ta-bottom img {
        width: 160%
    }

    .placementAssistance .pa-right {
        width: 100%;
        display: flex;
        justify-content: center;
        order: 2;
        margin-top: 5vh
    }

    .placementAssistance .pa-right img {
        position: relative;
        width: 80%;
        right: auto;
        bottom: 172px;
        aspect-ratio: auto
    }
}

.placementCareer .heading {
    margin-bottom: 5vh
}

.placementCareer .career-container {
    display: flex;
    flex-direction: column
}

.placementCareer .career-container .career-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0vw
}

.placementCareer .career-container .career-card:nth-child(1),.placementCareer .career-container .career-card:nth-child(3) {
    justify-self: flex-start
}

.placementCareer .career-container .career-card:nth-child(2),.placementCareer .career-container .career-card:nth-child(4) {
    justify-self: flex-end
}

.placementCareer .career-container .career-card .left {
    display: flex;
    align-items: center;
    gap: 2vw;
    width: 60%
}

.placementCareer .career-container .career-card .left .career-number h2 {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    font-size: 120px;
    font-weight: 600
}

.placementCareer .career-container .career-card .left .career-text {
    width: 80%;
    text-align: left;
    position: relative
}

.placementCareer .career-container .career-card .left .career-text .border-top {
    width: 8vw;
    top: -50px;
    left: 0;
    position: absolute
}

.placementCareer .career-container .career-card .left .career-text .text-box {
    margin-left: 5rem
}

.placementCareer .career-container .career-card .left .career-text .text-box h3 {
    font-size: 2.2vw;
    font-weight: 700;
    margin-bottom: .5rem;
    width: 60%
}

.placementCareer .career-container .career-card .left .career-text .text-box p {
    font-size: 1.1vw;
    font-weight: 500;
    line-height: 1.5;
    width: 60%
}

.placementCareer .career-container .career-card .left .career-text .border-bottom {
    position: absolute;
    width: 8vw;
    bottom: -40px;
    right: 160px;
    align-self: flex-end
}

.placementCareer .career-container .career-card .right img {
    width: 402px;
    height: 422px
}

.placementCareer .career-container .career-card.reverse {
    flex-direction: row-reverse
}

@media (max-width: 480px) {
    .placementCareer .heading {
        font-size:20px
    }

    .placementCareer .career-container .career-card {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 2vh
    }

    .placementCareer .career-container .career-card .left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 3vw
    }

    .placementCareer .career-container .career-card .left .border-top,.placementCareer .career-container .career-card .left .border-bottom {
        display: none
    }

    .placementCareer .career-container .career-card .left .career-number h2 {
        font-size: 40px;
        -webkit-text-stroke-width: 1px
    }

    .placementCareer .career-container .career-card .left .career-text {
        text-align: left
    }

    .placementCareer .career-container .career-card .left .career-text .text-box {
        margin-left: 0;
        margin-right: 0;
        width: 100%!important
    }

    .placementCareer .career-container .career-card .left .career-text .text-box h3 {
        width: 100%!important;
        font-size: 5vw
    }

    .placementCareer .career-container .career-card .left .career-text .text-box p {
        width: 100%!important;
        font-size: 3.5vw
    }

    .placementCareer .career-container .career-card:nth-child(2),.placementCareer .career-container .career-card:nth-child(4) {
        flex-direction: column
    }

    .placementCareer .career-container .career-card:nth-child(2) .left,.placementCareer .career-container .career-card:nth-child(4) .left {
        order: 1
    }

    .placementCareer .career-container .career-card:nth-child(2) .right,.placementCareer .career-container .career-card:nth-child(4) .right {
        order: 2
    }

    .placementCareer .career-container .career-card .right {
        width: 100%;
        margin-top: 2vh
    }

    .placementCareer .career-container .career-card .right img {
        width: 100%;
        max-width: 300px;
        height: auto
    }
}

@media (max-width: 992px) {
    .placementCareer .heading {
        margin-bottom:4vh;
        font-size: 2rem
    }

    .placementCareer .career-container .career-card {
        gap: 1vw
    }

    .placementCareer .career-container .career-card .left {
        gap: 1.5vw;
        width: 65%
    }

    .placementCareer .career-container .career-card .left .career-number h2 {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .placementCareer .career-container .career-card .left .career-text {
        width: 85%
    }

    .placementCareer .career-container .career-card .left .career-text .border-top,.placementCareer .career-container .career-card .left .career-text .border-bottom {
        width: 7vw
    }

    .placementCareer .career-container .career-card .left .career-text .text-box {
        margin-left: 2rem
    }

    .placementCareer .career-container .career-card .left .career-text .text-box h3 {
        font-size: 2vw;
        width: 70%
    }

    .placementCareer .career-container .career-card .left .career-text .text-box p {
        font-size: 1.2vw;
        width: 60%
    }

    .placementCareer .career-container .career-card .right img {
        width: 300px;
        height: auto
    }
}

.placementCTA {
    background: linear-gradient(0deg,#00000080,#00000080),url(../assets/placementCTA-CHtaGgho.jpeg) #d3d3d3 -12.013px -498px/101.393% 223.061% no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4vh;
    height: 52vh;
    text-align: center
}

.placementCTA h1 {
    width: 60%;
    font-size: 3vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.placementCTA p {
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: -20px
}

.placementCTA .placementCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff;
    padding: 0 3.6vw
}

.placementCTA .placementCTA-button .btn-background {
    background-color: #fff
}

.placementCTA h3 {
    width: 68%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .placementCTA {
        background-size:cover
    }
}

@media (max-width: 992px) {
    .placementCTA {
        height:45vh;
        gap: 3vh;
        background-size: cover;
        background-position: center
    }

    .placementCTA h1 {
        width: 75%;
        font-size: 4vw
    }

    .placementCTA p {
        font-size: 2vw;
        margin-top: -16px
    }

    .placementCTA .placementCTA-button .animated-button {
        padding: 0 2.5vw
    }

    .placementCTA h3 {
        width: 80%;
        font-size: 2vw
    }
}

@media (max-width: 480px) {
    .placementCTA {
        background:linear-gradient(0deg,#00000080,#00000080),url(../assets/placementCTA-CHtaGgho.jpeg) #d3d3d3 -2.346px -104.4px/101.393% 192.985% no-repeat;
        height: 267px;
        gap: 3vh
    }

    .placementCTA h1 {
        font-size: 20px;
        width: 100%
    }

    .placementCTA p {
        font-size: 16px
    }

    .placementCTA .placementCTA-button .animated-button {
        padding: 0 10vw;
        font-size: 14px
    }

    .placementCTA h3 {
        font-size: 12px;
        width: 100%
    }
}

.placementEnquiry {
    display: flex
}

.placementEnquiry .pe-left {
    width: 40%
}

.placementEnquiry .pe-left .enquiry-form-container .form-title {
    font-size: 3vw;
    font-weight: 600;
    color: #f0af13;
    line-height: normal;
    margin-bottom: 1vh
}

.placementEnquiry .pe-left .enquiry-form-container .form-description {
    font-size: 1vw;
    font-weight: 500;
    color: #d1d1d1;
    margin-bottom: 3vh;
    width: 60%
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 2vh
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group label {
    font-size: 1vw;
    font-weight: 500;
    margin-bottom: -.5vh
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group .input-field {
    width: 70%;
    background-color: transparent;
    display: flex;
    height: 7vh;
    padding: .5vh 1.5vw;
    align-items: center;
    align-self: stretch;
    border-radius: .8vw;
    border: 1px solid rgba(243,243,243,.568627451)
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group textarea.input-field {
    height: 10vh;
    padding-top: 1vw
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    color: #d1d1d1;
    margin-top: 1rem
}

.placementEnquiry .pe-left .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;
    transition: all .3s ease
}

.placementEnquiry .pe-left .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;
    transition: opacity .3s ease
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked:after {
    opacity: 1
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input:checked {
    background-color: #f3f3f3;
    border-color: #f3f3f3
}

.placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox label {
    font-size: 1rem;
    margin-left: .4rem
}

.placementEnquiry .pe-left .enquiry-form-container .animated-button {
    margin-top: 1rem;
    max-width: 17rem
}

.placementEnquiry .pe-right {
    margin-bottom: 10vh;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 5vw
}

.placementEnquiry .pe-right .right-top {
    position: relative
}

.placementEnquiry .pe-right .right-top p {
    padding: 2% 3%;
    font-size: 1.2vw;
    line-height: 1.6;
    text-align: left;
    position: relative;
    margin-bottom: 3vh
}

.placementEnquiry .pe-right .right-top .rtop {
    position: absolute;
    top: -5px;
    left: -15px
}

.placementEnquiry .pe-right .right-top .rbottom {
    position: absolute;
    bottom: 30px;
    right: 15px
}

.placementEnquiry .pe-right .right-bottom {
    margin-top: 4vh
}

.placementEnquiry .pe-right .right-bottom img {
    width: 100%;
    height: auto
}

@media (max-width: 992px) {
    .placementEnquiry .pe-left .enquiry-form-container .form-title {
        font-size:3.8vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .form-description {
        font-size: 1.2vw;
        width: 75%
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group {
        gap: 1.5vh
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group label {
        font-size: 1.5vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group .input-field {
        width: 90%;
        height: 6vh;
        padding: .4vh 1vw;
        border-radius: 1vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 8vh;
        padding-top: .8vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: .9rem;
        margin-top: .8rem
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 1rem;
        height: 1rem
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: .9rem
    }

    .placementEnquiry .pe-left .enquiry-form-container .animated-button {
        max-width: 14rem;
        margin-top: .8rem
    }

    .placementEnquiry .pe-right {
        padding-left: 3vw
    }

    .placementEnquiry .pe-right .right-top p {
        font-size: 1.6vw;
        padding: 2% 2.5%;
        margin-bottom: 2.5vh
    }

    .placementEnquiry .pe-right .right-top .rtop {
        top: -4px;
        left: -10px
    }

    .placementEnquiry .pe-right .right-top .rbottom {
        bottom: 25px;
        right: 10px
    }

    .placementEnquiry .pe-right .right-bottom {
        margin-top: 3vh
    }
}

@media (max-width: 480px) {
    .placementEnquiry {
        flex-direction:column;
        align-items: center;
        padding: 0 2vw
    }

    .placementEnquiry .pe-right {
        order: 1;
        width: 100%;
        padding-left: 0;
        margin-bottom: 2vh
    }

    .placementEnquiry .pe-right .right-top {
        text-align: center
    }

    .placementEnquiry .pe-right .right-top p {
        font-size: 16px;
        text-align: left;
        margin-bottom: 1vh
    }

    .placementEnquiry .pe-right .right-top .rtop {
        top: 5px;
        left: 0;
        width: 50px
    }

    .placementEnquiry .pe-right .right-top .rbottom {
        bottom: 10px;
        right: 0;
        width: 50px
    }

    .placementEnquiry .right-bottom {
        order: 2;
        width: 100%;
        margin-top: 0
    }

    .placementEnquiry .right-bottom img {
        width: 100%;
        height: auto
    }

    .placementEnquiry .pe-left {
        order: 3;
        width: 100%;
        margin-top: 0
    }

    .placementEnquiry .pe-left .enquiry-form-container {
        text-align: left
    }

    .placementEnquiry .pe-left .enquiry-form-container .form-title {
        font-size: 6vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .form-description {
        font-size: 16px;
        width: 100%;
        margin-bottom: 2vh
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group {
        width: 100%;
        align-items: left
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group label {
        font-size: 12px
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group .input-field {
        width: 90%;
        height: 6vh;
        padding: .5vh 4vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .input-group textarea.input-field {
        height: 12vh
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox {
        font-size: 3.5vw;
        text-align: left;
        justify-content: left;
        margin-top: 2vh
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox .checkbox-input {
        width: 5vw;
        height: 5vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .enquiry-form .privacy-checkbox label {
        font-size: 3.5vw
    }

    .placementEnquiry .pe-left .enquiry-form-container .animated-button {
        margin-top: 2vh;
        max-width: 100%;
        width: 60%
    }
}

.placementHero {
    background: linear-gradient(0deg,#0009,#0009),url(../assets/placement-hero-KQigYqwA.jpeg) #d3d3d3 50%/cover no-repeat;
    width: 100%;
    height: 75.5vh;
    display: flex;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.placementHero h1 {
    font-size: 3vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase
}

.placementHero p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 65%;
    padding-top: 4vh
}

@media (max-width: 1440px) {
    .placementHero {
        height:70vh
    }

    .placementHero h1 {
        font-size: 3.2vw
    }

    .placementHero p {
        font-size: 1.4vw;
        width: 70%
    }
}

@media (max-width: 1280px) {
    .placementHero {
        height:65vh
    }

    .placementHero h1 {
        font-size: 3.2vw
    }

    .placementHero p {
        font-size: 1.6vw;
        width: 75%
    }
}

@media (max-width: 992px) {
    .placementHero {
        height:60vh
    }

    .placementHero h1 {
        font-size: 5vw
    }

    .placementHero p {
        font-size: 1.6vw;
        width: 80%;
        padding-top: 3vh
    }
}

@media (max-width: 480px) {
    .placementHero {
        height:230px
    }

    .placementHero h1 {
        font-size: 20px
    }

    .placementHero p {
        font-size: 16px;
        width: 90%;
        padding-top: 1vh
    }
}

.placementReady .heading {
    width: 55%;
    margin-bottom: 5vh
}

.placementReady .ready-container {
    margin-top: 4vw;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    row-gap: 8vh;
    column-gap: 1.7vw;
    width: 100%;
    padding: 0 50%;
    justify-content: center;
    align-items: center
}

.placementReady .ready-container .ready-box {
    border: .1vw solid #821131;
    padding: 2vh 4vw 0 2vw;
    border-radius: .5vw;
    width: 23.3vw;
    height: 12vw;
    color: #fff;
    position: relative;
    font-size: 1.2vw
}

.placementReady .ready-container .ready-box h2 {
    background-color: transparent;
    position: absolute;
    top: -2vw;
    left: 2vw;
    font-size: 3.3vw;
    font-weight: 700;
    color: #fabc3f;
    padding: 0 2%
}

.placementReady .ready-container .ready-box p {
    position: absolute;
    font-size: 1.32vw;
    top: 4vw;
    width: 90%
}

@media (max-width: 992px) {
    .placementReady .heading {
        font-size:34px;
        width: 90%
    }
}

@media (max-width: 480px) {
    .placementReady .heading {
        font-size:20px;
        width: 90%
    }

    .placementReady .ready-container {
        padding: 0 2%;
        row-gap: 39px;
        column-gap: 8px;
        grid-template-columns: repeat(2,1fr)
    }

    .placementReady .ready-container .ready-box {
        width: 168px;
        height: 95px
    }

    .placementReady .ready-container .ready-box h2 {
        font-size: 20px;
        top: -4vw
    }

    .placementReady .ready-container .ready-box p {
        font-size: 14px
    }
}

.placementRecruiters {
    padding: 3.48% 0
}

.placementRecruiters .heading,.placementRecruiters .title {
    padding: 0 5.2%
}

.placementRecruiters .heading {
    padding-bottom: 1%
}

.placementRecruiters .scrolling-container {
    margin-top: 3%;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    border-top: 2px solid rgba(188,35,41,.4);
    border-bottom: 2px solid rgba(188,35,41,.4)
}

.placementRecruiters .scrolling-container .scrolling-wrapper,.placementRecruiters .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: none
}

.placementRecruiters .scrolling-container .scrolling-wrapper {
    animation: scroll-left 35s linear infinite
}

.placementRecruiters .scrolling-container .scrolling-wrapper-2 {
    animation: scroll-right 35s linear infinite;
    margin-top: 40px
}

.placementRecruiters .scrolling-container .scroll-box,.placementRecruiters .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 95px;
    padding: 22.5px 53px;
    background: #0f0f0f99;
    border-radius: 5px;
    border: 1px solid #fabc3f;
    font-family: Trajan Pro,sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px
}

@media (max-width: 1536px) {
    .placementRecruiters .heading {
        font-size:3rem
    }

    .placementRecruiters .title {
        font-size: 1.2rem
    }

    .placementRecruiters .scrolling-container {
        width: 100%;
        padding: 25px 0
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper,.placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        gap: 18px
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 35px
    }

    .placementRecruiters .scrolling-container .scroll-box,.placementRecruiters .scrolling-container .scroll-box-2 {
        height: 90px;
        padding: 20px 50px;
        font-size: 18px;
        border-radius: 4px
    }
}

@media (max-width: 992px) {
    .placementRecruiters {
        padding:3% 0
    }

    .placementRecruiters .heading {
        font-size: 2.2rem;
        padding: 0 4% .8%
    }

    .placementRecruiters .title {
        font-size: 1rem;
        padding: 0 4%
    }

    .placementRecruiters .scrolling-container {
        padding: 20px 0;
        margin-top: 2.5%
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper,.placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        gap: 16px
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 30px
    }

    .placementRecruiters .scrolling-container .scroll-box,.placementRecruiters .scrolling-container .scroll-box-2 {
        height: 80px;
        padding: 18px 45px;
        font-size: 16px;
        line-height: 22px;
        border-radius: 4px
    }
}

@media (max-width: 480px) {
    .placementRecruiters {
        padding:1% 1% 10%
    }

    .placementRecruiters .heading {
        font-size: 20px!important;
        width: 100%!important
    }

    .placementRecruiters .title {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper {
        animation: scroll-left 15s linear infinite
    }

    .placementRecruiters .scrolling-container {
        width: 110%;
        margin-left: -10%;
        margin-top: 5%;
        position: relative;
        overflow: hidden;
        padding: 20px 0;
        border-top: 2px solid rgba(188,35,41,.4);
        border-bottom: 2px solid rgba(188,35,41,.4)
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper,.placementRecruiters .scrolling-container .scrolling-wrapper-2,.placementRecruiters .scrolling-container .scrolling-wrapper-3 {
        display: flex;
        gap: 15px;
        width: max-content;
        animation: none
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper {
        animation: scroll-left 25s linear infinite
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 25s linear infinite;
        margin-top: 30px
    }

    .placementRecruiters .scrolling-container .scrolling-wrapper-3 {
        animation: scroll-left 20s linear infinite;
        margin-top: 30px
    }

    .placementRecruiters .scrolling-container .scroll-box,.placementRecruiters .scrolling-container .scroll-box-2,.placementRecruiters .scrolling-container .scroll-box-3 {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        height: 73px;
        padding: 15px 40px;
        background: #0f0f0f99;
        border-radius: 5px;
        border: 1px solid #fabc3f;
        font-family: Trajan Pro,sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

.newHeader {
    position: sticky;
    top: 0;
    width: 100%;
    background: #000000d9;
    padding: 28px 98px;
    z-index: 1000;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.newHeader .logo {
    width: 153px;
    height: 70px
}

.newHeader .nav-links {
    display: flex;
    gap: 20px;
    margin-left: 170px
}

.newHeader .nav-links a,.newHeader .nav-links span {
    color: var(--White-Color, #f3f3f3);
    font-family: Futura Std,sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding-bottom: .375rem;
    transition: color .3s ease
}

.newHeader .nav-links a:after,.newHeader .nav-links span:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: .125rem;
    background-color: #fbc51d;
    transition: width .3s ease
}

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

.newHeader .nav-links a:hover:after,.newHeader .nav-links span:hover:after {
    width: 100%
}

.newHeader .nav-links .active {
    color: #fbc51d;
    font-weight: 600
}

.newHeader .nav-links .active:after {
    width: 0%
}

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

.newHeader .nav-links .dropdown .active {
    color: #fbc51d
}

.newHeader .nav-links .dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #222222bf;
    list-style: none;
    padding: 10px 0;
    min-width: max-content;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0003;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity .3s ease,transform .3s ease,visibility .3s
}

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

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

.newHeader .nav-links .dropdown .dropdown-menu li a {
    color: #fff;
    text-decoration: none;
    display: block
}

.newHeader .nav-links .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.newHeader .nav-links .dropdown .has-submenu {
    position: relative
}

.newHeader .nav-links .dropdown .has-submenu .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    background: #222222e6;
    padding: 10px 0;
    min-width: max-content;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0003;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity .3s ease,transform .3s ease,visibility .3s
}

.newHeader .nav-links .dropdown .has-submenu .sub-menu li {
    padding: 10px 20px;
    transition: background .3s ease
}

.newHeader .nav-links .dropdown .has-submenu .sub-menu li:hover {
    background: #444
}

.newHeader .nav-links .dropdown .has-submenu:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

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

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

.newHeader .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
}

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

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

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

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

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

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

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

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

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

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

.newHeader .header-actions .menu-icon {
    cursor: pointer;
    color: #fff;
    font-size: 28px
}

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

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

.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: #f3f3f3;
    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 .rotate {
    transition: transform .3s ease-in-out;
    transform: rotate(45deg)
}

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

.mobile-menu .menu-list li .submenu .sub-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.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
}

.mobile-menu.show-menu {
    right: 0;
    opacity: 1
}

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

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

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

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

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

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

    .newHeader .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) {
    .newHeader {
        padding:10px 38px
    }

    .newHeader .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin-left: 50px;
        margin-right: 0
    }

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

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

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

    .newHeader .header-actions .animated-button {
        height: 42px;
        font-size: 15px;
        padding: 8px 18px
    }

    .newHeader .header-actions .animated-button .btn-text {
        font-size: 12px!important
    }
}

@media (max-width: 1280px) {
    .mobile-menu {
        width:30%;
        padding: 24px
    }

    .mobile-menu .close-btn {
        font-size: 20px;
        top: 16px;
        right: 16px
    }

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

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

    .mobile-menu .menu-list li a,.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: 16px
    }

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

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

@media (max-width: 992px) {
    .newHeader {
        padding:12px 20px;
        height: 90px;
        justify-content: space-between
    }

    .newHeader .logo {
        width: 120px;
        height: auto
    }

    .newHeader .nav-links {
        margin-left: 20px;
        gap: 12px
    }

    .newHeader .nav-links a,.newHeader .nav-links span {
        font-size: 13px;
        padding-bottom: 0rem
    }

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

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

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

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

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

    .mobile-menu .close-btn {
        font-size: 20px;
        top: 16px;
        right: 16px
    }

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

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

    .mobile-menu .menu-list li a,.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: 16px
    }

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

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

@media (max-width: 480px) {
    .newHeader {
        position:fixed!important;
        background-color: #000!important;
        padding: 15px 16px!important;
        height: 70px!important;
        display: flex!important;
        align-items: center!important;
        z-index: 1000!important
    }

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

    .newHeader .logo {
        width: 77px;
        height: 33px
    }

    .newHeader .nav-links {
        display: none
    }

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

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

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

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

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

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

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

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

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

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

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

    .newHeader .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
    }
}

.coursesStudentProjects .head {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center
}

.coursesStudentProjects .head .head-content {
    width: 70%
}

.coursesStudentProjects .head .head-content .title-desc a {
    text-decoration: none;
    color: #00f
}

.coursesStudentProjects .stcontainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-top: 3%;
    position: relative;
    transition: opacity .5s ease-in-out;
    overflow-x: auto;
    gap: 20px;
    width: 100%;
    padding-bottom: 20px
}

.coursesStudentProjects .stcontainer::-webkit-scrollbar {
    display: none
}

.coursesStudentProjects .stcontainer .grid-section {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start
}

.coursesStudentProjects .stcontainer .grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    justify-content: space-between;
    align-items: start;
    width: 100%
}

.coursesStudentProjects .stcontainer .image,.coursesStudentProjects .stcontainer .video {
    max-width: 553.2px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.coursesStudentProjects .stcontainer .image p,.coursesStudentProjects .stcontainer .video p {
    position: absolute;
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 600;
    bottom: 5.7%;
    left: 6.7%
}

.coursesStudentProjects .stcontainer .image .expand,.coursesStudentProjects .stcontainer .video .expand {
    position: absolute;
    top: 9%;
    right: .5%;
    transform: translate(-50%,-50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s
}

.coursesStudentProjects .stcontainer .image .expand:hover,.coursesStudentProjects .stcontainer .video .expand:hover {
    transform: translate(-50%,-50%) scale(1.2)
}

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

.coursesStudentProjects .stcontainer .image1,.coursesStudentProjects .stcontainer .video1 {
    height: 747.59px
}

.coursesStudentProjects .stcontainer .image2,.coursesStudentProjects .stcontainer .video2 {
    height: 424.56px
}

.coursesStudentProjects .stcontainer .image3,.coursesStudentProjects .stcontainer .video3 {
    height: 299.03px
}

.coursesStudentProjects .stcontainer .image4,.coursesStudentProjects .stcontainer .video4 {
    height: 295.86px
}

.coursesStudentProjects .stcontainer .image5,.coursesStudentProjects .stcontainer .video5 {
    height: 427.73px
}

.coursesStudentProjects .stcontainer .column-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.coursesStudentProjects .stcontainer .column-stack .image {
    margin-bottom: 12px
}

.coursesStudentProjects .swipe-text,.coursesStudentProjects .mobile-button {
    display: none
}

.coursesStudentProjects .scroller {
    width: 36%
}

.coursesStudentProjects .scroller .slider-bar {
    width: 100%
}

.coursesStudentProjects .corner-button {
    margin-top: 2.4%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 1536px) {
    .coursesStudentProjects .head-content {
        width:48%
    }

    .coursesStudentProjects .head-content h1 {
        font-size: 52px
    }

    .coursesStudentProjects .stcontainer {
        gap: 15px;
        padding-top: 2.5%;
        padding-bottom: 15px
    }

    .coursesStudentProjects .stcontainer .grid {
        grid-template-columns: 32% 32% 32%
    }

    .coursesStudentProjects .stcontainer .image,.coursesStudentProjects .stcontainer .video {
        max-width: 500px
    }

    .coursesStudentProjects .stcontainer .image p,.coursesStudentProjects .stcontainer .video p {
        font-size: 18px;
        bottom: 6%;
        left: 7%
    }

    .coursesStudentProjects .stcontainer .image .expand,.coursesStudentProjects .stcontainer .video .expand {
        width: 2.2rem;
        height: 2.2rem
    }

    .coursesStudentProjects .stcontainer .image1,.coursesStudentProjects .stcontainer .video1 {
        height: 700px
    }

    .coursesStudentProjects .stcontainer .image2,.coursesStudentProjects .stcontainer .video2 {
        height: 400px
    }

    .coursesStudentProjects .stcontainer .image3,.coursesStudentProjects .stcontainer .video3,.coursesStudentProjects .stcontainer .image4,.coursesStudentProjects .stcontainer .video4 {
        height: 280px
    }

    .coursesStudentProjects .stcontainer .image5,.coursesStudentProjects .stcontainer .video5 {
        height: 400px
    }

    .coursesStudentProjects .scroller {
        width: 34%
    }
}

@media (max-width: 992px) {
    .coursesStudentProjects .head-content {
        width:70%
    }

    .coursesStudentProjects .head-content h1 {
        font-size: 28px
    }

    .coursesStudentProjects .stcontainer {
        gap: 12px;
        padding-top: 2%;
        padding-bottom: 12px
    }

    .coursesStudentProjects .stcontainer .grid {
        grid-template-columns: 33% 33% 33%
    }

    .coursesStudentProjects .stcontainer .image,.coursesStudentProjects .stcontainer .video {
        border-radius: 8px
    }

    .coursesStudentProjects .stcontainer .image p,.coursesStudentProjects .stcontainer .video p {
        font-size: 14px;
        bottom: 5%;
        left: 6%
    }

    .coursesStudentProjects .stcontainer .image .expand,.coursesStudentProjects .stcontainer .video .expand {
        width: 1.8rem;
        height: 1.8rem
    }

    .coursesStudentProjects .stcontainer .image img,.coursesStudentProjects .stcontainer .image video,.coursesStudentProjects .stcontainer .video img,.coursesStudentProjects .stcontainer .video video {
        border-radius: 8px
    }

    .coursesStudentProjects .stcontainer .image1,.coursesStudentProjects .stcontainer .video1 {
        height: 400px
    }

    .coursesStudentProjects .stcontainer .image2,.coursesStudentProjects .stcontainer .video2 {
        height: 230px
    }

    .coursesStudentProjects .stcontainer .image3,.coursesStudentProjects .stcontainer .video3,.coursesStudentProjects .stcontainer .image4,.coursesStudentProjects .stcontainer .video4 {
        height: 160px
    }

    .coursesStudentProjects .stcontainer .image5,.coursesStudentProjects .stcontainer .video5 {
        height: 230px
    }

    .coursesStudentProjects .scroller {
        width: 36%
    }

    .coursesStudentProjects .corner-button {
        margin-top: 1.8%
    }
}

@media (max-width: 480px) {
    .coursesStudentProjects {
        padding:1% 1% 10%
    }

    .coursesStudentProjects .head {
        width: 100%;
        padding: 0!important;
        text-align: center
    }

    .coursesStudentProjects .head .head-content {
        width: 100%!important
    }

    .coursesStudentProjects .head .head-content h2 {
        font-size: 20px!important;
        width: 100%!important
    }

    .coursesStudentProjects .head .head-content p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .coursesStudentProjects .stcontainer {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 0;
        align-items: center;
        padding: 0
    }

    .coursesStudentProjects .stcontainer .grid-section {
        flex: 0 0 100vw;
        width: 100vw;
        height: 520px;
        scroll-snap-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap
    }

    .coursesStudentProjects .stcontainer .grid {
        display: flex;
        flex-direction: row;
        width: 100vw;
        height: 520px;
        gap: 5%;
        overflow-x: auto;
        scroll-behavior: smooth
    }

    .coursesStudentProjects .stcontainer .grid::-webkit-scrollbar {
        display: none
    }

    .coursesStudentProjects .stcontainer .image1,.coursesStudentProjects .stcontainer .video1,.coursesStudentProjects .stcontainer .column-stack {
        flex: 0 0 100vw;
        width: 100vw;
        height: 520px;
        object-fit: cover;
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .coursesStudentProjects .stcontainer .image1 .image2,.coursesStudentProjects .stcontainer .image1 .video2,.coursesStudentProjects .stcontainer .image1 .image5,.coursesStudentProjects .stcontainer .image1 .video5,.coursesStudentProjects .stcontainer .video1 .image2,.coursesStudentProjects .stcontainer .video1 .video2,.coursesStudentProjects .stcontainer .video1 .image5,.coursesStudentProjects .stcontainer .video1 .video5,.coursesStudentProjects .stcontainer .column-stack .image2,.coursesStudentProjects .stcontainer .column-stack .video2,.coursesStudentProjects .stcontainer .column-stack .image5,.coursesStudentProjects .stcontainer .column-stack .video5 {
        height: 45%
    }

    .coursesStudentProjects .stcontainer .image1 .image3,.coursesStudentProjects .stcontainer .image1 .video3,.coursesStudentProjects .stcontainer .image1 .image4,.coursesStudentProjects .stcontainer .image1 .video4,.coursesStudentProjects .stcontainer .video1 .image3,.coursesStudentProjects .stcontainer .video1 .video3,.coursesStudentProjects .stcontainer .video1 .image4,.coursesStudentProjects .stcontainer .video1 .video4,.coursesStudentProjects .stcontainer .column-stack .image3,.coursesStudentProjects .stcontainer .column-stack .video3,.coursesStudentProjects .stcontainer .column-stack .image4,.coursesStudentProjects .stcontainer .column-stack .video4 {
        height: 55%
    }

    .coursesStudentProjects .swipe-text {
        display: block;
        margin-top: 2%;
        text-align: right;
        font-size: 14px;
        color: #fabc3f
    }

    .stScroll .scroller {
        opacity: 0
    }

    .corner-button .animated-button {
        font-size: 16px
    }
}

.cousreSectionRecruiter .heading,.cousreSectionRecruiter .title {
    text-align: center
}

.cousreSectionRecruiter .heading {
    padding-bottom: 1%
}

.cousreSectionRecruiter .scrolling-container {
    margin-top: 3%;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    border-top: 2px solid rgba(188,35,41,.4);
    border-bottom: 2px solid rgba(188,35,41,.4)
}

.cousreSectionRecruiter .scrolling-container .scrolling-wrapper,.cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: none
}

.cousreSectionRecruiter .scrolling-container .scrolling-wrapper {
    animation: scroll-left 35s linear infinite
}

.cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
    animation: scroll-right 35s linear infinite;
    margin-top: 40px
}

.cousreSectionRecruiter .scrolling-container .scroll-box,.cousreSectionRecruiter .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 95px;
    padding: 22.5px 53px;
    background: #0f0f0f99;
    border-radius: 5px;
    border: 1px solid #fabc3f;
    font-family: Trajan Pro,sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px
}

@media (max-width: 1536px) {
    .cousreSectionRecruiter .heading {
        font-size:3rem
    }

    .cousreSectionRecruiter .title {
        font-size: 1.2rem
    }

    .cousreSectionRecruiter .scrolling-container {
        width: 100%;
        padding: 25px 0
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper,.cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
        gap: 18px
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper {
        animation: scroll-left 35s linear infinite
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 35s linear infinite;
        margin-top: 35px
    }

    .cousreSectionRecruiter .scrolling-container .scroll-box,.cousreSectionRecruiter .scrolling-container .scroll-box-2 {
        height: 90px;
        padding: 20px 50px;
        font-size: 18px;
        border-radius: 4px
    }
}

@media (max-width: 992px) {
    .cousreSectionRecruiter .heading {
        font-size:2.2rem;
        padding-bottom: .8%
    }

    .cousreSectionRecruiter .title {
        font-size: 1rem
    }

    .cousreSectionRecruiter .scrolling-container {
        padding: 20px 0
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper,.cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
        gap: 14px
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
        margin-top: 25px
    }

    .cousreSectionRecruiter .scrolling-container .scroll-box,.cousreSectionRecruiter .scrolling-container .scroll-box-2 {
        height: 75px;
        padding: 16px 40px;
        font-size: 16px;
        line-height: 20px;
        border-radius: 3px
    }
}

@media (max-width: 480px) {
    .cousreSectionRecruiter {
        padding:5% 1% 10%
    }

    .cousreSectionRecruiter .heading {
        font-size: 20px!important;
        width: 100%!important
    }

    .cousreSectionRecruiter .title {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .cousreSectionRecruiter .scrolling-container {
        width: 110%;
        margin-left: -10%;
        margin-top: 5%;
        position: relative;
        overflow: hidden;
        padding: 20px 0;
        border-top: 2px solid rgba(188,35,41,.4);
        border-bottom: 2px solid rgba(188,35,41,.4)
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper,.cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2,.cousreSectionRecruiter .scrolling-container .scrolling-wrapper-3 {
        display: flex;
        gap: 15px;
        width: max-content;
        animation: none
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper {
        animation: scroll-left 30s linear infinite
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 30s linear infinite;
        margin-top: 30px
    }

    .cousreSectionRecruiter .scrolling-container .scrolling-wrapper-3 {
        animation: scroll-left 30s linear infinite;
        margin-top: 30px
    }

    .cousreSectionRecruiter .scrolling-container .scroll-box,.cousreSectionRecruiter .scrolling-container .scroll-box-2,.cousreSectionRecruiter .scrolling-container .scroll-box-3 {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        height: 73px;
        padding: 15px 40px;
        background: #0f0f0f99;
        border-radius: 5px;
        border: 1px solid #fabc3f;
        font-family: Trajan Pro,sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

.mgCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.mgCourses .heading {
    text-align: center
}

.mgCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.mgCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.mgCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.mgCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.mgCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.mgCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.mgCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.mgCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.mgCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mgCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.mgCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.mgCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.mgCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.mgCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.mgCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.mgCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.mgCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.mgCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.mgCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .mgCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .mgCourses .coursesCards .courseCard {
        height: 450px
    }

    .mgCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .mgCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .mgCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .mgCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .mgCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .mgCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .mgCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .mgCourses .coursesCards .courseCard {
        height: 430px
    }

    .mgCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .mgCourses .coursesCards .courseCard .right {
        gap: 3.5%
    }

    .mgCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .mgCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .mgCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .mgCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px
    }
}

@media (max-width: 1280px) {
    .mgCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .mgCourses .coursesCards .courseCard {
        height: 410px
    }

    .mgCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 54%
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .mgCourses .coursesCards .courseCard .right {
        gap: 3%
    }

    .mgCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .mgCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .mgCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .mgCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px
    }
}

@media (max-width: 992px) {
    .mgCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .mgCourses .coursesCards .courseCard {
        height: 400px
    }

    .mgCourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 65%
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .mgCourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .mgCourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .mgCourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .mgCourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .mgCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .mgCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .mgCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .mgCourses .heading {
        font-size: 24px
    }

    .mgCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .mgCourses .coursesCards .courseCard,.mgCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .mgCourses .coursesCards .courseCard .numContainer,.mgCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .mgCourses .coursesCards .courseCard .numContainer .number,.mgCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .index,.mgCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .mgCourses .coursesCards .courseCard .numContainer .number .tname,.mgCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .mgCourses .coursesCards .courseCard .right,.mgCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .mgCourses .coursesCards .courseCard .right .photo,.mgCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .mgCourses .coursesCards .courseCard .right .info,.mgCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .mgCourses .coursesCards .courseCard .right .info .head,.mgCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .mgCourses .coursesCards .courseCard .right .info .desc,.mgCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .mgCourses .coursesCards .courseCard .right .info button,.mgCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .mgCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .mgCourses .scroller {
        display: block
    }
}

.motionGraphicBroadcastHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.motionGraphicBroadcastHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.motionGraphicBroadcastHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.motionGraphicBroadcastHero h1,.motionGraphicBroadcastHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.motionGraphicBroadcastHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 50%
}

.motionGraphicBroadcastHero p {
    width: 50%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .motionGraphicBroadcastHero {
        height:600px
    }

    .motionGraphicBroadcastHero h1 {
        font-size: 72px
    }

    .motionGraphicBroadcastHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .motionGraphicBroadcastHero {
        height:550px
    }

    .motionGraphicBroadcastHero h1 {
        font-size: 64px
    }

    .motionGraphicBroadcastHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .motionGraphicBroadcastHero {
        height:500px
    }

    .motionGraphicBroadcastHero h1 {
        font-size: 56px
    }

    .motionGraphicBroadcastHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .motionGraphicBroadcastHero {
        height:500px
    }

    .motionGraphicBroadcastHero h1 {
        font-size: 46px
    }

    .motionGraphicBroadcastHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .motionGraphicBroadcastHero {
        height:229px
    }

    .motionGraphicBroadcastHero h1 {
        font-size: 20px;
        width: 80%
    }

    .motionGraphicBroadcastHero p {
        width: 100%;
        font-size: 16px
    }
}

.motionGraphicBroadcastJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.motionGraphicBroadcastJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.motionGraphicBroadcastJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.motionGraphicBroadcastJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.motionGraphicBroadcastJoin .mgj-left .mgjTop,.motionGraphicBroadcastJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.motionGraphicBroadcastJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.motionGraphicBroadcastJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.motionGraphicBroadcastJoin .mgjmobile-button {
    display: none
}

.motionGraphicBroadcastJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.motionGraphicBroadcastJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.motionGraphicBroadcastJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.motionGraphicBroadcastJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .motionGraphicBroadcastJoin {
        padding:3% 8%
    }

    .motionGraphicBroadcastJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .motionGraphicBroadcastJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .motionGraphicBroadcastJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .motionGraphicBroadcastJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .motionGraphicBroadcastJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .motionGraphicBroadcastJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .motionGraphicBroadcastJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .motionGraphicBroadcastJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .motionGraphicBroadcastJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .motionGraphicBroadcastJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .motionGraphicBroadcastJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .motionGraphicBroadcastJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .motionGraphicBroadcastJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .motionGraphicBroadcastJoin .mgj-left .mgjTop,.motionGraphicBroadcastJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .motionGraphicBroadcastJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .motionGraphicBroadcastJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .motionGraphicBroadcastJoin .mgj-button {
        display: none
    }
}

.motionGraphicBroadcastSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.motionGraphicBroadcastSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.motionGraphicBroadcastSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.motionGraphicBroadcastSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.motionGraphicBroadcastSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    box-shadow: -5px -5px 20px #a07a1c inset,5px 5px 20px #a07a1c inset
}

.motionGraphicBroadcastSubHero .bottom .left .content .title {
    color: var(--RED-PRIMAEY-COLOR, #bc2329);
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.motionGraphicBroadcastSubHero .bottom .left .content .desc {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.motionGraphicBroadcastSubHero .bottom .left .m-button {
    margin-top: 2vh
}

.motionGraphicBroadcastSubHero .bottom .left .m-button .animated-button {
    border-color: #bc2329;
    color: #bc2329;
    padding: 0 3.6vw
}

.motionGraphicBroadcastSubHero .bottom .left .m-button .animated-button:hover .btn-background {
    background-color: #bc2329
}

.motionGraphicBroadcastSubHero .bottom .left .m-button .animated-button:hover .btn-text {
    color: #fff
}

.motionGraphicBroadcastSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.motionGraphicBroadcastSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.motionGraphicBroadcastSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .motionGraphicBroadcastSubHero {
        gap:1.5%
    }

    .motionGraphicBroadcastSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .motionGraphicBroadcastSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .motionGraphicBroadcastSubHero .bottom .left .d-button {
        margin-top: 1.5vh
    }

    .motionGraphicBroadcastSubHero .bottom .left .d-button .animated-button {
        padding: 0 3vw
    }

    .motionGraphicBroadcastSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .motionGraphicBroadcastSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .motionGraphicBroadcastSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .motionGraphicBroadcastSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .motionGraphicBroadcastSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .motionGraphicBroadcastSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .motionGraphicBroadcastSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 992px) {
    .motionGraphicBroadcastSubHero .bottom {
        gap:16px;
        height: 400px
    }

    .motionGraphicBroadcastSubHero .bottom .left {
        width: 48%;
        height: 400px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content {
        padding: 10px;
        width: 88%;
        height: 83%
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .title {
        font-size: 30px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .motionGraphicBroadcastSubHero .bottom .right {
        width: 52%
    }
}

@media (max-width: 480px) {
    .motionGraphicBroadcastSubHero {
        flex-direction:column
    }

    .motionGraphicBroadcastSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .motionGraphicBroadcastSubHero .bottom .left {
        width: 100%;
        height: 358px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content {
        padding: 40px 20px;
        gap: 5px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .desc {
        font-size: 16px;
        padding-bottom: 0;
        font-weight: 600
    }

    .motionGraphicBroadcastSubHero .bottom .left .content .m-button .animated-button {
        font-size: 14px;
        font-weight: 600;
        padding: 0 8vw
    }

    .motionGraphicBroadcastSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.CareerOpportunities {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.CareerOpportunities .heading {
    width: 70%;
    text-align: center;
    margin: auto
}

.CareerOpportunities .desc {
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.CareerOpportunities .copContainer {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 35px;
    padding-top: 20px
}

.CareerOpportunities .cop {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.CareerOpportunities .cop .image {
    width: 100%;
    height: 24vh
}

.CareerOpportunities .cop .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.CareerOpportunities .cop .cname {
    text-align: center;
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.CareerOpportunities .lastRow {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 20px
}

.CareerOpportunities .lastRow .cop {
    width: 19.05%
}

.CareerOpportunities .scroller {
    display: none
}

@media (max-width: 480px) {
    .CareerOpportunities {
        gap:12px
    }

    .CareerOpportunities .heading {
        padding-top: 20px;
        width: 80%;
        font-size: 20px
    }

    .CareerOpportunities .desc {
        width: 100%;
        font-size: 16px
    }

    .CareerOpportunities .copContainer {
        display: flex;
        width: 100%;
        gap: 12px;
        overflow: scroll
    }

    .CareerOpportunities .copContainer::-webkit-scrollbar {
        display: none
    }

    .CareerOpportunities .copContainer .cop {
        width: 75%;
        flex: 0 0 75%;
        padding: 16px 0
    }

    .CareerOpportunities .copContainer .cop .image {
        height: 229px
    }

    .CareerOpportunities .copContainer .cop .cname {
        font-size: 16px
    }

    .CareerOpportunities .scroller {
        display: block
    }
}

.dccHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.dccHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.dccHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.dccHero h1,.dccHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.dccHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%
}

.dccHero p {
    width: 70%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .dccHero {
        height:600px
    }

    .dccHero h1 {
        font-size: 72px
    }

    .dccHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .dccHero {
        height:550px
    }

    .dccHero h1 {
        font-size: 64px
    }

    .dccHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .dccHero {
        height:500px
    }

    .dccHero h1 {
        font-size: 56px
    }

    .dccHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .dccHero {
        height:500px
    }

    .dccHero h1 {
        font-size: 50px
    }

    .dccHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .dccHero {
        height:229px
    }

    .dccHero h1 {
        font-size: 20px;
        width: 80%
    }

    .dccHero p {
        width: 100%;
        font-size: 16px
    }
}

.dccJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.dccJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.dccJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.dccJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.dccJoin .mgj-left .mgjTop,.dccJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.dccJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.dccJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.dccJoin .mgjmobile-button {
    display: none
}

.dccJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.dccJoin .mgj-right .title a {
    text-decoration: none;
    color: #00f
}

.dccJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.dccJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.dccJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .dccJoin {
        padding:3% 8%
    }

    .dccJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .dccJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .dccJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .dccJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .dccJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .dccJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .dccJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .dccJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .dccJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .dccJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .dccJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .dccJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .dccJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .dccJoin .mgj-left .mgjTop,.dccJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .dccJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .dccJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .dccJoin .mgj-button {
        display: none
    }
}

.dcCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.dcCourses .heading {
    text-align: center
}

.dcCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.dcCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.dcCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.dcCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.dcCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dcCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.dcCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.dcCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.dcCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dcCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.dcCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dcCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.dcCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.dcCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.dcCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.dcCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.dcCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.dcCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.dcCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .dcCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .dcCourses .coursesCards .courseCard {
        height: 450px
    }

    .dcCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .dcCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .dcCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .dcCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .dcCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .dcCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .dcCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .dcCourses .coursesCards .courseCard {
        height: 430px
    }

    .dcCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .dcCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .dcCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .dcCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .dcCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .dcCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .dcCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .dcCourses .coursesCards .courseCard {
        height: 410px
    }

    .dcCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .dcCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .dcCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .dcCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .dcCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .dcCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .dcCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .dcCourses .coursesCards .courseCard {
        height: 400px
    }

    .dcCourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 65%
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .dcCourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .dcCourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .dcCourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .dcCourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .dcCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .dcCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .dcCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .dcCourses .heading {
        font-size: 24px
    }

    .dcCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .dcCourses .coursesCards .courseCard,.dcCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .dcCourses .coursesCards .courseCard .numContainer,.dcCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .dcCourses .coursesCards .courseCard .numContainer .number,.dcCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .index,.dcCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .dcCourses .coursesCards .courseCard .numContainer .number .tname,.dcCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .dcCourses .coursesCards .courseCard .right,.dcCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .dcCourses .coursesCards .courseCard .right .photo,.dcCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .dcCourses .coursesCards .courseCard .right .info,.dcCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .dcCourses .coursesCards .courseCard .right .info .head,.dcCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: -2% auto auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .dcCourses .coursesCards .courseCard .right .info .desc,.dcCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .dcCourses .coursesCards .courseCard .right .info button,.dcCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 2%
    }

    .dcCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .dcCourses .scroller {
        display: block
    }
}

.dccSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.dccSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.dccSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.dccSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.dccSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #821131 inset,5px 5px 20px #821131 inset
}

.dccSubHero .bottom .left .content .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dccSubHero .bottom .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.dccSubHero .bottom .left .d-button {
    margin-top: 2vh
}

.dccSubHero .bottom .left .d-button .animated-button {
    padding: 0 3.6vw
}

.dccSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.dccSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.dccSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .dccSubHero {
        gap:1.5%
    }

    .dccSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .dccSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .dccSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .dccSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .dccSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .dccSubHero .bottom .left .d-button {
        margin-top: 1.5vh
    }

    .dccSubHero .bottom .left .d-button .animated-button {
        padding: 0 3vw
    }

    .dccSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .dccSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .dccSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .dccSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .dccSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .dccSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .dccSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .dccSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .dccSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .dccSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .dccSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .dccSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .dccSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 992px) {
    .dccSubHero .bottom {
        gap:16px;
        height: 400px
    }

    .dccSubHero .bottom .left {
        width: 48%;
        height: 400px
    }

    .dccSubHero .bottom .left .content {
        padding: 10px;
        width: 88%;
        height: 83%
    }

    .dccSubHero .bottom .left .content .title {
        font-size: 30px
    }

    .dccSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .dccSubHero .bottom .right {
        width: 52%
    }
}

@media (max-width: 480px) {
    .dccSubHero {
        flex-direction:column
    }

    .dccSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .dccSubHero .bottom .left {
        width: 100%;
        height: 368px
    }

    .dccSubHero .bottom .left .content {
        padding: 40px 10px;
        gap: 1px
    }

    .dccSubHero .bottom .left .content .title {
        font-size: 20px;
        padding-bottom: 1%
    }

    .dccSubHero .bottom .left .content .desc {
        font-size: 15px;
        width: 100%;
        padding-bottom: 0
    }

    .dccSubHero .bottom .left .content .d-button .animated-button {
        padding: 0 10vw;
        font-size: 14px
    }

    .dccSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.fmCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.fmCourses .heading {
    text-align: center
}

.fmCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.fmCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.fmCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #770006);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.fmCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.fmCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.fmCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.fmCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.fmCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.fmCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fmCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px
}

.fmCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.fmCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.fmCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.fmCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.fmCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 34%;
    margin-right: 0
}

.fmCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.fmCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.fmCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.fmCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .fmCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .fmCourses .coursesCards .courseCard {
        height: 450px
    }

    .fmCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .fmCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .fmCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .fmCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .fmCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .fmCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .fmCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .fmCourses .coursesCards .courseCard {
        height: 430px
    }

    .fmCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 28px
    }

    .fmCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .fmCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .fmCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .fmCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .fmCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 69%
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 28px
    }
}

@media (max-width: 1280px) {
    .fmCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .fmCourses .coursesCards .courseCard {
        height: 410px
    }

    .fmCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .fmCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .fmCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .fmCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .fmCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .fmCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 68%
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px
    }
}

@media (max-width: 992px) {
    .fmCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .fmCourses .coursesCards .courseCard {
        height: 400px
    }

    .fmCourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 65%
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .fmCourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .fmCourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .fmCourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .fmCourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .fmCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .fmCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .fmCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .fmCourses .heading {
        font-size: 24px
    }

    .fmCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .fmCourses .coursesCards .courseCard,.fmCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .fmCourses .coursesCards .courseCard .numContainer,.fmCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .fmCourses .coursesCards .courseCard .numContainer .number,.fmCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .index,.fmCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .fmCourses .coursesCards .courseCard .numContainer .number .tname,.fmCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .fmCourses .coursesCards .courseCard .right,.fmCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .fmCourses .coursesCards .courseCard .right .photo,.fmCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .fmCourses .coursesCards .courseCard .right .info,.fmCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .fmCourses .coursesCards .courseCard .right .info .head,.fmCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .fmCourses .coursesCards .courseCard .right .info .desc,.fmCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .fmCourses .coursesCards .courseCard .right .info button,.fmCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .fmCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .fmCourses .scroller {
        display: block
    }
}

.fmHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.fmHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.fmHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.fmHero h1,.fmHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.fmHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 50%
}

.fmHero p {
    width: 100%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .fmHero {
        height:600px
    }

    .fmHero h1 {
        font-size: 72px
    }

    .fmHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .fmHero {
        height:550px
    }

    .fmHero h1 {
        font-size: 64px
    }

    .fmHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .fmHero {
        height:500px
    }

    .fmHero h1 {
        font-size: 56px
    }

    .fmHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .fmHero {
        height:500px
    }

    .fmHero h1 {
        font-size: 50px
    }

    .fmHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .fmHero {
        height:229px
    }

    .fmHero h1 {
        font-size: 20px;
        width: 80%
    }

    .fmHero p {
        width: 100%;
        font-size: 16px
    }
}

.fmJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.fmJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.fmJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.fmJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.fmJoin .mgj-left .mgjTop,.fmJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.fmJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.fmJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.fmJoin .mgjmobile-button {
    display: none
}

.fmJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.fmJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.fmJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.fmJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .fmJoin {
        padding:3% 8%
    }

    .fmJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .fmJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .fmJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .fmJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .fmJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .fmJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .fmJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .fmJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .fmJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .fmJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .fmJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .fmJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .fmJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .fmJoin .mgj-left .mgjTop,.fmJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .fmJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .fmJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .fmJoin .mgj-button {
        display: none
    }
}

.fmSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.fmSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.fmSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.fmSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.fmSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    box-shadow: -5px -5px 20px #a07a1c inset,5px 5px 20px #a07a1c inset
}

.fmSubHero .bottom .left .content .title {
    color: var(--RED-PRIMAEY-COLOR, #bc2329);
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.fmSubHero .bottom .left .content .desc {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.fmSubHero .bottom .left .f-button {
    margin-top: 2vh
}

.fmSubHero .bottom .left .f-button .animated-button {
    border-color: #bc2329;
    color: #bc2329;
    padding: 0 3.6vw
}

.fmSubHero .bottom .left .f-button .animated-button:hover .btn-background {
    background-color: #bc2329
}

.fmSubHero .bottom .left .f-button .animated-button:hover .btn-text {
    color: #fff
}

.fmSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.fmSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.fmSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .fmSubHero {
        gap:1.5%
    }

    .fmSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .fmSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .fmSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .fmSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .fmSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .fmSubHero .bottom .left .f-button {
        margin-top: 1.5vh
    }

    .fmSubHero .bottom .left .f-button .animated-button {
        padding: 0 3vw
    }

    .fmSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .fmSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .fmSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .fmSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .fmSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .fmSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .fmSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .fmSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .fmSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .fmSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .fmSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .fmSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .fmSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 992px) {
    .fmSubHero .bottom {
        gap:16px;
        height: 400px
    }

    .fmSubHero .bottom .left {
        width: 48%;
        height: 400px
    }

    .fmSubHero .bottom .left .content {
        padding: 10px;
        width: 88%;
        height: 83%
    }

    .fmSubHero .bottom .left .content .title {
        font-size: 30px
    }

    .fmSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .fmSubHero .bottom .right {
        width: 52%
    }
}

@media (max-width: 480px) {
    .fmSubHero {
        flex-direction:column
    }

    .fmSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .fmSubHero .bottom .left {
        width: 100%;
        height: 358px
    }

    .fmSubHero .bottom .left .content {
        padding: 40px 20px;
        gap: 5px
    }

    .fmSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .fmSubHero .bottom .left .content .desc {
        font-size: 15px;
        font-weight: 600
    }

    .fmSubHero .bottom .left .content .f-button .animated-button {
        font-size: 14px;
        font-weight: 600;
        padding: 0 8vw
    }

    .fmSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.vfxCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.vfxCourses .heading {
    text-align: center
}

.vfxCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.vfxCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.vfxCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.vfxCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.vfxCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.vfxCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.vfxCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.vfxCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vfxCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.vfxCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.vfxCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.vfxCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.vfxCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.vfxCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.vfxCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.vfxCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.vfxCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .vfxCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .vfxCourses .coursesCards .courseCard {
        height: 450px
    }

    .vfxCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 55%
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .vfxCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .vfxCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .vfxCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .vfxCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .vfxCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .vfxCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .vfxCourses .coursesCards .courseCard {
        height: 430px
    }

    .vfxCourses .coursesCards .courseCard .numContainer {
        width: 28%;
        height: 380px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 20px
    }

    .vfxCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .vfxCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .vfxCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .vfxCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .vfxCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer {
        width: 21%;
        height: 380px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 48%
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .vfxCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .vfxCourses .coursesCards .courseCard {
        height: 410px
    }

    .vfxCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 20px
    }

    .vfxCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .vfxCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .vfxCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .vfxCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .vfxCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer {
        width: 30%;
        height: 360px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .vfxCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .vfxCourses .coursesCards .courseCard {
        height: 400px
    }

    .vfxCourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 65%
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .vfxCourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .vfxCourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .vfxCourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .vfxCourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .vfxCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .vfxCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .vfxCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .vfxCourses .heading {
        font-size: 24px
    }

    .vfxCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .vfxCourses .coursesCards .courseCard,.vfxCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .vfxCourses .coursesCards .courseCard .numContainer,.vfxCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number,.vfxCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .index,.vfxCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .vfxCourses .coursesCards .courseCard .numContainer .number .tname,.vfxCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .vfxCourses .coursesCards .courseCard .right,.vfxCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .vfxCourses .coursesCards .courseCard .right .photo,.vfxCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .vfxCourses .coursesCards .courseCard .right .info,.vfxCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .vfxCourses .coursesCards .courseCard .right .info .head,.vfxCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .vfxCourses .coursesCards .courseCard .right .info .desc,.vfxCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 16px
    }

    .vfxCourses .coursesCards .courseCard .right .info button,.vfxCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 4%
    }

    .vfxCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .vfxCourses .scroller {
        display: block
    }
}

.vfxHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.vfxHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.vfxHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.vfxHero h1,.vfxHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.vfxHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%
}

.vfxHero p {
    width: 67%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .vfxHero {
        height:600px
    }

    .vfxHero h1 {
        font-size: 72px
    }

    .vfxHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .vfxHero {
        height:550px
    }

    .vfxHero h1 {
        font-size: 64px
    }

    .vfxHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .vfxHero {
        height:500px
    }

    .vfxHero h1 {
        font-size: 56px
    }

    .vfxHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .vfxHero {
        height:500px
    }

    .vfxHero h1 {
        font-size: 50px
    }

    .vfxHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .vfxHero {
        height:229px
    }

    .vfxHero h1 {
        font-size: 20px;
        width: 80%
    }

    .vfxHero p {
        width: 100%;
        font-size: 16px
    }
}

.vfxJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.vfxJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.vfxJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.vfxJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.vfxJoin .mgj-left .mgjTop,.vfxJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.vfxJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.vfxJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.vfxJoin .mgjmobile-button {
    display: none
}

.vfxJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.vfxJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.vfxJoin .mgj-right .title a {
    text-decoration: none;
    color: #00f
}

.vfxJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.vfxJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .vfxJoin {
        padding:3% 8%
    }

    .vfxJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .vfxJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .vfxJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .vfxJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .vfxJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .vfxJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .vfxJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .vfxJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .vfxJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .vfxJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .vfxJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .vfxJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .vfxJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .vfxJoin .mgj-left .mgjTop,.vfxJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .vfxJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .vfxJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .vfxJoin .mgj-button {
        display: none
    }
}

.vfxSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.vfxSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.vfxSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.vfxSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.vfxSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #821131 inset,5px 5px 20px #821131 inset
}

.vfxSubHero .bottom .left .content .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxSubHero .bottom .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.vfxSubHero .bottom .left .d-button {
    margin-top: 2vh
}

.vfxSubHero .bottom .left .d-button .animated-button {
    padding: 0 3.6vw
}

.vfxSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.vfxSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.vfxSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .vfxSubHero {
        gap:1.5%
    }

    .vfxSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .vfxSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .vfxSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .vfxSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .vfxSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .vfxSubHero .bottom .left .d-button {
        margin-top: 1.5vh
    }

    .vfxSubHero .bottom .left .d-button .animated-button {
        padding: 0 3vw
    }

    .vfxSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .vfxSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .vfxSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .vfxSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .vfxSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .vfxSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .vfxSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .vfxSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .vfxSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .vfxSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .vfxSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .vfxSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .vfxSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 992px) {
    .vfxSubHero .bottom {
        gap:16px;
        height: 400px
    }

    .vfxSubHero .bottom .left {
        width: 48%;
        height: 400px
    }

    .vfxSubHero .bottom .left .content {
        padding: 10px;
        width: 88%;
        height: 83%
    }

    .vfxSubHero .bottom .left .content .title {
        font-size: 30px
    }

    .vfxSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .vfxSubHero .bottom .right {
        width: 52%
    }
}

@media (max-width: 480px) {
    .vfxSubHero {
        flex-direction:column
    }

    .vfxSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .vfxSubHero .bottom .left {
        width: 100%;
        height: 368px
    }

    .vfxSubHero .bottom .left .content {
        padding: 40px 10px;
        gap: 5px
    }

    .vfxSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .vfxSubHero .bottom .left .content .desc {
        font-size: 16px;
        width: 100%;
        padding-bottom: 0
    }

    .vfxSubHero .bottom .left .content .d-button .animated-button {
        font-size: 14px;
        padding: 0 16vw
    }

    .vfxSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.LACHero {
    background: linear-gradient(180deg,#000,#0000),url(../assets/hero-C9wxp-DP.png) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center
}

.LACHero h1 {
    margin-bottom: 7%;
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1440px) {
    .LACHero {
        height:65vh
    }

    .LACHero h1 {
        font-size: 3.8vw;
        margin-bottom: 6%
    }
}

@media (max-width: 1280px) {
    .LACHero {
        height:60vh
    }

    .LACHero h1 {
        font-size: 3.4vw;
        margin-bottom: 5.5%
    }
}

@media (max-width: 480px) {
    .LACHero {
        background:url(../assets/heroMobile-DkDiLJU1.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 302px;
        background-color: transparent
    }

    .LACHero h1 {
        margin-bottom: 36%;
        font-size: 20px
    }
}

.LACFind {
    display: flex;
    justify-content: center;
    margin-top: -13.9%
}

.LACFind .searchBox {
    padding: 40px 43px;
    border-radius: 10px;
    background: var(--WHITE-COLOR, #fff);
    box-shadow: 0 4px 4px #00000040;
    width: 66.3%;
    gap: 40px;
    flex-direction: column;
    display: flex
}

.LACFind .searchBox .top {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.LACFind .searchBox .bottom {
    display: flex
}

.LACFind .searchBox .bottom .left,.LACFind .searchBox .bottom .right {
    display: flex;
    padding: 4px 20px;
    justify-content: space-between;
    align-items: flex-start;
    width: 50%;
    flex-direction: column;
    color: var(--BLACK-PRIMARY-COLOR, #000);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    gap: 20px
}

.LACFind .searchBox .bottom .left select,.LACFind .searchBox .bottom .right select {
    width: 100%;
    padding: 8px 20px;
    font-size: 16px;
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,.4)
}

@media (max-width: 1440px) {
    .LACFind {
        margin-top:-12%
    }

    .LACFind .searchBox {
        padding: 32px 36px;
        width: 72%;
        gap: 32px
    }

    .LACFind .searchBox .top {
        font-size: 28px
    }

    .LACFind .searchBox .bottom .left,.LACFind .searchBox .bottom .right {
        font-size: 20px;
        gap: 16px
    }

    .LACFind .searchBox .bottom .left select,.LACFind .searchBox .bottom .right select {
        font-size: 15px;
        padding: 7px 18px
    }
}

@media (max-width: 1280px) {
    .LACFind {
        margin-top:-10%
    }

    .LACFind .searchBox {
        padding: 28px 30px;
        width: 80%;
        gap: 28px
    }

    .LACFind .searchBox .top {
        font-size: 24px
    }

    .LACFind .searchBox .bottom {
        gap: 24px
    }

    .LACFind .searchBox .bottom .left,.LACFind .searchBox .bottom .right {
        width: 100%;
        font-size: 18px
    }

    .LACFind .searchBox .bottom .left select,.LACFind .searchBox .bottom .right select {
        font-size: 14px;
        padding: 6px 16px
    }
}

@media (max-width: 480px) {
    .LACFind {
        margin-top:-47%
    }

    .LACFind .searchBox {
        padding: 12px 16px 20px;
        width: 100%;
        gap: 20px
    }

    .LACFind .searchBox .top {
        font-size: 18px
    }

    .LACFind .searchBox .bottom {
        gap: 12px;
        flex-direction: column
    }

    .LACFind .searchBox .bottom .left,.LACFind .searchBox .bottom .right {
        gap: 8px;
        padding: 0;
        width: 100%;
        font-size: 16px
    }

    .LACFind .searchBox .bottom .left select,.LACFind .searchBox .bottom .right select {
        border-radius: 5px;
        border: .5px solid rgba(0,0,0,.4);
        font-size: 12px
    }
}

.LACPopular {
    display: flex;
    justify-content: center;
    position: relative
}

.LACPopular .relativeContainer {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%
}

.LACPopular .popularContainer {
    padding: 6vh 4.2vw;
    gap: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    border-radius: .5vh;
    background: var(--Burgundy-color, #821131);
    position: relative;
    z-index: 2
}

.LACPopular .popularContainer .heading {
    text-align: center;
    margin-bottom: 2vh
}

.LACPopular .popularContainer .cities {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    align-items: center;
    justify-content: center
}

.LACPopular .popularContainer .cities .city {
    width: 32%;
    cursor: pointer;
    display: flex;
    align-items: center
}

.LACPopular .popularContainer .cities .city .image {
    width: 5.2vw;
    height: 5.2vw;
    border-radius: 50%
}

.LACPopular .popularContainer .cities .city .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.LACPopular .popularContainer .cities .city .cname {
    text-align: center;
    font-size: 1.04vw;
    cursor: pointer;
    font-weight: 700;
    color: #fff;
    margin-left: .52vw
}

.LACPopular .other {
    color: var(--YELLOW-PRIMARY-COLOR, #f0af13);
    text-align: center;
    font-size: 1.25vw;
    font-weight: 600;
    cursor: pointer;
    transition: color .3s
}

.LACPopular .other:hover {
    color: #d8a30d
}

.LACPopular .otherContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 3;
    color: #fff;
    border-radius: .5vh;
    padding: 1.04vw;
    height: 100%
}

.LACPopular .otherContainer .otherCitiesList {
    background: #821131f2;
    display: flex;
    flex-direction: column;
    width: 94%;
    height: 100%;
    overflow-y: auto;
    background: var(--Burgundy-color, #821131);
    gap: 1.04vw;
    padding: 1.04vw
}

.LACPopular .otherContainer .otherCitiesList::-webkit-scrollbar {
    display: none
}

.LACPopular .otherContainer .otherCitiesList .wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .28vw
}

.LACPopular .otherContainer .otherCitiesList .wrapper .cname {
    padding: .52vw 1.04vw;
    border-radius: .26vw;
    font-size: .94vw;
    cursor: pointer;
    color: #000;
    text-align: center;
    font-weight: 700;
    width: 23vw
}

.LACPopular .otherContainer .otherCitiesList .wrapper .cname svg {
    width: 100%
}

@media (max-width: 1536px) {
    .LACPopular .popularContainer {
        padding:1.5vh 3vw;
        gap: 1.5vh
    }

    .LACPopular .popularContainer .cities {
        gap: .8vw
    }

    .LACPopular .popularContainer .cities .city .image {
        width: 4.2vw;
        height: 4.2vw
    }

    .LACPopular .popularContainer .cities .city .image {
        width: 6vw;
        height: 9vh
    }

    .LACPopular .popularContainer .cities .city .cname {
        font-size: .9vw;
        margin-left: .4vw
    }

    .LACPopular .popularContainer .cities .city .cname svg {
        width: 15vw;
        height: 13vh
    }

    .LACPopular .other {
        font-size: 2.1vw
    }

    .LACPopular .otherContainer {
        padding: .9vw
    }

    .LACPopular .otherContainer .otherCitiesList {
        gap: .8vw;
        padding: .9vw
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper {
        gap: .6vw
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname {
        padding: .4vw .8vw;
        font-size: .8vw
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname svg {
        width: 21.5vw
    }
}

@media (max-width: 1440px) {
    .LACPopular .popularContainer {
        padding:1.4vh 2.5vw;
        gap: 1.4vh
    }

    .LACPopular .popularContainer .cities {
        gap: .7vw
    }

    .LACPopular .popularContainer .cities .city .image {
        width: 5.2vw;
        height: 7.5vh
    }

    .LACPopular .popularContainer .cities .city .cname {
        font-size: .95vw;
        margin-left: .35vw
    }

    .LACPopular .popularContainer .cities .city .cname svg {
        width: 18vw;
        height: 11vh
    }

    .LACPopular .other {
        font-size: 1.8vw
    }

    .LACPopular .otherContainer {
        padding: .8vw
    }

    .LACPopular .otherContainer .otherCitiesList {
        gap: .7vw;
        padding: .8vw
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper {
        gap: .5vw
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname {
        padding: .36vw .7vw;
        font-size: .75vw
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname svg {
        width: 19vw
    }
}

@media (max-width: 480px) {
    .LACPopular .relativeContainer {
        padding:10px;
        width: 100%;
        background-color: #821131;
        border-radius: 10px
    }

    .LACPopular .popularContainer {
        width: 100%;
        gap: 10px;
        padding: 0
    }

    .LACPopular .popularContainer .heading {
        font-size: 16px
    }

    .LACPopular .popularContainer .cities {
        gap: 3vw
    }

    .LACPopular .popularContainer .cities .city {
        width: 40%;
        height: 8vh
    }

    .LACPopular .popularContainer .cities .city .cname {
        cursor: pointer
    }

    .LACPopular .popularContainer .cities .city .cname svg {
        height: 9vh;
        width: 22vw
    }

    .LACPopular .popularContainer .cities .city .cname text {
        font-size: 42px
    }

    .LACPopular .popularContainer .cities .city .image {
        width: 11.5vw;
        height: 7vh
    }

    .LACPopular .other {
        font-size: 16px
    }

    .LACPopular .otherContainer {
        margin-top: -10px;
        height: 47vh
    }

    .LACPopular .otherContainer .otherCitiesList {
        padding: 0
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper {
        width: 100%;
        gap: 2vw;
        height: 40vh
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname {
        width: 23vw;
        padding: 0;
        cursor: pointer
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname svg {
        width: 100%;
        height: 35px
    }

    .LACPopular .otherContainer .otherCitiesList .wrapper .cname text {
        font-size: 33px
    }
}

.LACCards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px
}

.LACCards .card {
    min-height: 50vh;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 45%;
    background-color: #fff;
    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 {
    width: 27.5px;
    height: 35px;
    cursor: pointer
}

.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,.LACCards .card .mid a {
    color: #333;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer
}

.LACCards .card .logos {
    display: flex;
    justify-content: center;
    gap: 20px
}

.LACCards .card .logos .sms {
    display: flex;
    width: 30%;
    gap: 20px
}

.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
}

.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 .animated-button {
    color: #fff;
    border: 1px solid #bc2329;
    background-color: #bc2329;
    transition: none
}

@media (max-width: 1536px) {
    .LACCards {
        gap:32px
    }

    .LACCards .card {
        min-height: 65vh;
        max-height: 65vh;
        width: 48%;
        padding: 24px 24px 45px
    }
}

@media (max-width: 1440px) {
    .LACCards {
        gap:32px
    }

    .LACCards .card {
        min-height: 55vh;
        max-height: 55vh;
        width: 48%;
        padding: 24px 24px 45px
    }

    .LACCards .card .top .name {
        font-size: 28px
    }

    .LACCards .card .top .image {
        width: 24px;
        height: 30px
    }

    .LACCards .card .mid p,.LACCards .card .mid .address,.LACCards .card .mid .phone,.LACCards .card .mid a {
        font-size: 18px
    }

    .LACCards .card .logos {
        gap: 16px
    }

    .LACCards .card .logos .sms .smstext,.LACCards .card .logos .form .formtext {
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .LACCards {
        gap:28px
    }

    .LACCards .card {
        min-height: 60vh;
        max-height: 60vh;
        width: 48%;
        padding: 20px 20px 40px
    }

    .LACCards .card .top .name {
        font-size: 26px
    }

    .LACCards .card .top .image {
        width: 22px;
        height: 28px
    }

    .LACCards .card .mid p,.LACCards .card .mid .address,.LACCards .card .mid .phone,.LACCards .card .mid a {
        font-size: 16px
    }

    .LACCards .card .logos {
        flex-direction: column;
        gap: 12px
    }

    .LACCards .card .logos .sms .smstext,.LACCards .card .logos .form .formtext {
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .LACCards {
        gap:20px
    }

    .LACCards .card {
        padding: 20px 17px 50px 12px;
        width: 100%
    }

    .LACCards .card .top .name {
        font-size: 18px
    }

    .LACCards .card .top .image {
        width: 14px;
        height: 18px
    }

    .LACCards .card .mid p {
        font-size: 18px
    }

    .LACCards .card .mid .address,.LACCards .card .mid .phone {
        cursor: pointer;
        font-size: 16px
    }

    .LACCards .card .logos {
        flex-direction: column
    }

    .LACCards .card .logos .sms,.LACCards .card .logos .form {
        width: 100%
    }

    .LACCards .card .logos .sms .smstext,.LACCards .card .logos .sms .formtext,.LACCards .card .logos .form .smstext,.LACCards .card .logos .form .formtext {
        font-size: 18px
    }

    .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 .animated-button {
        width: 100%;
        padding: 10px;
        font-size: 16px
    }
}

.gdCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.gdCourses .heading {
    text-align: center
}

.gdCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.gdCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.gdCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.gdCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.gdCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.gdCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.gdCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.gdCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gdCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.gdCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.gdCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.gdCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.gdCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.gdCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.gdCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.gdCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.gdCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .gdCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .gdCourses .coursesCards .courseCard {
        height: 450px
    }

    .gdCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .gdCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .gdCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .gdCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .gdCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .gdCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .gdCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .gdCourses .coursesCards .courseCard {
        height: 430px
    }

    .gdCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .gdCourses .coursesCards .courseCard .right {
        gap: 3.5%
    }

    .gdCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .gdCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .gdCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .gdCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px
    }
}

@media (max-width: 1280px) {
    .gdCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .gdCourses .coursesCards .courseCard {
        height: 410px
    }

    .gdCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 54%
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .gdCourses .coursesCards .courseCard .right {
        gap: 3%
    }

    .gdCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .gdCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .gdCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .gdCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px
    }
}

@media (max-width: 992px) {
    .gdCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .gdCourses .coursesCards .courseCard {
        height: 400px
    }

    .gdCourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 65%
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .gdCourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .gdCourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .gdCourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .gdCourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .gdCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .gdCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .gdCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .gdCourses .heading {
        font-size: 24px
    }

    .gdCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .gdCourses .coursesCards .courseCard,.gdCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .gdCourses .coursesCards .courseCard .numContainer,.gdCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .gdCourses .coursesCards .courseCard .numContainer .number,.gdCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .index,.gdCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .gdCourses .coursesCards .courseCard .numContainer .number .tname,.gdCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .gdCourses .coursesCards .courseCard .right,.gdCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .gdCourses .coursesCards .courseCard .right .photo,.gdCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .gdCourses .coursesCards .courseCard .right .info,.gdCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .gdCourses .coursesCards .courseCard .right .info .head,.gdCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .gdCourses .coursesCards .courseCard .right .info .desc,.gdCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .gdCourses .coursesCards .courseCard .right .info button,.gdCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .gdCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .gdCourses .scroller {
        display: block
    }
}

.gdHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.gdHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.gdHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.gdHero h1,.gdHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.gdHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%
}

.gdHero p {
    width: 57%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .gdHero {
        height:600px
    }

    .gdHero h1 {
        font-size: 72px
    }

    .gdHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .gdHero {
        height:550px
    }

    .gdHero h1 {
        font-size: 64px
    }

    .gdHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .gdHero {
        height:500px
    }

    .gdHero h1 {
        font-size: 56px
    }

    .gdHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .gdHero {
        height:500px
    }

    .gdHero h1 {
        font-size: 50px
    }

    .gdHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .gdHero {
        height:229px
    }

    .gdHero h1 {
        font-size: 20px;
        width: 80%
    }

    .gdHero p {
        width: 100%;
        font-size: 16px
    }
}

.gdJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.gdJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.gdJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.gdJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.gdJoin .mgj-left .mgjTop,.gdJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.gdJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.gdJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.gdJoin .mgjmobile-button {
    display: none
}

.gdJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.gdJoin .mgj-right .title a {
    text-decoration: none;
    color: #00f
}

.gdJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.gdJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.gdJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .gdJoin {
        padding:3% 8%
    }

    .gdJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .gdJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .gdJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .gdJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .gdJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .gdJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .gdJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .gdJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .gdJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .gdJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .gdJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .gdJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .gdJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .gdJoin .mgj-left .mgjTop,.gdJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .gdJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .gdJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .gdJoin .mgj-button {
        display: none
    }
}

.gdSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.gdSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.gdSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.gdSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.gdSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #821131 inset,5px 5px 20px #821131 inset
}

.gdSubHero .bottom .left .content .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdSubHero .bottom .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.gdSubHero .bottom .left .d-button {
    margin-top: 2vh
}

.gdSubHero .bottom .left .d-button .animated-button {
    padding: 0 3.6vw
}

.gdSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.gdSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.gdSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .gdSubHero {
        gap:1.5%
    }

    .gdSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .gdSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .gdSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .gdSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .gdSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .gdSubHero .bottom .left .d-button {
        margin-top: 1.5vh
    }

    .gdSubHero .bottom .left .d-button .animated-button {
        padding: 0 3vw
    }

    .gdSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .gdSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .gdSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .gdSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .gdSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .gdSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .gdSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .gdSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .gdSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .gdSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .gdSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .gdSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .gdSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 480px) {
    .gdSubHero {
        flex-direction:column
    }

    .gdSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .gdSubHero .bottom .left {
        width: 100%;
        height: 368px
    }

    .gdSubHero .bottom .left .content {
        padding: 40px 10px;
        gap: 5px
    }

    .gdSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .gdSubHero .bottom .left .content .desc {
        font-size: 16px;
        width: 100%
    }

    .gdSubHero .bottom .left .content .d-button .animated-button {
        font-size: 14px;
        padding: 0 16vw
    }

    .gdSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.sbHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.sbHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.sbHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.sbHero h1,.sbHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.sbHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    text-transform: uppercase
}

.sbHero p {
    width: 67%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .sbHero {
        height:600px
    }

    .sbHero h1 {
        font-size: 72px
    }

    .sbHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .sbHero {
        height:550px
    }

    .sbHero h1 {
        font-size: 64px
    }

    .sbHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .sbHero {
        height:500px
    }

    .sbHero h1 {
        font-size: 56px
    }

    .sbHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .sbHero {
        height:500px
    }

    .sbHero h1 {
        font-size: 50px
    }

    .sbHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .sbHero {
        height:229px
    }

    .sbHero h1 {
        font-size: 20px;
        width: 80%
    }

    .sbHero p {
        width: 100%;
        font-size: 16px
    }
}

.sbJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.sbJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.sbJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.sbJoin .mgj-left .mgjTop,.sbJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.sbJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.sbJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.sbJoin .mgjmobile-button {
    display: none
}

.sbJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.sbJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.sbJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.sbJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .sbJoin {
        padding:3% 8%
    }

    .sbJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .sbJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .sbJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .sbJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .sbJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .sbJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .sbJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .sbJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .sbJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .sbJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .sbJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .sbJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .sbJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .sbJoin .mgj-left .mgjTop,.sbJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .sbJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .sbJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .sbJoin .mgj-button {
        display: none
    }
}

.sbSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.sbSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.sbSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.sbSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.sbSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #821131 inset,5px 5px 20px #821131 inset
}

.sbSubHero .bottom .left .content .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbSubHero .bottom .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.sbSubHero .bottom .left .d-button {
    margin-top: 2vh
}

.sbSubHero .bottom .left .d-button .animated-button {
    padding: 0 3.6vw
}

.sbSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.sbSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.sbSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .sbSubHero {
        gap:1.5%
    }

    .sbSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .sbSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .sbSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .sbSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .sbSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .sbSubHero .bottom .left .d-button {
        margin-top: 1.5vh
    }

    .sbSubHero .bottom .left .d-button .animated-button {
        padding: 0 3vw
    }

    .sbSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .sbSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .sbSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .sbSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .sbSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .sbSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .sbSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .sbSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .sbSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .sbSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .sbSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .sbSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .sbSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 992px) {
    .gdSubHero .bottom {
        gap:16px;
        height: 400px
    }

    .gdSubHero .bottom .left {
        width: 48%;
        height: 400px
    }

    .gdSubHero .bottom .left .content {
        padding: 10px;
        width: 88%;
        height: 83%
    }

    .gdSubHero .bottom .left .content .title {
        font-size: 30px
    }

    .gdSubHero .bottom .left .content .desc {
        font-size: 16px
    }

    .gdSubHero .bottom .right {
        width: 52%
    }
}

@media (max-width: 480px) {
    .sbSubHero {
        flex-direction:column
    }

    .sbSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .sbSubHero .bottom .left {
        width: 100%;
        height: 368px
    }

    .sbSubHero .bottom .left .content {
        padding: 40px 10px;
        gap: 5px
    }

    .sbSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .sbSubHero .bottom .left .content .desc {
        font-size: 16px;
        width: 100%;
        padding-bottom: 0
    }

    .sbSubHero .bottom .left .content .d-button .animated-button {
        font-size: 14px;
        padding: 0 16vw
    }

    .sbSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.sbCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.sbCourses .heading {
    text-align: center
}

.sbCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.sbCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.sbCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #c7253e);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sbCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.sbCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.sbCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.sbCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sbCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.sbCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.sbCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.sbCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.sbCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.sbCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.sbCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.sbCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .sbCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .sbCourses .coursesCards .courseCard {
        height: 450px
    }

    .sbCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .sbCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .sbCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .sbCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .sbCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .sbCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }
}

@media (max-width: 1440px) {
    .sbCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .sbCourses .coursesCards .courseCard {
        height: 430px
    }

    .sbCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .sbCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .sbCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .sbCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .sbCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .sbCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .sbCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .sbCourses .coursesCards .courseCard {
        height: 410px
    }

    .sbCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .sbCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .sbCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .sbCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .sbCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .sbCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .sbCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .sbCourses .coursesCards .courseCard {
        height: 400px
    }

    .sbCourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 65%
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 2px
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .sbCourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .sbCourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .sbCourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .sbCourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .sbCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .sbCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .sbCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .sbCourses .heading {
        font-size: 24px
    }

    .sbCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .sbCourses .coursesCards .courseCard,.sbCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .sbCourses .coursesCards .courseCard .numContainer,.sbCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .sbCourses .coursesCards .courseCard .numContainer .number,.sbCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .sbCourses .coursesCards .courseCard .numContainer .number .index,.sbCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .sbCourses .coursesCards .courseCard .right,.sbCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .sbCourses .coursesCards .courseCard .right .photo,.sbCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .sbCourses .coursesCards .courseCard .right .info,.sbCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .sbCourses .coursesCards .courseCard .right .info .head,.sbCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: -2% auto auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .sbCourses .coursesCards .courseCard .right .info .desc,.sbCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .sbCourses .coursesCards .courseCard .right .info button,.sbCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 2%
    }

    .sbCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .sbCourses .scroller {
        display: block
    }
}

.faqs-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 5%;
    background: radial-gradient(circle at top left,var(--vibrant-crimson-red, #C7253E) -45%,transparent 30%),radial-gradient(circle at bottom right,var(--vibrant-crimson-red, #C7253E) -40%,transparent 40%)
}

.faqs-container .faqs-header {
    height: 415px
}

.faqs-container .faqs-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto
}

.faqs-container .faqs-section .faqs-title {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-underline-offset: 20px;
    text-decoration: underline;
    text-decoration-color: #770006;
    margin: 2rem 0
}

.faqs-container .faqs-section .faqs-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 44px
}

.faqs-container .faqs-section .faqs-list .faq-item {
    padding: 20px 40px;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.4)
}

.faqs-container .faqs-section .faqs-list .faq-item .faq-question {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    cursor: pointer
}

.faqs-container .faqs-section .faqs-list .faq-item .faq-question .plus-icon {
    color: #fbc51d;
    cursor: pointer;
    font-size: 18px;
    transition: transform .3s ease-in-out
}

.faqs-container .faqs-section .faqs-list .faq-item .faq-question .rotate {
    transform: rotate(45deg)
}

.faqs-container .faqs-section .faqs-list .faq-item .faq-question span {
    color: var(--WHITE-COLOR, #FFF);
    font-family: Raleway;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: start;
    font-size: 24px
}

.faqs-container .faqs-section .faqs-list .faq-item .faq-answer {
    font-size: 22px;
    color: #fff9;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: start
}

.faqs-container .faqs-section .faqs-list .faq-item.open {
    border-radius: 10px;
    border-bottom: 1px solid rgba(255,255,255,.4);
    background: var(--Burgundy-color, #821131);
    box-shadow: 0 4px 4px #ffffff26;
    max-height: max-content;
    transition: max-height .4s ease-in-out
}

.more-info {
    margin-top: 100px;
    padding: 50px 20px;
    position: relative;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.more-info h1 {
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.disclaimer {
    width: 100%;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F);
    padding: 40px
}

.disclaimer p {
    color: var(--BLACK-PRIMARY-COLOR, #000);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .faqs-container .faqs-header {
        height:380px
    }

    .faqs-container .faqs-section {
        max-width: 85vw
    }

    .faqs-container .faqs-title {
        font-size: 48px
    }

    .faqs-container .faqs-list {
        gap: 36px
    }

    .faqs-container .faqs-list .faq-item {
        padding: 18px 36px
    }

    .faqs-container .faqs-list .faq-item .faq-question .plus-icon {
        font-size: 16px
    }

    .faqs-container .faqs-list .faq-item .faq-question span {
        font-size: 22px
    }

    .faqs-container .faqs-list .faq-item .faq-answer {
        font-size: 20px
    }

    .faqs-container .faqs-list .faq-item.open {
        max-height: max-content
    }

    .more-info {
        margin-top: 80px;
        padding: 40px 15px
    }

    .more-info h1 {
        font-size: 32px
    }

    .disclaimer {
        padding: 30px
    }

    .disclaimer p {
        font-size: 16px
    }
}

@media (max-width: 1440px) {
    .faqs-container .faqs-header {
        height:350px
    }

    .faqs-container .faqs-section {
        max-width: 90vw
    }

    .faqs-container .faqs-title {
        font-size: 44px
    }

    .faqs-container .faqs-list {
        gap: 32px
    }

    .faqs-container .faqs-list .faq-item {
        padding: 16px 32px
    }

    .faqs-container .faqs-list .faq-item .faq-question .plus-icon {
        font-size: 14px
    }

    .faqs-container .faqs-list .faq-item .faq-question span {
        font-size: 20px
    }

    .faqs-container .faqs-list .faq-item .faq-answer {
        font-size: 18px
    }

    .faqs-container .faqs-list .faq-item.open {
        max-height: max-content
    }

    .more-info {
        margin-top: 60px;
        padding: 35px 10px
    }

    .more-info h1 {
        font-size: 30px
    }

    .disclaimer {
        padding: 25px
    }

    .disclaimer p {
        font-size: 15px
    }
}

@media (max-width: 1280px) {
    .faqs-container .faqs-header {
        height:300px
    }

    .faqs-container .faqs-section {
        max-width: 95vw
    }

    .faqs-container .faqs-title {
        font-size: 40px
    }

    .faqs-container .faqs-list {
        gap: 28px
    }

    .faqs-container .faqs-list .faq-item {
        padding: 14px 28px
    }

    .faqs-container .faqs-list .faq-item .faq-question .plus-icon {
        font-size: 12px
    }

    .faqs-container .faqs-list .faq-item .faq-question span {
        font-size: 18px
    }

    .faqs-container .faqs-list .faq-item .faq-answer {
        font-size: 16px
    }

    .faqs-container .faqs-list .faq-item.open {
        max-height: max-content
    }

    .more-info {
        margin-top: 50px;
        padding: 30px 10px
    }

    .more-info h1 {
        font-size: 28px
    }

    .disclaimer {
        padding: 20px
    }

    .disclaimer p {
        font-size: 14px
    }
}

@media (max-width: 992px) {
    .faqs-container .faqs-header {
        height:260px
    }

    .faqs-container .faqs-section {
        max-width: 98vw
    }

    .faqs-container .faqs-section .faqs-title {
        font-size: 34px;
        margin: 1.5rem 0
    }

    .faqs-container .faqs-section .faqs-list {
        gap: 24px
    }

    .faqs-container .faqs-section .faqs-list .faq-item {
        padding: 12px 20px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-question {
        margin-bottom: 18px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-question .plus-icon {
        font-size: 10px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-question span {
        font-size: 16px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-answer {
        font-size: 14px
    }

    .faqs-container .faqs-section .faqs-list .faq-item.open {
        max-height: max-content
    }

    .more-info {
        margin-top: 40px;
        padding: 20px 10px
    }

    .more-info h1 {
        font-size: 22px;
        margin-bottom: 24px
    }

    .disclaimer {
        padding: 15px
    }

    .disclaimer p {
        font-size: 12px
    }
}

@media (max-width: 480px) {
    .faqs-container .faqs-header {
        height:120px;
        background-size: cover;
        background-position: center
    }

    .faqs-container .faqs-section {
        padding: 20px
    }

    .faqs-container .faqs-section .faqs-title {
        font-size: 24px;
        text-underline-offset: 10px;
        margin: 1rem 0
    }

    .faqs-container .faqs-section .faqs-list {
        gap: 2px
    }

    .faqs-container .faqs-section .faqs-list .faq-item {
        padding: 15px 0
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-question {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-question span {
        font-size: 18px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-question .plus-icon {
        font-size: 16px
    }

    .faqs-container .faqs-section .faqs-list .faq-item .faq-answer {
        font-size: 14px
    }

    .more-info {
        height: 30vh;
        padding: 30px 10px
    }

    .more-info h1 {
        font-size: 20px;
        margin-bottom: 20px
    }

    .disclaimer {
        padding: 20px
    }

    .disclaimer p {
        font-size: 12px
    }
}

.Main3DHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 637px;
    flex-shrink: 0;
    overflow: hidden
}

.Main3DHero video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
    z-index: 0
}

.Main3DHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.Main3DHero h1 {
    position: relative;
    color: #fff;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    z-index: 2
}

.Main3DHero p {
    position: relative;
    padding-top: 20px;
    color: #fff;
    width: 68%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    z-index: 2
}

@media (max-width: 1536px) {
    .Main3DHero {
        height:600px
    }

    .Main3DHero h1 {
        font-size: 72px
    }

    .Main3DHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .Main3DHero {
        height:550px
    }

    .Main3DHero h1 {
        font-size: 64px
    }

    .Main3DHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .Main3DHero {
        height:500px
    }

    .Main3DHero h1 {
        font-size: 56px
    }

    .Main3DHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 992px) {
    .Main3DHero {
        height:400px
    }

    .Main3DHero h1 {
        font-size: 50px
    }

    .Main3DHero p {
        font-size: 16px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .Main3DHero {
        height:229px;
        padding: 20px
    }

    .Main3DHero h1 {
        font-size: 20px
    }

    .Main3DHero p {
        width: 100%;
        font-size: 14px;
        padding-top: 20px
    }
}

.Main3Dsubhero {
    position: relative;
    display: flex;
    gap: 2%
}

.Main3Dsubhero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.Main3Dsubhero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.Main3Dsubhero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.Main3Dsubhero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #821131 inset,5px 5px 20px #821131 inset
}

.Main3Dsubhero .bottom .left .content .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Main3Dsubhero .bottom .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.Main3Dsubhero .bottom .left .content .desc a {
    text-decoration: none;
    color: #00f
}

.Main3Dsubhero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.Main3Dsubhero .bottom .right {
    width: 60%;
    height: 100%
}

.Main3Dsubhero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .Main3Dsubhero .bottom {
        gap:30px;
        height: 500px
    }

    .Main3Dsubhero .bottom .left {
        width: 42%;
        height: 460px
    }

    .Main3Dsubhero .bottom .left .content {
        padding: 30px;
        width: 94%;
        height: 90%
    }

    .Main3Dsubhero .bottom .left .content .title {
        font-size: 50px
    }

    .Main3Dsubhero .bottom .left .content .desc {
        font-size: 22px
    }

    .Main3Dsubhero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .Main3Dsubhero .bottom {
        gap:25px;
        height: 480px
    }

    .Main3Dsubhero .bottom .left {
        width: 44%;
        height: 440px
    }

    .Main3Dsubhero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .Main3Dsubhero .bottom .left .content .title {
        font-size: 46px
    }

    .Main3Dsubhero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .Main3Dsubhero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .Main3Dsubhero .bottom {
        gap:20px;
        height: 450px
    }

    .Main3Dsubhero .bottom .left {
        width: 46%;
        height: 400px
    }

    .Main3Dsubhero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .Main3Dsubhero .bottom .left .content .title {
        font-size: 36px
    }

    .Main3Dsubhero .bottom .left .content .desc {
        font-size: 17px
    }

    .Main3Dsubhero .bottom .right {
        width: 54%
    }
}

@media (max-width: 992px) {
    .Main3Dsubhero .bottom {
        gap:16px;
        height: 400px
    }

    .Main3Dsubhero .bottom .left {
        width: 48%;
        height: 400px
    }

    .Main3Dsubhero .bottom .left .content {
        padding: 10px;
        width: 88%;
        height: 83%
    }

    .Main3Dsubhero .bottom .left .content .title {
        font-size: 30px
    }

    .Main3Dsubhero .bottom .left .content .desc {
        font-size: 16px
    }

    .Main3Dsubhero .bottom .right {
        width: 52%
    }
}

@media (max-width: 480px) {
    .Main3Dsubhero {
        flex-direction:column
    }

    .Main3Dsubhero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .Main3Dsubhero .bottom .left {
        width: 100%;
        height: 400px
    }

    .Main3Dsubhero .bottom .left .content {
        padding: 40px 10px;
        gap: 5px
    }

    .Main3Dsubhero .bottom .left .content .title {
        font-size: 20px
    }

    .Main3Dsubhero .bottom .left .content .desc {
        font-size: 15px
    }

    .Main3Dsubhero .bottom .left .content button {
        font-size: 14px;
        padding: 2.6vh 8.6vw
    }

    .Main3Dsubhero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.Main3Dcourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.Main3Dcourses .heading {
    text-align: center
}

.Main3Dcourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.Main3Dcourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.Main3Dcourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.Main3Dcourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.Main3Dcourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Main3Dcourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.Main3Dcourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.Main3Dcourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.Main3Dcourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.Main3Dcourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.Main3Dcourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Main3Dcourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.Main3Dcourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.Main3Dcourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.Main3Dcourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.Main3Dcourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .Main3Dcourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .Main3Dcourses .coursesCards .courseCard {
        height: 450px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .Main3Dcourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .Main3Dcourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .Main3Dcourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .Main3Dcourses .coursesCards .courseCard {
        height: 430px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer {
        width: 25%;
        height: 380px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number {
        margin-right: 56%
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 28px
    }

    .Main3Dcourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .Main3Dcourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .Main3Dcourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .Main3Dcourses .coursesCards .courseCard {
        height: 410px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 28px
    }

    .Main3Dcourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .Main3Dcourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .Main3Dcourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .Main3Dcourses .coursesCards .courseCard {
        height: 400px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer {
        width: 45%;
        height: 360px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number {
        margin-right: 62%
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 50px;
        -webkit-text-stroke-width: 2px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .Main3Dcourses .coursesCards .courseCard .right {
        width: 98%;
        gap: 4%
    }

    .Main3Dcourses .coursesCards .courseCard .right .photo {
        width: 350px;
        height: 320px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info {
        width: 420px;
        gap: 24px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .head {
        font-size: 40px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 54%
    }

    .Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }
}

@media (max-width: 480px) {
    .Main3Dcourses {
        padding:3.48% 0;
        gap: 20px
    }

    .Main3Dcourses .heading {
        font-size: 24px
    }

    .Main3Dcourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .Main3Dcourses .coursesCards .courseCard,.Main3Dcourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer,.Main3Dcourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number,.Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .index,.Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .Main3Dcourses .coursesCards .courseCard .numContainer .number .tname,.Main3Dcourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .Main3Dcourses .coursesCards .courseCard .right,.Main3Dcourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .Main3Dcourses .coursesCards .courseCard .right .photo,.Main3Dcourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info,.Main3Dcourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .head,.Main3Dcourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info .desc,.Main3Dcourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 16px
    }

    .Main3Dcourses .coursesCards .courseCard .right .info button,.Main3Dcourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%
    }

    .Main3Dcourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .Main3Dcourses .scroller {
        display: block
    }
}

.main3DJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%
}

.main3DJoin .mgj-left {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.main3DJoin .mgj-left .mainImg-container {
    position: relative;
    display: inline-block
}

.main3DJoin .mgj-left .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.main3DJoin .mgj-left .mgjTop,.main3DJoin .mgj-left .mgjBottom {
    position: absolute;
    width: 8vw
}

.main3DJoin .mgj-left .mgjTop {
    top: -.6vw;
    left: 0
}

.main3DJoin .mgj-left .mgjBottom {
    bottom: -.5vw;
    right: 0
}

.main3DJoin .mgjmobile-button {
    display: none
}

.main3DJoin .mgj-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.main3DJoin .mgj-right .heading {
    margin-bottom: .5vw
}

.main3DJoin .mgj-right .mgj-button {
    margin-top: 2vw
}

.main3DJoin .mgj-right .mgj-button .animated-button {
    padding: 0 3.4vw
}

@media (max-width: 992px) {
    .main3DJoin {
        padding:3% 8%
    }

    .main3DJoin .mgj-right {
        width: 50%;
        padding-left: 3vw
    }

    .main3DJoin .mgj-right .heading {
        margin-bottom: .4vw;
        font-size: 1.5rem
    }

    .main3DJoin .mgj-right .mgj-button {
        margin-top: 1.5vw
    }

    .main3DJoin .mgj-right .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: 1rem
    }

    .main3DJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .main3DJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .main3DJoin .mgj-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .main3DJoin .mgj-right .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .main3DJoin .mgj-right .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .main3DJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .main3DJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .main3DJoin .mgj-left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .main3DJoin .mgj-left .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .main3DJoin .mgj-left .mgjTop,.main3DJoin .mgj-left .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .main3DJoin .mgj-left .mgjTop {
        top: -2vw;
        left: 0
    }

    .main3DJoin .mgj-left .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .main3DJoin .mgj-button {
        display: none
    }
}

.fmDFMHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-DQ83VyKT.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.fmDFMHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .fmDFMHero {
        height:60vh
    }

    .fmDFMHero h1 {
        font-size: 4vw;
        text-shadow: 0px .5vh .5vh rgba(0,0,0,.3)
    }
}

@media (max-width: 480px) {
    .fmDFMHero {
        height:233px
    }

    .fmDFMHero h1 {
        font-size: 20px
    }
}

.Ipsubhero {
    display: flex;
    height: 763px;
    padding: 3.48% 5.2% 3.48% 0
}

.Ipsubhero .left {
    position: relative;
    width: 55%
}

.Ipsubhero .left .block1 {
    position: absolute;
    height: 100%;
    left: 0;
    width: 20%;
    background-color: #fabc3f
}

.Ipsubhero .left .block2 {
    position: absolute;
    height: 30%;
    width: 70%;
    bottom: 0;
    right: 0;
    background-color: #821131
}

.Ipsubhero .left .image {
    position: absolute;
    height: 90%;
    width: 87%;
    right: 5%;
    bottom: 5%
}

.Ipsubhero .left .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.Ipsubhero .right {
    padding: 1.5% 0 0 5%;
    gap: 20px;
    width: 45%;
    display: flex;
    flex-direction: column
}

.Ipsubhero .right .title {
    width: 100%;
    color: #f0af13;
    font-size: 55px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Ipsubhero .right .desc {
    width: 97%;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.Ipsubhero .right .line {
    width: 100%;
    margin-top: auto;
    background: #8a1331;
    height: 1px
}

.Ipsubhero .right .duration {
    color: #f0af13;
    padding: 10px 0;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Ipsubhero .right .animated-button {
    width: 35%;
    padding: 1.2vw 3.6vw
}

@media (max-width: 1536px) {
    .Ipsubhero {
        height:700px;
        padding: 3% 4.5% 3% 0
    }

    .Ipsubhero .left {
        width: 52%
    }

    .Ipsubhero .left .block1 {
        width: 18%
    }

    .Ipsubhero .left .block2 {
        width: 65%;
        height: 28%
    }

    .Ipsubhero .left .image {
        height: 88%;
        width: 85%;
        right: 4%;
        bottom: 4%
    }

    .Ipsubhero .left .image img {
        object-fit: cover
    }

    .Ipsubhero .right {
        width: 48%;
        padding: 1.2% 0 0 4.5%;
        gap: 18px
    }

    .Ipsubhero .right .title {
        font-size: 48px
    }

    .Ipsubhero .right .desc {
        font-size: 20px;
        width: 95%
    }

    .Ipsubhero .right .line {
        margin-top: auto
    }

    .Ipsubhero .right .duration {
        font-size: 30px
    }

    .Ipsubhero .right .animated-button {
        width: 33%;
        height: 40px
    }
}

@media (max-width: 1440px) {
    .Ipsubhero {
        height:660px;
        padding: 2.8% 4% 2.8% 0
    }

    .Ipsubhero .left {
        width: 50%
    }

    .Ipsubhero .left .block1 {
        width: 16%
    }

    .Ipsubhero .left .block2 {
        width: 60%;
        height: 26%
    }

    .Ipsubhero .left .image {
        height: 85%;
        width: 82%;
        right: 4%;
        bottom: 4%
    }

    .Ipsubhero .right {
        width: 50%;
        padding: 1% 0 0 4%;
        gap: 16px
    }

    .Ipsubhero .right .title {
        font-size: 44px
    }

    .Ipsubhero .right .desc {
        font-size: 18px;
        width: 93%
    }

    .Ipsubhero .right .line {
        margin-top: auto
    }

    .Ipsubhero .right .duration {
        font-size: 28px
    }

    .Ipsubhero .right .animated-button {
        width: 32%;
        height: 38px;
        padding: 1vw 3vw
    }
}

@media (max-width: 1280px) {
    .Ipsubhero {
        height:620px;
        padding: 2.5% 3.5% 2.5% 0
    }

    .Ipsubhero .left {
        width: 48%
    }

    .Ipsubhero .left .block1 {
        width: 14%;
        left: 5%;
        height: 90%
    }

    .Ipsubhero .left .block2 {
        width: 55%;
        height: 15%;
        bottom: 10%
    }

    .Ipsubhero .left .image {
        height: 70%;
        width: 85%;
        right: 4%;
        bottom: 20%
    }

    .Ipsubhero .right {
        width: 52%;
        padding: 1% 0 0 3.5%;
        gap: 14px
    }

    .Ipsubhero .right .title {
        font-size: 38px
    }

    .Ipsubhero .right .desc {
        font-size: 16px;
        width: 90%
    }

    .Ipsubhero .right .line {
        margin-top: auto
    }

    .Ipsubhero .right .duration {
        font-size: 26px
    }

    .Ipsubhero .right .animated-button {
        width: 30%;
        height: 36px;
        padding: 1vw 2.8vw
    }
}

@media (max-width: 992px) {
    .Ipsubhero {
        height:570px;
        padding: 2.2% 3% 2.2% 0
    }

    .Ipsubhero .left {
        width: 46%
    }

    .Ipsubhero .left .block1 {
        width: 12%;
        left: 5%;
        height: 88%
    }

    .Ipsubhero .left .block2 {
        width: 50%;
        height: 14%;
        bottom: 10%
    }

    .Ipsubhero .left .image {
        height: 68%;
        width: 80%;
        right: 4%;
        bottom: 20%
    }

    .Ipsubhero .left .image img {
        object-fit: cover
    }

    .Ipsubhero .right {
        width: 54%;
        padding: 1% 0 0 3%;
        gap: 12px
    }

    .Ipsubhero .right .title {
        font-size: 32px
    }

    .Ipsubhero .right .desc {
        font-size: 15px;
        width: 90%
    }

    .Ipsubhero .right .line {
        margin-top: auto
    }

    .Ipsubhero .right .duration {
        font-size: 22px
    }

    .Ipsubhero .right .animated-button {
        width: 28%;
        height: 34px;
        padding: .9vw 2.5vw
    }
}

@media (max-width: 480px) {
    .Ipsubhero {
        flex-direction:column-reverse;
        height: auto;
        gap: 50px;
        padding: 0
    }

    .Ipsubhero .left {
        height: 300px;
        width: 100%
    }

    .Ipsubhero .right {
        padding: 3.48% 5.2%;
        width: 100%;
        gap: 10px;
        text-align: center;
        align-items: center
    }

    .Ipsubhero .right .title {
        font-size: 18px
    }

    .Ipsubhero .right .desc {
        font-size: 15px
    }

    .Ipsubhero .right .line {
        margin-top: auto
    }

    .Ipsubhero .right .duration {
        font-size: 16px
    }

    .Ipsubhero .right .animated-button {
        font-size: 14px;
        padding: 0 3.6vw
    }
}

.IpCourseContent {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.IpCourseContent .heading {
    display: flex;
    justify-content: center
}

.IpCourseContent .bottom {
    padding: 3% 0;
    display: flex;
    gap: 30px
}

.IpCourseContent .bottom .left {
    position: relative;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: max-content
}

.IpCourseContent .bottom .left .image-container {
    position: relative;
    display: inline-block
}

.IpCourseContent .bottom .left .image {
    width: 28.28vw;
    height: 28.21vw;
    display: block;
    object-fit: cover
}

.IpCourseContent .bottom .left .tcorner,.IpCourseContent .bottom .left .bcorner {
    position: absolute;
    width: 8vw
}

.IpCourseContent .bottom .left .tcorner {
    top: -.6vw;
    left: 12px
}

.IpCourseContent .bottom .left .bcorner {
    bottom: -.5vw;
    right: 12px
}

.IpCourseContent .bottom .right {
    width: 63%
}

.IpCourseContent .bottom .right .ipCCAccord {
    padding-top: 2%
}

.IpCourseContent .bottom .right .ipCCAccord .accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.4);
    border-bottom: 1px solid rgba(255,255,255,.4)
}

.IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 20px 0
}

.IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .title {
    color: #bc2329;
    width: 82%;
    font-size: 24px;
    font-weight: 500
}

.IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .tick {
    width: 5%;
    display: flex;
    align-items: center;
    justify-content: center
}

.IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header img {
    width: 20px;
    transition: transform .3s ease-in-out;
}

.IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-content {
    /*padding: 1% 3% 3%;*/
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.IpCourseContent .bottom.reverse {
    flex-direction: row-reverse
}

@media (max-width: 1536px) {
    .IpCourseContent {
        gap:35px
    }

    .IpCourseContent .bottom {
        padding: 1% 0;
        gap: 25px
    }

    .IpCourseContent .bottom .left {
        width: 38%
    }

    .IpCourseContent .bottom .left .image {
        width: 31vw;
        height: 26vw
    }

    .IpCourseContent .bottom .left .tcorner,.IpCourseContent .bottom .left .bcorner {
        width: 7vw
    }

    .IpCourseContent .bottom .left .tcorner {
        top: -.5vw;
        left: 10px
    }

    .IpCourseContent .bottom .left .bcorner {
        bottom: -.4vw;
        right: 10px
    }

    .IpCourseContent .bottom .right {
        width: 60%
    }

    .IpCourseContent .bottom .right .ipCCAccord {
        padding-top: 1.8%
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header {
        padding: 18px 0
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .title {
        font-size: 22px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header img {
        width: 18px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-content {
        font-size: 18px;
        line-height: 36px
    }
}

@media (max-width: 1440px) {
    .IpCourseContent {
        gap:32px
    }

    .IpCourseContent .bottom {
        padding: 1% 0;
        gap: 22px
    }

    .IpCourseContent .bottom .left {
        width: 40%
    }

    .IpCourseContent .bottom .left .image {
        width: 32vw;
        height: 25vw
    }

    .IpCourseContent .bottom .left .tcorner,.IpCourseContent .bottom .left .bcorner {
        width: 6.5vw
    }

    .IpCourseContent .bottom .left .tcorner {
        top: -.4vw;
        left: 20px
    }

    .IpCourseContent .bottom .left .bcorner {
        bottom: -.3vw;
        right: 20px
    }

    .IpCourseContent .bottom .right {
        width: 58%
    }

    .IpCourseContent .bottom .right .ipCCAccord {
        padding-top: 1.5%
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header {
        padding: 16px 0
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .title {
        font-size: 21px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header img {
        width: 17px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-content {
        font-size: 17px;
        line-height: 34px
    }
}

@media (max-width: 1280px) {
    .IpCourseContent {
        gap:28px
    }

    .IpCourseContent .bottom {
        padding: .8% 0;
        gap: 20px
    }

    .IpCourseContent .bottom .left {
        width: 42%
    }

    .IpCourseContent .bottom .left .image {
        width: 33vw;
        height: 24vw
    }

    .IpCourseContent .bottom .left .tcorner,.IpCourseContent .bottom .left .bcorner {
        width: 6vw
    }

    .IpCourseContent .bottom .left .tcorner {
        top: -.5vw;
        left: 22px
    }

    .IpCourseContent .bottom .left .bcorner {
        bottom: -.5vw;
        right: 22px
    }

    .IpCourseContent .bottom .right {
        width: 56%
    }

    .IpCourseContent .bottom .right .ipCCAccord {
        padding-top: 1.2%
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header {
        padding: 14px 0
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .title {
        font-size: 20px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header img {
        width: 16px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-content {
        font-size: 16px;
        line-height: 32px
    }
}

@media (max-width: 992px) {
    .IpCourseContent {
        gap:24px
    }

    .IpCourseContent .bottom {
        padding: 1% 0;
        gap: 18px
    }

    .IpCourseContent .bottom .left {
        width: 44%
    }

    .IpCourseContent .bottom .left .image {
        width: 36vw;
        height: 24vw
    }

    .IpCourseContent .bottom .left .tcorner,.IpCourseContent .bottom .left .bcorner {
        width: 5.5vw
    }

    .IpCourseContent .bottom .left .tcorner {
        top: -.5vw;
        left: 14px
    }

    .IpCourseContent .bottom .left .bcorner {
        bottom: -.4vw;
        right: 14px
    }

    .IpCourseContent .bottom .right {
        width: 54%
    }

    .IpCourseContent .bottom .right .ipCCAccord {
        padding-top: 1%
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header {
        padding: 12px 0
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .title {
        font-size: 18px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header img {
        width: 14px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-content {
        font-size: 15px;
        line-height: 28px;
        gap: 4px
    }
}

@media (max-width: 480px) {
    .IpCourseContent {
        padding-top:10%;
        gap: 20px
    }

    .IpCourseContent .heading {
        font-size: 20px
    }

    .IpCourseContent .bottom {
        padding: 2% 0;
        gap: 10px;
        flex-direction: column-reverse
    }

    .IpCourseContent .bottom .left {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .IpCourseContent .bottom .left .image {
        width: 323.269px;
        height: 246.731px
    }

    .IpCourseContent .bottom .left .tcorner,.IpCourseContent .bottom .left .bcorner {
        position: absolute;
        width: 20vw
    }

    .IpCourseContent .bottom .left .tcorner {
        top: -2vw;
        left: 0
    }

    .IpCourseContent .bottom .left .bcorner {
        bottom: -2vw;
        right: 0
    }

    .IpCourseContent .bottom .right {
        width: 100%
    }

    .IpCourseContent .bottom .right .ipCCAccord {
        padding-top: 8%
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion {
        border-top: 1px solid white;
        border-bottom: 1px solid white
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header {
        padding: 20px 0
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .title {
        font-size: 18px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-header .tick img {
        width: 18px
    }

    .IpCourseContent .bottom .right .ipCCAccord .accordion .accordian-content {
        font-size: 14px
    }

    .IpCourseContent .bottom.reverse {
        flex-direction: column-reverse
    }
}

.IpSoftware {
    padding: 1.48% 0 3.48% 5.2%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.IpSoftware .heading {
    display: flex;
    justify-content: center
}

.IpSoftware .bottom {
    gap: 40px;
    width: 100%;
    height: max-content;
    display: flex
}

.IpSoftware .bottom .left {
    gap: 20px;
    width: 60%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    row-gap: 10%;
    padding-bottom: 15%
}

.IpSoftware .bottom .left .software {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 123px
}

.IpSoftware .bottom .left .software .slogo {
    width: 75px;
    height: 90px;
    padding-bottom: 6%
}

.IpSoftware .bottom .left .software .slogo img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.IpSoftware .bottom .left .software .sname {
    text-align: center;
    font-size: 24px;
    width: 100%;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.IpSoftware .bottom .left.scrollable {
    height: 600px;
    overflow-y: scroll
}

.IpSoftware .bottom .right {
    height: 702px;
    position: relative;
    width: 44.7%
}

.IpSoftware .bottom .right .block1 {
    position: absolute;
    height: 100%;
    right: 0;
    width: 30%;
    background-color: #fabc3f
}

.IpSoftware .bottom .right .block2 {
    position: absolute;
    height: 20%;
    width: 63%;
    bottom: 0;
    left: 0;
    background: #bc2329
}

.IpSoftware .bottom .right .image {
    position: absolute;
    height: 90%;
    width: 87%;
    left: 4%;
    bottom: 5%
}

.IpSoftware .bottom .right .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.IpSoftware .scroller {
    display: none
}

@media (max-width: 1536px) {
    .IpSoftware {
        margin-bottom:5%;
        padding: 1.5% 0 3.5% 4%;
        height: 780px;
        gap: 35px
    }

    .IpSoftware .bottom {
        gap: 20px
    }

    .IpSoftware .bottom .left {
        width: 58%;
        gap: 10px;
        grid-template-columns: repeat(4,1fr)
    }

    .IpSoftware .bottom .left .software {
        height: 120px
    }

    .IpSoftware .bottom .left .software .slogo {
        width: 60px;
        height: 60px
    }

    .IpSoftware .bottom .left .software .slogo img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .IpSoftware .bottom .left .software .sname {
        font-size: 20px
    }

    .IpSoftware .bottom .right {
        width: 46%;
        height: 600px
    }

    .IpSoftware .bottom .right .block1 {
        width: 20%
    }

    .IpSoftware .bottom .right .block2 {
        height: 14%;
        width: 60%
    }

    .IpSoftware .bottom .right .image {
        height: 75%;
        width: 80%;
        left: 5%;
        bottom: 6%
    }

    .IpSoftware .scroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .IpSoftware {
        padding:1.5% 0 3.5% 3.5%;
        height: 720px;
        gap: 32px;
        margin-bottom: 15%
    }

    .IpSoftware .bottom {
        gap: 18px
    }

    .IpSoftware .bottom .left {
        width: 57%;
        row-gap: 8%;
        padding-bottom: 12%;
        grid-template-columns: repeat(4,1fr)
    }

    .IpSoftware .bottom .left .software {
        height: 100px
    }

    .IpSoftware .bottom .left .software .slogo {
        width: 55px;
        height: 55px
    }

    .IpSoftware .bottom .left .software .sname {
        font-size: 18px
    }

    .IpSoftware .bottom .right {
        width: 45%;
        height: 550px
    }

    .IpSoftware .bottom .right .block1 {
        width: 18%
    }

    .IpSoftware .bottom .right .block2 {
        height: 13%;
        width: 58%
    }

    .IpSoftware .bottom .right .image {
        height: 73%;
        width: 78%;
        left: 5%;
        bottom: 5%
    }

    .IpSoftware .scroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .IpSoftware {
        padding:1.2% 0 3.2% 3%;
        height: 680px;
        gap: 28px;
        margin-bottom: 2%
    }

    .IpSoftware .bottom {
        gap: 16px
    }

    .IpSoftware .bottom .left {
        width: 55%;
        row-gap: 7%;
        padding-bottom: 0%;
        grid-template-columns: repeat(4,1fr)
    }

    .IpSoftware .bottom .left .software {
        height: 75px
    }

    .IpSoftware .bottom .left .software .slogo {
        width: 50px;
        height: 50px
    }

    .IpSoftware .bottom .left .software .sname {
        font-size: 16px
    }

    .IpSoftware .bottom .right {
        width: 43%;
        height: 500px
    }

    .IpSoftware .bottom .right .block1 {
        width: 16%;
        right: 5%
    }

    .IpSoftware .bottom .right .block2 {
        height: 12%;
        width: 55%
    }

    .IpSoftware .bottom .right .image {
        height: 70%;
        width: 75%;
        left: 8%;
        bottom: 5%
    }

    .IpSoftware .scroller {
        display: none
    }
}

@media (max-width: 992px) {
    .IpSoftware {
        padding:1% 0 3% 2.5%;
        height: 620px;
        gap: 24px;
        margin-bottom: 2%
    }

    .IpSoftware .bottom {
        gap: 14px
    }

    .IpSoftware .bottom .left {
        width: 53%;
        row-gap: 6%;
        padding-bottom: 0;
        grid-template-columns: repeat(4,1fr)
    }

    .IpSoftware .bottom .left .software {
        height: 65px
    }

    .IpSoftware .bottom .left .software .slogo {
        width: 40px;
        height: 40px;
        padding-bottom: 4%
    }

    .IpSoftware .bottom .left .software .slogo img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .IpSoftware .bottom .left .software .sname {
        font-size: 14px
    }

    .IpSoftware .bottom .right {
        width: 45%;
        height: 450px
    }

    .IpSoftware .bottom .right .block1 {
        width: 15%
    }

    .IpSoftware .bottom .right .block2 {
        height: 11%;
        width: 52%
    }

    .IpSoftware .bottom .right .image {
        height: 66%;
        width: 72%;
        left: 9%;
        bottom: 4%
    }

    .IpSoftware .scroller {
        display: none
    }
}

@media (max-width: 480px) {
    .IpSoftware {
        height:571px;
        gap: 20px;
        padding: 1.28% 0
    }

    .IpSoftware .heading {
        font-size: 20px
    }

    .IpSoftware .bottom {
        height: 434px;
        flex-direction: column-reverse
    }

    .IpSoftware .bottom .right {
        width: 100%;
        height: 303px
    }

    .IpSoftware .bottom .left {
        height: auto;
        width: 100%;
        display: flex;
        overflow-x: scroll;
        padding: 0 3.48%
    }

    .IpSoftware .bottom .left::-webkit-scrollbar {
        display: none
    }

    .IpSoftware .bottom .left .software {
        justify-content: flex-start;
        flex: 0 0 25%;
        height: 100%;
        gap: 12px
    }

    .IpSoftware .bottom .left .software .slogo {
        height: 40px;
        width: 40px
    }

    .IpSoftware .bottom .left .software .sname {
        font-size: 16px
    }

    .IpSoftware .scroller {
        display: block
    }
}

.fmPPVPHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-BGi5V-an.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.fmPPVPHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 60%
}

@media (max-width: 992px) {
    .fmPPVPHero {
        height:60vh
    }

    .fmPPVPHero h1 {
        font-size: 4vw;
        text-shadow: 0px .5vh .5vh rgba(0,0,0,.3)
    }
}

@media (max-width: 480px) {
    .fmPPVPHero {
        height:233px
    }

    .fmPPVPHero h1 {
        font-size: 20px
    }
}

.ipNewSoftware {
    padding: 1.48% 0 3.48% 5.2%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.ipNewSoftware .heading {
    display: flex;
    justify-content: center
}

.ipNewSoftware .bottom {
    gap: 40px;
    width: 100%;
    height: max-content;
    display: flex
}

.ipNewSoftware .bottom .left {
    gap: 20px;
    width: 60%;
    display: grid;
    height: max-content;
    grid-template-columns: repeat(5,1fr);
    row-gap: 10%;
    padding-bottom: 15%
}

.ipNewSoftware .bottom .left .software {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 123px
}

.ipNewSoftware .bottom .left .software .slogo {
    width: 65px;
    height: 80px;
    padding-bottom: 6%
}

.ipNewSoftware .bottom .left .software .slogo img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.ipNewSoftware .bottom .left .software .sname {
    text-align: center;
    font-size: 24px;
    width: 100%;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.ipNewSoftware .bottom .right {
    height: 702px;
    position: relative;
    width: 44.7%
}

.ipNewSoftware .bottom .right .block1 {
    position: absolute;
    height: 100%;
    right: 0;
    width: 30%;
    background-color: #fabc3f
}

.ipNewSoftware .bottom .right .block2 {
    position: absolute;
    height: 20%;
    width: 63%;
    bottom: 0;
    left: 0;
    background: #bc2329
}

.ipNewSoftware .bottom .right .image {
    position: absolute;
    height: 90%;
    width: 87%;
    left: 4%;
    bottom: 5%
}

.ipNewSoftware .bottom .right .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ipNewSoftware .scroller {
    display: none
}

@media (max-width: 1536px) {
    .ipNewSoftware {
        margin-bottom:5%;
        padding: 1.5% 0 3.5% 4%;
        height: 780px;
        gap: 35px
    }

    .ipNewSoftware .bottom {
        gap: 20px
    }

    .ipNewSoftware .bottom .left {
        width: 58%;
        gap: 10px;
        grid-template-columns: repeat(5,1fr)
    }

    .ipNewSoftware .bottom .left .software {
        height: 100px
    }

    .ipNewSoftware .bottom .left .software .slogo {
        width: 50px;
        height: 50px;
        margin-bottom: 5%
    }

    .ipNewSoftware .bottom .left .software .slogo img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .ipNewSoftware .bottom .left .software .sname {
        font-size: 18px
    }

    .ipNewSoftware .bottom .right {
        width: 46%;
        height: 600px
    }

    .ipNewSoftware .bottom .right .block1 {
        width: 20%
    }

    .ipNewSoftware .bottom .right .block2 {
        height: 14%;
        width: 60%
    }

    .ipNewSoftware .bottom .right .image {
        height: 75%;
        width: 80%;
        left: 5%;
        bottom: 6%
    }

    .ipNewSoftware .scroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .ipNewSoftware {
        padding:1.5% 0 3.5% 3.5%;
        height: 720px;
        gap: 32px;
        margin-bottom: 15%
    }

    .ipNewSoftware .bottom {
        gap: 18px
    }

    .ipNewSoftware .bottom .left {
        width: 57%;
        row-gap: 8%;
        padding-bottom: 12%;
        grid-template-columns: repeat(5,1fr)
    }

    .ipNewSoftware .bottom .left .software {
        height: 100px
    }

    .ipNewSoftware .bottom .left .software .slogo {
        width: 55px;
        height: 55px
    }

    .ipNewSoftware .bottom .left .software .sname {
        font-size: 18px
    }

    .ipNewSoftware .bottom .right {
        width: 45%;
        height: 550px
    }

    .ipNewSoftware .bottom .right .block1 {
        width: 18%
    }

    .ipNewSoftware .bottom .right .block2 {
        height: 13%;
        width: 58%
    }

    .ipNewSoftware .bottom .right .image {
        height: 73%;
        width: 78%;
        left: 5%;
        bottom: 5%
    }

    .ipNewSoftware .scroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .ipNewSoftware {
        padding:1.2% 0 3.2% 3%;
        height: 680px;
        gap: 28px;
        margin-bottom: 2%
    }

    .ipNewSoftware .bottom {
        gap: 16px
    }

    .ipNewSoftware .bottom .left {
        width: 55%;
        row-gap: 7%;
        padding-bottom: 0%;
        grid-template-columns: repeat(5,1fr)
    }

    .ipNewSoftware .bottom .left .software {
        height: 75px
    }

    .ipNewSoftware .bottom .left .software .slogo {
        width: 50px;
        height: 50px
    }

    .ipNewSoftware .bottom .left .software .sname {
        font-size: 16px
    }

    .ipNewSoftware .bottom .right {
        width: 43%;
        height: 500px
    }

    .ipNewSoftware .bottom .right .block1 {
        width: 16%;
        right: 5%
    }

    .ipNewSoftware .bottom .right .block2 {
        height: 12%;
        width: 55%
    }

    .ipNewSoftware .bottom .right .image {
        height: 70%;
        width: 75%;
        left: 8%;
        bottom: 5%
    }

    .ipNewSoftware .scroller {
        display: none
    }
}

@media (max-width: 992px) {
    .ipNewSoftware {
        padding:1% 0 3% 2.5%;
        height: 620px;
        gap: 24px;
        margin-bottom: 2%
    }

    .ipNewSoftware .bottom {
        gap: 14px
    }

    .ipNewSoftware .bottom .left {
        width: 53%;
        row-gap: 6%;
        padding-bottom: 0;
        grid-template-columns: repeat(5,1fr)
    }

    .ipNewSoftware .bottom .left .software {
        height: 65px
    }

    .ipNewSoftware .bottom .left .software .slogo {
        width: 40px;
        height: 40px;
        padding-bottom: 4%
    }

    .ipNewSoftware .bottom .left .software .slogo img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .ipNewSoftware .bottom .left .software .sname {
        font-size: 14px
    }

    .ipNewSoftware .bottom .right {
        width: 45%;
        height: 450px
    }

    .ipNewSoftware .bottom .right .block1 {
        width: 15%
    }

    .ipNewSoftware .bottom .right .block2 {
        height: 11%;
        width: 52%
    }

    .ipNewSoftware .bottom .right .image {
        height: 66%;
        width: 72%;
        left: 9%;
        bottom: 4%
    }

    .ipNewSoftware .scroller {
        display: none
    }
}

@media (max-width: 480px) {
    .ipNewSoftware {
        height:571px;
        gap: 20px;
        padding: 1.28% 0
    }

    .ipNewSoftware .heading {
        font-size: 20px
    }

    .ipNewSoftware .bottom {
        height: 434px;
        flex-direction: column-reverse
    }

    .ipNewSoftware .bottom .right {
        width: 100%;
        height: 303px
    }

    .ipNewSoftware .bottom .left {
        height: auto;
        width: 100%;
        display: flex;
        overflow-x: scroll;
        padding: 0 3.48%
    }

    .ipNewSoftware .bottom .left::-webkit-scrollbar {
        display: none
    }

    .ipNewSoftware .bottom .left .software {
        justify-content: flex-start;
        flex: 0 0 25%;
        height: 100%;
        gap: 12px
    }

    .ipNewSoftware .bottom .left .software .slogo {
        height: 40px;
        width: 40px
    }

    .ipNewSoftware .bottom .left .software .sname {
        font-size: 16px
    }

    .ipNewSoftware .scroller {
        display: block
    }
}

.mgBPlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-DUerz8bK.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.mgBPlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .mgBPlusHero {
        height:50vh
    }

    .mgBPlusHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .mgBPlusHero {
        height:233px
    }

    .mgBPlusHero h1 {
        font-size: 20px
    }
}

.mgBPlusCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.mgBPlusCourses .heading {
    text-align: center
}

.mgBPlusCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.mgBPlusCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.mgBPlusCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #770006);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.mgBPlusCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.mgBPlusCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.mgBPlusCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.mgBPlusCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.mgBPlusCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.mgBPlusCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mgBPlusCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.mgBPlusCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.mgBPlusCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .mgBPlusCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .mgBPlusCourses .coursesCards .courseCard {
        height: 450px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .mgBPlusCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .mgBPlusCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .mgBPlusCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .mgBPlusCourses .coursesCards .courseCard {
        height: 430px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .mgBPlusCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .mgBPlusCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .mgBPlusCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .mgBPlusCourses .coursesCards .courseCard {
        height: 410px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .mgBPlusCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .mgBPlusCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .mgBPlusCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .mgBPlusCourses .coursesCards .courseCard {
        height: 380px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .mgBPlusCourses .coursesCards .courseCard .right {
        width: 90%;
        gap: 2.5%
    }

    .mgBPlusCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .mgBPlusCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .mgBPlusCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .mgBPlusCourses .heading {
        font-size: 24px
    }

    .mgBPlusCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .mgBPlusCourses .coursesCards .courseCard,.mgBPlusCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer,.mgBPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number,.mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .index,.mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .mgBPlusCourses .coursesCards .courseCard .numContainer .number .tname,.mgBPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .mgBPlusCourses .coursesCards .courseCard .right,.mgBPlusCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .mgBPlusCourses .coursesCards .courseCard .right .photo,.mgBPlusCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info,.mgBPlusCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .head,.mgBPlusCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info .desc,.mgBPlusCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .mgBPlusCourses .coursesCards .courseCard .right .info button,.mgBPlusCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .mgBPlusCourses .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.mgAPMGBDHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-IP08GhA2.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.mgAPMGBDHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .mgAPMGBDHero {
        height:50vh
    }

    .mgAPMGBDHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .mgAPMGBDHero {
        height:233px
    }

    .mgAPMGBDHero h1 {
        font-size: 20px
    }
}

.mgAPMGBDCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.mgAPMGBDCourses .heading {
    text-align: center
}

.mgAPMGBDCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.mgAPMGBDCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.mgAPMGBDCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #770006);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.mgAPMGBDCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.mgAPMGBDCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.mgAPMGBDCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.mgAPMGBDCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mgAPMGBDCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.mgAPMGBDCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.mgAPMGBDCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .mgAPMGBDCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .mgAPMGBDCourses .coursesCards .courseCard {
        height: 450px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .mgAPMGBDCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .mgAPMGBDCourses .coursesCards .courseCard {
        height: 430px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right {
        gap: 3.5%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .mgAPMGBDCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .mgAPMGBDCourses .coursesCards .courseCard {
        height: 410px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 72px;
        -webkit-text-stroke-width: 1.5px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right {
        gap: 3%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .mgAPMGBDCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .mgAPMGBDCourses .coursesCards .courseCard {
        height: 380px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 54%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right {
        width: 95%;
        gap: 2.5%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .mgAPMGBDCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .mgAPMGBDCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .mgAPMGBDCourses .heading {
        font-size: 24px
    }

    .mgAPMGBDCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .mgAPMGBDCourses .coursesCards .courseCard,.mgAPMGBDCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer,.mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number,.mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .index,.mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .numContainer .number .tname,.mgAPMGBDCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right,.mgAPMGBDCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .photo,.mgAPMGBDCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info,.mgAPMGBDCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .head,.mgAPMGBDCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info .desc,.mgAPMGBDCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .mgAPMGBDCourses .coursesCards .courseCard .right .info button,.mgAPMGBDCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .mgAPMGBDCourses .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.courseFirstHero {
    background: url(../assets/hero-DaNbk7pQ.jpeg) #d3d3d3 0px -36.66px/100% 172.107% no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.courseFirstHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .courseFirstHero {
        height:50vh
    }

    .courseFirstHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .courseFirstHero {
        height:233px
    }

    .courseFirstHero h1 {
        font-size: 20px
    }
}

.courseFirstCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.courseFirstCourses .heading {
    text-align: center
}

.courseFirstCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.courseFirstCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.courseFirstCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.courseFirstCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.courseFirstCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.courseFirstCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.courseFirstCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.courseFirstCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.courseFirstCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.courseFirstCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.courseFirstCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.courseFirstCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.courseFirstCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.courseFirstCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 34%;
    margin-right: 0
}

.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.courseFirstCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.courseFirstCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .courseFirstCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .courseFirstCourses .coursesCards .courseCard {
        height: 450px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .courseFirstCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .courseFirstCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1440px) {
    .courseFirstCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .courseFirstCourses .coursesCards .courseCard {
        height: 430px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .courseFirstCourses .coursesCards .courseCard .right {
        gap: 3.5%
    }

    .courseFirstCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px
    }
}

@media (max-width: 1280px) {
    .courseFirstCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .courseFirstCourses .coursesCards .courseCard {
        height: 410px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 28px
    }

    .courseFirstCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .courseFirstCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer {
        width: 30%;
        height: 360px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .courseFirstCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .courseFirstCourses .coursesCards .courseCard,.courseFirstCourses .coursesCards .courseCard.reverse {
        height: 390px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 340px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-right: 50%
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .index,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 72px;
        -webkit-text-stroke-width: 1.5px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .tname,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }

    .courseFirstCourses .coursesCards .courseCard .right,.courseFirstCourses .coursesCards .courseCard.reverse .right {
        width: 98%;
        gap: 3%
    }

    .courseFirstCourses .coursesCards .courseCard .right .photo,.courseFirstCourses .coursesCards .courseCard.reverse .right .photo {
        width: 320px;
        height: 280px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info,.courseFirstCourses .coursesCards .courseCard.reverse .right .info {
        width: 460px;
        gap: 16px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .head,.courseFirstCourses .coursesCards .courseCard.reverse .right .info .head {
        font-size: 36px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .desc,.courseFirstCourses .coursesCards .courseCard.reverse .right .info .desc {
        font-size: 16px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse,.courseFirstCourses .coursesCards .courseCard.reverse.reverse {
        flex-direction: row-reverse
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer,.courseFirstCourses .coursesCards .courseCard.reverse.reverse .numContainer {
        right: 0;
        left: auto;
        background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f)
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number,.courseFirstCourses .coursesCards .courseCard.reverse.reverse .numContainer .number {
        margin-left: 50%;
        margin-right: 0
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index,.courseFirstCourses .coursesCards .courseCard.reverse.reverse .numContainer .number .index {
        font-size: 70px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname,.courseFirstCourses .coursesCards .courseCard.reverse.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .courseFirstCourses .coursesCards .courseCard.reverse .right,.courseFirstCourses .coursesCards .courseCard.reverse.reverse .right {
        flex-direction: row-reverse;
        justify-content: flex-end
    }
}

@media (max-width: 480px) {
    .courseFirstCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .courseFirstCourses .heading {
        font-size: 24px
    }

    .courseFirstCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .courseFirstCourses .coursesCards .courseCard,.courseFirstCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .index,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .courseFirstCourses .coursesCards .courseCard .numContainer .number .tname,.courseFirstCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .courseFirstCourses .coursesCards .courseCard .right,.courseFirstCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .courseFirstCourses .coursesCards .courseCard .right .photo,.courseFirstCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info,.courseFirstCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .head,.courseFirstCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info .desc,.courseFirstCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 16px
    }

    .courseFirstCourses .coursesCards .courseCard .right .info button,.courseFirstCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 4%
    }

    .courseFirstCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .courseFirstCourses .scroller {
        display: block
    }
}

.vfxVfxPlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-Csv5kVr9.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.vfxVfxPlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .vfxVfxPlusHero {
        height:50vh
    }

    .vfxVfxPlusHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .vfxVfxPlusHero {
        height:233px
    }

    .vfxVfxPlusHero h1 {
        font-size: 20px
    }
}

.vfxVfxPlusCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.vfxVfxPlusCourses .heading {
    text-align: center
}

.vfxVfxPlusCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.vfxVfxPlusCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.vfxVfxPlusCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.vfxVfxPlusCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.vfxVfxPlusCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.vfxVfxPlusCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vfxVfxPlusCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.vfxVfxPlusCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxVfxPlusCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.vfxVfxPlusCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 34%;
    margin-right: 0
}

.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.vfxVfxPlusCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .vfxVfxPlusCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard {
        height: 450px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1440px) {
    .vfxVfxPlusCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard {
        height: 430px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 21%;
        height: 380px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 48%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .vfxVfxPlusCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard {
        height: 410px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 30%;
        height: 360px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .vfxVfxPlusCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard,.vfxVfxPlusCourses .coursesCards .courseCard.reverse {
        height: 390px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 32%;
        height: 340px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-right: 52%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .index,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 72px;
        -webkit-text-stroke-width: 1.5px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .tname,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right {
        width: 98%;
        gap: 3%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .photo,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .photo {
        width: 320px;
        height: 280px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info {
        width: 460px;
        gap: 16px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .head,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info .head {
        font-size: 36px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .desc,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info .desc {
        font-size: 16px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse,.vfxVfxPlusCourses .coursesCards .courseCard.reverse.reverse {
        flex-direction: row-reverse
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer,.vfxVfxPlusCourses .coursesCards .courseCard.reverse.reverse .numContainer {
        right: 0;
        left: auto;
        background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f)
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number,.vfxVfxPlusCourses .coursesCards .courseCard.reverse.reverse .numContainer .number {
        margin-left: 48%;
        margin-right: 0
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index,.vfxVfxPlusCourses .coursesCards .courseCard.reverse.reverse .numContainer .number .index {
        font-size: 72px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname,.vfxVfxPlusCourses .coursesCards .courseCard.reverse.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard.reverse .right,.vfxVfxPlusCourses .coursesCards .courseCard.reverse.reverse .right {
        flex-direction: row-reverse;
        justify-content: flex-end
    }
}

@media (max-width: 480px) {
    .vfxVfxPlusCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .vfxVfxPlusCourses .heading {
        font-size: 24px
    }

    .vfxVfxPlusCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .vfxVfxPlusCourses .coursesCards .courseCard,.vfxVfxPlusCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .index,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .numContainer .number .tname,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .photo,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .head,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info .desc,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 16px
    }

    .vfxVfxPlusCourses .coursesCards .courseCard .right .info button,.vfxVfxPlusCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 4%
    }

    .vfxVfxPlusCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .vfxVfxPlusCourses .scroller {
        display: block
    }
}

.vfxCompAndEPlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-D-3Z-SJh.jpeg) #d3d3d3 0px -72.98px/100% 169.695% no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.vfxCompAndEPlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .vfxCompAndEPlusHero {
        height:50vh
    }

    .vfxCompAndEPlusHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .vfxCompAndEPlusHero {
        height:233px
    }

    .vfxCompAndEPlusHero h1 {
        font-size: 20px
    }
}

.vfxCompAndEPlusCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.vfxCompAndEPlusCourses .heading {
    text-align: center
}

.vfxCompAndEPlusCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.vfxCompAndEPlusCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 34%;
    margin-right: 0
}

.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.vfxCompAndEPlusCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .vfxCompAndEPlusCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard {
        height: 450px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .vfxCompAndEPlusCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard {
        height: 430px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 68%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 1280px) {
    .vfxCompAndEPlusCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard {
        height: 410px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 30%;
        height: 360px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .vfxCompAndEPlusCourses .coursesCards {
        gap:22px;
        margin-top: 2.5%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard {
        height: 390px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 340px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px;
        color: transparent
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right {
        width: 92%;
        gap: 2.5%;
        display: flex;
        justify-content: flex-end
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer {
        background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
        right: 0;
        left: auto;
        width: 34%;
        height: 340px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px;
        color: transparent;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #000)
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px;
        color: #000
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .vfxCompAndEPlusCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .vfxCompAndEPlusCourses .heading {
        font-size: 24px
    }

    .vfxCompAndEPlusCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .index,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .numContainer .number .tname,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .photo,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .head,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info .desc,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 16px
    }

    .vfxCompAndEPlusCourses .coursesCards .courseCard .right .info button,.vfxCompAndEPlusCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 4%
    }

    .vfxCompAndEPlusCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .vfxCompAndEPlusCourses .scroller {
        display: block
    }
}

.dccAPDMCHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-CQkIuHQE.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.dccAPDMCHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .dccAPDMCHero {
        height:50vh
    }

    .dccAPDMCHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .dccAPDMCHero {
        height:233px
    }

    .dccAPDMCHero h1 {
        font-size: 20px
    }
}

.dccAPDMCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.dccAPDMCourses .heading {
    text-align: center
}

.dccAPDMCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.dccAPDMCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.dccAPDMCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.dccAPDMCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.dccAPDMCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dccAPDMCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.dccAPDMCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.dccAPDMCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.dccAPDMCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dccAPDMCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.dccAPDMCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dccAPDMCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .dccAPDMCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .dccAPDMCourses .coursesCards .courseCard {
        height: 450px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .dccAPDMCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .dccAPDMCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .dccAPDMCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .dccAPDMCourses .coursesCards .courseCard {
        height: 430px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .dccAPDMCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .dccAPDMCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .dccAPDMCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .dccAPDMCourses .coursesCards .courseCard {
        height: 410px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .dccAPDMCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .dccAPDMCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .dccAPDMCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .dccAPDMCourses .coursesCards .courseCard {
        height: 390px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 340px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 70%
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.5px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .dccAPDMCourses .coursesCards .courseCard .right {
        width: 90%;
        gap: 2.5%
    }

    .dccAPDMCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 300px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info {
        width: 450px;
        gap: 14px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer {
        margin-left: auto
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 70%
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px
    }

    .dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }
}

@media (max-width: 480px) {
    .dccAPDMCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .dccAPDMCourses .heading {
        font-size: 24px
    }

    .dccAPDMCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .dccAPDMCourses .coursesCards .courseCard,.dccAPDMCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer,.dccAPDMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number,.dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .index,.dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .dccAPDMCourses .coursesCards .courseCard .numContainer .number .tname,.dccAPDMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .dccAPDMCourses .coursesCards .courseCard .right,.dccAPDMCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .dccAPDMCourses .coursesCards .courseCard .right .photo,.dccAPDMCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info,.dccAPDMCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .head,.dccAPDMCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info .desc,.dccAPDMCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .dccAPDMCourses .coursesCards .courseCard .right .info button,.dccAPDMCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .dccAPDMCourses .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.ipThirdSoftware {
    padding: 1.48% 0 3.48% 5.2%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.ipThirdSoftware .heading {
    display: flex;
    justify-content: center
}

.ipThirdSoftware .bottom {
    gap: 40px;
    width: 100%;
    height: max-content;
    display: flex
}

.ipThirdSoftware .bottom .left {
    gap: 20px;
    width: 60%;
    display: grid;
    height: max-content;
    grid-template-columns: repeat(6,1fr);
    row-gap: 10%;
    padding-bottom: 25%
}

.ipThirdSoftware .bottom .left .software {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 113px
}

.ipThirdSoftware .bottom .left .software .slogo {
    width: 75px;
    height: 85px;
    padding-bottom: 6%
}

.ipThirdSoftware .bottom .left .software .slogo img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.ipThirdSoftware .bottom .left .software .sname {
    text-align: center;
    font-size: 22px;
    width: 100%;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.ipThirdSoftware .bottom .right {
    height: 702px;
    position: relative;
    width: 44.7%
}

.ipThirdSoftware .bottom .right .block1 {
    position: absolute;
    height: 100%;
    right: 0;
    width: 30%;
    background-color: #fabc3f
}

.ipThirdSoftware .bottom .right .block2 {
    position: absolute;
    height: 20%;
    width: 63%;
    bottom: 0;
    left: 0;
    background: #bc2329
}

.ipThirdSoftware .bottom .right .image {
    position: absolute;
    height: 90%;
    width: 87%;
    left: 4%;
    bottom: 5%
}

.ipThirdSoftware .bottom .right .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ipThirdSoftware .scroller {
    display: none
}

@media (max-width: 1536px) {
    .ipThirdSoftware {
        margin-bottom:5%;
        padding: 1.5% 0 3.5% 4%;
        height: 780px;
        gap: 35px
    }

    .ipThirdSoftware .bottom {
        gap: 20px
    }

    .ipThirdSoftware .bottom .left {
        width: 58%;
        gap: 10px;
        grid-template-columns: repeat(6,1fr)
    }

    .ipThirdSoftware .bottom .left .software {
        height: 100px
    }

    .ipThirdSoftware .bottom .left .software .slogo {
        width: 50px;
        height: 50px;
        margin-bottom: 5%
    }

    .ipThirdSoftware .bottom .left .software .slogo img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .ipThirdSoftware .bottom .left .software .sname {
        font-size: 18px
    }

    .ipThirdSoftware .bottom .right {
        width: 46%;
        height: 600px
    }

    .ipThirdSoftware .bottom .right .block1 {
        width: 20%
    }

    .ipThirdSoftware .bottom .right .block2 {
        height: 14%;
        width: 60%
    }

    .ipThirdSoftware .bottom .right .image {
        height: 75%;
        width: 80%;
        left: 5%;
        bottom: 6%
    }

    .ipThirdSoftware .scroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .ipThirdSoftware {
        padding:1.5% 0 3.5% 3.5%;
        height: 720px;
        gap: 32px;
        margin-bottom: 30%
    }

    .ipThirdSoftware .bottom {
        gap: 18px
    }

    .ipThirdSoftware .bottom .left {
        width: 57%;
        row-gap: 8%;
        padding-bottom: 12%;
        grid-template-columns: repeat(6,1fr)
    }

    .ipThirdSoftware .bottom .left .software {
        height: 100px
    }

    .ipThirdSoftware .bottom .left .software .slogo {
        width: 55px;
        height: 55px
    }

    .ipThirdSoftware .bottom .left .software .sname {
        font-size: 18px
    }

    .ipThirdSoftware .bottom .right {
        width: 45%;
        height: 550px
    }

    .ipThirdSoftware .bottom .right .block1 {
        width: 18%
    }

    .ipThirdSoftware .bottom .right .block2 {
        height: 13%;
        width: 58%
    }

    .ipThirdSoftware .bottom .right .image {
        height: 73%;
        width: 78%;
        left: 5%;
        bottom: 5%
    }

    .ipThirdSoftware .scroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .ipThirdSoftware {
        padding:1.2% 0 3.2% 3%;
        height: 680px;
        gap: 28px;
        margin-bottom: 12%
    }

    .ipThirdSoftware .bottom {
        gap: 16px
    }

    .ipThirdSoftware .bottom .left {
        width: 55%;
        row-gap: 7%;
        padding-bottom: 0%;
        grid-template-columns: repeat(6,1fr)
    }

    .ipThirdSoftware .bottom .left .software {
        height: 75px
    }

    .ipThirdSoftware .bottom .left .software .slogo {
        width: 50px;
        height: 50px
    }

    .ipThirdSoftware .bottom .left .software .sname {
        font-size: 16px
    }

    .ipThirdSoftware .bottom .right {
        width: 43%;
        height: 500px
    }

    .ipThirdSoftware .bottom .right .block1 {
        width: 16%;
        right: 5%
    }

    .ipThirdSoftware .bottom .right .block2 {
        height: 12%;
        width: 55%
    }

    .ipThirdSoftware .bottom .right .image {
        height: 70%;
        width: 75%;
        left: 8%;
        bottom: 5%
    }

    .ipThirdSoftware .scroller {
        display: none
    }
}

@media (max-width: 992px) {
    .ipThirdSoftware {
        padding:1.2% 0 3% 2.5%;
        height: 600px;
        gap: 24px;
        margin-bottom: 15%
    }

    .ipThirdSoftware .bottom {
        gap: 14px
    }

    .ipThirdSoftware .bottom .left {
        width: 53%;
        row-gap: 6%;
        grid-template-columns: repeat(6,1fr);
        padding-bottom: 0
    }

    .ipThirdSoftware .bottom .left .software {
        height: 70px
    }

    .ipThirdSoftware .bottom .left .software .slogo {
        width: 45px;
        height: 45px;
        margin-bottom: 4%
    }

    .ipThirdSoftware .bottom .left .software .slogo img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .ipThirdSoftware .bottom .left .software .sname {
        font-size: 15px
    }

    .ipThirdSoftware .bottom .right {
        width: 43%;
        height: 400px
    }

    .ipThirdSoftware .bottom .right .block1 {
        width: 14%;
        right: 1%;
        height: 100%
    }

    .ipThirdSoftware .bottom .right .block2 {
        height: 10%;
        width: 50%;
        bottom: 0;
        left: 11%
    }

    .ipThirdSoftware .bottom .right .image {
        height: 65%;
        width: 68%;
        left: 15%;
        bottom: 6%
    }

    .ipThirdSoftware .scroller {
        display: none
    }
}

@media (max-width: 480px) {
    .ipThirdSoftware {
        height:571px;
        gap: 20px;
        padding: 1.28% 0
    }

    .ipThirdSoftware .heading {
        font-size: 20px
    }

    .ipThirdSoftware .bottom {
        height: 434px;
        flex-direction: column-reverse
    }

    .ipThirdSoftware .bottom .right {
        width: 100%;
        height: 303px
    }

    .ipThirdSoftware .bottom .left {
        height: auto;
        width: 100%;
        display: flex;
        overflow-x: scroll;
        padding: 0 3.48%
    }

    .ipThirdSoftware .bottom .left::-webkit-scrollbar {
        display: none
    }

    .ipThirdSoftware .bottom .left .software {
        justify-content: flex-start;
        flex: 0 0 25%;
        height: 100%;
        gap: 12px
    }

    .ipThirdSoftware .bottom .left .software .slogo {
        height: 40px;
        width: 40px
    }

    .ipThirdSoftware .bottom .left .software .sname {
        font-size: 16px
    }

    .ipThirdSoftware .scroller {
        display: block
    }
}

.dccAPDMDHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-6IR-2htt.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.dccAPDMDHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .dccAPDMDHero {
        height:60vh
    }

    .dccAPDMDHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .dccAPDMDHero {
        height:233px
    }

    .dccAPDMDHero h1 {
        font-size: 20px
    }
}

.dccUIUXHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-K8jzad2x.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.dccUIUXHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .dccUIUXHero {
        height:60vh
    }

    .dccUIUXHero h1 {
        font-size: 4vw;
        text-shadow: 0px .5vh .5vh rgba(0,0,0,.3)
    }
}

@media (max-width: 480px) {
    .dccUIUXHero {
        height:233px
    }

    .dccUIUXHero h1 {
        font-size: 20px
    }
}

.dccDGWAPlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-B5-JEUnD.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.dccDGWAPlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .dccDGWAPlusHero {
        height:60vh
    }

    .dccDGWAPlusHero h1 {
        font-size: 4vw;
        text-shadow: 0px .5vh .5vh rgba(0,0,0,.3)
    }
}

@media (max-width: 480px) {
    .dccDGWAPlusHero {
        height:233px
    }

    .dccDGWAPlusHero h1 {
        font-size: 20px
    }
}

.dccDGWAPlusCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.dccDGWAPlusCourses .heading {
    text-align: center
}

.dccDGWAPlusCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.dccDGWAPlusCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.dccDGWAPlusCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.dccDGWAPlusCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.dccDGWAPlusCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.dccDGWAPlusCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dccDGWAPlusCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.dccDGWAPlusCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.dccDGWAPlusCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.dccDGWAPlusCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.dccDGWAPlusCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .dccDGWAPlusCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard {
        height: 450px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .dccDGWAPlusCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard {
        height: 430px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .dccDGWAPlusCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard {
        height: 410px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .dccDGWAPlusCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard {
        height: 390px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 340px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right {
        width: 95%;
        gap: 2.5%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 300px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info {
        width: 460px;
        gap: 14px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 340px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 60%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }
}

@media (max-width: 480px) {
    .dccDGWAPlusCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .dccDGWAPlusCourses .heading {
        font-size: 24px
    }

    .dccDGWAPlusCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .dccDGWAPlusCourses .coursesCards .courseCard,.dccDGWAPlusCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .index,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .numContainer .number .tname,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .photo,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .head,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: -2% auto auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info .desc,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .dccDGWAPlusCourses .coursesCards .courseCard .right .info button,.dccDGWAPlusCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 2%
    }

    .dccDGWAPlusCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .dccDGWAPlusCourses .scroller {
        display: block
    }
}

.gd3DGAI {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-DCSXNeDa.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.gd3DGAI h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .gd3DGAI {
        height:50vh
    }

    .gd3DGAI h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .gd3DGAI {
        height:233px
    }

    .gd3DGAI h1 {
        font-size: 20px
    }
}

.gd3DGAICourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.gd3DGAICourses .heading {
    text-align: center
}

.gd3DGAICourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.gd3DGAICourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.gd3DGAICourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.gd3DGAICourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.gd3DGAICourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gd3DGAICourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.gd3DGAICourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.gd3DGAICourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.gd3DGAICourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gd3DGAICourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.gd3DGAICourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gd3DGAICourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.gd3DGAICourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.gd3DGAICourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.gd3DGAICourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .gd3DGAICourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .gd3DGAICourses .coursesCards .courseCard {
        height: 450px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .gd3DGAICourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .gd3DGAICourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .gd3DGAICourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .gd3DGAICourses .coursesCards .courseCard {
        height: 430px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .gd3DGAICourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .gd3DGAICourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .gd3DGAICourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .gd3DGAICourses .coursesCards .courseCard {
        height: 410px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .gd3DGAICourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .gd3DGAICourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .gd3DGAICourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .gd3DGAICourses .coursesCards .courseCard {
        height: 390px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 340px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 28px
    }

    .gd3DGAICourses .coursesCards .courseCard .right {
        width: 95%;
        gap: 2.5%
    }

    .gd3DGAICourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 300px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info {
        width: 460px;
        gap: 14px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 340px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 60%
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 28px
    }
}

@media (max-width: 480px) {
    .gd3DGAICourses {
        padding:3.48% 0;
        gap: 20px
    }

    .gd3DGAICourses .heading {
        font-size: 24px
    }

    .gd3DGAICourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .gd3DGAICourses .coursesCards .courseCard,.gd3DGAICourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer,.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number,.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .index,.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .gd3DGAICourses .coursesCards .courseCard .numContainer .number .tname,.gd3DGAICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .gd3DGAICourses .coursesCards .courseCard .right,.gd3DGAICourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .gd3DGAICourses .coursesCards .courseCard .right .photo,.gd3DGAICourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info,.gd3DGAICourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .head,.gd3DGAICourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info .desc,.gd3DGAICourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .gd3DGAICourses .coursesCards .courseCard .right .info button,.gd3DGAICourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .gd3DGAICourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .gd3DGAICourses .scroller {
        display: block
    }
}

.gdAPGDIHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-CQN4JyMA.jpeg) #d3d3d3 0px -77.101px/100% 168.791% no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.gdAPGDIHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .gdAPGDIHero {
        height:50vh
    }

    .gdAPGDIHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .gdAPGDIHero {
        height:233px
    }

    .gdAPGDIHero h1 {
        font-size: 20px
    }
}

.gdAPGDICourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.gdAPGDICourses .heading {
    text-align: center
}

.gdAPGDICourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.gdAPGDICourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.gdAPGDICourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.gdAPGDICourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.gdAPGDICourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdAPGDICourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.gdAPGDICourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.gdAPGDICourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.gdAPGDICourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gdAPGDICourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.gdAPGDICourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdAPGDICourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .gdAPGDICourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .gdAPGDICourses .coursesCards .courseCard {
        height: 450px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .gdAPGDICourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .gdAPGDICourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .gdAPGDICourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .gdAPGDICourses .coursesCards .courseCard {
        height: 430px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .gdAPGDICourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .gdAPGDICourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .gdAPGDICourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .gdAPGDICourses .coursesCards .courseCard {
        height: 410px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .gdAPGDICourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .gdAPGDICourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .gdAPGDICourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .gdAPGDICourses .coursesCards .courseCard {
        height: 380px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 60%
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .gdAPGDICourses .coursesCards .courseCard .right {
        width: 92%;
        gap: 2.5%
    }

    .gdAPGDICourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }

    .gdAPGDICourses .coursesCards .courseCard.reverse .right {
        flex-direction: row-reverse;
        justify-content: flex-end
    }
}

@media (max-width: 480px) {
    .gdAPGDICourses {
        padding:3.48% 0;
        gap: 20px
    }

    .gdAPGDICourses .heading {
        font-size: 24px
    }

    .gdAPGDICourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .gdAPGDICourses .coursesCards .courseCard,.gdAPGDICourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer,.gdAPGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number,.gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .index,.gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .gdAPGDICourses .coursesCards .courseCard .numContainer .number .tname,.gdAPGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .gdAPGDICourses .coursesCards .courseCard .right,.gdAPGDICourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .gdAPGDICourses .coursesCards .courseCard .right .photo,.gdAPGDICourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info,.gdAPGDICourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .head,.gdAPGDICourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info .desc,.gdAPGDICourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .gdAPGDICourses .coursesCards .courseCard .right .info button,.gdAPGDICourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .gdAPGDICourses .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.gdPMGDIHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-Crlv6bvr.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.gdPMGDIHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .gdPMGDIHero {
        height:50vh
    }

    .gdPMGDIHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .gdPMGDIHero {
        height:233px
    }

    .gdPMGDIHero h1 {
        font-size: 20px
    }
}

.gdPMGDICourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.gdPMGDICourses .heading {
    text-align: center
}

.gdPMGDICourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.gdPMGDICourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.gdPMGDICourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.gdPMGDICourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.gdPMGDICourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdPMGDICourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.gdPMGDICourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.gdPMGDICourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.gdPMGDICourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gdPMGDICourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.gdPMGDICourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.gdPMGDICourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.gdPMGDICourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.gdPMGDICourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.gdPMGDICourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .gdPMGDICourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .gdPMGDICourses .coursesCards .courseCard {
        height: 450px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .gdPMGDICourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .gdPMGDICourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .gdPMGDICourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .gdPMGDICourses .coursesCards .courseCard {
        height: 430px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .gdPMGDICourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .gdPMGDICourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .gdPMGDICourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .gdPMGDICourses .coursesCards .courseCard {
        height: 410px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .gdPMGDICourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .gdPMGDICourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .gdPMGDICourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .gdPMGDICourses .coursesCards .courseCard {
        height: 380px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number {
        margin-right: 70%
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .gdPMGDICourses .coursesCards .courseCard .right {
        width: 90%;
        gap: 2.5%
    }

    .gdPMGDICourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }

    .gdPMGDICourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .gdPMGDICourses {
        padding:3.48% 0;
        gap: 20px
    }

    .gdPMGDICourses .heading {
        font-size: 24px
    }

    .gdPMGDICourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .gdPMGDICourses .coursesCards .courseCard,.gdPMGDICourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer,.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number,.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .index,.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .gdPMGDICourses .coursesCards .courseCard .numContainer .number .tname,.gdPMGDICourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .gdPMGDICourses .coursesCards .courseCard .right,.gdPMGDICourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .gdPMGDICourses .coursesCards .courseCard .right .photo,.gdPMGDICourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info,.gdPMGDICourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .head,.gdPMGDICourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info .desc,.gdPMGDICourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .gdPMGDICourses .coursesCards .courseCard .right .info button,.gdPMGDICourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .gdPMGDICourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .gdPMGDICourses .scroller {
        display: block
    }
}

.gdADIDGPlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-BWL2IGoU.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.gdADIDGPlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .gdADIDGPlusHero {
        height:50vh
    }

    .gdADIDGPlusHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .gdADIDGPlusHero {
        height:233px
    }

    .gdADIDGPlusHero h1 {
        font-size: 20px
    }
}

.aAD3DEdgePlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/AD3DHero-BXmZnm_w.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.aAD3DEdgePlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .aAD3DEdgePlusHero {
        height:50vh
    }

    .aAD3DEdgePlusHero h1 {
        font-size: 4vw;
        padding: 0 10px;
        line-height: 1.2
    }
}

@media (max-width: 480px) {
    .aAD3DEdgePlusHero {
        height:233px
    }

    .aAD3DEdgePlusHero h1 {
        font-size: 20px
    }
}

.aAD3DEdgePlusCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.aAD3DEdgePlusCourses .heading {
    text-align: center
}

.aAD3DEdgePlusCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.aAD3DEdgePlusCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.aAD3DEdgePlusCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .aAD3DEdgePlusCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard {
        height: 450px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .aAD3DEdgePlusCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard {
        height: 430px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .aAD3DEdgePlusCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard {
        height: 410px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .aAD3DEdgePlusCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard {
        height: 350px;
        position: relative
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer {
        width: 32%;
        height: 320px;
        top: 0;
        background: var(--Burgundy-color, #821131);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-shrink: 0
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 50%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 65px;
        -webkit-text-stroke-width: 1.5px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
        color: transparent
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 24px;
        color: #fff
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right {
        position: absolute;
        bottom: 0;
        width: 85%;
        display: flex;
        gap: 2.5%;
        justify-content: flex-end
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo {
        width: 280px;
        height: 320px;
        flex-shrink: 0;
        z-index: 1
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 380px;
        justify-content: center;
        z-index: 1
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .head {
        font-size: 32px;
        font-weight: 600;
        color: #f0af13;
        line-height: normal
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .desc {
        font-size: 14px;
        font-weight: 500;
        line-height: normal
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer {
        background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
        right: 0;
        left: auto;
        width: 32%;
        height: 320px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 50%;
        margin-right: 0
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 65px;
        -webkit-text-stroke-width: 1.5px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
        color: transparent
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 24px;
        color: #000
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse;
        width: 85%;
        gap: 2.5%
    }
}

@media (max-width: 480px) {
    .aAD3DEdgePlusCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .aAD3DEdgePlusCourses .heading {
        font-size: 24px
    }

    .aAD3DEdgePlusCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .index,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .numContainer .number .tname,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px;
        padding-top: 5%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .photo,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .head,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info .desc,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 80px;
        text-align: center;
        font-size: 14px
    }

    .aAD3DEdgePlusCourses .coursesCards .courseCard .right .info button,.aAD3DEdgePlusCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%
    }

    .aAD3DEdgePlusCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .aAD3DEdgePlusCourses .scroller {
        display: block
    }
}

.aD3DHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-rwtv7l1W.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.aD3DHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .aD3DHero {
        height:60vh
    }

    .aD3DHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .aD3DHero {
        height:233px
    }

    .aD3DHero h1 {
        font-size: 20px
    }
}

.aD3DCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.aD3DCourses .heading {
    text-align: center
}

.aD3DCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.aD3DCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.aD3DCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.aD3DCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.aD3DCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.aD3DCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.aD3DCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.aD3DCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.aD3DCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.aD3DCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.aD3DCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.aD3DCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.aD3DCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.aD3DCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.aD3DCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.aD3DCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.aD3DCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .aD3DCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .aD3DCourses .coursesCards .courseCard {
        height: 450px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .aD3DCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .aD3DCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .aD3DCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .aD3DCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .aD3DCourses .coursesCards .courseCard {
        height: 430px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .aD3DCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .aD3DCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .aD3DCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .aD3DCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .aD3DCourses .coursesCards .courseCard {
        height: 410px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .aD3DCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .aD3DCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .aD3DCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .aD3DCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .aD3DCourses .coursesCards .courseCard {
        height: 380px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 340px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 50%
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .aD3DCourses .coursesCards .courseCard .right {
        width: 95%;
        gap: 2.5%
    }

    .aD3DCourses .coursesCards .courseCard .right .photo {
        width: 300px;
        height: 300px
    }

    .aD3DCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 12px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 340px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 40%
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1px
    }

    .aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }
}

@media (max-width: 480px) {
    .aD3DCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .aD3DCourses .heading {
        font-size: 24px
    }

    .aD3DCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .aD3DCourses .coursesCards .courseCard,.aD3DCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer,.aD3DCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number,.aD3DCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .index,.aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .aD3DCourses .coursesCards .courseCard .numContainer .number .tname,.aD3DCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px;
        padding-top: 5%
    }

    .aD3DCourses .coursesCards .courseCard .right,.aD3DCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .aD3DCourses .coursesCards .courseCard .right .photo,.aD3DCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .aD3DCourses .coursesCards .courseCard .right .info,.aD3DCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .aD3DCourses .coursesCards .courseCard .right .info .head,.aD3DCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .aD3DCourses .coursesCards .courseCard .right .info .desc,.aD3DCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 80px;
        text-align: center;
        font-size: 14px
    }

    .aD3DCourses .coursesCards .courseCard .right .info button,.aD3DCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%
    }

    .aD3DCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .aD3DCourses .scroller {
        display: block
    }
}

.aDAFMHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-8VzjLcqP.jpeg) #d3d3d3 0px -169.1px/100% 168.791% no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.aDAFMHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .aDAFMHero {
        height:60vh
    }

    .aDAFMHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .aDAFMHero {
        height:233px;
        background-position: center center
    }

    .aDAFMHero h1 {
        font-size: 20px
    }
}

.aDAFMCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.aDAFMCourses .heading {
    text-align: center
}

.aDAFMCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.aDAFMCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.aDAFMCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.aDAFMCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.aDAFMCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.aDAFMCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.aDAFMCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.aDAFMCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.aDAFMCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.aDAFMCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.aDAFMCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.aDAFMCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.aDAFMCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.aDAFMCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.aDAFMCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.aDAFMCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .aDAFMCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .aDAFMCourses .coursesCards .courseCard {
        height: 450px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 38px
    }

    .aDAFMCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .aDAFMCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .aDAFMCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .aDAFMCourses .coursesCards .courseCard {
        height: 430px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .aDAFMCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .aDAFMCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .aDAFMCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .aDAFMCourses .coursesCards .courseCard {
        height: 410px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .aDAFMCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .aDAFMCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .aDAFMCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .aDAFMCourses .coursesCards .courseCard {
        height: 380px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 330px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 70%
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 70px;
        -webkit-text-stroke-width: 1.2px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 26px
    }

    .aDAFMCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 2.5%
    }

    .aDAFMCourses .coursesCards .courseCard .right .photo {
        width: 300px;
        height: 300px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 330px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 70px
    }

    .aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 26px
    }
}

@media (max-width: 480px) {
    .aDAFMCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .aDAFMCourses .heading {
        font-size: 24px
    }

    .aDAFMCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .aDAFMCourses .coursesCards .courseCard,.aDAFMCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer,.aDAFMCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number,.aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .index,.aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .aDAFMCourses .coursesCards .courseCard .numContainer .number .tname,.aDAFMCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px;
        padding-top: 5%
    }

    .aDAFMCourses .coursesCards .courseCard .right,.aDAFMCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .aDAFMCourses .coursesCards .courseCard .right .photo,.aDAFMCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info,.aDAFMCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .head,.aDAFMCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info .desc,.aDAFMCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 80px;
        text-align: center;
        font-size: 14px
    }

    .aDAFMCourses .coursesCards .courseCard .right .info button,.aDAFMCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%
    }

    .aDAFMCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .aDAFMCourses .scroller {
        display: block
    }
}

.a3DRealTimeHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-D6jygYDX.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.a3DRealTimeHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .a3DRealTimeHero {
        height:50vh
    }

    .a3DRealTimeHero h1 {
        font-size: 4vw;
        text-shadow: 0px .3vh .3vh rgba(0,0,0,.25)
    }
}

@media (max-width: 480px) {
    .a3DRealTimeHero {
        height:233px
    }

    .a3DRealTimeHero h1 {
        font-size: 20px
    }
}

.a3DRealTimeCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.a3DRealTimeCourses .heading {
    text-align: center
}

.a3DRealTimeCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.a3DRealTimeCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.a3DRealTimeCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #821131);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.a3DRealTimeCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.a3DRealTimeCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.a3DRealTimeCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.a3DRealTimeCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.a3DRealTimeCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.a3DRealTimeCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.a3DRealTimeCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.a3DRealTimeCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.a3DRealTimeCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.a3DRealTimeCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .a3DRealTimeCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .a3DRealTimeCourses .coursesCards .courseCard {
        height: 450px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .a3DRealTimeCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .a3DRealTimeCourses .coursesCards .courseCard {
        height: 430px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 56%
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .a3DRealTimeCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .a3DRealTimeCourses .coursesCards .courseCard {
        height: 410px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 52%
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .a3DRealTimeCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .a3DRealTimeCourses .coursesCards .courseCard {
        height: 350px;
        position: relative
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer {
        width: 32%;
        height: 310px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 70%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 60px;
        -webkit-text-stroke-width: 1.2px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right {
        width: 80%;
        gap: 2.5%;
        justify-content: flex-end
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .photo {
        width: 290px;
        height: 310px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info {
        width: 380px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .head {
        font-size: 32px;
        font-weight: 600
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .desc {
        font-size: 14px;
        font-weight: 500
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer {
        width: 32%;
        height: 310px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 75%;
        margin-right: 0
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 60px;
        -webkit-text-stroke-width: 1.2px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .a3DRealTimeCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .a3DRealTimeCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .a3DRealTimeCourses .heading {
        font-size: 24px
    }

    .a3DRealTimeCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .a3DRealTimeCourses .coursesCards .courseCard,.a3DRealTimeCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer,.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number,.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .index,.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .numContainer .number .tname,.a3DRealTimeCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right,.a3DRealTimeCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .photo,.a3DRealTimeCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info,.a3DRealTimeCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .head,.a3DRealTimeCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info .desc,.a3DRealTimeCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .a3DRealTimeCourses .coursesCards .courseCard .right .info button,.a3DRealTimeCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .a3DRealTimeCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .a3DRealTimeCourses .scroller {
        display: block
    }
}

.sbBlenderProHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero--OUi5K2P.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbBlenderProHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbBlenderProHero {
        height:50vh
    }

    .sbBlenderProHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbBlenderProHero {
        height:233px
    }

    .sbBlenderProHero h1 {
        font-size: 20px
    }
}

.sbBlenderProCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.sbBlenderProCourses .heading {
    text-align: center
}

.sbBlenderProCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.sbBlenderProCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.sbBlenderProCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #c7253e);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sbBlenderProCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.sbBlenderProCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbBlenderProCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.sbBlenderProCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.sbBlenderProCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.sbBlenderProCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sbBlenderProCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.sbBlenderProCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbBlenderProCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.sbBlenderProCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.sbBlenderProCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.sbBlenderProCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .sbBlenderProCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .sbBlenderProCourses .coursesCards .courseCard {
        height: 450px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .sbBlenderProCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .sbBlenderProCourses .coursesCards .courseCard {
        height: 430px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .sbBlenderProCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .sbBlenderProCourses .coursesCards .courseCard {
        height: 410px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .sbBlenderProCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .sbBlenderProCourses .coursesCards .courseCard {
        height: 380px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right {
        width: 90%;
        gap: 2.5%
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .sbBlenderProCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .sbBlenderProCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .sbBlenderProCourses .heading {
        font-size: 24px
    }

    .sbBlenderProCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .sbBlenderProCourses .coursesCards .courseCard,.sbBlenderProCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer,.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number,.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .index,.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .sbBlenderProCourses .coursesCards .courseCard .numContainer .number .tname,.sbBlenderProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right,.sbBlenderProCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .photo,.sbBlenderProCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info,.sbBlenderProCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .head,.sbBlenderProCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info .desc,.sbBlenderProCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .sbBlenderProCourses .coursesCards .courseCard .right .info button,.sbBlenderProCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .sbBlenderProCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .sbBlenderProCourses .scroller {
        display: block
    }
}

.sbCinema4DProHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-DC5X5vgg.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbCinema4DProHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbCinema4DProHero {
        height:50vh
    }

    .sbCinema4DProHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbCinema4DProHero {
        height:233px
    }

    .sbCinema4DProHero h1 {
        font-size: 20px
    }
}

.sbCinema4DProCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.sbCinema4DProCourses .heading {
    text-align: center
}

.sbCinema4DProCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.sbCinema4DProCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.sbCinema4DProCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--vibrant-crimson-red, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sbCinema4DProCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.sbCinema4DProCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.sbCinema4DProCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.sbCinema4DProCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sbCinema4DProCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.sbCinema4DProCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbCinema4DProCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .sbCinema4DProCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .sbCinema4DProCourses .coursesCards .courseCard {
        height: 450px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .sbCinema4DProCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .sbCinema4DProCourses .coursesCards .courseCard {
        height: 430px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .sbCinema4DProCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .sbCinema4DProCourses .coursesCards .courseCard {
        height: 410px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .sbCinema4DProCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .sbCinema4DProCourses .coursesCards .courseCard {
        height: 380px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right {
        width: 92%;
        gap: 2.5%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .sbCinema4DProCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .sbCinema4DProCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .sbCinema4DProCourses .heading {
        font-size: 24px
    }

    .sbCinema4DProCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .sbCinema4DProCourses .coursesCards .courseCard,.sbCinema4DProCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer,.sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number,.sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .index,.sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .numContainer .number .tname,.sbCinema4DProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right,.sbCinema4DProCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .photo,.sbCinema4DProCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info,.sbCinema4DProCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .head,.sbCinema4DProCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info .desc,.sbCinema4DProCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .sbCinema4DProCourses .coursesCards .courseCard .right .info button,.sbCinema4DProCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .sbCinema4DProCourses .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.sbMaxProHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-4il4lqYg.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbMaxProHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbMaxProHero {
        height:50vh
    }

    .sbMaxProHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbMaxProHero {
        height:233px
    }

    .sbMaxProHero h1 {
        font-size: 20px
    }
}

.sbMaxProCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.sbMaxProCourses .heading {
    text-align: center
}

.sbMaxProCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.sbMaxProCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.sbMaxProCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--vibrant-crimson-red, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sbMaxProCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.sbMaxProCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbMaxProCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.sbMaxProCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.sbMaxProCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sbMaxProCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.sbMaxProCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbMaxProCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.sbMaxProCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.sbMaxProCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.sbMaxProCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.sbMaxProCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .sbMaxProCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .sbMaxProCourses .coursesCards .courseCard {
        height: 450px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .sbMaxProCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .sbMaxProCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }
}

@media (max-width: 1440px) {
    .sbMaxProCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .sbMaxProCourses .coursesCards .courseCard {
        height: 430px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .sbMaxProCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .sbMaxProCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .sbMaxProCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .sbMaxProCourses .coursesCards .courseCard {
        height: 410px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .sbMaxProCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .sbMaxProCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .sbMaxProCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .sbMaxProCourses .coursesCards .courseCard {
        height: 380px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #fff)
    }

    .sbMaxProCourses .coursesCards .courseCard .right {
        width: 91%;
        gap: 2.5%
    }

    .sbMaxProCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px;
        color: #f0af13
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px;
        font-weight: 500
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer {
        background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
        right: 0;
        left: auto;
        width: 34%;
        height: 320px
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
        color: transparent
    }

    .sbMaxProCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .sbMaxProCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .sbMaxProCourses .heading {
        font-size: 24px
    }

    .sbMaxProCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .sbMaxProCourses .coursesCards .courseCard,.sbMaxProCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer,.sbMaxProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number,.sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .sbMaxProCourses .coursesCards .courseCard .numContainer .number .index,.sbMaxProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .sbMaxProCourses .coursesCards .courseCard .right,.sbMaxProCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .sbMaxProCourses .coursesCards .courseCard .right .photo,.sbMaxProCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info,.sbMaxProCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .head,.sbMaxProCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: -2% auto auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info .desc,.sbMaxProCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .sbMaxProCourses .coursesCards .courseCard .right .info button,.sbMaxProCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 2%
    }

    .sbMaxProCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .sbMaxProCourses .scroller {
        display: block
    }
}

.sbMayaProHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-B8sItSRa.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbMayaProHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbMayaProHero {
        height:50vh
    }

    .sbMayaProHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbMayaProHero {
        height:233px
    }

    .sbMayaProHero h1 {
        font-size: 20px
    }
}

.sbMayaProCourses {
    padding: 0;
    display: flex;
    flex-direction: column
}

.sbMayaProCourses .heading {
    text-align: center
}

.sbMayaProCourses .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.sbMayaProCourses .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.sbMayaProCourses .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--vibrant-crimson-red, #C7253E);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sbMayaProCourses .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.sbMayaProCourses .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbMayaProCourses .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.sbMayaProCourses .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.sbMayaProCourses .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sbMayaProCourses .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.sbMayaProCourses .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.sbMayaProCourses .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.sbMayaProCourses .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.sbMayaProCourses .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.sbMayaProCourses .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.sbMayaProCourses .scroller {
    display: none
}

@media (max-width: 1536px) {
    .sbMayaProCourses .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .sbMayaProCourses .coursesCards .courseCard {
        height: 450px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .sbMayaProCourses .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .sbMayaProCourses .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }
}

@media (max-width: 1440px) {
    .sbMayaProCourses .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .sbMayaProCourses .coursesCards .courseCard {
        height: 430px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .sbMayaProCourses .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .sbMayaProCourses .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .sbMayaProCourses .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .sbMayaProCourses .coursesCards .courseCard {
        height: 410px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .sbMayaProCourses .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .sbMayaProCourses .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .sbMayaProCourses .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .sbMayaProCourses .coursesCards .courseCard {
        height: 380px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
        color: transparent
    }

    .sbMayaProCourses .coursesCards .courseCard .right {
        width: 91%;
        gap: 2.5%;
        display: flex;
        justify-content: flex-end
    }

    .sbMayaProCourses .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px;
        flex-shrink: 0
    }

    .sbMayaProCourses .coursesCards .courseCard .right .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .head {
        font-size: 36px;
        color: #f0af13;
        font-weight: 600;
        line-height: normal
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .desc {
        font-size: 16px;
        font-weight: 500;
        line-height: normal
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer {
        background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
        right: 0;
        left: auto;
        width: 34%;
        height: 320px
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
        color: transparent
    }

    .sbMayaProCourses .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .sbMayaProCourses {
        padding:3.48% 0;
        gap: 20px
    }

    .sbMayaProCourses .heading {
        font-size: 24px
    }

    .sbMayaProCourses .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .sbMayaProCourses .coursesCards .courseCard,.sbMayaProCourses .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer,.sbMayaProCourses .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number,.sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .sbMayaProCourses .coursesCards .courseCard .numContainer .number .index,.sbMayaProCourses .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .sbMayaProCourses .coursesCards .courseCard .right,.sbMayaProCourses .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .sbMayaProCourses .coursesCards .courseCard .right .photo,.sbMayaProCourses .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info,.sbMayaProCourses .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .head,.sbMayaProCourses .coursesCards .courseCard.reverse .right .info .head {
        margin: -2% auto auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info .desc,.sbMayaProCourses .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .sbMayaProCourses .coursesCards .courseCard .right .info button,.sbMayaProCourses .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: 2%
    }

    .sbMayaProCourses .coursesCards::-webkit-scrollbar {
        display: none
    }

    .sbMayaProCourses .scroller {
        display: block
    }
}

.sbDesignVizProHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-lNNLzSlC.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbDesignVizProHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbDesignVizProHero {
        height:50vh
    }

    .sbDesignVizProHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbDesignVizProHero {
        height:233px
    }

    .sbDesignVizProHero h1 {
        font-size: 20px
    }
}

.sbDigitalPhotoHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-ocjVD9Lf.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbDigitalPhotoHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbDigitalPhotoHero {
        height:50vh
    }

    .sbDigitalPhotoHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbDigitalPhotoHero {
        height:233px
    }

    .sbDigitalPhotoHero h1 {
        font-size: 20px
    }
}

.sbCompPlusHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-B2tZSZ3k.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbCompPlusHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbCompPlusHero {
        height:50vh
    }

    .sbCompPlusHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbCompPlusHero {
        height:233px
    }

    .sbCompPlusHero h1 {
        font-size: 20px
    }
}

.sbAdvCompHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-DKbcs1vf.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbAdvCompHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbAdvCompHero {
        height:50vh
    }

    .sbAdvCompHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbAdvCompHero {
        height:233px
    }

    .sbAdvCompHero h1 {
        font-size: 20px
    }
}

.general-disclaimer-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 3%;
    background: radial-gradient(circle at left,var(--vibrant-crimson-red, #C7253E) -45%,transparent 30%),radial-gradient(circle at top right,var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F) -40%,transparent 40%),radial-gradient(circle at bottom right,var(--vibrant-crimson-red, #C7253E) -40%,transparent 40%)
}

.general-disclaimer-container .general-disclaimer-header {
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto
}

.general-disclaimer-container .general-disclaimer-header h1 {
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: normal;
    margin-bottom: 20px
}

.general-disclaimer-container .general-disclaimer-sub-header {
    color: #fff;
    position: relative;
    top: -10rem;
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: 24px;
    padding: 5rem 10rem;
    margin: 40px 20px;
    background: var(--Burgundy-color, #821131);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset
}

.general-disclaimer-container .general-disclaimer-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 80vw
}

.general-disclaimer-container .general-disclaimer-section .general-disclaimer-title {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-underline-offset: 20px;
    text-decoration: underline;
    text-decoration-color: #770006;
    margin: 2rem 0;
    margin-bottom: 40px
}

.general-disclaimer-container .general-disclaimer-section .general-disclaimer-sub-title {
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 40px
}

.general-disclaimer-container .general-disclaimer-section .terms-container {
    color: #fff;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: start
}

.general-disclaimer-container .general-disclaimer-section .terms-container .terms {
    text-align: start;
    margin: 2rem 0
}

@media (max-width: 1536px) {
    .general-disclaimer-container .general-disclaimer-header h1 {
        font-size:72px;
        margin-bottom: 18px
    }

    .general-disclaimer-container .general-disclaimer-sub-header {
        top: -8rem;
        padding: 4rem 8rem;
        font-size: 22px;
        margin: 35px 18px
    }

    .general-disclaimer-container .general-disclaimer-section {
        width: 85vw
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-title {
        font-size: 48px;
        margin-bottom: 35px
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-sub-title {
        font-size: 22px;
        margin-bottom: 35px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container {
        font-size: 22px;
        line-height: 36px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container .terms {
        margin: 1.5rem 0
    }
}

@media (max-width: 1440px) {
    .general-disclaimer-container .general-disclaimer-header h1 {
        font-size:64px;
        margin-bottom: 16px
    }

    .general-disclaimer-container .general-disclaimer-sub-header {
        top: -7rem;
        padding: 3.5rem 7rem;
        font-size: 20px;
        margin: 30px 16px
    }

    .general-disclaimer-container .general-disclaimer-section {
        width: 90vw
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-title {
        font-size: 44px;
        margin-bottom: 30px
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-sub-title {
        font-size: 20px;
        margin-bottom: 30px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container {
        font-size: 20px;
        line-height: 34px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container .terms {
        margin: 1.5rem 0
    }
}

@media (max-width: 1280px) {
    .general-disclaimer-container .general-disclaimer-header h1 {
        font-size:56px;
        margin-bottom: 14px
    }

    .general-disclaimer-container .general-disclaimer-sub-header {
        top: -6rem;
        padding: 3rem 5rem;
        font-size: 18px;
        margin: 25px 14px
    }

    .general-disclaimer-container .general-disclaimer-section {
        width: 95vw
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-title {
        font-size: 40px;
        margin-bottom: 25px
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-sub-title {
        font-size: 18px;
        margin-bottom: 25px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container {
        font-size: 18px;
        line-height: 32px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container .terms {
        margin: 1rem 0
    }
}

@media (max-width: 992px) {
    .general-disclaimer-container {
        padding-bottom:2%
    }

    .general-disclaimer-container .general-disclaimer-header {
        height: 40vh
    }

    .general-disclaimer-container .general-disclaimer-header h1 {
        font-size: 40px;
        margin-bottom: 12px
    }

    .general-disclaimer-container .general-disclaimer-sub-header {
        top: -4rem;
        padding: 2rem 3rem;
        font-size: 16px;
        margin: 15px 10px;
        box-shadow: -3px -3px 12px #bc2329 inset,3px 3px 12px #bc2329 inset
    }

    .general-disclaimer-container .general-disclaimer-section {
        width: 98vw
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-title {
        font-size: 28px;
        margin-bottom: 20px;
        text-underline-offset: 12px
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-sub-title {
        font-size: 16px;
        margin-bottom: 20px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container {
        font-size: 16px;
        line-height: 28px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container .terms {
        margin: .75rem 0
    }
}

@media (max-width: 480px) {
    .general-disclaimer-container {
        padding-bottom:6%
    }

    .general-disclaimer-container .general-disclaimer-header {
        height: auto;
        padding: 10% 5%
    }

    .general-disclaimer-container .general-disclaimer-header h1 {
        font-size: 32px;
        margin-bottom: 10px
    }

    .general-disclaimer-container .general-disclaimer-sub-header {
        font-size: 16px;
        padding: 2rem;
        margin: 20px 10px 0;
        top: -4rem
    }

    .general-disclaimer-container .general-disclaimer-section {
        width: 100%;
        padding: 0 1rem
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-title {
        font-size: 24px;
        text-decoration-thickness: 2px;
        margin-bottom: 20px
    }

    .general-disclaimer-container .general-disclaimer-section .general-disclaimer-sub-title {
        font-size: 16px;
        margin-bottom: 20px
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container {
        font-size: 16px;
        line-height: 30px;
        text-align: justify;
        padding: 0 1rem
    }

    .general-disclaimer-container .general-disclaimer-section .terms-container .terms {
        margin: .8rem 0
    }
}

.privacy-policy-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 3%;
    background: radial-gradient(circle at left,var(--vibrant-crimson-red, #C7253E) -45%,transparent 30%),radial-gradient(circle at top right,var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F) -40%,transparent 40%),radial-gradient(circle at bottom right,var(--vibrant-crimson-red, #C7253E) -40%,transparent 40%)
}

.privacy-policy-container .privacy-policy-header {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto
}

.privacy-policy-container .privacy-policy-header h1 {
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: normal;
    margin-bottom: 20px
}

.privacy-policy-container .privacy-policy-sub-header {
    position: relative;
    top: -10rem;
    padding: 5rem 10rem;
    margin: 40px 20px;
    color: var(--BLACK-PRIMARY-COLOR, #000);
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F);
    box-shadow: -5px -5px 20px #a07a1c inset,5px 5px 20px #a07a1c inset
}

@media (max-width: 1536px) {
    .privacy-policy-container .privacy-policy-header h1 {
        font-size:72px;
        margin-bottom: 18px
    }

    .privacy-policy-container .privacy-policy-sub-header {
        top: -8rem;
        padding: 4rem 8rem;
        font-size: 22px;
        line-height: 30px;
        margin: 35px 18px
    }
}

@media (max-width: 1440px) {
    .privacy-policy-container .privacy-policy-header h1 {
        font-size:64px;
        margin-bottom: 16px
    }

    .privacy-policy-container .privacy-policy-sub-header {
        top: -7rem;
        padding: 3.5rem 6rem;
        font-size: 20px;
        line-height: 28px;
        margin: 30px 16px
    }
}

@media (max-width: 1280px) {
    .privacy-policy-container .privacy-policy-header h1 {
        font-size:56px;
        margin-bottom: 14px
    }

    .privacy-policy-container .privacy-policy-sub-header {
        top: -6rem;
        padding: 3rem 4rem;
        font-size: 18px;
        line-height: 26px;
        margin: 25px 14px
    }
}

@media (max-width: 992px) {
    .privacy-policy-container .privacy-policy-header h1 {
        font-size:44px;
        margin-bottom: 12px
    }

    .privacy-policy-container .privacy-policy-sub-header {
        top: -4rem;
        padding: 2.5rem 2rem;
        font-size: 16px;
        line-height: 24px;
        margin: 20px 10px
    }
}

@media (max-width: 480px) {
    .privacy-policy-container {
        padding-bottom:6%
    }

    .privacy-policy-container .privacy-policy-header {
        height: auto;
        padding: 10% 5%
    }

    .privacy-policy-container .privacy-policy-header h1 {
        font-size: 32px;
        margin-bottom: 10px
    }

    .privacy-policy-container .privacy-policy-sub-header {
        font-size: 16px;
        padding: 2rem 1rem;
        top: -4rem;
        line-height: 28px
    }
}

.profanity-policy-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 3%;
    background: radial-gradient(circle at left,var(--vibrant-crimson-red, #C7253E) -45%,transparent 30%),radial-gradient(circle at top right,var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F) -40%,transparent 40%),radial-gradient(circle at bottom right,var(--vibrant-crimson-red, #C7253E) -40%,transparent 40%)
}

.profanity-policy-container .profanity-policy-header {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto
}

.profanity-policy-container .profanity-policy-header h1 {
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: normal;
    margin-bottom: 20px
}

.profanity-policy-container .profanity-policy-sub-header {
    position: relative;
    top: -10rem;
    padding: 5rem 10rem;
    margin: 40px 20px;
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset
}

@media (max-width: 1536px) {
    .profanity-policy-container .profanity-policy-header h1 {
        font-size:72px;
        margin-bottom: 18px
    }

    .profanity-policy-container .profanity-policy-sub-header {
        top: -8rem;
        padding: 4rem 8rem;
        font-size: 22px;
        line-height: 30px;
        margin: 35px 18px
    }
}

@media (max-width: 1440px) {
    .profanity-policy-container .profanity-policy-header h1 {
        font-size:64px;
        margin-bottom: 16px
    }

    .profanity-policy-container .profanity-policy-sub-header {
        top: -7rem;
        padding: 3.5rem 6rem;
        font-size: 20px;
        line-height: 28px;
        margin: 30px 16px
    }
}

@media (max-width: 1280px) {
    .profanity-policy-container .profanity-policy-header h1 {
        font-size:56px;
        margin-bottom: 14px
    }

    .profanity-policy-container .profanity-policy-sub-header {
        top: -6rem;
        padding: 3rem 4rem;
        font-size: 18px;
        line-height: 26px;
        margin: 25px 14px
    }
}

@media (max-width: 992px) {
    .profanity-policy-container .profanity-policy-header h1 {
        font-size:44px;
        margin-bottom: 12px
    }

    .profanity-policy-container .profanity-policy-sub-header {
        top: -4rem;
        padding: 2.5rem 2rem;
        font-size: 16px;
        line-height: 24px;
        margin: 20px 10px
    }
}

@media (max-width: 480px) {
    .profanity-policy-container {
        padding-bottom:6%
    }

    .profanity-policy-container .profanity-policy-header {
        height: auto;
        padding: 10% 5%
    }

    .profanity-policy-container .profanity-policy-header h1 {
        font-size: 32px;
        margin-bottom: 10px
    }

    .profanity-policy-container .profanity-policy-sub-header {
        font-size: 18px;
        padding: 2rem;
        top: -4rem;
        line-height: 28px
    }
}

.verify-your-certificate-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 3%;
    background: radial-gradient(circle at top left,var(--vibrant-crimson-red, #c7253e) -45%,transparent 30%),radial-gradient(circle at right,var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f) -40%,transparent 40%)
}

.verify-your-certificate-container .verify-your-certificate-header {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto
}

.verify-your-certificate-container .verify-your-certificate-header h1 {
    color: var(--WHITE-COLOR, #fff);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: normal;
    margin-bottom: 20px
}

.verify-your-certificate-container .verify-your-certificate-header h4 {
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 50vw
}

.verify-your-certificate-container .instruction-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.verify-your-certificate-container .instruction-section .instruction-title {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
    margin-top: 100px
}

.verify-your-certificate-container .instruction-section .instruction-sub-title {
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 100px
}

.verify-your-certificate-container .instruction-section .instruction-container {
    margin-top: 40px;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.verify-your-certificate-container .instruction-section .instruction-container .left,.verify-your-certificate-container .instruction-section .instruction-container .right {
    width: 46%;
    display: flex;
    flex-direction: column
}

.verify-your-certificate-container .instruction-section .instruction-container .right-card {
    flex-direction: row-reverse!important;
    margin-left: auto;
    margin-right: 0
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 80%;
    margin-bottom: 120px;
    justify-content: center;
    align-items: center
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card .instruction-index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-family: Raleway;
    font-size: 120px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2rem;
    min-height: 20vh
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card section .top {
    position: absolute;
    top: -16px;
    left: -16px
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card section h3 {
    color: var(--WHITE-COLOR, #fff);
    font-family: Raleway;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    min-width: 40%;
    min-height: 40%
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card section .bottom {
    position: absolute;
    bottom: -16px;
    right: -16px
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card .imageContainer {
    position: relative;
    display: flex
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card .imageContainer .image {
    width: 400px;
    height: 400px
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card .imageContainer .image img {
    width: 100%;
    object-fit: cover;
    height: 100%
}

.verify-your-certificate-container .instruction-section .instruction-container .instruction-card p {
    margin-left: 2%;
    width: 75%;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.verify-your-certificate-container .instruction-sub-header {
    padding: 5rem 10rem;
    margin: 40px 20px;
    color: var(--BLACK-PRIMARY-COLOR, #000);
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    box-shadow: -5px -5px 20px #a07a1c inset,5px 5px 20px #a07a1c inset
}

.verify-your-certificate-container .benefit-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 100px
}

.verify-your-certificate-container .benefit-container h3 {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 40px;
    margin-top: 100px
}

.verify-your-certificate-container .benefit-container h4 {
    color: var(--WHITE-COLOR, #fff);
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.verify-your-certificate-container .benefit-container h4 div {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start
}

.verify-your-certificate-container .benefit-container .benefit-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.verify-your-certificate-container .benefit-container .benefit-section .image-container {
    position: relative;
    display: flex
}

.verify-your-certificate-container .benefit-container .benefit-section .image-container .benefit-image {
    width: 400px;
    height: 400px
}

.verify-your-certificate-container .benefit-container .benefit-section .image-container .benefit-image .top {
    position: absolute;
    top: -16px;
    left: -16px
}

.verify-your-certificate-container .benefit-container .benefit-section .image-container .benefit-image img {
    width: 100%;
    object-fit: cover;
    height: 100%
}

.verify-your-certificate-container .benefit-container .benefit-section .image-container .benefit-image .bottom {
    position: absolute;
    bottom: -16px;
    right: -16px
}

.verify-your-certificate-container .benefit-container .benefit-section .benefit-list {
    display: flex;
    flex-direction: column;
    text-align: start;
    gap: 40px;
    padding: 2rem;
    margin-right: 5rem;
    justify-content: center;
    align-items: start;
    color: var(--WHITE-COLOR, #fff);
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.verify-your-certificate-container .benefit-container .benefit-section .benefit-list .list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.verify-your-certificate-container .importance-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.verify-your-certificate-container .importance-container h3 {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 40px;
    margin-top: 100px
}

.verify-your-certificate-container .importance-container .importance-sub-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5rem 10rem;
    margin: 40px 20px;
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset
}

.verify-your-certificate-container .importance-container .importance-sub-header button {
    margin-top: 2rem
}

@media (max-width: 1536px) {
    .verify-your-certificate-container .verify-your-certificate-header h1 {
        font-size:60px!important
    }

    .verify-your-certificate-container .verify-your-certificate-header h4 {
        width: 60vw!important;
        font-size: 20px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-title {
        font-size: 50px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-sub-title {
        font-size: 18px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container {
        padding: 0 80px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card {
        width: 90%!important;
        margin-bottom: 100px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card .instruction-index {
        font-size: 100px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card section h3 {
        font-size: 35px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card p {
        font-size: 18px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card .imageContainer .image {
        width: 350px!important;
        height: 350px!important
    }

    .verify-your-certificate-container .instruction-sub-header {
        padding: 4rem 8rem!important
    }

    .verify-your-certificate-container .benefit-container h3 {
        font-size: 48px!important
    }

    .verify-your-certificate-container .benefit-container h4 {
        font-size: 20px!important
    }

    .verify-your-certificate-container .benefit-section .benefit-list {
        padding: 1rem!important;
        margin-right: 3rem!important
    }

    .verify-your-certificate-container .benefit-section .benefit-list .list-item {
        font-size: 18px!important
    }

    .verify-your-certificate-container .importance-container h3 {
        font-size: 48px!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header {
        font-size: 20px!important;
        padding: 3rem 6rem!important
    }

    .verify-your-certificate-container .importance-container h3,.verify-your-certificate-container .instruction-title {
        font-weight: 700!important;
        color: var(--WHITE-COLOR, #fff)!important
    }
}

@media (max-width: 1440px) {
    .verify-your-certificate-container .verify-your-certificate-header h1 {
        font-size:55px!important
    }

    .verify-your-certificate-container .verify-your-certificate-header h4 {
        width: 70vw!important;
        font-size: 18px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-title {
        font-size: 45px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-sub-title {
        font-size: 16px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container {
        padding: 0 60px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card {
        width: 85%!important;
        margin-bottom: 80px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card .instruction-index {
        font-size: 90px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card section h3 {
        font-size: 32px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card p {
        font-size: 17px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card .imageContainer .image {
        width: 300px!important;
        height: 300px!important
    }

    .verify-your-certificate-container .instruction-sub-header {
        padding: 3rem 6rem!important
    }

    .verify-your-certificate-container .benefit-container h3 {
        font-size: 44px!important
    }

    .verify-your-certificate-container .benefit-container h4 {
        font-size: 18px!important
    }

    .verify-your-certificate-container .benefit-section .benefit-list {
        padding: 1rem!important;
        margin-right: 2.5rem!important
    }

    .verify-your-certificate-container .benefit-section .benefit-list .list-item {
        font-size: 16px!important
    }

    .verify-your-certificate-container .importance-container h3 {
        font-size: 44px!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header {
        font-size: 18px!important;
        padding: 2rem 4rem!important
    }

    .verify-your-certificate-container .importance-container h3,.verify-your-certificate-container .instruction-title {
        font-weight: 700!important;
        color: var(--WHITE-COLOR, #fff)!important
    }
}

@media (max-width: 1280px) {
    .verify-your-certificate-container .verify-your-certificate-header h1 {
        font-size:50px!important
    }

    .verify-your-certificate-container .verify-your-certificate-header h4 {
        width: 80vw!important;
        font-size: 16px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-title {
        font-size: 40px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-sub-title {
        font-size: 14px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container {
        padding: 0 40px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card {
        width: 80%!important;
        margin-bottom: 60px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card .instruction-index {
        font-size: 80px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card section h3 {
        font-size: 28px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card p {
        font-size: 16px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-card .imageContainer .image {
        width: 250px!important;
        height: 250px!important
    }

    .verify-your-certificate-container .instruction-sub-header {
        padding: 2rem 4rem!important
    }

    .verify-your-certificate-container .benefit-container h3 {
        font-size: 40px!important
    }

    .verify-your-certificate-container .benefit-container h4 {
        font-size: 16px!important
    }

    .verify-your-certificate-container .benefit-section .benefit-list {
        padding: 1rem!important;
        margin-right: 2rem!important
    }

    .verify-your-certificate-container .benefit-section .benefit-list .list-item {
        font-size: 14px!important
    }

    .verify-your-certificate-container .importance-container h3 {
        font-size: 40px!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header {
        font-size: 16px!important;
        padding: 2rem 4rem!important
    }

    .verify-your-certificate-container .importance-container h3,.verify-your-certificate-container .instruction-title {
        font-weight: 700!important;
        color: var(--WHITE-COLOR, #fff)!important
    }
}

@media (max-width: 992px) {
    .verify-your-certificate-container .verify-your-certificate-header h1 {
        font-size:42px!important;
        margin-bottom: 15px!important
    }

    .verify-your-certificate-container .verify-your-certificate-header h4 {
        font-size: 16px!important;
        width: 75vw!important
    }

    .verify-your-certificate-container .instruction-section .instruction-title {
        font-size: 38px!important;
        margin-top: 60px!important;
        margin-bottom: 20px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-sub-title {
        font-size: 18px!important;
        margin-bottom: 60px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container {
        padding: 0 40px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card {
        margin-bottom: 60px!important;
        width: 90%!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card .instruction-index {
        font-size: 80px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card section h3 {
        font-size: 28px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card p {
        font-size: 16px!important;
        margin-left: 2%!important;
        width: 75%!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card .imageContainer .image {
        width: 300px!important;
        height: 300px!important
    }

    .verify-your-certificate-container .instruction-sub-header {
        padding: 3rem 6rem!important;
        font-size: 20px!important;
        margin: 40px 20px!important
    }

    .verify-your-certificate-container .benefit-container {
        padding: 0 60px!important
    }

    .verify-your-certificate-container .benefit-container h3 {
        font-size: 40px!important;
        margin-top: 60px!important;
        margin-bottom: 20px!important
    }

    .verify-your-certificate-container .benefit-container h4 {
        font-size: 20px!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section .image-container .benefit-image {
        width: 300px!important;
        height: 300px!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section .benefit-list {
        margin-right: 3rem!important;
        padding: 1.5rem!important;
        font-size: 18px!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section .benefit-list .list-item {
        font-size: 18px!important
    }

    .verify-your-certificate-container .importance-container h3 {
        font-size: 40px!important;
        margin-top: 60px!important;
        margin-bottom: 20px!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header {
        padding: 3rem 6rem!important;
        font-size: 20px!important;
        margin: 40px 20px!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header button {
        margin-top: 1.5rem!important
    }
}

@media (max-width: 480px) {
    .verify-your-certificate-container {
        padding-bottom:6%!important
    }

    .verify-your-certificate-container .verify-your-certificate-header {
        height: auto!important;
        padding: 10% 5%!important
    }

    .verify-your-certificate-container .verify-your-certificate-header h1 {
        font-size: 32px!important;
        margin-bottom: 10px!important
    }

    .verify-your-certificate-container .verify-your-certificate-header h4 {
        font-size: 16px!important;
        width: 90vw!important
    }

    .verify-your-certificate-container .instruction-section .instruction-title {
        font-size: 36px!important;
        margin-top: 50px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-sub-title {
        font-size: 18px!important;
        margin-bottom: 50px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container {
        padding: 0 20px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card {
        flex-direction: column!important;
        width: 100%!important;
        margin-bottom: 60px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card .instruction-index {
        font-size: 80px!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card .top,.verify-your-certificate-container .instruction-section .instruction-container .instruction-card .bottom {
        display: none!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card section {
        flex-direction: column!important;
        margin: 0!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card section h3 {
        font-size: 28px!important;
        min-width: unset!important;
        min-height: unset!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card .imageContainer .image {
        width: 100%!important;
        height: auto!important
    }

    .verify-your-certificate-container .instruction-section .instruction-container .instruction-card p {
        width: 100%!important;
        font-size: 16px!important
    }

    .verify-your-certificate-container .instruction-sub-header {
        font-size: 18px!important;
        padding: 2rem!important;
        margin: 20px 10px!important;
        line-height: 28px!important
    }

    .verify-your-certificate-container .benefit-container {
        padding: 0 20px!important
    }

    .verify-your-certificate-container .benefit-container h3 {
        font-size: 24px!important;
        margin-top: 50px!important;
        text-align: left!important
    }

    .verify-your-certificate-container .benefit-container h4 {
        font-size: 18px!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section {
        flex-direction: column!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section .image-container {
        width: 100%!important;
        display: flex!important;
        justify-content: center!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section .image-container .benefit-image {
        width: 100%!important;
        height: auto!important
    }

    .verify-your-certificate-container .benefit-container .benefit-section .benefit-list {
        text-align: left!important;
        padding: 1rem!important;
        margin-right: 0!important;
        font-size: 16px!important;
        gap: 20px!important;
        width: 100%!important
    }

    .verify-your-certificate-container .importance-container h3 {
        font-size: 24px!important;
        margin-top: 50px!important;
        text-align: left!important;
        padding: 2%!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header {
        font-size: 16px!important;
        padding: 2rem!important;
        margin: 0 10px!important;
        line-height: 28px!important
    }

    .verify-your-certificate-container .importance-container .importance-sub-header button {
        margin-top: 1rem!important
    }
}

.contactHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-CD0fR3gq.jpeg) #d3d3d3 0px -164.579px/100% 200.966% no-repeat;
    width: 100%;
    height: 75.5vh;
    display: flex;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.contactHero h1 {
    font-size: 5vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase
}

.contactHero p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 60%;
    padding-top: 4vh
}

@media (max-width: 1536px) {
    .contactHero h1 {
        font-size:4.5vw
    }

    .contactHero p {
        font-size: 1.15vw;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .contactHero h1 {
        font-size:4.2vw
    }

    .contactHero p {
        font-size: 1.05vw;
        width: 68%
    }
}

@media (max-width: 1280px) {
    .contactHero h1 {
        font-size:4vw
    }

    .contactHero p {
        font-size: 1vw;
        width: 70%
    }
}

@media (max-width: 992px) {
    .contactHero {
        height:58vh
    }

    .contactHero h1 {
        font-size: 5vw
    }

    .contactHero p {
        font-size: 1.4vw;
        width: 80%;
        padding-top: 3vh
    }
}

@media (max-width: 480px) {
    .contactHero {
        background:linear-gradient(0deg,#0006,#0006),url(../assets/hero-CD0fR3gq.jpeg) #d3d3d3 50%/cover no-repeat;
        height: 230px
    }

    .contactHero h1 {
        font-size: 20px
    }

    .contactHero p {
        font-size: 16px;
        width: 100%;
        padding-top: 1vh
    }
}

.customerCare .partnerWho-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw
}

.customerCare .partnerWho-container .p-left {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15vh 0
}

.customerCare .partnerWho-container .p-left .pshape1 {
    width: 12.8vw;
    height: 80vh;
    background-color: #770006;
    left: -4vw;
    bottom: -17vh;
    position: absolute
}

.customerCare .partnerWho-container .p-left .pshape2 {
    position: absolute;
    width: 9vw;
    height: 60vh;
    transform: rotate(90deg);
    background-color: #fabc3f;
    bottom: 18vh;
    right: 8vw
}

.customerCare .partnerWho-container .p-left .pshape3 {
    position: absolute;
    width: 10vw;
    height: 55vh;
    background-color: #821131;
    bottom: -11vh;
    left: 14vw
}

.customerCare .partnerWho-container .p-left .lImg {
    width: 36vw;
    height: auto;
    z-index: 2
}

.customerCare .partnerWho-container .p-right {
    width: 50%;
    padding-left: 5%
}

.customerCare .partnerWho-container .p-right h2 {
    color: #f0af13;
    font-size: 56px;
    margin-bottom: 1rem;
    font-weight: 500
}

.customerCare .partnerWho-container .p-right p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 24px;
    color: #fff;
    width: 75%
}

.customerCare .partnerWho-container .p-right .ccshape {
    height: 1px;
    background: #8a1331;
    width: 80%;
    margin-bottom: 5%
}

.customerCare .partnerWho-container .p-right .link {
    display: inline-block;
    color: #f0af13;
    text-decoration: none;
    border-bottom: 1px solid #F0AF13;
    margin-bottom: 1.5rem;
    font-weight: 500;
    transition: color .3s ease
}

.customerCare .partnerWho-container .p-right .link:hover {
    color: #fff
}

@media (max-width: 1536px) {
    .customerCare .partnerWho-container {
        gap:3vw
    }

    .customerCare .partnerWho-container .p-left {
        margin: 10vh 0
    }

    .customerCare .partnerWho-container .p-left .pshape1 {
        width: 11vw;
        height: 70vh
    }

    .customerCare .partnerWho-container .p-left .pshape2 {
        width: 8vw;
        height: 50vh
    }

    .customerCare .partnerWho-container .p-left .pshape3 {
        width: 9vw;
        height: 48vh
    }

    .customerCare .partnerWho-container .p-right h2 {
        font-size: 48px
    }

    .customerCare .partnerWho-container .p-right p {
        font-size: 20px
    }

    .customerCare .partnerWho-container .p-right .ccshape {
        width: 75%
    }

    .customerCare .partnerWho-container .p-right .link {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .customerCare .partnerWho-container {
        gap:2.5vw
    }

    .customerCare .partnerWho-container .p-left {
        margin: 9vh 0
    }

    .customerCare .partnerWho-container .p-left .pshape1 {
        width: 10vw;
        height: 60vh;
        left: 2vh
    }

    .customerCare .partnerWho-container .p-left .pshape2 {
        width: 7vw;
        height: 45vh;
        bottom: 9vh
    }

    .customerCare .partnerWho-container .p-left .pshape3 {
        width: 8vw;
        height: 42vh
    }

    .customerCare .partnerWho-container .p-left .lImg {
        width: 32vw
    }

    .customerCare .partnerWho-container .p-right h2 {
        font-size: 42px
    }

    .customerCare .partnerWho-container .p-right p {
        font-size: 18px
    }

    .customerCare .partnerWho-container .p-right .ccshape {
        width: 70%
    }

    .customerCare .partnerWho-container .p-right .link {
        font-size: 16px
    }
}

@media (max-width: 992px) {
    .customerCare .partnerWho-container {
        gap:2vw
    }

    .customerCare .partnerWho-container .p-left {
        margin: 6vh 0
    }

    .customerCare .partnerWho-container .p-left .pshape1 {
        width: 9vw;
        height: 45vh;
        left: -2vw;
        bottom: -10vh
    }

    .customerCare .partnerWho-container .p-left .pshape2 {
        width: 6vw;
        height: 40vh;
        bottom: 4vh;
        right: 12vw
    }

    .customerCare .partnerWho-container .p-left .pshape3 {
        width: 7vw;
        height: 28vh;
        bottom: -8vh;
        left: 10vw
    }

    .customerCare .partnerWho-container .p-right {
        padding-left: 3%
    }

    .customerCare .partnerWho-container .p-right h2 {
        font-size: 34px
    }

    .customerCare .partnerWho-container .p-right p {
        font-size: 16px;
        width: 90%
    }

    .customerCare .partnerWho-container .p-right .ccshape {
        width: 65%
    }

    .customerCare .partnerWho-container .p-right .link {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .customerCare {
        margin-bottom:10%
    }

    .customerCare .partnerWho-container {
        display: flex;
        flex-direction: column-reverse
    }

    .customerCare .partnerWho-container .p-left {
        width: 100%;
        margin-top: 50%
    }

    .customerCare .partnerWho-container .p-left .pshape1 {
        width: 97.442px;
        height: 272.206px;
        left: 0
    }

    .customerCare .partnerWho-container .p-left .pshape2 {
        width: 75.744px;
        height: 228.417px;
        bottom: -10px;
        left: 50vw
    }

    .customerCare .partnerWho-container .p-left .pshape3 {
        width: 75.744px;
        height: 200.765px;
        bottom: -100px;
        left: 120px
    }

    .customerCare .partnerWho-container .p-left .lImg {
        position: absolute;
        width: 307.317px;
        height: 181.076px;
        margin: -2% 10% 10%
    }

    .customerCare .partnerWho-container .p-right {
        width: 100%;
        padding-left: 0;
        margin-top: 1rem
    }

    .customerCare .partnerWho-container .p-right h2 {
        font-size: 24px;
        text-align: left
    }

    .customerCare .partnerWho-container .p-right p {
        font-size: 16px;
        width: 100%
    }

    .customerCare .partnerWho-container .p-right .ccshape {
        width: 100%;
        margin-bottom: 1rem
    }

    .customerCare .partnerWho-container .p-right .link {
        font-size: 16px;
        margin-bottom: 1rem
    }
}

.customerFranchisee .partnerWho-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw
}

.customerFranchisee .partnerWho-container .p-left {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15vh 0
}

.customerFranchisee .partnerWho-container .p-left .pshape1 {
    width: 12.8vw;
    height: 80vh;
    background-color: #770006;
    left: -4vw;
    bottom: -17vh;
    position: absolute
}

.customerFranchisee .partnerWho-container .p-left .pshape2 {
    position: absolute;
    width: 9vw;
    height: 60vh;
    transform: rotate(90deg);
    background-color: #fabc3f;
    bottom: 18vh;
    right: 8vw
}

.customerFranchisee .partnerWho-container .p-left .pshape3 {
    position: absolute;
    width: 10vw;
    height: 55vh;
    background-color: #821131;
    bottom: -11vh;
    left: 14vw
}

.customerFranchisee .partnerWho-container .p-left .lImg {
    width: 36vw;
    height: auto;
    z-index: 2
}

.customerFranchisee .partnerWho-container .p-right {
    width: 50%;
    padding-left: 5%
}

.customerFranchisee .partnerWho-container .p-right h2 {
    color: #f0af13;
    font-size: 56px;
    margin-bottom: 1rem;
    font-weight: 500
}

.customerFranchisee .partnerWho-container .p-right p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 24px;
    color: #fff;
    width: 75%
}

.customerFranchisee .partnerWho-container .p-right .ccshape {
    height: 1px;
    background: #8a1331;
    width: 80%;
    margin-bottom: 5%
}

.customerFranchisee .partnerWho-container .p-right .sub {
    font-size: 14px
}

.customerFranchisee .partnerWho-container .p-right .number {
    display: inline-block;
    color: #f0af13;
    cursor: pointer;
    text-decoration: underline;
    margin-bottom: 1.5rem;
    font-weight: 500;
    transition: color .3s ease;
    font-size: 14px
}

.customerFranchisee .partnerWho-container .p-right .number:hover {
    color: #fff
}

@media (max-width: 1536px) {
    .customerFranchisee .partnerWho-container {
        gap:3vw
    }

    .customerFranchisee .partnerWho-container .p-left {
        margin: 10vh 0
    }

    .customerFranchisee .partnerWho-container .p-left .pshape1 {
        width: 11vw;
        height: 70vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape2 {
        width: 8vw;
        height: 50vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape3 {
        width: 9vw;
        height: 48vh
    }

    .customerFranchisee .partnerWho-container .p-right h2 {
        font-size: 48px
    }

    .customerFranchisee .partnerWho-container .p-right p {
        font-size: 20px
    }

    .customerFranchisee .partnerWho-container .p-right .ccshape {
        width: 75%
    }

    .customerFranchisee .partnerWho-container .p-right .sub,.customerFranchisee .partnerWho-container .p-right .number {
        font-size: 13px
    }
}

@media (max-width: 1440px) {
    .customerFranchisee .partnerWho-container {
        gap:2.5vw
    }

    .customerFranchisee .partnerWho-container .p-left {
        margin: 9vh 0
    }

    .customerFranchisee .partnerWho-container .p-left .pshape1 {
        width: 10vw;
        height: 62vh;
        left: 2vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape2 {
        width: 7vw;
        height: 46vh;
        bottom: 10vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape3 {
        width: 8vw;
        height: 43vh
    }

    .customerFranchisee .partnerWho-container .p-left .lImg {
        width: 32vw
    }

    .customerFranchisee .partnerWho-container .p-right h2 {
        font-size: 44px
    }

    .customerFranchisee .partnerWho-container .p-right p {
        font-size: 18px
    }

    .customerFranchisee .partnerWho-container .p-right .ccshape {
        width: 72%
    }

    .customerFranchisee .partnerWho-container .p-right .sub,.customerFranchisee .partnerWho-container .p-right .number {
        font-size: 12.5px
    }
}

@media (max-width: 1280px) {
    .customerFranchisee .partnerWho-container {
        gap:2vw
    }

    .customerFranchisee .partnerWho-container .p-left {
        margin: 8vh 0
    }

    .customerFranchisee .partnerWho-container .p-left .pshape1 {
        width: 8.8vw;
        height: 54vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape2 {
        width: 6.5vw;
        height: 40vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape3 {
        width: 7vw;
        height: 37vh
    }

    .customerFranchisee .partnerWho-container .p-left .lImg {
        width: 28vw
    }

    .customerFranchisee .partnerWho-container .p-right h2 {
        font-size: 40px
    }

    .customerFranchisee .partnerWho-container .p-right p {
        font-size: 17px
    }

    .customerFranchisee .partnerWho-container .p-right .ccshape {
        width: 70%
    }

    .customerFranchisee .partnerWho-container .p-right .sub,.customerFranchisee .partnerWho-container .p-right .number {
        font-size: 12px
    }
}

@media (max-width: 992px) {
    .customerFranchisee .partnerWho-container {
        gap:1.5vw
    }

    .customerFranchisee .partnerWho-container .p-left {
        margin: 6vh 0
    }

    .customerFranchisee .partnerWho-container .p-left .pshape1 {
        width: 7.5vw;
        height: 44vh;
        left: 1vh;
        bottom: -10vh
    }

    .customerFranchisee .partnerWho-container .p-left .pshape2 {
        width: 5.5vw;
        height: 35vh;
        bottom: 4vh;
        right: 12vw
    }

    .customerFranchisee .partnerWho-container .p-left .pshape3 {
        width: 6vw;
        height: 25vh;
        bottom: -8vh;
        left: 12vw
    }

    .customerFranchisee .partnerWho-container .p-right {
        padding-left: 3%
    }

    .customerFranchisee .partnerWho-container .p-right h2 {
        font-size: 32px
    }

    .customerFranchisee .partnerWho-container .p-right p {
        font-size: 15px;
        width: 90%
    }

    .customerFranchisee .partnerWho-container .p-right .ccshape {
        width: 65%;
        margin-bottom: 4%
    }

    .customerFranchisee .partnerWho-container .p-right .sub,.customerFranchisee .partnerWho-container .p-right .number {
        font-size: 11.5px
    }
}

@media (max-width: 480px) {
    .customerFranchisee .partnerWho-container {
        margin-bottom:12%;
        display: flex;
        flex-direction: column-reverse
    }

    .customerFranchisee .partnerWho-container .p-left {
        width: 100%;
        margin-top: 50%
    }

    .customerFranchisee .partnerWho-container .p-left .pshape1 {
        width: 97.442px;
        height: 272.206px;
        left: 0
    }

    .customerFranchisee .partnerWho-container .p-left .pshape2 {
        width: 75.744px;
        height: 228.417px;
        bottom: -10px;
        left: 50vw
    }

    .customerFranchisee .partnerWho-container .p-left .pshape3 {
        width: 75.744px;
        height: 200.765px;
        bottom: -100px;
        left: 120px
    }

    .customerFranchisee .partnerWho-container .p-left .lImg {
        position: absolute;
        width: 307.317px;
        height: 181.076px;
        margin: -2% 10% 10%
    }

    .customerFranchisee .partnerWho-container .p-right {
        width: 100%;
        padding-left: 0;
        margin-top: 1rem
    }

    .customerFranchisee .partnerWho-container .p-right h2 {
        font-size: 24px;
        text-align: left
    }

    .customerFranchisee .partnerWho-container .p-right p {
        font-size: 16px;
        width: 100%
    }

    .customerFranchisee .partnerWho-container .p-right .ccshape {
        width: 100%;
        margin-bottom: 1rem
    }

    .customerFranchisee .partnerWho-container .p-right .sub,.customerFranchisee .partnerWho-container .p-right .number {
        font-size: 14px
    }
}

.contactCTA {
    height: 136px;
    width: 100%;
    padding: 0;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f)
}

.contactCTA p {
    padding: 40px 350px;
    color: var(--BLACK-PRIMARY-COLOR, #000);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .contactCTA {
        height:auto;
        margin-top: 8%
    }

    .contactCTA p {
        padding: 30px 200px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .contactCTA {
        height:auto;
        margin-top: 8%
    }

    .contactCTA p {
        padding: 30px 180px;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .contactCTA {
        height:auto;
        margin-top: 8%
    }

    .contactCTA p {
        padding: 30px 150px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .contactCTA {
        height:auto;
        margin-top: 8%
    }

    .contactCTA p {
        padding: 20px 16px;
        font-size: 16px;
        text-align: center
    }
}

.contactJob .partnerWho-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw
}

.contactJob .partnerWho-container .p-left {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15vh 0
}

.contactJob .partnerWho-container .p-left .pshape1 {
    width: 12.8vw;
    height: 80vh;
    background-color: #770006;
    right: -4vw;
    bottom: -17vh;
    position: absolute
}

.contactJob .partnerWho-container .p-left .pshape2 {
    position: absolute;
    width: 9vw;
    height: 60vh;
    transform: rotate(90deg);
    background-color: #fabc3f;
    bottom: 18vh;
    left: 8vw
}

.contactJob .partnerWho-container .p-left .pshape3 {
    position: absolute;
    width: 10vw;
    height: 55vh;
    background-color: #821131;
    bottom: -11vh;
    right: 14vw
}

.contactJob .partnerWho-container .p-left .lImg {
    width: 36vw;
    height: auto;
    z-index: 2
}

.contactJob .partnerWho-container .p-right {
    width: 50%;
    padding-left: 5%
}

.contactJob .partnerWho-container .p-right h2 {
    color: #f0af13;
    font-size: 56px;
    margin-bottom: 1rem;
    font-weight: 500;
    width: 80%
}

.contactJob .partnerWho-container .p-right p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 24px;
    color: #fff;
    width: 90%
}

.contactJob .partnerWho-container .p-right p span {
    color: #f0af13
}

.contactJob .partnerWho-container .p-right p .mail {
    cursor: pointer
}

@media (max-width: 1536px) {
    .contactJob .partnerWho-container {
        gap:3vw
    }

    .contactJob .partnerWho-container .p-left {
        margin: 10vh 0
    }

    .contactJob .partnerWho-container .p-left .pshape1 {
        width: 11vw;
        height: 70vh
    }

    .contactJob .partnerWho-container .p-left .pshape2 {
        width: 8vw;
        height: 50vh
    }

    .contactJob .partnerWho-container .p-left .pshape3 {
        width: 9vw;
        height: 48vh
    }

    .contactJob .partnerWho-container .p-right h2 {
        font-size: 48px
    }

    .contactJob .partnerWho-container .p-right p {
        font-size: 20px
    }
}

@media (max-width: 1440px) {
    .contactJob .partnerWho-container {
        gap:2.5vw
    }

    .contactJob .partnerWho-container .p-left {
        margin: 9vh 0
    }

    .contactJob .partnerWho-container .p-left .pshape1 {
        width: 10vw;
        height: 60vh;
        left: 55vh
    }

    .contactJob .partnerWho-container .p-left .pshape2 {
        bottom: 8vh;
        width: 7vw;
        height: 45vh
    }

    .contactJob .partnerWho-container .p-left .pshape3 {
        width: 8vw;
        height: 42vh
    }

    .contactJob .partnerWho-container .p-left .lImg {
        width: 32vw
    }

    .contactJob .partnerWho-container .p-right h2 {
        font-size: 42px
    }

    .contactJob .partnerWho-container .p-right p {
        font-size: 18px
    }
}

@media (max-width: 992px) {
    .contactJob .partnerWho-container {
        gap:2vw
    }

    .contactJob .partnerWho-container .p-left {
        margin: 6vh 0
    }

    .contactJob .partnerWho-container .p-left .pshape1 {
        width: 9vw;
        height: 40vh;
        left: 32vw;
        bottom: -10vh
    }

    .contactJob .partnerWho-container .p-left .pshape2 {
        width: 6vw;
        height: 40vh;
        bottom: 0vh;
        left: 11vw
    }

    .contactJob .partnerWho-container .p-left .pshape3 {
        width: 7vw;
        height: 30vh;
        bottom: -9vh;
        right: 15vw
    }

    .contactJob .partnerWho-container .p-right {
        padding-left: 3%
    }

    .contactJob .partnerWho-container .p-right h2 {
        font-size: 36px;
        width: 90%
    }

    .contactJob .partnerWho-container .p-right p {
        font-size: 16px;
        width: 100%;
        margin-bottom: 1rem
    }
}

@media (max-width: 480px) {
    .contactJob .partnerWho-container {
        display:flex;
        flex-direction: column
    }

    .contactJob .partnerWho-container .p-left {
        width: 100%;
        margin-top: 50%
    }

    .contactJob .partnerWho-container .p-left .pshape1 {
        width: 97.442px;
        height: 272.206px;
        left: 30vh
    }

    .contactJob .partnerWho-container .p-left .pshape2 {
        width: 75.744px;
        height: 228.417px;
        bottom: -10px
    }

    .contactJob .partnerWho-container .p-left .pshape3 {
        width: 75.744px;
        height: 200.765px;
        bottom: -100px;
        right: 120px
    }

    .contactJob .partnerWho-container .p-left .lImg {
        position: absolute;
        width: 307.317px;
        height: 181.076px;
        margin: -2% 10% 10%
    }

    .contactJob .partnerWho-container .p-right {
        width: 100%;
        padding-left: 0;
        margin-top: 1rem
    }

    .contactJob .partnerWho-container .p-right h2 {
        font-size: 24px;
        text-align: left;
        width: 100%
    }

    .contactJob .partnerWho-container .p-right p {
        font-size: 16px;
        width: 100%
    }

    .contactJob .partnerWho-container .p-right .ccshape {
        width: 100%;
        margin-bottom: 1rem
    }

    .contactJob .partnerWho-container .p-right .link {
        font-size: 16px;
        margin-bottom: 1rem
    }
}

.contactFind .partnerWho-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw
}

.contactFind .partnerWho-container .p-left {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15vh 0
}

.contactFind .partnerWho-container .p-left .pshape1 {
    width: 12.8vw;
    height: 80vh;
    background-color: #770006;
    right: -4vw;
    bottom: -17vh;
    position: absolute
}

.contactFind .partnerWho-container .p-left .pshape2 {
    position: absolute;
    width: 9vw;
    height: 60vh;
    transform: rotate(90deg);
    background-color: #fabc3f;
    bottom: 18vh;
    left: 8vw
}

.contactFind .partnerWho-container .p-left .pshape3 {
    position: absolute;
    width: 10vw;
    height: 55vh;
    background-color: #821131;
    bottom: -11vh;
    right: 14vw
}

.contactFind .partnerWho-container .p-left .lImg {
    width: 36vw;
    height: auto;
    z-index: 2
}

.contactFind .partnerWho-container .p-right {
    width: 50%;
    padding-left: 5%
}

.contactFind .partnerWho-container .p-right h2 {
    color: #f0af13;
    font-size: 56px;
    margin-bottom: 1rem;
    font-weight: 500;
    width: 95%
}

.contactFind .partnerWho-container .p-right p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 24px;
    color: #fff;
    width: 90%
}

.contactFind .partnerWho-container .p-right p span {
    color: #f0af13
}

@media (max-width: 1536px) {
    .partnerWho-container {
        gap:3vw
    }

    .partnerWho-container .p-left {
        margin: 12vh 0
    }

    .partnerWho-container .p-left .pshape1 {
        height: 75vh
    }

    .partnerWho-container .p-left .lImg {
        width: 33vw
    }

    .partnerWho-container .p-right h2 {
        font-size: 52px
    }

    .partnerWho-container .p-right p {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .contactFind .partnerWho-container {
        gap:2.5vw
    }

    .contactFind .partnerWho-container .p-left {
        margin: 10vh 0
    }

    .contactFind .partnerWho-container .p-left .pshape1 {
        height: 65vh;
        width: 11vw
    }

    .contactFind .partnerWho-container .p-left .pshape2 {
        width: 8vw;
        height: 50vh;
        bottom: 14vh
    }

    .contactFind .partnerWho-container .p-left .pshape3 {
        width: 9vw;
        height: 48vh
    }

    .contactFind .partnerWho-container .p-left .lImg {
        width: 35vw
    }

    .contactFind .partnerWho-container .p-right h2 {
        font-size: 46px
    }

    .contactFind .partnerWho-container .p-right p {
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .contactFind .partnerWho-container {
        gap:2vw
    }

    .contactFind .partnerWho-container .p-left {
        margin: 6vh 0
    }

    .contactFind .partnerWho-container .p-left .pshape1 {
        width: 9vw;
        height: 50vh;
        right: -2vw;
        bottom: -12vh
    }

    .contactFind .partnerWho-container .p-left .pshape2 {
        width: 6vw;
        height: 40vh;
        bottom: 10vh;
        left: 14vw
    }

    .contactFind .partnerWho-container .p-left .pshape3 {
        width: 7vw;
        height: 28vh;
        bottom: -8vh;
        right: 10vw
    }

    .contactFind .partnerWho-container .p-right {
        padding-left: 3%
    }

    .contactFind .partnerWho-container .p-right h2 {
        font-size: 34px;
        width: 100%
    }

    .contactFind .partnerWho-container .p-right p {
        font-size: 16px;
        width: 95%
    }
}

@media (max-width: 480px) {
    .contactFind .partnerWho-container {
        display:flex;
        flex-direction: column
    }

    .contactFind .partnerWho-container .p-left {
        width: 100%;
        margin-top: 50%
    }

    .contactFind .partnerWho-container .p-left .pshape1 {
        width: 97.442px;
        height: 272.206px
    }

    .contactFind .partnerWho-container .p-left .pshape2 {
        width: 75.744px;
        height: 228.417px;
        bottom: -10px
    }

    .contactFind .partnerWho-container .p-left .pshape3 {
        width: 75.744px;
        height: 200.765px;
        bottom: -100px;
        right: 120px
    }

    .contactFind .partnerWho-container .p-left .lImg {
        position: absolute;
        width: 307.317px;
        height: 181.076px;
        margin: -2% 10% 10%
    }

    .contactFind .partnerWho-container .p-right {
        width: 100%;
        padding-left: 0;
        margin-top: 1rem
    }

    .contactFind .partnerWho-container .p-right h2 {
        font-size: 24px;
        text-align: left;
        width: 100%
    }

    .contactFind .partnerWho-container .p-right p {
        font-size: 16px;
        width: 100%
    }

    .contactFind .partnerWho-container .p-right .ccshape {
        width: 100%;
        margin-bottom: 1rem
    }

    .contactFind .partnerWho-container .p-right .link {
        font-size: 16px;
        margin-bottom: 1rem
    }
}

.btsHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.btsHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.btsHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#0009,#0009);
    z-index: 1
}

.btsHero img,.btsHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.btsHero img {
    width: 358px;
    height: 110px
}

.btsHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1440px) {
    .btsHero {
        height:500px
    }

    .btsHero img {
        width: 330px;
        height: 100px
    }

    .btsHero p {
        width: 72%;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .btsHero {
        height:460px
    }

    .btsHero img {
        width: 300px;
        height: 90px
    }

    .btsHero p {
        width: 75%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .btsHero {
        height:420px
    }

    .btsHero img {
        width: 260px;
        height: 80px
    }

    .btsHero p {
        width: 80%;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .btsHero {
        height:229px
    }

    .btsHero img,.btsHero p {
        margin-bottom: 12px
    }

    .btsHero img {
        width: 97px;
        height: auto
    }

    .btsHero p {
        width: 100%;
        font-size: 16px
    }
}

.btsSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 80px 0 50px 100px
}

.btsSubHero .mc-left {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 910px;
    background: #821131;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.btsSubHero .mc-left h1 {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.btsSubHero .mc-left p {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.btsSubHero .mc-right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 862px;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/thumbnail-CsMC6_gH.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.btsSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.btsSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.btsSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.btsSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.btsSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.btsSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.btsSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .btsSubHero .mc-left {
        width:45%
    }

    .btsSubHero .mc-left h1 {
        font-size: 52px
    }

    .btsSubHero .mc-left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .btsSubHero .mc-right {
        padding-left: 0;
        width: 50%
    }

    .btsSubHero .mc-right .playbutton {
        top: 42%;
        left: 42%
    }

    .btsSubHero .mc-right .top-border {
        top: -10px;
        left: -15px
    }

    .btsSubHero .mc-right .bottom-border {
        bottom: -10px;
        right: -15px
    }

    .modal-overlay .modal-content {
        width: 70%;
        max-width: 800px
    }

    .modal-overlay .modal-content iframe {
        height: 450px
    }

    .modal-overlay .modal-content .close-button {
        top: -30px;
        right: -30px;
        font-size: 16px;
        padding: 6px 10px
    }
}

@media (max-width: 1440px) {
    .btsSubHero {
        padding-left:80px;
        padding-top: 70px;
        padding-bottom: 40px
    }

    .btsSubHero .mc-left {
        width: 42%;
        height: 530px;
        padding: 35px
    }

    .btsSubHero .mc-left h1 {
        font-size: 48px;
        margin-bottom: 1%
    }

    .btsSubHero .mc-left p {
        font-size: 19px;
        width: 85%
    }

    .btsSubHero .mc-right {
        width: 48%;
        height: 440px;
        right: 60px
    }

    .btsSubHero .playbutton {
        width: 70px;
        height: 70px
    }

    .modal-overlay .modal-content {
        width: 65%;
        max-width: 700px
    }

    .modal-overlay .modal-content iframe {
        height: 420px
    }

    .modal-overlay .modal-content .close-button {
        top: -26px;
        right: -26px;
        font-size: 15px;
        width: 32px;
        height: 32px
    }
}

@media (max-width: 1280px) {
    .btsSubHero .mc-left {
        width:90%;
        height: 50vh;
        padding: 30px
    }

    .btsSubHero .mc-left h1 {
        font-size: 42px
    }

    .btsSubHero .mc-left p {
        font-size: 18px;
        width: 90%
    }

    .btsSubHero .mc-right {
        position: relative;
        width: 90%;
        height: 380px;
        right: 2%
    }

    .btsSubHero .playbutton {
        width: 60px;
        height: 60px
    }

    .modal-overlay .modal-content {
        width: 90%;
        max-width: 600px
    }

    .modal-overlay .modal-content iframe {
        height: 360px
    }

    .modal-overlay .modal-content .close-button {
        top: -20px;
        right: -20px;
        font-size: 14px;
        width: 30px;
        height: 30px
    }
}

@media (max-width: 992px) {
    .btsSubHero {
        padding-left:60px;
        padding-top: 60px;
        padding-bottom: 40px
    }

    .btsSubHero .mc-left {
        width: 90%;
        height: 45vh;
        padding: 25px
    }

    .btsSubHero .mc-left h1 {
        font-size: 36px;
        margin-bottom: 1%
    }

    .btsSubHero .mc-left p {
        font-size: 16px;
        width: 90%
    }

    .btsSubHero .mc-right {
        position: relative;
        width: 90%;
        height: 320px;
        right: 2%
    }

    .btsSubHero .playbutton {
        width: 55px;
        height: 55px
    }

    .modal-overlay .modal-content {
        width: 95%;
        max-width: 500px
    }

    .modal-overlay .modal-content iframe {
        height: 300px
    }

    .modal-overlay .modal-content .close-button {
        top: -15px;
        right: -15px;
        font-size: 14px;
        width: 28px;
        height: 28px
    }
}

@media (max-width: 480px) {
    .btsSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .btsSubHero .mc-left {
        text-align: center;
        width: 100%;
        height: auto;
        padding: 10px 20px;
        box-shadow: none
    }

    .btsSubHero .mc-left h1 {
        font-size: 20px;
        width: 100%
    }

    .btsSubHero .mc-left p {
        font-size: 16px;
        width: 100%
    }

    .btsSubHero .mc-right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -2%
    }

    .btsSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .btsSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .btsSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .btsSubHero .modal-content {
        padding: 0
    }

    .btsSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .btsSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.btsCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/cta-QLXkyrXV.jpeg) #d3d3d3 50%/cover no-repeat
}

.btsCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 80%
}

.btsCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%;
    width: 65%
}

.btsCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.btsCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .btsCTA {
        height:400px;
        background-size: cover
    }

    .btsCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .btsCTA p {
        font-size: 22px;
        width: 70%
    }

    .btsCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .btsCTA {
        height:380px
    }

    .btsCTA h1 {
        font-size: 48px;
        width: 70%
    }

    .btsCTA p {
        font-size: 20px;
        width: 68%
    }

    .btsCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 17px;
        padding: 12px 22px
    }
}

@media (max-width: 1280px) {
    .btsCTA {
        height:360px;
        align-items: center;
        text-align: center;
        padding: 20px
    }

    .btsCTA h1 {
        font-size: 42px;
        width: 90%
    }

    .btsCTA p {
        font-size: 18px;
        width: 80%
    }

    .btsCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .btsCTA {
        height:320px;
        align-items: center;
        text-align: center;
        padding: 15px
    }

    .btsCTA h1 {
        font-size: 36px;
        width: 90%
    }

    .btsCTA p {
        font-size: 16px;
        width: 85%
    }

    .btsCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 14px;
        padding: 8px 18px
    }
}

@media (max-width: 480px) {
    .btsCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center
    }

    .btsCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .btsCTA p {
        font-size: 16px;
        width: 90%
    }

    .btsCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.btsGlimpse {
    padding: 0;
    overflow: hidden
}

.btsGlimpse .eventFPSGlimpseGlimpseContainer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    overflow: hidden
}

.btsGlimpse .eventFPSGlimpseGlimpseContainer .redline {
    position: absolute;
    margin-top: 30%;
    z-index: 3;
    width: 48.5%;
    height: 10px;
    background: #bc2329
}

.btsGlimpse .imageContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.btsGlimpse .image {
    height: 587px;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.btsGlimpse .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.btsGlimpse .center {
    width: 48.85%;
    height: 547px;
    margin-bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

.btsGlimpse .left,.btsGlimpse .right {
    width: calc((51.15% - 80px)/2);
    opacity: .5;
    transform: scale(.85)
}

.btsGlimpse .navButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10
}

.btsGlimpse .navButton img {
    width: 50px;
    height: 50px
}

.btsGlimpse .left.navButton {
    opacity: 1;
    left: 15%
}

.btsGlimpse .right.navButton {
    opacity: 1;
    left: 83%
}

@media (max-width: 1536px) {
    .btsGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:60px 0
    }

    .btsGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 49%;
        height: 6px;
        margin-top: 35%
    }

    .btsGlimpse .imageContainer {
        gap: 30px
    }

    .btsGlimpse .image {
        height: 550px
    }

    .btsGlimpse .center {
        width: 50%;
        height: 520px
    }

    .btsGlimpse .left,.btsGlimpse .right {
        width: calc((50% - 40px)/2);
        transform: scale(.8)
    }

    .btsGlimpse .navButton img {
        width: 45px;
        height: 45px
    }

    .btsGlimpse .left.navButton {
        left: 12%
    }

    .btsGlimpse .right.navButton {
        left: 81%
    }
}

@media (max-width: 1440px) {
    .btsGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:50px 0
    }

    .btsGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 51%;
        height: 5px;
        margin-top: 35%
    }

    .btsGlimpse .imageContainer {
        gap: 28px
    }

    .btsGlimpse .image {
        height: 500px
    }

    .btsGlimpse .center {
        width: 52%;
        height: 480px
    }

    .btsGlimpse .left,.btsGlimpse .right {
        width: calc((48% - 28px)/2);
        transform: scale(.78)
    }

    .btsGlimpse .navButton img {
        width: 42px;
        height: 42px
    }

    .btsGlimpse .left.navButton {
        left: 11.5%
    }

    .btsGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 1280px) {
    .btsGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:40px 0
    }

    .btsGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 53%;
        height: 4px;
        margin-top: 34%
    }

    .btsGlimpse .imageContainer {
        gap: 24px
    }

    .btsGlimpse .image {
        height: 460px
    }

    .btsGlimpse .center {
        width: 54%;
        height: 440px
    }

    .btsGlimpse .left,.btsGlimpse .right {
        width: calc((46% - 24px)/2);
        transform: scale(.75)
    }

    .btsGlimpse .navButton img {
        width: 38px;
        height: 38px
    }

    .btsGlimpse .left.navButton {
        left: 10.5%
    }

    .btsGlimpse .right.navButton {
        left: 82%
    }
}

@media (max-width: 992px) {
    .btsGlimpse .eventFPSGlimpseGlimpseContainer {
        margin:30px 0
    }

    .btsGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 57%;
        height: 3.5px;
        margin-top: 36%
    }

    .btsGlimpse .imageContainer {
        gap: 16px;
        flex-wrap: nowrap;
        justify-content: center
    }

    .btsGlimpse .image {
        height: 380px;
        transition: transform .5s ease-in-out,opacity .5s ease-in-out
    }

    .btsGlimpse .image img {
        object-fit: cover
    }

    .btsGlimpse .center {
        width: 58%;
        height: 360px;
        margin-bottom: 16px;
        opacity: 1;
        transform: scale(1)
    }

    .btsGlimpse .left,.btsGlimpse .right {
        width: calc((42% - 16px)/2);
        opacity: .5;
        transform: scale(.7)
    }

    .btsGlimpse .navButton img {
        width: 30px;
        height: 30px
    }

    .btsGlimpse .left.navButton {
        left: 9%;
        opacity: 1
    }

    .btsGlimpse .right.navButton {
        left: 83%;
        opacity: 1
    }
}

@media (max-width: 480px) {
    .btsGlimpse {
        padding:0% 1% 0
    }

    .btsGlimpse .eventFPSGlimpseGlimpseContainer {
        width: 100%;
        margin: 40px 0
    }

    .btsGlimpse .eventFPSGlimpseGlimpseContainer .redline {
        width: 72%;
        height: 3px;
        margin-top: 44%
    }

    .btsGlimpse .imageContainer {
        width: 100%;
        flex-direction: row;
        gap: 0
    }

    .btsGlimpse .image img,.btsGlimpse .center,.btsGlimpse .left,.btsGlimpse .right {
        width: 260px;
        height: 163px
    }

    .btsGlimpse .navButton {
        top: 32%
    }

    .btsGlimpse .navButton img {
        width: 18px;
        height: 18px
    }

    .btsGlimpse .left.navButton {
        left: -2%
    }

    .btsGlimpse .right.navButton {
        left: 80%
    }
}

.btsBenefits .heading {
    width: 65%;
    font-weight: 600
}

.btsBenefits .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.btsBenefits .E100Container .Event100 {
    width: 100%;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.btsBenefits .E100Container .Event100:hover {
    background-color: #bc2329
}

.btsBenefits .E100Container .Event100 .image {
    width: 80px;
    height: 80px
}

.btsBenefits .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.btsBenefits .E100Container .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.btsBenefits .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.btsBenefits .E100Container .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.btsBenefits .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.btsBenefits .E100Container .Event100:nth-child(5) {
    grid-column: span 3;
    width: 32%
}

.btsBenefits .E100Container .Event100:nth-child(5) {
    justify-self: right;
    margin-right: 190px
}

.btsBenefits .EventFPScroller {
    display: none
}

@media (max-width: 1536px) {
    .btsBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .btsBenefits .E100Container {
        padding: 35px 3.5%;
        gap: 18px
    }

    .btsBenefits .E100Container .Event100 {
        height: 300px;
        padding: 18px;
        gap: 18px
    }

    .btsBenefits .E100Container .Event100 .image {
        width: 75px;
        height: 75px
    }

    .btsBenefits .E100Container .Event100 .title {
        font-size: 22px
    }

    .btsBenefits .E100Container .Event100 .desc p {
        font-size: 17px
    }

    .btsBenefits .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .btsBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 32%
    }

    .btsBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right;
        margin-right: 160px
    }

    .btsBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .btsBenefits .heading {
        width:72%;
        font-size: 48px
    }

    .btsBenefits .E100Container {
        padding: 30px 3%;
        gap: 16px
    }

    .btsBenefits .E100Container .Event100 {
        height: 280px;
        padding: 16px;
        gap: 16px
    }

    .btsBenefits .E100Container .Event100 .image {
        width: 70px;
        height: 70px
    }

    .btsBenefits .E100Container .Event100 .title {
        font-size: 20px
    }

    .btsBenefits .E100Container .Event100 .desc p {
        font-size: 16px
    }

    .btsBenefits .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .btsBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 34%;
        justify-self: right;
        margin-right: 120px
    }
}

@media (max-width: 1280px) {
    .btsBenefits .heading {
        width:90%;
        font-size: 42px
    }

    .btsBenefits .E100Container {
        grid-template-columns: repeat(4,1fr);
        padding: 25px 5%;
        gap: 20px
    }

    .btsBenefits .E100Container .Event100 {
        height: auto;
        padding: 16px;
        gap: 14px
    }

    .btsBenefits .E100Container .Event100 .image {
        width: 65px;
        height: 65px
    }

    .btsBenefits .E100Container .Event100 .title {
        font-size: 20px
    }

    .btsBenefits .E100Container .Event100 .desc p {
        font-size: 15px
    }

    .btsBenefits .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .btsBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 2;
        width: 100%;
        justify-self: center;
        margin-right: 0
    }
}

@media (max-width: 992px) {
    .btsBenefits .heading {
        width:100%;
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px
    }

    .btsBenefits .E100Container {
        padding: 20px 5%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 16px
    }

    .btsBenefits .E100Container .Event100 {
        height: auto;
        padding: 14px;
        background-color: #0f0f0f;
        gap: 12px
    }

    .btsBenefits .E100Container .Event100 .image {
        width: 50px;
        height: 50px
    }

    .btsBenefits .E100Container .Event100 .title {
        font-size: 18px;
        font-weight: 600
    }

    .btsBenefits .E100Container .Event100 .desc p {
        font-size: 14px;
        font-weight: 500
    }

    .btsBenefits .E100Container .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .btsBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 2;
        width: 100%;
        justify-self: center;
        margin-right: 0
    }

    .btsBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 480px) {
    .btsBenefits {
        padding:1% 3% 5%
    }

    .btsBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .btsBenefits .E100Container {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .btsBenefits .E100Container::-webkit-scrollbar {
        display: none
    }

    .btsBenefits .E100Container .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .btsBenefits .E100Container .Event100 .image {
        width: 40px;
        height: 40px
    }

    .btsBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .btsBenefits .E100Container .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .btsBenefits .E100Container .Event100:nth-child(5) {
        margin-right: 0
    }

    .btsBenefits .EventFPScroller {
        display: block;
        padding: 0 0 20px
    }
}

.btsPast .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    padding-top: 14vh
}

.btsPast .cards .card {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.5);
    background: #0f0f0f;
    color: #fff;
    width: 421px;
    height: 245px;
    padding: 20px;
    position: relative;
    text-align: center
}

.btsPast .cards .card .image-container {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden
}

.btsPast .cards .card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.btsPast .cards .card .name {
    margin-top: 50px;
    font-weight: 600;
    font-size: 20px;
    color: #bc2329
}

.btsPast .cards .card .position {
    font-size: 14px;
    color: #fff;
    margin: 10px 0;
    font-weight: 400
}

.btsPast .cards .card .description {
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    font-weight: 500
}

@media (max-width: 1536px) {
    .btsPast .cards {
        gap:60px;
        padding-top: 10vh
    }

    .btsPast .cards .card {
        width: 360px;
        height: 220px;
        padding: 16px
    }

    .btsPast .cards .card .image-container {
        top: -35px;
        width: 70px;
        height: 70px
    }

    .btsPast .cards .card .name {
        margin-top: 45px;
        font-size: 18px
    }

    .btsPast .cards .card .position {
        font-size: 13px;
        margin: 8px 0
    }

    .btsPast .cards .card .description {
        margin: 16px 0;
        font-size: 14px
    }
}

@media (max-width: 1440px) {
    .btsPast .cards {
        gap:50px;
        padding-top: 9vh
    }

    .btsPast .cards .card {
        width: 340px;
        height: 210px;
        padding: 14px
    }

    .btsPast .cards .card .image-container {
        top: -33px;
        width: 65px;
        height: 65px
    }

    .btsPast .cards .card .name {
        margin-top: 42px;
        font-size: 17px
    }

    .btsPast .cards .card .position {
        font-size: 13px;
        margin: 7px 0
    }

    .btsPast .cards .card .description {
        margin: 14px 0;
        font-size: 13.5px
    }
}

@media (max-width: 1280px) {
    .btsPast .cards {
        gap:40px;
        padding-top: 8vh
    }

    .btsPast .cards .card {
        width: 320px;
        height: 200px;
        padding: 12px
    }

    .btsPast .cards .card .image-container {
        top: -30px;
        width: 60px;
        height: 60px
    }

    .btsPast .cards .card .name {
        margin-top: 40px;
        font-size: 16px
    }

    .btsPast .cards .card .position {
        font-size: 12.5px;
        margin: 6px 0
    }

    .btsPast .cards .card .description {
        margin: 12px 0;
        font-size: 13px
    }
}

@media (max-width: 992px) {
    .btsPast .cards {
        gap:30px;
        padding-top: 6vh;
        justify-content: center
    }

    .btsPast .cards .card {
        width: 280px;
        height: auto;
        padding: 12px 16px
    }

    .btsPast .cards .card .image-container {
        top: -25px;
        width: 55px;
        height: 55px
    }

    .btsPast .cards .card .name {
        margin-top: 35px;
        font-size: 15px;
        font-weight: 600;
        color: #bc2329
    }

    .btsPast .cards .card .position {
        font-size: 12px;
        margin: 6px 0;
        font-weight: 400;
        color: #fff
    }

    .btsPast .cards .card .description {
        margin: 10px 0;
        font-size: 12.5px;
        line-height: 1.3;
        font-weight: 500;
        color: #fff
    }
}

@media (max-width: 480px) {
    .btsPast {
        padding:2vh 0 4vh
    }

    .btsPast .heading {
        font-size: 24px
    }

    .btsPast .cards {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding-top: 8vh
    }

    .btsPast .cards .card {
        width: 90vw;
        height: auto;
        padding: 16px
    }

    .btsPast .cards .card .image-container {
        top: -30px;
        width: 60px;
        height: 60px
    }

    .btsPast .cards .card .name {
        margin-top: 40px;
        font-size: 16px
    }

    .btsPast .cards .card .position {
        font-size: 12px;
        margin: 8px 0
    }

    .btsPast .cards .card .description {
        margin: 16px 0;
        font-size: 14px
    }
}

.LocateACentreSingleHero {
    display: flex;
    padding: 0;
    height: max-content
}

.LocateACentreSingleHero .left {
    width: 65%;
    height: auto
}

.LocateACentreSingleHero .left img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.LocateACentreSingleHero .right {
    width: 35%;
    padding: 22px 40px;
    background-color: #821131
}

.LocateACentreSingleHero .right .enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.LocateACentreSingleHero .right .enquiry-form label {
    color: var(--WHITE-COLOR, #fff);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LocateACentreSingleHero .right .enquiry-form .privacy-label {
    padding-left: 10px
}

.LocateACentreSingleHero .right .enquiry-form input,.LocateACentreSingleHero .right .enquiry-form select {
    width: 80%;
    color: #fffc;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 15px 20px;
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.4)
}

.LocateACentreSingleHero .right .enquiry-form input::placeholder,.LocateACentreSingleHero .right .enquiry-form select::placeholder {
    color: #f3f3f3;
    opacity: 1
}

.LocateACentreSingleHero .right .enquiry-form select {
    width: 80%;
    background: transparent;
    color: #fff
}

.LocateACentreSingleHero .right .enquiry-form option {
    background-color: #821131
}

.LocateACentreSingleHero .right .enquiry-form .animated-button {
    width: 50%
}

@media (max-width: 480px) {
    .LocateACentreSingleHero {
        flex-direction:column-reverse
    }

    .LocateACentreSingleHero .left,.LocateACentreSingleHero .right {
        width: 100%
    }

    .LocateACentreSingleHero .right {
        padding: 20px
    }

    .LocateACentreSingleHero .right .enquiry-form input,.LocateACentreSingleHero .right .enquiry-form select,.LocateACentreSingleHero .right .enquiry-form .animated-button {
        width: 100%
    }

    .LocateACentreSingleHero .left img {
        height: auto
    }
}

.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
}

.LacSingleCard {
    display: flex;
    height: 494px
}

.LacSingleCard .left {
    height: 100%;
    width: 65%
}

.LacSingleCard .left .card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    width: 100%;
    background-color: #770006;
    border-radius: 10px 0 0 10px;
    padding: 20px 40px
}

.LacSingleCard .left .card .top {
    display: flex;
    justify-content: space-between
}

.LacSingleCard .left .card .top .name {
    color: var(--BLACK-PRIMARY-COLOR, #fff);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.LacSingleCard .left .card .top .image {
    width: 27.5px;
    height: 35px;
    cursor: pointer
}

.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;
    color: var(--BLACK-PRIMARY-COLOR, #fff);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.LacSingleCard .left .card .mid .address,.LacSingleCard .left .card .mid .phone {
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer
}

.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(--RED-PRIMAEY-COLOR, #fabc3f);
    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(--RED-PRIMAEY-COLOR, #fabc3f);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LacSingleCard .left .card .laccardButton .animated-button {
    color: #000;
    border: 1px solid #fabc3f;
    background-color: #fabc3f;
    transition: none
}

.LacSingleCard .right {
    width: 35%;
    height: 100%
}

.LacSingleCard .right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 480px) {
    .LacSingleCard {
        flex-direction:column;
        height: auto
    }

    .LacSingleCard .left,.LacSingleCard .right {
        width: 100%;
        height: auto
    }

    .LacSingleCard .left .card {
        border-radius: 10px;
        padding: 20px;
        gap: 16px
    }

    .LacSingleCard .left .card .top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .LacSingleCard .left .card .top .name {
        font-size: 24px
    }

    .LacSingleCard .left .card .top .image {
        width: 24px;
        height: 30px
    }

    .LacSingleCard .left .card .mid p,.LacSingleCard .left .card .mid .address,.LacSingleCard .left .card .mid .phone {
        font-size: 16px
    }

    .LacSingleCard .left .card .logos {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .LacSingleCard .left .card .logos .sms,.LacSingleCard .left .card .logos .form {
        width: 100%
    }

    .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: 18px;
        width: 100%
    }

    .LacSingleCard .left .card .laccardButton .animated-button {
        width: 100%;
        font-size: 16px
    }

    .LacSingleCard .right img {
        height: auto
    }
}

.LACAbout {
    display: flex;
    flex-direction: row-reverse;
    gap: 80px;
    align-items: center;
    justify-content: space-between
}

.LACAbout .left {
    width: 48%
}

.LACAbout .left p {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px
}

.LACAbout .left p span {
    color: #f0af13
}

.LACAbout .right {
    padding-left: 60px;
    width: 48%;
    display: flex;
    justify-content: center;
    position: relative
}

.LACAbout .right .image-container {
    position: relative;
    display: inline-block
}

.LACAbout .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.LACAbout .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.LACAbout .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .LACAbout .left {
        width:45%
    }

    .LACAbout .left p {
        font-size: 20px;
        padding-bottom: 16px
    }

    .LACAbout .right {
        padding-left: 0;
        width: 50%
    }

    .LACAbout .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .LACAbout .right .image-container .play-button {
        top: 42%;
        left: 42%
    }

    .LACAbout .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .LACAbout .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .LACAbout {
        gap:60px
    }

    .LACAbout .left {
        width: 46%
    }

    .LACAbout .left p {
        font-size: 18px;
        padding-bottom: 14px
    }

    .LACAbout .right {
        width: 50%;
        padding-left: 0
    }

    .LACAbout .right .image-container .sb-image {
        width: 580px;
        height: 400px
    }

    .LACAbout .right .image-container .top-border {
        top: -8px;
        left: -12px
    }

    .LACAbout .right .image-container .bottom-border {
        bottom: -8px;
        right: -12px
    }
}

@media (max-width: 1280px) {
    .LACAbout {
        gap:40px
    }

    .LACAbout .left,.LACAbout .right {
        width: 100%
    }

    .LACAbout .left p {
        font-size: 16px;
        padding-bottom: 12px
    }

    .LACAbout .right .image-container .sb-image {
        width: 100%;
        height: auto;
        max-width: 500px
    }

    .LACAbout .right .image-container .top-border {
        top: -6px;
        left: -10px
    }

    .LACAbout .right .image-container .bottom-border {
        bottom: -6px;
        right: -10px
    }
}

@media (max-width: 480px) {
    .LACAbout {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .LACAbout .left {
        width: 100%
    }

    .LACAbout .left .heading {
        font-size: 20px;
        padding-bottom: 12px
    }

    .LACAbout .left p {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 15px
    }

    .LACAbout .right {
        width: 100%;
        padding-left: 0;
        display: flex;
        justify-content: center
    }

    .LACAbout .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .LACAbout .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .LACAbout .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .LACAbout .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .LACAbout .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .LACAbout .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.LACSingleEvents {
    display: flex;
    flex-direction: column
}

.LACSingleEvents .cardsContainer {
    display: flex;
    overflow: scroll
}

.LACSingleEvents .cardsContainer::-webkit-scrollbar {
    display: none
}

.LACSingleEvents .cardsContainer .card {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    padding: 60px 120px;
    position: relative
}

.LACSingleEvents .cardsContainer .card .left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%
}

.LACSingleEvents .cardsContainer .card .left .icon {
    width: max-content;
    height: 75px;
    object-fit: cover
}

.LACSingleEvents .cardsContainer .card .left .icon img {
    width: 100%;
    height: 100%
}

.LACSingleEvents .cardsContainer .card .left .heading {
    width: 75%;
    color: #fff;
    font-size: 40px;
    font-weight: 700
}

.LACSingleEvents .cardsContainer .card .left .desc {
    width: 75%;
    font-size: 20px;
    font-weight: 400
}

.LACSingleEvents .cardsContainer .card .left .cardButton {
    padding: 30px 0
}

.LACSingleEvents .cardsContainer .card .right {
    flex: 1;
    position: relative
}

.LACSingleEvents .cardsContainer .card .right .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.LACSingleEvents .cardsContainer .card .right .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

.LACSingleEvents .cardsContainer .card .right .image {
    width: 100%;
    height: 100%;
    position: relative
}

.LACSingleEvents .cardsContainer .card .right .image img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.LACSingleEvents .cardsContainer .card .right .image .play-button {
    position: absolute;
    top: 40%;
    left: 45%;
    cursor: pointer
}

.LACSingleEvents .cardsContainer .card .right .image .play-button img {
    pointer-events: none
}

.LACSingleEvents .cardsContainer .card .right .image .mobile-button {
    position: absolute;
    width: 40px!important;
    top: 40%;
    left: 45%;
    cursor: pointer;
    height: 40px;
    opacity: 0
}

.LACSingleEvents .cardsContainer .card .right .image .video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.LACSingleEvents .cardsContainer .card .right .image .video-container iframe {
    width: 50%;
    height: 500px;
    border-radius: 10px
}

.LACSingleEvents .cardsContainer .card .right .image .close-button {
    position: absolute;
    top: 20%;
    right: 23%;
    background: #bc2329;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 50%;
    transition: .3s
}

.LACSingleEvents .cardsContainer .card .right .image .close-button:hover {
    background: #821131
}

@media (max-width: 1536px) {
    .LACSingleEvents .cardsContainer .card {
        padding:40px 80px
    }

    .LACSingleEvents .cardsContainer .card .left .heading {
        font-size: 30px
    }

    .LACSingleEvents .cardsContainer .card .left .desc {
        font-size: 18px
    }

    .LACSingleEvents .cardsContainer .card .left .cardButton {
        padding: 20px 0
    }

    .LACSingleEvents .cardsContainer .card .right .image .play-button {
        top: 38%;
        left: 43%
    }

    .LACSingleEvents .cardsContainer .card .right .image .mobile-button {
        top: 38%;
        left: 43%;
        opacity: 1
    }

    .LACSingleEvents .cardsContainer .card .right .image .video-container iframe {
        width: 60%;
        height: 450px
    }

    .LACSingleEvents .cardsContainer .card .right .image .close-button {
        top: 15%;
        right: 20%
    }
}

@media (max-width: 1440px) {
    .LACSingleEvents .cardsContainer .card {
        padding:35px 60px
    }

    .LACSingleEvents .cardsContainer .card .left .heading {
        font-size: 28px
    }

    .LACSingleEvents .cardsContainer .card .left .desc {
        font-size: 16px
    }

    .LACSingleEvents .cardsContainer .card .left .cardButton {
        padding: 15px 0
    }

    .LACSingleEvents .cardsContainer .card .right .image .play-button {
        top: 35%;
        left: 42%
    }

    .LACSingleEvents .cardsContainer .card .right .image .mobile-button {
        top: 35%;
        left: 42%;
        opacity: 1
    }

    .LACSingleEvents .cardsContainer .card .right .image .video-container iframe {
        width: 65%;
        height: 450px
    }

    .LACSingleEvents .cardsContainer .card .right .image .close-button {
        top: 15%;
        right: 17%
    }
}

@media (max-width: 480px) {
    .LACSingleEvents .cardsContainer {
        flex-direction:row;
        padding: 0;
        overflow-x: auto
    }

    .LACSingleEvents .cardsContainer .card {
        flex-direction: column;
        padding: 20px 10px;
        gap: 20px;
        max-height: 450px
    }

    .LACSingleEvents .cardsContainer .card .left {
        width: 100%;
        align-items: center;
        text-align: center
    }

    .LACSingleEvents .cardsContainer .card .left .icon {
        height: 60px
    }

    .LACSingleEvents .cardsContainer .card .left .heading {
        width: 100%;
        font-size: 24px
    }

    .LACSingleEvents .cardsContainer .card .left .desc {
        width: 100%;
        font-size: 16px
    }

    .LACSingleEvents .cardsContainer .card .left .cardButton {
        padding: 20px 0
    }

    .LACSingleEvents .cardsContainer .card .right {
        width: 100%
    }

    .LACSingleEvents .cardsContainer .card .right .top-border,.LACSingleEvents .cardsContainer .card .right .bottom-border {
        display: none
    }

    .LACSingleEvents .cardsContainer .card .right .image {
        width: 100%;
        height: auto
    }

    .LACSingleEvents .cardsContainer .card .right .image .play-button {
        top: 45%;
        left: 45%;
        width: 40px
    }

    .LACSingleEvents .cardsContainer .card .right .image .mobile-button {
        top: 45%;
        left: 45%;
        opacity: 0
    }

    .LACSingleEvents .cardsContainer .card .right .image .video-container iframe {
        width: 90%;
        height: 250px
    }

    .LACSingleEvents .cardsContainer .card .right .image .close-button {
        top: 35%;
        right: 2%;
        font-size: 16px;
        padding: 6px 10px
    }
}

.LACCourses {
    display: flex;
    gap: 20px;
    flex-direction: column
}

.LACCourses .heading {
    text-align: center
}

.LACCourses .title {
    width: 55%;
    margin: auto;
    text-align: center
}

.LACCourses .coursesContainer {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5%;
    row-gap: 62px
}

.LACCourses .coursesContainer .card {
    padding: 1.5%;
    border-radius: 10px;
    border: 1px solid rgba(250,188,63,.2);
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px 20px 25px 5px #df9d0236;
    display: flex;
    flex-direction: column;
    gap: 6%;
    width: 23%;
    height: 485px
}

.LACCourses .coursesContainer .card .image {
    width: 100%;
    height: 50%
}

.LACCourses .coursesContainer .card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.LACCourses .coursesContainer .card .ctitle {
    text-align: center;
    color: #f0af13;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACCourses .coursesContainer .card cdesc {
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACCourses .animated-button {
    margin: 30px auto 0
}

@media (max-width: 1536px) {
    .LACCourses .title {
        width:60%
    }

    .LACCourses .coursesContainer {
        gap: 2%;
        row-gap: 50px
    }

    .LACCourses .coursesContainer .card {
        width: 26%;
        height: 460px
    }

    .LACCourses .coursesContainer .card .ctitle {
        font-size: 22px
    }

    .LACCourses .coursesContainer .card cdesc {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .LACCourses .title {
        width:70%
    }

    .LACCourses .coursesContainer {
        gap: 2%;
        row-gap: 45px
    }

    .LACCourses .coursesContainer .card {
        width: 28%;
        height: 430px
    }

    .LACCourses .coursesContainer .card .ctitle {
        font-size: 20px
    }

    .LACCourses .coursesContainer .card cdesc {
        font-size: 17px
    }
}

@media (max-width: 480px) {
    .LACCourses {
        gap:16px
    }

    .LACCourses .title {
        width: 90%;
        font-size: 16px
    }

    .LACCourses .coursesContainer {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        row-gap: 30px
    }

    .LACCourses .coursesContainer .card {
        width: 90%;
        height: auto;
        padding: 16px;
        gap: 20px
    }

    .LACCourses .coursesContainer .card .image {
        height: 200px
    }

    .LACCourses .coursesContainer .card .ctitle {
        font-size: 20px
    }

    .LACCourses .coursesContainer .card cdesc {
        font-size: 16px
    }

    .LACCourses .animated-button {
        width: 80%;
        font-size: 16px
    }
}

.LACSingleVideoHero .testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.LACSingleVideoHero .testimonials-section .testimonials-title {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
    margin-top: 100px
}

.LACSingleVideoHero .testimonials-section .testimonials-sub-title {
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 100px
}

.LACSingleVideoHero .testimonials-section .stories-container {
    padding: 5% 0 2%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(500px,1fr));
    justify-items: center;
    align-items: center
}

.LACSingleVideoHero .testimonials-section .stories-container .story {
    background-color: #0f0f0f;
    position: relative;
    min-width: 33%;
    height: 600px;
    display: flex;
    padding: 4% 2%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.5);
    text-align: center;
    align-items: stretch;
    margin: 8%
}

.LACSingleVideoHero .testimonials-section .stories-container .story .qopen {
    position: absolute;
    top: 3%;
    left: 3%
}

.LACSingleVideoHero .testimonials-section .stories-container .story .qopen img {
    width: 60px;
    height: 60px
}

.LACSingleVideoHero .testimonials-section .stories-container .story .qclose {
    bottom: 3%;
    right: 3%;
    position: absolute
}

.LACSingleVideoHero .testimonials-section .stories-container .story .qclose img {
    width: 60px;
    height: 60px
}

.LACSingleVideoHero .testimonials-section .stories-container .story .image {
    width: 25%;
    position: absolute;
    top: -10%;
    left: 41%
}

.LACSingleVideoHero .testimonials-section .stories-container .story .image img {
    height: 100%;
    width: 100%
}

.LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .top {
    width: 100%;
    margin-top: 102px;
    margin-left: auto;
    margin-right: auto
}

.LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .middle {
    width: 100%;
    margin-top: 20px
}

.LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .bottom {
    width: 100%;
    margin-top: 30px
}

.LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .name {
    color: #bc2329;
    font-size: 20px;
    padding: 4% 16% 0;
    font-weight: 600
}

.LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .desc {
    font-family: Raleway,sans-serif;
    padding: 0 16%;
    font-size: 16px
}

.LACSingleVideoHero .testimonials-section .video-stories-container {
    display: flex;
    width: 100%;
    overflow: scroll;
    position: relative
}

.LACSingleVideoHero .testimonials-section .video-stories-container::-webkit-scrollbar {
    display: none
}

@media (max-width: 1536px) {
    .LACSingleVideoHero .testimonials-section .testimonials-title {
        font-size:48px;
        margin-top: 60px
    }

    .LACSingleVideoHero .testimonials-section .testimonials-sub-title {
        font-size: 20px;
        margin-bottom: 60px
    }

    .LACSingleVideoHero .testimonials-section .stories-container {
        grid-template-columns: repeat(auto-fit,minmax(450px,1fr));
        padding: 3% 0 1%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story {
        min-width: 45%;
        height: 500px;
        margin: 6%;
        padding: 4% 3%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .image {
        width: 30%;
        left: 35%;
        top: -8%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 90px
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 4% 12%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 12%
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto
    }
}

@media (max-width: 1440px) {
    .LACSingleVideoHero .testimonials-section .testimonials-title {
        font-size:42px;
        margin-top: 50px
    }

    .LACSingleVideoHero .testimonials-section .testimonials-sub-title {
        font-size: 18px;
        margin-bottom: 50px
    }

    .LACSingleVideoHero .testimonials-section .stories-container {
        grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
        padding: 2% 0
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story {
        min-width: 40%;
        height: 450px;
        margin: 5%;
        padding: 3% 2%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .image {
        width: 30%;
        left: 35%;
        top: -8%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 80px
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 16px;
        padding: 4% 12%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 12%
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto
    }
}

@media (max-width: 1280px) {
    .LACSingleVideoHero .testimonials-section .testimonials-title {
        font-size:38px;
        margin-top: 40px
    }

    .LACSingleVideoHero .testimonials-section .testimonials-sub-title {
        font-size: 16px;
        margin-bottom: 40px
    }

    .LACSingleVideoHero .testimonials-section .stories-container {
        grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
        padding: 2% 0
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story {
        min-width: 35%;
        height: 400px;
        margin: 4%;
        padding: 3% 2%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .image {
        width: 35%;
        left: 32%;
        top: -5%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 75px
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 16px;
        padding: 4% 10%
    }

    .LACSingleVideoHero .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 10%
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto
    }
}

@media (max-width: 480px) {
    .LACSingleVideoHero {
        max-width:100%;
        padding: 0 16px;
        margin-bottom: 6vh
    }

    .LACSingleVideoHero .testimonials-section .testimonials-title {
        font-size: 32px;
        margin-top: 60px
    }

    .LACSingleVideoHero .testimonials-section .testimonials-sub-title {
        font-size: 18px;
        margin-bottom: 40px
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container {
        flex-direction: row;
        gap: 40px
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container .video-testimonial-story {
        flex-direction: column;
        padding: 20px 0;
        height: 500px;
        min-width: 90vw
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container .video-testimonial-story .left {
        padding: 2rem 1rem;
        width: 100%;
        height: max-content
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container .video-testimonial-story .left h1 {
        font-size: 20px;
        width: 100%
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container .video-testimonial-story .left p {
        font-size: 14px;
        width: 100%
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container .video-testimonial-story .right {
        margin-top: 40px;
        background-size: cover;
        background-position: center;
        height: 250px;
        right: 0;
        top: 40%;
        width: 100%
    }

    .LACSingleVideoHero .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton img {
        width: 40px;
        height: 40px
    }
}

.LACSingleCenterEvent {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column
}

.LACSingleCenterEvent .desc {
    width: 55%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleCenterEvent .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px
}

.LACSingleCenterEvent .bottom .left {
    width: 48%;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.LACSingleCenterEvent .bottom .left p {
    margin-top: 35px;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.LACSingleCenterEvent .bottom .left p span {
    color: #f0af13
}

.LACSingleCenterEvent .bottom .right {
    padding-left: 60px;
    width: 48%;
    display: flex;
    justify-content: center;
    position: relative
}

.LACSingleCenterEvent .bottom .right .image-container {
    position: relative;
    display: inline-block
}

.LACSingleCenterEvent .bottom .right .image-container .sb-image {
    width: 731.546px;
    height: 494px
}

.LACSingleCenterEvent .bottom .right .image-container .top-border {
    position: absolute;
    top: -15px;
    left: -20px
}

.LACSingleCenterEvent .bottom .right .image-container .bottom-border {
    position: absolute;
    bottom: -15px;
    right: -20px
}

@media (max-width: 1536px) {
    .LACSingleCenterEvent {
        gap:0
    }

    .LACSingleCenterEvent .desc {
        font-size: 20px;
        width: 60%
    }

    .LACSingleCenterEvent .bottom {
        margin-top: 5%;
        gap: 60px
    }

    .LACSingleCenterEvent .bottom .left {
        font-size: 30px
    }

    .LACSingleCenterEvent .bottom .left p {
        font-size: 18px
    }

    .LACSingleCenterEvent .bottom .right {
        padding-left: 40px
    }

    .LACSingleCenterEvent .bottom .right .image-container .sb-image {
        width: 650px;
        height: 440px
    }

    .LACSingleCenterEvent .bottom .right .image-container .top-border {
        top: -10px;
        left: -15px
    }

    .LACSingleCenterEvent .bottom .right .image-container .bottom-border {
        bottom: -10px;
        right: -15px
    }
}

@media (max-width: 1440px) {
    .LACSingleCenterEvent .desc {
        font-size:22px;
        width: 60%
    }

    .LACSingleCenterEvent .bottom {
        gap: 40px
    }

    .LACSingleCenterEvent .bottom .left {
        width: 48%;
        font-size: 30px
    }

    .LACSingleCenterEvent .bottom .left p {
        font-size: 18px;
        margin-top: 30px
    }

    .LACSingleCenterEvent .bottom .right {
        width: 52%
    }

    .LACSingleCenterEvent .bottom .right .image-container .sb-image {
        width: 600px;
        height: 400px
    }

    .LACSingleCenterEvent .bottom .right .image-container .play-button {
        top: 40%;
        left: 40%
    }

    .LACSingleCenterEvent .bottom .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .LACSingleCenterEvent .bottom .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }
}

@media (max-width: 1280px) {
    .LACSingleCenterEvent .desc {
        font-size:20px;
        width: 70%
    }

    .LACSingleCenterEvent .bottom {
        gap: 30px
    }

    .LACSingleCenterEvent .bottom .left {
        width: 100%;
        font-size: 26px
    }

    .LACSingleCenterEvent .bottom .left p {
        font-size: 16px;
        margin-top: 20px
    }

    .LACSingleCenterEvent .bottom .right {
        width: 100%;
        padding-left: 0
    }

    .LACSingleCenterEvent .bottom .right .image-container .sb-image {
        width: 500px;
        height: 350px
    }

    .LACSingleCenterEvent .bottom .right .image-container .play-button {
        top: 38%;
        left: 38%
    }

    .LACSingleCenterEvent .bottom .right .image-container .top-border {
        top: -5px;
        left: -10px
    }

    .LACSingleCenterEvent .bottom .right .image-container .bottom-border {
        bottom: -5px;
        right: -10px
    }
}

@media (max-width: 480px) {
    .LACSingleCenterEvent {
        flex-direction:column;
        text-align: left;
        padding: 20px 16px
    }

    .LACSingleCenterEvent .heading {
        font-size: 28px
    }

    .LACSingleCenterEvent .desc {
        width: 100%
    }

    .LACSingleCenterEvent .bottom {
        flex-direction: column-reverse
    }

    .LACSingleCenterEvent .bottom .left {
        width: 100%
    }

    .LACSingleCenterEvent .bottom .left h1 {
        font-size: 24px
    }

    .LACSingleCenterEvent .bottom .left .heading {
        font-size: 24px;
        padding-bottom: 12px
    }

    .LACSingleCenterEvent .bottom .left p {
        width: 100%;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: 10px
    }

    .LACSingleCenterEvent .bottom .right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center
    }

    .LACSingleCenterEvent .bottom .right .image-container {
        width: 100%;
        max-width: 350px
    }

    .LACSingleCenterEvent .bottom .right .image-container .sb-image {
        width: 100%;
        height: auto
    }

    .LACSingleCenterEvent .bottom .right .image-container .top-border {
        top: -10px;
        left: -10px
    }

    .LACSingleCenterEvent .bottom .right .image-container .top-border img {
        width: 100px;
        height: auto
    }

    .LACSingleCenterEvent .bottom .right .image-container .bottom-border {
        bottom: -10px;
        right: -10px
    }

    .LACSingleCenterEvent .bottom .right .image-container .bottom-border img {
        width: 100px;
        height: auto
    }
}

.lacHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #000000d9;
    padding: 28px 5.2%;
    height: max-content;
    width: 100%;
    justify-content: space-between;
    display: flex
}

.lacHeader .headerTitles {
    display: flex;
    align-items: center;
    gap: 40px
}

.lacHeader .headerTitles .links {
    cursor: pointer;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.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 .right {
    gap: 40px;
    align-items: center;
    justify-content: center;
    display: flex
}

.lacHeader .hamburger {
    display: none
}

@media (max-width: 1536px) {
    .lacHeader {
        padding:25px 4.5%
    }

    .lacHeader .headerTitles {
        gap: 30px
    }

    .lacHeader .headerTitles .links {
        font-size: 18px;
        gap: 15px
    }

    .lacHeader .right {
        gap: 30px
    }
}

@media (max-width: 1440px) {
    .lacHeader {
        padding:20px 4%
    }

    .lacHeader .headerTitles {
        gap: 20px
    }

    .lacHeader .headerTitles .links {
        font-size: 16px;
        gap: 12px
    }

    .lacHeader .right {
        gap: 20px
    }
}

@media (max-width: 1280px) {
    .lacHeader {
        padding:15px 3.5%
    }

    .lacHeader .headerTitles {
        gap: 15px
    }

    .lacHeader .headerTitles .links {
        font-size: 14px;
        gap: 10px
    }

    .lacHeader .right {
        gap: 15px
    }
}

@media (max-width: 480px) {
    .lacHeader {
        flex-direction:row;
        align-items: center;
        justify-content: space-between;
        padding: 16px 5%
    }

    .lacHeader .headerTitles {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: #000000e6;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        display: none
    }

    .lacHeader .headerTitles.active {
        display: flex
    }

    .lacHeader .headerTitles .links {
        font-size: 18px
    }

    .lacHeader .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        cursor: pointer
    }

    .lacHeader .hamburger span {
        height: 3px;
        width: 25px;
        background: #fff;
        border-radius: 2px
    }
}

.disCTA {
    height: 136px;
    width: 100%;
    padding: 0;
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F)
}

.disCTA p {
    padding: 40px 350px;
    color: var(--BLACK-PRIMARY-COLOR, #000);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .disCTA {
        height:120px
    }

    .disCTA p {
        padding: 35px 250px;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .disCTA {
        height:110px
    }

    .disCTA p {
        padding: 32px 180px;
        font-size: 20px
    }
}

@media (max-width: 1280px) {
    .disCTA {
        height:100px
    }

    .disCTA p {
        padding: 28px 100px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .disCTA {
        height:auto;
        margin-top: 8%
    }

    .disCTA p {
        padding: 20px 16px;
        font-size: 16px;
        text-align: center
    }
}

.LACFooter {
    width: 100%
}

.LACFooter .top {
    background: #821131;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px
}

.LACFooter .top .logo {
    cursor: pointer
}

.LACFooter .top .socials {
    margin-top: 40px;
    display: flex;
    gap: .875rem
}

.LACFooter .top .socials a {
    color: #fff;
    font-size: 1.75rem;
    text-decoration: none
}

.LACFooter .top .socials a:hover {
    opacity: .8
}

.LACFooter .top .links {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Title-Medium-Line-Height, 24px);
    letter-spacing: var(--Title-Medium-Tracking, .15px)
}

.LACFooter .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-size: var(--Title-Medium-Size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Title-Medium-Line-Height, 24px);
    letter-spacing: var(--Title-Medium-Tracking, .15px);
    background: #c7253e
}

@media (max-width: 480px) {
    .LACFooter .top {
        padding:24px
    }

    .LACFooter .top .socials {
        margin-top: 24px;
        flex-wrap: wrap;
        justify-content: center
    }

    .LACFooter .top .links {
        flex-direction: column;
        gap: 12px;
        font-size: 16px
    }

    .LACFooter .bottom {
        padding: 16px;
        font-size: 14px;
        text-align: center
    }
}

.seHero {
    background: linear-gradient(0deg,#0009,#0009),url(../assets/seHero-BvRp2Omt.jpeg) #d3d3d3 50%/cover no-repeat;
    width: 100%;
    height: 75.5vh;
    display: flex;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.seHero h1 {
    font-size: 5vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase
}

.seHero p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 65%;
    padding-top: 4vh
}

@media (max-width: 1440px) {
    .seHero {
        background-size:cover;
        background-position: center;
        height: 70vh
    }

    .seHero h1 {
        font-size: 4.5vw
    }

    .seHero p {
        font-size: 1.3vw;
        width: 70%
    }
}

@media (max-width: 1280px) {
    .seHero {
        background-size:cover;
        background-position: center;
        height: 65vh
    }

    .seHero h1 {
        font-size: 5vw
    }

    .seHero p {
        font-size: 1.5vw;
        width: 75%
    }
}

@media (max-width: 992px) {
    .seHero {
        height:60vh;
        background-size: cover;
        background-position: center
    }

    .seHero h1 {
        font-size: 6vw
    }

    .seHero p {
        font-size: 1.8vw;
        width: 80%;
        padding-top: 3vh
    }
}

@media (max-width: 480px) {
    .seHero {
        height:230px
    }

    .seHero h1 {
        font-size: 20px
    }

    .seHero p {
        font-size: 16px;
        width: 90%;
        padding-top: 1vh
    }
}

.seJoin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.4% 8.25%;
    gap: 4vw
}

.seJoin .mgj-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
    padding-left: 5vw
}

.seJoin .mgj-left .heading {
    margin-bottom: .5vw
}

.seJoin .mgj-left .mgj-button {
    margin-top: 2vw
}

.seJoin .mgj-left .mgj-button .animated-button {
    padding: 0 3.4vw
}

.seJoin .mgjmobile-button {
    display: none
}

.seJoin .mgj-right {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center
}

.seJoin .mgj-right .mainImg-container {
    position: relative;
    display: inline-block
}

.seJoin .mgj-right .mainImg {
    width: 35.7vw;
    height: 27.2vw;
    display: block
}

.seJoin .mgj-right .mgjTop,.seJoin .mgj-right .mgjBottom {
    position: absolute;
    width: 8vw
}

.seJoin .mgj-right .mgjTop {
    top: -.6vw;
    left: 0
}

.seJoin .mgj-right .mgjBottom {
    bottom: -.5vw;
    right: 0
}

@media (max-width: 992px) {
    .seJoin {
        padding:4% 5%;
        gap: 3vw
    }

    .seJoin .mgj-left {
        width: 50%;
        padding-left: 3vw
    }

    .seJoin .mgj-left .heading {
        margin-bottom: 1vw
    }

    .seJoin .mgj-left .mgj-button {
        margin-top: 3vw
    }

    .seJoin .mgj-left .mgj-button .animated-button {
        padding: 0 2.5vw;
        font-size: .95rem
    }

    .seJoin .mgjmobile-button {
        display: none
    }
}

@media (max-width: 480px) {
    .seJoin {
        flex-direction:column;
        text-align: center;
        padding: 4%;
        gap: 4vw
    }

    .seJoin .mgj-right {
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .seJoin .mgj-right .mainImg {
        width: 323.269px;
        height: 246.731px
    }

    .seJoin .mgj-right .mainImg img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

    .seJoin .mgj-right .mgjTop,.seJoin .mgj-right .mgjBottom {
        position: absolute;
        width: 20vw
    }

    .seJoin .mgj-right .mgjTop {
        top: -2vw;
        left: 0
    }

    .seJoin .mgj-right .mgjBottom {
        bottom: -2vw;
        right: 0
    }

    .seJoin .mgjmobile-button {
        display: block;
        order: 4;
        padding-bottom: 5%
    }

    .seJoin .mgjmobile-button .animated-button {
        font-size: 14px;
        padding: 0 25vw
    }

    .seJoin .mgj-left {
        width: 100%;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        text-align: center
    }

    .seJoin .mgj-left .heading {
        font-size: 20px;
        margin-bottom: 2vw
    }

    .seJoin .mgj-left .title {
        font-size: 4vw;
        line-height: 1.4;
        margin-bottom: 3vw
    }

    .seJoin .mgj-button {
        display: none
    }
}

.seCTA {
    background: url(../assets/seCTA-BvLBXfwB.jpeg) #d3d3d3 0px -323.578px/100% 238.835% no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4vh;
    height: 52vh;
    text-align: center
}

.seCTA h1 {
    width: 60%;
    font-size: 3vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.seCTA .placementCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff;
    padding: 0 3.6vw
}

.seCTA .placementCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .seCTA {
        background-size:cover;
        background-position: center
    }
}

@media (max-width: 1440px) {
    .seCTA {
        background-size:cover;
        background-position: center;
        height: 48vh;
        gap: 3.5vh
    }

    .seCTA h1 {
        width: 70%;
        font-size: 3.5vw
    }

    .seCTA .placementCTA-button .animated-button {
        padding: 0 3vw
    }

    .seCTA .placementCTA-button .btn-background {
        background-color: #fff
    }
}

@media (max-width: 1280px) {
    .seCTA {
        background-size:cover;
        background-position: center;
        height: 45vh;
        gap: 3vh
    }

    .seCTA h1 {
        width: 80%;
        font-size: 4vw
    }

    .seCTA .placementCTA-button .animated-button {
        padding: 0 2.5vw
    }

    .seCTA .placementCTA-button .btn-background {
        background-color: #fff
    }
}

@media (max-width: 992px) {
    .seCTA {
        background-size:cover;
        background-position: center;
        height: 42vh;
        gap: 2.5vh
    }

    .seCTA h1 {
        width: 85%;
        font-size: 3.5vw
    }

    .seCTA .placementCTA-button .animated-button {
        padding: 0 2.2vw;
        font-size: .95rem
    }

    .seCTA .placementCTA-button .btn-background {
        background-color: #fff
    }
}

@media (max-width: 480px) {
    .seCTA {
        background:linear-gradient(0deg,#00000080,#00000080),url(../assets/seCTA-BvLBXfwB.jpeg) #d3d3d3 -8.346px -104.4px/120.393% 195.985% no-repeat;
        height: 267px;
        gap: 3vh
    }

    .seCTA h1 {
        font-size: 20px;
        width: 100%
    }

    .seCTA .placementCTA-button .animated-button {
        padding: 0 10vw;
        font-size: 14px
    }
}

.error-page {
    min-height: 100vh;
    width: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    text-align: center
}

.error-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;
    font-family: Raleway,sans-serif;
    max-width: 600px;
    padding: 40px;
    border-radius: 16px;
    background-color: #000;
    box-shadow: 0 0 20px #8b000099,0 0 40px #b2222266,0 0 60px #ff69b44d
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    color: #fabc3f;
    margin: 0
}

.error-message {
    font-size: 2rem;
    font-weight: 600;
    margin: 0
}

.error-desc {
    font-size: 1rem;
    font-weight: 400;
    color: #d1d1d1;
    margin-bottom: 20px
}

.errorbutton .animated-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

.chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999
}

.chat-container .chat-icon {
    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: #fff;
    box-shadow: 0 4px 20px #0000004d;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.chat-container .chat-ui .chat-header {
    background: linear-gradient(196deg,#4c1021 12.53%,#821131 90.33%);
    color: #fff;
    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 p {
    margin: 0;
    font-size: .8rem
}

.chat-container .chat-ui .chat-header .chat-close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #fff
}

.chat-container .chat-ui .chat-header .chat-minimize {
    position: absolute;
    top: 0;
    right: 33px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #fff
}

.chat-container .chat-ui .chat-messages {
    flex: 1;
    padding: 15px;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: wrap;
    display: flex;
    flex-direction: column
}

.chat-container .chat-ui .chat-messages::-webkit-scrollbar {
    width: 4px;
    background-color: #ccc
}

.chat-container .chat-ui .chat-messages::-webkit-scrollbar-thumb {
    background-color: #821131
}

.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: #fff
}

.chat-container .chat-ui .chat-messages .message.bot {
    background: linear-gradient(94deg,#821131 -1.63%,#4c1021 98.91%);
    align-self: flex-start;
    border-bottom-left-radius: 0
}

.chat-container .chat-ui .chat-messages .message.user {
    background: linear-gradient(-94deg,#821131 -1.63%,#4c1021 98.91%);
    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: #fff
}

.chat-container .chat-ui .chat-input input {
    flex: 1;
    border: 1px solid #8d1131;
    border-radius: 20px;
    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 .chat-ui {
        width:25vw;
        height: 60vh
    }
}

@media (max-width: 1440px) {
    .chat-container .chat-ui {
        width:28vw;
        height: 60vh
    }
}

@media (max-width: 1280px) {
    .chat-container .chat-ui {
        width:24vw;
        height: 60vh
    }
}

@media (max-width: 992px) {
    .chat-container .chat-ui {
        width:38vw;
        height: 55vh;
        bottom: 0;
        right: 0vw
    }
}

@media (max-width: 480px) {
    .chat-container .chat-icon {
        width:100px
    }

    .chat-container .chat-ui {
        width: 300px;
        height: 400px
    }
}

.siteHero {
    background: linear-gradient(0deg,#0009,#0009),url(../assets/hero-zz-cEToI.jpeg) #d3d3d3 50%/cover no-repeat;
    width: 100%;
    height: 75.5vh;
    display: flex;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.siteHero h1 {
    font-size: 5vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase
}

.siteHero p {
    text-align: center;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 60%;
    padding-top: 4vh
}

@media (max-width: 1536px) {
    .siteHero {
        height:70vh
    }

    .siteHero h1 {
        font-size: 6vw
    }

    .siteHero p {
        font-size: 1.5vw;
        width: 65%;
        padding-top: 3vh
    }
}

@media (max-width: 1440px) {
    .siteHero {
        height:65vh
    }

    .siteHero h1 {
        font-size: 7vw
    }

    .siteHero p {
        font-size: 1.75vw;
        width: 70%;
        padding-top: 3vh
    }
}

@media (max-width: 1280px) {
    .siteHero {
        height:60vh
    }

    .siteHero h1 {
        font-size: 8vw
    }

    .siteHero p {
        font-size: 2vw;
        width: 75%;
        padding-top: 2vh
    }
}

@media (max-width: 992px) {
    .siteHero {
        height:55vh
    }

    .siteHero h1 {
        font-size: 6vw
    }

    .siteHero p {
        font-size: 1.8vw;
        width: 80%;
        padding-top: 2vh
    }
}

@media (max-width: 480px) {
    .siteHero {
        height:230px
    }

    .siteHero h1 {
        font-size: 20px
    }

    .siteHero p {
        font-size: 16px;
        width: 90%;
        padding-top: 1vh
    }
}

.siteSection .site-list {
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    list-style-type: circle;
    padding: 20px 20px 20px 10%
}

.siteSection .site-list li {
    font-size: 32px;
    margin: 10px 0;
    padding-bottom: 2%;
    position: relative
}

.siteSection .site-list li ul {
    list-style-type: square;
    margin-top: 5px;
    padding-left: 20px
}

.siteSection .site-list li ul li {
    margin-bottom: 5px
}

.siteSection .site-list li .box {
    background: #fbb03b;
    padding: 10px 15px;
    margin-top: 10px;
    margin-left: 5%;
    position: relative;
    border-radius: 4px;
    max-width: 530px
}

.siteSection .site-list li .box ul {
    list-style: disc;
    padding-left: 20px;
    color: #000
}

.siteSection .site-list li .box ul li {
    font-size: 24px
}

.siteSection .site-list li .box ul li a {
    color: #000
}

.siteSection .site-list li .box .arrow {
    position: absolute;
    top: 6%;
    left: 12%;
    transform: translateY(-50%)
}

.siteSection .site-list li .box .arrow2 {
    position: absolute;
    top: 24%;
    left: 32%;
    transform: translateY(-50%)
}

.siteSection .site-list li .box .arrow3 {
    position: absolute;
    top: 28%;
    left: 10%;
    transform: translateY(-50%)
}

@media (max-width: 1536px) {
    .siteSection .site-list {
        padding-left:8%
    }

    .siteSection .site-list li {
        font-size: 28px
    }

    .siteSection .site-list li .box {
        max-width: 480px
    }

    .siteSection .site-list li .box ul {
        font-size: 20px
    }

    .siteSection .site-list li .box .arrow {
        top: 6.5%;
        left: 12%
    }

    .siteSection .site-list li .box .arrow2 {
        top: 26%;
        left: 32%
    }

    .siteSection .site-list li .box .arrow3 {
        top: 30%;
        left: 8%
    }
}

@media (max-width: 1440px) {
    .siteSection .site-list {
        padding-left:6%
    }

    .siteSection .site-list li {
        font-size: 24px
    }

    .siteSection .site-list li .box {
        max-width: 450px
    }

    .siteSection .site-list li .box ul {
        font-size: 18px
    }

    .siteSection .site-list li .box .arrow {
        top: 6.7%;
        left: 10%
    }

    .siteSection .site-list li .box .arrow2 {
        top: 29%;
        left: 28%
    }

    .siteSection .site-list li .box .arrow3 {
        top: 32%;
        left: 8%
    }
}

@media (max-width: 1280px) {
    .siteSection .site-list {
        padding-left:5%
    }

    .siteSection .site-list li {
        font-size: 20px
    }

    .siteSection .site-list li .box {
        max-width: 420px
    }

    .siteSection .site-list li .box ul {
        font-size: 16px
    }

    .siteSection .site-list li .box .arrow {
        top: 7%;
        left: 8%
    }

    .siteSection .site-list li .box .arrow2 {
        top: 30%;
        left: 24%
    }

    .siteSection .site-list li .box .arrow3 {
        top: 32%;
        left: 5%
    }
}

@media (max-width: 992px) {
    .siteSection .site-list {
        padding-left:4%
    }

    .siteSection .site-list li {
        font-size: 18px
    }

    .siteSection .site-list li .box {
        max-width: 380px;
        padding: 8px 12px;
        margin-left: 4%
    }

    .siteSection .site-list li .box ul,.siteSection .site-list li .box ul li,.siteSection .site-list li .box ul li a {
        font-size: 14px
    }

    .siteSection .site-list li .box .arrow {
        top: 9.8%;
        left: 10%
    }

    .siteSection .site-list li .box .arrow2 {
        top: 40%;
        left: 30%
    }

    .siteSection .site-list li .box .arrow3 {
        top: 45%;
        left: 10%
    }
}

@media (max-width: 480px) {
    .siteSection .site-list {
        padding:15px 15px 15px 5%
    }

    .siteSection .site-list li {
        font-size: 20px;
        padding-bottom: 5%
    }

    .siteSection .site-list li .box {
        padding: 8px 10px;
        margin-left: 0;
        max-width: 100%
    }

    .siteSection .site-list li .box ul {
        padding-left: 15px
    }

    .siteSection .site-list li .box ul li {
        font-size: 16px;
        font-weight: 600
    }

    .siteSection .site-list li .box .arrow,.siteSection .site-list li .box .arrow2,.siteSection .site-list li .box .arrow3 {
        display: none
    }
}

.sbGenAIHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero.jpeg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.sbGenAIHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .sbGenAIHero {
        height:50vh
    }

    .sbGenAIHero h1 {
        font-size: 4vw
    }
}

@media (max-width: 480px) {
    .sbGenAIHero {
        height:233px
    }

    .sbGenAIHero h1 {
        font-size: 20px
    }
}

.thank-you-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    padding: 1rem
}

.thank-you-page .card {
    background: #fbc51d;
    padding: 2rem 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px #0000001a;
    text-align: center
}

.thank-you-page .card h1 {
    color: #821131;
    margin-bottom: 1rem
}

.thank-you-page .card p {
    margin: .5rem 0;
    font-size: 22px;
    font-weight: 500;
    color: #000
}

.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: #821131e7;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color .3s ease
}

.thank-you-page .card .buttons button:hover {
    background-color: #821131
}

@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
    }
}

.deadlineBenefits .heading {
    width: 65%;
    font-weight: 600
}

.deadlineBenefits .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.deadlineBenefits .E100Container .Event100 {
    width: 100%;
    padding: 20px;
    height: 345px;
    background-color: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    gap: 20px;
    transition: background-color .3s ease
}

.deadlineBenefits .E100Container .Event100:hover {
    background-color: #bc2329
}

.deadlineBenefits .E100Container .Event100 .image {
    width: 80px;
    height: 80px
}

.deadlineBenefits .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.deadlineBenefits .E100Container .Event100 .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.deadlineBenefits .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.deadlineBenefits .E100Container .Event100 .desc p {
    font-size: 18px;
    font-weight: 500
}

.deadlineBenefits .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.deadlineBenefits .E100Container .Event100:nth-child(5) {
    grid-column: span 3;
    width: 32%
}

.deadlineBenefits .E100Container .Event100:nth-child(5) {
    justify-self: right;
    margin-right: 190px
}

.deadlineBenefits .EventFPScroller {
    display: none
}

@media (max-width: 1536px) {
    .deadlineBenefits .heading {
        width:70%;
        font-size: 52px
    }

    .deadlineBenefits .E100Container {
        padding: 35px 3.5%;
        gap: 18px
    }

    .deadlineBenefits .E100Container .Event100 {
        height: 300px;
        padding: 18px;
        gap: 18px
    }

    .deadlineBenefits .E100Container .Event100 .image {
        width: 75px;
        height: 75px
    }

    .deadlineBenefits .E100Container .Event100 .title {
        font-size: 22px
    }

    .deadlineBenefits .E100Container .Event100 .desc p {
        font-size: 17px
    }

    .deadlineBenefits .E100Container .Event100 .line {
        border-bottom: 6px solid #fff
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 32%
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right;
        margin-right: 160px
    }

    .deadlineBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 1440px) {
    .deadlineBenefits .heading {
        width:72%;
        font-size: 50px
    }

    .deadlineBenefits .E100Container {
        padding: 30px 5%;
        gap: 16px
    }

    .deadlineBenefits .E100Container .Event100 {
        height: 280px;
        padding: 16px;
        gap: 16px
    }

    .deadlineBenefits .E100Container .Event100 .image {
        width: 70px;
        height: 70px
    }

    .deadlineBenefits .E100Container .Event100 .title {
        font-size: 20px
    }

    .deadlineBenefits .E100Container .Event100 .desc p {
        font-size: 16px
    }

    .deadlineBenefits .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 33%;
        justify-self: right;
        margin-right: 150px
    }

    .deadlineBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 1280px) {
    .deadlineBenefits .heading {
        width:75%;
        font-size: 48px
    }

    .deadlineBenefits .E100Container {
        padding: 25px 4%;
        gap: 14px
    }

    .deadlineBenefits .E100Container .Event100 {
        height: 260px;
        padding: 14px;
        gap: 14px
    }

    .deadlineBenefits .E100Container .Event100 .image {
        width: 65px;
        height: 65px
    }

    .deadlineBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .deadlineBenefits .E100Container .Event100 .desc p {
        font-size: 15px
    }

    .deadlineBenefits .E100Container .Event100 .line {
        border-bottom: 4px solid #fff
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5) {
        grid-column: span 3;
        width: 35%;
        justify-self: right;
        margin-right: 140px
    }

    .deadlineBenefits .EventFPScroller {
        display: none
    }
}

@media (max-width: 992px) {
    .deadlineBenefits .heading {
        width:85%;
        font-size: 38px
    }

    .deadlineBenefits .E100Container {
        padding: 20px 2%;
        gap: 12px
    }

    .deadlineBenefits .E100Container .Event100 {
        height: 260px;
        padding: 12px;
        gap: 12px
    }

    .deadlineBenefits .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .deadlineBenefits .E100Container .Event100 .title {
        font-size: 17px
    }

    .deadlineBenefits .E100Container .Event100 .desc p {
        font-size: 14px
    }

    .deadlineBenefits .E100Container .Event100 .line {
        border-bottom: 5px solid #fff
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5),.deadlineBenefits .E100Container .Event100:nth-child(6) {
        grid-column: span 2;
        width: 52%
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5) {
        justify-self: right
    }

    .deadlineBenefits .EventKlickScroller {
        display: none
    }
}

@media (max-width: 480px) {
    .deadlineBenefits {
        padding:1% 3% 5%
    }

    .deadlineBenefits .heading {
        width: 95%;
        font-size: 20px
    }

    .deadlineBenefits .E100Container {
        display: flex;
        padding: 20px 0;
        overflow: scroll
    }

    .deadlineBenefits .E100Container::-webkit-scrollbar {
        display: none
    }

    .deadlineBenefits .E100Container .Event100 {
        padding: 20px 15px;
        width: 77%;
        height: 265px;
        flex: 0 0 77%
    }

    .deadlineBenefits .E100Container .Event100 .image {
        width: 40px;
        height: 40px
    }

    .deadlineBenefits .E100Container .Event100 .title {
        font-size: 18px
    }

    .deadlineBenefits .E100Container .Event100 .desc p {
        font-size: 14px;
        font-weight: 400
    }

    .deadlineBenefits .E100Container .Event100:nth-child(5) {
        margin-right: 0
    }

    .deadlineBenefits .EventFPScroller {
        display: block;
        padding: 0 0 20px
    }
}

.deadlineCategories {
    padding: 2.4% 0
}

.deadlineCategories h1 {
    padding: 0 6%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.deadlineCategories .event100HrsOfMaacChallenge-steps {
    width: 88%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 2.4% 10%;
    position: relative
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
    position: absolute
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop {
    right: 100px;
    top: 110px
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom {
    bottom: 90px;
    left: 100px
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
    right: 100px;
    top: 600px
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
    bottom: 580px;
    left: 100px
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step {
    background-color: #821131;
    display: flex;
    width: 60%;
    align-items: center;
    justify-content: center;
    gap: 31px
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step .left {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    font-size: 120px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step .right {
    display: flex;
    flex-direction: column;
    width: 70%;
    gap: 15px
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
    color: #fabc3f;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step:nth-child(2) {
    align-self: flex-end
}

.deadlineCategories .event100HrsOfMaacChallenge-steps .step:nth-child(4) {
    align-self: flex-end
}

@media (max-width: 1536px) {
    .deadlineCategories {
        padding:2% 0
    }

    .deadlineCategories h1 {
        font-size: 52px;
        padding: 0 5%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps {
        width: 70%;
        padding: 2%;
        gap: 50px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop {
        right: -200px;
        top: 90px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 70%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom {
        left: -20px;
        bottom: 70px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 60%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        right: -200px;
        top: 420px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 img {
        width: 70%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        left: -20px;
        bottom: 410px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 img {
        width: 60%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step {
        width: 76%;
        gap: 20px;
        z-index: 1
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 60%;
        gap: 12px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 28px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .deadlineCategories {
        padding:2.2% 0
    }

    .deadlineCategories h1 {
        font-size: 54px;
        padding: 0 5%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps {
        width: 70%;
        padding: 2% 5%;
        gap: 45px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop {
        right: -19%;
        top: 90px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 65%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 2%;
        bottom: 120px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 55%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        right: -19%;
        top: 440px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 img {
        width: 65%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        left: 2%;
        bottom: 480px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 img {
        width: 55%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step {
        width: 78%;
        gap: 18px;
        z-index: 1
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 110px;
        -webkit-text-stroke-width: 2px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 63%;
        gap: 10px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 30px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 19px
    }
}

@media (max-width: 1280px) {
    .deadlineCategories {
        padding:2% 0
    }

    .deadlineCategories h1 {
        font-size: 50px;
        padding: 0 4%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps {
        width: 65%;
        padding: 2% 4%;
        gap: 40px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop {
        right: -26%;
        top: 80px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop img {
        width: 60%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom {
        left: 0;
        bottom: 80px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom img {
        width: 50%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        right: -26%;
        top: 400px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 img {
        width: 60%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        left: 0;
        bottom: 400px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 img {
        width: 50%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step {
        width: 80%;
        gap: 16px;
        z-index: 1
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 65%;
        gap: 8px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 28px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 17px
    }
}

@media (max-width: 992px) {
    .deadlineCategories {
        padding:1.5% 0
    }

    .deadlineCategories h1 {
        font-size: 42px;
        padding: 0 3%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps {
        width: 75%;
        padding: 1.5% 3%;
        gap: 30px;
        position: relative
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2 {
        display: none
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step {
        width: 90%;
        gap: 12px;
        flex-wrap: wrap;
        z-index: 1
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right {
        width: 70%;
        gap: 6px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 22px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 14px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step:nth-child(2),.deadlineCategories .event100HrsOfMaacChallenge-steps .step:nth-child(4) {
        align-self: flex-start
    }
}

@media (max-width: 480px) {
    .deadlineCategories {
        padding:1% 0 5%
    }

    .deadlineCategories h1 {
        font-size: 20px;
        padding: 0 3%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps {
        gap: 14px;
        width: 100%;
        padding: 2% 3%
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step {
        width: 100%;
        height: 95px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .left {
        font-size: 40px;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--WHITE-COLOR, #fff)
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right {
        gap: 5px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rtop {
        font-size: 18px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .step .right .rbottom {
        font-size: 14px
    }

    .deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgBottom2,.deadlineCategories .event100HrsOfMaacChallenge-steps .imgTop2 {
        display: none
    }
}

.deadlineFlow {
    padding: 0
}

.deadlineFlow .heading {
    padding: 3.4% 6.25% 0
}

.deadlineFlow .controls {
    display: flex;
    margin-top: 2vw;
    gap: 2vw;
    margin-bottom: 2vh;
    padding: 0 0 0 6.25vw
}

.deadlineFlow .controls button {
    background: none;
    border: .15vw solid #fabc3f;
    color: #fabc3f;
    padding: 1.2vw;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2vw;
    justify-self: start
}

.deadlineFlow .controls button:active {
    color: #000;
    background-color: #fabc3f
}

.deadlineFlow .controls button:disabled {
    opacity: .4;
    cursor: not-allowed
}

.deadlineFlow .cards-container {
    display: flex;
    justify-content: flex-end;
    gap: 2vw;
    margin-top: 5vh;
    width: 100%
}

.deadlineFlow .cards-container .card {
    background: var(--Deep-maroon-color, #770006);
    color: #fff;
    padding: 2vw 1.5vw;
    border-radius: .8vw;
    width: 23.5vw;
    height: 15.1vw;
    box-shadow: 0 .4vw .8vw #0000004d
}

.deadlineFlow .cards-container .card h3 {
    font-size: 1.5vw;
    color: #f0af13;
    margin-bottom: 2vh
}

.deadlineFlow .cards-container .card p {
    font-size: 1.1vw;
    line-height: 1.5
}

.deadlineFlow .progress-bar {
    width: 90%;
    height: 1vh;
    background: #d9d9d980;
    margin: 2vh auto;
    position: relative;
    border-radius: .5vw;
    justify-self: start
}

.deadlineFlow .progress-bar .progress {
    height: 100%;
    background: #dc143c;
    width: 0%;
    border-radius: .5vw;
    transition: width .4s ease-in-out
}

.deadlineFlow .source {
    font-size: 1.25vw;
    color: #ddd;
    text-align: center;
    padding: 3vh 0;
    margin-left: -8vw
}

.deadlineFlow .source a {
    text-decoration: underline
}

@media (max-width: 480px) {
    .deadlineFlow .heading {
        font-size:20px
    }

    .deadlineFlow .controls button {
        padding: .6rem;
        font-size: 12px
    }

    .deadlineFlow .cards-container {
        margin-top: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 4vw;
        padding: 3vw 2vw
    }

    .deadlineFlow .cards-container::-webkit-scrollbar {
        display: none
    }

    .deadlineFlow .cards-container .card {
        flex: 0 0 75vw;
        width: 293px;
        height: 190px
    }

    .deadlineFlow .cards-container .card h3 {
        font-size: 18px
    }

    .deadlineFlow .cards-container .card p {
        font-size: 16px
    }

    .deadlineFlow .source {
        margin-left: 0;
        text-align: left;
        font-size: 14px;
        padding-left: 2%
    }
}

.deadlineHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 548px;
    overflow: hidden
}

.deadlineHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.deadlineHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.deadlineHero img,.deadlineHero p {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.2%
}

.deadlineHero img {
    width: 428px;
    height: 160px
}

.deadlineHero p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1536px) {
    .deadlineHero {
        height:500px
    }

    .deadlineHero video {
        height: 100%
    }

    .deadlineHero:before {
        background: #0006
    }

    .deadlineHero img {
        width: 360px;
        height: 150px
    }

    .deadlineHero p {
        width: 75%;
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .deadlineHero {
        height:480px
    }

    .deadlineHero video {
        height: 100%
    }

    .deadlineHero:before {
        background: #00000073
    }

    .deadlineHero img {
        width: 380px;
        height: 160px
    }

    .deadlineHero p {
        width: 80%;
        font-size: 22px
    }
}

@media (max-width: 1280px) {
    .deadlineHero {
        height:450px
    }

    .deadlineHero video {
        height: 100%
    }

    .deadlineHero:before {
        background: #00000080
    }

    .deadlineHero img {
        width: 340px;
        height: 140px
    }

    .deadlineHero p {
        width: 80%;
        font-size: 20px
    }
}

@media (max-width: 992px) {
    .deadlineHero {
        height:420px
    }

    .deadlineHero video {
        height: 100%
    }

    .deadlineHero:before {
        background: #0000008c
    }

    .deadlineHero img {
        width: 300px;
        height: 120px
    }

    .deadlineHero p {
        width: 85%;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .deadlineHero {
        height:229px
    }

    .deadlineHero img,.deadlineHero p {
        margin-bottom: 12px
    }

    .deadlineHero img {
        width: 100px;
        height: auto
    }

    .deadlineHero p {
        width: 100%;
        font-size: 16px
    }
}

.DeadlineSubHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.DeadlineSubHero .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 560px;
    width: 54.4%;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.DeadlineSubHero .left h1 {
    width: 85%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.DeadlineSubHero .left p {
    width: 80%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.DeadlineSubHero .right {
    z-index: 1;
    right: 80px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/h2-RcpduVkv.png) #d3d3d3 -8.666px 0px/101.19% 106.475% no-repeat
}

.DeadlineSubHero .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.DeadlineSubHero .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.DeadlineSubHero .playbutton:hover img {
    transform: scale(1.1)
}

.DeadlineSubHero .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.DeadlineSubHero .modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.DeadlineSubHero .close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.DeadlineSubHero .close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .DeadlineSubHero .left {
        height:520px;
        width: 56%
    }

    .DeadlineSubHero .left h1 {
        font-size: 52px
    }

    .DeadlineSubHero .left p {
        font-size: 22px
    }

    .DeadlineSubHero .right {
        width: 42%;
        height: 420px;
        right: 60px
    }

    .DeadlineSubHero .playbutton {
        width: 75px;
        height: 75px
    }

    .DeadlineSubHero .playbutton img {
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .DeadlineSubHero .playbutton:hover img {
        transform: scale(1.1)
    }

    .DeadlineSubHero .modal-overlay {
        background: #000000b3
    }

    .DeadlineSubHero .modal-content {
        width: 750px;
        padding: 8px
    }

    .DeadlineSubHero .close-button {
        top: -8px;
        right: -80px;
        width: 32px;
        height: 32px;
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .DeadlineSubHero .left {
        height:500px;
        width: 58%
    }

    .DeadlineSubHero .left h1 {
        font-size: 48px
    }

    .DeadlineSubHero .left p {
        font-size: 20px;
        width: 85%
    }

    .DeadlineSubHero .right {
        width: 40%;
        height: 400px;
        right: 40px
    }

    .DeadlineSubHero .playbutton {
        width: 70px;
        height: 70px
    }

    .DeadlineSubHero .modal-content {
        width: 700px;
        padding: 8px
    }

    .DeadlineSubHero .close-button {
        top: -8px;
        right: -60px;
        width: 30px;
        height: 30px;
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    .DeadlineSubHero .left {
        width:100%;
        height: auto;
        padding: 40px 0
    }

    .DeadlineSubHero .left h1 {
        font-size: 40px;
        width: 90%
    }

    .DeadlineSubHero .left p {
        font-size: 18px;
        width: 90%
    }

    .DeadlineSubHero .right {
        position: static;
        width: 90%;
        height: 300px;
        background-size: cover
    }

    .DeadlineSubHero .playbutton {
        width: 64px;
        height: 64px
    }

    .DeadlineSubHero .modal-content {
        width: 90%
    }

    .DeadlineSubHero .close-button {
        right: -10px
    }
}

@media (max-width: 480px) {
    .DeadlineSubHero {
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1% 0
    }

    .DeadlineSubHero .left {
        text-align: left;
        width: 100%;
        height: auto;
        padding: 20px;
        box-shadow: none
    }

    .DeadlineSubHero .left h1 {
        font-size: 20px;
        width: 100%
    }

    .DeadlineSubHero .left p {
        font-size: 16px;
        width: 100%
    }

    .DeadlineSubHero .right {
        position: static;
        width: 343px;
        height: 195px;
        background-size: cover;
        background-position: center;
        margin-top: -3%
    }

    .DeadlineSubHero .playbutton {
        width: 36px;
        height: 36px
    }

    .DeadlineSubHero .playbutton img {
        width: 100%;
        height: auto
    }

    .DeadlineSubHero .modal-overlay {
        padding: 0;
        width: 100%
    }

    .DeadlineSubHero .modal-content {
        padding: 0
    }

    .DeadlineSubHero .modal-content iframe {
        width: 340px;
        height: 250px
    }

    .DeadlineSubHero .close-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
        right: -4px
    }
}

.deadlineCTA {
    width: 100%;
    height: 439px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background: linear-gradient(0deg,#0006,#0006),url(../assets/cta-hDAWPMlN.jpg) #d3d3d3 50%/cover no-repeat
}

.deadlineCTA h1 {
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 80%
}

.deadlineCTA p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%;
    width: 65%
}

.deadlineCTA .event100HrsOfMaacCTA-button .animated-button {
    border: 1px solid #fff;
    color: #fff
}

.deadlineCTA .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 1536px) {
    .deadlineCTA {
        height:400px;
        background-size: cover
    }

    .deadlineCTA h1 {
        font-size: 52px;
        width: 65%
    }

    .deadlineCTA p {
        font-size: 22px;
        width: 70%
    }

    .deadlineCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 18px;
        padding: 12px 24px
    }
}

@media (max-width: 1440px) {
    .deadlineCTA {
        height:380px
    }

    .deadlineCTA h1 {
        font-size: 48px;
        width: 70%
    }

    .deadlineCTA p {
        font-size: 20px;
        width: 68%
    }

    .deadlineCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 17px;
        padding: 12px 22px
    }
}

@media (max-width: 1280px) {
    .deadlineCTA {
        height:360px;
        align-items: center;
        text-align: center;
        padding: 20px
    }

    .deadlineCTA h1 {
        font-size: 42px;
        width: 90%
    }

    .deadlineCTA p {
        font-size: 18px;
        width: 80%
    }

    .deadlineCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        padding: 10px 20px
    }
}

@media (max-width: 992px) {
    .deadlineCTA {
        height:340px;
        align-items: center;
        text-align: center;
        padding: 20px
    }

    .deadlineCTA h1 {
        font-size: 36px;
        width: 90%
    }

    .deadlineCTA p {
        font-size: 16px;
        width: 85%
    }

    .deadlineCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 15px;
        padding: 8px 18px
    }
}

@media (max-width: 480px) {
    .deadlineCTA {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        gap: 10px;
        text-align: left;
        background-position: center center
    }

    .deadlineCTA h1 {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .deadlineCTA p {
        font-size: 16px;
        width: 90%
    }

    .deadlineCTA .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.BlendedHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
    overflow: hidden
}

.BlendedHero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.BlendedHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.BlendedHero h1,.BlendedHero p {
    position: relative;
    z-index: 2;
    text-align: center
}

.BlendedHero h1 {
    margin-bottom: 2vh;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 4.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 80%
}

.BlendedHero p {
    width: 55%;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .BlendedHero {
        height:600px
    }

    .BlendedHero h1 {
        font-size: 72px
    }

    .BlendedHero p {
        font-size: 22px;
        width: 65%
    }
}

@media (max-width: 1440px) {
    .BlendedHero {
        height:550px
    }

    .BlendedHero h1 {
        font-size: 64px
    }

    .BlendedHero p {
        font-size: 20px;
        width: 62%
    }
}

@media (max-width: 1280px) {
    .BlendedHero {
        height:500px
    }

    .BlendedHero h1 {
        font-size: 56px
    }

    .BlendedHero p {
        font-size: 18px;
        width: 70%
    }
}

@media (max-width: 480px) {
    .BlendedHero {
        height:229px
    }

    .BlendedHero h1 {
        font-size: 20px;
        width: 80%
    }

    .BlendedHero p {
        width: 100%;
        font-size: 16px
    }
}

.BlendedSubHero {
    position: relative;
    display: flex;
    gap: 2%
}

.BlendedSubHero .bottom {
    display: flex;
    gap: 40px;
    height: 558px;
    align-items: center
}

.BlendedSubHero .bottom .left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40%;
    height: 510.804px
}

.BlendedSubHero .bottom .left .tcorner {
    top: 3px;
    left: 0;
    position: absolute
}

.BlendedSubHero .bottom .left .content {
    display: flex;
    margin: auto;
    width: 96%;
    height: 93%;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #821131 inset,5px 5px 20px #821131 inset
}

.BlendedSubHero .bottom .left .content .title {
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSubHero .bottom .left .content .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlendedSubHero .bottom .left .d-button {
    margin-top: 2vh
}

.BlendedSubHero .bottom .left .d-button .animated-button {
    padding: 0 3.6vw
}

.BlendedSubHero .bottom .left .bcorner {
    right: 0;
    bottom: 0;
    position: absolute
}

.BlendedSubHero .bottom .right {
    width: 60%;
    height: 100%
}

.BlendedSubHero .bottom .right video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1536px) {
    .BlendedSubHero {
        gap:1.5%
    }

    .BlendedSubHero .bottom {
        gap: 30px;
        height: 480px
    }

    .BlendedSubHero .bottom .left {
        width: 42%;
        height: 450px
    }

    .BlendedSubHero .bottom .left .content {
        width: 94%;
        height: 90%;
        padding: 30px;
        gap: 8px
    }

    .BlendedSubHero .bottom .left .content .title {
        font-size: 48px
    }

    .BlendedSubHero .bottom .left .content .desc {
        font-size: 20px
    }

    .BlendedSubHero .bottom .left .d-button {
        margin-top: 1.5vh
    }

    .BlendedSubHero .bottom .left .d-button .animated-button {
        padding: 0 3vw
    }

    .BlendedSubHero .bottom .right {
        width: 58%
    }
}

@media (max-width: 1440px) {
    .BlendedSubHero .bottom {
        gap:25px;
        height: 480px
    }

    .BlendedSubHero .bottom .left {
        width: 44%;
        height: 440px
    }

    .BlendedSubHero .bottom .left .content {
        padding: 28px;
        width: 92%;
        height: 88%
    }

    .BlendedSubHero .bottom .left .content .title {
        font-size: 46px
    }

    .BlendedSubHero .bottom .left .content .desc {
        font-size: 18px;
        padding-bottom: 3%
    }

    .BlendedSubHero .bottom .right {
        width: 56%
    }
}

@media (max-width: 1280px) {
    .BlendedSubHero .bottom {
        gap:20px;
        height: 450px
    }

    .BlendedSubHero .bottom .left {
        width: 46%;
        height: 400px
    }

    .BlendedSubHero .bottom .left .content {
        padding: 24px;
        width: 90%;
        height: 85%
    }

    .BlendedSubHero .bottom .left .content .title {
        font-size: 36px
    }

    .BlendedSubHero .bottom .left .content .desc {
        font-size: 17px
    }

    .BlendedSubHero .bottom .right {
        width: 54%
    }
}

@media (max-width: 480px) {
    .BlendedSubHero {
        flex-direction:column
    }

    .BlendedSubHero .bottom {
        flex-direction: column;
        gap: 18px;
        width: 100%;
        height: max-content
    }

    .BlendedSubHero .bottom .left {
        width: 100%;
        height: 368px
    }

    .BlendedSubHero .bottom .left .content {
        padding: 40px 10px;
        gap: 5px
    }

    .BlendedSubHero .bottom .left .content .title {
        font-size: 20px
    }

    .BlendedSubHero .bottom .left .content .desc {
        font-size: 16px;
        width: 100%;
        padding-bottom: 0
    }

    .BlendedSubHero .bottom .left .content .d-button .animated-button {
        font-size: 14px;
        padding: 0 16vw
    }

    .BlendedSubHero .bottom .right {
        width: 100%;
        height: 192px
    }
}

.BlendedSimilar {
    padding: 0;
    display: flex;
    flex-direction: column
}

.BlendedSimilar .heading {
    text-align: center
}

.BlendedSimilar .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.BlendedSimilar .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.BlendedSimilar .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--vibrant-crimson-red, #c7253e);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.BlendedSimilar .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.BlendedSimilar .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSimilar .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.BlendedSimilar .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.BlendedSimilar .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.BlendedSimilar .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlendedSimilar .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.BlendedSimilar .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSimilar .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .BlendedSimilar .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .BlendedSimilar .coursesCards .courseCard {
        height: 450px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .BlendedSimilar .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .BlendedSimilar .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .BlendedSimilar .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .BlendedSimilar .coursesCards .courseCard {
        height: 430px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .BlendedSimilar .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .BlendedSimilar .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .BlendedSimilar .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .BlendedSimilar .coursesCards .courseCard {
        height: 410px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .BlendedSimilar .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .BlendedSimilar .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .BlendedSimilar .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .BlendedSimilar .coursesCards .courseCard {
        height: 380px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .BlendedSimilar .coursesCards .courseCard .right {
        width: 92%;
        gap: 2.5%
    }

    .BlendedSimilar .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .BlendedSimilar .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .BlendedSimilar {
        padding:3.48% 0;
        gap: 20px
    }

    .BlendedSimilar .heading {
        font-size: 24px
    }

    .BlendedSimilar .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .BlendedSimilar .coursesCards .courseCard,.BlendedSimilar .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer,.BlendedSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number,.BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .index,.BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .BlendedSimilar .coursesCards .courseCard .numContainer .number .tname,.BlendedSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .BlendedSimilar .coursesCards .courseCard .right,.BlendedSimilar .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .BlendedSimilar .coursesCards .courseCard .right .photo,.BlendedSimilar .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info,.BlendedSimilar .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .head,.BlendedSimilar .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info .desc,.BlendedSimilar .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .BlendedSimilar .coursesCards .courseCard .right .info button,.BlendedSimilar .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .BlendedSimilar .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.BlendedCourses {
    display: flex;
    gap: 20px;
    flex-direction: column
}

.BlendedCourses .title {
    width: 55%;
    margin: auto;
    font-size: 2.083333vw;
    font-weight: 700;
    text-align: center
}

.BlendedCourses .coursesContainer {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5%;
    row-gap: 62px
}

.BlendedCourses .coursesContainer .card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(250,188,63,.2);
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px 20px 25px 5px #df9d0236;
    display: flex;
    flex-direction: column;
    gap: 3%;
    width: 23%;
    height: 485px
}

.BlendedCourses .coursesContainer .card .image {
    width: 100%;
    height: 55%
}

.BlendedCourses .coursesContainer .card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlendedCourses .coursesContainer .card .ctitle {
    text-align: center;
    color: #f0af13;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlendedCourses .coursesContainer .card .cdesc {
    padding: 0 1.5%;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlendedCourses .coursesContainer .card .hoverDetails {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--Deep-maroon-color, #770006);
    color: #fff;
    padding: 16px;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .4s ease-in-out;
    z-index: 10
}

.BlendedCourses .coursesContainer .card .hoverDetails::-webkit-scrollbar {
    display: none
}

.BlendedCourses .coursesContainer .card .hoverDetails p,.BlendedCourses .coursesContainer .card .hoverDetails div {
    margin-bottom: 10px
}

.BlendedCourses .coursesContainer .card .hoverDetails strong {
    display: block;
    text-align: center;
    color: #f0af13;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 10px;
    margin-bottom: 5px
}

.BlendedCourses .coursesContainer .card .hoverDetails ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    gap: 2px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlendedCourses .coursesContainer .card .hoverDetails .cdesch {
    padding: 0 1.5%;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlendedCourses .coursesContainer .card:hover .hoverDetails {
    transform: translateY(0)
}

.BlendedCourses .coursesContainer .animated-button {
    margin: 30px auto 0
}

@media (max-width: 1536px) {
    .BlendedCourses .BlendedCourses .title {
        width:60%
    }

    .BlendedCourses .BlendedCourses .coursesContainer {
        gap: 2%;
        row-gap: 50px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card {
        width: 26%;
        height: 460px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card .ctitle {
        font-size: 22px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card cdesc {
        font-size: 18px
    }
}

@media (max-width: 1440px) {
    .BlendedCourses .BlendedCourses .title {
        width:70%
    }

    .BlendedCourses .BlendedCourses .coursesContainer {
        gap: 2%;
        row-gap: 45px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card {
        width: 28%;
        height: 430px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card .ctitle {
        font-size: 20px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card cdesc {
        font-size: 17px
    }
}

@media (max-width: 992px) {
    .BlendedCourses .BlendedCourses .title {
        width:85%;
        font-size: 24px;
        text-align: center
    }

    .BlendedCourses .BlendedCourses .coursesContainer {
        gap: 2%;
        row-gap: 35px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card {
        width: 30%;
        height: 400px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card .ctitle {
        font-size: 18px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card .cdesc {
        font-size: 15px
    }

    .BlendedCourses .BlendedCourses .animated-button {
        margin: 20px auto 0
    }
}

@media (max-width: 480px) {
    .BlendedCourses .BlendedCourses {
        gap:16px
    }

    .BlendedCourses .BlendedCourses .title {
        width: 90%;
        font-size: 16px
    }

    .BlendedCourses .BlendedCourses .coursesContainer {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        row-gap: 30px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card {
        width: 90%;
        height: auto;
        padding: 16px;
        gap: 20px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card .image {
        height: 200px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card .ctitle {
        font-size: 20px
    }

    .BlendedCourses .BlendedCourses .coursesContainer .card cdesc {
        font-size: 16px
    }

    .BlendedCourses .BlendedCourses .animated-button {
        width: 80%;
        font-size: 16px
    }
}

.BlendedSimRev {
    padding: 0;
    display: flex;
    flex-direction: column
}

.BlendedSimRev .heading {
    text-align: center
}

.BlendedSimRev .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.BlendedSimRev .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.BlendedSimRev .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #c7253e);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.BlendedSimRev .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.BlendedSimRev .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSimRev .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.BlendedSimRev .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.BlendedSimRev .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.BlendedSimRev .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlendedSimRev .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.BlendedSimRev .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSimRev .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlendedSimRev .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.BlendedSimRev .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.BlendedSimRev .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.BlendedSimRev .scroller {
    display: none
}

@media (max-width: 1536px) {
    .BlendedSimRev .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .BlendedSimRev .coursesCards .courseCard {
        height: 450px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .BlendedSimRev .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .BlendedSimRev .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .BlendedSimRev .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .BlendedSimRev .coursesCards .courseCard {
        height: 430px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .BlendedSimRev .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .BlendedSimRev .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .BlendedSimRev .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .BlendedSimRev .coursesCards .courseCard {
        height: 410px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .BlendedSimRev .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .BlendedSimRev .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .BlendedSimRev .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .BlendedSimRev .coursesCards .courseCard {
        height: 380px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .BlendedSimRev .coursesCards .courseCard .right {
        width: 90%;
        gap: 2.5%
    }

    .BlendedSimRev .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .BlendedSimRev .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .BlendedSimRev {
        padding:3.48% 0;
        gap: 20px
    }

    .BlendedSimRev .heading {
        font-size: 24px
    }

    .BlendedSimRev .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .BlendedSimRev .coursesCards .courseCard,.BlendedSimRev .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer,.BlendedSimRev .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number,.BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .index,.BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .BlendedSimRev .coursesCards .courseCard .numContainer .number .tname,.BlendedSimRev .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .BlendedSimRev .coursesCards .courseCard .right,.BlendedSimRev .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .BlendedSimRev .coursesCards .courseCard .right .photo,.BlendedSimRev .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info,.BlendedSimRev .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .head,.BlendedSimRev .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info .desc,.BlendedSimRev .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .BlendedSimRev .coursesCards .courseCard .right .info button,.BlendedSimRev .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .BlendedSimRev .coursesCards::-webkit-scrollbar {
        display: none
    }

    .BlendedSimRev .scroller {
        display: block
    }
}

.BlendedSimilarSecond {
    padding: 0;
    display: flex;
    flex-direction: column
}

.BlendedSimilarSecond .heading {
    text-align: center
}

.BlendedSimilarSecond .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.BlendedSimilarSecond .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.BlendedSimilarSecond .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--vibrant-crimson-red, #c7253e);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.BlendedSimilarSecond .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.BlendedSimilarSecond .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.BlendedSimilarSecond .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.BlendedSimilarSecond .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlendedSimilarSecond .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.BlendedSimilarSecond .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlendedSimilarSecond .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 1536px) {
    .BlendedSimilarSecond .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .BlendedSimilarSecond .coursesCards .courseCard {
        height: 450px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }
}

@media (max-width: 1440px) {
    .BlendedSimilarSecond .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .BlendedSimilarSecond .coursesCards .courseCard {
        height: 430px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .BlendedSimilarSecond .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .BlendedSimilarSecond .coursesCards .courseCard {
        height: 410px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .BlendedSimilarSecond .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .BlendedSimilarSecond .coursesCards .courseCard {
        height: 380px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right {
        width: 92%;
        gap: 2.5%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .BlendedSimilarSecond .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .BlendedSimilarSecond {
        padding:3.48% 0;
        gap: 20px
    }

    .BlendedSimilarSecond .heading {
        font-size: 24px
    }

    .BlendedSimilarSecond .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .BlendedSimilarSecond .coursesCards .courseCard,.BlendedSimilarSecond .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer,.BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number,.BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .index,.BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .numContainer .number .tname,.BlendedSimilarSecond .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right,.BlendedSimilarSecond .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .photo,.BlendedSimilarSecond .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info,.BlendedSimilarSecond .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .head,.BlendedSimilarSecond .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info .desc,.BlendedSimilarSecond .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .BlendedSimilarSecond .coursesCards .courseCard .right .info button,.BlendedSimilarSecond .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .BlendedSimilarSecond .coursesCards::-webkit-scrollbar {
        display: none
    }
}

.AIPVADHero {
    background: linear-gradient(0deg,#0006,#0006),url(../assets/hero-Dr11AP9f.jpg) #d3d3d3 50%/cover no-repeat;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.AIPVADHero h1 {
    color: #fff;
    text-align: center;
    text-shadow: 0px .37vh .37vh rgba(0,0,0,.25);
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 992px) {
    .AIPVADHero {
        height:60vh
    }

    .AIPVADHero h1 {
        font-size: 4vw;
        text-shadow: 0px .5vh .5vh rgba(0,0,0,.3)
    }
}

@media (max-width: 480px) {
    .AIPVADHero {
        height:233px
    }

    .AIPVADHero h1 {
        font-size: 20px
    }
}

.AIPVADSimilar {
    padding: 0;
    display: flex;
    flex-direction: column
}

.AIPVADSimilar .heading {
    text-align: center
}

.AIPVADSimilar .coursesCards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 5%
}

.AIPVADSimilar .coursesCards .courseCard {
    height: 478px;
    position: relative;
    display: flex
}

.AIPVADSimilar .coursesCards .courseCard .numContainer {
    position: absolute;
    width: 43%;
    top: 0;
    background: var(--Burgundy-color, #c7253e);
    height: 436px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.AIPVADSimilar .coursesCards .courseCard .numContainer .number {
    margin-right: 34%
}

.AIPVADSimilar .coursesCards .courseCard .numContainer .number .index {
    text-align: center;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #fff);
    font-size: 120px;
    color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.AIPVADSimilar .coursesCards .courseCard .numContainer .number .tname {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.AIPVADSimilar .coursesCards .courseCard .right {
    position: absolute;
    bottom: 0;
    gap: 5%;
    display: flex;
    width: 90%;
    justify-content: flex-end
}

.AIPVADSimilar .coursesCards .courseCard .right .photo {
    z-index: 1;
    width: 479.109px;
    height: 436.065px;
    flex-shrink: 0
}

.AIPVADSimilar .coursesCards .courseCard .right .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.AIPVADSimilar .coursesCards .courseCard .right .info {
    justify-content: center;
    z-index: 1;
    display: flex;
    width: 612px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px
}

.AIPVADSimilar .coursesCards .courseCard .right .info .head {
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.AIPVADSimilar .coursesCards .courseCard .right .info .desc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.AIPVADSimilar .coursesCards .courseCard.reverse {
    flex-direction: row-reverse
}

.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    right: 0;
    left: auto
}

.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number {
    margin-left: 30%;
    margin-right: 0
}

.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--WHITE-COLOR, #000);
    font-size: 120px;
    color: transparent
}

.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
    color: #000
}

.AIPVADSimilar .coursesCards .courseCard.reverse .right {
    justify-content: flex-end;
    flex-direction: row-reverse
}

.AIPVADSimilar .scroller {
    display: none
}

@media (max-width: 1536px) {
    .AIPVADSimilar .coursesCards {
        gap:30px;
        margin-top: 4%
    }

    .AIPVADSimilar .coursesCards .courseCard {
        height: 450px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer {
        width: 40%;
        height: 400px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 58%
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 36px
    }

    .AIPVADSimilar .coursesCards .courseCard .right {
        width: 88%;
        gap: 4%
    }

    .AIPVADSimilar .coursesCards .courseCard .right .photo {
        width: 440px;
        height: 400px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info {
        width: 570px;
        gap: 20px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .head {
        font-size: 50px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 22px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 40%;
        height: 400px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 58%
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 100px;
        -webkit-text-stroke-width: 2px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 38px
    }
}

@media (max-width: 1440px) {
    .AIPVADSimilar .coursesCards {
        gap:28px;
        margin-top: 3.5%
    }

    .AIPVADSimilar .coursesCards .courseCard {
        height: 430px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer {
        width: 38%;
        height: 380px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 66%
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 90px;
        -webkit-text-stroke-width: 2px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 34px
    }

    .AIPVADSimilar .coursesCards .courseCard .right {
        width: 85%;
        gap: 3.5%
    }

    .AIPVADSimilar .coursesCards .courseCard .right .photo {
        width: 420px;
        height: 380px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info {
        width: 540px;
        gap: 18px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .head {
        font-size: 46px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 20px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 38%;
        height: 380px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 66%
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 90px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 34px
    }
}

@media (max-width: 1280px) {
    .AIPVADSimilar .coursesCards {
        gap:24px;
        margin-top: 3%
    }

    .AIPVADSimilar .coursesCards .courseCard {
        height: 410px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer {
        width: 36%;
        height: 360px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 68%
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 80px;
        -webkit-text-stroke-width: 1.5px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 30px
    }

    .AIPVADSimilar .coursesCards .courseCard .right {
        width: 82%;
        gap: 3%
    }

    .AIPVADSimilar .coursesCards .courseCard .right .photo {
        width: 370px;
        height: 320px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info {
        width: 500px;
        gap: 16px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .head {
        font-size: 42px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 18px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 36%;
        height: 360px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 62%
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 80px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 30px
    }
}

@media (max-width: 992px) {
    .AIPVADSimilar .coursesCards {
        gap:20px;
        margin-top: 2.5%
    }

    .AIPVADSimilar .coursesCards .courseCard {
        height: 380px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer {
        width: 34%;
        height: 320px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number {
        margin-right: 64%
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .tname {
        font-size: 22px
    }

    .AIPVADSimilar .coursesCards .courseCard .right {
        width: 90%;
        gap: 2.5%
    }

    .AIPVADSimilar .coursesCards .courseCard .right .photo {
        width: 320px;
        height: 280px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info {
        width: 440px;
        gap: 14px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .head {
        font-size: 36px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .desc {
        font-size: 16px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse {
        flex-direction: row-reverse
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 34%;
        height: 320px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin-left: 64%;
        margin-right: 0
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        font-size: 68px;
        -webkit-text-stroke-width: 1.2px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 22px
    }

    .AIPVADSimilar .coursesCards .courseCard.reverse .right {
        justify-content: flex-end;
        flex-direction: row-reverse
    }
}

@media (max-width: 480px) {
    .AIPVADSimilar {
        padding:3.48% 0;
        gap: 20px
    }

    .AIPVADSimilar .heading {
        font-size: 24px
    }

    .AIPVADSimilar .coursesCards {
        flex-direction: row;
        overflow: scroll
    }

    .AIPVADSimilar .coursesCards .courseCard,.AIPVADSimilar .coursesCards .courseCard.reverse {
        flex: 0 0 100%;
        width: 100%;
        height: 635px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer,.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer {
        width: 100%;
        height: 198px;
        position: relative
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number,.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number {
        margin: 10% auto 40%
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .index,.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .index {
        -webkit-text-stroke-width: 1px;
        font-size: 32px
    }

    .AIPVADSimilar .coursesCards .courseCard .numContainer .number .tname,.AIPVADSimilar .coursesCards .courseCard.reverse .numContainer .number .tname {
        font-size: 20px
    }

    .AIPVADSimilar .coursesCards .courseCard .right,.AIPVADSimilar .coursesCards .courseCard.reverse .right {
        gap: 20px;
        flex-direction: column;
        height: 512px;
        width: 100%
    }

    .AIPVADSimilar .coursesCards .courseCard .right .photo,.AIPVADSimilar .coursesCards .courseCard.reverse .right .photo {
        margin: auto;
        width: 90%;
        height: 272.138px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info,.AIPVADSimilar .coursesCards .courseCard.reverse .right .info {
        gap: 20px;
        width: 100%;
        align-items: center
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .head,.AIPVADSimilar .coursesCards .courseCard.reverse .right .info .head {
        margin: auto;
        text-align: center;
        width: 80%;
        font-size: 20px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info .desc,.AIPVADSimilar .coursesCards .courseCard.reverse .right .info .desc {
        width: 91%;
        height: 112px;
        text-align: center;
        font-size: 14px
    }

    .AIPVADSimilar .coursesCards .courseCard .right .info button,.AIPVADSimilar .coursesCards .courseCard.reverse .right .info button {
        font-size: 14px;
        height: 36px;
        width: 50%;
        margin-top: -8%
    }

    .AIPVADSimilar .coursesCards::-webkit-scrollbar {
        display: none
    }

    .AIPVADSimilar .scroller {
        display: block
    }
}

.MainHero {
    width: 100%;
    display: flex;
    gap: 1vw;
    flex-direction: column
}

.MainHero .navlinks {
    display: flex;
    cursor: pointer
}

.MainHero .navlinks ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: .1vw
}

.MainHero .navlinks ul li {
    color: #f3f3f3
}

.MainHero .navlinks ul li a {
    font-size: .85vw;
    color: #f3f3f3;
    text-decoration: none
}

.MainHero .navlinks ul .active {
    color: #fabc3f;
    font-size: .85vw
}

.MainHero .navlinks ul .nav {
    padding: 1.5px 5px;
    width: 1vw;
    height: .9vw
}

.MainHero .navlinks ul .nav img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.MainHero .heading {
    color: #fff
}

.MainHero .heading span {
    color: #fabc3f
}

.MainHero .blogHero {
    width: 100%
}

.MainHero .blogHero img {
    border-radius: 1.3vw;
    width: 100%;
    aspect-ratio: 3.27;
    object-fit: cover
}

@media (max-width: 480px) {
    .MainHero {
        gap:3vw
    }

    .MainHero .navlinks ul {
        gap: 2vw
    }

    .MainHero .navlinks ul li {
        display: flex;
        align-items: center
    }

    .MainHero .navlinks ul li a,.MainHero .navlinks ul .active {
        font-size: 3.2vw
    }

    .MainHero .navlinks ul .nav {
        width: 5vw;
        height: 4vw
    }

    .MainHero .navlinks ul .nav img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .MainHero .heading {
        font-size: 6.8vw
    }

    .MainHero .subHeading {
        font-size: 3.6vw
    }

    .MainHero .blogHero img {
        border-radius: 3vw;
        width: 100%;
        height: 46.4vh;
        aspect-ratio: 3.27;
        object-fit: cover
    }
}

.MainBlogs {
    padding: .2% 5.2%;
    width: 100%;
    display: flex;
    flex-direction: column
}

.MainBlogs .top {
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center
}

.MainBlogs .top .search {
    display: flex;
    width: 30%;
    padding: 1vw 2vw;
    border-radius: .75vw;
    border: .5px solid #fabc3f;
    background: #f3f3f31a
}

.MainBlogs .top .search input {
    color: #fff;
    background-color: transparent;
    border: none;
    width: 100%
}

.MainBlogs .top .categoryOptions {
    width: 30%;
    border-radius: .75vw;
    border: .5px solid #fabc3f;
    background: #f3f3f31a
}

.MainBlogs .top .categoryOptions select {
    cursor: pointer;
    padding: 1.1vw 2vw;
    border: none;
    width: 100%;
    background-color: transparent;
    color: #fff;
    outline: none
}

.MainBlogs .top .categoryOptions select:focus,.MainBlogs .top .categoryOptions select:active {
    outline: none;
    box-shadow: none
}

.MainBlogs .top .categoryOptions select option {
    background-color: #282525
}

.MainBlogs .bottom {
    padding: 4vw 0;
    display: flex;
    gap: 2vw
}

.MainBlogs .bottom .bleft {
    display: flex;
    width: 65%;
    gap: 1vw;
    row-gap: 2vw;
    flex-wrap: wrap
}

.MainBlogs .bottom .bleft .category {
    width: 49%;
    position: relative
}

.MainBlogs .bottom .bleft .category img {
    opacity: .8;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover
}

.MainBlogs .bottom .bleft .category .info {
    gap: 1vw;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 7%;
    left: 7%;
    width: 100%
}

.MainBlogs .bottom .bleft .category .info .name {
    padding: 1.5vw 4vw .8vw 1.6vw;
    width: 75%;
    border-radius: .3vw;
    border: .1vw solid #f3f3f3;
    background: #f3f3f333;
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.MainBlogs .bottom .bleft .category .info .button {
    cursor: pointer
}

.MainBlogs .bottom .bleft .category .info .button:hover {
    scale: 1.5;
    opacity: .9
}

.MainBlogs .bottom .bleft .category .count {
    bottom: 18%;
    left: 13%;
    padding: .3vw;
    position: absolute;
    border-radius: 1.5vw;
    background: #fff;
    color: #bc2329;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.MainBlogs .bottom .bright {
    height: 90vh;
    padding: 3%;
    gap: 1.5vw;
    width: 34%;
    border-radius: .65vw;
    border: .15vw solid #c7253e;
    box-shadow: 0 4px 10px #00000040;
    display: flex;
    flex-direction: column
}

.MainBlogs .bottom .bright .rTitle {
    color: #f0af13;
    font-size: 1.66666vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.MainBlogs .bottom .bright .recentPosts {
    overflow: scroll;
    display: flex;
    flex-direction: column;
    gap: 1vw
}

.MainBlogs .bottom .bright .recentPosts .recent {
    cursor: pointer;
    gap: 1vw;
    width: 100%;
    display: flex;
    align-items: center
}

.MainBlogs .bottom .bright .recentPosts .recent .icon {
    width: 50%
}

.MainBlogs .bottom .bright .recentPosts .recent .icon img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover
}

.MainBlogs .bottom .bright .recentPosts .recent .title {
    width: 50%;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.MainBlogs .bottom .bright .recentPosts .recent:hover {
    border-radius: 10px;
    background: #ffffff1a
}

.MainBlogs .bottom .bright .recentPosts::-webkit-scrollbar {
    display: none
}

@media (max-width: 480px) {
    .MainBlogs {
        padding:4vw;
        gap: 5vw
    }

    .MainBlogs .top {
        flex-direction: column;
        align-items: stretch;
        gap: 4vw
    }

    .MainBlogs .top .search,.MainBlogs .top .categoryOptions {
        width: 100%
    }

    .MainBlogs .top .search input,.MainBlogs .top .search select,.MainBlogs .top .categoryOptions input,.MainBlogs .top .categoryOptions select {
        padding: 3vw 4vw;
        font-size: 4vw
    }

    .MainBlogs .bottom {
        flex-direction: column;
        padding: 0;
        gap: 5vw
    }

    .MainBlogs .bottom .bleft {
        width: 100%;
        flex-direction: column;
        gap: 5vw
    }

    .MainBlogs .bottom .bleft .category {
        width: 100%;
        position: relative
    }

    .MainBlogs .bottom .bleft .category img {
        aspect-ratio: 1.5;
        width: 100%;
        object-fit: cover;
        display: block
    }

    .MainBlogs .bottom .bleft .category .count {
        position: absolute;
        left: 5%;
        bottom: 28%;
        font-size: 3.5vw;
        padding: 2vw 4vw;
        border-radius: 20px;
        background: #fff;
        color: #bc2329;
        font-weight: 600;
        z-index: 2
    }

    .MainBlogs .bottom .bleft .category .info {
        position: absolute;
        left: 1%
    }

    .MainBlogs .bottom .bleft .category .info .name {
        font-size: 5vw;
        padding: 2vw 4vw;
        border-radius: 1.5vw;
        border: 1px solid #f3f3f3;
        background: #f3f3f333;
        color: #fff;
        font-weight: 600;
        flex: 1
    }

    .MainBlogs .bottom .bleft .category .info .button {
        margin-left: 2vw
    }

    .MainBlogs .bottom .bleft .category .info .button img {
        width: 10vw;
        height: auto
    }

    .MainBlogs .bottom .bright {
        width: 100%;
        height: auto;
        padding: 4vw;
        gap: 4vw
    }

    .MainBlogs .bottom .bright .rTitle {
        font-size: 5vw
    }

    .MainBlogs .bottom .bright .recentPosts {
        gap: 4vw
    }

    .MainBlogs .bottom .bright .recentPosts .recent {
        flex-direction: row;
        gap: 4vw
    }

    .MainBlogs .bottom .bright .recentPosts .recent .icon {
        width: 35%
    }

    .MainBlogs .bottom .bright .recentPosts .recent .icon img {
        aspect-ratio: 1.5
    }

    .MainBlogs .bottom .bright .recentPosts .recent .title {
        width: 65%;
        font-size: 4vw
    }
}

.BlogCategoryHero {
    width: 100%;
    display: flex;
    gap: 1vw;
    flex-direction: column
}

.BlogCategoryHero .navlinks {
    display: flex;
    cursor: pointer
}

.BlogCategoryHero .navlinks ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: .1vw
}

.BlogCategoryHero .navlinks ul li {
    color: #f3f3f3
}

.BlogCategoryHero .navlinks ul li a {
    font-size: .85vw;
    color: #f3f3f3;
    text-decoration: none
}

.BlogCategoryHero .navlinks ul .active {
    color: #fabc3f;
    font-size: .85vw
}

.BlogCategoryHero .navlinks ul .nav {
    padding: 1.5px 5px;
    width: 1vw;
    height: .9vw
}

.BlogCategoryHero .navlinks ul .nav img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogCategoryHero .heading {
    text-transform: uppercase
}

.BlogCategoryHero .blogHero {
    width: 100%
}

.BlogCategoryHero .blogHero img {
    object-position: 80% 20%;
    border-radius: 1.3vw;
    width: 100%;
    aspect-ratio: 3.27;
    object-fit: cover
}

@media (max-width: 480px) {
    .BlogCategoryHero {
        gap:4vw
    }

    .BlogCategoryHero .navlinks ul {
        gap: 3vw
    }

    .BlogCategoryHero .navlinks ul li {
        display: flex;
        align-items: center
    }

    .BlogCategoryHero .navlinks ul li a,.BlogCategoryHero .navlinks ul .active {
        font-size: 3.2vw
    }

    .BlogCategoryHero .navlinks ul .nav {
        width: 4vw;
        height: 3.5vw;
        padding: 1px 3px
    }

    .BlogCategoryHero .heading {
        font-size: 6.8vw;
        text-transform: uppercase
    }

    .BlogCategoryHero .subHeading {
        font-size: 3.6vw
    }

    .BlogCategoryHero .blogHero img {
        border-radius: 3vw;
        width: 100%;
        aspect-ratio: 1.8;
        object-fit: cover;
        height: 46.4vh;
        object-position: 60% 20%
    }
}

.BlogCategoryMain {
    padding: .2% 5.2%;
    width: 100%;
    display: flex;
    flex-direction: column
}

.BlogCategoryMain .top {
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center
}

.BlogCategoryMain .top .search {
    display: flex;
    width: 30%;
    padding: 1vw 2vw;
    border-radius: .75vw;
    border: .5px solid #fabc3f;
    background: #f3f3f31a
}

.BlogCategoryMain .top .search input {
    color: #fff;
    background-color: transparent;
    border: none;
    width: 100%
}

.BlogCategoryMain .top .categoryOptions {
    width: 30%;
    border-radius: .75vw;
    border: .5px solid #fabc3f;
    background: #f3f3f31a
}

.BlogCategoryMain .top .categoryOptions select {
    cursor: pointer;
    padding: 1.1vw 2vw;
    border: none;
    width: 100%;
    background-color: transparent;
    color: #fff;
    outline: none
}

.BlogCategoryMain .top .categoryOptions select:focus,.BlogCategoryMain .top .categoryOptions select:active {
    outline: none;
    box-shadow: none
}

.BlogCategoryMain .top .categoryOptions select option {
    background-color: #282525
}

.BlogCategoryMain .bottom {
    padding: 4vw 0;
    display: flex;
    gap: 2vw
}

.BlogCategoryMain .bottom .bleft {
    display: flex;
    width: 65%;
    gap: 1vw;
    row-gap: 2vw;
    flex-wrap: wrap
}

.BlogCategoryMain .bottom .bleft .category {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 49%;
    position: relative
}

.BlogCategoryMain .bottom .bleft .category img {
    opacity: .8;
    width: 100%;
    aspect-ratio: 1.6;
    object-fit: cover
}

.BlogCategoryMain .bottom .bleft .category .info {
    padding: 4%;
    z-index: 1;
    margin-top: -13%;
    background-color: #fff;
    gap: 1vw;
    align-items: start;
    flex-direction: column;
    display: flex;
    width: 90%
}

.BlogCategoryMain .bottom .bleft .category .info .date {
    padding: .4vw .9vw;
    background-color: #fabc3f;
    color: #000;
    font-size: .85vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlogCategoryMain .bottom .bleft .category .info .title {
    color: #bc2329;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlogCategoryMain .bottom .bleft .category .info .text {
    color: #000;
    font-size: .85vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.BlogCategoryMain .bottom .bleft .category .info .button {
    padding: .6vw 1.5vw;
    border-radius: 25px;
    border: 1px solid var(--vibrant-crimson-red, #c7253e);
    color: #c7253e;
    font-size: .85vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer
}

.BlogCategoryMain .bottom .bright {
    height: 90vh;
    padding: 3%;
    gap: 1.5vw;
    width: 34%;
    border-radius: .65vw;
    border: .15vw solid #c7253e;
    box-shadow: 0 4px 10px #00000040;
    display: flex;
    flex-direction: column
}

.BlogCategoryMain .bottom .bright .rTitle {
    color: #f0af13;
    font-size: 1.66666vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlogCategoryMain .bottom .bright .recentPosts {
    overflow: scroll;
    display: flex;
    flex-direction: column;
    gap: 1vw
}

.BlogCategoryMain .bottom .bright .recentPosts .recent {
    cursor: pointer;
    gap: 1vw;
    width: 100%;
    display: flex;
    align-items: center
}

.BlogCategoryMain .bottom .bright .recentPosts .recent .icon {
    width: 50%
}

.BlogCategoryMain .bottom .bright .recentPosts .recent .icon img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover
}

.BlogCategoryMain .bottom .bright .recentPosts .recent .title {
    width: 50%;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlogCategoryMain .bottom .bright .recentPosts .recent:hover {
    border-radius: 10px;
    background: #ffffff1a
}

.BlogCategoryMain .bottom .bright .recentPosts::-webkit-scrollbar {
    display: none
}

@media (max-width: 480px) {
    .BlogCategoryMain {
        padding:4vw;
        gap: 6vw
    }

    .BlogCategoryMain .top {
        flex-direction: column;
        align-items: stretch;
        gap: 4vw
    }

    .BlogCategoryMain .top .search {
        width: 100%;
        padding: 3vw 4vw
    }

    .BlogCategoryMain .top .search input {
        font-size: 4vw
    }

    .BlogCategoryMain .top .categoryOptions {
        width: 100%;
        border-radius: 5px
    }

    .BlogCategoryMain .top .categoryOptions select {
        font-size: 4vw;
        padding: 3vw 4vw
    }

    .BlogCategoryMain .bottom {
        flex-direction: column;
        gap: 6vw;
        padding: 6vw 0
    }

    .BlogCategoryMain .bottom .bleft {
        width: 100%;
        flex-direction: column;
        gap: 6vw
    }

    .BlogCategoryMain .bottom .bleft .category {
        width: 100%
    }

    .BlogCategoryMain .bottom .bleft .category img {
        width: 100%;
        aspect-ratio: 1.7;
        object-fit: cover
    }

    .BlogCategoryMain .bottom .bleft .category .info {
        width: 85%;
        padding: 4vw;
        margin-top: -15%;
        gap: 3vw
    }

    .BlogCategoryMain .bottom .bleft .category .info .date {
        font-size: 3.2vw;
        padding: 2vw 4vw
    }

    .BlogCategoryMain .bottom .bleft .category .info .title {
        font-size: 4.8vw
    }

    .BlogCategoryMain .bottom .bleft .category .info .text {
        font-size: 3.8vw
    }

    .BlogCategoryMain .bottom .bleft .category .info .button {
        font-size: 4vw;
        padding: 2vw 5vw;
        border-radius: 4vw
    }

    .BlogCategoryMain .bottom .bright {
        width: 100%;
        padding: 6vw 5vw;
        height: auto;
        gap: 4vw;
        border-radius: 3vw
    }

    .BlogCategoryMain .bottom .bright .rTitle {
        font-size: 5vw
    }

    .BlogCategoryMain .bottom .bright .recentPosts {
        flex-direction: column;
        gap: 4vw
    }

    .BlogCategoryMain .bottom .bright .recentPosts .recent {
        flex-direction: row;
        align-items: center;
        gap: 4vw
    }

    .BlogCategoryMain .bottom .bright .recentPosts .recent .icon {
        width: 35%
    }

    .BlogCategoryMain .bottom .bright .recentPosts .recent .icon img {
        width: 100%;
        aspect-ratio: 1.5;
        border-radius: 2vw
    }

    .BlogCategoryMain .bottom .bright .recentPosts .recent .title {
        width: 65%;
        font-size: 4vw
    }

    .BlogCategoryMain .bottom .bright .recentPosts .recent:hover {
        border-radius: 2vw
    }
}

.BlogPost {
    padding: 3.48% 0;
    width: 100%;
    display: flex;
    gap: 1vw;
    flex-direction: column
}

.BlogPost .navlinks {
    padding: 0 5.2%;
    display: flex;
    cursor: pointer
}

.BlogPost .navlinks ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: .1vw
}

.BlogPost .navlinks ul li {
    color: #f3f3f3
}

.BlogPost .navlinks ul li a {
    font-size: .85vw;
    color: #f3f3f3;
    text-decoration: none
}

.BlogPost .navlinks ul .active {
    color: #fabc3f;
    font-size: .85vw
}

.BlogPost .navlinks ul .nav {
    padding: 1.5px 5px;
    width: 1vw;
    height: .9vw
}

.BlogPost .navlinks ul .nav img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.BlogPost .bottom {
    padding: 4vw 5.2%;
    display: flex;
    gap: 2vw
}

.BlogPost .bottom .left {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 1vw
}

.BlogPost .bottom .left .image img {
    object-position: center;
    border-radius: 1.3vw;
    width: 100%;
    aspect-ratio: 2.37;
    object-fit: cover
}

.BlogPost .bottom .left .date {
    background: var(--YELLOW-SUPPLIMENTRY-COLOR, #fabc3f);
    width: max-content;
    padding: .4vw 1.2vw;
    color: #000;
    font-size: 1vw;
    font-weight: 600;
    border-radius: .3vw;
    margin-top: .5vw
}

.BlogPost .bottom .left .title {
    color: var(--YELLOW-PRIMARY-COLOR, #f0af13);
    font-size: 1.8vw;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .5vw
}

.BlogPost .bottom .left .text {
    color: var(--WHITE-COLOR, #fff);
    font-size: .95vw;
    font-weight: 400;
    line-height: 1.6;
    margin-top: .5vw
}

.BlogPost .bottom .left .text p {
    margin-bottom: .8vw
}

.BlogPost .bottom .left .text ul {
    padding-left: 1.2vw;
    list-style: disc;
    margin-bottom: 1vw
}

.BlogPost .bottom .left .text ul li {
    margin-bottom: .4vw
}

.BlogPost .bottom .left .text strong {
    color: var(--YELLOW-PRIMARY-COLOR, #f0af13);
    font-weight: 600
}

.BlogPost .bottom .left .text i {
    color: #ccc;
    font-style: italic
}

.BlogPost .bottom .left .text a {
    color: #fabc3f;
    text-decoration: underline
}

.BlogPost .bottom .left .text a:hover {
    color: #fff
}

.BlogPost .bottom .left .text br {
    margin-bottom: 1vw
}

.BlogPost .bottom .left br {
    display: block;
    margin-bottom: .8vw;
    content: ""
}

.BlogPost .right {
    display: flex;
    flex-direction: column;
    width: 30%;
    gap: 3.5vw
}

.BlogPost .right .bRightTop {
    width: 100%;
    gap: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.BlogPost .right .bRightTop .search {
    display: flex;
    width: 100%;
    padding: 1vw 2vw;
    border-radius: .75vw;
    border: .5px solid #fabc3f;
    background: #f3f3f31a
}

.BlogPost .right .bRightTop .search input {
    color: #fff;
    background-color: transparent;
    border: none;
    width: 100%
}

.BlogPost .right .bRightTop .categoryOptions {
    width: 100%;
    border-radius: .75vw;
    border: .5px solid #fabc3f;
    background: #f3f3f31a
}

.BlogPost .right .bRightTop .categoryOptions select {
    cursor: pointer;
    padding: 1.1vw 2vw;
    border: none;
    width: 100%;
    background-color: transparent;
    color: #fff;
    outline: none
}

.BlogPost .right .bRightTop .categoryOptions select:focus,.BlogPost .right .bRightTop .categoryOptions select:active {
    outline: none;
    box-shadow: none
}

.BlogPost .right .bRightTop .categoryOptions select option {
    background-color: #282525
}

.BlogPost .right .bRightBottom {
    height: 90vh;
    padding: 3%;
    gap: 1.5vw;
    width: 100%;
    border-radius: .65vw;
    border: .15vw solid #c7253e;
    box-shadow: 0 4px 10px #00000040;
    display: flex;
    flex-direction: column
}

.BlogPost .right .bRightBottom .rTitle {
    color: #f0af13;
    font-size: 1.66666vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.BlogPost .right .bRightBottom .recentPosts {
    overflow: scroll;
    display: flex;
    flex-direction: column;
    gap: 1vw
}

.BlogPost .right .bRightBottom .recentPosts .recent {
    cursor: pointer;
    gap: 1vw;
    width: 100%;
    display: flex;
    align-items: center
}

.BlogPost .right .bRightBottom .recentPosts .recent .icon {
    width: 50%
}

.BlogPost .right .bRightBottom .recentPosts .recent .icon img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover
}

.BlogPost .right .bRightBottom .recentPosts .recent .title {
    width: 50%;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.BlogPost .right .bRightBottom .recentPosts .recent:hover {
    border-radius: 10px;
    background: #ffffff1a
}

.BlogPost .right .bRightBottom .recentPosts::-webkit-scrollbar {
    display: none
}

.BlogPost .blogNote {
    padding: 0;
    height: 17.7vh;
    background: #fabc3f;
    display: flex;
    align-items: center
}

.BlogPost .blogNote .note {
    width: 55%;
    margin: auto;
    color: #000;
    text-align: center;
    font-size: 1.2vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

@media (max-width: 480px) {
    .BlogPost {
        padding:20px 0;
        gap: 16px
    }

    .BlogPost .navlinks ul {
        gap: 3vw;
        flex-wrap: wrap
    }

    .BlogPost .navlinks ul li a,.BlogPost .navlinks ul .active {
        font-size: 3.2vw
    }

    .BlogPost .navlinks ul .nav {
        width: 4vw;
        height: 3.5vw;
        padding: 1px 3px
    }

    .BlogPost .bottom {
        flex-direction: column;
        padding: 16px
    }

    .BlogPost .bottom .left {
        width: 100%;
        gap: 12px
    }

    .BlogPost .bottom .left .image img {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 8px
    }

    .BlogPost .bottom .left .date {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 4px
    }

    .BlogPost .bottom .left .title {
        font-size: 18px
    }

    .BlogPost .bottom .left .text {
        font-size: 14px;
        line-height: 1.5
    }

    .BlogPost .bottom .CoursesCTA {
        order: 3
    }

    .BlogPost .bottom .right {
        width: 100%;
        gap: 24px
    }

    .BlogPost .bottom .right .bRightTop {
        gap: 16px
    }

    .BlogPost .bottom .right .bRightTop .categoryOptions select {
        font-size: 14px;
        padding: 10px 14px
    }

    .BlogPost .bottom .right .bRightBottom {
        height: auto;
        padding: 16px;
        gap: 16px
    }

    .BlogPost .bottom .right .bRightBottom .rTitle {
        font-size: 18px
    }

    .BlogPost .bottom .right .bRightBottom .recentPosts {
        gap: 16px;
        max-height: none
    }

    .BlogPost .bottom .right .bRightBottom .recentPosts .recent {
        flex-direction: row;
        gap: 12px;
        align-items: center
    }

    .BlogPost .bottom .right .bRightBottom .recentPosts .recent .icon {
        width: 40%
    }

    .BlogPost .bottom .right .bRightBottom .recentPosts .recent .icon img {
        width: 100%;
        aspect-ratio: 4/3
    }

    .BlogPost .bottom .right .bRightBottom .recentPosts .recent .title {
        width: 60%;
        font-size: 14px
    }

    .BlogPost .blogNote .note {
        width: 100%;
        padding: 16px;
        font-size: 16px
    }
}

.cfooter {
    background-color: #821131;
    padding: 20px 10px;
    text-align: center
}

.cfooter p {
    color: #fff;
    text-align: center;
    font-size: .9rem;
    font-style: normal;
    line-height: normal
}

.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
}

.top-banner-container .flickity-button:focus {
    box-shadow: none
}

.top-banner-container .flickity-page-dots {
    bottom: 10px
}

@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
    }
}

.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 .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;
        font-family: "system-ui";
        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;
        font-family: "system-ui";
        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;
        font-family: "system-ui";
        padding-top: 20px;
        text-align: center
    }
}

.newGiftForm__form {
    width: 26%;
    padding: 15px 30px;
    background: #fff;
    border-radius: 15px;
    position: absolute;
    top: 6%;
    right: 5%;
    z-index: 9
}

.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-family: Raleway,sans-serif;
    font-size: 15px;
    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 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 .pos-rel {
    position: relative
}

.newEnquiryForm .input-group .bp-amt-txt {
    position: absolute;
    width: 100%;
    bottom: -2px;
    left: 0;
    color: #333;
    font-size: .7rem;
    font-style: italic;
    font-weight: 500
}

.newEnquiryForm .checkbox-container span {
    color: #666;
    text-decoration: underline;
    cursor: pointer
}

.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 .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%
}

@media (max-width: 480px) {
    .newGiftForm {
        flex-direction:column-reverse;
        margin: 0;
        padding: 0
    }

    .newGiftForm .newGiftForm__container {
        flex-direction: column-reverse;
        height: auto
    }

    .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;
        font-family: "system-ui";
        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;
        font-family: "system-ui";
        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;
        font-family: "system-ui";
        padding-top: 20px;
        text-align: center
    }
}

.section-thankyou .text-redirect {
    font-style: italic
}

.section-thankyou .text-redirect span {
    color: red
}

@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
    }
}

.CpBtsBenefits .heading {
    width: 65%;
    font-weight: 600
}

.CpBtsBenefits .E100Container {
    padding: 40px 7.4%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.CpBtsBenefits .E100Container .Event100 {
    box-sizing: border-box;
    padding: 20px;
    height: 345px;
    border: 1px solid rgba(240,175,19,.2);
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    gap: 20px;
    transition: background-color .3s ease;
    flex: 0 1 calc((100% - 60px)/2)
}

.CpBtsBenefits .E100Container .Event100:hover {
    background-color: #bc2329
}

.CpBtsBenefits .E100Container .Event100 .image {
    width: 80px;
    height: 80px;
    margin: 10px auto
}

.CpBtsBenefits .E100Container .Event100 .image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.CpBtsBenefits .E100Container .Event100 .titleText {
    color: var(--YELLOW-SUPPLIMENTRY-COLOR, #FABC3F);
    font-family: Raleway;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.335;
    text-align: center;
    margin-bottom: 15px
}

.CpBtsBenefits .E100Container .Event100 .desc {
    color: #fff;
    width: 100%
}

.CpBtsBenefits .E100Container .Event100 .desc p {
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.435
}

.CpBtsBenefits .E100Container .Event100 .line {
    height: 100%;
    width: 100%;
    border-bottom: 8px solid #fff
}

.CpBtsBenefits .EventFPScroller {
    display: none
}

@media only screen and (max-width: 1366px) {
    .CpBtsBenefits .E100Container .Event100 .titleText {
        font-size:1.25rem
    }
}

@media (max-width: 1024px) {
    .CpBtsBenefits .E100Container {
        padding:20px 0;
        gap: 10px
    }

    .CpBtsBenefits .E100Container .Event100 {
        flex: 0 1 calc((100% - 40px) / 3);
        padding: 10px;
        gap: 0px;
        height: auto
    }

    .CpBtsBenefits .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .CpBtsBenefits .E100Container .Event100 .title {
        font-size: 1.05rem;
        line-height: 1.335;
        margin-bottom: 15px
    }

    .CpBtsBenefits .E100Container .Event100 .desc p {
        font-size: .95rem
    }

    .CpBtsBenefits .E100Container .Event100 .line {
        margin: 15px auto 10px;
        border-bottom: 5px solid #fff
    }
}

@media (max-width: 768px) {
    .CpBtsBenefits .heading {
        width:100%;
        font-size: 2.05rem
    }

    .CpBtsBenefits .title-desc {
        font-size: 1rem
    }

    .CpBtsBenefits .E100Container {
        padding: 20px 0;
        gap: 10px
    }

    .CpBtsBenefits .E100Container .Event100 {
        flex: 0 1 calc((100% - 20px)/2);
        padding: 10px;
        gap: 0px;
        height: auto
    }

    .CpBtsBenefits .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .CpBtsBenefits .E100Container .Event100 .title {
        font-size: 1.05rem;
        line-height: 1.335;
        margin-bottom: 15px
    }

    .CpBtsBenefits .E100Container .Event100 .desc p {
        font-size: .95rem
    }

    .CpBtsBenefits .E100Container .Event100 .line {
        margin: 15px auto 10px;
        border-bottom: 5px solid #fff
    }
}

@media (max-width: 480px) {
    .CpBtsBenefits .E100Container {
        padding:20px 0;
        gap: 10px
    }

    .CpBtsBenefits .E100Container .Event100 {
        flex: 0 1 100%;
        padding: 10px;
        gap: 0px;
        height: auto
    }

    .CpBtsBenefits .E100Container .Event100 .image {
        width: 60px;
        height: 60px
    }

    .CpBtsBenefits .E100Container .Event100 .titleText {
        font-size: 1.05rem;
        line-height: 1.335
    }

    .CpBtsBenefits .E100Container .Event100 .desc p {
        font-size: .95rem
    }

    .CpBtsBenefits .E100Container .Event100 .line {
        margin: 15px auto 10px;
        border-bottom: 5px solid #fff
    }
}

.CpCourses .head {
    display: flex;
    justify-content: space-between
}

.CpCourses .head .head-content {
    width: 40%
}

.CpCourses .coursesContainer {
    padding: 2% 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.166%;
    width: 100%;
    height: auto;
    row-gap: 40px
}

.CpCourses .coursesContainer .course {
    position: relative;
    width: 23.2742%;
    height: 53.973vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 16px #f3f3f340;
    overflow: hidden;
    background-color: #fff;
    transition: background-color .4s ease-in-out
}

.CpCourses .coursesContainer .course:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #770006;
    transition: height .4s ease-in-out;
    z-index: 1
}

.CpCourses .coursesContainer .course .image {
    width: 100%;
    height: 100%
}

.CpCourses .coursesContainer .course .image img {
    border-radius: 10px;
    height: 100%;
    width: 100%;
    object-fit: cover
}

.CpCourses .coursesContainer .course .desc {
    border-radius: 10px;
    height: 34.3%;
    background-color: #770006;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 25px;
    transition: transform .4s ease-in-out;
    transform: translateY(0);
    z-index: 2
}

.CpCourses .coursesContainer .course .desc h3 {
    padding-top: 5%;
    font-size: 1.6rem;
    color: #f0af13
}

.CpCourses .coursesContainer .course .desc .ogdesc {
    padding-top: 2%;
    opacity: 1
}

.CpCourses .coursesContainer .course .desc .hoverDesc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2% 5% 5%;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity .4s ease-in-out,transform .4s ease-in-out
}

.CpCourses .coursesContainer .course .desc .hoverDesc .htitle {
    color: var(--YELLOW-PRIMARY-COLOR, #f0af13);
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: normal
}

.CpCourses .coursesContainer .course .desc .hoverDesc p {
    text-align: center;
    font-family: Raleway;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5rem
}

.CpCourses .coursesContainer .course .desc .viewDetails {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity .4s ease-in-out,transform .4s ease-in-out
}

.CpCourses .coursesContainer .course:hover:before {
    height: 100%
}

.CpCourses .coursesContainer .course:hover .desc {
    transform: translateY(-120%)
}

.CpCourses .coursesContainer .course:hover .desc h3 {
    display: none
}

.CpCourses .coursesContainer .course:hover .ogdesc {
    opacity: 0
}

.CpCourses .coursesContainer .course:hover .hoverDesc {
    opacity: 1;
    transform: translateY(0);
    margin-top: -30%
}

.CpCourses .coursesContainer .course:hover .viewDetails {
    opacity: 1;
    transform: translateY(0);
    padding-top: 1%
}

.CpCourses .mobile-button {
    opacity: 0
}

@media (min-width: 1440px) and (max-width: 1536px) {
    .CpCourses .coursesContainer {
        row-gap:30px
    }

    .CpCourses .coursesContainer .course {
        width: 30%;
        height: 40%
    }

    .CpCourses .coursesContainer .course .image img {
        height: 450px
    }

    .CpCourses .coursesContainer .course .desc {
        height: 30%;
        padding: 0 20px
    }

    .CpCourses .coursesContainer .course .desc h3 {
        font-size: 1.4rem
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc {
        margin-top: -8%
    }

    .CpCourses .coursesContainer .course .desc .viewDetails {
        padding-top: .8%
    }

    .CpCourses .coursesContainer .course:hover .desc {
        transform: translateY(-220%)
    }
}

@media only screen and (max-width: 1366px) {
    .CpCourses .coursesContainer {
        row-gap:30px
    }

    .CpCourses .coursesContainer .course {
        width: 30%;
        height: 40%
    }

    .CpCourses .coursesContainer .course .image img {
        height: 450px
    }

    .CpCourses .coursesContainer .course .desc {
        height: 30%;
        padding: 0 20px
    }

    .CpCourses .coursesContainer .course .desc h3 {
        font-size: 1.4rem
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc {
        margin-top: -8%
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc p {
        font-size: .85rem
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc .htitle {
        font-size: 1.25rem
    }

    .CpCourses .coursesContainer .course .desc .viewDetails {
        padding-top: .8%
    }

    .CpCourses .coursesContainer .course:hover .desc {
        transform: translateY(-250%)
    }
}

@media (max-width: 767px) {
    .CpCourses {
        width:100%;
        padding: 1% 1% 10%;
        overflow: hidden
    }

    .CpCourses .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .CpCourses .head .head-content {
        width: 100%;
        gap: 10px
    }

    .CpCourses .head .head-content h3 {
        width: 100%!important
    }

    .CpCourses .head .head-content p {
        font-size: 1rem;
        margin-bottom: 4%;
        width: 100%!important;
        line-height: 1.5rem
    }

    .CpCourses .head .corner-button {
        display: none!important
    }

    .CpCourses .coursesContainer {
        padding: 4%;
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .CpCourses .coursesContainer .course {
        flex-shrink: 0;
        width: 100%;
        scroll-snap-align: start
    }

    .CpCourses .coursesContainer .course .image img {
        height: 100%!important;
        width: 100%!important;
        object-fit: cover!important;
        min-height: 450px;
        max-height: 450px
    }

    .CpCourses .coursesContainer .course .desc {
        padding: 0 5px
    }

    .CpCourses .coursesContainer .course .desc h3 {
        font-size: 1.25rem
    }

    .CpCourses .coursesContainer .course .desc .viewDetails .animated-button {
        height: 30px;
        font-size: 12px
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc {
        padding: 10% 5% 5%;
        gap: 5px;
        transform: translateY(-10px)!important;
        margin-top: -45%
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc .htitle {
        font-size: 18px
    }

    .CpCourses .coursesContainer .course .desc .hoverDesc p {
        font-size: 14px
    }

    .CpCourses .coursesContainer .course:hover .desc {
        transform: translateY(-170%)
    }

    .CpCourses .mobile-button {
        width: 100%;
        opacity: 1;
        margin-top: 8%
    }

    .CpCourses .mobile-button .animated-button {
        margin: auto;
        font-size: 16px!important;
        height: 50px;
        color: #f0af13;
        background-color: transparent;
        border-color: #f0af13
    }

    .CpCourses .mobile-button .animated-button:hover .btn-text {
        color: #000
    }
}

@media (min-width: 769px) {
    .custom-scroller {
        display:none!important
    }
}

.CpPlacements {
    padding: 3.48% 0
}

.CpPlacements .head {
    padding: 0 5.2%;
    display: flex;
    justify-content: space-between
}

.CpPlacements .head .head-content .heading {
    width: 60%
}

.CpPlacements .head .head-content .title-desc {
    width: 55%
}

.CpPlacements .scrolling-container {
    margin-top: 5%;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    border-top: 2px solid rgba(188,35,41,.4);
    border-bottom: 2px solid rgba(188,35,41,.4)
}

.CpPlacements .scrolling-container .scrolling-wrapper,.CpPlacements .scrolling-container .scrolling-wrapper-2 {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: none
}

.CpPlacements .scrolling-container .scrolling-wrapper {
    animation: scroll-left 35s linear infinite
}

.CpPlacements .scrolling-container .scrolling-wrapper-2 {
    animation: scroll-right 35s linear infinite;
    margin-top: 40px
}

.CpPlacements .scrolling-container .scroll-box,.CpPlacements .scrolling-container .scroll-box-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background: #0f0f0f99;
    border-radius: 5px;
    border: 1px solid #fabc3f;
    font-family: Trajan Pro,sans-serif;
    line-height: 24px;
    height: 80px;
    padding: 15px 40px;
    font-size: 1.25rem;
    font-weight: 500
}

@media (max-width: 1536px) {
    .CpPlacements .head .head-content .heading {
        width:65%;
        font-size: 3rem
    }

    .CpPlacements .head .head-content .title-desc {
        width: 50%;
        font-size: 1.2rem
    }

    .CpPlacements .scrolling-container {
        width: 100%;
        padding: 25px 0
    }

    .CpPlacements .scrolling-container .scrolling-wrapper,.CpPlacements .scrolling-container .scrolling-wrapper-2 {
        gap: 18px
    }

    .CpPlacements .scrolling-container .scrolling-wrapper {
        animation: scroll-left 95s linear infinite
    }

    .CpPlacements .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 95s linear infinite;
        margin-top: 35px
    }
}

@media (max-width: 1440px) {
    .CpPlacements .head .head-content .heading {
        width:70%;
        font-size: 2.6rem
    }

    .CpPlacements .head .head-content .title-desc {
        width: 55%;
        font-size: 1.1rem
    }

    .CpPlacements .scrolling-container {
        width: 100%;
        padding: 20px 0
    }

    .CpPlacements .scrolling-container .scrolling-wrapper,.CpPlacements .scrolling-container .scrolling-wrapper-2 {
        gap: 16px
    }

    .CpPlacements .scrolling-container .scrolling-wrapper-2 {
        margin-top: 30px
    }

    .CpPlacements .scrolling-container .scroll-box,.CpPlacements .scrolling-container .scroll-box-2 {
        height: 80px;
        padding: 18px 40px;
        font-size: 16px;
        border-radius: 4px
    }
}

@media (max-width: 992px) {
    .CpPlacements {
        padding:3% 0
    }

    .CpPlacements .head {
        padding: 0 4%
    }

    .CpPlacements .head .head-content .heading {
        width: 75%;
        font-size: 2.2rem
    }

    .CpPlacements .head .head-content .title-desc {
        width: 60%;
        font-size: 1rem
    }

    .CpPlacements .scrolling-container {
        padding: 18px 0
    }

    .CpPlacements .scrolling-container .scrolling-wrapper,.CpPlacements .scrolling-container .scrolling-wrapper-2 {
        gap: 14px
    }

    .CpPlacements .scrolling-container .scroll-box,.CpPlacements .scrolling-container .scroll-box-2 {
        height: 70px;
        padding: 16px 35px;
        font-size: 14px;
        border-radius: 3px
    }
}

@keyframes scroll-left {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes scroll-right {
    0% {
        transform: translate(-50%)
    }

    to {
        transform: translate(0)
    }
}

@media (max-width: 480px) {
    .CpPlacements {
        padding:1% 1% 10%
    }

    .CpPlacements .head {
        width: 100%;
        padding: 10px!important;
        text-align: left
    }

    .CpPlacements .head h2 {
        width: 100%!important
    }

    .CpPlacements .head h3 {
        font-size: 16px!important
    }

    .CpPlacements .head p {
        font-size: 14px!important;
        margin-bottom: 4%;
        width: 100%!important
    }

    .CpPlacements .head .corner-button {
        display: none!important
    }

    .CpPlacements .scrolling-container {
        width: 110%;
        margin-left: -10%;
        margin-top: 5%;
        position: relative;
        overflow: hidden;
        padding: 20px 0;
        border-top: 2px solid rgba(188,35,41,.4);
        border-bottom: 2px solid rgba(188,35,41,.4)
    }

    .CpPlacements .scrolling-container .scrolling-wrapper,.CpPlacements .scrolling-container .scrolling-wrapper-2,.CpPlacements .scrolling-container .scrolling-wrapper-3 {
        display: flex;
        gap: 15px;
        width: max-content;
        animation: none
    }

    .CpPlacements .scrolling-container .scrolling-wrapper {
        animation: scroll-left 105s linear infinite
    }

    .CpPlacements .scrolling-container .scrolling-wrapper-2 {
        animation: scroll-right 105s linear infinite;
        margin-top: 30px
    }

    .CpPlacements .scrolling-container .scrolling-wrapper-3 {
        animation: scroll-left 105s linear infinite;
        margin-top: 30px
    }

    .CpPlacements .scrolling-container .scroll-box,.CpPlacements .scrolling-container .scroll-box-2,.CpPlacements .scrolling-container .scroll-box-3 {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        height: 50px;
        padding: 10px 20px;
        background: #0f0f0f99;
        border-radius: 5px;
        border: 1px solid #fabc3f;
        font-family: Trajan Pro,sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 20px
    }
}

.CpStudentsProjects {
    padding: 3% 5%;
    background: transparent
}

.CpStudentsProjects .head {
    display: flex;
    justify-content: space-between
}

.CpStudentsProjects .head .head-content {
    width: 50%
}

.CpStudentsProjects .head .title-desc {
    font-size: 1.25rem;
    margin-bottom: 30px;
    line-height: 1.31
}

.CpStudentsProjects .mobile-button {
    display: none
}

.CpStudentsProjects .projects-grid {
    column-count: 2;
    column-gap: 1rem
}

@media (min-width: 600px) {
    .CpStudentsProjects .projects-grid {
        column-count:2
    }
}

@media (min-width: 900px) {
    .CpStudentsProjects .projects-grid {
        column-count:4
    }
}

.CpStudentsProjects .projects-grid .project-card {
    position: relative;
    margin-bottom: 1rem;
    break-inside: avoid;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.CpStudentsProjects .projects-grid .project-card img,.CpStudentsProjects .projects-grid .project-card video {
    max-height: inherit
}

.CpStudentsProjects .projects-grid .project-card .top-info {
    padding: .25rem .55rem .15rem;
    color: #fff;
    filter: invert(1);
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #00000080
}

.CpStudentsProjects .projects-grid .project-card .top-info h4 {
    margin: 0;
    font-size: 1rem
}

.CpStudentsProjects .projects-grid .project-card .top-info p {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: #ccc
}

.CpStudentsProjects .projects-grid .project-card .media {
    width: 100%;
    object-fit: cover;
    border-radius: 0 0 12px 12px
}

.CpStudentsProjects .projects-grid .project-card .expand-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    filter: invert(1);
    cursor: pointer;
    z-index: 2;
    background: #ffffff80;
    border-radius: 50em
}

.CpStudentsProjects .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000d9;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.CpStudentsProjects .modal .modal-content {
    background: #121212;
    padding: 1.5rem;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    text-align: center;
    position: relative
}

.CpStudentsProjects .modal .modal-content img,.CpStudentsProjects .modal .modal-content video {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 10px;
    margin-bottom: 1rem
}

.CpStudentsProjects .modal .modal-content h3 {
    color: #fff
}

.CpStudentsProjects .modal .modal-content p {
    color: #ccc
}

.CpStudentsProjects .modal .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer
}

@media (max-width: 768px) {
    .CpStudentsProjects .head .head-content {
        width:100%
    }

    .CpStudentsProjects .head .corner-button {
        width: 100%;
        display: none
    }

    .CpStudentsProjects .projects-grid .project-card .top-info h4 {
        margin: 0;
        font-size: .85rem;
        font-weight: 500
    }

    .CpStudentsProjects .mobile-button {
        margin-top: 30px;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        width: 100%!important;
        text-align: center!important
    }

    .CpStudentsProjects .mobile-button .animated-button {
        width: 80%!important;
        font-size: 15.2px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .CpStudentsProjects .mobile-button .animated-button:hover .btn-text {
        color: #000
    }
}

.CpHomeVideo {
    padding: 3.48% 3.2%
}

.CpHomeVideo .head {
    display: flex;
    justify-content: space-between;
    padding: 0 .2%
}

.CpHomeVideo .testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.CpHomeVideo .testimonials-section .video-stories-container {
    display: flex;
    width: 100%;
    overflow: scroll;
    position: relative
}

.CpHomeVideo .testimonials-section .video-stories-container::-webkit-scrollbar {
    display: none
}

.CpHomeVideo .mobile-button {
    display: none;
    margin-top: 80px
}

.CpHomeVideo .mobile-button button {
    margin: auto
}

.video-testimonial-story {
    margin-top: 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    min-width: 105vw;
    padding: 0;
    gap: 0
}

.video-testimonial-story .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 6%;
    height: 560px;
    width: 54.4%;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.video-testimonial-story .left h1 {
    width: 80%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.video-testimonial-story .left p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.video-testimonial-story .right {
    z-index: 1;
    right: 160px;
    position: absolute;
    width: 44.9%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-testimonial-story .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(270deg,#ff0080,#7928ca,#2afadf,#00c9ff);
    background-size: 600% 600%;
    animation: gradientLoop 8s ease infinite;
    box-shadow: 0 0 12px #ff008080
}

.video-testimonial-story .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.video-testimonial-story .playbutton:hover img {
    transform: scale(1.1)
}

@media (max-width: 1536px) {
    .CpHomeVideo .testimonials-section .stories-container {
        grid-template-columns:repeat(auto-fit,minmax(400px,1fr))
    }

    .CpHomeVideo .testimonials-section .stories-container .story {
        height: 550px;
        padding: 3% 2%;
        margin: 6%
    }

    .CpHomeVideo .testimonials-section .stories-container .story .image {
        top: -8%;
        left: 40%
    }

    .CpHomeVideo .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 90px
    }

    .CpHomeVideo .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 4% 12% 0
    }

    .CpHomeVideo .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 15px;
        padding: 0 12%
    }

    .CpHomeVideo .mobile-button {
        display: none;
        margin-top: 80px
    }

    .CpHomeVideo .mobile-button button {
        margin: auto
    }

    .video-testimonial-story .playbutton {
        margin-top: -11%
    }
}

@media only screen and (max-width: 1366px) {
    .video-testimonial-story .playbutton {
        margin-top:-15%
    }
}

@media (max-width: 992px) {
    .video-testimonial-story .left {
        height:390px;
        padding-left: 2%;
        padding-right: 15%
    }

    .video-testimonial-story .left h1 {
        font-size: 2rem
    }

    .video-testimonial-story .left p {
        width: 90%;
        font-size: 1.25rem
    }

    .video-testimonial-story .right {
        right: 125px;
        top: 27%
    }

    .video-testimonial-story .playbutton {
        margin-top: -21%
    }
}

@media (max-width: 480px) {
    .CpHomeVideo {
        padding:0;
        padding-bottom: 2rem
    }

    .CpHomeVideo .head {
        padding: 1rem
    }

    .CpHomeVideo .head .head-content {
        gap: 10px
    }

    .CpHomeVideo .head .head-content .title {
        font-size: 1rem;
        margin-top: .5rem
    }

    .CpHomeVideo .head .head-content .title-desc {
        font-size: .875rem;
        margin-top: .25rem
    }

    .CpHomeVideo .head .corner-button {
        display: none
    }

    .CpHomeVideo .testimonials-section .video-stories-container {
        flex-direction: row;
        flex: 0 0 100%;
        gap: 2rem 0
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story {
        flex-direction: column;
        text-align: center;
        padding: 0 1rem;
        width: 100%!important
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story .left {
        height: 220px;
        width: 100%;
        padding: 2rem
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story .left h1 {
        font-size: 1.2rem;
        width: 100%;
        margin-bottom: .5rem
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story .left p {
        width: 100%;
        font-size: .875rem;
        line-height: 1.4
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story .right {
        right: 0;
        width: 100%;
        height: 180px;
        background-size: cover!important;
        background-position: center center!important;
        position: relative
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton {
        width: 48px;
        height: 48px
    }

    .CpHomeVideo .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton img {
        width: 100%;
        height: auto
    }

    .CpHomeVideo .testimonials-section .modal-content {
        width: 90%;
        max-width: 100%;
        position: relative
    }

    .CpHomeVideo .testimonials-section .modal-content iframe {
        width: 100%;
        height: 200px
    }

    .CpHomeVideo .mobile-button {
        margin-top: 10%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        width: 100%!important;
        text-align: center!important
    }

    .CpHomeVideo .mobile-button .animated-button {
        width: 80%!important;
        font-size: 16px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .CpHomeVideo .mobile-button .animated-button:hover .btn-text {
        color: #000
    }

    .testimonials-container {
        padding-bottom: 10%
    }

    .testimonials-container .testimonials-header {
        height: auto;
        padding: 60px 20px
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 36px;
        margin-bottom: 16px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 16px;
        padding: 0 10px;
        width: 100%
    }

    .testimonials-container .testimonials-section .testimonials-title {
        font-size: 32px;
        margin-top: 60px;
        margin-bottom: 16px
    }

    .testimonials-container .testimonials-section .testimonials-sub-title {
        font-size: 16px;
        margin-bottom: 40px;
        padding: 0 10px
    }

    .testimonials-container .testimonials-section .stories-container {
        grid-template-columns: 1fr;
        padding: 5% 10px
    }

    .testimonials-container .testimonials-section .stories-container .story {
        height: auto;
        margin: 20px 0;
        flex-direction: column;
        padding: 20px
    }

    .testimonials-container .testimonials-section .stories-container .story .image {
        width: 80px;
        top: -40px;
        left: 50%;
        transform: translate(-50%)
    }

    .testimonials-container .testimonials-section .stories-container .story .qopen img,.testimonials-container .testimonials-section .stories-container .story .qclose img {
        width: 30px;
        height: 30px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .top,.testimonials-container .testimonials-section .stories-container .story .quoteContainer .middle,.testimonials-container .testimonials-section .stories-container .story .quoteContainer .bottom {
        margin-top: 16px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 10px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 10px
    }

    .testimonials-container .testimonials-section .video-stories-container {
        flex-direction: row;
        gap: 40px;
        padding: 5px 20px
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story {
        flex-direction: column;
        padding: 20px 0;
        height: 500px;
        min-width: 90vw
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .left {
        padding: 2rem 1rem;
        width: 100%;
        height: max-content
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .left h1 {
        font-size: 20px;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .left p {
        font-size: 14px;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .right {
        margin-top: 40px;
        background-size: cover;
        background-position: center;
        height: 250px;
        right: 0;
        top: 40%;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .video-testimonial-story .right .playbutton img {
        width: 40px;
        height: 40px
    }

    .video-testimonial-story {
        flex-direction: column
    }

    .video-testimonial-story .playbutton {
        width: 50px;
        height: 50px;
        top: 25%;
        left: 43%;
        margin-top: inherit
    }

    .video-testimonial-story .left {
        width: 100%;
        height: auto;
        padding: 40px 20px
    }

    .video-testimonial-story .left h1 {
        font-size: 28px;
        margin-bottom: 12px
    }

    .video-testimonial-story .left p {
        font-size: 16px
    }

    .video-testimonial-story .right {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 20px;
        top: -4%
    }

    .video-testimonial-story .playbutton {
        width: 60px;
        height: 60px
    }

    .modal-content {
        width: 95%
    }
}

.scroller {
    padding-top: 3%;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
    width: 30%;
    margin: auto
}

.scroller .slider {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center
}

.scroller .slider-bar {
    height: 8px;
    width: 95%;
    background-color: #bc2329
}

@media (min-width: 1440px) and (max-width: 1536px) {
    .scroller {
        width:30%;
        margin: auto;
        padding-top: 1%
    }

    .scroller .slider img {
        width: 80%
    }

    .scroller .slider-bar {
        height: 5px;
        width: 90%
    }
}

@media (max-width: 480px) {
    .scroller {
        width:60%!important;
        padding-top: 5%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        margin: auto!important
    }

    .scroller .slider {
        position: absolute;
        left: 0
    }

    .scroller .slider img {
        width: 50%
    }

    .scroller .slider-bar {
        height: 2px!important;
        width: 95%!important;
        background-color: #bc2329!important
    }
}

.cta {
    width: 100%;
    height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(0deg,#0003,#0003),url(../assets/cta-BJNaj5ZO.jpeg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed
}

.cta h1 {
    font-size: 2.9vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 1.2%;
    width: 60%
}

.cta p {
    font-size: 1.2vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 2.4%
}

.cta .event100HrsOfMaacCTA-button .animated-button {
    border: .1vw solid #fff;
    color: #fff
}

.cta .event100HrsOfMaacCTA-button .btn-background {
    background-color: #fff
}

@media (max-width: 992px) {
    .cta {
        height:270px;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/cta-BJNaj5ZO.jpeg) #d3d3d3 0px -85.974px/100% 147.032% no-repeat
    }
}

@media (max-width: 767px) {
    .cta {
        display:flex;
        height: 211px;
        padding: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        background-position: center center;
        background: linear-gradient(0deg,#0006,#0006),url(../assets/cta-BJNaj5ZO.jpeg) #d3d3d3 0px -85.974px/100% 147.032% no-repeat
    }

    .cta h1 {
        font-size: 20px;
        width: 100%;
        width: 90%
    }

    .cta p {
        font-size: 16px;
        width: 90%
    }

    .cta .event100HrsOfMaacCTA-button .animated-button {
        font-size: 16px;
        width: 238px
    }
}

.footer {
    background-color: #821131;
    padding: 20px 30px
}

.footer .fp {
    font-weight: 500;
    font-size: .95rem
}

.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 {
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    object-position: center;
    max-width: 100%
}

.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: #ffffff40
}

.flickity-page-dot.is-selected {
    background: #e2d40e
}

@media screen and (max-width: 768px) {
    .stu-top-banner-container {
        height:auto;
        min-height: 510px
    }

    .stu-top-banner-container .carousel {
        position: relative
    }

    .stu-top-banner-container .carousel-cell {
        height: auto
    }

    .stu-top-banner-container .carousel-cell img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: top
    }

    .stu-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 45px;
    background: #fff;
    border-radius: 7px;
    position: absolute;
    top: 6%;
    right: 5%;
    background-color: #f3f3f3;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5cAAAJWCAMAAAD7iINyAAAAY1BMVEXz8/OZP1jwrxOkVWzo3eCvbH+7gpLt6OnAjpvxty/Rr7meSmKqYXXdxszy4rvyzXXMpLDi0dbz7+Xy0YPxxVnxvUGfSmLXu8LGmaa1d4nwsyHcxszy2p/GmaXy3q3BjpzxsyH4ziayAAAJAklEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGD24EAAAAAAAMj/tRFUVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVYU9OBAAAAAAAPJ/bQRVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWEPDgQAAAAAgPxfG0FVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVdiDAwEAAAAAIP/XRlBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVFfbgQAAAAAAAyP+1EVRVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVYedesFKHoTAKn7/pi7ZqBXmJOv9h3oesdRdeqFpM0pT9jeFsEpIAAAAAAAAAAAAAAAAAAAAAAAAAAKQu3zavZVk45/TOua7Yl6/N3aMBCN1P3tR7pyFdUW+pEwjUT7Wti1Zf0xb1tjIAXvs51IW+q6vvDICffqqmbDVOu29YNnHbvPRTbYtWV9k3BtwoP/0c6lbXcyUbWtwiL/1UfaGf4lg0cWP89FPtWv0kV+YG3Ao//eSlfh5l4kb46kdHlAlMoso/TH5QJmYvL+WLyZ8dZWK+ql0rb0zecDaLGetbeWTyyrFkYo4eC3ll8mxnwMxUtTwz+cWSidk5OPlm8o0lE7NS1fLP5B1LJmYk7xSAKYRNb8Ac9K1CMIVRG5C8qlYYpiDYy2IG8k6BmEJx/EcX0nZoFYopHL5kImW9wjEFw4UJUrZTQKZwOP1BumqFZAqqNCBFpYIyhdXxb5ZIT9UpLFNQhIkEhc4yfJeEieSEz1Km4DoDUtIpOFNoHP4gLaXCMwXHdQlSUisCU3g8MEA6dorBFAFP8pCKXlGY4uARO1LwqDhMMfCzLyQhd4rDFAXXmEhA5RSJKZbavuh+9bTIsmyxXt0bMMrpHE36KPYvUzS9fcFy9Zz9s3gx4IMxczTlMx8papeb3D71tsh+o0wM8TRHeatoTPF09onlQ/a/BwNOeJojp3hMEdU2aLnOzlkvDTgxbo6m+KDgyBTTnQ1ZZxlh4irDczTFm8t3pphcZZcdNx9sZTHe8BxNdRcbucvBnexLdtmbASfGzdFEd7HRuxx4j7fILluwk8WA6+coV0zxuywGPuYGrAw4MW6OprmLjd+l+osfc0OeDRhw5Rw1imoCXW4qO+c+G8aTPHwwbo6m9Vz9aAJd6tXOWWUZG1l8x7g5muKhj6bQ5SY/f+c07Mnwi707UE8ThqIAfC8h4FRW3CxWO2ff/yn3tV1nQatcheuJO/8T+OXmGBJCQgfs/Qhx0UcRcqmFZVrw4ZsQHbD3I5SDtlogcqm5HMrOEaLzsnMwh0uIXBbMJb2DyCXAcAmRS82ZS3oHkEuE4RIjlwXnl/Th5vNLhOESI5daStcyO+1RiA7Y+xHmcAmSyy3fX9IQ7P0Ic7gEyWVTcr8PDcHcj+B2xr5CyaXW0rXh9JLsrP0Ib2fsK5hcRuMDCE/foqOs/Qh0uETJpVbS8eMbh0uyu7IfVYoBJZc76frN4ZLsbP0IdNUHJ5dNyfN9aGj2fjRTDCi51OrI8YJ8d0lmhn4E+D30O6BcRp4fSwOz96O1goDJZVP2fAR5YCzJwNKPSkUBk0udyhG/Du6V4BGVZHS8H0Ee6/MXUi6LHi368pODJRmc7EfAj7FAuWy+vrfw8e3ewiXvvySb0/0IdzUWKZdaCZEj2E0FCpXLnRCNAf966A6oXEYhuqW5wgDKpZZC5AX5LQlWLldCdDsrxYGUS04wyehep5dQueQEk24pKg6kXDZCND78t5dYudRciG5loUCgcjmVi5TP00kRQ9BXIcT1pK64tvt/OFr79Jd9sHK5E7O8LoIeM19PF0L37GTt0172wcrlWmyeJ0FPCQX39t2rHrVPeNkHK5dBDMqnmZ4XCk5a70/v2ie62wcslyq9PUftK3LQvC/j1B4sCYokN1TGIEyF7oW59ikux4LlcmWojEngHr/7cFHtU/vIS9FyOZXz8qiX4DzzDgxVe+wzRFTRcrmVs+qZXuhJKG2j1n6rSLByWRj+MO0Ch8yUDVl70NvbP6SWy3qm12hqoVQNWHvwM7dU0XIZ5ZRyoteaCCVpiNontK0ALJdBTsjner05n2VTNFDtk9lWkFAu86DX4yQzSSPUHvXiyzcJ5XIRdBiB29lTM2DtmcuLfF2amQ6lYTDTMmjt09iGl0ouBywNg5mYgWvPXF7APr+w4xwzKYPXnrm0cykNg5mQEWrPXJp5LWHPec5IIsaoPXNp5XbAw0S6vi832WbJK8NcdVvfp/bMpZUcUesY6i+uFH4QctRtfZ/aM5c2QQ7lMx1Dk3c7BoPp77D1fWrP95cmwbG9YusxKtvjo6yrbuu71J65NJnLgScdSy17y2xvKeSo2/o+tWcuLaJ05TqS9tPMJtvbCDnqtr5T7fk9icHa9WvVKP9knwn5yj5zqj2/izbY+Z5NX3G8hNBqfa/aM5f9bX0f+iPnlxBare9Ve57v09/U+YyyiuuxCFqt71Z7nofXW+W8Rhb5/hJCq/W9ao98nRdYLhfeR+1W3O8DodX6brVvyRUJVi7dl67j5x2aL9kL98f66ra+a+2RN+JB/Zq5/z8YvyvB5FJ74I0FULmM/ivXWyFELrUHPkAWKpc7/z+wRgiRS+15X3Q/qxtcsMTLMRE51R73RQlULhc32ICxE8LzZ3SK+8E7IAsAl/TCex5zPvkAAAAASUVORK5CYII=);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat
}

.newGiftForm__form h2 {
    color: var(--PRIMARY-RED-COLOR, #dc143c);
    text-shadow: 0px 2px 2px rgba(0,0,0,.3);
    font-family: Raleway,sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    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-family: Raleway,sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .8px
}

.newEnquiryForm .input-group .input-field {
    padding: 10px 15px;
    color: var(--GREY-COLOR, #2c2c2c);
    height: 40px;
    font-family: Raleway,sans-serif;
    font-size: .95rem;
    font-style: normal;
    background-color: transparent;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.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: 10px
}

.newEnquiryForm .checkbox-container {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: left;
    font-style: italic
}

.newEnquiryForm .checkbox-container span,.newEnquiryForm .checkbox-container a {
    color: #333;
    text-decoration: underline;
    cursor: pointer
}

.newEnquiryForm .checkbox-container a:hover {
    text-decoration: none
}

.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: 25px;
    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-family: Raleway,sans-serif;
    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;
    font-family: "system-ui";
    text-align: center
}

.thankYouDiv h3 {
    font-size: 40px;
    font-weight: 400;
    font-family: "system-ui";
    padding-top: 20px;
    text-align: center
}

.thankYouDiv p {
    font-size: 25px;
    font-weight: 400;
    font-family: "system-ui";
    padding-top: 20px;
    text-align: center
}

.enquiry-contact-buttons {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    justify-content: center;
    height: 45px
}

.enquiry-contact-buttons button {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: #e7f3ec;
    border: none;
    padding: .5rem 1rem;
    cursor: pointer;
    border-radius: 50em;
    font-weight: 700;
    color: #fff;
    transition: background-color .3s ease,transform .2s ease
}

.enquiry-contact-buttons button:hover {
    transform: scale(1.03)
}

.enquiry-contact-buttons .whatsapp-button {
    background-color: #1daa61
}

.enquiry-contact-buttons .whatsapp-button:hover {
    background-color: #167e48
}

.enquiry-contact-buttons .call-button {
    background-color: #dc143c
}

.enquiry-contact-buttons .call-button:hover {
    background-color: #ad102f
}

.enquiry-contact-buttons .icon {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease,transform .3s ease;
    text-decoration: none
}

.icon.whatsapp svg {
    width: 26px;
    height: 26px
}

.icon.phone svg {
    width: 24px;
    height: 24px
}

.fade-warning {
    color: #dc143c;
    padding: 5px;
    border: 1px dashed #e6b800;
    font-size: .8rem;
    text-align: center;
    margin-top: 10px;
    background: #fff;
    opacity: 1;
    max-height: 100px;
    overflow: hidden;
    transition: opacity .5s ease-in-out,max-height .5s ease-in-out,margin .5s ease-in-out,padding .5s ease-in-out
}

.fade-warning.hide {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0
}

@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-family: Raleway,sans-serif;
        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-family: Raleway,sans-serif;
        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: 1rem;
        border: none;
        border-radius: 25px;
        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-family: Raleway,sans-serif;
        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;
        font-family: "system-ui";
        text-align: center
    }

    .thankYouDiv h3 {
        font-size: 20px;
        font-weight: 400;
        font-family: "system-ui";
        padding-top: 20px;
        text-align: center
    }

    .thankYouDiv p {
        font-size: 14px;
        font-weight: 400;
        font-family: "system-ui";
        padding-top: 20px;
        text-align: center
    }
}

.header {
    background-color: #000;
    padding: 3.24vh 6.25vw;
    display: flex;
    align-items: center
}

.header .logo img {
    height: 7.63vh;
    object-fit: contain
}

.CpTrainingPartner {
    background-color: #821131;
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    display: flex;
    padding: 4.5% 5%
}

.CpTrainingPartner .head {
    width: 60%;
    display: flex;
    flex-direction: column
}

.CpTrainingPartner .head .heading {
    width: 70%
}

.CpTrainingPartner .head .title {
    width: 65%;
    align-self: stretch
}

.CpTrainingPartner .corner-button {
    padding-top: 8%
}

.CpTrainingPartner .tp_Container {
    width: 40%;
    justify-content: center;
    align-items: center;
    gap: 5%;
    display: flex
}

.CpTrainingPartner .tp_Container img {
    width: 100%;
    height: 80%;
    max-width: 200px;
    border-radius: 10px;
    object-fit: contain;
    background-color: #fff
}

@media (max-width: 1536px) {
    .CpTrainingPartner .head {
        width:55%
    }

    .CpTrainingPartner .head .title {
        width: 70%
    }

    .CpTrainingPartner .corner-button {
        padding-top: 6%
    }

    .CpTrainingPartner .tp_Container {
        width: 40%;
        gap: 3%
    }
}

@media (max-width: 992px) {
    .CpTrainingPartner {
        padding:5%
    }

    .CpTrainingPartner .head {
        width: 52%;
        align-items: left;
        padding: 0
    }

    .CpTrainingPartner .head .heading {
        width: 80%
    }

    .CpTrainingPartner .head h2 {
        text-align: left;
        font-size: 34px
    }

    .CpTrainingPartner .head h3 {
        width: 100%;
        font-size: 18px;
        text-align: left;
        margin-bottom: 4%
    }

    .CpTrainingPartner img {
        width: 100%;
        height: 50%!important;
        max-width: 200px!important;
        border-radius: 10px;
        object-fit: contain;
        background-color: #fff
    }
}

@media (max-width: 767px) {
    .CpTrainingPartner {
        flex-direction:column;
        align-items: center;
        padding: 45px 15px;
        text-align: center
    }

    .CpTrainingPartner .head {
        width: 100%;
        align-items: left;
        padding: 0!important
    }

    .CpTrainingPartner .head .heading {
        width: 100%
    }

    .CpTrainingPartner .head h2 {
        text-align: left;
        font-size: 2rem
    }

    .CpTrainingPartner .head h3 {
        width: 100%!important;
        font-size: 14px!important;
        text-align: left;
        margin-bottom: 4%
    }

    .CpTrainingPartner .head .corner-button {
        display: none
    }

    .CpTrainingPartner .corner-button {
        padding-top: 5%
    }

    .CpTrainingPartner .tp_Container {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding: 0
    }

    .CpTrainingPartner img {
        max-width: 160px!important
    }
    /*------------------custom media query-------------------------------*/
    #hero-thumbnail-container {
    display: none !important;
    }
    .BigLeague {
    display: unset;
}
.BigLeague .Student_container {
    margin-top: 35px;
}
.whyMaacLegacy {
        height: unset;
}
    .whyMaacLegacy .right {
        display: none;
    }
}

.mumbai-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: linear-gradient(180deg,#0000 12.98%,#331d00cc 37.98%,#693c00 87.02%);
    color: #fff
}

.mumbai-hero .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mumbai-hero .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom,transparent,rgba(0,0,0,.6))
}

.mumbai-hero .content {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
    padding: 80px 7.4% 20px;
    text-align: center
}

@media (max-width: 768px) {
    .mumbai-hero .content {
        padding:60px 3.4% 20px
    }
}

.mumbai-hero .heading-hero {
    font-size: 5.5rem;
    font-weight: 900;
    color: #f0af13;
    text-shadow: 0 4px 6px rgba(0,0,0,.6);
    text-align: center;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .mumbai-hero .heading-hero {
        font-size:3.5rem
    }
}

.mumbai-hero .quote {
    margin-top: 2rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fc3
}

@media (max-width: 768px) {
    .mumbai-hero .quote {
        font-size:1.5rem
    }
}

.mumbai-hero .paragraph {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: #ffffffe6;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto
}

.mumbai-hero .thumbs {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5rem
}

.mumbai-hero .thumb {
    position: relative;
    background: #ffffff0d
}

.mumbai-hero .thumb img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover
}

@media (max-width: 768px) {
    .mumbai-hero .thumb img {
        height:auto
    }
}

.mumbai-hero .corner {
    position: absolute
}

.mumbai-hero .top-horizontal {
    top: -12px;
    left: -12px;
    width: 145px;
    height: 2px;
    background: #bc2329
}

.mumbai-hero .top-vertical {
    top: -12px;
    left: -12px;
    width: 2px;
    height: 110px;
    background: #f0af13
}

.mumbai-hero .bottom-horizontal {
    left: auto;
    right: -10px;
    bottom: -12px;
    height: 2px;
    width: 145px;
    background: #bc2329
}

.mumbai-hero .bottom-vertical {
    bottom: -12px;
    right: -12px;
    width: 2px;
    height: 110px;
    background: #f0af13
}

.mumbai-hero .cta-wrapper {
    margin-top: 2rem;
    align-items: center;
    display: flex;
    justify-content: center
}

.mumbai-hero .cta-btn {
    display: inline-block;
    padding: .75rem 2rem;
    border: 2px solid #ffc107;
    border-radius: 999px;
    color: #fc3;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease
}

.mumbai-hero .cta-btn:hover {
    background: #ffc107;
    color: #564116
}

.mumbai-hero .decorative-img {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    width: 75%;
    max-height: 55vh;
    object-fit: cover;
    filter: blur(2px);
    opacity: .06;
    pointer-events: none
}

.virtualtour {
    background-color: #000;
    color: #fff
}

.virtualtour .two-col-wrapper {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    align-items: center;
    width: 100%;
    padding: 20px 7.4%;
    margin: 0 auto
}

@media (max-width: 768px) {
    .virtualtour .two-col-wrapper {
        grid-template-columns:1fr;
        padding: 20px 0
    }
}

.virtualtour .left-col .icon {
    width: 80px;
    margin-bottom: 1rem
}

.virtualtour .left-col .heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #f0af13
}

.virtualtour .left-col .paragraph {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #fff;
    line-height: 1.6
}

.virtualtour .left-col .cta-btn {
    display: inline-block;
    padding: .75rem 2rem;
    border: 2px solid #BC2329;
    background: transparent;
    color: #bc2329;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: all .3s ease
}

.virtualtour .left-col .cta-btn:hover {
    background: #bc2329;
    color: #fff
}

.virtualtour .right-col {
    padding: 3rem
}

.virtualtour .right-col .video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000
}

.virtualtour .right-col .video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.virtualtour .right-col .video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.virtualtour .right-col .video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 3rem;
    color: #fff;
    background: #0009;
    border-radius: 50%;
    padding: .75rem 1rem;
    transition: all .3s ease
}

.virtualtour .right-col .video-thumbnail .play-icon:hover {
    background: #f0af13;
    color: #000
}

.virtualtour .right-col .video-iframe {
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .virtualtour .right-col {
        padding:30px 15px
    }
}

.virtualtour .vt-corner {
    position: absolute
}

.virtualtour .vt-top-horizontal {
    top: -12px;
    left: -12px;
    width: 90px;
    height: 2px;
    background: #bc2329
}

.virtualtour .vt-top-vertical {
    top: -12px;
    left: -12px;
    width: 2px;
    height: 90px;
    background: #f0af13
}

.virtualtour .vt-bottom-horizontal {
    left: auto;
    right: -10px;
    bottom: -12px;
    height: 2px;
    width: 90px;
    background: #bc2329
}

.virtualtour .vt-bottom-vertical {
    bottom: -12px;
    right: -12px;
    width: 2px;
    height: 90px;
    background: #f0af13
}

.hostel-facility {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: linear-gradient(180deg,#0000 12.98%,#331d00cc 37.98%,#693c00 87.02%);
    color: #fff
}

.hostel-facility .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hostel-facility .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom,transparent,rgba(0,0,0,.6))
}

.hostel-facility .content {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
    padding: 80px 7.4% 20px;
    text-align: center
}

@media (max-width: 768px) {
    .hostel-facility .content {
        padding:60px 3.4% 20px
    }
}

.hostel-facility .heading-hero {
    font-size: 4.5rem;
    font-weight: 900;
    color: #f0af13;
    text-shadow: 0 4px 6px rgba(0,0,0,.6);
    text-align: center;
    text-transform: uppercase;
    line-height: 4.72rem
}

@media (max-width: 768px) {
    .hostel-facility .heading-hero {
        font-size:2.5rem;
        line-height: 2.72rem
    }
}

.hostel-facility .quote {
    margin-top: 2rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fc3
}

.hostel-facility .paragraph {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: #ffffffe6;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto
}

.hostel-facility .thumbs {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5rem
}

.hostel-facility .thumb {
    position: relative;
    background: #ffffff0d
}

.hostel-facility .thumb img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover
}

@media (max-width: 768px) {
    .hostel-facility .thumb img {
        height:auto
    }
}

.hostel-facility .corner {
    position: absolute
}

.hostel-facility .top-horizontal {
    top: -12px;
    left: -12px;
    width: 145px;
    height: 2px;
    background: #bc2329
}

.hostel-facility .top-vertical {
    top: -12px;
    left: -12px;
    width: 2px;
    height: 110px;
    background: #f0af13
}

.hostel-facility .bottom-horizontal {
    left: auto;
    right: -10px;
    bottom: -12px;
    height: 2px;
    width: 145px;
    background: #bc2329
}

.hostel-facility .bottom-vertical {
    bottom: -12px;
    right: -12px;
    width: 2px;
    height: 110px;
    background: #f0af13
}

.hostel-facility .cta-wrapper {
    margin-top: 2rem;
    align-items: center;
    display: flex;
    justify-content: center
}

.hostel-facility .cta-btn {
    display: inline-block;
    padding: .75rem 2rem;
    border: 2px solid #ffc107;
    border-radius: 999px;
    color: #fc3;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease
}

.hostel-facility .cta-btn:hover {
    background: #ffc107;
    color: #564116
}

.hostel-facility .decorative-img {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    width: 75%;
    max-height: 55vh;
    object-fit: cover;
    filter: blur(2px);
    opacity: .06;
    pointer-events: none
}

.local-vibes {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: linear-gradient(180deg,#0000 12.98%,#331d00cc 37.98%,#693c00 87.02%);
    color: #fff
}

@media (max-width: 768px) {
    .local-vibes {
        padding-top:60px
    }
}

.local-vibes .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.local-vibes .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom,transparent,rgba(0,0,0,.6))
}

.local-vibes .content {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
    padding: 80px 7.4% 20px;
    text-align: center
}

@media (max-width: 768px) {
    .local-vibes .content {
        padding:60px 3.4% 20px
    }
}

.local-vibes .heading-hero {
    font-size: 4.5rem;
    font-weight: 900;
    color: #f0af13;
    text-shadow: 0 4px 6px rgba(0,0,0,.6);
    text-align: center;
    text-transform: uppercase;
    line-height: 4.72rem
}

@media (max-width: 768px) {
    .local-vibes .heading-hero {
        font-size:2.5rem;
        line-height: 2.72rem
    }
}

.local-vibes .quote {
    margin-top: 2rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fc3
}

@media (max-width: 768px) {
    .local-vibes .quote {
        margin-top:1rem;
        font-size: 1.5rem
    }
}

.local-vibes .paragraph {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: #ffffffe6;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto
}

.local-vibes .thumbs {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5rem
}

.local-vibes .thumb {
    position: relative;
    background: #ffffff0d
}

.local-vibes .thumb img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover
}

@media (max-width: 768px) {
    .local-vibes .thumb img {
        height:auto
    }
}

.local-vibes .corner {
    position: absolute
}

.local-vibes .top-horizontal {
    top: -12px;
    left: -12px;
    width: 145px;
    height: 2px;
    background: #bc2329
}

.local-vibes .top-vertical {
    top: -12px;
    left: -12px;
    width: 2px;
    height: 110px;
    background: #f0af13
}

.local-vibes .bottom-horizontal {
    left: auto;
    right: -10px;
    bottom: -12px;
    height: 2px;
    width: 145px;
    background: #bc2329
}

.local-vibes .bottom-vertical {
    bottom: -12px;
    right: -12px;
    width: 2px;
    height: 110px;
    background: #f0af13
}

.local-vibes .cta-wrapper {
    margin-top: 2rem;
    align-items: center;
    display: flex;
    justify-content: center
}

.local-vibes .cta-btn {
    display: inline-block;
    padding: .75rem 2rem;
    border: 2px solid #ffc107;
    border-radius: 999px;
    color: #fc3;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease
}

.local-vibes .cta-btn:hover {
    background: #ffc107;
    color: #564116
}

.local-vibes .decorative-img {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    width: 75%;
    max-height: 55vh;
    object-fit: cover;
    filter: blur(2px);
    opacity: .06;
    pointer-events: none
}

.admission-process {
    background-color: #bc2329;
    color: #fff;
    padding: 0
}

.admission-process .two-col-wrapper {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 0px;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 auto
}

@media (max-width: 768px) {
    .admission-process .two-col-wrapper {
        grid-template-columns:1fr
    }
}

.admission-process .left-col {
    padding: 3rem;
    text-align: center
}

.admission-process .left-col .icon {
    width: 80px;
    margin-bottom: 1rem
}

.admission-process .left-col .heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff
}

.admission-process .left-col .paragraph {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #fff;
    line-height: 1.6
}

.admission-process .left-col .cta-wrapper {
    margin-top: 2rem;
    align-items: center;
    display: flex;
    justify-content: center
}

.admission-process .left-col .cta-btn {
    display: inline-block;
    padding: .75rem 2rem;
    border: 2px solid #BC2329;
    background: transparent;
    color: #bc2329;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: all .3s ease
}

.admission-process .left-col .cta-btn:hover {
    background: #bc2329;
    color: #fff
}

.admission-process .left-col .animated-button {
    color: #fff;
    border: 1px solid #fff
}

@media (max-width: 768px) {
    .admission-process .left-col {
        padding:2rem
    }
}

.admission-process .right-col {
    padding: 0rem
}

.admission-process .right-col .video-wrapper {
    position: relative;
    width: 100%;
    background: #000
}

.admission-process .right-col .video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.admission-process .right-col .video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.admission-process .right-col .video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.admission-process .right-col .video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 3rem;
    color: #fff;
    background: #0009;
    border-radius: 50%;
    padding: .75rem 1rem;
    transition: all .3s ease
}

.admission-process .right-col .video-thumbnail .play-icon:hover {
    background: #f0af13;
    color: #000
}

.admission-process .right-col .video-iframe {
    width: 100%;
    height: 100%
}

.admission-process .vt-corner {
    position: absolute
}

.admission-process .vt-top-horizontal {
    top: -12px;
    left: -12px;
    width: 90px;
    height: 2px;
    background: #bc2329
}

.admission-process .vt-top-vertical {
    top: -12px;
    left: -12px;
    width: 2px;
    height: 90px;
    background: #f0af13
}

.admission-process .vt-bottom-horizontal {
    left: auto;
    right: -10px;
    bottom: -12px;
    height: 2px;
    width: 90px;
    background: #bc2329
}

.admission-process .vt-bottom-vertical {
    bottom: -12px;
    right: -12px;
    width: 2px;
    height: 90px;
    background: #f0af13
}

.Cp3dPrinting {
    padding: 3.48% 3.2%
}

.Cp3dPrinting .head {
    display: flex;
    justify-content: space-between;
    padding: 0 .2%
}

.Cp3dPrinting .testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.Cp3dPrinting .testimonials-section .video-stories-container {
    display: flex;
    width: 100%;
    overflow: auto;
    position: relative
}

.Cp3dPrinting .testimonials-section .video-stories-container::-webkit-scrollbar {
    display: none
}

.Cp3dPrinting .mobile-button {
    display: none;
    margin-top: 80px
}

.Cp3dPrinting .mobile-button button {
    margin: auto
}

.Cp3dPrinting .title-desc {
    font-size: 1.3rem;
    margin-top: 0
}

.testimonials-container {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 3%
}

.testimonials-container .testimonials-header {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto
}

.testimonials-container .testimonials-header h1 {
    color: var(--WHITE-COLOR, #FFF);
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: normal;
    margin-bottom: 20px
}

.testimonials-container .testimonials-header h4 {
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: 24px;
    padding: 0 40px;
    width: 40vw
}

.testimonials-container .testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.testimonials-container .testimonials-section .testimonials-title {
    color: #fbc51d;
    text-align: center;
    font-family: Raleway;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
    margin-top: 100px
}

.testimonials-container .testimonials-section .testimonials-sub-title {
    text-align: center;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 100px
}

.testimonials-container .testimonials-section .stories-container {
    padding: 5% 0 2%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(500px,1fr));
    justify-items: center;
    align-items: center
}

.testimonials-container .testimonials-section .stories-container .story {
    background-color: #0f0f0f;
    position: relative;
    min-width: 33%;
    height: 500px;
    display: flex;
    padding: 4% 2%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.5);
    text-align: center;
    align-items: stretch;
    margin: 8%
}

.testimonials-container .testimonials-section .stories-container .story .qopen {
    position: absolute;
    top: 3%;
    left: 3%
}

.testimonials-container .testimonials-section .stories-container .story .qopen img {
    width: 40px;
    height: 40px
}

.testimonials-container .testimonials-section .stories-container .story .qclose {
    bottom: 3%;
    right: 3%;
    position: absolute
}

.testimonials-container .testimonials-section .stories-container .story .qclose img {
    width: 40px;
    height: 40px
}

.testimonials-container .testimonials-section .stories-container .story .image {
    width: 25%;
    position: absolute;
    top: -10%;
    left: 41%
}

.testimonials-container .testimonials-section .stories-container .story .image img {
    height: 100%;
    width: 100%
}

.testimonials-container .testimonials-section .stories-container .story .quoteContainer .top {
    width: 100%;
    margin-top: 102px;
    margin-left: auto;
    margin-right: auto
}

.testimonials-container .testimonials-section .stories-container .story .quoteContainer .middle {
    width: 100%;
    margin-top: 20px
}

.testimonials-container .testimonials-section .stories-container .story .quoteContainer .bottom {
    width: 100%;
    margin-top: 30px
}

.testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
    color: #bc2329;
    font-size: 20px;
    padding: 4% 16% 0;
    font-weight: 400
}

.testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
    font-family: Raleway,sans-serif;
    padding: 0 16%;
    font-size: 16px
}

.testimonials-container .testimonials-section .video-stories-container {
    display: flex;
    width: 100%;
    overflow: scroll;
    position: relative
}

.testimonials-container .testimonials-section .video-stories-container::-webkit-scrollbar {
    display: none
}

.printing-video {
    margin-top: 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    min-width: 100vw;
    padding: 0;
    gap: 0
}

.printing-video .left {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 6%;
    height: 410px;
    width: 54.4%;
    background: var(--Deep-maroon-color, #770006);
    box-shadow: -5px -5px 20px #bc2329 inset,5px 5px 20px #bc2329 inset;
    z-index: 0
}

.printing-video .left h1 {
    width: 80%;
    color: #f0af13;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.2%
}

.printing-video .left p {
    width: 70%;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.printing-video .right {
    z-index: 1;
    right: 140px;
    position: absolute;
    width: 46.9%;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center
}

.printing-video .playbutton {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(270deg,#ff0080,#7928ca,#2afadf,#00c9ff);
    background-size: 600% 600%;
    animation: gradientLoop 8s ease infinite;
    box-shadow: 0 0 12px #ff008080
}

.printing-video .playbutton img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in-out
}

.printing-video .playbutton:hover img {
    transform: scale(1.1)
}

@keyframes gradientLoop {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0% 50%
    }
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.modal-content {
    position: relative;
    width: 800px;
    max-width: 90%;
    background: #000;
    padding: 10px;
    border-radius: 8px
}

.close-button {
    position: absolute;
    top: -10px;
    right: -20px;
    background: #bc2329;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.close-button:hover {
    background: #fff;
    color: #000
}

@media (max-width: 1536px) {
    .CpHomeVideo .testimonials-section .stories-container {
        grid-template-columns:repeat(auto-fit,minmax(400px,1fr))
    }

    .CpHomeVideo .testimonials-section .stories-container .story {
        height: 550px;
        padding: 3% 2%;
        margin: 6%
    }

    .CpHomeVideo .testimonials-section .stories-container .story .image {
        top: -8%;
        left: 40%
    }

    .CpHomeVideo .testimonials-section .stories-container .story .quoteContainer .top {
        margin-top: 90px
    }

    .CpHomeVideo .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 4% 12% 0
    }

    .CpHomeVideo .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 15px;
        padding: 0 12%
    }

    .CpHomeVideo .mobile-button {
        display: none;
        margin-top: 80px
    }

    .CpHomeVideo .mobile-button button {
        margin: auto
    }

    .printing-video .playbutton {
        margin-top: -2%
    }
}

@media only screen and (max-width: 1366px) {
    .printing-video .playbutton {
        margin-top:-15%
    }
}

@media (max-width: 992px) {
    .printing-video .left {
        height:260px;
        padding-left: 2%;
        padding-right: 15%
    }

    .printing-video .left h1 {
        font-size: 2rem
    }

    .printing-video .left p {
        width: 90%;
        font-size: 1.25rem
    }

    .printing-video .right {
        right: 125px;
        top: 11%
    }

    .printing-video .playbutton {
        margin-top: -49%
    }

    .printing-video .modal-overlay .modal-content .close-button {
        top: -15px;
        right: -15px;
        font-size: 14px;
        width: 28px;
        height: 28px
    }
}

@media (max-width: 480px) {
    .Cp3dPrinting {
        padding:0;
        padding-bottom: 2rem
    }

    .Cp3dPrinting .head {
        padding: 1rem
    }

    .Cp3dPrinting .head .head-content {
        gap: 10px
    }

    .Cp3dPrinting .head .head-content .title {
        font-size: 1rem;
        margin-top: .5rem
    }

    .Cp3dPrinting .head .head-content .title-desc {
        font-size: .875rem;
        margin-top: .25rem
    }

    .Cp3dPrinting .head .corner-button {
        display: none
    }

    .Cp3dPrinting .testimonials-section .video-stories-container {
        flex-direction: row;
        flex: 0 0 100%;
        gap: 2rem 0
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video {
        flex-direction: column;
        text-align: center;
        padding: 0 1rem;
        width: 100%!important
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video .left {
        height: auto;
        width: 100%;
        padding: 1rem
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video .left h1 {
        font-size: 1.2rem;
        width: 100%;
        margin-bottom: .5rem
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video .left p {
        width: 100%;
        font-size: .875rem;
        line-height: 1.4
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video .right {
        right: 0;
        width: 100%;
        height: 180px;
        background-size: cover!important;
        background-position: center center!important;
        position: relative
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video .right .playbutton {
        width: 48px;
        height: 48px
    }

    .Cp3dPrinting .testimonials-section .video-stories-container .printing-video .right .playbutton img {
        width: 100%;
        height: auto
    }

    .Cp3dPrinting .testimonials-section .modal-content {
        width: 90%;
        max-width: 100%;
        position: relative
    }

    .Cp3dPrinting .testimonials-section .modal-content iframe {
        width: 100%;
        height: 200px
    }

    .Cp3dPrinting .mobile-button {
        margin-top: 10%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        width: 100%!important;
        text-align: center!important
    }

    .Cp3dPrinting .mobile-button .animated-button {
        width: 80%!important;
        font-size: 16px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fabc3f;
        border: 1px solid #fabc3f;
        background-color: transparent
    }

    .Cp3dPrinting .mobile-button .animated-button:hover .btn-text {
        color: #000
    }

    .Cp3dPrinting .heading {
        font-size: 2.35rem
    }

    .testimonials-container {
        padding-bottom: 10%
    }

    .testimonials-container .testimonials-header {
        height: auto;
        padding: 60px 20px
    }

    .testimonials-container .testimonials-header h1 {
        font-size: 36px;
        margin-bottom: 16px
    }

    .testimonials-container .testimonials-header h4 {
        font-size: 16px;
        padding: 0 10px;
        width: 100%
    }

    .testimonials-container .testimonials-section .testimonials-title {
        font-size: 32px;
        margin-top: 60px;
        margin-bottom: 16px
    }

    .testimonials-container .testimonials-section .testimonials-sub-title {
        font-size: 16px;
        margin-bottom: 40px;
        padding: 0 10px
    }

    .testimonials-container .testimonials-section .stories-container {
        grid-template-columns: 1fr;
        padding: 5% 10px
    }

    .testimonials-container .testimonials-section .stories-container .story {
        height: auto;
        margin: 20px 0;
        flex-direction: column;
        padding: 20px
    }

    .testimonials-container .testimonials-section .stories-container .story .image {
        width: 80px;
        top: -40px;
        left: 50%;
        transform: translate(-50%)
    }

    .testimonials-container .testimonials-section .stories-container .story .qopen img,.testimonials-container .testimonials-section .stories-container .story .qclose img {
        width: 30px;
        height: 30px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .top,.testimonials-container .testimonials-section .stories-container .story .quoteContainer .middle,.testimonials-container .testimonials-section .stories-container .story .quoteContainer .bottom {
        margin-top: 16px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .name {
        font-size: 18px;
        padding: 10px
    }

    .testimonials-container .testimonials-section .stories-container .story .quoteContainer .desc {
        font-size: 14px;
        padding: 0 10px
    }

    .testimonials-container .testimonials-section .video-stories-container {
        flex-direction: row;
        gap: 40px;
        padding: 5px 20px
    }

    .testimonials-container .testimonials-section .video-stories-container .printing-video {
        flex-direction: column;
        padding: 20px 0;
        height: 500px;
        min-width: 90vw
    }

    .testimonials-container .testimonials-section .video-stories-container .printing-video .left {
        padding: 2rem 1rem;
        width: 100%;
        height: max-content
    }

    .testimonials-container .testimonials-section .video-stories-container .printing-video .left h1 {
        font-size: 20px;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .printing-video .left p {
        font-size: 14px;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .printing-video .right {
        margin-top: 40px;
        background-size: cover;
        background-position: center;
        height: 250px;
        right: 0;
        top: 40%;
        width: 100%
    }

    .testimonials-container .testimonials-section .video-stories-container .printing-video .right .playbutton img {
        width: 40px;
        height: 40px
    }

    .printing-video {
        flex-direction: column
    }

    .printing-video .playbutton {
        width: 50px;
        height: 50px;
        top: 25%;
        left: 43%;
        margin-top: inherit
    }

    .printing-video .left {
        width: 100%;
        height: auto;
        padding: 40px 20px
    }

    .printing-video .left h1 {
        font-size: 28px;
        margin-bottom: 12px
    }

    .printing-video .left p {
        font-size: 16px
    }

    .printing-video .right {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 20px;
        top: -4%
    }

    .printing-video .playbutton {
        width: 60px;
        height: 60px
    }

    .modal-content {
        width: 95%
    }
}

.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;
    font-family: "system-ui";
    text-align: center
}

.section-thankyou .thankyou-content h3 {
    font-size: 2.75rem;
    font-weight: 400;
    font-family: "system-ui";
    text-align: center;
    margin-bottom: 30px
}

.section-thankyou .thankyou-content p {
    font-size: 1.5rem;
    font-weight: 400;
    font-family: "system-ui";
    padding-bottom: 20px;
    text-align: center
}

.section-thankyou .text-redirect {
    font-style: italic;
    margin: 60px auto 0;
    font-size: 1.15rem;
    text-align: center
}

.section-thankyou .text-redirect span {
    color: #fc0
}

.header {
    padding: .5rem
}

.header .logo img {
    height: 66px;
    object-fit: contain;
    width: auto;
    margin: 0 10px
}

.thankyou-contact {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
    align-items: center
}

.thankyou-contact a {
    text-decoration: none;
    font-weight: 700;
    color: #007bff;
    font-size: 1.5rem
}

.thankyou-contact a:hover {
    text-decoration: underline
}

@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
    }

    .thankyou-contact {
        flex-flow: column
    }

    .thankyou-contact a {
        font-size: 1.25rem
    }
}



/*------------------*/

/* 1. Viewport Container */
#hero-section { 
    position: relative; 
    height: 600px; /* Example height */
    background-size: cover; 
    background-position: center;
    transition: background-image 0.5s ease-in-out !important; 
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

/* 2. Content Positioning (Using new unique IDs/Classes) */
#hero-heading, #hero-title {
    max-width: 700px;
    margin: 15px 0 25px !important; /* Reset default margin */
}

/* 3. Thumbnails */
#hero-thumbnail-container {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    max-width: 700px;
}
.hero-slide-thumb {
    flex-basis: 25%;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s, border 0.3s;
    border: 2px solid transparent;
    overflow: hidden;
}
.hero-slide-thumb.active {
    opacity: 1;
    border-color: #f0af13; /* Highlight active thumbnail */
}

/* 4. Progress Bar Styles */
#hero-timer-wrapper {
    border-radius: 50px;
    max-width:300px;
    position: relative;
    height: 4px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    margin-top: 20px;
}
#hero-progress-bar-track {
    height: 100%;
    width: 100%; /* Ensure the track is full width */
}
#hero-progress {
    border-radius: 50px;
    height: 100%;
    width: 0%; /* Initial width */
    background-color: rgb(240, 175, 19); 
    /* The transition property will be set dynamically by JS */
}




.eventGrid .events_wrapper {
    width: 100%;
    overflow: hidden;
    position: relative
}

.eventGrid .events_wrapper .events_container {
    display: flex;
    padding-top: 4%;
    overflow-x: hidden;
    white-space: nowrap
}

.eventGrid .events_wrapper .events_container .event {
    position: relative;
    width: 18vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

.eventGrid .events_wrapper .events_container .event .bg {
    position: relative;
    z-index: 1;
    width: 100%
}

.eventGrid .events_wrapper .events_container .event .bg img {
    width: 100%;
    height: auto
}

.eventGrid .events_wrapper .events_container .event .image {
    position: absolute;
    width: 18vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center
}

.eventGrid .events_wrapper .events_container .event .image img {
    width: 100%;
    height: 26vh;
    display: block
}

@media (max-width: 1536px) {
    .eventGrid .events_wrapper .events_container {
        padding-top:3%
    }

    .eventGrid .events_wrapper .events_container .event {
        width: 16vw
    }

    .eventGrid .events_wrapper .events_container .event .bg img {
        width: 100%
    }

    .eventGrid .events_wrapper .events_container .event .image {
        width: 16vw;
        top: 50%
    }

    .eventGrid .events_wrapper .events_container .event .image img {
        height: 22vh
    }
}

@media (max-width: 992px) {
    .eventGrid .events_wrapper .events_container {
        padding-top:2%
    }

    .eventGrid .events_wrapper .events_container .event {
        width: 28vw
    }

    .eventGrid .events_wrapper .events_container .event .bg img {
        width: 100%
    }

    .eventGrid .events_wrapper .events_container .event .image {
        width: 28vw;
        top: 50%
    }

    .eventGrid .events_wrapper .events_container .event .image img {
        height: 22vh
    }
}

@media (max-width: 480px) {
    .eventGrid {
        height:225px;
        margin: 20px 0
    }

    .eventGrid .events_wrapper {
        height: 100%
    }

    .eventGrid .events_wrapper .events_container {
        height: 225px;
        display: flex;
        overflow: scroll
    }

    .eventGrid .events_wrapper .events_container::-webkit-scrollbar {
        display: none
    }

    .eventGrid .events_wrapper .events_container .event {
        height: 205px;
        flex: 0 0 45%
    }

    .eventGrid .events_wrapper .events_container .event .bg {
        width: 100%;
        height: 205px
    }

    .eventGrid .events_wrapper .events_container .event .bg img {
        height: 205px;
        width: 100%
    }

    .eventGrid .events_wrapper .events_container .event .image {
        height: 141.113px;
        border-radius: 30px;
        position: absolute;
        width: 95%;
        top: 51%;
        left: 50%
    }

    .eventGrid .events_wrapper .events_container .event .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.EventsHero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 637px;
    flex-shrink: 0;
    overflow: hidden
}

.EventsHero video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
    z-index: 0
}

.EventsHero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 1
}

.EventsHero h1 {
    position: relative;
    color: #fff;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    z-index: 2
}

.EventsHero p {
    position: relative;
    padding-top: 20px;
    color: #fff;
    width: 40%;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    z-index: 2
}

@media (max-width: 1536px) {
    .EventsHero {
        height:600px
    }

    .EventsHero h1 {
        font-size: 72px
    }

    .EventsHero p {
        font-size: 22px;
        width: 45%
    }
}

@media (max-width: 1440px) {
    .EventsHero {
        height:550px
    }

    .EventsHero h1 {
        font-size: 64px
    }

    .EventsHero p {
        font-size: 20px;
        width: 50%
    }
}

@media (max-width: 1280px) {
    .EventsHero {
        height:500px
    }

    .EventsHero h1 {
        font-size: 56px
    }

    .EventsHero p {
        font-size: 18px;
        width: 55%
    }
}

@media (max-width: 992px) {
    .EventsHero {
        height:420px
    }

    .EventsHero h1 {
        font-size: 42px;
        padding: 0 10px
    }

    .EventsHero p {
        font-size: 16px;
        width: 70%;
        padding: 0 10px
    }
}

@media (max-width: 480px) {
    .EventsHero {
        height:229px;
        padding: 20px
    }

    .EventsHero h1 {
        font-size: 20px
    }

    .EventsHero p {
        width: 100%;
        font-size: 14px;
        padding-top: 20px
    }
}
.mobile-menu .menu-list li .plus-icon, .playIcon{
    display: none !important;
}

.banner-right .enquiry-form .input-field {
    background: transparent;
    width: 100%;
    padding: .8vw;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .4);
    font-size: 1rem;
    color: #fff;
    margin-top:10px;
    margin-bottom:20px;
}
.banner-right .enquiry-form {
    display: flex;
    flex-direction: column;
}
.image-banner img {
    width: 100%;
}
.banner-form.banner-right {
    position: absolute;
    top: 28%;
    left: 7%;
    /*transform: translateY(-50%);*/
    max-width: 350px;
    background: #000;
    padding: 20px;
    border-radius: 15px;
}
.banner-form .enquiry-form h4{
    margin-bottom:20px;
    color: #e9a617;
    font-size: 24px;
}
.banner-form .enquiry-form select.input-field option {
    color: #000;
}
@media (max-width: 992px) {
    .EventSection .events_container .event .image img {
        height: unset !important;
    }
    .banner-form.banner-right {
    position: unset;
    }
    .banner-right .enquiry-form .input-field {
    height: 40px;
    text-indent: 10px;
}
}