@import "../../fonts/zain/stylesheet.css";

* {
    font-family: 'Zain', sans-serif;
    font-size: 18px;
}


html {
    scroll-padding-top: 100px; /* Adjust the value for your needs */
}


body{
    background-color:  #F1F2FF;
    background-position: center;
    background-repeat: repeat;
    overflow-x: hidden;
}



.iconMobileMneu{
    border: 0!important;
    outline: unset !important;
    box-shadow: unset !important;
}


/* nav-iconMobileMneu-2 */
.nav-iconMobileMneu-2{
    width: 35px;
    height: 30px;
    margin: 10px 10px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.nav-iconMobileMneu-2 span{
    background-color:#000;
    position: absolute;
    border-radius: 2px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-iconMobileMneu-2 span:nth-child(1){
    width: 100%;
    height:  3px;
    display: block;
    top: 0px;
    left: 0px;
}
.nav-iconMobileMneu-2 span:nth-child(2){
    width: 100%;
    height:  3px;
    display: block;
    top: 13px;
    left: 0px;
}
.nav-iconMobileMneu-2 span:nth-child(3){
    width: 100%;
    height:  3px;
    display: block;
    bottom: 0px;
    left: 0px;
}
.nav-iconMobileMneu-2:not(.open):hover span:nth-child(1){
    width: 100%;
    height:  3px;
    display: block;
    top: -2px;
    left: 0px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-iconMobileMneu-2:not(.open):hover span:nth-child(2){
    width: 100%;
    height:  3px;
    display: block;
    top: 13px;
    left: 0px;
    transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-iconMobileMneu-2:not(.open):hover span:nth-child(3){
    width: 100%;
    height:  3px;
    display: block;
    bottom: -2px;
    left: 0px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-iconMobileMneu-2.open span:nth-child(1){
    left:3px;
    top: 12px;
    width: 30px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
    transform: rotate(90deg);
    transition-delay: 150ms;
}
.nav-iconMobileMneu-2.open span:nth-child(2){
    left:2px;
    top: 20px;
    width: 20px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
    transform: rotate(45deg);
    transition-delay: 50ms;
}
.nav-iconMobileMneu-2.open span:nth-child(3){
    left:14px;
    top: 20px;
    width: 20px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
    transform: rotate(-45deg);
    transition-delay: 100ms;
}


.header {
    position: relative;
    z-index: 10;
}



.header .navbar {
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0;
}


.header.fixedMenu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    transition: 0.3s;
    background: #fff;
}


.navbar-brand img {
    height: 77px;
}

.search-box {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    cursor: pointer;

}

.lang-switch {

    color: gray;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}
.lang-switch span{
    height: 100%;
    font-size:16px;
}

.lang-switch.active {
    background-color: #2A75B8;
    color: white;

}

.breadcrumb {
    background-color: transparent;
     margin-bottom: 0;
}

.breadcrumb-item a {
    color: #2A75B8;
    text-decoration: none;
}
/*Mega Menu Styles */
.mega-menu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    top: 100%;
    visibility: hidden;
    transform: translateY(-10px);
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition:  0.5s;
    opacity: 0;
}



.nav-item.has-mega-menu:hover .mega-menu {
    max-height: 2000px;
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    transition:  1s;

}

span.sub_main_menu_list {
    display: block;
    margin-bottom: 18px;
    margin-top: 18px;
    font-weight: bold;
}

span.title_sub_main_menu_list {
    display: block;
    margin-bottom: 18px;
    font-weight: bold;
}

.cardFullMenu
{
    border-top: 2px solid #2A75B8;

}

.nav-item.has-mega-menu {
    position: static;
}
.nav-item.has-mega-menu a i {
    position: relative;
    top: 3px;
}
.mega-menu-list a {
    color: #b2b2b4;
    text-decoration: none;
    transition: color 0.3s, background-color 0.3s, padding-left 0.3s;
    border-radius: 4px;
    display: inline-block;
}

.mega-menu-list a:hover {
    color: #000000;
}


.menu_dropdown:hover .dropdown-menu {
    display: block;
}

/*@media (min-width:989px ) {*/
/*    .menu_dropdown:hover .dropdown-menu {*/
/*        display: block;*/
/*    }*/
/*}*/



.menu_dropdown .dropdown-menu {
    margin-top: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 3px 4px 0px #00000033;
}


.ul_dropdown {
    border-radius: 0;
    border: 0;
    width: max-content;
}
.ul_dropdown li a {
    padding: 8px 18px;
    color: #464646;
}

.menu_dropdown  .dropdown-toggle::after {

    border: 0;

}




.mega-menu-column h3 {
    color: #2A75B8;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-list li {
    margin-bottom: 22px;
    position: relative;
}




.department-list li {
    padding: 8px 15px;
}

/*vertical-line*/
.vertical-line {
    display: none;
    width: 2px;
    height: 100%;
    background-color: #ddd;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-50%);
}






.menu_dropdown .nav-link.dropdown-toggle i.fa-angle-down
{
    font-size:14px;
}



.dropdown-submenu-sub {
    position: relative;
}

.dropdown-submenu-sub > .dropdown-menu {
    top: 0;
    right:  150%;
    margin-left: 0;
    margin-right: 0;
    visibility: hidden;
    position: absolute;
    border-radius: 0;
    width: max-content;
    transition: 0.3s;
    opacity: 0;
    z-index: -1;
}

.dropdown-submenu-sub:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    right: 100%;
}

.dropdown-submenu-sub.subSubMenu::after {
    content: "\f104";
    font-family: FontAwesome;
    top: 12px;
    position: absolute;
    left: 4px;
    color: #606060;
    font-size: 14px;
}



@media (min-width: 991px) {

    .dropdown-submenu-sub > .dropdown-menu.changeDir {
        top: 0;
        left:  150%;
        margin-left: 0;
        margin-right: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0;
        width: max-content;
        transition: 0.3s;
        opacity: 0;
        z-index: -1;
        right: unset;
    }

    .dropdown-submenu-sub:hover > .dropdown-menu.changeDir {
        visibility: visible;
        opacity: 1;
        z-index: 1;
        left: 100%;
        right: unset;

    }
}




/*/////sub_menu */

#departments-section {
    overflow: hidden; /* Hide overflow to prevent items from showing off-screen */
}








.btnSearch2
{
    display: none;
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

.boxSearch .input-group-text {
    padding: 0;
    background: transparent;
    border-radius: 8px 0 0 8px;
}
.boxSearch .btnSearch {
    background: #0d1b3f !important;
    color: #ffffff;
    font-size: 21px;
    padding: 8px 45px;
    border-radius: 8px 0 0 8px;
}


.boxSearch {
    padding: 15px 0;

}
.search {
    background: #ffffff;
    height: 0;
    overflow: hidden;
    transition: 0.3s;
    box-shadow: inset 0px -4px 6px 0 #8383833b;
}


.bis
{
    background: #2A75B8;
    color: #fff;
    padding: 5px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
}

.bis img
{
    background: white;
    border-radius: 8px;
}


.itemMenu i
{
    font-size: 15px;
    display: inline-block;
    margin-right: 8px;
    transition: 0.3s;
}

.itemMenu.active
{
    color: #000;
}

.itemMenu.active i
{
    margin-right: 15px;

}


.subItemMenu i{
    opacity: 0;
    transition: 0.3s;
    display: inline-block;
    margin-right: 8px;
}
.subItemMenu:hover i{
    opacity:1;
    margin-right: 15px;
}


.sliderMenu
{

    position: relative;
    height: 100%;
    overflow: hidden;
    transition: height 0.3s ease-in-out;

}


.contentSubMenu {
    height: 100%;
    width: 100%;
    position: absolute;
    right: -1000px;
    transition: right 0.5s ease-in-out;
    margin-top: 29px;
    padding: 0 17px;
    border-right: 2px solid #e3e3e3;
}

.contentSubMenu.openSubMenu {
    right: 0;
}



.social_media {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 100;
    text-decoration: none;
}

.social_media a  {
    text-decoration: none;
    display: block;
     padding-left: 5px;
    width: 126px;
    position: relative;
    margin-bottom: 15px;
    left: -76px;
    transition:0.3s;
    border-radius: 0 25px 25px 0;
    border:1px solid transparent;
    border-right: 0;
}



.social_media a span {
    display: inline-block;
    top: -4px;
    position: relative;
    width: 70px;
    text-align: center;
    color: #000;
}

.social_media a i {
    font-family: FontAwesome;
    padding: 9px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    margin-left: 5px;
    background-color: rgb(25 24 24 / 20%);
    backdrop-filter: blur(12px);
    border: 1px solid;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}


.social_media a:hover  {
    background: #ffffff;
    left: 0;
    border:1px solid #b4b4b459;
}


.social_media a:hover   i {
    background: #0B4D87;
    border: 1px solid transparent;
}



/*responsive*/


.menuCollegeMobile{
    display: none;
}

.menuCollegePc{
    display: block;
}


@media (max-width: 1200px) {
    .setContainer
    {
        max-width: 100%;
    }
}


@media (max-width: 1111px) {
    .nav-link {
        font-size: 13px;
        padding: 30px 6px !important;
    }
}


@media (max-width: 1025px) {
    .nav-link {
        font-size: 13px;
        padding: 30px 3px !important;
    }
}


@media (max-width: 1062px) {
    .bis span{
        display: none;
    }
}

@media (max-width: 988px) {

    .social_media {
        display: none;
    }

    .nav-link {
        font-size: 16px;
        padding: 12px 6px !important;
    }

    .nav-link i{
        left: 0;
        position: absolute;
    }

    .menu_dropdown .dropdown-menu {
        width: 100%;
        border-radius: 5px;
        box-shadow: 0 0px 4px 0px #00000033;
    }
    .dropdown-submenu-sub:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        z-index: 1;
        right: 0;
        position: relative;
        margin: 7px 13px;
        width: inherit;
    }


    .menu_dropdown .dropdown-toggle::after {
        border: 0;
        transform: rotate(-90deg);
    }


    .menuCollegeMobile{
        display: block;
    }

    .menuCollegePc{
        display: none;
    }

    .bis span {
        display: inline-block;
    }

    div#navbarNav {
        border-top: 2px solid #dfdfdf;
        margin-top: 20px;
        padding-bottom: 15px;
        overflow: auto;
    }


    .setToolMenu
    {
        text-align: center;
        width: 100%;
        border-top: 2px solid #dfdfdf;
        padding-top: 15px;
    }

    .btnSearch2
    {
        display: inline-block;
    }

    .searchContainer{
        max-width: 100%;
    }


    .navbar-brand img {
        height: 70px;
    }

    .search-box
    {
        display: none;
    }


}



/*-----------------*/



















/*breadcrumb*/
nav.breadcrumbWebSite {
    margin-bottom: 30px;
}
nav.breadcrumbWebSite ol {
    margin: 0;
}
.breadcrumbWebSite a {
    text-decoration: none;
}
.breadcrumbWebSite .arrow_right a {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.breadcrumbWebSite .breadcrumb-item + .breadcrumb-item::before {
    content: "\f111" !important;
    font-family: "FontAwesome";
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: #6c757d;
    font-size: 5px;
    float: unset;
}

.breadcrumbWebSite .breadcrumb li:nth-child(2)::before {
    display: none;
}

/*------------------------*/




/*set inside page design*/


.content-page
{
    min-height: 500px;
    background: #fff;
    position: relative;
    padding: 22px;
    padding-bottom: 20px;
    border-radius:15px;
    z-index: 1;
    padding-top: 12px;
}

.page {
    min-height: 500px;
    margin-top: 42px;
    margin-bottom: 42px;
    position: relative;
}

.content-page:before {
    content: '';
    width: 100%;
    height: 42px;
    background: #e9ecef;
    position: absolute;
    right: 0;
    z-index: -1;
    top: 0;
    border-radius: 15px 15px 0 0;
}

.titlePage {

    display: flex;
    color: white;
    text-align: center;
    font-size: 62px;
    font-weight: bold;
}

.waveCollege {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-size: cover;
    background-color: #0b4a82fa;
    background-attachment: fixed;
    background-position: center;
 }

.waveCollege .overHeadPageCollege
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000b3;
}

.wave {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-size: contain;
    background-color: #000000f2;
    background-repeat: no-repeat;
    background-position: center;

 }

.wave .overHeadPage
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(89deg, #000000b5 60%, #433254 100%);
}


.diagonal {
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 150px;
    clip-path: polygon(100% 0, -108% 112%, 100% 100%);
    background-color: #ffffff;
    background-position: center;
    background-repeat: repeat;

}


.overDownDiag
{
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.downDiag
{
    background: #fff;
    height: 100%;
    position: absolute;
    width: 100%;
}

/*----------------------------------*/

/*-----------title page-----------------------*/


.titleCard {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.titleCard:before {
    content: '';
    width: 4px;
    height: 82px;
    background: #ffffff;
    position: absolute;
    top: -12px;
    right: 53px;
    transform: rotate(18deg);
}


.titleCard img
{
    width: 47px;
     padding-left: 8px;
    margin-left: 8px;
}

.titleCard span {
    color: #fff;
    display: contents !important;
    font-size: 20px;
}

/*----------------------------------*/



.fileAttachment {
    text-align: left;
    margin-top: 27px;
}
.fileAttachment a {
    background: #0d1b3f !important;
    color: #fff !important;
     border-radius: 2px;
}
.fileAttachment i
{
    margin-left: 5px;
    color: #fff;
    font-size: 23px;
}

.islink
{
    display: block;
    width: 100%;
    text-decoration: none;
}

.islink i
{
    display: inline-block;
    margin-right: 15px;
    color: #fff;
}


.cardApd {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 9px rgb(31 38 135 / 14%);
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 85px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}


.cardApd::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.cardApd:hover::before {
    transform: scaleX(1);
}

.cardApd:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(31, 38, 135, 0.5);
    background: rgba(255, 255, 255, 1);
}


.cardStaff {
    width: 100%;
    display: block;
    border: 1px solid #cacaca;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 4px 0 #b0b0b0;
}

.cardStaff .academic_titleStaff {
    color: #787878;
    font-weight: bold;
    margin-bottom: 20px;
}
.cardStaff .nameStaff {
    color: #000;
    height: 56px;
    padding: 0 4px;
    font-weight: bold;
    overflow: hidden;
}

.cardStaff .imageStaff {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    margin-bottom: 15px;
    background-position: top center;
}



/*---------index------------*/


.mainSlideWebSite.swiper {
    width: 100%;
    height: 100%;
}

.mainSlideWebSite .swiper-slide {
    text-align: center;
    font-size: 18px;
     display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #0d1b3f;
    height: 600px;
}

.mainSlideWebSite .swiper-slide .imageSlider {
    display: block;
    width: 100%;
    height: 800px;
    object-fit: cover;
}

.mainSlideWebSite .swiper-slide video {
    display: block;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: -107px;
}

.playVideo
{
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 1000000;
    border-radius: 50%;
    border: 2px solid #eaa600;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #f0a70c;
    font-size: 40px;
}



.mainSlideWebSite  .swiper-pagination span
{

    background: #a8a8a8;
    width: 100px;
    border-radius: 25px;
    opacity: 0.7;
    height: 6px;

}
.mainSlideWebSite  .swiper-pagination span.swiper-pagination-bullet-active
{
    background: #574feb;
    opacity: 1;

}







.textContactus {
    line-height: 45px;
    color: #656565;
}

.titleContactus {
    font-size: 32px;
    margin-bottom: 28px;
    font-weight: bold;
}

.iconContactus
{
    margin-bottom: 20px;
    display: inline-block;
    height: 40px;
}

.logoUn {
    width: 106px;
    border-right: 2px solid #b2b2b2;
    padding-right: 30px;
}

.nameStudent {
    font-weight: bold;
    margin-bottom: 7px;
}
.imgStudent {
    width: 65px;
    height: 65px;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}
.textStars {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 56px;
}

.stars {
    color: #F2AB53;
    margin-bottom: 35px;
}

.linkCardDiscover
{

    background: #34393C !important;
    border: 0;
    padding: 10px 12px;
    border-radius: 5px;
    color: #fff !important;
    margin-top: 45px;
}

.linkCardDiscover i
{
    width: 20px;
    height: 20px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
}


.linkCardEvents
{

    background: transparent !important;
    border: 0;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 30px;

}
.linkCardEvents:hover
{
    color: #0d1b3f;
}

.linkCardEvents i
{
    width: 18px;
    height: 18px;
    border: 1px solid;
    display: inline-flex ;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 14px;

}




.textSection.dir_text,
.titleSection.dir_text
{
    text-align: right;
    margin-top: 0;

}

.titleSection.dir_text
{
    font-size: 40px;
    font-weight: 700;
}

.linkCardMessage
{

    background: #fff !important;
    border: 0;
    padding: 10px 12px;
    border-radius: 5px;
}

.linkCardMessage i
{
    width: 20px;
    height: 20px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
}


.contentCardMessage {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 50px;
    margin-bottom: 32px;
}


.titleCardMessage {
    font-size: 48px;
    color: #fff;
    margin-bottom: 25px;
    font-weight: bold;
}

.our_message {
    background: #3ca2fd99;
    border-radius: 8px;
    padding: 24px;
    backdrop-filter: blur(7px);
}

.parallax-message
{
    background-size: cover;
    background-position: 0 -57px;
    background-attachment: fixed;
    padding: 65px 0;
}

.DiscoverUnImage
{
    height: 450px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
}
.titleDiscoverUn
{
    font-size: 40px;
    font-weight: bold;
    line-height: 48px;
    margin-bottom: 30px;

}

.textDiscoverUn
{
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;

}

.teacherAndUn {
    margin-top: 120px;
}
/*------------------slider----------------*/

.mySwiperColleges .swiper-button-lock {
    display: flex

}
.mySwiperColleges.swiper {
    width: 100%;
    height: 100%;
    padding: 30px 15px;
}

.mySwiperColleges .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiperColleges .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cardSlider
{
    text-decoration: none;
    color: #000;
    text-align: right;
    display: block;
    width: 100%;
    border-radius: 21px;
    overflow: hidden;
    background: #fff;
    transition: .3s;
    border: 1px solid #c7c7c7;
 }
    .cardSlider:hover
    {
      transform: scale(1.1);
     }



.imageCardSlider
{
    height: 370px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
     position: relative;
    color: #fff;
    overflow: hidden;
 }






.cardSliderNews
{
    text-decoration: none;
    color: #000;
    text-align: right;
    display: block;
    width: 100%;
    border-radius: 21px;
    overflow: hidden;
     transition: .3s;
 }



.imageCardSliderNews
{
    height: 236px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
     overflow: hidden;

}


/*.imageCardSlider:after {*/
/*    background: #fff;*/
/*    content: "";*/
/*    height: 426px;*/
/*    left: -155px;*/
/*    opacity: 0.2;*/
/*    position: absolute;*/
/*    top: -78px;*/
/*    transform: rotate(35deg);*/
/*    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);*/
/*    width: 50px;*/
/*}*/

/*.cardSlider:hover .imageCardSlider:after {*/
/*    left: 120%;*/
/*    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);*/
/*}*/


.dateCatgCardNews
{
    border-radius: 8px;
    margin-top: 10px;
    padding: 3px 21px;
    padding-right: 0;
    color: #8593A3;
    display: block;
}


.NameCardSliderNews {
    font-weight: bold;
    color: #242424;
    padding-top: 17px;
    min-height: 137px;
 }

.nameCatgCard
{
    display: inline-block;
    background: #F5FAFF;
    border-radius: 8px;
    margin-top: 10px;
    padding: 3px 23px;
    font-size: 15px;
    color: #242424;
}

.NameCardSlider {
    font-size: 20px;
    font-weight: bold;
    background: #666666;
    color: #fff;
    text-align: center;
    padding: 12px;
    min-height: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.controlSlider {
    margin-top: 38px;
}
.controlSlider .col-auto {
    position: relative;
}

.textCardSlider {
    text-align: right;
    margin-bottom: 5px;
    line-height: 34px;
    color: #333;
    font-size: 16px;
}


.mySwiperColleges .swiper-button-next {
    background: unset;
    width: 30px;
    height: 30px;
    left: auto;
    right: unset;
    border-radius: 50%;
    border: 1px solid #333;
    color: #333;
    top: 8px;
}


.mySwiperColleges .swiper-button-prev {
    background: unset;
    width: 30px;
    height: 30px;
    right: -19px;
    left: unset;
    border-radius: 50%;
    border: 1px solid #333;
    color: #333;
    top: 8px;

}
.mySwiperColleges .swiper-button-next:after, .mySwiperColleges .swiper-button-prev:after {

    display: none;
}


a.btn.btnMoreSlider {
    border: 1px solid #333;
    border-radius: 5px;
    padding: 3px 20px;
}

/*--------------end slider--------------------*/






.textSection {
    text-align: center;
    margin-bottom: 30px;
    line-height: 36px;
}



.butDiscover .btnDiscover {
    background: #2A75B8;
    border-radius: 0;
    color: #fff;
    padding: 7px 17px;
}
.butDiscover .btnContact {
    background: #F5FAFF;
    border-radius: 0;
    color: #2A75B8;
    padding: 7px 17px;
    border: 1px solid #a3a3a3;
    margin-left: 12px;
}

.butDiscover{

    text-align: left;
}

.discover {
    margin-bottom: 42px;
    color: #242424;
    font-size: 18px;
    line-height: 37px;
}

.text_welcome {
    font-size: 47px;
    font-weight: bold;
    line-height: 103px;
}
.statistics {
    width: 100%;
    background: #fff;
    margin-bottom: 60px;
    padding: 30px 0;
}


.welcome
{
    background: #F5FAFF;
    padding-top: 122px;
    padding-bottom: 43px;
}

.countStatistics
{
    background-color: rgb(223 223 223 / 58%);
    backdrop-filter: blur(12px);
    padding: 10px 0;
    border-radius: 10px;
}


.statistics_number
{

    text-align: center;

}
.statistics_text
{

    text-align: center;
    font-size: 24px;

}
.statistics_number span
{

    color: #275ECD;
    font-size: 73px;
    font-weight: bold;
    line-height: 2;
}






/*style card Quick Links*/
.cardQuickLinks .linkCard
{


    width: 58px;
    height: 58px;
    position: absolute;
    border-radius: 50%;
    background-color: #242424;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #fff;
    transform: rotate(-50deg);
    text-decoration: none;
    bottom: 0;
    left: 0;
    transition:  0.5s;
}

.cardQuickLinks .linkCard:hover
{

    background: linear-gradient(266.43deg, #2A75B8 15%, #B64CD7 100%);
    box-shadow: 0px 0px 18.6px 6px rgba(0, 104, 157, 0.15);

}


.subTitleSection{
    font-size: 32px;
    font-weight: 700;
    line-height: 57.6px;
    text-align: center;
    color: #242424;
    margin-top: 30px;
}



.contactGrid{

    margin-top: 65px;
}


.titleSection{
    font-size: 48px;
    font-weight: 700;
    line-height: 57.6px;
    text-align: center;
    color: #242424;
    margin-top: 30px;
    margin-bottom: 10px;
}

.textCardQL {
    font-size: 23px;
    margin-top: 20px;
}

.iconCardQL
{
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconCardQL img
{
    max-width: 50px;
}

.cardQuickLinks {

    border-radius: 25px;
    padding: 42px 15px;
    display: block;
    background: #fff;
    text-align: center;
    text-decoration: none;
    height: 100%;
    color: #353B41;
    transition: 0.3s;
}


.cardQuickLinks:hover {

    background:  #0d1b3f;
    color: #fff;

}




/*---------end index-----------*/
.loadingItem {
    text-align: center;
}

.btnMoreLoad {
    width: 100%;
    border-radius: 8px;
    background: #1f4075 !important;
    color: #fff !important;
    padding: 10px 5px;
    margin-top: 15px;
}
.sidebar-news {
    padding: 1rem;
    border-radius: 8px;
    padding-top: 9px;
}



/*----------college-------------*/



.aboutCollegeMobile
{
    display: none;
}

.aboutCollegePc
{
    display: block;
}


@media (max-width: 990px) {
    .aboutCollegePc
    {
        display: none;
    }
    .aboutCollegeMobile
    {
        display: block;
    }
}


.contentAccordionAbout
{
    line-height: 2.3;
}
.titleAccordionAbout {
    background: #0d1b3f !important;
    color: #fff !important;
    padding: 10px 10px;
}

.titleAccordionAbout:after {
    background-color: #ffffff;
    border-radius: 50%;
}




.cardApd i{
    margin-left: 19px;
    color: #0d1b3f;
    font-size: 23px;

}


.details_follow_graduates
{
    line-height: 2.3;
}


.textCollege {
    color: #d0d0d0;
    margin-top: 4px;
}


.imageAboutCollege
{
    width: 100%;
    border-radius: 8px;
    margin-top: 10px;
}


.tabCollege
{
    width: 200px;
    border-bottom: 2px solid #564eeb;
    padding: 20px 3px !important;
    font-size: 20px;
    position: relative;
    border-radius: 15px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.tabCollege:after
{
    content: '';
    width: 20px;
    height: 20px;
    background: #E6E8FB;
    position: absolute;
    top: 17px;
    left: -29px;
    transform: rotate(45deg);
    display: none;
    z-index: -1;
}

.tabCollege.active:after
{
    display: block;
}

.tabCollege:last-child
{
    border-bottom:  0;

}

.tabCollege.active
{
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}



.contentTabCollege
{
    line-height: 2.3;
    background: linear-gradient(0deg, #FFFFFF 40%, #E6E8FB 100%);
    position: relative;
    padding: 16px;
    font-size: 20px;
    border-radius: 15px;
    border: 1px solid #e8eafc;
    min-height: 500px;
}


.college_statistics {
    padding-top: 70px;
}
.card_statistics
{

    text-align: center;

}
.card_statistics img
{
    width: 50px;
    margin-bottom: 10px;
}
.card_statistics  .numberStatic {
    font-weight: bold;
    margin-bottom: 11px;
}

.detailsDean {
    line-height: 2.3;
}

.nameDean {
    margin-top: 11px;
    font-weight: bold;
    font-size: 26px;
    color: #727272;
    margin-bottom: 30px;
    text-align: center;


}


.dean {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

.imageDean img
{
  width: 100%;
    border-radius: 15px;

}

.imageDean {
    border: 1px solid #e7e7e7;
    padding: 7px;
    background: #fafafa;
    border-radius: 15px;
    box-shadow: 0 0 8px 0 #c2c2c2;
    margin-bottom: 20px;
}


.name_college {
    color: white;
    font-size: 40px;
    font-weight: bold;
 }


.logoCollege
{
    max-width:136px;
}




/*---------end college-------------------*/



/*about*/
.imagesAbout {
    height: 225px;
    width: 100%;
    background-size: cover;
    position: relative;
    z-index: 1;
    background-position: center;
}

.imagesAbout.over3Images {
    position: relative;
    right: 63px;
    top: -45px;
    margin-bottom: -98px;
    z-index: 5;
    border: 2px solid #f5f5f5;
    box-shadow: 0 0 12px 0px #00000063;
}

.contentAbout {
    font-size: 20px;
    line-height: 47px;
    text-align: justify;
}

.cardAbout {
    background: #fff;
 }

.titleSection {
    font-size: 48px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 0 16px;

}

.titleSection .tbut {
    position: relative;
    z-index: 2;
    font-size: 48px;

}

.titleSection .yellow_border {
    position: absolute;
    height: 10px;
    width: 100%;
    background: #C7D1FF;
    bottom: 10px;
    right: 0;
    z-index: 1;
}

/*-----------end about-----------------*/



/*----------news college-------------*/

 .cardNews_colleges {
     width: 100%;
     display: block;
     border: 1px solid #cacaca;
     border-radius: 5px;
     overflow: hidden;
     text-align: center;
     text-decoration: none;
     box-shadow: 0 0 4px 0 #b0b0b0;
 }

.cardNews_colleges .nameNews_colleges {
    color: #000;
    height: 56px;
    padding: 0 4px;
    font-weight: bold;
    overflow: hidden;
}

.cardNews_colleges .imageNews_colleges {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    margin-bottom: 15px;
}

.mySwiperNews_colleges.swiper {
    width: 100%;
    height: 100%;
    padding: 42px 10px;
    padding-top: 5px;
}

.mySwiperNews_colleges .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiperNews_colleges .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mySwiperNews_colleges .swiper-button-prev {
    right: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0d1b3f;
}

.mySwiperNews_colleges .swiper-button-prev:after {
    font-size: 17px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}


.mySwiperNews_colleges .swiper-button-next {
    left: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0d1b3f;
}

.mySwiperNews_colleges .swiper-button-next:after {
    font-size: 17px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

 /*----------news college-------------*/




.overVideoUniversity_life
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00000057;
    z-index: 1;
}
.university_life
{
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    z-index: 1000;
    font-size: 42px;
}


.university_life  div
{

    margin-top: 15px;
}

.videoCenterHomePage {
    position: relative;
    height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
}

.videoCenterHomePage video {
    width: 100%;
    display: block;
    position: absolute;
    top: -36%;
    z-index: 1;
}

.videoCenterHomePage img {
    z-index: 2;
}


a.btn.btnImages {
    background: #275ECD;
    color: #fff;
    padding: 15px 40px;
}

a.btn.btnVideos {
    background: #DEE4EB;
    color: #505862;
    padding: 15px 40px;
}

.videAndImage {
    color: #0B0D0E;
    font-size: 23px;
    text-align: center;
    margin-bottom: 12px;
}




/*-----------new----*/

.flag-icon {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    margin-left: 8px;
    object-fit: cover;
}

.language-selector {
    border-radius: 8px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    min-width: 150px;
}

.language-selector:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.language-text {
    font-size: 16px;
    font-weight: 500;
    color: #495057;
    margin: 0 10px;
    flex-grow: 1;
}

.dropdown-arrow {
    color: #6c757d;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.language-selector:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Alternative dropdown version */
.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border: 1px solid #dee2e6;
    padding: 8px 0;
}

.dropdown-item {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}



.custom-blue-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    min-width: 200px;
}

.custom-blue-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    color: white;
}

.custom-blue-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.custom-blue-btn:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    outline: none;
}

.topBar {
    padding: 5px 0;
}

.topBar .website{
    font-size: 24px;
}
.socialMediaHeader a
{
    text-decoration: none;
    display: inline-flex  ;
    width: 28px;
    height: 28px;
    background: #353B41;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #CBD5E1;
    transition: 0.3s;
    font-size: 18px;
    margin: 0 5px;
}


.controlSlider-next,
.controlSlider-prev {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
}

.swiper-button-prev.controlSlider-prev:after, .swiper-button-next.controlSlider-next:after {
    font-size: 18px;
    color: #fff;
}


a.detailsSlider {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    text-decoration: none;
}

.mainSlideLayer {
    position: relative;
}

.nameSlider {
    font-size: 40px;
    color: #fff;
    margin-bottom: 30px;
}

.overSliderCard {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.72) 35.1%, rgba(0, 0, 0, 0.00) 100%);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    text-align: right;
}



.university-section {
    border-radius: 20px;

    margin: 20px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
}

.description-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
    margin-bottom: 40px;
    text-align: center;
}

.university-images {
    position: relative;
    height: 432px;
    margin: 40px 0;
    border-radius: 15px;
}

.main-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0px -5px 20px 10px rgb(189 209 235);
    z-index: 3;
}

.side-image {
    position: absolute;
    top: 50%;
    width: 25%;
    height: 80%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%);
}

.side-image.left {
    left: 5%;
    z-index: 1;
}

.side-image.right {
    right: 5%;
    z-index: 1;
}

.stats-section {
    margin-top: 50px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #6366f1;
}
.stat-icon img {
    max-width: 50px;
}

.stat-label {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .university-section {
        padding: 30px 20px;
    }

    .section-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .university-section {
        padding: 20px 15px;
        margin: 10px;
    }

    .section-title {
        font-size: 2rem;
    }

    .description-text {
        font-size: 1rem;
    }

    .university-images {
        height: 250px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-icon {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .university-section {
        padding: 15px 10px;
        margin: 5px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .description-text {
        font-size: 0.95rem;
    }

    .university-images {
        height: 200px;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 1rem;
    }

    .stat-item {
        padding: 15px;
    }
}

.shadowSliderImageAbout {
    background-position: center;
    background-size: 96%;
    background-repeat: no-repeat;
    padding: 98px 0;
    margin-top: -90px;
}






/*image slider */

.swiper-container-gallery.swiper {
    width: 100%;
    padding: 20px 114px;
}

.swiper-container-gallery .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container-gallery .swiper-slide img {
    display: block;
    width: 800px;
    object-fit: cover;
    height: 500px;
    border-radius: 25px;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

}

.swiper-container-gallery   .swiper-slide.swiper-slide-active
{
 background-repeat: no-repeat;
background-size: 100% 100%;
}

/*-------------*/



.university_society {

    background-color: #F7F7FF;
    padding-top: 30px;
    margin: 30px 0;

}

.university_society    .header-section {
    text-align: center;
    margin-bottom: 5px;
}

.university_society  .header-section h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 30px;
}

.university_society    .header-section p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.university_society .services-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.university_society   .service-card {
    border-radius: 10px;
    padding: 50px 30px;
    text-align: center;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 250px;
    max-width: 280px;
    display: block;
    text-decoration: none;
}



.university_society   .service-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.university_society   .service-icon img{
    max-width: 40px;
}


.university_society .service-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color:  #505EDD;
}

.university_society  .service-card p {
    color: #666;
    line-height: 1.7;
    font-size: 0.95rem;
    text-align: revert;
}


@media (max-width: 768px) {
    .university_society     .services-row {
        flex-direction: column;
        align-items: center;
    }

    .university_society   .service-card {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .university_society  .header-section h1 {
        font-size: 2rem;
    }


}




.nameSectionCollege
{
    background: #1C2041;
    color: #fff;
    padding: 10px 31px;
    display: inline-block;
    margin-bottom: 28px;
    border-radius: 10px;
    font-size: 22px;
}

.card-colleges {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    display: block;
}

.card-colleges .nameCollege {

    color: #353B41;
    font-size: 24px;
}
.card-colleges .iconCollege{

    border-right: 1px solid #999797;
    padding: 10px 7px;
}
.card-colleges .iconCollege img{

    max-width: 50px;
}


.TabNews
{
    border: 0;
}
.TabNews.nav-tabs .nav-link {
    color: #98A6F9;
    font-size: 22px;
    border: 0;

}

.TabNews.nav-tabs .nav-link.active {
    color:  #2740CD;
    background: transparent;
    border-bottom: 3px solid #2740CD;
}



.gallerySwiper.swiper {
    width: 100%;
    padding: 79px 24px;
    padding-top: 25px;
}

.gallerySwiper .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}


.video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.video-thumbnail {
    position: relative;
    overflow: hidden;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.05);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.play-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button i {
    color: #333;
    font-size: 24px;
    margin-left: 3px;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.card-body {
    padding: 1.25rem;
}

.video-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    line-height: 1.3;
}

.video-description {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #6c757d;
}

.video-views {
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-date {
    font-weight: 500;
}

.container-custom {
    max-width: 1200px;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
}

.section-title h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.section-title p {
    color: #6c757d;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .video-thumbnail {
        height: 180px;
    }

    .play-button {
        width: 50px;
        height: 50px;
    }

    .play-button i {
        font-size: 20px;
    }
}





.said_about_us
{
    background: #FFFFFF;
    padding: 30px 0;
}

.team-card {
    background: #F9FAFB;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
}



.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    border: 4px solid #f8f9fa;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

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

.member-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.member-title {
    font-size: 0.9rem;
    color: #18795F;
    margin-bottom: 15px;
    font-weight: 400;
}

.member-description {
    font-size: 0.85rem;
    color: #34495e;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-link {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex ;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    color: #b3b3b3;
}



.container-custom {
    max-width: 1200px;
}

.section-title {
    text-align: center;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.section-title p {
    font-size: 1.1rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .team-card {
        margin-bottom: 20px;
        padding: 20px 15px;
    }

    .profile-img {
        width: 80px;
        height: 80px;
    }

    .member-name {
        font-size: 1.1rem;
    }

    .member-description {
        font-size: 0.8rem;
    }
}




.contentInfo
{
    border: 1px solid #98A6F9;
    font-size: 22px;
    text-align: center;
    padding: 8px 2px;
    border-radius: 10px;
}

.CardFormContactUS
{
    background: #fff;
    padding: 15px;
    border-radius: 15px;
}

.contactus_text {
    color: #a1a1a1;
    margin-bottom: 32px;
}

.contactusCard {
    padding: 48px 0;
    margin-bottom: 55px;
}

.formContactus::placeholder {
    color: #b6b6b6 !important;
    opacity: 1;
    font-size: 12px;
}

.map iframe
{
    width: 100%;
    height: 400px;
    border-radius: 10px;
}

button.btn.showMore {
    background: #355fd0;
    width: 100%;
    color: #fff;
}

.borderError
{
    border: 1px solid red;
}