:root {
    --gray: #8F95AB;
    --blue1: #5A6DB1;
    --blue2: #324BA7;
    --blue3: #009AD9;
    --font-size: 11px;
    --gray2: rgb(226, 226, 228)B;
}

@font-face {
    font-family: 'Sherlyn';
    src: url("../fonts/Sherlyn.otf") format("opentype");
}

@font-face {
    font-family: 'Urae Nium';
    src: url('../fonts/urae_nium.ttf');
}

.ici-text {
    font-family: 'Urae Nium';
}

.ici-some-text {
    font-family: 'Sherlyn';
}

.fs-100 {
    font-size: 100px;
}

.fs-50 {
    font-size: 50px;
}

.fs-40 {
    font-size: 40px;
}

.fs-30 {
    font-size: 30px;
}

.fs-25 {
    font-size: 25px;
}

.fs-20 {
    font-size: 20px;
}

.fs-19 {
    font-size: 19px;
}

.fs-18 {
    font-size: 18px;
}

.fs-17 {
    font-size: 17px;
}

.fs-16 {
    font-size: 16px;
}

.fs-15 {
    font-size: 15px;
}

.fs-14 {
    font-size: 14px;
}

.fs-13 {
    font-size: 13px;
}

.fs-12 {
    font-size: 12px;
}

.fs-11 {
    font-size: 11px !important;
}

.ht {
    height: 37px;
}

.ht-card-body-ne {
    min-height: 160px;
}

.ht-card-body-p {
    min-height: 120px;
    display: flex;
    align-items: center;
}

.h-450 {
    height: 450px;
}

.img-cont {
    width: 100%;
    height: 450px;
}
@media screen and (max-width:990px) {
    .img-cont {
        width: 100%;
        height: 100%;
    }
}
@media screen and (max-width:500px) {
    .img-cont {
        width: 100%;
        height: 100%;
    }
}

.imgcover {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.ht-card-img-ne {
    height: 262px;
}

.txt-card-news {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.txt-card-events {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ctr-text-line {

    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: #009AD9;
    text-align: center;
    height: 1.5em;



    &:before {
        content: '';

        background: linear-gradient(to right, transparent, #818078, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
    }

    &:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: #009AD9;


        line-height: 1.5em;

        color: #009AD9;
        background-color: white;

    }
}

.html {
    scroll-behavior: smooth
}

body {
    font-family: 'Montserrat', sans-serif;
}

.bg {
    background: rgb(9, 40, 146);
    background: linear-gradient(0deg, rgba(9, 40, 146, 1) 0%, rgba(177, 191, 236, 1) 31%, rgba(255, 255, 255, 1) 71%);

}

#t-color {
    color: var(--blue3) !important;
}

.beyond,
.navbar-brand,
.iccolor {
    color: #009AD9 !important;
}

.subtxt {
    color: var(--blue2);
}


.nav-link {
    color: white !important
}

.text-promotion {
    font-size: 50px;
    font-weight: bold;
}


.going {
    color: var(--gray);
}

.above {
    color: var(--blue1);
}

.and {
    color: var(--blue2);
}

.mar {
    margin-right: 150px;

}

@media screen and (max-width:500px) {
    .mar {
        margin-right: 0px;
    }
}

.mt-50 {
    margin-top: 50px;
}

@media screen and (max-width:500px) {
    .mt-50 {
        margin-top: 20px;
    }
}

.mt-100 {
    margin-top: 100px;
}

@media screen and (max-width:500px) {
    .mt-100 {
        margin-top: 20px;
    }
}

.mt-150 {
    margin-top: 150px;
}

@media screen and (max-width:500px) {
    .mt-150 {
        margin-top: 20px;
    }
}

.mt-200 {
    margin-top: 200px;
}

@media screen and (max-width:700px) {
    .mt-200 {
        margin-top: 30px;
    }
}



.mb-100 {
    margin-bottom: 100px;
}

@media screen and (max-width:500px) {
    .mb-100 {
        margin-bottom: 20px;
    }
}

.text-mv {
    font-size: 18px;
}

#vision,
#mission,
#footer {
    margin-top: 50px;
}

#vision .text-promotion,
#mission .text-promotion {
    margin-top: 12vh;
}


#mainvid {
    width: 100%;
    max-height: 650px;
    object-fit: cover;
    object-position: 90% center;
}


@media screen and (max-width: 1920px) and (min-width: 1920px) {
    #mainvid {
        width: 100%;
        max-height: 800px;
        object-fit: cover;
        object-position: 90% center;
    }
}

.mt-150 {
    margin-top: 50px;
}

@media screen and (max-width:900x) {
    .mt-50 {
        margin-top: 10px !important;
    }
}

.institution-link-header {
    color: #13245d;
    font-weight: bold;
}

.institution-level-label {
    color: #13245d;
    text-align: center;
}

/* .cards:hover {
    opacity: 0.5;
} */

a {
    /*     background: linear-gradient(0deg, WHITE, #5A6DB1) no-repeat right bottom / 0 var(--bg-h); */
    transition: background-size 350ms;
    --bg-h: 100%;
    cursor: pointer;
    text-decoration: none !important;

}

a:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;

}

.underline {
    padding-bottom: 2px;
    --bg-h: 2px;
    text-decoration: none !important;
}

.opac:hover {
    opacity: 0.5;
    --bg-h: 0px;
    text-decoration: none !important;
}

.card-hover:hover {
    /*  transform: scale(1.04);*/
    cursor: pointer;
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.16), 0 7px 15px 0 rgba(0, 0, 0, 0.12) !important;
    text-decoration: none !important;
    color: #515658 !important;
}

.eventDate:hover {
    cursor: pointer;
    background-color: #f3f6f8;
}

.none {
    padding-bottom: 2px;
    --bg-h: 0px;
    text-decoration: none !important;

}


a {
    text-decoration: none;
    color: inherit;
    line-height: 1;
}

.carousel-inner,
.cimg {
    width: 100%;
    max-height: 65vh;
    object-fit: cover
}

.img-en {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.bg-2 {
    background-color: #F6F7FD;
}

.bg-3 {
    /* background-color: var(--blue3); */
    background-color: #d4e9fa;

}

.bg-4 {
    background-color: rgb(232, 234, 243);
}

.bg-5 {
    background-color: #009AD9;
}

.bg-footer {
    background-color: #009AD9;
}



/* card flip */


.scene {
    display: inline-block;
    width: 200px;

    /*   border: 1px solid #CCC; */
    margin: 40px 0;
    perspective: 600px;
}

.cards {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
}

.cards.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.cards__face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}



.cards__face--back {
    background: whitesmoke;
    transform: rotateY(180deg);
    /*  height:auto; */

}

.text-limit {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */


    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

.switch {
    position: relative;
    display: inline-block;
    width: 47px;
    height: 24px;
}

.switch input {

    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: whitesmoke;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19x);
    transform: translateX(19px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.list-title {
    display: block;
}

@media screen and (max-width:600px) {
    .list-title {
        display: none;
    }

}


@media screen and (max-width:992px) {
    .card-columns {
        column-count: 1;
    }
}

.profile_pic {
    height: 150px;
    width: 130px;


}

.imgs {
    transition:transform 0.25s ease;
}

.imgs:hover {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}