/*=========================
    Start Custom CSS
===========================*/

:root {
    /*--dark-grey: #373737;*/
    --dark-grey-background: var(--palette-6);
    --dark-grey-text: var(--palette-12);
    /*--custom-blue: var(--palette-1);*/

    /*
    palette-1 is used for:
    - background of footer-top
     */
    --palette-1: #1a76d1;  /* blue */
    --palette-2: #198754;  /* green */
    --palette-3: #dc3545;  /* red */
    --palette-4: #ffc107;  /* yellow */
    --palette-5: #0dcaf0;  /* cyan/info */
    --palette-6: #ffffff;  /* light */
    --palette-7: #000000;  /* dark */
    --palette-8: #6610f2;  /* purple or accent */

    --palette-9: #dff5e8; /* light green used for background */

    --palette-10: #fdfdfd; /* light grey used for background */
    --palette-11: #edf2ff; /* lighter grey used for background */
    --palette-12: #2c2d3f; /* darker grey used for background */
    --palette-13: #888888; /* dark grey used for background */

    --palette-14: #1769BB; /* darker blue used for the background of footer > .footer-top */
    --palette-15: #1a75cf; /* lighter blue used for the background of footer > .copyright */
    --palette-16: #eeeeee; /* light color used for .header .topbar border-bottom */
    --palette-17: #f9f9f9;
    --palette-18: #868686; /* used for the icofont in the 'department-tab tab-menu container' */

    /* ---- Semantic tokens (map to palette) ----
       These are the variables you'll consume across the whole CSS.
    */
    --primary: var(--palette-1);
    --secondary: var(--palette-6);
    --secondary-alt: var(--palette-17);
    --success: var(--palette-2);
    --danger: var(--palette-3);
    --warning: var(--palette-4);
    --info: var(--palette-13);
    --light: var(--palette-11);
    --dark: var(--palette-7);
    --accent: var(--palette-8);

    /* ---- Contrast / on-* variables (text color on top of the semantic color) */
    --on-primary: var(--palette-6);
    --on-secondary: var(--palette-13);
    --on-success: var(--palette-6);
    --on-danger: var(--palette-6);
    --on-warning: var(--palette-12); /* dark text on yellow */
    --on-info: var(--palette-16);
    --on-light: var(--palette-12);
    --on-dark: var(--palette-6);
    --on-accent: var(--palette-6);

    --light-border: var(--palette-16);
    --button-active-background: var(--palette-16);
    --button-active-text: var(--palette-12);
    --btn-secondary: var(--palette-13);
    --on-btn-secondary: var(--palette-10);
}

.on-primary {
    color: var(--on-primary) !important;
}

.on-secondary {
    color: var(--on-secondary) !important;
}

.on-success {
    color: var(--on-success) !important;
}

.on-danger {
    color: var(--on-danger) !important;
}

.on-warning {
    color: var(--on-warning) !important;
}

.on-info {
    color: var(--on-info) !important;
}

.on-light {
    color: var(--on-light) !important;
}

.on-dark {
    color: var(--on-dark) !important;
}

.on-accent {
    color: var(--on-accent) !important;
}

.section:nth-child(odd) {
    background-color: var(--light);
}

.section:nth-child(even) {
    background-color: var(--secondary-alt);
}

.header, .header-inner, .header .nav li .dropdown {
    background: var(--secondary) !important;
    color: var(--on-light);
}

.header .nav > li a, .header .nav li .dropdown li a {
    color: var(--on-light);
}

.section .section-justified {
    padding: inherit;
}

.section .section-justified p {
    text-align: justify;
}

.departments .department-tab .nav li {
    margin-right: inherit;
    margin-left: 0;
}

.slider .single-slider img {
    filter: brightness(50%);
}

.owl-item.active .single-slider h1, .slider .single-slider p {
    color: var(--on-primary) !important;
    background-color: unset !important;
    border-top: unset !important;
}

.single-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Darken the background with 50% opacity */
    z-index: 1; /* Place it behind the text and buttons */
}

.single-slider .container {
    position: relative;
    z-index: 2; /* Make sure the text and buttons are above the overlay */
}

.blog {
    background: inherit;
}

.header .logo {
    padding-top: 1.1rem;
}

.breadcrumbs.education {
    background-image: url('/img/bread-bg.png');
}

.breadcrumbs.staff {
    background-image: url('/img/bread-bg.png');
}

.breadcrumbs.publications {
    background-image: url('/img/bread-bg.png');
}

.breadcrumbs.broadcasts {
    background-image: url('/img/bread-bg.png');
}

.breadcrumbs.contacts {
    background-image: url('/img/bread-bg.png');
}

.doctor-details-biography .publication-paper {
    font-size: 1.2rem;
}

.single-publication h6 {
    color: var(--dark-grey-text);
}

.single-publication strong {
    color: var(--dark-grey-text);
}

.pagination {
    text-align: left;
    margin: initial;
    display: flex;
}

.page-link.active, .active > .page-link {
    color: var(--button-active-text);
    background: var(--button-active-background);
    border-color: var(--bs-pagination-border-color);
}

.pagination .page-link, .pagination .active.page-link {
    color: var(--on-secondary);
}

.author-thumbnail {
    /*position: absolute;*/
    /*left: 2.14rem;*/
    /*bottom: -26px;*/
    height: 53px;
    width: 53px;
    border-radius: 100%;
}

.btn-secondary {
    background-color: var(--btn-secondary);
    color: var(--on-btn-secondary);
}

.btn-info {
    background-color: var(--info);
    color: var(--on-info);
}

.hero-slider .btn.btn-success {
    background-color: var(--success);
    color: var(--on-success);
}

.hero-slider .btn.btn-secondary {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

.hero-slider .btn.btn-info {
    background-color: var(--info);
    color: var(--on-info);
}

.logo img {
    margin-top: -0.7rem;
}

.department-tab.tab-menu .icofont {
    font-size: 3rem;
}

.departments .department-tab .nav .list-group-item {
    margin: 0;
}

.departments .department-tab .nav .list-group-item .first,
.departments .department-tab .nav .list-group-item .second,
.departments .department-tab .nav .list-group-item .third {
    font-size: 0.9rem;
    line-height: 1rem;
}

.departments .department-tab .nav .list-group-item .first {
    padding-top: 1rem;
}

.departments .department-tab .nav .list-group-item .icofont {
    font-size: 2.5rem;
    color: var(--palette-18);
}

.why-choose .choose-right {
    background-size: contain;
    height: 100%;
    margin-top: 0;
}

/* the background is definitely too bright on mobile. wth? this fix affects these screen sizes: */
@media only screen and (max-width: 450px) {
    .why-choose .choose-right {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .logo img {
        height: 3rem;
        margin-top: -0.3rem;
    }

    .why-choose .choose-right {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .logo img {
        height: 3rem;
    }

    .why-choose .choose-right {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    .logo img {
        height: 4rem;
    }
}

.slider .single-slider:before {
    background: #333;
    opacity: 0.7;
}

.owl-controls {
    display: none !important; /* Can be removed later */
}

/*=========================
    End Custom CSS
===========================*/

.language-switcher, .language-switcher .btn {
    background: none;
}

.header .nav li .language-flag a::before {
    background: none;
    height: 0;
    border-radius: 0;
    position: initial;
}

.language-flag {
    width: 32px;    /* Resize flag to 24px width */
    height: 24px;   /* Keep aspect ratio by setting height to match width */
    /*object-fit: cover;  !* Ensure flag images fit nicely without distortion *!*/
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 5px;
    z-index: 100;
    width: 150px;   /* Set a reasonable width for the dropdown */
}

.language-dropdown li {
    padding: 5px;
}

.language-dropdown li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.language-dropdown li a:hover {
    /*color: #007bff;*/
}

.language-dropdown img {
    margin-right: 8px;  /* Space between flag and text */
}

/*.fib, .fi {*/
/*    background-size: contain;*/
/*    background-position: 50%;*/
/*    background-repeat: no-repeat*/
/*}*/

/*.fi {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    width: 1.333333em;*/
/*    line-height: 1em*/
/*}*/

/*.fi:before {*/
/*    content: " "*/
/*}*/

/*.fi.fis {*/
/*    width: 1em*/
/*}*/

/*.fi-it {*/
/*    background-image: url(/img/flags/4x3/it.svg)*/
/*}*/

/*.fi-it.fis {*/
/*    background-image: url(/img/flags/1x1/it.svg)*/
/*}*/

/*.fi-us {*/
/*    background-image: url(/img/flags/4x3/us.svg)*/
/*}*/

/*.fi-us.fis {*/
/*    background-image: url(/img/flags/1x1/us.svg)*/
/*}*/