:root {

    --clr-blue: #1B1464;

    --clr-white: #fff;

    --clr-black: #000;

    --clr-light-blue: #1A2E42;

    --clr-yellow: #FBB03B;

    --clr-gray: #737373;

    --clr-offwhite: #F8F5F1;

    /* Font Varible */

    --font-family: 'Merriweather', serif;

}





/**********************

     Main Section Like Body Section

                **********************************/

html,

body {

    font-family: 'Merriweather', serif;

    overflow-x: hidden;

    font-size: 1em;

}



/*******************

     Common Css

            ********************/

/**************

    Button

        ******************/


/*
.container {

    max-width: 1320px;

}
*/


.blue-btn {

    border-radius: 0px;

    border: 2px solid var(--clr-white);

    background: var(--clr-blue);

    color: var(--clr-white);

    text-align: center;

    font-weight: 700;

    font-size: clamp(1rem, 1.04vw, 1.125rem);

    text-transform: uppercase;

    padding: max(.50vw, .65em) max(2vw, 1.25rem);

    margin-top: max(2vw, 1.25rem);

    transition: .2s ease-in-out 0s;

    text-decoration: none;

    display: inline-block;

}



.blue-btn:hover {

    border-color: currentColor;

    background-color: var(--clr-white);

    color: var(--clr-blue);

}



.yellow-btn {

    border: 2px solid var(--clr-yellow);

    outline: none;

    font-weight: 700;

    background-color: var(--clr-yellow);

    font-size: clamp(1em, 1.04vw, 1.125rem);

    color: var(--clr-white);

    padding: .85rem 1.5rem;

    letter-spacing: 0.2px;

    white-space: nowrap;

    border-radius: 0px;

    text-transform: uppercase;

    transition: .2s ease-in-out 0s;

}



.yellow-btn:hover {

    border-color: currentColor;



    background-color: transparent;

    color: var(--clr-yellow);

}



.custom-btn {

    font-size: clamp(1em, .90vw, 1.125rem);

    color: var(--clr-blue);

    font-weight: 700;

    line-height: 16px;

    letter-spacing: 0.2px;

    padding-inline: 0px 1em;

    position: relative;

    display: inline-flex;

    align-items: center;

    transition: all .3s ease;

    text-decoration: none;

    background: transparent;

    border: none;

    outline: none;

}



.custom-btn::before {

    content: '';

    position: absolute;

    right: 0;

    transition: all .3s ease;

    border-width: 2px 2px 0px 0px;

    border-style: solid;

    border-color: var(--clr-blue);

    display: block;

    width: 16px;

    height: 16px;

    transform: rotate(45deg);

}



.custom-btn::after {

    content: '';

    position: absolute;

    right: 0;

    transition: all .3s ease;

    width: 20px;

    height: 2px;

    background-color: var(--clr-blue);

    opacity: 0;

}



.custom-btn:hover::after {

    opacity: 1;

    right: -11px;

}



.custom-btn:hover::before {

    right: -10px;

}



/****************

         Common Matairel

                **********************/

section {

    position: relative;

}



img {

    max-width: 100%;

    display: block;

}



.state-line {

    width: max(4.89vw, 2em);

    height: 7px;

    background: var(--clr-blue);

    margin-bottom: max(1.5vw, .5em);

    display: inline-block;

}



/* Asign Common Font Size  */

p {

    color: var(--clr-light-blue);

    font-weight: 400;

    font-family: var(--font-family);

    line-height: 200%;

    letter-spacing: 0.0125rem;

    font-size: clamp(.95em, 0.90vw, 1.065rem);

}



ul,

ol {

    font-size: clamp(.95em, 0.90vw, 1rem);

    font-weight: 400;

    color: var(--Clr-black);

    line-height: 200%;

    letter-spacing: 0.0125rem;

    margin-top: .5em;

}



a {

    font-size: clamp(.95em, 0.90vw, 1rem);

    text-decoration: underline;

    letter-spacing: 0.0125rem;

    color: var(--clr-blue);

}



a:hover {

    text-decoration: none;

}



h6,

.h6,

h5,

.h5,

h4,

.h4,

h3,

.h3,

h2,

.h2,

h1,

.h1 {

    line-height: 150%;

    letter-spacing: 0.0125rem;

    color: var(--clr-blue);

}



@media screen and (max-width:768px) {

    .col-reverse {

        flex-flow: column-reverse;

        gap: 1.5rem

    }

}





/*******************

    Spacing Common Css

                ******************/



.pt-40 {

    padding-top: max(2.5vw, 1.5rem)

}



.px-80 {

    padding-inline: max(4.16vw, 2rem)

}



.pt-100 {

    padding-top: max(5.20vw, 6.5em);

}



.mt-100 {

    margin-top: max(5.20vw, 6.5em);

}



.my-100 {

    margin-block: max(5.20vw, 6.5em);

}



.mt-200 {

    margin-top: max(10.40vw, 6em);

}



.py-200 {

    padding-block: max(10.416vw, 5rem);

}



.py-100 {

    padding-block: max(5.20vw, 5em);

}



.pt-200 {

    padding-top: max(10.416vw, 5rem);

}



.pb-200 {

    padding-bottom: max(10.416vw, 5rem);

}



.mb-300 {

    margin-bottom: max(20.416vw, 8rem);

}



.mt-300 {

    margin-top: max(15vw, 12rem);

}



/***********************

         Navigation Section Css

                    *******************/

.navbar>.container-fluid {

    position: absolute;

    z-index: 9;

    top: 0;

    background: var(--clr-blue);

    padding: 1em 2.60vw;

}



.navbar-brand img {

    max-width: 85%

}



@media screen and (min-width:992px) {

    .navbar>.container-fluid {

        background: linear-gradient(180deg, rgba(60, 60, 69, 0.99) 0%, rgba(0, 0, 0, 0.00) 100%);



    }

}



@media screen and (max-width:991px) {

    .navbar-collapse {

        margin-top: 2rem;

    }

}



.navbar .navbar-nav .nav-item {

    padding: .25rem 1.5rem;

    list-style: none;

}



.navbar .navbar-nav .nav-link {

    color: var(--clr-white);

    font-family: var(--font-family);

    font-weight: 700;

    ;

    font-size: clamp(1rem, 1vw, 1.125rem);

    line-height: 120%;

    text-transform: uppercase;

    position: relative;

    padding-inline: 0px;

}



@media screen and (max-width:768px) {

    .navbar-nav .nav-link::after {

        display: none;

    }



    .navbar-nav .nav-link.active {

        color: var(--clr-yellow);

    }

}



.navbar-nav .nav-link::after {

    content: '';

    position: absolute;

    width: 100%;

    transform: scaleX(0);

    height: 2px;

    bottom: 0;

    left: 0;

    background-color: var(--clr-yellow);

    transform-origin: bottom right;

    transition: transform 0.25s ease-out;

}



.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link:hover,

.navbar-nav .nav-link.active::after {

    transform: scaleX(1);

    transform-origin: bottom left;

    color: var(--clr-yellow);

}



.navbar.fixed>.container-fluid {

    position: fixed !important;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1030;

    animation: smoothScroll .7s forwards;

    background-color: var(--clr-blue);

    backdrop-filter: blur(5px);

    box-shadow: 0 0 35px rgb(0 0 0 / 10%);

}



@keyframes smoothScroll {

    0% {

        transform: translateY(-70px);

    }



    100% {

        transform: translateY(0px);

    }

}



.contact-btn {

    text-transform: uppercase;

    padding: .8em 1.25em !important;

    transition: .3s ease-in-out 0s;

    text-decoration: none;

    margin-top: 1rem;

    display: inline-block;

}



@media screen and (min-width:992px) {

    .contact-btn {

        margin-top: 0;

    }

}



.navbar-toggler {

    width: 35px;

    height: 20px;

    position: relative;

    transition: .5s ease-in-out;

    display: flex;

    justify-content: space-around;

    margin-right: .5rem;

}



.navbar-toggler .toggler-icon {

    display: block;

    position: absolute;

    height: 2px;

    width: 100%;

    background-color: var(--clr-white);

    border-radius: 4px;

    opacity: 1;

    transform: translate(0deg);

    transition: .5s ease-in-out 0s;

}



.navbar-toggler .top-bar {

    margin-top: 0px;

    transform: rotate(135deg);

}



.navbar-toggler .middle-bar {

    opacity: 0;

}



.navbar-toggler .bottom-bar {

    transform: rotate(-135deg);

    margin-top: 0px

}



.navbar-toggler.collapsed .top-bar {

    margin-top: -10px;

    transform: none;

}



.navbar-toggler.collapsed .middle-bar {

    opacity: 1;

}



.navbar-toggler.collapsed .bottom-bar {

    margin-top: 10px;

    transform: none

}





/**************************

            Hero Section (Slider)

                        ***************************/

.hero-image {

    background-position: center center !important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    display: flex;

    justify-content: center;

    flex-direction: column;

    position: relative;

    min-height: 35rem;

}



.banner-content {

    font-family: var(--font-family);

    font-weight: 700;

    color: var(--clr-white);

    max-width: max(45vw, 22em);

    width: fit-content;

    line-height: 120%;

    text-transform: capitalize;

    backdrop-filter: blur(8px);

    background-color: #221c5e45;

    padding: max(1.5vw, 1.25rem);

    border-radius: 4px;

}



@media screen and (min-width:1025px) {

    .hero-slider {

        background: var(--clr-blue);

        padding-bottom: 10.5rem;

        -webkit-clip-path: polygon(100% 0, 100% 72%, 26% 94%, 0 66%, 0% 0%);

        clip-path: polygon(100% 0, 100% 72%, 26% 94%, 0 66%, 0% 0%);

        overflow: hidden;

    }



    .hero-image {

        height: max(95vh, 30rem);

        -webkit-clip-path: polygon(100% 0, 100% 62%, 47% 100%, 0 76%, 0% 0%);

        clip-path: polygon(100% 0, 100% 62%, 47% 100%, 0 76%, 0% 0%);

        overflow: hidden;

    }

}



.hero-title {

    font-size: clamp(2em, 4.16vw, 4rem);

    line-height: 120%;

    display: block;

    color: var(--clr-white);

}



.banner-sub-title {

    font-size: clamp(1.25em, 2vw, 2rem);

    line-height: 150%;

    font-weight: 400;

    margin-top: .25em;

    color: var(--clr-white);

}



.fixed-connect-menu {

    position: fixed;

    top: 17rem;

    right: 0;

    z-index: 1;

    transform: translateX(85%);

}



.fixed-connect-menu ul li {

    list-style: none;

}



.fixed-connect-menu ul li a {

    background-color: var(--clr-yellow);

    color: var(--clr-blue);

    transition: .3s ease-in-out 0s;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: .5em;

    border-bottom: 1px solid var(--clr-white);

}



.fixed-connect-menu ul li a:hover {

    color: var(--clr-yellow);

    background-color: var(--clr-white);

}



.fixed-connect-menu ul li:last-child a {

    border-bottom: none;

}



.fixed-connect-menu ul li a i {

    font-size: 24px;

    padding: .75rem;

}











/****************

         Head Section Css

                    *****************/

.academic-director-name {

    color: var(--clr-blue);

    font-family: var(--font-family);

    font-weight: 400;

    font-style: italic;

    font-size: clamp(1.5em, 1.56vw, 1.875rem);

    margin-bottom: .25em;

}



.academic-director {

    font-size: clamp(.95em, 0.90vw, 1.125rem);

    color: var(--clr-light-blue);

    font-family: var(--font-family);

    font-weight: 400;

}



.head-title {

    color: var(--clr-blue);

    font-family: var(--font-family);

    font-weight: 700;

    ;

    ;

    font-size: clamp(1.65em, 2.08vw, 2.5rem);

    line-height: 150%;

    letter-spacing: 0.2px;

}



.head-sub-title {

    color: var(--clr-blue);

    font-family: var(--font-family);

    font-weight: 700;

    ;

    font-size: clamp(1.25em, 1.25vw, 1.5rem);

    line-height: 150%;

    letter-spacing: 0.2px;

    margin-block: 1em .5em;

}



.head-description {

    color: var(--clr-light-blue);

    font-family: var(--font-family);

    font-weight: 400;

    font-size: clamp(.95em, 0.90vw, 1.065rem);

    line-height: 200%;

    letter-spacing: 0.0125rem;

}



.head-content .custom-btn {

    margin-top: max(1.65vw, 1rem)

}







/***********************

         Journery Section css

                ***************************/

@media screen and (min-width:769px) {

    .Journey-section {

        align-items: center;

    }

}



@media screen and (max-width:769px) {

    .Journey-section .row {

        flex-flow: column-reverse;

        gap: 2em

    }

}



.common-card {

    padding: max(1.5vw, 1.5em) max(1.35vw, 1.5em);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 1.25rem;

    background: var(--clr-white);

    box-shadow: 0px 13px 19px 0px rgba(0, 0, 0, 0.07);

    transition: all .3s ease-in-out 0s;

    text-decoration: none;

}



a.common-card:hover {

    background: var(--clr-yellow);

    color: #fff !important;

    border-radius: 8px;

}



a.common-card:hover * {

    color: #fff !important;

}



a.common-card:hover .icon-box,

a.common-card:hover .yellow-state-line {

    background: var(--clr-white)

}



.icon-box {

    border-radius: 0.625rem;

    background: var(--clr-yellow);

    padding: 1.375rem 1.1875rem;

    width: 75px;

    height: 77px;

    transition: all .3s ease-in-out 0s;

    display: flex;

    justify-content: center;

    align-items: center;

}



.journey-card {

    display: flex;

    align-items: center;

    gap: max(3vw, 2rem);

    flex-wrap: wrap;

    justify-content: flex-start;

}



@media screen and (min-width:480px) {

    .common-card {

        flex: 0 1 max(15vw, 13.15em);

        max-width: max(15vw, 13.15em);

        ;

    }

}



.card-title {

    color: var(--clr-blue);

    font-family: var(--font-family);

    font-weight: 700;

    ;

    ;

    line-height: 1.5;

    letter-spacing: 0.1px;

}



.yellow-state-line {

    width: max(4.89vw, 2em);

    height: 2px;

    background: var(--clr-yellow);

    display: inline-block;

}



.card-dis {

    color: var(--clr-gray);

    font-size: 14px;

    font-family: var(--font-family);

    font-weight: 400;

    line-height: 1.8;

    font-weight: 400;

    letter-spacing: 0.2px;

    margin-bottom: 0px;

}



.relative {

    position: relative;

}



.yellow-vactor {

    display: flex;

    justify-content: center;

    padding-inline: 0px;

}



@media screen and (min-width:768px) {

    .yellow-vactor {

        position: absolute;

    }

}



.yellow-vactor img {

    width: 100%;

}



@media screen and (min-width:768px) {

    .action-section .row {

        height: calc(40vw + 5em);

    }

}



.action-section {

    margin-top: max(8vw, 6rem)

}





/****************

        News Event Section Css

                *******************/

@media screen and (max-width:1281px) {

    .news-section {

        background: var(--clr-white);

        border: 6vw solid var(--clr-yellow);

        padding-block: 2rem;

    }

}



.news-section {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 7rem;

}



@media screen and (min-width:1281px) {

    .news-section {

        background: url('../img/small-4.svg');

        background-repeat: no-repeat;

        background-size: cover;

        background-position: center center;

        position: relative;

        height: calc(73vw - 4em);

    }



    .news-section .container {

        max-width: 60% !important;

    }

}



.news-card {

    margin-block: max(2vw, 1.25rem);

    text-decoration: none;

    display: block;

}



.news-card figure {

    transition: all .3s ease-in-out 0s;

    overflow: hidden;

}

.news-card figure img{
    height: 200px;
    width: 100%;
    object-fit: cover;
}



@media screen and (min-width:768px) {

    .news-card figure img{

        height: 270px;
        object-fit: cover;

    }

}



.news-card figure>img {

    transition: all .3s ease-in-out 0s;

}



.news-card:hover figure>img {

    transform: scale(1.1);

}



.news-date {

    color: var(--clr-yellow);

    font-family: var(--font-family);

    font-weight: 400;

    text-transform: capitalize;

}



.news-title {

    color: var(--clr-blue);

    font-family: var(--font-family);

    font-weight: 700;

    font-size: clamp(1.1em, 1.04vw, 1.25rem);

    line-height: 1.5;

    text-transform: capitalize;

    margin-top: .125em;

}



.news-card button {

    margin-top: max(1.5vw, 1.5em);

}





/**********************

        Parent Saying Slider

             *****************************/

.parent-feedback {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    align-items: center;

    justify-content: center;

}



.parent-feedback figure {

    border-radius: 50px;

    width: 120px;

    height: 120px;

    margin-inline: auto;

    overflow: hidden;

}



.parent-name {

    color: var(--clr-blue);

    font-size: max(1vw, 1em);

    font-family: var(--font-family);

    font-weight: 400;

    line-height: 120%;

    text-transform: capitalize;

}



.parent-dis {

    color: var(--clr-light-blue);

    text-align: center;

    font-family: var(--font-family);

    font-weight: 400;

    font-size: clamp(1.06rem, 1.5vw, 1.38rem);

    line-height: 180%;

}



.saying-slider {

    overflow: hidden;

    position: relative;

}



.saying-slider .swiper-pagination {

    position: relative;

    bottom: 0;

    margin-top: 1rem;

}



.saying-slider .swiper-pagination-bullet-active {

    background: var(--clr-blue);

}





/**********************

         Subscribe-box Section Css

                    **********************/

.stay-touch {

    max-width: 45em;

    margin-inline: auto;

    padding-inline: 1rem;

}



.subscribe-box {

    display: flex;

    margin-top: max(5vw, 2rem);

    flex-direction: column;

}



.top-title {

    font-size: 1em;

    font-family: var(--font-family);

    font-weight: 700;

    ;

    color: var(--clr-yellow);

    margin-bottom: .5em;

    display: inline-block;

}



@media screen and (min-width:592px) {

    .subscribe-box {

        flex-direction: row

    }



}



.subscribe-box>input {

    background: #F9F9F9;

    color: var(--Clr-black);

    padding: 1rem;

    font-size: 1.125rem;

    width: 100%;

    border: none;

    font-family: var(--font-family);

    font-weight: 400;

    outline: none;

    border: 1px solid #E6E6E6;

}



@media screen and (max-width:768px) {

    .branding-partical {

        display: none;

    }

}



.branding-partical img {

    max-width: 25%;

    position: absolute;

}



.branding-partical-position-1 img {

    top: -25vw;

    z-index: 1;

    right: 0

}



.branding-partical-position-2 img {

    left: 2vw;

    top: 15vw

}



.branding-partical-position-3 img {

    right: 1vw;

    top: -15vw

}



.branding-partical-position-4 img {

    top: -9vw;

    right: 0;

}



.branding-partical-position-5 img {

    top: 12vw;

    left: 5vw;

    z-index: -99;

}



.branding-partical-position-6 img {

    left: 4vw;

    top: -15vw;

    max-width: 13%

}



.branding-partical-team-1 img {

    top: 1vw;

    left: 3vw;

    max-width: 15%;

}





/***************

        Footer Section css

            *****************/

.f-white {

    background-color: var(--clr-offwhite);

}



@media screen and (min-width:1025px) {

    footer {

        background: var(--clr-blue);

        background-repeat: no-repeat;

        background-size: cover;

        padding-top: 2rem;

        -webkit-clip-path: polygon(70% 0, 100% 44%, 100% 100%, 0% 100%, 0 16%);

        clip-path: polygon(70% 0, 100% 44%, 100% 100%, 0% 100%, 0 16%);

        border-top: 6px solid none

    }



    .f-white {

        background-color: var(--clr-white);

        -webkit-clip-path: polygon(59% 0, 100% 45%, 100% 100%, 0% 100%, 0 43%);

        clip-path: polygon(59% 0, 100% 45%, 100% 100%, 0% 100%, 0 43%);

        padding-top: 9rem;

    }



    .download-brochure {

        margin-block: 12rem max(5.20vw, 4em);

    }

}



footer {

    border-top: 6px solid var(--clr-blue);

    margin-top: max(15vw, 6rem);

}



.social-media-icon a:hover i {

    color: var(--clr-blue)

}



.download-brochure {

    max-width: 40em;

    margin-inline: auto;

    margin-block: 3rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: max(2vw, 1rem);

    text-align: center;

}



@media screen and (min-width:592px) {

    .download-brochure {

        flex-flow: row;

        text-align: left

    }

}



.download-brochure button {

    font-size: clamp(1.125em, 1.04vw, 1.25rem);

    padding: 1rem 2rem;

}



.download-brochure h5 {

    font-family: var(--font-family);

    font-weight: 400;

    font-size: clamp(1.125em, 1.04vw, 1.25rem);

    line-height: 180%;

    color: var(--clr-blue);

}



.f-nav-title {

    font-family: var(--font-family);

    font-weight: 700;

    ;

    font-size: clamp(1rem, 1vw, 1.125rem);

    line-height: 180%;

    text-transform: uppercase;

    margin-top: 2rem;

    color: var(--clr-blue);

    display: inline-block;

}



.f-menu-grid {

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

    padding-left: 1rem;

}



.f-menu {

    display: grid;

    gap: max(.50vw, .5em);

    margin-top: max(2vw, 1rem);

    margin-bottom: 0px;

    font-family: var(--font-family);

    font-weight: 400;

    color: var(--clr-light-blue);

}



.f-menu li a {

    color: var(--clr-light-blue);

    text-decoration: none;

    transition: .3s ease;

    font-family: var(--font-family);

    font-weight: 400;

}



.f-menu li a:hover {

    text-decoration: underline;

}



.social-media-icon {

    display: flex;

    gap: 1rem;

    align-items: center;

    margin-top: 1.5rem;

}



.social-media-icon a {

    font-size: 24px;

    color: var(--clr-yellow);

}



.copy-rights {

    border-top: 1px solid var(--clr-blue);

    padding-block: max(1vw, 1em);

    margin-top: max(2vw, 1.65rem);

    text-align: center;

    font-size: 14px;

    font-weight: 400;

}







/*********** Contact Page Css *************/

/* Contact Page | Contact Form */

.contact-form {

    max-width: max(48vw, 48rem);

    margin-inline: auto;

}



.form-group {

    margin-bottom: max(2vw, .85em);

}



.form-control,

.form-select {

    border-radius: 0px;

    border: 1px solid var(--clr-black);

    padding: 1rem;

    color: var(--Clr-black);

    font-size: clamp(.90em, 1vw, 1.125rem);

    font-family: var(--font-family);

    font-weight: 400;

}



.contact-form .form-group input[type="number"] {

    -moz-appearance: textfield;

}



.contact-form .form-group input[type="number"]::-webkit-inner-spin-button,

.contact-form .form-group input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

}



.contact-details {

    text-align: center;

    margin-inline: auto;

    margin-bottom: 2rem;

}



.contact-details a {

    color: var(--Clr-black);

    font-size: clamp(1em, 1vw, 1.25rem);

    text-decoration: none;

}



.contact-details a:hover {

    text-decoration: underline;

}



.contact-details figure {

    border-radius: 100%;

    background-color: var(--clr-blue);

    padding: 1rem;

    width: max(8vw, 7rem);

    display: flex;

    justify-content: center;

    height: max(8vw, 7rem);

    align-items: center;

    margin-inline: auto;

    margin-bottom: max(1.5vw, 1em);

}



.contact-details figure img {

    max-width: 80%;

}



.contact-details h4 {

    font-size: clamp(1.25em, 1.25vw, 1.5rem);

    color: var(--clr-black);

}



.contact-details p {

    font-size: clamp(1em, 1vw, 1.125rem);

    color: var(--clr-black);

    margin-top: max(.85vw, .65em);

}





/*************** International General Page Css ****************/



.nav-underline .nav-link.active {

    color: var(--clr-yellow) !important;

    ;

    border-bottom-color: var(--clr-yellow) !important;

}



.nav-underline .nav-link {

    font-size: clamp(1em, 1vw, 1.125rem);

    font-weight: 700;

    color: var(--clr-blue);

}



.subject-area-tab {

    background-color: var(--clr-offwhite);

}





/***************** Our Team Page Css ***********************/



.team-member .card {

    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.07);

    border: none;

    margin-bottom: 2rem;

}



.team-member .card .card-text {

    color: var(--clr-gray);

    line-height: 180%;

    font-size: 15px;

}



.team-member .card img {

    height: 100%;

    width: 100%;

}





/* Teacher Section  */

.teachers a:not(:hover) {

    text-decoration: none;

}



.teachers img {

    height: 370px;

    width: 100%;

    display: block;
    object-fit: cover;

}



.pick-first-section {

    max-width: 50em;

    margin-inline: auto;

}



.subject-box {

    display: block;

    margin-top: max(2vw, 1.5rem);

    transition: all .3s ease-in-out;

}



.subject-box img {
    width: 100%;
    height: 430px;
    object-fit: cover;
}

@media screen and (max-width:1200px) {
    .subject-box img {
        height: 330px;
    }
}
@media screen and (max-width:991px) {
    .subject-box img {
        height: 300px;
    }
}

@media screen and (max-width:767px) {
    .subject-box img {
        height: 200px;
    }
}



.subject-box:hover {

    box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.25);

}











/*----------------------- Time Line Css -----------------*/

/* -------------------------------- Main components -------------------------------- */

#cd-timeline {

    position: relative;

    padding: 2em 0;

    margin-block: 2em;

    color: var(--clr-white) !important

}



#cd-timeline::before {

    content: '';

    position: absolute;

    top: 0;

    left: 25px;

    height: 100%;

    width: 4px;

    background: var(--clr-yellow)

}



@media only screen and (min-width: 1170px) {

    #cd-timeline {

        margin-top: 3em;

        margin-bottom: 3em;

    }



    #cd-timeline::before {

        left: 50%;

        margin-left: -2px;

    }

}



.cd-timeline-block {

    position: relative;

    margin: 2em 0;

}



.cd-timeline-block:after,

.cd-timeline-content:after {

    content: "";

    display: table;

    clear: both;

}



.cd-timeline-block:first-child {

    margin-top: 0;

}



.cd-timeline-block:last-child {

    margin-bottom: 0;

}



@media only screen and (min-width: 1170px) {

    .cd-timeline-block {

        margin: 4em 0;

    }



    .cd-timeline-block:first-child {

        margin-top: 0;

    }



    .cd-timeline-block:last-child {

        margin-bottom: 0;

    }

}



.cd-timeline-img {

    position: absolute;

    top: 8px;

    left: 12px;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    box-shadow: 0 0 0 2px var(--clr-yellow),

        inset 0 2px 0 rgba(0, 0, 0, 0.08),

        0 3px 0 4px rgba(0, 0, 0, 0.05);

    border: 8px solid #fff

}



.cd-timeline-img {

    background: var(--clr-yellow)

}



@media only screen and (min-width: 1170px) {

    .cd-timeline-img {

        width: 30px;

        height: 30px;

        left: 50%;

        margin-left: -15px;

        margin-top: 15px;

        /* Force Hardware Acceleration in WebKit */

        -webkit-transform: translateZ(0);

        -webkit-backface-visibility: hidden;

    }

}



.cd-timeline-content {

    position: relative;

    margin-inline: 3.5em .5em;

    background: var(--clr-blue);

    border-radius: 2px;

    padding: 1em;

    color: var(--clr-white) !important;

}



.cd-timeline-content .timeline-content-info {

    padding: 5px 10px;

    color: var(--clr-white);

    font-size: 12px;

    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);

    border-radius: 2px;

}



.cd-timeline-content .timeline-content-info i {

    margin-right: 5px;

}



.cd-timeline-content .timeline-content-info .timeline-content-info-title,

.cd-timeline-content .timeline-content-info .timeline-content-info-date {

    width: calc(50% - 2px);

    display: inline-block;

}



@media (max-width: 500px) {



    .cd-timeline-content .timeline-content-info .timeline-content-info-title,

    .cd-timeline-content .timeline-content-info .timeline-content-info-date {

        display: block;

        width: 100%;

    }

}



.cd-timeline-content .content-skills {

    font-size: 14px;

    padding: 0;

    margin-bottom: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.cd-timeline-content .content-skills li {

    background: var(--clr-blue);

    border-radius: 2px;

    display: inline-block;

    padding: 2px 10px;

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

    margin: 3px 2px;

    text-align: center;

    flex-grow: 1;

}



.cd-timeline-content h2 {

    color: var(--clr-white);

    margin-top: 0;

    margin-bottom: 5px;

    line-height: 130%;

    font-size: 1.125rem;

}



.cd-timeline-content :is(ul, ol, h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, p) {

    color: var(--clr-white);

}



.cd-timeline-content p {

    color: var(--clr-white);

    font-size: 13px;

    line-height: 150%;

    margin: 1em 0;

    font-weight: 400;

}



.cd-timeline-content a {

    color: var(--clr-yellow);

}



.cd-timeline-content .cd-date {

    color: var(--clr-white);

    font-size: 14px;

    font-size: 0.8125rem;

}



.cd-timeline-content .cd-date {

    display: inline-block;

}



.cd-timeline-content::before {

    content: '';

    position: absolute;

    top: 16px;

    right: 100%;

    height: 0;

    width: 0;

    border: 7px solid transparent;

    border-right: 7px solid var(--clr-blue)

}



@media only screen and (min-width: 768px) {

    .cd-timeline-content h2 {

        font-size: 1.25rem;

    }



    .cd-timeline-content p {

        font-size: 1rem;

    }



    .cd-timeline-content .cd-read-more,

    .cd-timeline-content .cd-date {

        font-size: 0.875rem;

    }

}



@media only screen and (min-width: 1170px) {

    .cd-timeline-content {

        color: white;

        margin-left: 0;

        padding: 1.6em;

        width: 40%;

        margin: 0 5%;

    }



    .cd-timeline-content::before {

        top: 24px;

        left: 100%;

        border-color: transparent;

        border-left-color: var(--clr-blue)

    }



    .cd-timeline-content .cd-date {

        position: absolute;

        width: 100%;

        left: 115%;

        top: 0px;

        font-size: 1rem;

        color: var(--clr-blue);

    }



    .cd-timeline-block:nth-child(even) .cd-timeline-content {

        float: right;

    }



    .cd-timeline-block:nth-child(even) .cd-timeline-content::before {

        top: 24px;

        left: auto;

        right: 100%;

        border-color: transparent;

        border-right-color: #333c42;

    }



    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {

        float: right;

    }



    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {

        left: auto;

        right: 115%;

        text-align: right;

    }

}



.steps-list {

    background: var(--clr-offwhite);

    padding: 1.5rem;

}



.steps-list ul li {

    padding-block: 1rem;

}



.steps-list ul li:not(:last-child) {

    border-bottom: 1px solid #e3dfdf;

}



.steps-list ul li a {

    text-decoration: none;

}



.steps-list ul li a:hover {

    text-decoration: underline

}



.member-details {

    margin-top: max(15vw, 12rem);

}



.member-details .social-media-icon li a {

    font-size: 24px;

}





/********************************

Stellarnav Start

********************************/

.stellarnav ul{

    text-align: right;

}

.stellarnav li a{

    color: var(--clr-white);

    font-weight: 700;

    font-size: clamp(1rem, 1vw, 1.125rem);

    text-transform: uppercase;

}

.stellarnav>ul>li>a{

    padding: 0.25rem 1.4rem;

}

.stellarnav>ul>li>a:hover,
.stellarnav>ul>li>a.active{

    color: var(--clr-yellow);

}

.stellarnav.desktop li.has-sub a{

    padding-right: 1.4rem;

}

.stellarnav ul ul{

    background: var(--clr-yellow);

}

.stellarnav.desktop li.has-sub ul li a{

    color: var(--clr-blue);

}



.stellarnav.mobile ul{

    background:var(--clr-blue);

}



.stellarnav.mobile.top{

    top: 64px;

}

.stellarnav.mobile, .stellarnav.mobile.fixed{

    position: absolute;

    top: 0;

    text-align: right;

}

.stellarnav .menu-toggle span.bars span{

    background: var(--clr-white);

    width: 30px;

    height: 2px;

    margin: 0 0 7px;

}

.stellarnav .call-btn-mobile, .stellarnav .close-menu, .stellarnav .location-btn-mobile, .stellarnav .menu-toggle{

    margin-top: 30px;

    margin-right: 15px;

    margin-bottom: 30px;

}

.stellarnav .icon-close:after, .stellarnav .icon-close:before{

    border-color: var(--clr-white);

}

.stellarnav.mobile.left .close-menu, .stellarnav.mobile.right .close-menu{

    color: var(--clr-white);

}

.stellarnav .icon-close{

    margin-right: 5px;

}

.stellarnav a.dd-toggle .icon-plus:after, .stellarnav a.dd-toggle .icon-plus:before{

    border-color: var(--clr-white);

}

.stellarnav.mobile ul ul{

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

}
.img-rounded{
    border-radius:8px !important;
}
@media only screen and (max-width: 991px) {

    .navbar.fixed>.container-fluid {

        backdrop-filter:inherit;

        animation: none;

    }

    .navbar>.container-fluid{

        position: fixed !important;

    }

    .stellarnav .contact-btn{

        margin-left: 15px;

        margin-right: 15px;

        margin-bottom: 15px;

        border: 2px solid var(--clr-white) !important;

    }

    

}



/********************************

Stellarnav End

********************************/
/*button*/
.link a {font-size: clamp(1em, .90vw, 1.125rem);color: var(--clr-blue);font-weight: 700;line-height: 16px;letter-spacing: 0.2px;padding-inline: 0px 1em;position: relative;display: inline-flex;align-items: center;transition: all .3s ease;text-decoration: none;background: transparent;border: none;outline: none;}

.link a::before {
    content: '';
    position: absolute;
    right: 0;
    transition: all .3s ease;
    border-width: 2px 2px 0px 0px;
    border-style: solid;
    border-color: var(--clr-blue);
    display: block;
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
}

.link a::after {
    content: '';
    position: absolute;
    right: 0;
    transition: all .3s ease;
    width: 20px;
    height: 2px;
    background-color: var(--clr-blue);
    opacity: 0;
}
.link a:hover::after {
    opacity: 1;
    right: -11px;
}

.link a:hover::before {
    right: -10px;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1{
    color: var(--clr-blue);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: clamp(1.65em, 2.08vw, 2.5rem);
    line-height: 150%;
    letter-spacing: 0.2px;
}
.card-title{
    font-size: 20px;
}
.news-title h4 {
    color: var(--clr-blue);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: clamp(1.1em, 1.04vw, 1.25rem);
    line-height: 1.5;
    text-transform: capitalize;
    margin-top: 0.125em;
}
.hover-image{
    height: 270px;
    overflow: hidden;
    border-radius: 8px !important;
}
.hover-image img {
    height: 270px;
    object-fit: cover;
    transition: all .3s ease-in-out 0s;
    width: 100%;
}
.hover-image:hover img {
    transform: scale(1.1);
}
.navbar-brand{
    z-index: 9999;
}