@media only screen and (max-width: 640px){
    @import url(https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Jost:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap);

    a, hr {
        color: inherit
    }

    progress, sub, sup {
        vertical-align: baseline
    }

    dialog, fieldset, legend, menu, ol, ul {
        padding: 0
    }

    blockquote, body, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, ul {
        margin: 0
    }

    .btn, sub, sup {
        position: relative
    }

        .btn:hover::after, .container, .w-full {
            width: 100%
        }

        .btn-rounded-full, .btn:hover, .text-cream-foreground {
            color: var(--cream-foreground)
        }

    .btn, .overflow-hidden {
        overflow: hidden
    }

    .border-\[\#CCCCCC\], .border-\[\#F2F2F2\], .border-b-slate-300, .border-black, .border-gray-200, .border-gray-400, .border-t-white, .border-white {
        --tw-border-opacity: 1
    }

    .after\:bg-no-repeat::after, .bg-no-repeat {
        background-repeat: no-repeat
    }

    .\[\&_\.swiper-slide-active\>img\]\:invert-0 .swiper-slide-active > img, .blur-\[200px\], .drop-shadow-\[0px_4\.8px_24\.4px_rgba\(19\2c 16\2c 34\2c 0\.10\)\], .filter, .hover\:invert-0:hover, .invert-\[0\.5\] {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    #scrollTopBtn, .close-btn, .cursor-pointer, .play-button, [role=button], button {
        cursor: pointer
    }

        #scrollTopBtn, #scrollTopBtn:hover {
            background-color: #f7941e !important
        }

    *, ::after, ::before {
        box-sizing: border-box;
        border: 0 solid #e5e7eb;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:;
        --tw-pan-y:;
        --tw-pinch-zoom:;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:;
        --tw-gradient-via-position:;
        --tw-gradient-to-position:;
        --tw-ordinal:;
        --tw-slashed-zero:;
        --tw-numeric-figure:;
        --tw-numeric-spacing:;
        --tw-numeric-fraction:;
        --tw-ring-inset:;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:;
        --tw-brightness:;
        --tw-contrast:;
        --tw-grayscale:;
        --tw-hue-rotate:;
        --tw-invert:;
        --tw-saturate:;
        --tw-sepia:;
        --tw-drop-shadow:;
        --tw-backdrop-blur:;
        --tw-backdrop-brightness:;
        --tw-backdrop-contrast:;
        --tw-backdrop-grayscale:;
        --tw-backdrop-hue-rotate:;
        --tw-backdrop-invert:;
        --tw-backdrop-opacity:;
        --tw-backdrop-saturate:;
        --tw-backdrop-sepia:;
        --tw-contain-size:;
        --tw-contain-layout:;
        --tw-contain-paint:;
        --tw-contain-style:
    }

    .btn, .btn::after {
        border-radius: 6px
    }

    ::after, ::before {
        --tw-content: ''
    }

    :host, html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-tap-highlight-color: transparent
    }

    @font-face {
        font-family: 'Comic Relief';
        src: url('../Fonts/ComicRelief.woff2') format('woff2'),url('../Fonts/ComicRelief.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap
    }

    hr {
        height: 0;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, pre, samp {
        font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        font-feature-settings: normal;
        font-variation-settings: normal;
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        font-size: 75%;
        line-height: 0
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    button, input, optgroup, select, textarea {
        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        margin: 0;
        padding: 0
    }

    button, select {
        text-transform: none
    }

    button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none
    }

    :-moz-focusring {
        outline: auto
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    .header-pinned .\[\.header-pinned_\&\]\:shadow-md, .hover\:shadow-3xl:hover, .shadow-3xl, .shadow-4xl, .shadow-\[-20px_4\.8px_24\.4px_-6px_rgba\(19\2c 16\2c 34\2c 0\.10\)\], .shadow-\[0px_0px_60px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\], .shadow-\[0px_5px_60px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\], .shadow-md, .shadow-sm, .swiper-slide .item {
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
    }

    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
        height: auto
    }

    [type=search] {
        -webkit-appearance: textfield;
        outline-offset: -2px
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
    }

    .Educators .itemB h4, .EducatorsB .itemB h4, .swiper-slide .item h4 {
        font-size: 1.5rem !important;
        line-height: 2rem !important
    }

    summary {
        display: list-item
    }

    menu, ol, ul {
        list-style: none
    }

    textarea {
        resize: vertical
    }

        input::-moz-placeholder, textarea::-moz-placeholder {
            opacity: 1;
            color: #9ca3af
        }

        input::placeholder, textarea::placeholder {
            opacity: 1;
            color: #9ca3af
        }

    :disabled {
        cursor: default
    }

    audio, canvas, embed, iframe, img, object, svg, video {
        display: block;
        vertical-align: middle
    }

    img, video {
        max-width: 100%;
        height: auto
    }

    .hidden, .icon .fa-minus, [data-open=true] .icon .fa-plus, [hidden] {
        display: none
    }

    body {
        font-family: Nunito;
        color: var(--muted-foreground);
        line-height: 160%;
        background-color: var(--background);
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .font-jost, h1, h2, h3, h4, h5, h6 {
        font-family: Jost
    }

    p {
        color: #2f2e2e;
        font-size: 17px !important;
        text-align: justify !important
    }

    :root {
        --background: #fff;
        --foreground: #686868;
        --primary: #F7941E;
        --primary-foreground: #F7941E;
        --secondary: #1CBBB4;
        --secondary-foreground: #1CBBB4;
        --destructive: #ED145B;
        --destructive-foreground: #ED145B;
        --green: #73BE48;
        --green-foreground: #73BE48;
        --warm: #FFF0E5;
        --cream-foreground: #fff;
        --muted: #000;
        --muted-foreground: #000
    }

    ::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:;
        --tw-pan-y:;
        --tw-pinch-zoom:;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:;
        --tw-gradient-via-position:;
        --tw-gradient-to-position:;
        --tw-ordinal:;
        --tw-slashed-zero:;
        --tw-numeric-figure:;
        --tw-numeric-spacing:;
        --tw-numeric-fraction:;
        --tw-ring-inset:;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:;
        --tw-brightness:;
        --tw-contrast:;
        --tw-grayscale:;
        --tw-hue-rotate:;
        --tw-invert:;
        --tw-saturate:;
        --tw-sepia:;
        --tw-drop-shadow:;
        --tw-backdrop-blur:;
        --tw-backdrop-brightness:;
        --tw-backdrop-contrast:;
        --tw-backdrop-grayscale:;
        --tw-backdrop-hue-rotate:;
        --tw-backdrop-invert:;
        --tw-backdrop-opacity:;
        --tw-backdrop-saturate:;
        --tw-backdrop-sepia:;
        --tw-contain-size:;
        --tw-contain-layout:;
        --tw-contain-paint:;
        --tw-contain-style:
    }

    .container {
        margin-right: auto;
        margin-left: auto;
        padding-right: 5px;
        padding-left: 5px
    }

    .btn, .btn-rounded-full {
        max-height: 60px;
        display: inline-flex;
        gap: 10px;
        transition: .5s ease-in-out;
        padding: 20px 30px;
        z-index: 10
    }

    @media (min-width:640px) {
        .container {
            max-width: 640px
        }

        .sm\:col-span-6 {
            grid-column: span 6/span 6
        }

        .sm\:col-start-1 {
            grid-column-start: 1
        }

        .sm\:col-start-7 {
            grid-column-start: 7
        }

        .sm\:col-start-8 {
            grid-column-start: 8
        }

        .sm\:col-end-13 {
            grid-column-end: 13
        }

        .sm\:col-end-7 {
            grid-column-end: 7
        }

        .sm\:col-end-8 {
            grid-column-end: 8
        }

        .sm\:row-span-2 {
            grid-row: span 2/span 2
        }

        .sm\:-mr-10 {
            margin-right: -2.5rem
        }

        .sm\:block {
            display: block
        }

        .sm\:flex {
            display: flex
        }

        .sm\:max-h-full {
            max-height: 100%
        }

        .sm\:w-auto {
            width: auto
        }

        .sm\:w-full {
            width: 100%
        }

        .sm\:max-w-\[210px\] {
            max-width: 210px
        }

        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .sm\:grid-rows-\[453px\] {
            grid-template-rows: 453px
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:flex-col {
            flex-direction: column
        }

        .sm\:flex-nowrap {
            flex-wrap: nowrap
        }

        .sm\:items-end {
            align-items: flex-end
        }

        .sm\:items-center {
            align-items: center
        }

        .sm\:gap-4 {
            gap: 1rem
        }

        .sm\:gap-7 {
            gap: 1.75rem
        }

        .sm\:gap-7\.5 {
            gap: 30px
        }

        .sm\:p-8 {
            padding: 2rem
        }

        .sm\:p-\[14px\] {
            padding: 14px
        }

        .sm\:py-0 {
            padding-top: 0;
            padding-bottom: 0
        }

        .sm\:py-15 {
            padding-top: 60px;
            padding-bottom: 60px
        }

        .sm\:pt-0 {
            padding-top: 0
        }

        .sm\:pt-\[70px\] {
            padding-top: 70px
        }

        .sm\:text-\[26px\] {
            font-size: 26px
        }

        .sm\:leading-\[140\%\] {
            line-height: 140%
        }
    }

    @media (min-width:768px) {
        .container {
            max-width: 768px
        }

        .md\:order-1 {
            order: 1
        }

        .md\:col-start-10 {
            grid-column-start: 10
        }

        .md\:col-start-5 {
            grid-column-start: 5
        }

        .md\:col-start-9 {
            grid-column-start: 9
        }

        .md\:col-end-10 {
            grid-column-end: 10
        }

        .md\:col-end-5 {
            grid-column-end: 5
        }

        .md\:col-end-9 {
            grid-column-end: 9
        }

        .md\:block {
            display: block
        }

        .md\:h-\[calc\(100\%-50\%\)\] {
            height: calc(100% - 50%)
        }

        .md\:max-w-25 {
            max-width: 100px
        }

        .md\:max-w-\[88px\] {
            max-width: 88px
        }

        .md\:max-w-full {
            max-width: 100%
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:justify-normal {
            justify-content: normal
        }

        .md\:gap-7 {
            gap: 1.75rem
        }

        .md\:gap-7\.5 {
            gap: 30px
        }

        .md\:p-5 {
            padding: 1.25rem
        }

        .md\:px-12 {
            padding-left: 3rem;
            padding-right: 3rem
        }

        .md\:px-12\.5 {
            padding-left: 50px;
            padding-right: 50px
        }

        .md\:px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem
        }

        .md\:pb-4 {
            padding-bottom: 1rem
        }

        .md\:text-2xl {
            font-size: 1.5rem;
            line-height: 2rem
        }

        .md\:text-5xl {
            font-size: 3rem;
            line-height: 1
        }

        .md\:text-6xl {
            font-size: 3.75rem;
            line-height: 1
        }

        .md\:text-\[28px\] {
            font-size: 28px
        }

        .md\:text-\[50px\] {
            font-size: 50px
        }

        .md\:leading-\[110\%\] {
            line-height: 110%
        }

        .md\:leading-\[120\%\] {
            line-height: 120%
        }

        .md\:leading-\[140\%\] {
            line-height: 140%
        }

        .md\:leading-\[141\%\] {
            line-height: 141%
        }

        .after\:md\:max-w-\[calc\(100\%-310px\)\]::after {
            content: var(--tw-content);
            max-width: calc(100% - 310px)
        }
    }

    @media (min-width:1024px) {
        .container {
            max-width: 1024px
        }

        .lg\:absolute {
            position: absolute
        }

        .lg\:bottom-14 {
            bottom: 3.5rem
        }

        .lg\:bottom-20 {
            bottom: 5rem
        }

        .lg\:left-24 {
            left: 6rem
        }

        .lg\:left-auto {
            left: auto
        }

        .lg\:right-15 {
            right: 60px
        }

        .lg\:top-0 {
            top: 0
        }

        .lg\:top-1\/2 {
            top: 50%
        }

        .lg\:top-16 {
            top: 4rem
        }

        .lg\:order-1 {
            order: 1
        }

        .lg\:mb-15 {
            margin-bottom: 60px
        }

        .lg\:mt-0 {
            margin-top: 0
        }

        .lg\:mt-10 {
            margin-top: 2.5rem
        }

        .lg\:mt-15 {
            margin-top: 60px
        }

        .lg\:mt-4 {
            margin-top: 1rem
        }

        .lg\:mt-5 {
            margin-top: 1.25rem
        }

        .lg\:mt-6 {
            margin-top: 1.5rem
        }

        .lg\:mt-7 {
            margin-top: 1.75rem
        }

        .lg\:mt-7\.5 {
            margin-top: 30px
        }

        .lg\:mt-\[18px\] {
            margin-top: 18px
        }

        .lg\:block {
            display: block
        }

        .lg\:flex {
            display: flex
        }

        .lg\:h-10 {
            height: 2.5rem
        }

        .lg\:h-20 {
            height: 5rem
        }

        .lg\:h-\[calc\(100\%-32\%\)\] {
            height: calc(100% - 32%)
        }

        .lg\:max-h-\[88px\] {
            max-height: 88px
        }

        .lg\:w-10 {
            width: 2.5rem
        }

        .lg\:w-20 {
            width: 5rem
        }

        .lg\:w-48 {
            width: 12rem
        }

        .lg\:w-\[25\%\] {
            width: 25%
        }

        .lg\:w-\[30\%\] {
            width: 30%
        }

        .lg\:w-\[50\%\] {
            width: 50%
        }

        .lg\:w-\[70\%\] {
            width: 70%
        }

        .lg\:w-auto {
            width: auto
        }

        .lg\:max-w-\[111px\] {
            max-width: 111px
        }

        .lg\:max-w-\[176px\] {
            max-width: 176px
        }

        .lg\:max-w-\[186px\] {
            max-width: 186px
        }

        .lg\:max-w-\[223px\] {
            max-width: 223px
        }

        .lg\:max-w-\[300px\] {
            max-width: 300px
        }

        .lg\:max-w-\[370px\] {
            max-width: 370px
        }

        .lg\:max-w-\[410px\] {
            max-width: 410px
        }

        .lg\:max-w-\[430px\] {
            max-width: 430px
        }

        .lg\:max-w-\[439px\] {
            max-width: 439px
        }

        .lg\:max-w-\[460px\] {
            max-width: 460px
        }

        .lg\:max-w-\[470px\] {
            max-width: 470px
        }

        .lg\:max-w-\[520px\] {
            max-width: 520px
        }

        .lg\:max-w-\[530px\] {
            max-width: 530px
        }

        .lg\:max-w-\[573px\] {
            max-width: 573px
        }

        .lg\:max-w-\[600px\] {
            max-width: 600px
        }

        .lg\:max-w-\[630px\] {
            max-width: 630px
        }

        .lg\:max-w-\[650px\] {
            max-width: 650px
        }

        .lg\:max-w-\[88px\] {
            max-width: 88px
        }

        .lg\:max-w-full {
            max-width: 100%
        }

        .lg\:-translate-y-1\/2 {
            --tw-translate-y: -50%;
            transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .lg\:grid-cols-\[300px_auto_auto_268px\] {
            grid-template-columns: 300px auto auto 268px
        }

        .lg\:grid-cols-\[37\%_auto\] {
            grid-template-columns: 37% auto
        }

        .lg\:grid-cols-\[370px_auto_auto\] {
            grid-template-columns: 370px auto auto
        }

        .lg\:grid-cols-\[40\%_44\%\] {
            grid-template-columns: 40% 44%
        }

        .lg\:grid-cols-\[40\%_auto\] {
            grid-template-columns: 40% auto
        }

        .lg\:grid-cols-\[60\%_40\%\] {
            grid-template-columns: 60% 40%
        }

        .lg\:grid-cols-\[670px_auto\] {
            grid-template-columns: 670px auto
        }

        .lg\:grid-cols-\[700px_auto\] {
            grid-template-columns: 700px auto
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:items-center {
            align-items: center
        }

        .lg\:justify-end {
            justify-content: flex-end
        }

        .lg\:justify-between {
            justify-content: space-between
        }

        .lg\:gap-5 {
            gap: 1.25rem
        }

        .lg\:gap-7 {
            gap: 1.75rem
        }

        .lg\:gap-7\.5 {
            gap: 30px
        }

        .lg\:gap-\[15px\] {
            gap: 15px
        }

        .lg\:gap-\[60px\] {
            gap: 60px
        }

        .lg\:gap-x-0 {
            -moz-column-gap: 0px;
            column-gap: 0
        }

        .lg\:gap-x-\[74px\] {
            -moz-column-gap: 74px;
            column-gap: 74px
        }

        .lg\:gap-y-7 {
            row-gap: 1.75rem
        }

        .lg\:gap-y-7\.5 {
            row-gap: 30px
        }

        .lg\:gap-y-\[22px\] {
            row-gap: 22px
        }

        .lg\:bg-transparent {
            background-color: transparent
        }

        .lg\:p-10 {
            padding: 2.5rem
        }

        .lg\:p-15 {
            padding: 60px
        }

        .lg\:p-7 {
            padding: 1.75rem
        }

        .lg\:p-7\.5 {
            padding: 30px
        }

        .lg\:px-10 {
            padding-left: 2.5rem;
            padding-right: 2.5rem
        }

        .lg\:px-8 {
            padding-left: 2rem;
            padding-right: 2rem
        }

        .lg\:py-0 {
            padding-top: 0;
            padding-bottom: 0
        }

        .lg\:py-10 {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem
        }

        .lg\:py-15 {
            padding-top: 60px;
            padding-bottom: 60px
        }

        .lg\:py-7 {
            padding-top: 1.75rem;
            padding-bottom: 1.75rem
        }

        .lg\:py-7\.5 {
            padding-top: 30px;
            padding-bottom: 30px
        }

        .lg\:py-9 {
            padding-top: 2.25rem;
            padding-bottom: 2.25rem
        }

        .lg\:py-\[120px\] {
            padding-top: 120px;
            padding-bottom: 120px
        }

        .lg\:pb-10 {
            padding-bottom: 2.5rem
        }

        .lg\:pb-12 {
            padding-bottom: 3rem
        }

        .lg\:pb-15 {
            padding-bottom: 60px
        }

        .lg\:pb-32 {
            padding-bottom: 8rem
        }

        .lg\:pb-5 {
            padding-bottom: 1.25rem
        }

        .lg\:pb-7 {
            padding-bottom: 1.75rem
        }

        .lg\:pb-7\.5 {
            padding-bottom: 30px
        }

        .lg\:pl-11 {
            padding-left: 2.75rem
        }

        .lg\:pl-7 {
            padding-left: 1.75rem
        }

        .lg\:pl-7\.5 {
            padding-left: 30px
        }

        .lg\:pl-\[70px\] {
            padding-left: 70px
        }

        .lg\:pt-0 {
            padding-top: 0
        }

        .lg\:pt-10 {
            padding-top: 2.5rem
        }

        .lg\:pt-15 {
            padding-top: 60px
        }

        .lg\:pt-5 {
            padding-top: 1.25rem
        }

        .lg\:pt-7 {
            padding-top: 1.75rem
        }

        .lg\:pt-7\.5 {
            padding-top: 30px
        }

        .lg\:pt-\[120px\] {
            padding-top: 120px
        }

        .lg\:pt-\[18px\] {
            padding-top: 18px
        }

        .lg\:pt-\[38px\] {
            padding-top: 38px
        }

        .lg\:pt-\[70px\] {
            padding-top: 70px
        }

        .lg\:pt-\[72px\] {
            padding-top: 72px
        }

        .lg\:text-2xl {
            font-size: 1.5rem;
            line-height: 2rem
        }

        .lg\:text-3xl {
            font-size: 1.875rem;
            line-height: 2.25rem
        }

        .lg\:text-6xl {
            font-size: 3.75rem;
            line-height: 1
        }

        .lg\:text-\[120px\] {
            font-size: 120px
        }

        .lg\:text-\[28px\] {
            font-size: 28px
        }

        .lg\:text-\[32px\] {
            font-size: 32px
        }

        .lg\:text-\[40px\] {
            font-size: 40px
        }

        .lg\:text-\[70px\] {
            font-size: 70px
        }

        .lg\:text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem
        }

        .lg\:leading-\[117\%\] {
            line-height: 117%
        }

        .lg\:leading-\[125\%\] {
            line-height: 125%
        }

        .lg\:leading-\[130\%\] {
            line-height: 130%
        }

        .lg\:leading-\[140\%\] {
            line-height: 140%
        }

        .lg\:leading-\[148\%\] {
            line-height: 148%
        }

        .after\:lg\:max-w-\[calc\(100\%-410px\)\]::after {
            content: var(--tw-content);
            max-width: calc(100% - 410px)
        }

        .after\:lg\:bg-warm::after {
            content: var(--tw-content);
            background-color: var(--warm)
        }
    }

    @media (min-width:1290px) {
        .container {
            max-width: 1290px
        }
    }

    .btn {
        justify-content: center;
        align-items: center
    }

        .btn::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            background-color: var(--secondary);
            width: 0%;
            height: 100%;
            z-index: -1;
            transition: .5s ease-in-out
        }

    .btn-rounded-full {
        justify-content: center;
        align-items: center;
        border-radius: 45px;
        background-color: var(--primary);
        line-height: normal;
        border: 2px solid transparent
    }

        .btn-rounded-full:hover {
            background-color: transparent;
            color: var(--primary-foreground);
            border: 2px solid var(--primary)
        }

    @media(max-width:1024px) {
        .btn, .btn-rounded-full {
            padding: 10px 30px
        }
    }

    .image-layer-hover {
        background-size: cover;
        width: 25%;
        height: 100%;
        transition: .5s
    }

    .transition-\[top\], .transition-all {
        transition-timing-function: cubic-bezier(0.4,0,0.2,1);
        transition-duration: 150ms
    }

    .image-layer-hover:first-child {
        background-position: 0;
        transition-delay: 0
    }

    .image-layer-hover:nth-child(2) {
        background-position: 33.33%;
        transition-delay: 0.1s
    }

    .image-layer-hover:nth-child(3) {
        background-position: 66.66%;
        transition-delay: 0.2s
    }

    .image-layer-hover:nth-child(4) {
        background-position: 100%;
        transition-delay: 0.3s
    }

    .layer-card:hover .image-layer-hover {
        transform: translateY(-100%)
    }

    .-translate-x-1\/2, .-translate-y-1\/2, .after\:-translate-y-1\/2::after, .group:hover .group-hover\:translate-y-0, .transform, .translate-y-0, .translate-y-10, .translate-y-5 {
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .\[\&_\.swiper-slide-active_\.card-footer\]\:visible .swiper-slide-active .card-footer, .group:hover .group-hover\:visible, .group\/card:hover .group-hover\/card\:visible, .visible {
        visibility: visible
    }

    .invisible {
        visibility: hidden
    }

    .static {
        position: static
    }

    .fixed {
        position: fixed
    }

    .absolute {
        position: absolute
    }

    .posRe, .relative {
        position: relative
    }

    .sticky {
        position: sticky
    }

    .-bottom-12 {
        bottom: -3rem
    }

    .-bottom-12\.5 {
        bottom: -50px
    }

    .-bottom-5 {
        bottom: -1.25rem
    }

    .-left-11 {
        left: -2.75rem
    }

    .-left-2 {
        left: -.5rem
    }

    .-left-2\.5 {
        left: -10px
    }

    .-left-6 {
        left: -1.5rem
    }

    .-left-\[30px\] {
        left: -30px
    }

    .-right-full {
        right: -100%
    }

    .bottom-0 {
        bottom: 0
    }

    .bottom-20 {
        bottom: 5rem
    }

    .bottom-25 {
        bottom: 100px
    }

    .bottom-3 {
        bottom: .75rem
    }

    .bottom-5 {
        bottom: 1.25rem
    }

    .bottom-\[165px\] {
        bottom: 165px
    }

    .left-0 {
        left: 0
    }

    .left-1\/2 {
        left: 50%
    }

    .left-10 {
        left: 2.5rem
    }

    .left-2 {
        left: .5rem
    }

    .left-2\.5 {
        left: 10px
    }

    .left-4 {
        left: 1rem
    }

    .left-5 {
        left: 1.25rem
    }

    .left-\[37px\] {
        left: 37px
    }

    .left-\[45\%\] {
        left: 45%
    }

    .right-0 {
        right: 0
    }

    .right-10 {
        right: 2.5rem
    }

    .right-11 {
        right: 2.75rem
    }

    .right-5 {
        right: 1.25rem
    }

    .right-\[10px\] {
        right: 10px
    }

    .right-\[67px\] {
        right: 67px
    }

    .right-\[68px\] {
        right: 68px
    }

    .right-\[87px\] {
        right: 87px
    }

    .right-\[90px\] {
        right: 90px
    }

    .top-0 {
        top: 0
    }

    .top-1 {
        top: .25rem
    }

    .top-1\/2 {
        top: 50%
    }

    .top-10 {
        top: 2.5rem
    }

    .top-14 {
        top: 3.5rem
    }

    .top-15, .top-\[60px\] {
        top: 60px
    }

    .top-5 {
        top: 1.25rem
    }

    .top-9 {
        top: 2.25rem
    }

    .top-\[15px\] {
        top: 15px
    }

    .top-\[186px\] {
        top: 186px
    }

    .top-\[40\%\] {
        top: 40%
    }

    .top-\[9px\] {
        top: 9px
    }

    .top-full {
        top: 100%
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-\[-1\] {
        z-index: -1
    }

    .z-\[1\] {
        z-index: 1
    }

    .order-1 {
        order: 1
    }

    .col-span-full {
        grid-column: 1/-1
    }

    .m-2 {
        margin: .5rem
    }

    .m-2\.5 {
        margin: 10px
    }

    .mb-10, .my-10 {
        margin-bottom: 2.5rem
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .my-10 {
        margin-top: 2.5rem
    }

    .-mt-7 {
        margin-top: -1.75rem
    }

    .mb-7 {
        margin-bottom: 1.75rem
    }

    .Aboutsection h2, .mb-7\.5 {
        margin-bottom: 30px
    }

    .group\/btn:hover .group-hover\/btn\:ml-1, .hover\:ml-1:hover, .ml-1 {
        margin-left: .25rem
    }

    .ml-10 {
        margin-left: 2.5rem
    }

    .ml-16 {
        margin-left: 4rem
    }

    .ml-2 {
        margin-left: .5rem
    }

    .ml-2\.5 {
        margin-left: 10px
    }

    .ml-9 {
        margin-left: 2.25rem
    }

    .ml-auto {
        margin-left: auto
    }

    .mr-0 {
        margin-right: 0
    }

    .mr-1 {
        margin-right: .25rem
    }

    .mt-10 {
        margin-top: 2.5rem
    }

    .mt-12 {
        margin-top: 3rem
    }

    .mt-15 {
        margin-top: 60px
    }

    .mt-2 {
        margin-top: .5rem
    }

    .mt-2\.5 {
        margin-top: 10px
    }

    .mt-3 {
        margin-top: .75rem
    }

    .mt-4 {
        margin-top: 1rem
    }

    .mt-5 {
        margin-top: 1.25rem
    }

    .mt-6 {
        margin-top: 1.5rem
    }

    .mt-7 {
        margin-top: 1.75rem
    }

    .mt-7\.5 {
        margin-top: 30px
    }

    .mt-9 {
        margin-top: 2.25rem
    }

    .mt-\[110px\] {
        margin-top: 110px
    }

    .mt-\[15px\] {
        margin-top: 15px
    }

    .mt-\[18px\] {
        margin-top: 18px
    }

    .mt-\[28px\] {
        margin-top: 28px
    }

    .mt-\[5px\] {
        margin-top: 5px
    }

    .mt-\[64px\] {
        margin-top: 64px
    }

    .mt-\[68px\] {
        margin-top: 68px
    }

    .block, [data-open=true] .icon .fa-minus {
        display: block
    }

    .inline-block {
        display: inline-block
    }

    .flex {
        display: flex
    }

    .inline-flex {
        display: inline-flex
    }

    .grid {
        display: grid
    }

    .h-0 {
        height: 0
    }

    .h-0\.5 {
        height: .125rem
    }

    .h-1 {
        height: .25rem
    }

    .h-1\.5 {
        height: .375rem
    }

    .h-10 {
        height: 2.5rem
    }

    .h-11 {
        height: 2.75rem
    }

    .h-12 {
        height: 3rem
    }

    .h-12\.5 {
        height: 50px
    }

    .h-15 {
        height: 60px
    }

    .h-16 {
        height: 4rem
    }

    .h-4 {
        height: 1rem
    }

    .h-6 {
        height: 1.5rem
    }

    .h-8 {
        height: 2rem
    }

    .h-9 {
        height: 2.25rem
    }

    .h-\[1px\] {
        height: 1px
    }

    .h-\[284px\] {
        height: 284px
    }

    .h-\[3px\] {
        height: 3px
    }

    .h-\[calc\(100\%-32\%\)\] {
        height: calc(100% - 32%)
    }

    .h-\[calc\(100\%-60px\)\] {
        height: calc(100% - 60px)
    }

    .h-auto {
        height: auto
    }

    .h-full {
        height: 100%
    }

    .h-\[calc\(100\%-0\%\)\] {
        height: calc(100% - 0%)
    }

    .max-h-0 {
        max-height: 0
    }

    .max-h-15 {
        max-height: 60px
    }

    .max-h-20 {
        max-height: 5rem
    }

    .max-h-60 {
        max-height: 15rem
    }

    .max-h-80 {
        max-height: 20rem
    }

    .max-h-\[190px\] {
        max-height: 190px
    }

    .max-h-\[300px\] {
        max-height: 300px
    }

    .max-h-\[369px\] {
        max-height: 369px
    }

    .max-h-\[450px\] {
        max-height: 450px
    }

    .max-h-\[453px\] {
        max-height: 453px
    }

    .max-h-\[70px\] {
        max-height: 70px
    }

    .max-h-\[72px\] {
        max-height: 72px
    }

    .max-h-\[88px\] {
        max-height: 88px
    }

    .min-h-36 {
        min-height: 9rem
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-1 {
        width: .25rem
    }

    .w-1\.5 {
        width: .375rem
    }

    .w-10 {
        width: 2.5rem
    }

    .w-11 {
        width: 2.75rem
    }

    .w-12 {
        width: 3rem
    }

    .w-12\.5 {
        width: 50px
    }

    .w-15 {
        width: 60px
    }

    .w-16 {
        width: 4rem
    }

    .w-20 {
        width: 5rem
    }

    .w-32 {
        width: 8rem
    }

    .w-4 {
        width: 1rem
    }

    .w-40 {
        width: 10rem
    }

    .w-5 {
        width: 1.25rem
    }

    .w-6 {
        width: 1.5rem
    }

    .w-7 {
        width: 1.75rem
    }

    .w-7\.5 {
        width: 30px
    }

    .w-8 {
        width: 2rem
    }

    .w-9 {
        width: 2.25rem
    }

    .w-96 {
        width: 24rem
    }

    .w-\[120\%\] {
        width: 120%
    }

    .w-\[130\%\] {
        width: 130%
    }

    .w-\[1px\] {
        width: 1px
    }

    .w-\[284px\] {
        width: 284px
    }

    .w-\[calc\(100\%-60px\)\] {
        width: calc(100% - 60px)
    }

    .min-w-40 {
        min-width: 10rem
    }

    .min-w-56 {
        min-width: 14rem
    }

    .max-w-20 {
        max-width: 5rem
    }

    .max-w-36 {
        max-width: 9rem
    }

    .max-w-\[140px\] {
        max-width: 140px
    }

    .max-w-\[168px\] {
        max-width: 168px
    }

    .max-w-\[190px\] {
        max-width: 190px
    }

    .max-w-\[200px\] {
        max-width: 200px
    }

    .max-w-\[212px\] {
        max-width: 212px
    }

    .max-w-\[377px\] {
        max-width: 377px
    }

    .max-w-\[400px\] {
        max-width: 400px
    }

    .max-w-\[410px\] {
        max-width: 410px
    }

    .max-w-\[431px\] {
        max-width: 431px
    }

    .max-w-\[458px\] {
        max-width: 458px
    }

    .max-w-\[494px\] {
        max-width: 494px
    }

    .max-w-\[514px\] {
        max-width: 514px
    }

    .max-w-\[516px\] {
        max-width: 516px
    }

    .max-w-\[528px\] {
        max-width: 528px
    }

    .max-w-\[546px\] {
        max-width: 546px
    }

    .max-w-\[580px\] {
        max-width: 580px
    }

    .max-w-\[598px\] {
        max-width: 598px
    }

    .max-w-\[630px\] {
        max-width: 630px
    }

    .max-w-\[633px\] {
        max-width: 633px
    }

    .max-w-\[69px\] {
        max-width: 69px
    }

    .max-w-\[70px\] {
        max-width: 70px
    }

    .max-w-\[776px\] {
        max-width: 776px
    }

    .max-w-\[790px\] {
        max-width: 790px
    }

    .max-w-md {
        max-width: 28rem
    }

    .max-w-sm {
        max-width: 24rem
    }

    .flex-shrink-0 {
        flex-shrink: 0
    }

    .flex-grow-0 {
        flex-grow: 0
    }

    .basis-auto {
        flex-basis: auto
    }

    .-translate-x-1\/2 {
        --tw-translate-x: -50%
    }

    .-translate-y-1\/2 {
        --tw-translate-y: -50%
    }

    .group:hover .group-hover\:translate-y-0, .translate-y-0 {
        --tw-translate-y: 0px
    }

    .translate-y-10 {
        --tw-translate-y: 2.5rem
    }

    .translate-y-5 {
        --tw-translate-y: 1.25rem
    }

    @keyframes left-right {
        50% {
            transform: translateX(14px)
        }
    }

    .animate-left-right {
        animation: 2s linear infinite left-right
    }

    @keyframes left-right-2 {
        50% {
            transform: translateX(-40px)
        }
    }

    .animate-left-right-2 {
        animation: 4s linear infinite left-right-2
    }

    @keyframes skw {
        50% {
            transform: skewX(5deg)
        }
    }

    .animate-skw {
        animation: 2s linear infinite skw
    }

    @keyframes up-down {
        50% {
            transform: translateY(-10px)
        }
    }

    .animate-up-down {
        animation: 2s linear infinite up-down
    }

    .resize {
        resize: both
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

    .grid-rows-\[277px\] {
        grid-template-rows: 277px
    }

    .flex-col {
        flex-direction: column
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .items-start {
        align-items: flex-start
    }

    .items-end {
        align-items: flex-end
    }

    .items-center {
        align-items: center
    }

    .justify-center, .socialicons a {
        justify-content: center
    }

    .justify-between {
        justify-content: space-between
    }

    .gap-1 {
        gap: .25rem
    }

    .gap-10 {
        gap: 2.5rem
    }

    .gap-2 {
        gap: .5rem
    }

    .gap-2\.5 {
        gap: 10px
    }

    .gap-3 {
        gap: .75rem
    }

    .gap-4 {
        gap: 1rem
    }

    .gap-5 {
        gap: 1.25rem
    }

    .gap-6 {
        gap: 1.5rem
    }

    .gap-7 {
        gap: 1.75rem
    }

    .gap-7\.5 {
        gap: 30px
    }

    .gap-8 {
        gap: 2rem
    }

    .gap-9 {
        gap: 2.25rem
    }

    .gap-\[14px\] {
        gap: 14px
    }

    .gap-\[15px\] {
        gap: 15px
    }

    .gap-\[25px\] {
        gap: 25px
    }

    .gap-x-5 {
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem
    }

    .gap-x-7 {
        -moz-column-gap: 1.75rem;
        column-gap: 1.75rem
    }

    .gap-x-7\.5 {
        -moz-column-gap: 30px;
        column-gap: 30px
    }

    .gap-y-10 {
        row-gap: 2.5rem
    }

    .gap-y-5 {
        row-gap: 1.25rem
    }

    .gap-y-7 {
        row-gap: 1.75rem
    }

    .gap-y-7\.5 {
        row-gap: 30px
    }

    .self-center {
        align-self: center
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .Testo, .ants-container, .gridSwiper, .photo {
        overflow: hidden
    }

    .overflow-x-hidden {
        overflow-x: hidden
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .rounded-\[10px\] {
        border-radius: 10px
    }

    .rounded-\[11px\] {
        border-radius: 11px
    }

    .rounded-\[125px\] {
        border-radius: 125px
    }

    .rounded-\[4px\] {
        border-radius: 4px
    }

    .rounded-full {
        border-radius: 9999px
    }

    .rounded-lg {
        border-radius: .5rem
    }

    .rounded-md {
        border-radius: .375rem
    }

    .rounded-bl-\[10px\] {
        border-bottom-left-radius: 10px
    }

    .group\/team:hover .group-hover\/team\:rounded-br-\[10px\], .rounded-br-\[10px\] {
        border-bottom-right-radius: 10px
    }

    .rounded-br-\[50px\] {
        border-bottom-right-radius: 50px
    }

    .rounded-br-md {
        border-bottom-right-radius: .375rem
    }

    .group\/team:hover .group-hover\/team\:rounded-tl-\[10px\], .rounded-tl-\[10px\] {
        border-top-left-radius: 10px
    }

    .rounded-tl-\[50px\] {
        border-top-left-radius: 50px
    }

    .rounded-tl-\[64px\] {
        border-top-left-radius: 64px
    }

    .rounded-tr-\[10px\] {
        border-top-right-radius: 10px
    }

    .rounded-tr-\[64px\] {
        border-top-right-radius: 64px
    }

    .rounded-tr-md {
        border-top-right-radius: .375rem
    }

    .border {
        border-width: 1px
    }

    .border-2 {
        border-width: 2px
    }

    .border-\[3px\] {
        border-width: 3px
    }

    .border-b {
        border-bottom-width: 1px
    }

    .border-b-4 {
        border-bottom-width: 4px
    }

    .border-b-8 {
        border-bottom-width: 8px
    }

    .border-l-2 {
        border-left-width: 2px
    }

    .border-t {
        border-top-width: 1px
    }

    .border-\[\#CCCCCC\] {
        border-color: rgb(204 204 204 / var(--tw-border-opacity))
    }

    .border-\[\#F2F2F2\] {
        border-color: rgb(242 242 242 / var(--tw-border-opacity))
    }

    .border-black {
        border-color: rgb(0 0 0 / var(--tw-border-opacity))
    }

    .border-destructive, .hover\:border-destructive:hover {
        border-color: var(--destructive)
    }

    .border-gray-200 {
        border-color: rgb(229 231 235 / var(--tw-border-opacity))
    }

    .border-gray-400 {
        border-color: rgb(156 163 175 / var(--tw-border-opacity))
    }

    .border-green, .hover\:border-green:hover {
        border-color: var(--green)
    }

    .border-primary {
        border-color: var(--primary)
    }

    .border-secondary {
        border-color: var(--secondary)
    }

    .border-transparent, .hover\:border-transparent:hover {
        border-color: transparent
    }

    .border-white {
        border-color: rgb(255 255 255 / var(--tw-border-opacity))
    }

    .border-b-primary {
        border-bottom-color: var(--primary)
    }

    .border-b-slate-300 {
        border-bottom-color: rgb(203 213 225 / var(--tw-border-opacity))
    }

    .border-l-primary {
        border-left-color: var(--primary)
    }

    .border-t-white {
        border-top-color: rgb(255 255 255 / var(--tw-border-opacity))
    }

    .border-opacity-20 {
        --tw-border-opacity: 0.2
    }

    .bg-\[\#0A6375\] {
        --tw-bg-opacity: 1;
        background-color: rgb(10 99 117 / var(--tw-bg-opacity))
    }

    .bg-\[\#F2F2F2\] {
        --tw-bg-opacity: 1;
        background-color: rgb(242 242 242 / var(--tw-bg-opacity))
    }

    .bg-\[\#FFFFFF1A\] {
        background-color: #fffFFF1A
    }

    .\[\&_\.swiper-slide-active\>\.service-card\]\:bg-background .swiper-slide-active > .service-card, .bg-background, .hover\:bg-background:hover {
        background-color: var(--background)
    }

    .bg-black\/30 {
        background-color: rgb(0 0 0 / .3)
    }

    .Aboutcard:nth-child(4), .bg-green {
        background-color: #73be48
    }

    .bg-muted {
        background-color: var(--muted)
    }

    .bg-primary, .hover\:bg-primary:hover {
        background-color: var(--primary)
    }

    .bg-secondary, .hover\:bg-secondary:hover, [data-open=true] .icon {
        background-color: var(--secondary)
    }

    .bg-transparent {
        background-color: transparent
    }

    .bg-warm {
        background-color: var(--warm)
    }

    .bg-\[linear-gradient\(180deg\2c _\#FFF0E5_0\%\2c _rgba\(255\2c _240\2c _229\2c _0\.00\)_100\%\)\] {
        background-image: linear-gradient(180deg,#fff0e5 0,rgba(255,240,229,0) 100%)
    }

    .bg-\[linear-gradient\(180deg\2c _rgba\(238\2c 255\2c 200\2c 0\.00\)_0\%\2c _\#E9FFB6_100\%\)\] {
        background-image: linear-gradient(180deg,rgba(238,255,200,0) 0,#e9ffb6 100%)
    }

    .bg-\[linear-gradient\(180deg\2c _rgba\(255\2c 255\2c 255\2c 0\.00\)_0\%\2c _\#FFF_50\%_rgba\(255\2c 255\2c 255\2c 0\.00\)_100\%\)\] {
        background-image: linear-gradient(180deg,rgba(255,255,255,0) 0,#fff 50% rgba(255,255,255,0) 100%)
    }

    .bg-\[url\(\'\/assets\/images\/blog\/blog-2-1\.png\'\)\] {
        background-image: url('/assets/images/blog/blog-2-1.png')
    }

    .bg-\[url\(\'\/assets\/images\/blog\/blog-2-2\.png\'\)\] {
        background-image: url('/assets/images/blog/blog-2-2.png')
    }

    .bg-\[url\(\'\/assets\/images\/blog\/blog-2-3\.png\'\)\] {
        background-image: url('/assets/images/blog/blog-2-3.png')
    }

    .bg-\[url\(\'\/assets\/images\/extra-curricula\/img-1\.png\'\)\] {
        background-image: url('/assets/images/extra-curricula/img-1.png')
    }

    .bg-\[url\(\'\/assets\/images\/extra-curricula\/img-2\.png\'\)\] {
        background-image: url('/assets/images/extra-curricula/img-2.png')
    }

    .bg-\[url\(\'\/assets\/images\/extra-curricula\/img-3\.png\'\)\] {
        background-image: url('/assets/images/extra-curricula/img-3.png')
    }

    .bg-\[url\(\'\/assets\/images\/shapes\/egg-shap\.png\'\)\] {
        background-image: url('/assets/images/shapes/egg-shap.png')
    }

    .bg-newsletter-banner {
        background-image: url('/assets/images/newsletter/bg-img.png')
    }

    .bg-contain {
        background-size: contain
    }

    .bg-bottom {
        background-position: bottom
    }

    .stroke-primary {
        stroke: var(--primary);
        -webkit-text-fill-color: var(--cream-foreground);
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #686868
    }

    .object-cover {
        -o-object-fit: cover;
        object-fit: cover
    }

    .p-2 {
        padding: .5rem
    }

    .p-2\.5 {
        padding: 10px
    }

    .p-3 {
        padding: .75rem
    }

    .p-3\.5 {
        padding: .875rem
    }

    .p-4 {
        padding: 1rem
    }

    .p-5 {
        padding: 1.25rem
    }

    .p-7 {
        padding: 1.75rem
    }

    .p-7\.5 {
        padding: 30px
    }

    .px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    .px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .px-2\.5 {
        padding-left: 10px;
        padding-right: 10px
    }

    .px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }

    .px-7\.5 {
        padding-left: 30px;
        padding-right: 30px
    }

    .px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .px-\[11px\] {
        padding-left: 11px;
        padding-right: 11px
    }

    .px-\[18px\] {
        padding-left: 18px;
        padding-right: 18px
    }

    .px-\[22px\] {
        padding-left: 22px;
        padding-right: 22px
    }

    .py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }

    .py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .py-12\.5 {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .py-2\.5 {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .py-3 {
        padding-top: .75rem;
        padding-bottom: .75rem
    }

    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .py-7 {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem
    }

    .py-7\.5 {
        padding-top: 30px;
        padding-bottom: 30px
    }

    .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .py-9 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem
    }

    .py-\[13px\] {
        padding-top: 13px;
        padding-bottom: 13px
    }

    .py-\[15px\] {
        padding-top: 15px;
        padding-bottom: 15px
    }

    .py-\[17px\] {
        padding-top: 17px;
        padding-bottom: 17px
    }

    .py-\[18px\] {
        padding-top: 18px;
        padding-bottom: 18px
    }

    .py-\[5px\] {
        padding-top: 5px;
        padding-bottom: 5px
    }

    .pb-1 {
        padding-bottom: .25rem
    }

    .pb-1\.5 {
        padding-bottom: .375rem
    }

    .pb-10 {
        padding-bottom: 2.5rem
    }

    .pb-15 {
        padding-bottom: 60px
    }

    .pb-2 {
        padding-bottom: .5rem
    }

    .pb-2\.5 {
        padding-bottom: 10px
    }

    .pb-20 {
        padding-bottom: 5rem
    }

    .pb-3 {
        padding-bottom: .75rem
    }

    .pb-5 {
        padding-bottom: 1.25rem
    }

    .pb-6 {
        padding-bottom: 1.5rem
    }

    .pb-7 {
        padding-bottom: 1.75rem
    }

    .pb-7\.5 {
        padding-bottom: 30px
    }

    .pb-8 {
        padding-bottom: 2rem
    }

    .pb-\[71px\] {
        padding-bottom: 71px
    }

    .pl-5 {
        padding-left: 1.25rem
    }

    .pl-6 {
        padding-left: 1.5rem
    }

    .pl-7 {
        padding-left: 1.75rem
    }

    .pl-7\.5 {
        padding-left: 30px
    }

    .pr-3 {
        padding-right: .75rem
    }

    .pr-5 {
        padding-right: 1.25rem
    }

    .pt-1 {
        padding-top: .25rem
    }

    .pt-10 {
        padding-top: 2.5rem
    }

    .pt-15 {
        padding-top: 60px
    }

    .pt-2 {
        padding-top: .5rem
    }

    .pt-20 {
        padding-top: 5rem
    }

    .pt-3 {
        padding-top: .75rem
    }

    .pt-4 {
        padding-top: 1rem
    }

    .pt-48 {
        padding-top: 12rem
    }

    .pt-5 {
        padding-top: 1.25rem
    }

    .pt-6 {
        padding-top: 1.5rem
    }

    .pt-7 {
        padding-top: 1.75rem
    }

    .pt-7\.5 {
        padding-top: 30px
    }

    .pt-\[120px\] {
        padding-top: 120px
    }

    .pt-\[22px\] {
        padding-top: 22px
    }

    .pt-\[70px\] {
        padding-top: 70px
    }

    .pt-\[75px\] {
        padding-top: 75px
    }

    .pt-\[78px\] {
        padding-top: 78px
    }

    .text-center {
        text-align: center
    }

    .font-bubblegum-sans {
        font-family: 'Comic Relief'
    }

    .font-nunito {
        font-family: Nunito
    }

    .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .text-5xl {
        font-size: 3rem;
        line-height: 1
    }

    .text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }

    .text-7xl {
        font-size: 4.5rem;
        line-height: 1
    }

    .text-\[10px\] {
        font-size: 10px
    }

    .text-\[17px\] {
        font-size: 17px
    }

    .text-\[19px\] {
        font-size: 19px
    }

    .text-\[28px\] {
        font-size: 28px
    }

    .text-\[32px\] {
        font-size: 32px
    }

    .text-\[40px\] {
        font-size: 40px
    }

    .text-\[65px\] {
        font-size: 65px
    }

    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .text-xs {
        font-size: .75rem;
        line-height: 1rem
    }

    .font-bold {
        font-weight: 700
    }

    .font-medium {
        font-weight: 500
    }

    .font-normal {
        font-weight: 400
    }

    .font-semibold {
        font-weight: 600
    }

    .leading-\[100\%\] {
        line-height: 100%
    }

    .leading-\[110\%\] {
        line-height: 110%
    }

    .leading-\[117\%\] {
        line-height: 117%
    }

    .leading-\[120\%\] {
        line-height: 120%
    }

    .leading-\[130\%\] {
        line-height: 130%
    }

    .leading-\[140\%\] {
        line-height: 140%
    }

    .leading-\[141\%\] {
        line-height: 141%
    }

    .leading-\[148\%\] {
        line-height: 148%
    }

    .leading-\[164\%\] {
        line-height: 164%
    }

    .leading-normal {
        line-height: 1.5
    }

    .text-\[\#0A6375\] {
        --tw-text-opacity: 1;
        color: rgb(10 99 117 / var(--tw-text-opacity))
    }

    .text-\[\#385469\] {
        --tw-text-opacity: 1;
        color: rgb(56 84 105 / var(--tw-text-opacity))
    }

    .text-\[\#686868\] {
        --tw-text-opacity: 1;
        color: rgb(104 104 104 / var(--tw-text-opacity))
    }

    .text-destructive-foreground {
        color: #f7941e
    }

    .text-green {
        color: var(--green)
    }

    .group\/btn:hover .group-hover\/btn\:text-green-foreground, .group\/card:hover .group-hover\/card\:text-green-foreground, .text-green-foreground {
        color: var(--green-foreground)
    }

    .text-muted-foreground {
        color: var(--muted-foreground)
    }

    .text-primary-foreground {
        color: #db1a21;
        padding:10px 0;
        font-size: 36px !important;
        padding-bottom: 10px !important
    }

    .group:hover .group-hover\:text-secondary-foreground, .group\/btn:hover .group-hover\/btn\:text-secondary-foreground, .group\/card:hover .group-hover\/card\:text-secondary-foreground, .hover\:text-secondary-foreground:hover, .text-secondary-foreground {
        color: var(--secondary-foreground)
    }

    .education .active-tab, .group:hover .group-hover\:text-cream-foreground, .group\/card:hover .group-hover\/card\:text-cream-foreground, .hover\:text-cream-foreground:hover, .portfolio .active-tab {
        color: var(--cream-foreground)
    }

    .opacity-0 {
        opacity: 0
    }

    .\[\&_\.swiper-slide-active_\.card-footer\]\:opacity-100 .swiper-slide-active .card-footer, .group:hover .group-hover\:opacity-100, .group\/card:hover .group-hover\/card\:opacity-100, .opacity-100 {
        opacity: 1
    }

    .opacity-30 {
        opacity: .3
    }

    .opacity-50 {
        opacity: .5
    }

    .group\/card:hover .group-hover\/card\:opacity-80, .opacity-80 {
        opacity: .8
    }

    .hover\:shadow-3xl:hover, .shadow-3xl {
        --tw-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.10);
        --tw-shadow-colored: 0px 4.8px 24.4px -6px var(--tw-shadow-color)
    }

    .shadow-4xl {
        --tw-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
        --tw-shadow-colored: 0px 4.4px 20px -1px var(--tw-shadow-color)
    }

    .shadow-\[-20px_4\.8px_24\.4px_-6px_rgba\(19\2c 16\2c 34\2c 0\.10\)\] {
        --tw-shadow: -20px 4.8px 24.4px -6px rgba(19,16,34,0.10);
        --tw-shadow-colored: -20px 4.8px 24.4px -6px var(--tw-shadow-color)
    }

    .shadow-\[0px_0px_60px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
        --tw-shadow: 0px 0px 60px 0px rgba(0,0,0,0.05);
        --tw-shadow-colored: 0px 0px 60px 0px var(--tw-shadow-color)
    }

    .shadow-\[0px_5px_60px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
        --tw-shadow: 0px 5px 60px 0px rgba(0,0,0,0.05);
        --tw-shadow-colored: 0px 5px 60px 0px var(--tw-shadow-color)
    }

    .header-pinned .\[\.header-pinned_\&\]\:shadow-md, .shadow-md {
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)
    }

    .shadow-sm {
        --tw-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        --tw-shadow-colored: 0px 0px 10px 0px var(--tw-shadow-color)
    }

    .Aboutsection, .socialicons a {
        box-shadow: 0 4px 6px rgba(0,0,0,.1)
    }

    .outline-none {
        outline: transparent solid 2px;
        outline-offset: 2px
    }

    .blur-\[200px\] {
        --tw-blur: blur(200px)
    }

    .drop-shadow-\[0px_4\.8px_24\.4px_rgba\(19\2c 16\2c 34\2c 0\.10\)\] {
        --tw-drop-shadow: drop-shadow(0px 4.8px 24.4px rgba(19,16,34,0.10))
    }

    .invert-\[0\.5\] {
        --tw-invert: invert(0.5)
    }

    .transition-\[top\] {
        transition-property: top
    }

    .transition-all {
        transition-property: all
    }

    .duration-300 {
        transition-duration: .3s
    }

    .duration-500 {
        transition-duration: .5s
    }

    .ease-linear {
        transition-timing-function: linear
    }

    [data-open=true] .accordion-details {
        opacity: 1;
        visibility: visible;
        max-height: 160px
    }

    .portfolio .active-tab {
        background-color: var(--primary)
    }

    .education .active-tab {
        background-color: var(--destructive)
    }

    .services .swiper-pagination-bullets.swiper-pagination-horizontal {
        left: 0;
        top: 0;
        width: auto
    }

    .services .swiper-pagination-bullet {
        height: 5px;
        width: 15px;
        border-radius: 10px
    }

    .services .swiper-pagination-bullet-active {
        width: 33px;
        background-color: var(--secondary)
    }

    .placeholder\:text-cream-foreground::-moz-placeholder {
        color: var(--cream-foreground)
    }

    .placeholder\:text-cream-foreground::placeholder {
        color: var(--cream-foreground)
    }

    .after\:absolute::after {
        content: var(--tw-content);
        position: absolute
    }

    .after\:bottom-0::after {
        content: var(--tw-content);
        bottom: 0
    }

    .after\:left-0::after {
        content: var(--tw-content);
        left: 0
    }

    .after\:right-0::after {
        content: var(--tw-content);
        right: 0
    }

    .after\:top-0::after {
        content: var(--tw-content);
        top: 0
    }

    .after\:top-1\/2::after {
        content: var(--tw-content);
        top: 50%
    }

    .after\:z-\[-1\]::after {
        content: var(--tw-content);
        z-index: -1
    }

    .after\:h-1::after {
        content: var(--tw-content);
        height: .25rem
    }

    .after\:h-1\.5::after {
        content: var(--tw-content);
        height: .375rem
    }

    .after\:h-\[calc\(100\%-120px\)\]::after {
        content: var(--tw-content);
        height: calc(100% - 120px)
    }

    .after\:h-full::after {
        content: var(--tw-content);
        height: 100%
    }

    .after\:max-h-\[257px\]::after {
        content: var(--tw-content);
        max-height: 257px
    }

    .after\:max-h-\[259px\]::after {
        content: var(--tw-content);
        max-height: 259px
    }

    .after\:w-1::after {
        content: var(--tw-content);
        width: .25rem
    }

    .after\:w-1\.5::after {
        content: var(--tw-content);
        width: .375rem
    }

    .after\:w-\[calc\(100\%-279px\)\]::after {
        content: var(--tw-content);
        width: calc(100% - 279px)
    }

    .after\:w-full::after {
        content: var(--tw-content);
        width: 100%
    }

    .after\:max-w-\[calc\(100\%-100px\)\]::after {
        content: var(--tw-content);
        max-width: calc(100% - 100px)
    }

    .after\:-translate-y-1\/2::after {
        content: var(--tw-content);
        --tw-translate-y: -50%
    }

    .photo img:hover, .play-button:hover, .socialicons a:hover {
        transform: scale(1.1)
    }

    .after\:rounded-\[10px\]::after {
        content: var(--tw-content);
        border-radius: 10px
    }

    .after\:rounded-full::after {
        content: var(--tw-content);
        border-radius: 9999px
    }

    .after\:bg-background::after {
        content: var(--tw-content);
        background-color: var(--background)
    }

    .after\:bg-green::after {
        content: var(--tw-content);
        background-color: var(--green)
    }

    .after\:bg-transparent::after {
        content: var(--tw-content);
        background-color: transparent
    }

    .after\:bg-\[linear-gradient\(180deg\2c _rgba\(247\2c 148\2c 30\2c 0\.00\)_0\%\2c _\#F7941E_196\.39\%\)\]::after {
        content: var(--tw-content);
        background-image: linear-gradient(180deg,rgba(247,148,30,0) 0,#f7941e 196.39%)
    }

    .after\:bg-\[linear-gradient\(180deg\2c _rgba\(255\2c 255\2c 255\2c 0\.00\)_0\%\2c _\#FFF_100\%\)\]::after {
        content: var(--tw-content);
        background-image: linear-gradient(180deg,rgba(255,255,255,0) 0,#fff 100%)
    }

    .after\:bg-testimonial-banner::after {
        content: var(--tw-content);
        background-image: url('../images/testimonial/bg-img.png')
    }

    .after\:bg-cover::after {
        content: var(--tw-content);
        background-size: cover
    }

    .after\:bg-no-repeat::after {
        content: var(--tw-content)
    }

    .hover\:ml-\[5px\]:hover {
        margin-left: 5px
    }

    .hover\:bg-destructive:hover {
        background-color: var(--destructive)
    }

    .group\/card:hover .group-hover\/card\:bg-green, .hover\:bg-green:hover {
        background-color: var(--green)
    }

    .group:hover .group-hover\:text-destructive-foreground, .group\/card:hover .group-hover\/card\:text-destructive-foreground, .hover\:text-destructive-foreground:hover {
        color: var(--destructive-foreground)
    }

    .group:hover .group-hover\:text-primary-foreground, .group\/btn:hover .group-hover\/btn\:text-primary-foreground, .hover\:text-primary-foreground:hover {
        color: var(--primary-foreground)
    }

    .\[\&_\.swiper-slide-active\>img\]\:invert-0 .swiper-slide-active > img, .hover\:invert-0:hover {
        --tw-invert: invert(0)
    }

    .group:hover .group-hover\:ml-20 {
        margin-left: 5rem
    }

    .group\/team:hover .group-hover\/team\:rounded-bl-\[50px\] {
        border-bottom-left-radius: 50px
    }

    .group\/team:hover .group-hover\/team\:rounded-tr-\[50px\] {
        border-top-right-radius: 50px
    }

    @media (min-width:1280px) {
        .xl\:left-\[90\%\] {
            left: 90%
        }

        .xl\:mt-7 {
            margin-top: 1.75rem
        }

        .xl\:mt-7\.5 {
            margin-top: 30px
        }

        .xl\:block {
            display: block
        }

        .xl\:flex {
            display: flex
        }

        .xl\:hidden {
            display: none
        }

        .xl\:w-auto {
            width: auto
        }

        .xl\:max-w-\[750px\] {
            max-width: 750px
        }

        .xl\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .xl\:grid-cols-\[45\%_52\%\] {
            grid-template-columns: 45% 52%
        }

        .xl\:grid-cols-\[850px_auto\] {
            grid-template-columns: 850px auto
        }

        .xl\:justify-between {
            justify-content: space-between
        }

        .xl\:gap-20 {
            gap: 5rem
        }

        .xl\:gap-x-20 {
            -moz-column-gap: 5rem;
            column-gap: 5rem
        }

        .xl\:p-10 {
            padding: 2.5rem
        }

        .xl\:px-10 {
            padding-left: 2.5rem;
            padding-right: 2.5rem
        }

        .xl\:px-15 {
            padding-left: 60px;
            padding-right: 60px
        }

        .xl\:px-\[85px\] {
            padding-left: 85px;
            padding-right: 85px
        }

        .xl\:py-20 {
            padding-top: 5rem;
            padding-bottom: 5rem
        }

        .xl\:py-5 {
            padding-top: 1.25rem;
            padding-bottom: 1.25rem
        }

        .xl\:py-\[38px\] {
            padding-top: 38px;
            padding-bottom: 38px
        }

        .xl\:py-\[53px\] {
            padding-top: 53px;
            padding-bottom: 53px
        }

        .xl\:pl-7 {
            padding-left: 1.75rem
        }

        .xl\:pl-7\.5 {
            padding-left: 30px
        }

        .xl\:pt-7 {
            padding-top: 1.75rem
        }

        .xl\:pt-7\.5 {
            padding-top: 30px
        }

        .xl\:text-\[70px\] {
            font-size: 70px
        }

        .xl\:leading-\[128\%\] {
            line-height: 128%
        }

        .xl\:leading-\[130\%\] {
            line-height: 130%
        }

        .xl\:text-inherit {
            color: inherit
        }
    }

    @media (min-width:1536px) {
        .\32xl\:left-15 {
            left: 60px
        }

        .\32xl\:top-\[120px\] {
            top: 120px
        }

        .\32xl\:w-auto {
            width: auto
        }

        .\32xl\:opacity-100 {
            opacity: 1
        }
    }

    @media (min-width:1800px) {
        .min-\[1800px\]\:max-w-full {
            max-width: 100%
        }

        .min-\[1800px\]\:pb-\[179px\] {
            padding-bottom: 179px
        }

        .min-\[1800px\]\:pt-\[291px\] {
            padding-top: 291px
        }
    }

    .logo img {
        width: 200PX;
        height: auto
    }

    #bgvid2, .bgvid2 {
        width: 100%;
        float: left
    }

    .header-bottom {
        padding: 30PX 0
    }

    .bgvid2 {
        height: auto;
        position: absolute;
        z-index: 3
    }

    #bgvid2 {
        height: 100%
    }

    .AboutPageDetails2, .Educators .itemB img, .EducatorsB .itemB img, .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS, .bgvid2 video, .swiper-slide .item img {
        width: 100%;
        height: auto;
        float: left
    }

    .banner-sectionNew {
        padding: 0 !important;
        position: relative;
        width: 100%;
        float: left
    }

       .bgvid2B, .video-background .overlay {
            position: absolute;
            width: 100%;
            height: 100%
        }

        .banner-sectionNew .AbsFace {
            float: left;
            display: table;
            z-index: 2
        }
        .banner-sectionNew .AbsFace {
            position: absolute;
            width: 100%;
            height: 100vh;
            display: table;
            z-index: 2;
        }

            .bgvid2B {
                float: left;
                z-index: 1;
                top: 0;
                background-color: #00000067
            }

    .Patronage, .ants-container, .video-background, header {
        position: relative
    }

    .banner-sectionNew .AbsFace .blockTable {
        display: table-cell;
        vertical-align: middle;
        color: #ffff
    }

        .banner-sectionNew .AbsFace .blockTable h1 {
            font-size: 20px;
            text-align: center !important;
            display: block;
            margin: 0 auto;
            width: 90%;
            float: none;
            line-height: 30px;
        }

    .Aboutcard p, .banner-sectionNew .AbsFace p {
        color: #ffffffd1
    }

    .video-background {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

        .video-background iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 177.77vh; /* نسبة 9:16 */
            height: 100vh;
            transform: translate(-50%, -50%);
            border: 0;
           
        }

        .video-background .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.42);
            z-index: 0;
        }

    .clear {
        clear: both
    }

    header {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        background-color: rgb(0,0,0,0);
        color: #fff;
        text-align: center;
        z-index: 1;
        float: left !important
    }

    .leftSide {
        float: left;
        width: 100%;
        height: auto
    }

    .RightSide {
        width: 100%;
        margin-top: 50px
    }

    .imageBox {
        width: 100%
    }

        .imageBox img {
            width: 95%
        }

    .RightSide .title {
        text-align: center;
        display: block;
        padding: 20px 0 10px;
        font-size: 20px;
        color: #f7941e
    }

    .RightSide .title2 {
        text-align: center;
        display: block;
        font-size: 16px;
        color: #db1a21
    }

    .Patronage {
        background: url(../../assets/images/PrincessN.jpg) center center/cover no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 600px;
        width: 100%;
        display: table;
        margin-top:40px
    }

        .Patronage .cell, .VedioConterner .cell {
            display: table-cell;
            vertical-align: middle
        }

        .Patronage .title {
            color: #333;
            font-size: 36px;
            display: block;
            line-height: 45px
        }

        .GetToKnow .warp, .GetToKnow2 .warp, .Patronage .textInfo, .warp2 {
            width: 90%;
            height: auto;
            float: none;
            display: block;
            margin: 0 auto
        }

            .Patronage .textInfo .Qoute {
                color: #343434 !important;
                font-size: 21px;
                line-height: normal;
                width: 100%;
                float: right;
                text-align: justify
            }

                .Patronage .textInfo .Qoute span {
                    font-size: 16px;
                    font-style: italic;
                    padding-top: 20px;
                    display: block
                }

    .GetToKnow, .GetToKnow2 {
        width: 100%;
        height: auto;
        float: left;
        padding: 50px 0;
        background-color: #0000000a
    }

        .GetToKnow .mainTi, .GetToKnow2 .mainTi {
            text-align: center !important;
            font-size: 32px
        }

        .GetToKnow .GetToKnowBoxs, .GetToKnow2 .GetToKnowBoxs {
            width: 100%;
            height: auto;
            float: left;
            margin-top: 50px
        }

            .GetToKnow .GetToKnowBoxs .itemss {
                width: 100%;
                margin-right:0%;
                margin-bottom:30px;
                height: auto;
                float: left;
                padding: 20px 0;
                background-color: #fff;
                -webkit-transition: .3s ease-in-out;
                -moz-transition: .3s ease-in-out;
                -o-transition: .3s ease-in-out;
                transition: .3s ease-in-out
            }

                .Educators .itemB:nth-child(4n), .GetToKnow .GetToKnowBoxs .itemss:nth-child(3n), .GetToKnow2 .GetToKnowBoxs .itemss:nth-child(2n), .GetToKnow3 .itemNew:nth-child(3n), .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2:nth-child(3n) {
                    float: right;
                    margin-right: 0
                }

                .GetToKnow .GetToKnowBoxs .itemss:hover, .GetToKnow2 .GetToKnowBoxs .itemss:hover {
                    background-color: #f7941e10;
                    -webkit-transition: .3s ease-in-out;
                    -moz-transition: .3s ease-in-out;
                    -o-transition: .3s ease-in-out;
                    transition: .3s ease-in-out
                }

                .GetToKnow .GetToKnowBoxs .itemss .infoInBox, .GetToKnow2 .GetToKnowBoxs .itemss .infoInBox {
                    width: 95%;
                    height: auto;
                    float: none;
                    display: block;
                    margin: 0 auto;
                    padding: 1%
                }

                    .GetToKnow .GetToKnowBoxs .itemss .infoInBox img, .GetToKnow2 .GetToKnowBoxs .itemss .infoInBox img {
                        height: 170px;
                        width: auto;
                        display: block;
                        margin: 0 auto
                    }

                    .GetToKnow .GetToKnowBoxs .itemss .infoInBox .title, .GetToKnow2 .GetToKnowBoxs .itemss .infoInBox .title {
                        font-family: 'Comic Relief';
                        color: #f7941e;
                        font-size: 24px;
                        text-align: center;
                        padding-top: 25px
                    }

                    .GetToKnow .GetToKnowBoxs .itemss .infoInBox .title2, .GetToKnow2 .GetToKnowBoxs .itemss .infoInBox .title2 {
                        color: #db1a21;
                        font-family: 'Comic Relief';
                        padding-top: 25px;
                        font-size: 24px;
                        text-align: center
                    }

                    .GetToKnow .GetToKnowBoxs .itemss .infoInBox .title3, .GetToKnow2 .GetToKnowBoxs .itemss .infoInBox .title3 {
                        color: #73be48;
                        font-family: 'Comic Relief';
                        padding-top: 25px;
                        font-size: 24px;
                        text-align: center
                    }

    .Aboutcard:nth-child(3), .bg-coss {
        background-color: #ed145b
    }

    .spans {
        color: rgb(111 111 111);
        font-size: 12px
    }

    .gridSwiper {
        width: 90%;
        height: auto;
        float: none;
        display: block;
        margin: 0 auto
    }

    .swiper-slide .item {
        width: 100%;
        padding: 30px 0;
        border-radius: 10px;
        background-color: #f1f1f180;
        height: auto;
        float: left;
        --tw-shadow: 0px 4.8px 24.4px -6px rgb(19 16 34 / 20%);
        --tw-shadow-colored: 0px 4.8px 24.4px -6px var(--tw-shadow-color)
    }

        .Educators .itemB .infoBoxsd, .EducatorsB .itemB .infoBoxsd, .swiper-slide .item .infoBoxsd {
            width: 90%;
            height: auto;
            display: table;
            margin: 0 auto
        }

        .swiper-slide .item h4 {
            padding-top: 10px !important;
            float: left;
            text-align: center;
            width: 100%
        }

        .swiper-slide .item h5 {
            color: #464646;
            padding-top: 15px;
            text-align: center
        }

    .top-15N {
        top: 50px
    }

    .w-fullN {
        width: 150px
    }

    .w-fullN2 {
        width: 100px
    }

    .ants-container {
        width: 100%;
        height: 90px;
        float: left;
        margin-top: -85px
    }

    .ant {
        position: absolute;
        width: 70px;
        height: auto;
        top: 0
    }

    .titlenn {
        padding-top: 20px !important;
        float: left;
        width: 100%
    }

    .Viewall {
        text-align: center;
        width: 100%;
        float: left;
        padding: 20px 0;
        text-decoration: underline
    }

    .Testo {
        width: 100%;
        height: auto;
        float: left;
        position: relative
    }

    .Aboutsection {
        margin-bottom: 40px;
        background-color: #fff
    }

        .Aboutsection h2 {
            color: #f7941e;
            font-size: 32px;
            display: table
        }

    .Aboutgrid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
        gap: 20px
    }

    .Aboutcard {
        background-color: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0,0,0,.1);
        text-align: center
    }

        .Aboutcard h3 {
            margin: 10px 0;
            color: #ffffffd1;
            font-size: 24px
        }

        .Aboutcard:first-child {
            background-color: #1cbbb4
        }

        .Aboutcard:nth-child(2) {
            background-color: #f7941e
        }

        .Aboutcard:nth-child(5) {
            background-color: #e7cd07
        }

        .Aboutcard:nth-child(6) {
            background-color: rgb(59 130 246 / .5)
        }

    .socialicons {
        position: fixed;
        top: 69%;
        right: 50px;
        transform: translateY(-50%);
        display: block;
        flex-direction: column;
        gap: 10px;
        z-index: 9;
    }

        .socialicons a {
            text-decoration: none;
            display: flex;
            align-items: center;
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
            background-color: #f1f1f1;
            border-radius: 50%;
            transition: background-color .3s,transform .3s
        }

            .socialicons a:first-child {
                background-color: #fd0
            }

            .socialicons a:nth-child(2) {
                background-color: #db1a21
            }

            .socialicons a:nth-child(3) {
                background-color: #72bf44
            }

            .socialicons a:hover {
                opacity: .7
            }

        .socialicons i {
            font-size: 16px;
            color: #fff
        }

    .GetToKnowPage {
        width: 100%;
        height: auto;
        margin: 50px 0;
        float: left
    }

        .GetToKnowPage .title {
            color: #db1a21;
            font-size: 49px !important;
            padding-bottom: 10px !important
        }

    .BannerPagesD {
        width: 100%;
        height: auto;
        float: left;
        padding: 40px 0;
        background-color: #e9ffe5
    }

        .BannerPagesD .title {
            float: left;
            font-size: 22px;
            color: #000
        }

        .BannerPagesD .title2, .BannerPagesD a, .BannerPagesD span {
            font-size: 15px;
            color: #000;
            float: left
        }

        .BannerPagesD span {
            padding: 0 10px
        }

    .GetToKnowPage .DetailsSlide {
        width: 100%;
        float: left;
        margin-top: 40px
    }

    .GetToKnowPage .DetailsSlide2 {
        width: 100% !important;
        float: left;
        margin-top: 40px
    }

    .GetToKnowPage .DetailsSlide .titleB {
        float: left;
        width: 100%;
        height: auto;
        font-size: 24px;
        text-align: left;
        color: #ed145b
    }

    .GetToKnowPage .DetailsSlide .prev {
        width: 100%;
        height: auto;
        float: left;
        margin-top: 20px
    }

    .GetToKnowPage .imageBoxR {
        width: 100%;
        float: right; margin-top: 20px;
    }

        .GetToKnowPage .imageBoxR img, .GetToKnowPage .imageBoxR2 img {
            width: 100%;
            height: auto
        }

    .otherDet {
        width: 100%;
        float: left
    }

    .GetToKnow2 .GetToKnowBoxs .itemss {
        width: 100%;
        height: auto;
        float: left;
        padding: 20px 0;
        background-color: #fff;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
            
    }

    .photo img, .play-button {
        transition: transform .3s
    }

    .fontZ {
        font-size: 18px;
        display: block;
        padding-top: 10px
    }

    .iconsW {
        height: 64px
    }

    .text-primary-foreground2 {
        color: #db1a21 !important;
        font-size: 36px !important;
        padding-bottom: 10px !important;
        line-height: 45px;
        text-align: left !important;
    }

    .GetToKnowPage .imageBoxR2 {
        width: 100%;
        max-width: 600px;
        float: right
    }

    .sliderS {
        width: 100%;
        max-width: 600px;
        text-align: center
    }

        .sliderS .main-image {
            width: 100%;
            border-radius: 10px;
            margin-bottom: 10px;
            transition: opacity .3s
        }

        .sliderS .thumbnails {
            display: flex;
            justify-content: center;
            gap: 10px
        }

            .sliderS .thumbnails img {
                width: 80px;
                height: 80px;
                border: 2px solid #ddd;
                border-radius: 10px;
                cursor: pointer;
                transition: border-color .3s,transform .3s
            }

    .Educators .itemB, .EducatorsB .itemB {
        padding: 30px 0;
        border-radius: 10px;
        background-color: #f1f1f180;
        --tw-shadow: 0px 4.8px 24.4px -6px rgb(19 16 34 / 20%);
        --tw-shadow-colored: 0px 4.8px 24.4px -6px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
        height: auto
    }

    .sliderS .thumbnails img:hover {
        border-color: #007bff;
        transform: scale(1.1)
    }

    .sliderS .thumbnails img.active {
        border-color: #007bff
    }

    .GetToKnow3 .itemNew {
        width: 32%;
        height: auto;
        float: left;
        margin-right: 2%
    }

    .EducatorsB {
        width: 100%;
        height: auto;
        float: left;
        margin-bottom: 50px
    }

        .EducatorsB .itemB {
            width: 100%;
            display: block;
            margin: 0 auto;
            float: none
        }

            .EducatorsB .itemB h4 {
                padding-top: 10px !important;
                float: left;
                width: 100%;
                text-align: center !important
            }

            .EducatorsB .itemB h5 {
                color: #464646;
                text-align: center
            }

    .Educators {
        width: 90%;
        height: auto;
        float: none;
        margin: 0 auto 50px;
        display: table
    }

        .Educators .itemB {
            width: 100%;
            margin-right:0%;
            float: left
        }

            .Educators .itemB h4 {
                padding-top: 20px !important;
                float: left;
                width: 100%;
                text-align: center !important
            }

            .Educators .itemB h5 {
                color: #464646;
                padding-top: 15px;
                width: 100%;
                text-align: center !important
            }

    footer {
        background-color: #f0f0f0;
        padding: 40px 0 20px
    }

    .AboutPageDetails {
        width: 100%;
        height: auto;
        float: left;
        margin: 50px 0
    }

        .AboutPageDetails .imageSld {
            width: 100%;
            height: auto;
            float: left
        }

        .AboutPageDetails .imageSld2 {
            width: 100%
        }

        .AboutPageDetails .imageSld img, .AboutPageDetails2 .imageSld img {
            width: 100%;
            height: auto;
            float: left;
            border-radius: 5px
        }

        .AboutPageDetails .AboutInfo {
            width: 100%;
            float: right;
            margin-top: 50px
        }

        .AboutPageDetails .AboutInfo2 {
            width: 100%;
            float: right;
            margin-top: 0
        }

    .AboutPageDetails2 .imageSld {
        width: 100%;
        height: auto;
        float: right
    }

    .AboutPageDetails2 .AboutInfo {
        width: 100%;
        float: left;
        margin-top: 0
    }

    .AboutPageDetails2 ul li {
        list-style: circle !important;
        padding-left: 10px !important
    }

    .mrtop {
        margin-top: 100px !important;
        float: left
    }

    .GroupsPage {
        width: 100%;
        height: auto;
        float: left;
        margin-top: 100px
    }

        .GroupsPage .FirstI, .GroupsPage .FirstI p {
            width: 100%;
            float: left
        }

            .GroupsPage .FirstI img {
                width: 200px;
                height: auto;
                float: right
            }

        .GroupsPage .GroupsBoxx {
            width: 100%;
            height: auto;
            float: left;
            margin-top: 50px;
            padding: 40px 0
        }

            .GroupsPage .GroupsBoxx .warpe {
                width: 100%;
                height: auto;
                display: block;
                margin: 0 auto
            }

            .GroupsPage .GroupsBoxx .warpe2 {
                width: 100%;
                height: auto;
                display: block;
                margin: 0 auto
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item {
                width: 100%;
                float: left;
                height: auto;
                background-color: #fff;
                padding: 20px;
                border-radius: 155px 45px 225px 75px/15px 125px 15px 155px;
                margin-bottom: 50px;
                border: 5px solid #e99722
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2N, .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .itemc {
                height: auto;
                border-radius: 155px 45px 225px 75px/15px 125px 15px 155px;
                padding: 20px;
                background-color: #fff
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2N {
                width: 100% !important;
                float: left;
                margin-bottom: 50px;
                border: 5px solid #e99722
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .itemc {
                width: 100%;
                float: none !important;
                margin: 0 auto 50px !important;
                display: block !important;
                border: 5px solid #e99722
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item:nth-child(2n) {
                float: right
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item img, .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2 img {
                width: 100%;
                float: left;
                border-radius: 10px
            }

            .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2N img {
                width: 45% !important;
                float: left;
                border-radius: 10px
            }

    .Fr {
        float: right !important
    }

    .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item .title {
        color: #db1a21;
        font-size: 26px !important;
        padding: 20px 0;
        width: 100%;
        text-align: center;
        float: left
    }

    .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item .title2, .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2 .title2 {
        color: #000;
        font-size: 19px !important;
        width: 100%;
        text-align: center;
        float: left
    }

    .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item .prev, .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2 .prev {
        display: block;
        margin: 20px auto 0;
        width: 90%
    }

    .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2 {
        width: 100%;
        float: left;
        height: auto;
        margin-right: 2%;
        background-color: #fff;
        padding: 20px;
        border-radius: 155px 45px 225px 75px/15px 125px 15px 155px;
        margin-bottom: 50px;
        border: 5px solid #73be48
    }

        .GroupsPage .GroupsBoxx .warpe .GroupsBoxxS .item2 .title {
            color: #f7941e;
            font-size: 26px !important;
            padding: 20px 0;
            width: 100%;
            text-align: center;
            float: left
        }

    .widthFull {
        width: 100%;
        float: left;
        font-size: 16px !important;
        padding-top: 20px
    }

    .album {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 100%;
        margin: auto;
        padding: 20px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,.1)
    }

    .photo {
        width: 250px;
        height: 250px;
        background-color: #fff;
        border: 5px solid #72bf44;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0,0,0,.2);
        display: flex;
        align-items: center;
        justify-content: center
    }

        .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

    .VedioConterner {
        position: relative;
        background: url(../../assets/images/Princess2.jpg) center center/cover no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 300px;
        width: 100%;
        display: table;
        margin: 100px 0
    }

    .play-button {
        width: 80px;
        height: 80px;
        background: radial-gradient(circle,#ededed,#fff);
        border-radius: 50%;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 15px rgba(255,102,0,.6);
        position: relative
    }

        .play-button::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: 50%;
            opacity: .6;
            animation: 1.5s ease-in-out infinite pulse
        }

    .play-icon {
        width: 0;
        height: 0;
        border-left: 20px solid #db1a21;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent
    }

    @keyframes pulse {
        0%,100% {
            transform: scale(1);
            opacity: .6
        }

        50% {
            transform: scale(1.4);
            opacity: 0
        }
    }

    .video-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.85);
        z-index: 9999;
        justify-content: center;
        align-items: center
    }

    .video-popup-content {
        position: relative;
        width: 90%;
        max-width: 900px;
        height: 0;
        padding-bottom: 56.25%
    }

        .video-popup-content iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,.7)
        }

    .close-btn {
        position: absolute;
        top: 90px;
        right: 0;
        font-size: 40px;
        font-weight: 700;
        z-index: 10000;
        transition: .3s;
        color: #fff
    }

        .close-btn:hover {
            color: #0000;
            transform: scale(1.2)
        }

    html {
        scroll-behavior: smooth
    }
    @media only screen and (max-width: 640px) {
        p {
            color: #2f2e2e;
            font-size: 15px !important;
            text-align: justify !important;
        }

        #scrollTopBtn {
            position: fixed;
            bottom: 30px;
            left: 30px;
            right: auto;
            z-index: 1000;
            border: none;
            border-radius: 50%;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,.2);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .4s,transform .4s
        }

            #scrollTopBtn svg {
                width: 24px;
                height: 24px;
                fill: white
            }

            #scrollTopBtn.show {
                opacity: 1;
                transform: translateY(0)
            }

        .swiper-button-next, .swiper-button-prev {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important
        }

        .desktopnavbanr {
            display: none !important
        }

        .mobilemenu {
            display: block !important;
        }

            .mobilemenu a {
                color: #fff !important;
            }

        #mobile-menu {
            background-color: #73BE48;
        }

        #menu-toggle {
            color: #73BE48;
        }

        @media only screen and (max-width: 640px) {
            .btn:hover::after, .container, .w-full {
                width: 90% !important;
            }
        }
        .itemcon {
            width: 100%;
            height: auto;
            float: left;
            margin-top: 50px;
        }

            .itemcon .itte {
                width: 100%;
                height: auto;
                float: left;
                margin-right:0%;
               margin-bottom:30px;
            }

                .itemcon .itte:nth-child(3n) {
                    float: left;
                    margin-right: 0;
                }

                .itemcon .itte p {
                    text-align: left !important;
                }

        .spss {
            float: left;
            width: 100%;
            margin-top: 40px;
        }
    }
    }