@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');

@font-face {
    font-family: 'segoe_ui';
    src: url('segoeui.woff2') format('woff2'), url('segoeui.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'segoe_ui';
    src: url('segoeuib.woff2') format('woff2'), url('segoeuib.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'segoe_ui';
    src: url('segoeuil.woff2') format('woff2'), url('segoeuil.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'segoe_ui';
    src: url('seguibl.woff2') format('woff2'), url('seguibl.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'segoe_ui';
    src: url('seguisb.woff2') format('woff2'), url('seguisb.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
}

body {
    font-size: 15px;
    line-height: normal;
    color: #101011;
    font-family: 'segoe_ui';
    background: #fff;
}

a {
    outline: none;
    text-decoration: none;
    color: #0071BD;
    -webkit-transition: ease-in-out .3s;
    -moz-transition: ease-in-out .3s;
    -ms-transition: ease-in-out .3s;
    -o-transition: ease-in-out .3s;
    transition: ease-in-out .3s;
}

a:hover {
    text-decoration: none;
}

input,
textarea,
select {
    font-size: 14px;
    color: #101011;
    vertical-align: middle;
    font-family: 'segoe_ui';
    outline: none;
    resize: none;
}

input[type="button"],
input[type="submit"],
button {
    -webkit-transition: ease-in-out .3s;
    -moz-transition: ease-in-out .3s;
    -ms-transition: ease-in-out .3s;
    -o-transition: ease-in-out .3s;
    transition: ease-in-out .3s;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: 'segoe_ui';
}

select {
    appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand {
    display: none;
}

.transition {
    -webkit-transition: ease-in-out .5s;
    -moz-transition: ease-in-out .5s;
    -ms-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
}

img {
    border: none;
    vertical-align: top;
    max-width: 100%;
}

.flexBox {
    display: flex;
    flex-wrap: wrap;
}

.flexBox.nowrap {
    flex-wrap: nowrap;
}

.itemCenter {
    align-items: center;
}

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

.justifyContentBetween {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .justifyContentBetween {
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
    }
}

.justifyContentCenter {
    justify-content: center;
}

.justifyContentEnd {
    justify-content: flex-end;
}

.tac {
    text-align: center !important;
}

.tar {
    text-align: right !important;
}

.container {
    width: 100%;
    margin: auto;
    max-width: 1300px;
    padding: 0 15px;
}

.pr {
    position: relative;
}

.topBar {
    background: #f9f9f9;
    height: 44px;
}

.topMenu li {
    font-size: 13px;
    font-weight: 600;
    color: #1E1E1E;
}

.topMenu li a {
    display: flex;
    height: 44px;
    align-items: center;
    padding: 0 20px;
}

.topMenu li a:hover {
    color: #0072BB;
}

.topMenu li a.active {
    background: #efefef;
    color: #0072BB;
}

.language {
    font-size: 14px;
    font-weight: 600;
    background: #EBEBEB url(../images/select-arrow.png) no-repeat right 10px center;
    height: 30px;
    border: none;
    width: 130px;
    padding: 0 25px 0 10px;
}

.header {
    background-color: #0056B3;
    width: 100%;
    position: relative;
}

.header>.container {
    height: 110px;
    transition: ease-in-out .3s;
}

.header.active {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10001;
}

.header.active>.container {
    height: 90px;
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex !Important;
  flex-wrap: inherit;
  align-items: center !Important;
  justify-content: center !important;
}
a.showMobMenu {
    display: none;
}
.carousel-control-next {
    right: 0 !Important;
}
.carousel-control-prev {
     left: 0 !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-block;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after{
   display: none !Important;
}

    .menu>li {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 1px;
    }

    .menu>li>a {
        color: #fff;
        position: relative;
        padding: 34px 10px;
    }

    .menu>li.small {
        position: relative;
    }

    .menu>li>a:hover:before {
        content: '';
        width: calc(100% - 16px);
        height: 2px;
        background: #fff;
        position: absolute;
        left: 8px;
        bottom: 12px;
    }

    .menu>li>a.show {
        background: #fff;
        color: #0071BD !important;
        position: relative;
    }

    .menu>li>a.show:before {
        content: '';
        width: 100%;
        height: 15px;
        position: absolute;
        top: 0;
        left: 0;
        background: #0071BD;
    }

    .innerHeader .menu>li>a.show:before {
        background: #fff;
        display: none;
    }

    .menu>li.ddMenu>a {
        padding-right: 30px;
    }

    .menu>li.ddMenu>a:after {
        content: 'expand_more';
        font-family: 'Material Icons';
        font-size: 18px;
        position: absolute;
        right: 10px;
        top: 22px;
        color: #fff;
    }

    .menu>li.ddMenu>a.show:after {
        color: #0071BD !important;
    }

    #header .py-3 {
        padding: 0 !important;
    }

    .dropdown-menu.show {
        top: calc(100% - 10px);
    }

    .menu>li.small .submenuBox {
        background: #fff;
        width: 340px;
        top: 48px;
        left: 1px;
    }

    .submenuBox {
        background: #fff url(../images/menu-bg.png) no-repeat right top;
        background-size: auto 100%;
        position: absolute;
        left: 0;
        top: 84px;
        width: 100%;
        z-index: 1001;
        display: none;
        padding: 40px 0;
        box-shadow: 10px 15px 15px rgba(0, 0, 0, .4);
    }

    .header.active .submenuBox {
        top: 74px;
    }

    .submenuLink li {
        padding: 8px 0 8px 20px;
        font-weight: 600;
        font-size: 16px;
        position: relative;
    }

    .submenuLink li:before {
        content: 'play_arrow';
        font-family: 'Material Icons';
        font-size: 16px;
        position: absolute;
        left: 0;
        top: 11px;
        color: #0071BD;
    }

    .submenuLink li a {
        color: #000;
    }

    .submenuLink li a:hover {
        color: #0071BD;
    }

    /*.dropdown-menu  {background: #fff url(../images/menu-bg.png) no-repeat right top; background-size: auto 100%;}*/

    .submenuInner {
        margin: -15px;
    }

    @media (max-width: 768px) {
        .submenuInner {
            flex-direction: column;
            overflow-x: auto;
            max-width: 100%;
            gap: 8px;
        }

        .submenuHd {
            font-size: 10px !important;
        }
    }

    .submenuInner .column {
        width: 33.33%;
        padding: 50px 15px;
    }

    .submenuHd {
        font-size: 21px;
        color: #0071BD;
        text-decoration: underline;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .searchInner {
        width: 310px;
        height: 42px;
        border: 1px solid #fff;
        position: relative;
        padding-right: 40px;
    }

    a.showSearch {
        display: none;
    }

    .searchInner .input {
        width: 100%;
        height: 42px;
        border: none;
        background: none;
        padding: 0 12px;
        color: #fff;
    }

    .searchInner .input::placeholder {
        color: #fff;
        opacity: 1;
    }

    .searchInner .input::-ms-input-placeholder {
        color: #fff;
    }

    .searchInner .btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 100%;
        background: none;
        color: #fff;
    }

    .researchList li .inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .researchList li .btn {
        margin-top: auto;
        text-align: left;
        padding-left: 0;
        margin-left: 0;
        width: 110%;
    }

    .researchList li .btn a {
        display: inline-block;
        background: #0073e6;
        color: white;
        padding: 8px 16px;
        border-radius: 2px;
        text-decoration: none;
        font-weight: bold;

    }

    .researchList li .btn a:hover {
        background: #005bb5;
    }

    .aboutHadramout {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .aboutHadramout .img,
    .aboutHadramout .det {
        flex: 1 1 50%;
    }

    @media (max-width: 768px) {
        .aboutHadramout {
            flex-direction: column;
        }
    }



    .bannerSlider .item {
        background-size: cover !important;
    }

    .bannerSlider .item .container {
        height: 740px;
        display: flex;
        align-items: center;
    }

    .bannerInfo {
        color: #fff;
        max-width: 630px;
    }

    .bannerHd {
        font-size: 60px;
        font-weight: 800;
        line-height: 75px;
        padding-bottom: 20px;
    }

    .bannerText {
        font-size: 28px;
        font-weight: 600;
        line-height: 36px;
        padding-bottom: 30px;
    }

    .bannerSlider .slick-dots {
        position: absolute;
        left: 0;
        bottom: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .bannerSlider .slick-dots li {
        padding: 5px;
    }

    .bannerSlider .slick-dots li button {
        width: 30px;
        height: 4px;
        background: #fff;
        overflow: hidden;
    }

    .bannerSlider .slick-dots li button:hover,
    .bannerSlider .slick-dots li.slick-active button {
        background: #0071BD;
    }

    a.applyNow {
        min-height: 40px;
        background: #0071BD;
        border: 1px solid #fff;
        display: inline-flex;
        align-items: center;
        padding: 2px 20px 4px 20px;
        font-weight: 700;
        color: #fff;
        font-size: 17px;
    }

    a.applyNow span {
        font-size: 28px;
        margin-top: 4px;
        text-transform: none;
    }

    a.applyNow:hover {
        background: #259548;
    }

    .pt60 {
        padding-top: 60px;
    }

    .pb60 {
        padding-bottom: 60px;
    }

    .pb60 {
        padding-right: 20px;
    }

    .mb-20 {
        margin-bottom: 20px !important;
    }

    .mb-10 {
        margin-bottom: 10px !important;
    }

    a.videoTour {
        border: 1px solid #B6B6B6;
        background: #fff;
        display: flex;
        height: 62px;
        border-radius: 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
        position: absolute;
        right: 15px;
        top: -90px;
        font-size: 17px;
        font-weight: 700;
        align-items: center;
        padding-right: 20px;
    }

    a.videoTour .icon {
        width: 50px;
        height: 50px;
        background: #D9D9D9;
        min-width: 50px;
        margin: 6px 15px 6px 6px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    a.videoTour .icon span {
        font-size: 32px;
    }

    a.videoTour:hover {
        background: #f4f4f4;
    }

    .UniversityInfo .img {
        width: 432px;
        position: relative;
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .UniversityInfo .img .icon {
        position: absolute;
        width: 90px;
        height: 90px;
        background: #fff;
        border-radius: 100%;
        position: absolute;
        top: 30px;
        left: 50%;
        margin-left: -45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .UniversityInfo .hd {
        padding: 0 0 0 30px;
        font-size: 16px;
        font-weight: 600;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .UniversityInfo .hd span,
    .UniversityInfo .hd h1 {
        display: flex;
        font-size: 38px;
        line-height: 56px;
        font-weight: 800;
        padding-top: 0 !important;
        margin: 0;
    }

    .UniversityInfo .hd h1 strong {
        font-weight: inherit;
    }

    .UniversityInfo .detail {
        padding: 0 0 0 30px;
        font-size: 16px;
        line-height: 28px;
        font-weight: 600;
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .UniversityInfo {
        display: grid;
        grid-template-columns: 432px 1fr;
        grid-template-rows: auto auto;
        column-gap: 30px;
        row-gap: 15px;
        align-items: center;
        padding: 30px;
        background: #ffffff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
        position: relative;
        z-index: 1;
    }

    /* === Unified card: kill the 60px gap between UniversityInfo and the bottom Journals/Research row === */
    section:has(.boxInfo) {
        padding-top: 0 !important;
    }

    /* === Unified card: the bottom row becomes the lower half of the single card === */
    section:has(.boxInfo) .flexBox.justifyContentBetween,
    section:has(.boxInfo) .justifyContentBetween {
        background: #ffffff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .UniversityInfo .hd {
        font-size: 24px;
        font-weight: 700;
    }

    .UniversityInfo .detail {
        font-size: 16px;
        line-height: 1.5;
    }

    .UniversityInfo .detail .mb-20 {
        margin-bottom: 20px;
    }

    .UniversityInfo .detail a.readMore {
        color: #0071BD;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    @media (max-width: 768px) {
        .UniversityInfo {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            align-items: start;
        }

        .UniversityInfo .img {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            max-width: 100%;
            margin-bottom: 15px;
        }

        .UniversityInfo .hd {
            grid-column: 1;
            grid-row: 2;
            font-size: 20px;
            margin-bottom: 10px;
            padding: 0;
        }

        .UniversityInfo .detail {
            grid-column: 1;
            grid-row: 3;
            font-size: 14px;
            padding: 0;
        }
    }

    @media (max-width: 480px) {
        .UniversityInfo .hd {
            font-size: 18px;
        }

        .UniversityInfo .detail {
            font-size: 13px;
        }

        .UniversityInfo .detail .mb-20 {
            margin-bottom: 15px;
        }
    }

    a.readMore {
        min-height: 0;
        background-color: rgb(0 86 179);
        border: 1px solid rgb(0 86 179);
        display: inline-flex;
        align-items: center;
        padding: 6px 16px;
        font-weight: 700;
        color: #fff;
        font-size: 16px;
        line-height: 1.25;
        text-decoration: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    a.readMore span {
        font-size: 28px;
        margin-top: 2px;
        color: inherit;
    }

    a.readMore.ust-home-news-view-all-btn > span.ust-home-news-view-all-arrow,
    a.readMore.ust-home-news-view-all-btn > span.ust-home-news-view-all-icon,
    a.readMore.blog-view-all-btn > span.blog-view-all-arrow,
    a.readMore.blog-view-all-btn > span.blog-view-all-icon {
        font-size: 0.875rem !important;
        margin-top: 0 !important;
        display: inline-flex !important;
        align-items: center;
        line-height: 1 !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    a.readMore .material-icons {
        color: inherit;
    }

    a.readMore:hover {
        background-color: rgb(29 78 216);
        color: #fff;
        border-color: rgb(29 78 216);
    }

    .mainHd {
        font-size: 35px;
        font-weight: 800;
        padding-bottom: 10px;
        text-transform: capitalize;
    }

    @media (max-width: 768px) {
        .mainHd {
            font-size: 16px;
        }
    }

    .hdText {
        font-size: 20px;
        line-height: 30px;
        margin-left: auto;
        margin-right: auto;
        max-width: 850px;
    }

    .sliderArrow {
        padding: 0 60px;
    }

    .sliderArrow .slick-list {
        display: flex;
        margin: 0 -10px;
    }

    .sliderArrow .slick-track {
        display: flex;
    }

    .sliderArrow .slick-arrow {
        width: 48px;
        height: 48px;
        background: #E7E7E7;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        margin-top: -24px;
        overflow: hidden;
        z-index: 100;
        border: none;
        cursor: pointer;
        font-size: 1px;
        color: #E7E7E7;
    }

    .sliderArrow .slick-arrow:hover {
        background: #0071BD;
        color: #0071BD;
    }

    .sliderArrow .slick-arrow:before {
        font-family: 'Material Icons';
        font-size: 26px;
        position: absolute;
        left: 0;
        top: 0;
        color: #333;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding-left: 4px;
    }

    .sliderArrow .slick-arrow:hover:before {
        color: #fff;
    }

    .sliderArrow .slick-arrow.slick-prev {
        left: 0px;
    }

    .sliderArrow .slick-arrow.slick-prev:before {
        content: 'arrow_back_ios';
    }

    .sliderArrow .slick-arrow.slick-next {
        right: 0px;
    }

    .sliderArrow .slick-arrow.slick-next:before {
        content: 'arrow_forward_ios';
    }

    .statsList {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* HR lines span the FULL viewport width — placed on the parent section, not the .statsList ul */
    section:has(.statsList) {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .statsList li {
        width: 20%;
        border-right: 1px dashed #000;
        text-align: center;
        padding: 5px 10px;
        font-size: 18px;
        font-weight: 600;
    }

    .statsList li:last-child {
        border: none;
    }

    .statsList li span {
        display: block;
        font-size: 55px;
        font-weight: 700;
        padding-top: 20px;
    }

    .boxInfo {
        width: 50%;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 30px;
    }

    /* Vertical HR divider between the two bottom cards inside the unified card */
    .boxInfo + .boxInfo {
        border-left: 1px solid rgba(0, 0, 0, 0.05);
    }

    .textBox {
        font-size: 12px;
        line-height: 28px;
        font-weight: 600;
    }

    .checkList li {
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        padding: 7px 0;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        list-style: none;
    }

    .checkList li .checkIcon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        --tw-bg-opacity: 1;
    }

    .checkList li .checkIcon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .checkList li .checkIcon .fa,
    .checkList li .checkIcon .fa-circle-check,
    .checkList li .checkIcon .fa-check-circle,
    .checkList li .checkIcon .ust-journal-fa-icon {
        font-size: 18px;
        line-height: 1;
        color: rgb(0 86 179 / var(--tw-bg-opacity, 1));
        fill: rgb(0 86 179 / var(--tw-bg-opacity, 1));
    }

    .checkList.ust-journals-list li {
        font-size: 0.9375rem;
        font-weight: 600;
        padding: 6px 0;
    }

    .checkList.ust-journals-list .ust-journal-label {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Builder: double-click the <i class="fa ..."> in editor to change icon */
    body.editor_enable .checkList.ust-journals-list .ust-journal-fa-icon,
    #wrapwrap.editor_enable .checkList.ust-journals-list .ust-journal-fa-icon {
        cursor: pointer;
        outline: 1px dashed rgba(0, 86, 179, 0.35);
        outline-offset: 2px;
    }

    /* Builder h3 journals before JS converts to .checkList */
    .boxInfo h3.ust-journal-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.9375rem;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .boxInfo h3.ust-journal-item .ust-journal-check-icon,
    .boxInfo h3.ust-journal-item .checkIcon {
        flex-shrink: 0;
        margin-top: 2px;
        --tw-bg-opacity: 1;
        color: rgb(0 86 179 / var(--tw-bg-opacity, 1));
    }

    .campusBox {
        width: calc(50% - 3px);
    }

    .campusBox .inner {
        position: relative;
        z-index: 10;
        color: #fff;
        max-width: 750px;
    }

    .campusBox.large {
        height: 790px;
        background-size: cover !important;
        position: relative;
        padding: 50px;
    }

    .campusBox.large:before {
        content: '';
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.71) 100%);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .campusHd {
        font-size: 40px;
        font-weight: 800;
        text-transform: capitalize;
    }

    .campusText {
        font-size: 21px;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 30px;
    }

    .campusBox .inner a.readMore {
        background: none;
        border: 1px solid #fff;
        color: #fff;
    }

    .campusBox .inner a.readMore:hover {
        background: #fff;
        color: #000;
    }

    .smallBox {
        height: 392px;
    }

    .smallBox .det {
        width: 50%;
        height: 100%;
        padding: 50px;
    }

    .smallBox .img {
        width: 50%;
        height: 100%;
        background-size: cover !important;
    }

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

    .smallBox.full {
        background-size: cover !important;
        position: relative;
        padding: 50px;
    }

    .smallBox.full:before {
        content: '';
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.71) 100%);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .serviceSlider {
        padding-top: 20px;
    }

    .serviceSlider .item {
        padding: 10px;
        text-align: center;
    }

    .serviceSlider .item .icon img {
        margin: auto;
    }

    .serviceSlider .item .name {
        padding: 15px 0 0 0;
        font-size: 18px;
    }

    .imgBox {
        position: relative;
        width: calc(50% - 3px);
        color: #fff;
    }

    .imgBox .img img {
        width: 100%;
    }

    .imgBox .over {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 20px 50px;
    }

    .imgBox .over a.readMore {
        background: none;
        border: 1px solid #fff;
        color: #fff;
    }

    .imgBox .over a.readMore:hover {
        background: #fff;
        color: #000;
    }

    .imgBox.apply .over {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.79) 1%, rgba(229, 229, 229, 0.06) 100%);
    }

    .imgBox.enroll .over {
        background: linear-gradient(to right, rgba(229, 229, 229, 0.06) 0%, rgba(0, 0, 0, 0.79) 99%, rgba(0, 0, 0, 0.8) 100%);
    }

    .newsBoxLeft {
        width: 44%;
    }

    .newsBoxLeft .img img {
        width: 100%;
    }

    .newsBoxLeft .det {
        border: 1px solid #CFCFCF;
        background: #fff;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, .1);
        width: 90%;
        margin: -200px auto 0 auto;
        position: relative;
        padding: 40px;
    }

    .newsBoxLeft .det .name {
        font-size: 25px;
        font-weight: 700;
    }

    .newsBoxLeft .det .by {
        color: #616161;
        font-size: 16px;
        display: flex;
        align-items: center;
    }

    .newsBoxLeft .det .by .date {
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
    }

    .newsBoxLeft .det .by .date span {
        font-size: 16px;
        color: #0072BB;
        margin-right: 5px;
    }

    .newsBoxLeft .det .text {
        font-size: 16px;
        line-height: 25px;
        font-weight: 600;
        padding-bottom: 50px;
    }

    .hdText {font-size: 20px; line-height: 30px; margin-left: auto; margin-right: auto; max-width: 850px;}
    .sliderArrow {padding: 0 60px;}
    .sliderArrow .slick-list {display:flex; margin:0 -10px;}
    .sliderArrow .slick-track {display:flex;}
    .sliderArrow .slick-arrow {width:48px; height:48px; background:#E7E7E7; border-radius:100%; position:absolute; top:50%; margin-top:-24px; overflow:hidden; z-index:100; border:none; cursor:pointer; font-size: 1px; color: #E7E7E7;}
    .sliderArrow .slick-arrow:hover {background: #0071BD; color: #0071BD;}
    .sliderArrow .slick-arrow:before {font-family: 'Material Icons'; font-size: 26px; position: absolute; left: 0; top: 0; color: #333; z-index: 10; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding-left: 4px;}
    .sliderArrow .slick-arrow:hover:before {color: #fff;}
    .sliderArrow .slick-arrow.slick-prev {left:0px;}
    .sliderArrow .slick-arrow.slick-prev:before {content: 'arrow_back_ios'; }
    .sliderArrow .slick-arrow.slick-next {right:0px;}
    .sliderArrow .slick-arrow.slick-next:before {content: 'arrow_forward_ios';}

    .statsList li {width: 20%; border-right: 1px dashed #000; text-align: center; padding: 5px 10px; font-size: 18px; font-weight: 600; display: flex; flex-direction: column; align-items: center;}
    .statsList li:last-child {border: none;}
    .statsList li img {margin-bottom: 10px; order: -1;}
    .statsList li span {display: block; font-size: 55px; font-weight: 700; padding: 0; margin-bottom: 5px; order: 0;}
    .statsList li text {order: 1;}
    .boxInfo {width: 45%;}
    .textBox {font-size: 12px; line-height: 28px; font-weight: 600;}
    .checkList li {font-size: 16px; font-weight: 700; line-height: normal; padding: 7px 0; display: flex; align-items: flex-start; gap: 10px; list-style: none;}
    a.readMoreLink {
        display: inline-flex;
        align-items: center;
        font-weight: 700;
        color: #0071BD;
        font-size: 16px;
        line-height: normal;
    }

    a.readMoreLink span {
        font-size: 28px;
        margin-top: 4px;
        margin: 4px 0 0 2px;
        transition: ease-in-out .4s;
    }


    html[lang^="ar"] .readMoreLink {
        display: inline-flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    html[lang^="ar"] .readMoreLink .material-icons {
        transform: scaleX(-1);
    }

    a.readMoreLink:hover {
        color: #0056b3;
    }

    a.readMoreLink:hover span {
        margin-left: 10px;
    }

    .newsBoxRight {
        width: 56%;
        padding: 0 0 0 40px;
    }

    .newsList {
        margin: -15px;
    }

    .newsList li {
        padding: 15px;
        width: 50%;
    }

    .newsList li .inner {
        border: 1px solid #CFCFCF;
        background: #fff;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, .1);
        height: 100%;
    }

    .newsList li .inner .img img {
        width: 100%;
    }

    .newsList li .inner .det {
        padding: 15px;
    }

    .newsList li .inner .det .name {
        font-size: 16px;
        font-weight: 700;
    }

    .strategicPlan .img {
        width: 605px;
    }

    .strategicPlan .det {
        width: calc(100% - 405px);
        border: 1px solid #CFCFCF;
        background: #fff;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, .1);
        padding: 50px;
        margin-left: -200px;
    }

    @media (max-width: 1024px) {

        .strategicPlan .img,
        .strategicPlan .det {
            flex: 1 1 100%;
            max-width: 100%;
            margin-left: 0;
            margin-top: 0;
            padding: 20px 15px;
        }

        .strategicPlan .det {
            padding: 1.5rem 1.25rem;
            box-shadow: none;
            border: none;
            width: 100%;
        }
    }

    .blogList li {
        padding: 10px;
    }

    .blogList li .inner {
        border: 1px solid #CFCFCF;
        background: #fff;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, .1);
        height: 100%;
    }

    .blogList li .inner .img {
        position: relative;
    }

    .blogList li .inner .img img {
        width: 100%;
    }

    .blogList li .inner .img .tag {
        background: #FB7902;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        padding: 5px 12px 9px 12px;
        position: absolute;
        right: 10px;
        bottom: 10px;
    }

    .blogList li .inner .det {
        padding: 15px;
    }

    .blogList li .inner .det .name {
        font-size: 20px;
        font-weight: 700;
    }

    .blogList li .inner .det .date {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
    }

    .blogList li .inner .det .date span {
        font-size: 16px;
        color: #0072BB;
        margin-right: 5px;
    }

    .blogList li .inner .det .date.user {
        margin-right: 15px;
    }

    .sliderArrow.p-0 {
        padding: 0;
    }

    .whtClr {
        color: #fff;
    }

    .alumniBox .left {
        width: 340px;
    }

    .alumniLinks {
        margin: -5px;
    }

    .alumniLinks li {
        padding: 5px;
    }

    .alumniLinks li a {
        display: flex;
        align-items: center;
        border: 1px solid #fff;
        height: 40px;
        padding: 0 25px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
    }

    .alumniLinks li a:hover {
        background: #0071BD;
    }

    .alumniBox .right {
        width: calc(100% - 340px);
        padding-left: 30px;
    }

    .alumniSlider .item {
        padding: 10px;
    }

    .alumniSlider .item .img {
        width: 140px;
        height: 140px;
        padding: 8px;
        border: 1px dashed #ccc;
        border-radius: 100%;
    }

    .alumniSlider .item .img img {
        border-radius: 100%;
        border: 1px solid #fff;
    }

    .alumniSlider .item .det {
        width: calc(100% - 140px);
        padding-left: 25px;
        color: #fff;
    }

    .alumniSlider .item .det .name {
        font-size: 22px;
        font-weight: 700;
        line-height: 28px;
        padding-bottom: 10px;
    }

    .alumniSlider .item .det .info {
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }

    .partnerSlider li {
        padding: 10px;
    }

    .partnerSlider li .partnerLogo {
        border: 1px solid #ddd;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background: #fff;
    }

    .footer {
        background: linear-gradient(to bottom, rgba(52, 58, 113, 1) 1%, rgba(0, 113, 189, 1) 100%);
    }

    .footerInner {
        margin: 0 -15px;
    }

    .footerLogo {
        padding: 35px 15px;
        width: 30%;
    }

    .footerContact {
        width: 40%;
        padding: 35px 15px;
    }

    .footerLinks {
        width: 30%;
        padding: 35px 15px;
    }

    .footerHd {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        position: relative;
        padding-bottom: 5px;
        margin-bottom: 20px;
    }

    .footerHd:after {
        content: '';
        width: 60px;
        height: 3px;
        background: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .contactInfo {
        margin: -10px;
    }

    .contactInfo li {
        width: 33.33%;
        max-width: 450px;
        padding: 10px;
        font-size: 16px;
        line-height: 25px;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: center;
    }

    .contactInfo li img {
        min-width: 27px;
        margin-right: 5px;
    }

    .contactInfo li a {
        color: #fff;
    }

    .contactInfo li.full {
        width: 100%;
        font-weight: 700;
    }

    .footerLink {
        margin: -10px;
    }

    .footerLink li {
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 600;
        padding: 10px;
    }

    .footerLink li a {
        color: #fff;
        display: inline-block;
        padding-left: 14px;
        position: relative;
    }

    .footerLink li a:before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 100%;
        position: absolute;
        left: 0;
        top: 10px;
        background: #fff;
    }

    .socialLink {
        margin: -5px;
        padding: 20px 0 0 0;
    }

    .socialLink li {
        padding: 5px;
    }

    .socialLink li a {
        display: flex;
        width: 48px;
        height: 48px;
        border: 3px solid #59A5D9;
        border-radius: 100%;
        align-items: center;
        justify-content: center;
    }

    .socialLink li a:hover {
        background: #59A5D9;
    }

    .copyright {
        font-size: 15px;
        color: #fff;
        padding: 0 0 25px 0;
        text-align: center;
        width: 100%;
    }

    .overlay {
        background: rgba(0, 0, 0, .8);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 12000;
    }

    .popupInner {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        height: 100vh;
        overflow: auto;
    }

    .videoPopup {
        background: #F7F7F7;
        max-width: 1000px;
        width: 100%;
        padding: 20px;
        margin: auto;
    }

    .popupHd {
        font-size: 21px;
        font-weight: 600;
    }

    .close {
        font-size: 19px;
        font-weight: 600;
        cursor: pointer;
    }

    .videoBox {
        margin-top: 20px;
        width: 100%;
    }

    .videoInner {
        position: relative;
        padding-bottom: 67.25%;
    }

    .videoInner .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .innerHeader.header {
        background: #fff;
        box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    }

    .innerHeader.header .menu>li>a {
        color: #000 !important;
    }

    .innerHeader.header .menu>li>a:hover:before {
        background: #000;
    }

    .innerHeader.header .menu>li>a.active {
        background: #fff;
        color: #0071BD;
    }

    .innerHeader.header .menu>li.ddMenu>a:after {
        color: #000;
    }

    .innerHeader.header .searchInner {
        border: 1px solid #999;
    }

    .innerHeader.header .searchInner .input {
        color: #000;
    }

    .innerHeader.header .searchInner .input::placeholder {
        color: #000;
    }

    .innerHeader.header .searchInner .input::-ms-input-placeholder {
        color: #000;
    }

    .innerHeader.header .searchInner .btn {
        color: #000;
    }

    .bgCover {
        background-size: cover !important;
        position: relative;
    }

    .bgCover .container {
        position: relative;
        z-index: 2;
    }

    .innerBanner:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.64) 36%, rgba(255, 255, 255, 0) 100%);
    }

    .innerBanner .container {
        min-height: 520px;
    }

    .innerBannerText {
        color: #fff;
        font-size: 22px;
        font-weight: 600;
        line-height: 34px;
        max-width: 680px;
        padding: 20px 0;
    }

    .innerBannerText span {
        display: block;
        font-size: 60px;
        line-height: 75px;
        font-weight: 900;
        padding-bottom: 10px;
        text-transform: capitalize;
    }

    #aboutTabCon {
        position: static;
        top: 90px;
        z-index: 10;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    }

    .aboutTab li {
        font-size: 16px;
        font-weight: 600;
        width: 16.66%;
    }

    @media (max-width: 1024px) {
        .aboutTab li {
            width: 33.33%;
            font-size: 16px;
            font-weight: 600;
        }
    }

    @media (max-width: 768px) {
        .aboutTab li {
            width: 50%;
            font-size: 16px;
            font-weight: 600;
        }
    }

    @media (max-width: 480px) {
        .aboutTab li {
            width: 100%;
            font-size: 16px;
            font-weight: 600;
        }
    }

    .aboutTab li a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        height: 65px;
    }

    .aboutTab li a:hover,
    .aboutTab li a.active {
        background: #F3F2F2;
    }

    .objectivesCon:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(52, 58, 113, .9);
    }

    .textBox.hd {
        max-width: 1160px;
        margin: auto;
    }

    .objectivesList {
        margin: -15px;
        padding-top: 30px;
        display: flex;
        flex-wrap: wrap;
        width: 1560px;
    }

    @media (max-width: 768px) {
        .objectivesList {
            flex-direction: column;
            width: 950px;
        }

        .objectivesList li {
            width: 950px;
        }
    }

    @media (min-width: 769px) and (max-width: 1520px) {
        .objectivesList {
            width: 100%;
        }

        .objectivesList li {
            width: 50%;
            box-sizing: border-box;
        }
    }

    .objectivesList li {
        width: 33.33%;
        padding: 15px;
    }

    .objectivesList li .inner {
        border: 1px solid rgba(255, 255, 255, .8);
        padding: 30px;
        height: 100%;
    }

    .objectivesList li .inner .icon {
        width: 92px;
        height: 92px;
        background: #fff;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .objectivesList li .inner .det {
        width: calc(100% - 40%);
        font-size: 14px;
        line-height: 24px;
    }

    .programList {
        margin: -15px;
    }

    .programList li {
        width: 50%;
        padding: 15px;
    }

    .programList li .inner {
        background: #f7f7f7;
        height: 100%;
    }

    .programList li .inner .img img {
        width: 100%;
    }

    .programList li .inner .det {
        padding: 30px;
    }

    .objectivesCon:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .7);
    }

    .ourValuesList {
        margin: -15px;
        padding-top: 30px;
    }

    .ourValuesList li {
        width: 25%;
        padding: 15px;
    }

    .ourValuesList li .inner {
        background: #fff;
        padding: 30px;
        height: 100%;
    }

    .ourValuesList li .inner .icon {
        margin-bottom: 15px;
        height: 54px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .ourValuesList li .inner .hd {
        display: block;
        font-size: 20px;
        font-weight: 600;
    }

    @media (max-width: 1024px) {
        .ourValuesList li {
            width: 50%;
        }
    }

    @media (max-width: 600px) {
        .ourValuesList li {
            width: 100%;
            padding: 10px 15px;
        }

        .ourValuesList li .inner {
            padding: 20px;
        }

        .ourValuesList li .inner .hd {
            font-size: 18px;
        }
    }

    .OurStrategy {
        min-height: 580px;
        display: flex;
        align-items: center;
    }

    .OurStrategy:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(30, 30, 30, .65);
    }

    .OurStrategy .textBox {
        max-width: 1000px;
        margin: auto;
    }

    .qualityImg {
        padding-right: 40px;
    }

    .qualityImg img {
        border-radius: 400px 400px 0 0;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        padding: 5px;
    }

    .innerBanner.contact:before {
        background: rgba(70, 70, 70, .4);
    }

    .contactDet {
        width: 50%;
        padding: 40px 60px 40px 0;
        flex: 1;
    }

    .contactDet .innerBannerText {
        max-width: 100%;
    }

    .contactDet .info {
        margin: -10px;
        padding: 20px 0 0 0;
    }

    .contactDet .info li {
        width: 33.33%;
        padding: 10px;
    }

    .contactDet .info li .inner {
        background: #fff;
        padding: 20px;
        height: 100%;
        font-size: 16px;
        color: #3D3D3D;
        width: 175px;
    }

    .contactDet .info li .inner .hd {
        display: flex;
        align-items: center;
        font-weight: 700;
        text-transform: uppercase;
        padding: 5px 0;
        min-height: 60px;
    }

    .contactForm {
        background: #3A4476;
        width: 50%;
        margin: 40px 0 -120px 0;
        padding: 40px;
        flex: 1;
    }

    .form {
        margin: -10px;
        padding-top: 15px;
    }

    .form li {
        width: 50%;
        padding: 10px;
    }

    .form li.full {
        width: 100%;
    }

    .form li .textBox {
        display: block;
        padding-bottom: 5px;
    }

    .contactInput {
        width: 100%;
        height: 50px;
        border: none;
        padding: 0 15px;
        font-size: 16px;
        background: #fff;
    }

    .contactSelect {
        width: 100%;
        height: 50px;
        border: none;
        padding: 0 35px 0 15px;
        font-size: 16px;
        background: #fff url(../images/select.png) no-repeat right 10px center;
    }

    textarea.contactInput {
        height: 140px;
        padding: 15px;
    }

    .contactBtn {
        background: #0071BD;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        border-radius: 30px;
        height: 44px;
        min-width: 180px;
        padding: 0 20px;
        text-align: center;
    }

    .contactBtn:hover {
        background: #000;
    }

    .programCenterCon {
        padding-top: 120px;
    }

    .programCenter .leftBox {
        width: 32%;
        background: #0071BD;
        padding: 40px;
    }

    .programCenter .leftBox span {
        font-size: 29px;
        font-weight: 700;
        display: block;
        padding-bottom: 10px;
    }

    .programCenter .leftBox p {
        font-size: 18px;
        padding-bottom: 25px;
    }

    .programCenter .leftBox ul li {
        font-size: 20px;
        font-weight: 600;
        padding: 7px 0;
    }

    .programCenter .leftBox ul li a {
        color: #fff;
        display: flex;
        align-items: center;
    }

    .programCenter .leftBox ul li a img {
        margin-right: 10px;
        width: 20px;
    }

    .programCenter .rightBox {
        width: 68%;
        padding-left: 30px;
    }

    .programCenter .rightBox ul {
        margin: -10px;
    }

    .programCenter .rightBox ul li {
        padding: 10px;
        width: 33.33%;
    }

    .programCenter .rightBox ul li .inner {
        border: 1px solid #CFCFCF;
        height: 100%;
        padding: 20px;
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        width: 225px
    }

    .programCenter .rightBox ul li .inner span {
        font-size: 20px;
        line-height: 25px;
        font-weight: 700;
        display: block;
        padding-bottom: 10px;
        text-transform: capitalize;
    }

    .programCenter .rightBox ul li .inner p {
        font-size: 15px;
        padding-bottom: 20px;
    }

    .programCenter .rightBox ul li .inner a {
        color: #0071BD;
        font-size: 16px;
        font-weight: 700;
    }

    .programCenter .rightBox ul li .inner a:hover {
        color: #000;
    }



    @media (max-width: 1136px) {
        .contactForm {
            flex: 1 1 100%;
            width: 100%;
            margin: 20px 0 0 0;
            padding: 20px;
            order: 2;
        }

        .contactWrapper {
            display: flex;
            flex-direction: column;
        }

        .flexBox.examCenter li {
            flex: 1 1 45%;
        }

        .programCenter .leftBox ul li a,
        .programCenter .leftBox p,
        .programCenter .leftBox span {
            flex-direction: column;
            align-items: center;
            font-size: clamp(12px, 3vw, 14px);
        }

        .programCenter .leftBox {
            width: 200px;
            background: #0071BD;
            padding: 40px;
        }


    }

    @media (max-width: 500px) {
        .flexBox {
            flex-direction: column;
        }

        ul.flexBox.form li,
        ul.flexBox.info li {
            flex: 1 1 100%;
        }

        .contactDet .innerBannerText {
            max-width: 100%;
            font-size: clamp(16px, 2vw, 28px);
        }

        .flexBox.examCenter li {
            flex: 1 100%;
        }

        .examCenter li .inner .img {
            width: 220px
        }

        .examCenter li .inner .det {
            width: 220px
        }

        .programCenter .leftBox {
            width: 200px;
            background: #0071BD;
            padding: 40px;
        }

        .branchList li .inner {
            border: 1px solid #CFCFCF;
            background: #fff;
            height: 100%;
            padding: 30px;
            box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
            width: 215px;
        }


    }

    @media (max-width: 800px) {
        .flexBox .valuseList {
            flex-direction: column;
        }
    }

    .branchBox {
        padding: 40px;
        background: #F7F7F7;
    }

    .branchList {
        margin: -15px;
        padding-top: 25px;
    }

    .branchList li {
        width: 50%;
        padding: 15px;
    }

    .branchList li .inner {
        border: 1px solid #CFCFCF;
        background: #fff;
        height: 100%;
        padding: 30px;
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
    }

    .branchList li .hdText {
        padding-bottom: 15px;
    }

    .branchList li p {
        padding-top: 10px;
        font-size: 17px;
        font-weight: 600;
    }

    .branchList li p a {
        color: #0071BD;
    }

    .branchList li p a:hover {
        color: #000;
    }

    .examCenter {
        margin: -15px;
        padding-top: 10px;
    }

    .examCenter li {
        width: 25%;
        padding: 15px;
    }

    .examCenter li .inner {
        height: 100%;
    }

    .examCenter li .inner .img img {
        width: 100%;
    }

    .examCenter li .inner .det {
        padding: 20px;
        border: 1px solid #CFCFCF;
        border-top: none;
        background: #fff;
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        font-weight: 700;
    }

    .examCenter li .inner .det span {
        display: block;
        font-size: 20px;
        padding-bottom: 10px;
    }

    .examCenter li .inner .det p {
        font-size: 17px;
        padding-top: 5px;
    }

    .academiicProgramms {
        margin: -15px;
        padding-top: 10px;
    }

    .academiicProgramms li {
        width: 25%;
        padding: 15px;
    }

    .academiicProgramms li:first-child {
        width: 50%;
    }

    .academiicProgramms li .img {
        background-size: cover !important;
        border-radius: 40px;
        height: 100%;
        position: relative;
        display: block;
        max-height: 340px;
        overflow: hidden;
        transition: ease-in-out .4s;
    }

    .academiicProgramms li .img img {
        width: 100%;
        border-radius: 40px;
        opacity: 0;
    }

    .academiicProgramms li .img:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.02) 57%, rgba(0, 0, 0, 1) 100%);
    }

    .academiicProgramms li span {
        position: absolute;
        left: 35px;
        bottom: 35px;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
    }

    .academiicProgramms li .img:hover {
        opacity: .9;
    }

    .uposBox {
        background: #0071BD;
        font-size: 47px;
        font-weight: 700;
        padding: 20px 40px;
        color: #fff;
        position: relative;
        margin: -60px 0 40px 0;
    }

    .openingStatement .img {
        width: 465px;
    }

    .openingStatement .det {
        width: calc(100% - 465px);
        border: 1px solid #CFCFCF;
        background: #fff;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, .1);
        padding: 50px;
    }

    .presidentName {
        padding-top: 30px;
        font-size: 28px;
    }

    .presidentName span {
        display: block;
        font-weight: 700;
        padding-bottom: 10px;
    }

    .ffList {
        margin: -15px;
        justify-content: center;
        padding-top: 15px;
    }

    .ffList li {
        padding: 15px;
        width: 25%;
    }

    .ffList li .inner {
        background: linear-gradient(to right, rgba(0, 113, 189, 1) 0%, rgba(58, 68, 118, 1) 100%);
        border-radius: 20px;
        padding: 30px;
        height: 100%;
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
        text-transform: capitalize;
        display: block;
    }

    .ffList li .inner .icon {
        height: 100px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .partnerInfo .text {
        width: 60%;
        font-size: 27px;
        line-height: 45px;
        font-weight: 700;
        padding-right: 50px;
    }

    .partnerInfo .list {
        width: 40%;
    }

    .partnerInfo .list li {
        font-size: 16px;
        padding: 5px 0 5px 20px;
        position: relative;
    }

    .partnerInfo .list li:before {
        content: '';
        position: absolute;
        left: 0;
        top: 13px;
        width: 6px;
        height: 6px;
        background: #0071BD;
    }

    html[lang^="ar"] .partnerInfo .list li {
        right: 35px;
    }

    html[lang^="ar"] .partnerInfo .list li:before {
        left: auto;
        right: -25px;
    }


    .partners {
        margin: -15px;
        padding-top: 30px;
    }

    .partners li {
        width: 20%;
        padding: 15px;
    }

    .partners li .icon {
        height: 100%;
        border: 1px solid #CFCFCF;
        background: #fff;
        padding: 20px;
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mainHd.normal {
        font-weight: normal;
        max-width: 820px;
        margin: auto;
    }

    .ffStatsList {
        justify-content: space-between;
        padding: 20px 0 0 0;
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }

    .ffStatsList li {
        padding: 15px;
        font-size: 24px;
    }

    .ffStatsList li span {
        display: block;
        font-size: 75px;
        color: #343A71;
    }

    .admission .innerBannerText {
        max-width: 1000px;
    }

    .admission .applyNow span {
        line-height: normal;
        padding: 0;
    }

    .introductionBox .info {
        width: 56%;
        padding-right: 40px;
    }

    .introductionBox .img {
        width: 44%;
    }

    .admissionReq:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .55);
    }

    .reqBox {
        margin: -15px;
        padding-top: 10px;
    }

    .reqBox>li {
        width: 33.33%;
        padding: 15px;
    }

    .transparentBox {
        border-width: 1px;
        border-style: solid;
        border-image: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) 1;
        height: 100%;
        padding: 30px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(41, 77, 101, 0.23) 50%, rgba(255, 255, 255, 0.34) 100%);
        backdrop-filter: blur(10px);
    }

    .smallHd {
        font-size: 25px;
        font-weight: 700;
        padding-bottom: 10px;
        text-transform: capitalize;
    }

    .countList {
        padding: 5px 0 0 15px;
    }

    .countList>li {
        font-size: 16px;
        padding: 10px 0;
        list-style: decimal;
    }

    .enrollBanner {
        display: flex;
        align-items: center;
        height: 240px;
        padding: 20px 80px;
        justify-content: space-between;
        background-size: cover !important;
    }

    .enrollBanner .applyNow {
        min-width: 180px;
        justify-content: center;
    }

    .enrollBanner .mainHd {
        padding: 0 100px 0 0;
    }

    .browseList {
        padding-top: 10px;
    }

    .browseList li {
        border-bottom: 1px solid #AAAAAA;
        font-size: 28px;
        font-weight: 600;
        text-transform: uppercase;
        position: relative;
    }

    .browseList li a {
        display: block;
        color: #000;
        padding: 35px 80px 35px 30px;
        position: relative;
    }

    .browseList li a:before {
        content: 'east';
        text-transform: none;
        font-family: 'Material Icons';
        font-size: 24px;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -12px;
        font-weight: 400;
    }

    .browseList li a:hover {
        background: #0071BD;
        color: #fff;
    }

    .caHd {
        font-size: 20px;
        line-height: 35px;
        font-weight: 700;
        font-style: italic;
    }

    .listCon {
        margin: -15px;
        padding-top: 25px;
    }

    .listCon .bulletList {
        padding: 15px;
        width: 33.33%;
    }

    .bulletList li {
        font-size: 16px;
        padding: 5px 0 5px 20px;
        position: relative;
    }

    .bulletList li:before {
        content: '';
        position: absolute;
        left: 0;
        top: 13px;
        width: 6px;
        height: 6px;
        background: #0071BD;
    }

    .bulletList.whtDot li:before {
        background: #fff;
    }

    .membershipSlider .item {
        padding: 10px;
        height: 100%;
    }

    .membershipSlider .item .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        padding: 20px;
        display: block;
    }

    .membershipSlider .item .img {
        height: 110px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .membershipSlider .item .img img {
        width: auto;
    }

    .membershipSlider .item .det {
        font-size: 22px;
        font-weight: 700;
    }

    .rewardsTab {
        justify-content: center;
        margin: -10px;
        padding-top: 10px;
    }

    .rewardsTab li {
        padding: 10px;
    }

    .rewardsTab li a {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        border-radius: 4px;
        font-size: 18px;
        font-weight: 700;
        height: 50px;
        padding: 0 30px;
        color: #000;
        display: flex;
        align-items: center;
    }

    .rewardsTab li a:hover,
    .rewardsTab li.active a {
        background: #0071BD;
        border-color: #0071BD;
        color: #fff;
    }

    .rewardsList {
        margin: -15px;
        padding: 25px 0 0 0;
    }

    .rewardsList li {
        width: 25%;
        padding: 15px;
    }

    .rewardsList li .inner {
        height: 100%;
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        background: #fff;
        border: 1px solid #CFCFCF;
        padding: 20px;
    }

    .rewardsList li .inner .img {
        width: 110px;
    }

    .rewardsList li .inner .img img {
        border-radius: 6px;
    }

    .rewardsList li .inner .name {
        width: calc(100% - 110px);
        padding-left: 20px;
        font-size: 18px;
        font-weight: 600;
    }

    .ipSlider .item {
        padding: 10px;
        height: 100%;
        margin-top: 10px;
    }

    .ipSlider .item .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        padding: 10px;
    }

    .ipSlider .item .img {
        height: 140px;
        display: flex;
        align-items: center;
    }

    .ipSlider .item .img img {
        width: auto;
        margin: auto;
    }

    .middleLeft {
        width: 35%;
    }

    .leftTab {
        position: sticky;
        top: 100px;
        z-index: 10;
    }

    .leftTab li {
        font-size: 24px;
        font-weight: 600;
        margin: 25px 0;
    }

    .leftTab li a {
        display: block;
        color: #000;
        padding: 0 0 0 20px;
        border-left: 4px solid transparent;
    }

    .leftTab li a:hover,
    .leftTab li a.active {
        color: #0071BD;
        border-left: 4px solid #0071BD;
    }

    html[lang^="ar"] .leftTab li a {
        border-left: none !important;
        border-right: 4px solid transparent !important;
        padding-right: 20px;
        padding-left: 0;
        margin-right: 5px;
    }

    html[lang^="ar"] .leftTab li a:hover,
    html[lang^="ar"] .leftTab li a.active {
        border-left: none !important;
        border-right: 4px solid #0071BD !important;
        padding-right: 20px !important;
        padding-left: 0 !important;
    }

    .middleRight {
        width: calc(100% - 35%);
        padding-left: 30px;
    }

    .faqList {
        margin: -10px;
        padding-top: 10px;
    }

    .faqList li {
        padding: 10px;
        width: 50%;
    }

    .faqList li .faqBox {
        background: #F7F7F7;
    }

    .faqList li .q {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 60px;
        cursor: pointer;
        padding: 5px 40px 5px 20px;
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
    }

    .faqList li .q:before {
        content: '';
        width: 16px;
        height: 2px;
        background: #333;
        position: absolute;
        right: 15px;
        top: 26px;
    }

    .faqList li .q:after {
        content: '';
        width: 2px;
        height: 16px;
        background: #333;
        position: absolute;
        right: 22px;
        top: 19px;
    }

    .faqList li.active .q:after {
        display: none;
    }

    .faqList li .ans {
        display: none;
        position: relative;
        cursor: pointer;
        padding: 0 20px 20px 20px;
        font-size: 16px;
        line-height: 26px;
    }

    .communicationsList {
        margin: -15px;
        padding-top: 10px;
    }

    .communicationsList li {
        padding: 15px;
        width: 33.33%;
    }

    .communicationsList li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        padding: 25px;
        display: block;
        font-size: 24px;
        line-height: 36px;
        font-weight: 700;
        width: 220px;
    }

    .communicationsList li .inner .icon {
        height: 70px;
        display: block;
    }

    .communicationsList li .inner .hd {
        display: block;
        text-transform: uppercase;
        padding-top: 10px;
    }

    @media (max-width: 1150px) {
        #Communication .communicationsList {
            flex-direction: column;
            align-items: center;
        }



        #Communication .communicationsList li .inner {
            flex-direction: column;
            text-align: center;
            width: 220px;
        }


    }


    .laboratoriesList {
        margin: -15px;
        padding-top: 10px;
    }

    .laboratoriesList li {
        width: 33.33%;
        padding: 15px;
    }

    .laboratoriesList li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        padding: 10px;
        display: block;
    }

    .laboratoriesList li .inner .img {
        overflow: hidden;
    }

    .laboratoriesList li .inner .img img {
        width: 100%;
        transition: ease-in-out .4s;
    }

    .laboratoriesList li .inner:hover .img img {
        transform: scale(1.1);
    }

    .laboratoriesList li .inner .name {
        font-size: 16px;
        font-weight: 700;
        padding: 15px 10px;
        color: #000;
    }

    .impectFactor {
        padding: 40px 0 0 0;
        font-size: 16px;
    }

    .impectFactor .hd {
        font-size: 18px;
        font-weight: 700;
        line-height: normal;
        display: block;
        padding-bottom: 20px;
    }

    .impectFactor .list {
        padding-top: 10px;
    }

    .impectFactor .list li {
        font-size: 16px;
        padding: 5px 0 5px 15px;
        position: relative;
    }

    .impectFactor .list li:before {
        content: '';
        position: absolute;
        left: 0;
        top: 14px;
        width: 4px;
        height: 4px;
        background: #333;
        border-radius: 100%;
    }

    .peerReviewedList {
        margin: -15px;
        padding-top: 10px;
    }

    .peerReviewedList li {
        width: 33.33%;
        padding: 15px;
    }

    .peerReviewedList li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        display: block;
    }

    .peerReviewedList li .inner .img img {
        width: 100%;
    }

    .peerReviewedList li .inner .det {
        padding: 20px;
    }

    .researchBot {
        margin: -5px;
    }

    .researchBot li {
        width: 50%;
        padding: 5px;
    }

    .researchBot li .inner {
        position: relative;
        background-size: cover !important;
        height: 100%;
        padding: 40px;
    }

    .researchBot li .inner::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .7);
    }

    .researchBot li .inner>div {
        position: relative;
        z-index: 10;
    }

    .listText {
        padding-top: 10px;
    }

    .listText li {
        padding: 8px 0 8px 15px;
        position: relative;
        line-height: 26px;
    }

    .listText li:before {
        content: '';
        position: absolute;
        left: 0;
        top: 20px;
        width: 4px;
        height: 4px;
        background: #333;
        border-radius: 100%;
    }

    .innerBanner.examSchedule:before {
        background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.64) 36%, rgba(0, 0, 0, 0.6) 100%);
    }

    .innerBanner.examSchedule .container {
        min-height: 340px;
    }

    .innerBanner.examSchedule .innerBannerText {
        max-width: 100%;
    }

    .innerBanner.examSchedule .innerBannerText span {
        font-size: 45px;
        line-height: 60px;
    }

    .collageList {
        margin: -15px;
        padding-top: 10px;
    }

    .collageList li {
        width: 25%;
        padding: 15px;
    }

    .collageList li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        display: block;
    }

    .collageList li .inner .img img {
        width: 100%;
        height: auto;
        display: block;
    }

    .collageList li .inner .det {
        padding: 20px;
    }

    .collageList li .inner .det .name {
        font-size: clamp(0.8rem, 2vw, 1.2rem);
        font-weight: 700;
        min-height: 55px;
        margin-bottom: 10px;
    }

    .collageList.column3 {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .collageList.column3 li {
        width: calc(33.333% - 20px);
        list-style: none;
    }

    @media (max-width: 768px) {
        .collageList.column3 li {
            width: 100%;
        }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .collageList.column3 li {
            width: calc(50% - 20px);
        }
    }

    .faqBox {
        border: 1px solid #ccc;
        padding: 2px;
        width: 455px;
        border-radius: 8px;
        background: #f9f9f9;
        position: relative;
        box-sizing: border-box;
    }

    @media (max-width: 768px) {
        .faqBox {
            width: 200px;
        }
    }


    a.download:hover {
        color: #000;
    }

    .enrollBanner.small .mainHd {
        font-size: 32px;
    }

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

    .introBox .left {
        width: 48%;
    }

    .introBox .right {
        width: 52%;
        padding-left: 30px;
    }

    .introBox .right .faqList {
        padding-top: 0;
    }

    .introBox .right .faqList li {
        width: 100%;
    }

    .alumniLink {
        padding: 20px;
        font-size: 16px;
        font-weight: 500;
    }

    .alumniLink span {
        display: block;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        padding-bottom: 10px;
    }

    .alumniLink a {
        color: #000;
        text-decoration: underline;
    }

    .alumniLink a:hover {
        color: #0071BD;
        text-decoration: none;
    }

    .innerBanner.campus:before {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.21) 100%);
    }

    .innerBanner.campus .innerBannerText {
        max-width: 1200px;
    }

    .campusSlider .slick-dots {
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }

    .campusSlider .slick-dots li {
        width: 36px;
        height: 36px;
        margin: 0 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
    }

    .campusSlider .slick-dots li button {
        width: 8px;
        height: 8px;
        overflow: hidden;
        background: #0071BD;
        border-radius: 100%;
        font-size: 0px;
        color: #0071BD;
    }

    .campusSlider .slick-dots li.slick-active {
        border: 1px solid #0071BD;
    }

    .hdText.full {
        max-width: 100%;
    }

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

    .campusServices {
        margin: -15px;
        padding-top: 10px;
    }

    .campusServices>li {
        width: 50%;
        padding: 15px;
    }

    .campusServices li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
    }

    .campusServices li .inner .img {
        width: 50%;
    }

    .campusServices li .inner .det {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 25px;
    }

    .campusServices li .inner .det .name {
        font-size: 22px;
        font-weight: 700;
    }

    .campusServices li .inner .det a.link {
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
    }

    .campusServices li .inner .det a.link span {
        margin: 4px 0 0 5px;
        transition: ease-in-out .4s;
    }

    .campusServices li .inner .det a.link:hover {
        color: #000;
    }

    .campusServices li .inner .det a.link:hover span {
        margin-left: 15px;
    }

    .saCov .box {
        width: calc(50% - 3px);
    }

    .saCov .box .det {
        padding: 30px;
    }

    .actvitySlider {
        padding: 0;
    }

    .actvitySlider .item {
        padding: 15px;
        height: 100%;
    }

    .actvitySlider .slick-arrow {
        top: -50px;
        margin: 0;
    }

    .actvitySlider .slick-arrow {
        top: -50px;
        margin: 0;
    }

    .actvitySlider .slick-arrow.slick-prev {
        left: inherit;
        right: 60px;
    }

    .videoBox {
        position: relative;
    }

    .videoBox .play {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -60px 0 0 -60px;
    }

    .ourAlumini {
        padding: 0;
    }

    .ourAlumini .item {
        padding: 10px;
        height: 100%;
    }

    .ourAlumini .slick-arrow {
        top: -50px;
        margin: 0;
    }

    .ourAlumini .slick-arrow {
        top: -50px;
        margin: 0;
    }

    .ourAlumini .slick-arrow.slick-prev {
        left: inherit;
        right: 60px;
    }

    .ourAlumini .inner {
        border: 1px solid #AAAAAA;
        border-radius: 16px;
        height: 100%;
        padding: 25px;
        text-align: center;
    }

    .ourAlumini .inner .img img {
        border-radius: 100%;
        border: 1px dashed #000;
        padding: 10px;
        margin: 0 auto 15px auto;
    }

    .ourAlumini .inner .name {
        font-size: 22px;
        font-weight: 700;
        padding-bottom: 10px;
    }

    .ourAlumini .inner .textBox {
        font-size: 14px;
        line-height: 20px;
    }

    .aboutHadramout .img {
        width: 44%;
        position: relative;
    }

    .aboutHadramout .img img {
        width: 100%;
    }

    .aboutHadramout .img .play {
        background: #0071BD;
        width: 80px;
        height: 80px;
        border-radius: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -40px 0 0 -40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aboutHadramout .img .play span {
        color: #fff;
        font-size: 42px;
    }

    .aboutHadramout .det {
        width: 56%;
        padding-left: 40px;
    }

    .aboutHadramout .det a {
        display: inline-block;
        text-decoration: underline;
    }

    .aboutHadramout .det a:hover {
        text-decoration: none;
        color: #000;
    }

    .faqList.column3 li {
        width: 49%;
    }

    .speeachBox .det {
        width: 60%;
        padding-right: 40px;
    }

    .speeachBox .img {
        width: 40%;
    }

    .speeachBox .img img {
        width: 100%;
    }

    .enrollBanner.smallBox {
        max-width: 1200px;
        margin: auto;
    }

    .enrollBanner.smallBox .mainHd {
        font-size: 32px;
    }

    .listText.small li {
        padding: 3px 0 3px 12px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .listText.small li:before {
        top: 11px;
    }

    .studentAffairs .det {
        width: 44%;
        padding-right: 40px;
    }

    .studentAffairs .img {
        width: 56%;
    }

    .studentAffairs .img ul {
        margin: -5px;
    }

    .studentAffairs .img ul li {
        padding: 5px;
        width: 58%;
    }

    .studentAffairs .img ul li.last {
        width: 42%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .libraryBox {
        width: 47%;
    }

    .taskBox {
        width: 47%;
    }

    .faqList.full li {
        width: 100%;
    }

    .contactInfoList {
        margin: -15px;
        padding-top: 10px;
    }

    .contactInfoList li {
        padding: 15px;
        width: 33.33%;
    }

    .contactInfoList li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        padding: 25px;
    }

    .contactInfoList li .inner .icon {
        width: 50px;
        display: block;
    }

    .contactInfoList li .inner .icon img {
        width: 36px;
    }

    .contactInfoList li .inner .det {
        width: calc(100% - 50px);
        padding-left: 20px;
        font-size: 24px;
        line-height: 36px;
        font-weight: 700;
    }

    .contactInfoList li .inner .det a {
        color: #000;
    }

    .contactInfoList li .inner .hd {
        display: block;
        text-transform: uppercase;
    }

    .noramlWeight {
        font-weight: normal !important;
    }

    .branchOffice {
        margin: -15px;
        padding-top: 10px;
    }

    .branchOffice>li {
        padding: 15px;
        width: 33.33%;
    }

    .branchOffice li .inner {
        box-shadow: 1px 4px 5px rgba(0, 0, 0, .1);
        border: 1px solid #CFCFCF;
        height: 100%;
        background: #fff;
        padding: 25px;
    }

    .branchOffice li .inner .hd {
        display: block;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
        padding-bottom: 10px;
    }

    .branchOffice li .inner .info li {
        padding: 0 0 0 35px;
        margin-top: 15px;
        font-size: 19px;
        text-transform: uppercase;
        font-weight: 600;
        position: relative;
    }

    .branchOffice li .inner .info li img {
        width: 18px;
    ;
        position: absolute;
        left: 0;
        top: 7px;
    }

    .leftTab li a.applyNow {
        display: inline-flex;
        padding: 0 20px;
        border: none;
        color: #fff;
        margin: 10px 0 0 24px;
    }

    .leftTab li a.applyNow:hover {
        color: #fff;
        border: none;
    }

    .pt-0 {
        padding-top: 0 !important;
    }

    .deansWord .left {
        width: 40%;
    }

    .deansWord .right {
        width: 60%;
        padding-left: 30px;
    }

    .deansWord .right a {
        display: inline-block;
        text-decoration: underline;
    }

    .deansWord .right a:hover {
        text-decoration: none;
        color: #000;
    }

    .featureList li {
        border-bottom: 1px solid #aaaaaa;
        padding: 30px 0;
    }

    .featureList li:first-child {
        padding-top: 0;
    }

    .featuresHd {
        font-size: 28px;
        text-transform: uppercase;
        padding-bottom: 10px;
    }

    .sliderArrow.gallerySlider {
        padding: 0;
    }

    .sliderArrow.gallerySlider .slick-arrow.slick-prev {
        left: -20px;
    }

    .sliderArrow.gallerySlider .slick-arrow.slick-next {
        right: -20px;
    }

    .gallerySlider .item {
        padding: 10px;
    }

    .innerBanner.detail .container {
        min-height: 340px;
    }

    .detailTabsCon {
        border-bottom: 2px solid #D9D9D9;
    }

    .detailTabsCon ul {
        justify-content: space-between;
        display: flex;
    }

    .detailTabsCon ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 66px;
        font-size: 20px;
        font-weight: 700;
        color: #000;
        position: relative;
        padding: 5px 15px;
        text-align: center;
        text-transform: capitalize;
    }

    .detailTabsCon ul li a:hover {
        color: #0071BD;
    }

    .detailTabsCon ul li.active a:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        height: 6px;
        width: 100%;
        background: #0071BD;
    }

    .detailSubTab {
        border-top: 1px solid #aaa;
        padding: 30px 0 0 0;
        margin-top: 30px;
    }

    .detailSubTab ul {
        margin: -10px;
    }

    .detailSubTab ul li {
        padding: 10px;
    }

    .detailSubTab ul li a {
        display: block;
        background: #E9E9E9;
        color: #0071BD;
        text-transform: capitalize;
        font-size: 18px;
        font-weight: 700;
        padding: 12px 50px;
        border-radius: 40px;
    }

    .detailSubTab ul li a:hover,
    .detailSubTab ul li.active a {
        background: #0071BD;
        color: #fff;
    }

    .smallTextBox {
        font-size: 14px;
        line-height: 24px;
        font-weight: 600;
    }

    .departmentMessage .img {
        width: 40%;
        padding-top: 5px;
    }

    .departmentMessage .det {
        width: 60%;
        padding: 0 0 0 40px;
    }

    .largeFont {
        font-size: 18px;
        line-height: 28px;
    }

    .largeFont span {
        display: block;
        font-weight: 700;
    }

    .boxContent {
        padding: 20px;
    }

    .boxContent .hd {
        display: block;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 700;
        padding-bottom: 5px;
    }

    .programObjectives .det {
        width: 60%;
        padding: 0 40px 0 0;
    }

    .programObjectives .img {
        width: 40%;
        padding-top: 5px;
    }

    .conditionBox {
        background: #fff;
        border: 1px solid #CFCFCF;
        box-shadow: 0 0 2px rgba(0, 0, 0, .2);
        padding: 30px;
        margin-top: 40px;
    }

    .conditionBox .mainHd {
        font-size: 28px;
    }

    .conditionList {
        margin: -10px;
    }

    .conditionList li {
        padding: 10px;
        width: 20%;
        margin-top: 20px;
    }

    .conditionList li .inner {
        height: 100%;
        border-radius: 30px;
        padding: 45px 20px 20px 20px;
        position: relative;
        background: linear-gradient(234.6deg, #3A4476 12.94%, #0071BD 88.55%);
        font-size: 16px;
        color: #fff;
        line-height: 24px;
    }

    .conditionList li .inner .count {
        width: 56px;
        height: 56px;
        border-radius: 100%;
        background: #fff;
        border: 5px solid #3A4476;
        position: absolute;
        left: 20px;
        top: -20px;
        font-size: 26px;
        color: #3A4476;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .countList.small>li {
        font-size: 14px;
        padding: 4px 0;
        list-style: decimal;
    }


    /*Start 28 Jan 2025*/
    .innerBanner.newsBanner .innerBannerText {
        max-width: 1400px;
    }

    .innerBanner.newsBanner .container {
        min-height: 340px;
    }

    .newsLists {
        display: flex;
        flex-wrap: wrap;
        margin: -15px;
    }

    .newsLists li {
        padding: 15px;
        box-sizing: border-box;
        width: 33.33%;
    }

    .newsLists li .inner {
        border: 1px solid #CFCFCF;
        background: #fff;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, .1);
        height: 100%;
    }

    .newsLists li .inner .img img {
        width: 100%;
    }

    .newsLists li .inner .det {
        padding: 20px 25px;
    }

    .newsLists li .inner .det .date {
        color: #616161;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .newsLists li .inner .det .date span {
        color: #0071BD;
        font-size: 18px;
        margin-right: 8px;
    }

    .newsLists li .inner .det .name {
        font-size: 20px;
        font-weight: 700;
        min-height: 80px;
    }

    .newsLists li .inner .det a.readMoreLink {
        font-size: 18px;
    }

    @media (max-width: 992px) {
        .newsLists li {
            width: 50%;
        }
    }

    @media (max-width: 576px) {
        .newsLists li {
            width: 100%;
        }

        .newsLists li .inner .det {
            padding: 15px;
        }

        .newsLists li .inner .det .name {
            min-height: auto;
        }
    }

    .newsDetInfo {
        width: calc(100% - 600px);
        padding-right: 50px;
        font-size: 16px;
        line-height: 26px;
        word-wrap: break-word;
    }

    .newsDetInfo strong {
        font-weight: 700;
    }

    .newsDetImg {
        width: 600px;
    }

    .recentNewsSlider.sliderArrow {
        padding: 0;
    }

    .recentNewsSlider.sliderArrow .slick-arrow.slick-prev {
        left: -15px;
    }

    .recentNewsSlider.sliderArrow .slick-arrow.slick-next {
        right: -15px;
    }

    .recentNewsSlider .item {
        padding: 10px;
        height: 100%;
    }

    .recentNewsSlider .item .img img {
        width: 100%;
    }

    .newsDetBot {
        border-top: 1px solid #C1BDBD;
        padding: 20px 0 0 0;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .newsDetBot a {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
        color: #000;
    }

    .newsDetBot a:hover {
        color: #0071BD;
    }

    .newsDetBot .prev {
        width: 48%;
        max-width: 550px;
    }

    .newsDetBot .prev a .arrow {
        margin-right: 10px;
        font-size: 38px;
    }

    .newsDetBot .next {
        width: 48%;
        max-width: 550px;
        text-align: right;
    }

    .newsDetBot .next a .arrow {
        margin-left: 10px;
        font-size: 38px;
    }

    html[lang^="ar"] .newsDetBot {
        flex-direction: row-reverse !important;
    }

    html[lang^="ar"] .newsDetBot .prev a .arrow {
        margin-left: 10px !important;
        margin-right: 0 !important;
    }

    html[lang^="ar"] .newsDetBot .next a .arrow {
        margin-right: 10px !important;
        margin-left: 0 !important;
    }

    html[lang^="ar"] .newsDetBot .next {
        text-align: left !important;
    }

    .blogListing {
        display: flex;
        flex-wrap: wrap;
        margin: -15px;
    }

    .blogListing li {
        width: 33.33%;
        padding: 15px;
        box-sizing: border-box;
    }

    .blogListing li .inner {
        box-shadow: 0px 4.9px 4.9px 0px #0000000F;
        border: 1px solid #CFCFCF;
        height: 100%;
        position: relative;
    }

    .blogListing li .inner .img {
        position: relative;
    }

    .blogListing li .inner .img img {
        width: 100%;
        display: block;
    }

    .blogListing li .inner .img .tag {
        background: #E8B918;
        height: 32px;
        border-radius: 6px;
        padding: 0 15px;
        position: absolute;
        left: 20px;
        bottom: 20px;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        color: #fff;
    }

    .blogListing li .inner .det {
        padding: 25px 25px 75px 25px;
    }

    .blogListing li .inner .det .name {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
    }

    .blogListing li .inner .det .date {
        color: #AAAAAA;
        font-size: 17px;
        font-weight: 600;
    }

    .blogListing li .inner .det .text {
        font-size: 15px;
        line-height: 26px;
    }

    .blogListing li .inner .det a.readMoreLink {
        position: absolute;
        bottom: 25px;
        left: 25px;
        font-size: 19px;
    }

    @media (max-width: 992px) {
        .blogListing li {
            width: 50%;
        }
    }

    @media (max-width: 576px) {
        .blogListing li {
            width: 100%;
        }
    }

    .innerBanner.newsBannerDet .innerBannerText span {
        font-size: 45px;
        line-height: 55px;
    }

    .innerBanner.newsBannerDet .innerBannerText .byAdmin {
        display: block;
        font-size: 28px;
        font-weight: 400;
        padding-top: 10px;
    }

    .blogDetInfo {
        padding: 20px 0 0 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
    }

    .blogDetInfo strong {
        font-weight: 600;
    }

    .blogDetInfo ul {
        padding-top: 5px;
    }

    .blogDetInfo ul li {
        padding: 3px 15px 3px 20px;
        position: relative;
    }

    .blogDetInfo ul li:before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background: #1E1E1E;
        position: absolute;
        left: 5px;
        top: 14px;
    }

    html[lang^="ar"] .blogDetInfo ul li:before {
        left: auto;
        right: 2px;
    }

    .blogDetinBox .img {
        width: 630px;
    }

    .blogDetinBox .det {
        width: calc(100% - 700px);
        padding: 0 0 0 40px;
    }

    @media (max-width: 1150px) {
        .blogDetinBox {
            flex-direction: column;
            align-items: flex-start;
        }

        .blogDetinBox .det {
            width: auto;
            padding: 0 0 0 40px;
        }
    }

    html[lang^="ar"] .blogDetinBox .det {
        padding-left: 50px;
        padding-right: 10px;
    }

    .blogListSlider .item {
        padding: 10px;
    }

    .blogListSlider .item .img img {
        width: 100%;
    }

    .blogListSlider.sliderArrow {
        padding: 0;
    }

    .blogListSlider.sliderArrow .slick-arrow.slick-prev {
        left: -15px;
    }

    .blogListSlider.sliderArrow .slick-arrow.slick-next {
        right: -15px;
    }



    /*Start Feb 2025*/
    .applyNow {
        background: #D9D9D9;
        padding: 20px 30px;
    }

    .applyNow .left {
        font-size: 30px;
        font-weight: 700;
        width: calc(100% - 350px);
    }

    .applyNow .right a {
        white-space: nowrap;
        display: inline-flex;
        background: #0071BD;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        border: 1px solid #fff;
        padding: 7px 15px;
    }

    .applyNow .right a span {
        margin-left: 5px;
        font-size: 28px;
    }

    .applyNow .right a:hover {
        background: #000;
    }

    .jobHd {
        font-size: 23px;
        font-weight: 700;
        padding-bottom: 10px;
    }

    .jobText {
        color: #1E1E1E;
        font-size: 16px;
        line-height: 28px;
    }

    .jobList {
        margin: -15px;
        padding-top: 25px;
    }

    .jobList>li {
        width: 33.33%;
        padding: 15px;
    }

    .jobList li .inner {
        box-shadow: 0px 4.9px 4.9px 0px #0000000F;
        border: 1px solid #CFCFCF;
        height: 100%;
        position: relative;
    }

    .jobList li .inner .img {
        position: relative;
    }

    .jobList li .inner .img img {
        width: 100%;
    }

    .jobList li .inner .det {
        padding: 20px;
    }

    .jobList li .inner .det .name {
        font-size: 20px;
        font-weight: 700;
        padding-bottom: 10px;
    }

    .jobList li .inner .eduList li {
        padding: 3px 0;
        display: flex;
        font-size: 13px;
        justify-content: space-between;
        align-items: center;
    }

    .jobList li .inner .eduList li span {
        font-size: 18px;
    }

    .apllyList {
        margin: -15px;
        padding-top: 10px;
    }

    .apllyList>li {
        width: 33.33%;
        padding: 15px;
        font-size: 14px;
    }

    .apllyList li .hd {
        font-size: 22px;
        font-weight: 600;
        line-height: 34px;
        padding-bottom: 15px;
    }

    .apllyList li .hd span {
        display: block;
        padding-bottom: 5px;
    }

    .apllyList li .list {
        padding: 0 0 0 15px;
    }

    .apllyList li .list li {
        list-style: decimal;
        padding: 4px 0;
    }

    .apllyList li .text {
        padding-top: 15px;
    }

    .applyNow.full .left {
        width: 100%;
        padding: 0;
    }

    .verificationLeft {
        width: 45%;
    }

    .verificationLeft label {
        display: block;
        padding: 0 0 10px 0;
        font-size: 15px;
        font-weight: 600;
    }

    .verificationInput {
        width: 100%;
        border: 1px solid #000;
        padding: 0 15px;
        height: 40px;
        margin-bottom: 20px;
    }

    .verifyBtn {
        background: #0071BD;
        color: #fff;
        height: 40px;
        border-radius: 40px;
        padding: 0 50px;
        font-size: 16px;
        color: #fff;
        font-weight: 600;
    }

    .verifyBtn:hover {
        background: #000;
    }

    .verificationRight {
        width: 50%;
        background: #F7F7F7;
        padding: 20px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .verificationRight span {
        display: block;
        font-size: 17px;
        color: #000;
        font-weight: 700;
        text-transform: uppercase;
        padding-bottom: 10px;
    }


    /*Start 07 Feb 2025*/
    .collegeList {
        margin: -15px;
        padding-top: 20px;
    }

    .collegeList>li {
        padding: 15px;
        width: 25%;
        position: relative;
    }

    .collegeList li .inner {
        border: 1px solid #1066AB;
        background: #fff;
        border-radius: 30px;
        padding: 25px;
        height: 100%;
    }

    .collegeList li .icon {
        background: linear-gradient(234.6deg, #3A4476 12.94%, #0071BD 88.55%);
        width: 70px;
        height: 70px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .collegeList li .hd {
        padding: 20px 0;
        min-height: 90px;
        font-size: 22px;
        font-weight: 700;
    }

    .collegeList li .btn a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 48px;
        background: #0071BD;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
    }

    .collegeList li .btn a:hover {
        background: #000;
    }

    .collegeList li .over {
        border: 1px solid #1066AB;
        display: none;
        border-radius: 30px;
        padding: 25px;
        z-index: 10;
        position: absolute;
        left: 15px;
        right: 15px;
        top: -50px;
        background: #fff;
    }

    .collegeList li .over ul li {
        padding: 0 0 20px 0;
        font-size: 17px;
        line-height: 26px;
        font-weight: 700;
    }

    .collegeList li .over .hd {
        min-height: inherit;
    }

    .branchesList {
        margin: -15px;
        padding-top: 10px;
    }

    .branchesList li {
        padding: 15px;
        width: 33.33%;
    }

    .branchesList li .inner {
        box-shadow: 0px 2.83px 2.83px 0px #0000000F;
        border: 1px solid #CFCFCF;
        padding: 30px;
        height: 100%;
        display: flex;
    }

    .branchesList li .inner .icon {
        width: 100px;
    }

    .branchesList li .inner .det {
        width: calc(100% - 100px);
        padding-left: 10px;
    }

    .branchesList li .inner .det span {
        font-size: 22px;
        font-weight: 700;
    }

    .branchesList li .inner .det p {
        font-size: 16px;
        padding-top: 15px;
    }

    .mainHd.small {
        font-size: 26px;
    }

    .valuseList li {
        width: 33.33%;
        background: #F7F7F7;
        border: 1px solid #fff;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        padding: 20px 10px;
    }

    .departmentBox {
        border-top: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
    }

    .departmentBox .inner {
        width: 46%;
        padding: 40px 0;
    }

    .departmentBox .inner .countList li {
        font-weight: 600;
    }

    .innerBannerText.large {
        max-width: 800px;
    }

    .valusesBox {
        width: 35%;
    }

    .ourGoals {
        width: 60%;
    }

    .valusesBox .countList li,
    .ourGoals .countList li {
        font-weight: 700;
        text-transform: uppercase;
        padding: 4px 0;
    }

    .deanWordBox1 .left {
        width: 35%;
    }

    .deanWordBox1 .right {
        width: 65%;
        padding: 0 0 0 40px;
    }

    .deanWordBox2 .left {
        width: 47%;
        padding-top: 40px;
    }

    .deanWordBox2 .right {
        width: 47%;
        padding-top: 40px;
    }

    .listText.short li {
        padding: 3px 0 3px 12px;
        font-weight: 600;
    }

    .listText.short li:before {
        top: 15px;
    }

    .countList.short li {
        padding: 3px 0 3px 12px;
        font-weight: 600;
    }

    .featureList li.borTop {
        border-top: 1px solid #aaaaaa;
        padding: 30px 0;
    }

    .grSubHd {
        font-size: 26px;
        font-weight: 600;
        text-transform: uppercase;
        padding-bottom: 10px;
    }

    .researchList {
        width: 1000px;
        margin: -10px;
        padding-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    @media (max-width: 768px) {
        .researchList {
            width: 800px;
            flex-direction: column;
        }

        .researchList li {
            width: 800px;
        }
    }

    .researchList>li {
        padding: 10px;
        width: 25%;
        position: relative;
    }

    .researchList li .inner {
        border: 1px solid #1066AB;
        background: #fff;
        border-radius: 30px;
        padding: 20px;
        height: 100%;
    }

    .researchList li .hd {
        padding: 0 0 20px 0;
        min-height: 90px;
        font-size: 20px;
        font-weight: 700;
    }

    .researchList li .btn a {
        padding: 12px 20px;
        background: #0071BD;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        display: flex;
    }

    .researchList li .btn a:hover {
        background: #000;
    }


    /*Start 10 Feb 2025*/
    a.readMore.blue {
        background-color: rgb(0 86 179);
        color: #fff;
        border-color: rgb(0 86 179);
    }

    a.readMore.blue:hover {
        background-color: rgb(29 78 216);
        border-color: rgb(29 78 216);
    }

    .collageList li .inner .btnsBox {
        color: #0071BD;
        padding-top: 15px;
    }

    .collageList li .inner .btnsBox a {
        color: #0071BD;
        font-weight: 700;
    }

    .collageList li .inner .btnsBox a:hover {
        color: #000;
    }

    .columnBox {
        margin: -15px;
    }

    .columnBox>li {
        padding: 15px;
    }

    .faqList.column3 li {
        width: 49%;
    }

    .studentHousing li {
        width: 50%;
    }

    .studentHousing li .inner {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .studentHousing li .inner .img img {
        transition: ease-in-out .4s;
    }

    .studentHousing li .inner:hover .img img {
        transform: scale(1.1);
    }

    .studentHousing li .inner .name {
        background: #0B446E;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60%;
        padding: 15px 25px;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        text-transform: capitalize;
    }

    .serviceListBox {
        border-bottom: 1px solid #000000;
        padding-bottom: 40px;
    }

    .serviceList li {
        width: 33.33%;
    }

    .serviceList li .inner {
        border: 1px solid #000000;
        padding: 20px;
        height: 100%;
        text-align: center;
    }

    .serviceList li .inner .name {
        font-size: 16px;
        padding-top: 10px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .studentHousing.female li {
        width: 33.33%;
    }

    .studentHousing.female li .inner {
        min-height: 270px;
    }

    .studentHousing.female li .inner .img img {
        min-height: 100px;
    }

    .studentHousing.female li .name {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: ease-in-out .4s;
    }

    .studentHousing.female li .inner:hover .name {
        height: 60%;
    }

    .bookingBox {
        border-bottom: 1px solid #000;
        padding-bottom: 40px;
    }

    .bookingBox .det {
        width: 50%;
        padding-right: 20px;
    }

    .bookingBox .img {
        width: 50%;
        padding-left: 20px;
    }

    .otherInfo {
        border-bottom: 1px solid #000;
        padding-bottom: 40px;
    }

    .otherInfo .inner {
        width: calc(50% - 20px);
    }

    /*Strat 28th March 2025*/
    .innerBanner.library:before {
        display: none;
    }

    .borTop {
        border-top: 1px solid #999;
    }

    .mgmtService li {
        border-bottom: 1px solid #999;
        font-size: 16px;
        font-weight: 500;
        padding: 20px 0 20px 25px;
        position: relative;
    }

    .mgmtService li:before {
        content: 'chevron_right';
        font-family: 'Material Icons';
        font-size: 20px;
        position: absolute;
        left: 0;
        top: 21px;
        color: #333;
    }

    .beneficiarieyImgs .img {
        width: 48%;
    }

    .beneficiarieyImgs .img img {
        width: 100%;
    }

    .otherInfo.none {
        border: none;
        padding: 0;
    }

    .memberList {
        width: 48%;
    }

    .memberList li {
        border: none;
        padding: 2px 0 2px 15px !important;
        position: relative;
        line-height: 26px;
        font-size: 19px;
        font-weight: 600;
    }

    .memberList li:before {
        content: '';
        position: absolute;
        left: 0;
        top: 15px;
        width: 6px;
        height: 6px;
        background: #333;
        border-radius: 100%;
    }

    .memberList li a {
        text-decoration: underline;
        color: #000;
    }

    .memberList li a:hover {
        text-decoration: none;
        color: #0071BD;
    }

    .featuresHd {
        font-weight: 500;
    }

    .facBtnBox {
        margin: -5px;
    }

    .facBtnBox a {
        margin: 5px;
        font-size: 15px;
    }




    .navbar-brand .whtLogo {
        display: none;
    }

    .innerHeader .navbar-brand .whtLogo {
        display: inline-block;
    }

    .innerHeader .navbar-brand .blLogo {
        display: none;
    }

    li.nav-item.dropdown.small .o_mega_menu.dropdown-menu {
        width: 340px;
    }


    .innerHeader .navbar-nav .nav-link {
        color: #000000 !important;
        /* Black color */
    }

    .innerHeader .navbar-nav .nav-link:hover {
        color: #333333 !important;
        /* Darker black color for hover */
    }

    .custom-navbar.header {
        color: white !important;
    }

    .custom-navbar.innerHeader {
        color: black !important;
    }

    /* Make the header/nav full-bleed even when the page wrapper adds horizontal padding.
   This uses the viewport-width trick so the header stretches edge-to-edge. */
    .custom-navbar.header,
    .custom-navbar.innerHeader {
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;

    }

    body.open:before {
        content: '';
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 199;
    }

    body.open .header {
        z-index: 200;
    }

    #wrapwrap {
        z-index: inherit !important;
    }



    .navbar-collapse:not(.ust-navbar-collapse) {
        flex-grow: 0 !important;
    }

    .navbar-nav {
        gap: 0px;
    }

    .home-header .menu-text {
        color: white !important;
    }

    .inner-header .menu-text {
        color: black !important;
    }

    .inner-header .navbar {
        background-color: #0056b3 !important;
    }

    .inner-header .nav-link {
        color: #fff !important;
    }

    .custom-header .dropdown-item,
    .custom-header .dropdown-item:hover,
    .custom-header .dropdown-item:focus {
        color: #0056b3 !important;
    }

    /* Ensure inner header navbar is full width */
    .inner-header .navbar {
        background-color: #0056b3 !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .inner-header .container-fluid {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Home page header — solid brand blue (matches bg-[#0056B3]) */
    #header.home-header,
    #header.home-header.header,
    .custom-navbar.header.home-header,
    header#header.home-header {
        background-color: #0056B3 !important;
    }

    .home-header .navbar,
    .home-header .ust-navbar {
        background-color: #0056B3 !important;
    }

    /* Force full width for all inner header navbars */
    .innerHeader .navbar,
    .inner-header .navbar {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        background-color: #0056b3 !important;
    }

    /* Ensure proper container behavior for inner pages */
    .innerHeader .container-fluid,
    .inner-header .container-fluid {
        max-width: none !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Override any Bootstrap container restrictions */
    .inner-header .navbar .container-fluid {
        max-width: 1600px !important;
        margin: 0 auto !important;
    }


    navbar-nav .nav-link span {
        color: #fff;
    }

    .navbar-nav .nav-link span {
        color: #fff;
    }

    .navbar-expand-lg .navbar-nav .nav-link{
        color: #fff !important;
    }

    .navbar-expand-lg .navbar-nav .nav-link[href="/international-student-exchange-programs"] {
        display: none !important;
    }

    .nav-item.dropdown.o_no_autohide_item .nav-link {
        color: white;
    }

    .row .col img {
        transition: transform 0.3s ease, filter 0.3s ease;
        cursor: pointer;
    }

    .row .col img:hover {
        transform: scale(1.2);
        filter: invert(78%) sepia(48%) saturate(370%) hue-rotate(10deg);
    }



    .navbar-nav {
        display: flex !important;
        align-items: center;
        gap: 15px;
    }

    .navbar-nav .nav-item {
        display: inline-flex;
        align-items: center;
    }

    .navbar-nav .dropdown-toggle {
        padding: 0.5rem 1rem;
    }





    html[lang^="ar"] body {
        direction: rtl;
        text-align: right;
    }

    .rtl {
        direction: rtl;
        text-align: right;
    }

    .rtl .topMenu {
        float: left;
    }

    .rtl .topMenu li {
        margin-left: 15px;
        margin-right: 0;
    }

    .rtl .container {
        flex-direction: row-reverse;
    }


    body {
        overflow-x: hidden !important;
    }

    .responsive-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        text-align: center;
    }

    .responsive-cards>div {
        flex: 1 1 220px;
        max-width: 25%;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    @media screen and (max-width: 650px) {
        .responsive-cards>div {
            max-width: 48%;
            flex: 1 1 48%;
        }
    }

    @media screen and (max-width: 400px) {
        .responsive-cards>div {
            max-width: 100%;
            flex: 1 1 100%;
        }
    }

    /* Thank You message centering */
    .d-inline-block.mx-auto.p-4 {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto !important;
        width: 100%;
        max-width: 500px;
    }

    /* Ensure parent container allows proper centering */
    .offset-lg-1.text-center.col-lg-10 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
    }

    /* Arabic language specific centering for Thank You message */
    html[lang^="ar"] .offset-lg-1.text-center.col-lg-10 {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
    }

    html[lang^="ar"] .d-inline-block.mx-auto.p-4 {
        text-align: center !important;
        margin-right: auto !important;
        margin-left: auto !important;
        display: block !important;
    }

    .newsBoxLeft .det>div>.material-icons {
        font-size: 18px;
        vertical-align: -4px;
        line-height: 1;
        margin-left: 2px;
        transition: ease-in-out .4s;
        color: #0071BD;
    }

    .newsList a .material-icons {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 18px;
        vertical-align: -4px;
        line-height: 1;
        margin-left: 2px;
        transition: ease-in-out .4s;
        color: #0071BD;
    }

    /* More specific rule to override any other styles */
    section#TheUniversity .container .flexBox .det .textBox a.readMore {
        padding: 6px 16px !important;
        margin: 0 !important;
        min-height: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* ===== FIX CROPPED "About Us" TEXT ===== */

    /* Ensure link does not clip text */
    .navbar .nav-link {
        overflow: visible !important;
        padding-left: 0px !important;
    }

    /* Ensure parent also doesn't clip */
    .navbar .navbar-nav {
        overflow: visible !important;
    }

    /* Fix dropdown toggle specifically */
    .navbar .dropdown-toggle {
        overflow: visible !important;
    }

    /* Prevent any transform/shift cutting text */
    .navbar .nav-item {
        overflow: visible !important;
    }

    /* Safety fix for span inside link */
    .navbar .nav-link span {
        display: inline-block;
        padding-left: 2px;
    }

    /* =====================================================
   UST CUSTOM NAVBAR - DESKTOP STYLES
   Layout: [Logo (left)]  [Centered Menu]  [Search + Sign In (right)]
   Background comes from .header rule (#0056b3)
   ===================================================== */

    .ust-navbar {
        width: 100%;
        padding: 12px 0;
    }

    .ust-navbar-container {
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 20px;
        position: relative;
        min-height: 64px;
    }

    .ust-navbar-brand {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        margin-right: 0;
        padding: 0;
        position: relative;
        z-index: 2;
    }

    .ust-navbar-brand img {
        max-height: 56px;
        width: auto;
        display: block;
    }

    .ust-navbar-collapse {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    .ust-navbar-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        z-index: 1;
    }

    .ust-navbar-nav .ust-nav-item {
        display: inline-flex;
        align-items: center;
    }

    .ust-navbar-nav .ust-nav-link,
    .custom-navbar .ust-navbar-nav .nav-link,
    .ust-navbar .navbar-nav .nav-link {
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        padding: 8px 14px !important;
        text-transform: capitalize;
        white-space: normal;
        text-align: center;
        transition: color .2s ease, background-color .2s ease;
    }

    .ust-navbar-nav .ust-nav-link:hover,
    .ust-navbar-nav .ust-nav-link:focus,
    .ust-navbar-nav .ust-nav-link.active,
    .ust-navbar-nav .ust-nav-link.show {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.12);
        border-radius: 4px;
    }

    .ust-navbar-nav .nav-item.dropdown .dropdown-toggle::after {
        margin-left: 4px;
        vertical-align: middle;
        border-top-color: #ffffff;
    }

    .ust-navbar-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
        position: relative;
        z-index: 2;
    }

    .ust-navbar-search {
        display: inline-flex;
        align-items: center;
    }

    .ust-navbar-search .o_navlink_background,
    .ust-navbar-search button,
    .ust-navbar-search a {
        color: #ffffff !important;
    }

    .ust-navbar-user {
        display: inline-flex !important;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
    }

    .ust-navbar-user .ust-nav-link {
        color: #ffffff !important;
        font-weight: 600;
        padding: 8px 12px !important;
    }

    .ust-navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.6);
        padding: 6px 10px;
        background-color: transparent;
        display: none;
    }

    .ust-navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }

    .ust-navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .custom-navbar.innerHeader .ust-navbar-nav .ust-nav-link,
    .inner-header .ust-navbar-nav .nav-link,
    .custom-navbar.innerHeader .ust-navbar-user .ust-nav-link {
        color: #ffffff !important;
    }

    .ust-navbar-nav .nav-item.dropdown.o_no_autohide_item .ust-nav-link {
        color: #ffffff !important;
    }

    .ust-navbar .navbar-brand .whtLogo {
        display: none;
    }

    .custom-navbar.innerHeader .ust-navbar .navbar-brand .blLogo,
    .inner-header .ust-navbar .navbar-brand .blLogo {
        display: none;
    }

    .custom-navbar.innerHeader .ust-navbar .navbar-brand .whtLogo,
    .inner-header .ust-navbar .navbar-brand .whtLogo {
        display: inline-block;
    }

    .ust-navbar .dropdown-menu {
        border: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
        border-radius: 4px;
        padding: 8px 0;
        margin-top: 6px;
    }

    .ust-navbar .dropdown-menu .dropdown-item {
        color: #0056b3;
        font-weight: 500;
        padding: 8px 18px;
    }

    .ust-navbar .dropdown-menu .dropdown-item:hover,
    .ust-navbar .dropdown-menu .dropdown-item:focus {
        background-color: #f4f8fc;
        color: #0056b3;
    }

    .mobile-menu-header {
        display: none;
    }

/* Faculties section — Website Builder h2/h3 headings */
section:has(#facultiesCarousel) > .container > h2,
section:has(#facultiesCarousel) .mainHd {
    text-align: center;
    font-weight: 700;
    margin-bottom: 12px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
}

section:has(#facultiesCarousel) > .container > h2 .ust-title-accent,
section:has(#facultiesCarousel) .mainHd .ust-title-accent {
    color: rgb(0, 86, 179);
    font-weight: inherit;
}

section:has(#facultiesCarousel) > .container > h3.ust-faculties-subtitle,
section:has(#facultiesCarousel) > .container > h3,
section:has(#facultiesCarousel) .hdText.ust-faculties-subtitle,
section:has(#facultiesCarousel) .hdText {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.5rem !important;
    line-height: 1.6;
    font-weight: 500;
    color: #4b5563;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

section:has(#facultiesCarousel) > .container > h3 span,
section:has(#facultiesCarousel) .hdText span {
    font-size: inherit !important;
}

/* Faculties carousel */
#facultiesCarousel.carousel {
    position: relative;
    padding-left: 64px;
    padding-right: 64px;
}

#facultiesCarousel .carousel-inner {
    overflow: hidden;
}

#facultiesCarousel .carousel-item {
    min-height: 0 !important;
}

#facultiesCarousel .carousel-item .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    --bs-gutter-x: 1.25rem;
}

#facultiesCarousel .carousel-item .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding-bottom: 0 !important;
}

#facultiesCarousel .carousel-item .col-md-3 {
    height: 100%;
}

#facultiesCarousel .img {
    flex: 0 0 auto;
    height: 165px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}

#facultiesCarousel .img img,
#facultiesCarousel .faculty-card-image-wrap img,
#facultiesCarousel .col-md-3 > img.img-fluid,
#facultiesCarousel .col-md-3 > img.o_we_custom_image {
    width: 100%;
    height: 165px;
    max-height: 165px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    display: block;
    margin-bottom: 0 !important;
    transform: scale(1);
    transition: transform 0.45s ease;
    will-change: transform;
}

/* Image zoom on hover (card column or image wrap) */
#facultiesCarousel .col-md-3:hover .img img,
#facultiesCarousel .col-md-3:hover .faculty-card-image-wrap img,
#facultiesCarousel .faculty-card-image-wrap:hover img {
    transform: scale(1.08);
}

#facultiesCarousel .det {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Title block — equal height so buttons line up on one row */
#facultiesCarousel .det .hd,
#facultiesCarousel .col-md-3 > div[style*="font-weight"] {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    min-height: 3.25rem;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
}

#facultiesCarousel .det .hd h3,
#facultiesCarousel .col-md-3 > div[style*="font-weight"] h3,
#facultiesCarousel .col-md-3 > div[style*="font-weight"] h3 span {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

#facultiesCarousel .det .text {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

#facultiesCarousel a.readMore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    flex: 0 0 auto;
    margin-top: auto;
    text-decoration: none;
    white-space: nowrap;
}

#facultiesCarousel a.readMore > span:not(.material-icons) {
    font-size: inherit !important;
    margin-top: 0 !important;
    line-height: inherit;
}

#facultiesCarousel a.readMore p,
#facultiesCarousel a.readMore h3 {
    margin: 0;
    padding: 0;
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#facultiesCarousel a.readMore br {
    display: none;
}

#facultiesCarousel a.readMore .material-icons {
    font-size: 20px;
    line-height: 1;
    margin-top: 0;
    vertical-align: middle;
}

#facultiesCarousel a.readMore .material-icons h3,
#facultiesCarousel a.readMore .material-icons .base-fs {
    display: none !important;
}

#facultiesCarousel .carousel-control-prev,
#facultiesCarousel .carousel-control-next {
    width: 48px;
    opacity: 1;
}

#facultiesCarousel .carousel-control-prev {
    left: 0;
}

#facultiesCarousel .carousel-control-next {
    right: 0;
}

/* International Partners carousel */
.partners-section-title {
    margin-bottom: 30px;
}

#partnersCarousel.carousel {
    position: relative;
    padding-left: 64px;
    padding-right: 64px;
    max-width: 1100px;
    margin: 0 auto;
}

#partnersCarousel .carousel-inner {
    overflow: hidden;
}

#partnersCarousel .carousel-item {
    min-height: 0 !important;
}

#partnersCarousel .partners-slide-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
}

#partnersCarousel .partner-logo-card {
    flex: 0 1 calc(20% - 20px);
    min-width: 140px;
    max-width: 180px;
    border: 1px solid #ccc;
    padding: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#partnersCarousel .partner-logo-card img {
    width: 100%;
    height: 80px;
    max-height: 80px;
    object-fit: contain;
}

#partnersCarousel .carousel-control-prev,
#partnersCarousel .carousel-control-next {
    width: 48px;
    opacity: 1;
}

#partnersCarousel .carousel-control-prev {
    left: 0;
}

#partnersCarousel .carousel-control-next {
    right: 0;
}

#partnersCarousel .carousel-control-prev-icon,
#partnersCarousel .carousel-control-next-icon {
    filter: invert(0);
    background-color: #e7e7e7;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background-size: 55%;
}

#partnersCarousel.ust-partners-from-editor {
    margin-top: 10px;
}

/* ===== Student Services Hub (reference layout) ===== */
section:has(#studentServicesCarousel) {
    background: #fff;
    overflow: visible;
}

section:has(#studentServicesCarousel) > .container {
    overflow: visible;
}

section:has(#studentServicesCarousel) .ust-services-badge-wrap {
    text-align: center;
    margin-bottom: 16px;
}

section:has(#studentServicesCarousel) .ust-services-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    padding: 8px 18px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    color: #0056b3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

section:has(#studentServicesCarousel) .ust-services-badge .material-icons {
    font-size: 16px;
    line-height: 1;
}

section:has(#studentServicesCarousel) > .container > .mainHd,
section:has(#studentServicesCarousel) > .container > h2,
section:has(#studentServicesCarousel) h2.ust-services-title {
    text-align: center;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

section:has(#studentServicesCarousel) > .container > h3,
section:has(#studentServicesCarousel) .ust-services-subtitle {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
    font-size: 1.125rem !important;
    line-height: 1.6;
    color: #6b7280;
    font-weight: 500;
}

section:has(#studentServicesCarousel) .ust-title-accent {
    color: #0056b3;
}

/* Student Services — static grid (reference: grid-cols-2 / 3 / 6, group hover) */
#studentServicesCarousel.carousel {
    overflow: visible;
}

#studentServicesCarousel .carousel-control-prev,
#studentServicesCarousel .carousel-control-next {
    display: none !important;
}

#studentServicesCarousel .carousel-inner {
    overflow: visible !important;
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
}

#studentServicesCarousel .carousel-item {
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    opacity: 1 !important;
    position: static !important;
    float: none !important;
    margin-right: 0 !important;
}

#studentServicesCarousel .carousel-item:not(:first-child) {
    display: none !important;
}

#studentServicesCarousel .carousel-item .row,
#studentServicesCarousel .ust-services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
    overflow: visible;
}

@media (min-width: 768px) {
    #studentServicesCarousel .carousel-item .row,
    #studentServicesCarousel .ust-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    #studentServicesCarousel .carousel-item .row,
    #studentServicesCarousel .ust-services-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

#studentServicesCarousel .ust-services-tile,
#studentServicesCarousel [class*="col-"].group {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 0;
    color: inherit;
    text-decoration: none;
    transform: translateY(0);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

#studentServicesCarousel .ust-services-tile:hover,
#studentServicesCarousel [class*="col-"].group:hover {
    z-index: 2;
    transform: translateY(-0.5rem);
}

#studentServicesCarousel .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
    padding: 0;
    border-radius: 1rem;
    background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
    color: #0056b3;
    box-shadow: 0 8px 30px rgba(0, 86, 179, 0.12);
    overflow: visible;
    transform: scale(1) rotate(0deg);
    transform-origin: center center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

#studentServicesCarousel .icon img {
    display: block;
    width: auto;
    max-width: 2.75rem;
    max-height: 2.75rem;
    margin: 0 auto;
    object-fit: contain;
    transition: filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

#studentServicesCarousel .ust-services-tile:hover .icon,
#studentServicesCarousel [class*="col-"].group:hover .icon {
    background: linear-gradient(to bottom right, #0056b3, #1d4ed8);
    box-shadow: 0 12px 40px rgba(0, 86, 179, 0.25);
    transform: scale(1.1) rotate(3deg);
}

#studentServicesCarousel .ust-services-tile:hover .icon img,
#studentServicesCarousel [class*="col-"].group:hover .icon img {
    filter: brightness(0) invert(1);
}

#studentServicesCarousel .name {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0;
    color: #1f2937;
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#studentServicesCarousel .ust-services-tile:hover .name,
#studentServicesCarousel [class*="col-"].group:hover .name {
    color: #0056b3;
}

/* Apply / Enroll tiles — original images/text; wider left card + image zoom on hover */
.ust-apply-enroll-section .ust-apply-enroll-row,
section:has(.imgBox.apply) .flexBox.justifyContentBetween {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 24px;
}

.ust-apply-enroll-section .imgBox.apply,
.ust-apply-enroll-section .imgBox.enroll,
section:has(.imgBox.apply) .imgBox.apply,
section:has(.imgBox.apply) .imgBox.enroll {
    position: relative;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
}

.ust-apply-enroll-section .imgBox.apply,
section:has(.imgBox.apply) .imgBox.apply {
    width: calc(66.666% - 12px) !important;
    flex: 0 0 calc(66.666% - 12px) !important;
    max-width: calc(66.666% - 12px) !important;
}

.ust-apply-enroll-section .imgBox.enroll,
section:has(.imgBox.apply) .imgBox.enroll {
    width: calc(33.333% - 12px) !important;
    flex: 0 0 calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
}

.ust-apply-enroll-section .imgBox .img,
section:has(.imgBox.apply) .imgBox .img {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.ust-apply-enroll-section .imgBox .img img,
section:has(.imgBox.apply) .imgBox .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.ust-apply-enroll-section .imgBox.apply:hover .img img,
.ust-apply-enroll-section .imgBox.enroll:hover .img img,
section:has(.imgBox.apply) .imgBox.apply:hover .img img,
section:has(.imgBox.apply) .imgBox.enroll:hover .img img {
    transform: scale(1.08);
}

.ust-apply-enroll-section .imgBox .over,
section:has(.imgBox.apply) .imgBox .over {
    border-radius: 20px;
    z-index: 1;
}

/* Graduates / Alumni section */
.graduates-section,
section:has(#alumniSlider) {
    background-color: #0056B3 !important;
}

.graduates-section .alumniBox,
section:has(#alumniSlider) .alumniBox {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 30px;
}

.graduates-section .alumniBox.flex-wrap,
section:has(#alumniSlider) .alumniBox.flex-wrap {
    flex-wrap: nowrap !important;
}

.graduates-section .alumniBox .left,
section:has(#alumniSlider) .alumniBox > .left {
    width: 280px;
    max-width: 280px;
    flex: 0 0 280px;
    min-width: 280px;
}

.graduates-section .alumniBox .right,
section:has(#alumniSlider) .alumniBox > .right,
section:has(#alumniSlider) .alumniBox > .col-md-9,
section:has(#alumniSlider) .alumniBox > [class*="col-md-"]:not(.left) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    padding-left: 0;
}

/* Bootstrap col-12 must not force carousel to next row on desktop */
@media (min-width: 992px) {
    section:has(#alumniSlider) .alumniBox > .col-12.col-md-9 {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    section:has(#alumniSlider) .alumniBox > .left {
        margin-bottom: 0 !important;
    }
}

.graduates-section .alumniLinks,
.graduates-section ul.alumniLinks.flexBox,
section:has(#alumniSlider) .alumniLinks,
section:has(#alumniSlider) ul.alumniLinks.flexBox {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    flex-wrap: unset !important;
    flex-direction: unset !important;
}

.graduates-section .alumniLinks li,
section:has(#alumniSlider) .alumniLinks li {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    flex: none !important;
}

.graduates-section .alumniLinks li:first-child,
section:has(#alumniSlider) .alumniLinks li:first-child {
    grid-column: 1 / -1;
}

.graduates-section .alumniLinks li:nth-child(2),
.graduates-section .alumniLinks li:nth-child(3),
section:has(#alumniSlider) .alumniLinks li:nth-child(2),
section:has(#alumniSlider) .alumniLinks li:nth-child(3) {
    grid-column: auto;
}

.graduates-section .alumniLinks li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.graduates-section .alumniLinks li a:hover {
    background-color: #fff;
    color: #0056B3;
}

#alumniSlider.carousel {
    position: relative;
    padding-left: 52px;
    padding-right: 52px;
}

#alumniSlider .carousel-item {
    min-height: 0 !important;
}

#alumniSlider .alumni-slide-row {
    align-items: flex-start;
}

#alumniSlider .alumni-card,
#alumniSlider .col-md-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
}

#alumniSlider .alumni-photo,
#alumniSlider .rounded-circle,
#alumniSlider img.rounded-circle.border-white {
    width: 110px;
    height: 110px;
    max-width: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid transparent !important;
    box-shadow: none;
    margin-bottom: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#alumniSlider .carousel-item [class*="col-"]:hover .rounded-circle,
#alumniSlider .carousel-item [class*="col-"]:hover img.rounded-circle,
#alumniSlider .carousel-item [class*="col-"]:hover img.border-white {
    border-color: #fff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

#alumniSlider .alumni-name,
#alumniSlider h6 {
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

#alumniSlider .alumni-role,
#alumniSlider small {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    display: block;
}

#alumniSlider .carousel-control-prev,
#alumniSlider .carousel-control-next {
    width: 40px;
    opacity: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#alumniSlider .carousel-control-prev {
    left: 0;
}

#alumniSlider .carousel-control-next {
    right: 0;
}

#alumniSlider .carousel-control-prev-icon,
#alumniSlider .carousel-control-next-icon {
    background-color: transparent !important;
    box-shadow: none !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 28px 28px !important;
}

#alumniSlider .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
}

#alumniSlider .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

#alumniSlider .carousel-control-prev:hover,
#alumniSlider .carousel-control-next:hover,
#alumniSlider .carousel-control-prev:focus,
#alumniSlider .carousel-control-next:focus {
    background: transparent !important;
    background-color: transparent !important;
}

#alumniSlider .carousel-control-prev:hover .carousel-control-prev-icon,
#alumniSlider .carousel-control-next:hover .carousel-control-next-icon {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ===== Homepage Latest News magazine layout (newsCon) ===== */
.ust-home-news-section .ust-home-news-header .readMore,
section:has(.newsCon) .ust-home-news-header .readMore,
section:has(.newsCon) > .container > .flexBox.itemCenter .readMore {
    display: none !important;
}

.ust-home-news-section .newsCon,
section:has(.newsCon) .newsCon.ust-home-news-magazine-layout,
section:has(.newsCon) .newsCon {
    display: grid !important;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: stretch !important;
    gap: 32px;
    flex-wrap: nowrap !important;
}

.ust-home-news-section .newsBoxLeft,
section:has(.newsCon) .newsBoxLeft {
    width: auto !important;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    border-radius: 4px;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.ust-home-news-section .newsBoxLeft .img,
section:has(.newsCon) .newsBoxLeft .img {
    flex: 1 1 auto;
    min-height: 320px;
    overflow: hidden;
    position: relative;
    background: #f3f4f6;
}

.ust-home-news-section .newsBoxLeft .img img,
section:has(.newsCon) .newsBoxLeft .img img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.45s ease;
    will-change: transform;
}

.ust-home-news-section .newsBoxLeft .det,
section:has(.newsCon) .newsBoxLeft .det {
    margin-top: -120px !important;
    flex: 0 0 auto;
}

.ust-home-news-section .newsBoxLeft .ust-home-news-read-more,
.ust-home-news-section .newsList .ust-home-news-read-more,
section:has(.newsCon) .newsBoxLeft a.readMoreLink,
section:has(.newsCon) .newsList a.ust-home-news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #0056b3 !important;
    text-decoration: none;
}

.ust-home-news-section .ust-home-news-read-arrow,
section:has(.newsCon) .ust-home-news-read-arrow {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    margin: 0;
    transition: transform 0.25s ease;
}

.ust-home-news-section .ust-home-news-read-more:hover .ust-home-news-read-arrow,
section:has(.newsCon) a.readMoreLink:hover .ust-home-news-read-arrow {
    transform: translateX(0.5px);
}

.ust-home-news-section a.readMoreLink:hover span.ust-home-news-read-arrow,
section:has(.newsCon) a.readMoreLink:hover span.ust-home-news-read-arrow {
    margin-left: 0 !important;
}

/* News section heading — blue accent on "News" */
section:has(.newsCon) .mainHd .ust-title-accent,
section:has(.newsCon) .ust-home-news-header .ust-title-accent,
section:has(.newsCon) h2 .ust-title-accent {
    color: rgb(0, 86, 179);
    font-weight: inherit;
}

.ust-home-news-section .newsBoxRight,
section:has(.newsCon) .newsBoxRight {
    width: auto !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
}

.ust-home-news-section .newsList,
section:has(.newsCon) .newsList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    flex-wrap: unset !important;
}

.ust-home-news-section .newsList > li,
section:has(.newsCon) .newsList > li {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    min-height: 0;
}

.ust-home-news-section .newsList li .inner,
section:has(.newsCon) .newsList li .inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.ust-home-news-section .newsList li .inner .img,
section:has(.newsCon) .newsList li .inner .img {
    flex: 0 0 auto;
    height: 150px;
    overflow: hidden;
    background: #f3f4f6;
}

.ust-home-news-section .newsList li .inner .img img,
section:has(.newsCon) .newsList li .inner .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.45s ease;
    will-change: transform;
}

.ust-home-news-section .newsList li .inner .det,
section:has(.newsCon) .newsList li .inner .det {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
    min-height: 0;
}

.ust-home-news-section .newsList li .inner .det .name,
section:has(.newsCon) .newsList li .inner .det .name {
    flex: 1 1 auto;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3);
}

.ust-home-news-section .newsList li .inner .det > div:last-child,
section:has(.newsCon) .newsList li .inner .det > div:last-child {
    margin-top: auto;
    padding-top: 4px;
}

.ust-home-news-section .newsList li .inner:hover,
section:has(.newsCon) .newsList li .inner:hover {
    border-color: #cfe3f7;
    box-shadow: 0 12px 28px rgba(0, 86, 179, 0.16);
}

.ust-home-news-section .newsBoxLeft:hover,
section:has(.newsCon) .newsBoxLeft:hover {
    box-shadow: 0 12px 28px rgba(0, 86, 179, 0.16);
}

.ust-home-news-footer,
section:has(.newsCon) .ust-home-news-footer {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    padding-top: 4px;
}

.ust-home-news-view-all-btn,
section:has(.newsCon) .ust-home-news-footer .readMore {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    width: auto;
    padding: 12px 32px;
    background: #0056B3 !important;
    border: 1px solid #0056B3 !important;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 86, 179, 0.35);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.ust-home-news-view-all-btn::after,
section:has(.newsCon) .ust-home-news-footer .readMore::after {
    content: none !important;
    display: none !important;
}

.ust-home-news-view-all-btn:hover,
section:has(.newsCon) .ust-home-news-footer .readMore:hover {
    background: #004494 !important;
    border-color: #004494 !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(0, 86, 179, 0.42);
}

/* News: card shadow + image zoom-in on hover */
.ust-home-news-section .newsList li .inner:hover .img img,
section:has(.newsCon) .newsList li .inner:hover .img img,
.ust-home-news-section .newsBoxLeft:hover .img img,
section:has(.newsCon) .newsBoxLeft:hover .img img,
.ust-home-news-section .newsList li .inner:hover .ust-news-image,
section:has(.newsCon) .newsList li .inner:hover .ust-news-image,
.ust-home-news-section .newsBoxLeft:hover .ust-news-image,
section:has(.newsCon) .newsBoxLeft:hover .ust-news-image {
    transform: scale(1.08);
}

section:has(.newsCon) .newsList li .inner:hover .img,
section:has(.newsCon) .newsBoxLeft:hover .img,
section:has(.newsCon) .newsBoxLeft:hover .det {
    box-shadow: none !important;
}

@media (max-width: 1199px) {
    .ust-home-news-section .newsCon,
    section:has(.newsCon) .newsCon {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ust-home-news-section .newsBoxLeft .det,
    section:has(.newsCon) .newsBoxLeft .det {
        margin-top: -80px !important;
    }
}

@media (max-width: 767px) {
    .ust-home-news-section .newsList,
    section:has(.newsCon) .newsList {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .ust-home-news-footer,
    section:has(.newsCon) .ust-home-news-footer {
        justify-content: center;
    }
}

/* ===== Card / tile hover zoom (blog, student services, etc.) ===== */
@keyframes ustCardZoomPulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1.03);
    }
}

@keyframes ustBlogZoomPulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1.03);
    }
}

.university-blog-section {
    background: #fff;
}

.university-blog-section .blog-section-header,
.university-blog-section .ust-blog-header-row,
section:has(.blogList) .flexBox.itemCenter.justifyContentBetween {
    gap: 24px;
    margin-bottom: 36px;
    align-items: flex-end !important;
    justify-content: space-between !important;
    text-align: left !important;
}

.university-blog-section .blog-section-heading,
.university-blog-section .ust-blog-header-row > div:first-child {
    flex: 1 1 auto;
    max-width: 720px;
    text-align: left !important;
}

.university-blog-section .blog-section-title,
.university-blog-section .ust-blog-header-row h2,
.university-blog-section .ust-blog-header-row .mainHd,
section:has(.blogList) .flexBox h2,
section:has(.blogList) .flexBox .mainHd {
    margin: 0 0 10px;
    padding: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    text-align: left !important;
    color: #111827 !important;
}

.university-blog-section .blog-title-main,
.university-blog-section .blog-section-title > .ust-title-accent:not(.blog-title-accent),
section:has(.blogList) h2 .blog-title-main,
section:has(.blogList) h2 > .ust-title-accent:not(.blog-title-accent) {
    color: #111827 !important;
}

.university-blog-section .blog-title-accent,
section:has(.blogList) h2 .blog-title-accent {
    color: #0056b3 !important;
}

/* Section heading accent words — rgb(0, 86, 179) */
.ust-title-accent,
.mainHd .ust-title-accent,
.UniversityInfo .hd span .ust-title-accent,
.UniversityInfo .hd h1 .ust-title-accent,
.UniversityInfo .hd .ust-title-accent,
section:has(#facultiesCarousel) h2 .ust-title-accent {
    color: rgb(0, 86, 179);
    font-weight: inherit;
}

.university-blog-section .blog-section-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #6b7280;
    font-weight: 500;
    max-width: 640px;
    text-align: left;
}

.university-blog-section .blog-view-all-btn,
section:has(.blogList) .blog-view-all-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0 !important;
    width: auto !important;
    padding: 12px 32px;
    background: #0056B3 !important;
    border: 1px solid #0056B3 !important;
    border-radius: 10px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 86, 179, 0.35);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.university-blog-section .blog-view-all-btn:hover {
    background: #004494 !important;
    border-color: #004494 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.university-blog-section .blog-view-all-arrow,
.university-blog-section .blog-view-all-btn .blog-view-all-arrow,
.university-blog-section .blog-view-all-btn .blog-view-all-icon,
section:has(.blogList) .blog-view-all-btn .blog-view-all-arrow,
section:has(.blogList) .blog-view-all-btn .blog-view-all-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.university-blog-section .blog-view-all-arrow svg,
.university-blog-section .blog-view-all-btn .blog-view-all-arrow svg {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    fill: currentColor !important;
}

.ust-home-news-view-all-btn .ust-home-news-view-all-arrow,
.ust-home-news-view-all-btn .ust-home-news-view-all-icon,
section:has(.newsCon) .ust-home-news-footer .readMore .ust-home-news-view-all-arrow,
section:has(.newsCon) .ust-home-news-footer .readMore .ust-home-news-view-all-icon {
    display: inline-flex !important;
    align-items: center;
    overflow: visible !important;
    visibility: visible !important;
}

.ust-home-news-view-all-btn .ust-home-news-view-all-arrow svg,
.ust-home-news-view-all-btn .ust-home-news-view-all-icon svg,
section:has(.newsCon) .ust-home-news-footer .readMore .ust-home-news-view-all-arrow svg {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    fill: currentColor !important;
}

.university-blog-section .blogList.blog-grid,
.university-blog-section ul.blogList,
section:has(> .container > .blogList) .blogList.blog-grid,
section:has(.blogList) ul.blogList {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    flex-wrap: unset !important;
}

.university-blog-section .blogList.blog-grid > li,
.university-blog-section .blogList.blog-grid .slick-slide,
.university-blog-section .blogList > li,
section:has(.blogList) .blogList > li {
    display: flex !important;
    height: auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
}

/* Odoo editor / Bootstrap cols (col-md-4 = 3 per row) */
.university-blog-section .blogList > li[class*="col-"],
section:has(.blogList) .blogList > li[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Slick wrappers must NOT use display:contents (collapses grid until window resize / DevTools) */
.university-blog-section .blogList .slick-list,
.university-blog-section .blogList .slick-track,
section:has(.blogList) .blogList .slick-list,
section:has(.blogList) .blogList .slick-track {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Do not apply slider flex negative-margin layout to homepage blog grid */
.university-blog-section .blogList.blog-grid.sliderArrow .slick-list,
.university-blog-section .blogList.blog-grid .slick-list,
section:has(.blogList) .blogList.blog-grid .slick-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
}

.university-blog-section .blogList.slick-slider > .slick-arrow,
.university-blog-section .blogList .slick-arrow,
section:has(.blogList) .blogList .slick-arrow {
    display: none !important;
}

.university-blog-section .blogList .slick-slide,
section:has(.blogList) .blogList .slick-slide {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
}

.university-blog-section .blog-card,
.university-blog-section .blogList li .inner,
section:has(.blogList) .blogList li .inner.blog-card,
section:has(.blogList) .blogList li .inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.4s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.university-blog-section .blog-card-image-wrap,
.university-blog-section .blogList li .inner .img {
    position: relative;
    flex: 0 0 auto;
    height: 200px;
    overflow: hidden;
    background: #f3f4f6;
}

.university-blog-section .blog-card-image,
.university-blog-section .blogList li .inner .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.45s ease;
    will-change: transform;
}

.university-blog-section .blog-card-tag,
.university-blog-section .blogList li .inner .img .tag {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fb7902;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    z-index: 2;
}

.university-blog-section .blog-card-body,
.university-blog-section .blogList li .inner .det {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 18px 20px;
    min-height: 0;
}

.university-blog-section .blog-card-meta,
.university-blog-section .blogList li .inner .det .date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0 0 12px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    background-color: #eef4fb;
    border-radius: 20px;
}

.university-blog-section .blog-card-meta .material-icons,
.university-blog-section .blogList li .inner .det .date span.material-icons {
    font-size: 16px;
    color: #0056b3;
    margin-right: 0;
}

.university-blog-section .blog-card-title,
.university-blog-section .blogList li .inner .det .name {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3);
}

.university-blog-section .blog-card-excerpt {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: calc(1.55em * 3);
}

.university-blog-section .blog-card-footer,
.university-blog-section .blogList li .inner .det > div:last-child {
    margin-top: auto;
    padding-top: 4px;
}

.university-blog-section .blog-card-link,
.university-blog-section .blogList li .inner .det a.readMoreLink,
.university-blog-section .blog-card-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #0056b3 !important;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.university-blog-section .blog-card-link .material-icons {
    font-size: 18px;
    line-height: 1;
    margin: 0;
    transition: transform 0.25s ease;
}

.university-blog-section .blog-card-link-arrow,
.university-blog-section .blog-card-link > .blog-card-link-arrow,
.university-blog-section .blog-card-footer .blog-card-link-arrow {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease;
}

.university-blog-section .blog-card-link:hover,
.university-blog-section .blogList li .inner .det a.readMoreLink:hover,
.university-blog-section .blog-card-footer > a:hover {
    color: #004494 !important;
    gap: 6px;
}

.university-blog-section .blog-card-link:hover .blog-card-link-arrow,
.university-blog-section .blogList li .inner .det a.readMoreLink:hover .blog-card-link-arrow,
.university-blog-section .blog-card-footer > a:hover .blog-card-link-arrow {
    transform: translateX(0.5px);
}

.university-blog-section .blog-card-link:hover span.blog-card-link-arrow,
.university-blog-section .blogList li .inner .det a.readMoreLink:hover span {
    margin-left: 0 !important;
}

.university-blog-section .blog-card:hover,
.university-blog-section .blogList li:hover .inner,
section:has(.blogList) .blogList li:hover .inner {
    border-color: #cfe3f7;
    box-shadow: 0 14px 32px rgba(0, 86, 179, 0.14);
    animation: ustCardZoomPulse 0.55s ease forwards;
}

/* Block Odoo builder dolly_zoom only — keep CSS image zoom on hover */
.university-blog-section .blog-card:hover .blog-card-image,
.university-blog-section .blogList li:hover .inner .img img,
.university-blog-section .blogList li .inner:hover .img img,
.university-blog-section .blog-card:hover .blog-card-image-wrap img,
section:has(.blogList) .blogList li:hover .inner .img img {
    animation: none !important;
    transform: scale(1.08) !important;
}

/* Block Odoo builder dolly_zoom on blog/faculty cards — use CSS scale above */
.university-blog-section .blog-card-image-wrap,
.university-blog-section .blogList li .inner .img,
#facultiesCarousel .img,
#facultiesCarousel .faculty-card-image-wrap {
    overflow: hidden;
}

/* Editor / legacy blog row (no university-blog-section class) */
section:has(.blogList) .flexBox.itemCenter.justifyContentBetween .readMore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #0056b3 !important;
    border: 1px solid #0056b3 !important;
    border-radius: 10px;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 86, 179, 0.28);
}

/* Blog View All arrow — keep ::after visible (builder + JS SVG backup) */
.university-blog-section a.blog-view-all-btn::after,
.university-blog-section .ust-blog-header-row > a.readMore::after,
section:has(.blogList) a.blog-view-all-btn::after,
section:has(.blogList) .flexBox.itemCenter.justifyContentBetween > a.readMore::after,
section:has(.blogList) .flexBox.justifyContentBetween > a.readMore::after {
    content: "\2192" !important;
    display: inline-block !important;
    margin-left: 0.35em;
    font-size: 1em !important;
    line-height: 1;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 991px) {
    .university-blog-section .blogList.blog-grid,
    .university-blog-section ul.blogList,
    section:has(.blogList) ul.blogList {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .university-blog-section .blog-section-header,
    section:has(.blogList) .blog-section-header,
    section:has(.blogList) .flexBox.itemCenter.justifyContentBetween,
    section:has(.blogList) .flexBox.justifyContentBetween {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .university-blog-section .blog-view-all-btn,
    section:has(.blogList) .blog-view-all-btn {
        align-self: center !important;
    }
}

@media (max-width: 767px) {
    .university-blog-section .blog-section-header,
    section:has(.blogList) .blog-section-header,
    section:has(.blogList) .flexBox.itemCenter.justifyContentBetween {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .university-blog-section .blog-view-all-btn,
    section:has(.blogList) .blog-view-all-btn,
    section:has(.blogList) .blog-section-header > a.blog-view-all-btn {
        align-self: flex-end !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .university-blog-section .blogList.blog-grid,
    section:has(.blogList) ul.blogList {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .university-blog-section .blog-card-image-wrap,
    .university-blog-section .blogList li .inner .img {
        height: 180px;
    }

    .university-blog-section .blog-card-title,
    .university-blog-section .blogList li .inner .det .name {
        min-height: 0;
        -webkit-line-clamp: 4;
    }

    .university-blog-section .blog-card-excerpt {
        min-height: 0;
    }
}

/* ===== UST Footer — match reference layout (content unchanged) ===== */
#footer,
footer#footer,
footer.footer,
footer.ust-footer {
    position: relative;
    overflow: hidden;
    background-color: #0056b3 !important;
    background-image: linear-gradient(to bottom right, #0a1628 0%, #0056b3 50%, #003d82 100%) !important;
    color: #fff !important;
    padding: 2.5rem 0 1.25rem !important;
}

#footer::before,
footer.footer::before,
footer.ust-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}

.ust-footer .footer-container,
.ust-footer > .container,
.footer > .container {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 12-col grid: brand | links | contact — desktop only */
@media (min-width: 992px) {
    .ust-footer .footerInner,
    .ust-footer .footer-grid-main,
    .footer .footerInner {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "brand links contact";
        align-items: start;
        gap: 2.5rem;
        margin: 0 0 2rem !important;
    }
}

.ust-footer .footer-col-brand,
.ust-footer .footerLogo,
.footer .footerLogo {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    grid-area: brand;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.ust-footer .footer-col-links,
.ust-footer .footer-col-contact {
    width: 100% !important;
    max-width: 100% !important;
}

.ust-footer .footer-brand-top {
    margin-bottom: 0;
}

.ust-footer .footer-logo-wrap {
    display: inline-block;
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(191, 219, 254, 0.2);
    margin-bottom: 1.5rem;
}

.ust-footer .footer-logo-wrap .footer-logo-img,
.ust-footer .footerLogo > img {
    display: block;
    height: 4rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0;
}

.ust-footer .footer-col-links,
.ust-footer .footerLinks,
.footer .footerLinks {
    width: auto !important;
    padding: 0 !important;
    grid-area: links;
}

.ust-footer .footer-col-contact,
.ust-footer .footerContact,
.footer .footerContact {
    width: auto !important;
    padding: 0 !important;
    grid-area: contact;
}

/* Important Links always left of Contact (even if DOM order is logo → contact → links) */
.footer .footerInner > .footerContact {
    grid-area: contact !important;
}

.footer .footerInner > .footerLinks {
    grid-area: links !important;
}

.footer .footerInner > .footerLogo {
    grid-area: brand !important;
}

.ust-footer .footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    margin-top: 0;
    text-align: center;
}

.ust-footer .copyright,
.footer .copyright {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #bfdbfe;
}

/* Headings */
.ust-footer .footerHd,
.footer .footerHd {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px;
    padding: 0 0 12px;
}

.ust-footer .footerHd::after,
.footer .footerHd::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 4px;
    background: #60a5fa;
    border-radius: 999px;
}

/* Tagline pill — matches reference (img2): frosted blue capsule + green dot */
footer .footer-tagline,
.ust-footer .footer-tagline,
footer.footer .footer-tagline,
footer.footer .footer-grid .footer-tagline,
.footerLogo .footer-tagline,
.footer-col-brand .footer-tagline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 11px 22px !important;
    margin: 0 0 16px !important;
    order: 2;
    background: rgba(96, 165, 250, 0.18) !important;
    background-color: rgba(96, 165, 250, 0.18) !important;
    border: 1px solid rgba(147, 197, 253, 0.55) !important;
    border-radius: 9999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 16px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

footer .footer-tagline-dot,
.ust-footer .footer-tagline-dot,
footer.footer .footer-tagline-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50% !important;
    background: #22c55e !important;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
    animation: footer-pulse 2s ease-in-out infinite;
}

@keyframes footer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

footer .footer-tagline-text,
.ust-footer .footer-tagline-text,
footer.footer .footer-tagline-text {
    display: inline-block;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em;
    white-space: normal;
}

/* Social row — directly under tagline, never in links column */
.ust-footer .footer-col-brand .footer-social-row,
.ust-footer .footerLogo .footer-social-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0;
    order: 3;
}

.ust-footer .footer-brand-top {
    order: 1;
}

.ust-footer .footerLinks .footer-social-row,
.ust-footer .footerLinks .footer-social,
.ust-footer .footerContact .footer-social-row,
.ust-footer .footer-col-links .footer-social-row,
.ust-footer .footer-col-contact .footer-social-row {
    display: none !important;
}

.ust-footer .footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.ust-footer .footer-social-btn:hover {
    background: #3b82f6;
    border-color: #60a5fa;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    text-decoration: none;
}

.ust-footer .footer-social-btn .fa {
    font-size: 1rem;
}

/* Legacy: social in links column hidden */
.ust-footer .footerLinks .socialLink,
.footer .footerLinks .socialLink {
    display: none !important;
}

.ust-footer .footerLogo .socialLink {
    display: none !important;
}

/* Important Links */
.ust-footer .footerLink,
.footer .footerLink {
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.ust-footer .footerLink li,
.footer .footerLink li {
    padding: 0 0 14px !important;
    margin: 0;
    text-transform: none;
}

.ust-footer .footerLink li a,
.footer .footerLink li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 0 !important;
    color: #bfdbfe;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ust-footer .footerLink li a::before,
.footer .footerLink li a::before {
    content: '>' !important;
    display: inline-block !important;
    flex-shrink: 0;
    width: 12px;
    margin-right: 0;
    font-size: 14px;
    font-weight: 700;
    color: #60a5fa;
    background: none !important;
    border-radius: 0 !important;
    position: static;
    transition: transform 0.3s ease, color 0.3s ease;
}

.ust-footer .footerLink li a:hover,
.footer .footerLink li a:hover {
    color: #fff;
    text-decoration: none;
}

.ust-footer .footerLink li a:hover::before,
.footer .footerLink li a:hover::before {
    color: #fff;
    transform: translateX(3px);
}

.ust-footer .footer-link-icon,
.footer .footer-link-icon {
    display: none !important;
}

/* Contact — one row per item (override legacy .contactInfo li { width: 33% }) */
.ust-footer .contactInfo,
.ust-footer .footer-contact-list,
.footer.ust-footer .contactInfo {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.ust-footer .footer-contact-item,
.footer.ust-footer .footer-contact-item,
.ust-footer .contactInfo li,
.footer.ust-footer .contactInfo li {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 1rem !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.ust-footer .footer-contact-body {
    flex: 1;
    min-width: 0;
}

.ust-footer .footer-contact-text,
.ust-footer .footer-contact-body p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.625;
    font-weight: 400;
    color: #bfdbfe;
}

.ust-footer .contactInfo li:last-child,
.footer .contactInfo li:last-child {
    padding-bottom: 0 !important;
}

.ust-footer .footer-icon-box,
.footer .footer-icon-box,
footer .footer-contact-item .footer-icon-box {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.ust-footer .footer-contact-item:hover .footer-icon-box,
.footer .footer-contact-item:hover .footer-icon-box {
    background: #3b82f6;
}

.ust-footer .footer-icon-box .fa,
.footer .footer-icon-box .fa,
.ust-footer .footer-icon-box i,
.footer .footer-icon-box i {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    color: #93c5fd;
    transition: color 0.3s ease;
}

.ust-footer .footer-contact-item:hover .footer-icon-box .fa,
.footer .footer-contact-item:hover .footer-icon-box .fa {
    color: #fff;
}

.ust-footer .footer-contact-text a,
.footer .contactInfo li a,
.ust-footer .contactInfo li a {
    color: #bfdbfe;
    text-decoration: none;
}

.ust-footer .footer-contact-text a:hover,
.footer .contactInfo li a:hover {
    color: #fff;
    text-decoration: none;
}

/* Hide old inline imgs only when FA icon box is used */
.ust-footer .contactInfo li:has(.footer-icon-box) > img,
.footer .contactInfo li:has(.footer-icon-box) > img {
    display: none !important;
}

/* Legacy Odoo rows: icon left, text right, one item per row */
.ust-footer .contactInfo li:not(:has(.footer-icon-box)),
.footer .contactInfo li:not(:has(.footer-icon-box)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

.ust-footer .contactInfo li:not(:has(.footer-icon-box)) > img,
.footer .contactInfo li:not(:has(.footer-icon-box)) > img {
    display: block !important;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 8px;
    box-sizing: border-box;
    margin-right: 0 !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    object-fit: contain;
}

/* Prevent phone + whatsapp sharing one row */
.ust-footer .contactInfo li.full,
.footer .contactInfo li.full {
    width: 100% !important;
    max-width: 100% !important;
}

.ust-footer .contactInfo.flexBox,
.footer .contactInfo.flexBox {
    display: block !important;
    flex-wrap: nowrap !important;
}

.ust-footer .contactInfo.flexBox li,
.footer .contactInfo.flexBox li {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 992px) {
    .ust-footer .footerInner,
    .footer .footerInner,
    footer.footer .footer-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "links"
            "contact" !important;
        gap: 2rem !important;
    }

    footer.footer .footer-grid > div:nth-child(2) {
        order: 3;
    }

    footer.footer .footer-grid > div:nth-child(3) {
        order: 2;
    }
}

@media (max-width: 600px) {
    .ust-footer .footerInner,
    .footer .footerInner,
    footer.footer .footer-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "links"
            "contact" !important;
        gap: 2rem !important;
    }
}

/* ===== Odoo Website Builder footer (.footer-grid) — until template is reset ===== */
footer.footer:not(.ust-footer),
footer.footer[style],
footer.footer[style*="padding"] {
    background-color: #0056b3 !important;
    background-image: linear-gradient(to bottom right, #0a1628 0%, #0056b3 50%, #003d82 100%) !important;
    padding: 2.5rem 0 1.25rem !important;
    margin-top: 0 !important;
}

footer.footer:not(.ust-footer)::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}

footer.footer:not(.ust-footer) > .container {
    position: relative;
    z-index: 1;
    max-width: 80rem;
}

/* Website Builder .footer-grid — 3 columns desktop only */
@media (min-width: 992px) {
    footer.footer .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-areas: "brand links contact" !important;
        gap: 2.5rem !important;
        align-items: start !important;
        justify-content: space-between;
    }

    /* DOM order on live site: 1=logo, 2=contact, 3=links+social */
    footer.footer .footer-grid > div:nth-child(1) {
        grid-area: brand !important;
    }

    footer.footer .footer-grid > div:nth-child(2) {
        grid-area: contact !important;
    }

    footer.footer .footer-grid > div:nth-child(3) {
        grid-area: links !important;
    }
}

footer.footer .footer-grid h4 {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border: none;
}

footer.footer .footer-grid h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 4px;
    background: #60a5fa;
    border-radius: 999px;
}

footer.footer .footer-grid ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #bfdbfe;
}

footer.footer .footer-grid a {
    color: #bfdbfe;
    text-decoration: none;
}

footer.footer .footer-grid a:hover {
    color: #fff;
}

/* Important Links — > instead of dot (●) */
footer.footer .footer-grid > div:nth-child(3) ul {
    list-style: none !important;
}

footer.footer .footer-grid > div:nth-child(3) ul li {
    padding: 0 0 14px !important;
}

footer.footer .footer-grid > div:nth-child(3) ul li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding-left: 0 !important;
    position: relative;
    font-weight: 500;
}

footer.footer .footer-grid > div:nth-child(3) ul li a::before {
    content: '>' !important;
    display: inline-block !important;
    flex-shrink: 0;
    width: auto;
    height: auto;
    min-width: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #60a5fa;
    background: none !important;
    border-radius: 0 !important;
    position: static;
    transition: transform 0.3s ease, color 0.3s ease;
}

footer.footer .footer-grid > div:nth-child(3) ul li a:hover::before {
    color: #fff;
    transform: translateX(3px);
}

/* Brand column stack: logo → social */
footer.footer .footer-grid > div:nth-child(1),
footer.footer .footer-grid > div:nth-child(2),
footer.footer .footer-grid > div:nth-child(3) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

footer.footer .footer-grid > div:nth-child(1) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

footer.footer .footer-grid .footer-tagline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 11px 22px !important;
    margin: 0 0 16px !important;
    background: rgba(96, 165, 250, 0.18) !important;
    border: 1px solid rgba(147, 197, 253, 0.55) !important;
    border-radius: 9999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 16px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

footer.footer .footer-grid > div:nth-child(1) > img {
    max-width: 200px;
    margin-bottom: 1.5rem;
}

/* Social icon boxes — bg-white/10 + border-white/20 */
footer.footer .footer-social,
footer.footer .footer-social-row,
footer.footer .ust-moved-social {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0;
}

footer.footer .footer-social a,
footer.footer .footer-social-row a,
footer.footer .ust-moved-social a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

footer.footer .footer-social a:hover,
footer.footer .footer-social-row a:hover {
    background-color: #3b82f6 !important;
    border-color: rgba(96, 165, 250, 0.8) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

footer.footer .footer-social a img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    margin: 0;
}

/* Contact rows (enhanced by JS or ust-footer template) */
footer.footer .footer-grid .ust-contact-enhanced,
footer.footer .footer-grid .contactInfo.ust-contact-enhanced {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

footer.footer .footer-grid .footer-contact-item,
footer.footer .footer-grid .ust-contact-enhanced li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 1.25rem !important;
    margin: 0 !important;
    list-style: none !important;
}

footer.footer .footer-grid .footer-icon-box {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

footer.footer .footer-grid .footer-icon-box .fa {
    font-size: 1rem;
    color: #93c5fd;
}

footer.footer .footer-grid .footer-contact-item:hover .footer-icon-box {
    background-color: #3b82f6 !important;
}

footer.footer .footer-grid .footer-contact-item:hover .footer-icon-box .fa {
    color: #fff;
}

footer.footer .footer-grid .footer-contact-body,
footer.footer .footer-grid .footer-contact-text {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #bfdbfe;
    font-weight: 400;
}

footer.footer .footer-grid .footer-contact-text a {
    color: #bfdbfe;
    text-decoration: none;
}

footer.footer .footer-grid .footer-contact-text a:hover {
    color: #fff;
}

/* Legacy emoji list — full width until JS runs */
footer.footer .footer-grid > div:nth-child(2) ul:not(.ust-contact-enhanced) li {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding-bottom: 1rem;
}

footer.footer .footer-bottom {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #bfdbfe;
}

/* Force ust-footer layout — desktop only */
@media (min-width: 992px) {
    footer.ust-footer .footerInner .footerLogo,
    footer.ust-footer .footerInner .footerLinks,
    footer.ust-footer .footerInner .footerContact {
        width: auto !important;
        max-width: none !important;
        float: none !important;
    }
}

footer.ust-footer .contactInfo li {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
}

footer.ust-footer .footer-contact-item .footer-icon-box {
    flex-shrink: 0 !important;
}

footer.ust-footer .footer-contact-body {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

footer.ust-footer .footer-contact-body p,
footer.ust-footer .footer-contact-text {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Override legacy dot bullet on Important Links */
footer .footerLink li a:before,
footer .footerLink li a::before {
    content: '>' !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    position: static !important;
    display: inline-block !important;
    color: #60a5fa !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Journals list — brand blue fill + editable FA icon (double-click <i> in editor) */
.checkList.ust-journals-list .checkIcon,
.boxInfo .ust-journal-check-icon.checkIcon {
    --tw-bg-opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: transparent;
}

.checkList.ust-journals-list .ust-journal-fa-icon,
.checkList.ust-journals-list .checkIcon .fa-circle-check,
.checkList.ust-journals-list .checkIcon .fa-check-circle {
    --tw-bg-opacity: 1;
    color: rgb(0 86 179 / var(--tw-bg-opacity, 1));
    fill: rgb(0 86 179 / var(--tw-bg-opacity, 1));
    font-size: 1.125rem;
    line-height: 1;
}

.checkList.ust-journals-list .checkIcon svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: rgb(0 86 179 / var(--tw-bg-opacity, 1));
}

/* Research & Publication — book icon above heading */
.ust-research-publication-box .ust-research-icon-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem;
    min-height: 3rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    background-color: rgb(219 234 254) !important;
    color: rgb(0 86 179) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
}

.ust-research-publication-box .ust-research-book-svg {
    display: block !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    flex-shrink: 0;
    color: rgb(0 86 179);
    fill: rgb(0 86 179);
}

.ust-research-publication-box .ust-research-book-svg path {
    fill: currentColor;
}

/* FA fallback if used in editor */
.ust-research-publication-box .ust-research-fa-icon,
.ust-research-publication-box .ust-research-icon-wrap .fa-book-open {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: rgb(0 86 179) !important;
    display: inline-block !important;
}

.ust-research-publication-box .ust-research-icon-wrap:has(.ust-research-book-svg) .ust-research-fa-icon {
    display: none !important;
}

/* Research & Publication — stat cards + View Publications button */
.ust-research-publication-box .ust-research-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ust-research-publication-box .ust-research-stat-card {
    flex: 0 1 auto;
    max-width: 220px;
    min-width: 140px;
    background-color: #f9fafb;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #f3f4f6;
    text-align: center;
}

.ust-research-publication-box .ust-research-stat-value,
.ust-research-publication-box .ust-research-stat-card .text-3xl,
.ust-research-publication-box .ust-research-stat-card .text-primary,
.ust-research-publication-box .ust-research-stat-card span.ust-research-stat-value {
    display: block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(0 86 179) !important;
    margin-bottom: 0.25rem;
}

/* Top + 2020 numbers — force brand blue over Odoo text-primary */
.ust-research-publication-box .ust-research-stat-card .ust-research-stat-value {
    color: rgb(0 86 179) !important;
}

.ust-research-publication-box .ust-research-stat-label,
.ust-research-publication-box .ust-research-stat-card .text-xs {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ust-research-publication-box .ust-research-cta-wrap {
    margin-top: 0.25rem;
}

.ust-research-publication-box .ust-research-cta-btn {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.35rem;
    background-color: rgb(0 86 179);
    color: #fff !important;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none !important;
    border-radius: 0.5rem;
    border: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ust-research-publication-box .ust-research-cta-text,
.ust-research-publication-box .ust-research-cta-arrow {
    display: inline;
    white-space: nowrap;
}

.ust-research-publication-box .ust-research-cta-btn:hover {
    background-color: rgb(0 70 145);
    color: #fff !important;
    text-decoration: none !important;
}

.ust-research-publication-box .ust-research-cta-arrow {
    font-size: 1.125rem;
    line-height: 1;
}

.ust-research-publication-box a.readMore {
    display: none !important;
}

/* Journals — impact factor callout (award icon + blue box) */
.ust-journals-impact-callout {
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 0.5rem;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.ust-journals-impact-text {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #1e40af !important;
}

.ust-journals-impact-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: #1e40af;
}

.ust-journals-impact-icon .fa,
.ust-journals-award-svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #1e40af !important;
    fill: #1e40af !important;
}

.ust-journals-impact-copy {
    flex: 1 1 auto;
    min-width: 0;
    color: #1e40af !important;
}

.boxInfo .textBox.ust-journals-impact-pending {
    display: none !important;
}