@charset "UTF-8";
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Josefin Sans",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #ffffff; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #ffffff; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #2f5d50; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
:root {
    --nav-color: rgba(255, 255, 255, 0.6); /* The default color of the main navmenu links */
    --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #1F567C; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #1F567C; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
.light-background {
    --background-color: #4CB5AB;
    --surface-color: #ffffff;
}
.dark-background {
    --background-color: #1F567C;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #2e2b28;
    --contrast-color: #ffffff;
}
:root {scroll-behavior: smooth;}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font);}
a {color: var(--accent-color); text-decoration: none; transition: 0.3s;}
a:hover {color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none;}
h1,h2,h3,h4,h5
.h6 {color: var(--heading-color);font-family: var(--heading-font);}
.h7 {color: var(--heading-color);font-family: var(--heading-font);}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {--background-color: #2A5E83;--heading-color: #ffffff; color: var(--default-color); transition: all 0.5s; z-index: 997; background-color: var(--background-color);}
.header .topbar {background-color: var(--background-color); height: 40px;padding: 0;font-size: 14px;transition: all 0.5s;}
.header .topbar .contact-info i {font-style: normal; color: var(--contrast-color);}
.header .topbar .contact-info i a,.header .topbar .contact-info i span {padding-left: 5px; color: var(--contrast-color);}
@media (max-width: 575px) 
{
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {font-size: 13px;}
}
.header .topbar .contact-info i a {line-height: 0;transition: 0.3s;}
.header .topbar .contact-info i a:hover {color: var(--contrast-color); text-decoration: underline;}
.header .topbar .social-links a {color: color-mix(in srgb, var(--contrast-color), transparent 40%); line-height: 0;transition: 0.3s;margin-left: 20px;}
.header .topbar .social-links a:hover {color: var(--contrast-color);}
.header .branding {min-height: 60px; padding: 10px 0;}
.header .logo {line-height: 1;}
.header .logo img {max-height: 36px; margin-right: 8px;}
.header .logo h1 {font-size: 30px; margin: 0; font-weight: 700; color: var(--heading-color);}
.scrolled .header {box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);}
.scrolled .header .topbar {height: 0;visibility: hidden;overflow: hidden;}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */

@media (min-width: 1200px)
{
.navmenu {padding: 0;}
.navmenu svg {height: 16px; padding-right: 10px;}
.navmenu ul { margin: 0;padding: 0;display: flex;list-style: none;align-items: center;}
.navmenu li {position: relative;}
.navmenu a, .navmenu a:focus {color: var(--nav-color); padding: 18px 15px; font-size: 15px; font-family: var(--nav-font);font-weight: 400; display: flex;align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s;}
.navmenu a i,
.navmenu a:focus i {font-size: 12px;line-height: 0;margin-left: 5px;transition: 0.3s;}
.navmenu li:last-child a {padding-right: 0;}
.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {color: var(--nav-hover-color);}
.navmenu .dropdown ul {margin: 0;padding: 10px 0; background: var(--nav-dropdown-background-color); display: block; position: absolute; visibility: hidden; left: 14px; top: 130%; opacity: 0;transition: 0.3s; border-radius: 4px;  z-index: 99; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);  }
.navmenu .dropdown ul li { min-width: 200px;}
.navmenu .dropdown ul a {padding: 10px 20px;font-size: 15px;text-transform: none;color: var(--nav-dropdown-color);}
.navmenu .dropdown ul a i {font-size: 12px;}
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover>a {color: var(--nav-dropdown-hover-color);}
.navmenu .dropdown:hover>ul {opacity: 1;top: 100%;visibility: visible;}
.navmenu .dropdown .dropdown ul {top: 0;left: -90%;visibility: hidden;}
.navmenu .dropdown .dropdown:hover>ul {opacity: 1; top: 0; left: -100%;visibility: visible;}
}
/* Navmenu - Mobile */
@media (max-width: 1199px) 
{
.mobile-nav-toggle {color: var(--nav-color);font-size: 28px;line-height: 0;margin-right: 10px;cursor: pointer;transition: color 0.3s;}
.navmenu {padding: 0;z-index: 9997;}
.navmenu svg {height: 16px;padding-right: 10px;}
.navmenu ul {display: none;list-style: none;position: absolute;inset: 60px 20px 20px 20px;padding: 10px 0;margin: 0;border-radius: 6px;background-color: var(--nav-mobile-background-color);overflow-y: auto;transition: 0.3s;z-index: 9998;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);}
.navmenu a,
.navmenu a:focus {color: var(--nav-dropdown-color);padding: 10px 20px;font-family: var(--nav-font);font-size: 17px;font-weight: 500;display: flex;align-items: center;justify-content: space-between;white-space: nowrap;transition: 0.3s;}
.navmenu a i,
.navmenu a:focus i {font-size: 12px;line-height: 0;margin-left: 5px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: 0.3s;background-color: color-mix(in srgb, var(--accent-color), transparent 90%);}
.navmenu a i:hover,
.navmenu a:focus i:hover {background-color: var(--accent-color); color: var(--contrast-color);}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {color: var(--nav-dropdown-hover-color);}
.navmenu .active i,
.navmenu .active:focus i {background-color: var(--accent-color);color: var(--contrast-color);transform: rotate(180deg);}
.navmenu .dropdown ul {position: static;display: none;z-index: 99;padding: 10px 0;margin: 10px 20px;background-color: var(--nav-dropdown-background-color);border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);box-shadow: none;transition: all 0.5s ease-in-out;}
.navmenu .dropdown ul ul {background-color: rgba(33, 37, 41, 0.1);}
.navmenu .dropdown>.dropdown-active {display: block; background-color: rgba(33, 37, 41, 0.03);}
.mobile-nav-active {overflow: hidden;}
.mobile-nav-active .mobile-nav-toggle {color: #fff;position: absolute;font-size: 32px;top: 15px;right: 15px;margin-right: 0;z-index: 9999;}
.mobile-nav-active .navmenu {position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8);transition: 0.3s;}
.mobile-nav-active .navmenu>ul {display: block;}
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {color: var(--default-color);background-color: var(--background-color);font-size: 14px;position: relative;}
.footer .footer-top {background-color: color-mix(in srgb, var(--background-color), white 5%);padding-top: 50px;}
.footer .footer-about .logo {line-height: 1; margin-bottom: 25px;}
.footer .footer-about .logo img {max-height: 40px;margin-right: 6px;}
.footer .footer-about .logo span {color: var(--heading-color);font-family: var(--heading-font);font-size: 26px;font-weight: 700;letter-spacing: 1px;}
.footer .footer-about p {font-size: 14px;font-family: var(--heading-font);}
.footer h4 {font-size: 16px;font-weight: 600; position: relative; padding-bottom: 12px; margin-bottom: 15px;}
.footer h4::after {content: ""; position: absolute; display: block; width: 20px; height: 2px; background: var(--accent-color); bottom: 0; left: 0;}
.footer .footer-links {margin-bottom: 30px;}
.footer .footer-links ul {list-style: none; padding: 0; margin: 0;}
.footer .footer-links ul i {padding-right: 2px; font-size: 12px; line-height: 0;}
.footer .footer-links ul li {padding: 10px 0; display: flex; align-items: center;}
.footer .footer-links ul li:first-child {padding-top: 0;}
.footer .footer-links ul a {color: color-mix(in srgb, var(--default-color), transparent 30%); display: inline-block; line-height: 1;}
.footer .footer-links ul a:hover {color: #ffffff;}
.footer .footer-contact p {margin-bottom: 5px;}
.footer .copyright {padding: 30px 0;}
.footer .copyright p {margin-bottom: 0;}
.footer .credits {margin-top: 5px; font-size: 13px;}
.footer .social-links a {font-size: 18px; display: inline-block;background: color-mix(in srgb, var(--default-color), transparent 92%);color:#ffffff;line-height: 1;padding: 8px 0;margin-right: 4px;  border-radius: 4px; text-align: center; width: 36px; height: 36px; transition: 0.3s;}
.footer .social-links a:hover {color:#2A5E83; background: #ffffff; text-decoration: none;}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {position: fixed;inset: 0;z-index: 999999;overflow: hidden;background: var(--background-color);transition: all 0.6s ease-out;}
#preloader:before {content: ""; position: fixed;top: calc(50% - 30px);left: calc(50% - 30px);border: 6px solid #ffffff; border-color: var(--accent-color) transparent var(--accent-color) transparent; border-radius: 50%; width: 60px; height: 60px; animation: animate-preloader 1.5s linear infinite;}
@keyframes animate-preloader {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
/*--------------------------------------------------------------*/

.custom-carousel {border: 2px solid #dee2e6; border-radius: 15px;overflow: hidden;box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.custom-carousel img {border-radius: 15px;}
@media (max-width: 765px) {.custom-carousel{margin-bottom:20px;}}
.profile {border-radius: 25px; overflow: hidden; border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin: auto; min-height:412px;}
.profile-header {background: #2A5E83;height: 150px;position: relative;}
.profile-img {width: 160px;height: 160px;border-radius: 50%;border: 6px solid #FF741F;position: absolute;left: 50%;bottom: -65px;transform: translateX(-50%);}
.btn-custom {background: #2A5E83;color: #fff;border-radius: 10px;padding: 8px 24px;}
.btn-custom:hover {color: #fff; background: #2A5E83; opacity:75%;}
.rounded-card {border-radius: 20px; border: none;}
@media (max-width: 765px) {.profile {margin-bottom: 20px;}}

.captcha {border: #000 solid 1px;border-radius: 4px;background: url(../img/captcha.png) left top repeat;padding:3px;text-align: center;font-size: 20px;color: #fff;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;letter-spacing: 3px;}
@media (max-width: 765px) {.captcha {width: 100%;}}
@media (max-width: 1199px){.captcha {width: 100%;}}

.degree {box-shadow: 5px 10px 18px #888888;height: 120px; background-color: #1E8773; color: #fff; border: #1E8773 solid 1px; border-radius: 10px; text-align:center; padding-top:10px;}
.degree img {width: 50px; height: 60px;}
.degree:hover {background-color: #28A28B; color: #fff;}

.mkst {box-shadow: 5px 10px 18px #888888;height: 120px; background-color: #006D77; color: #fff; border: #006D77 solid 1px; border-radius: 10px; text-align:center; padding-top:10px;}
.mkst img {width: 50px; height: 60px;}
.mkst:hover {background-color: #0198A6; color: #fff;}

.prov {box-shadow: 5px 10px 18px #888888;height: 120px; background-color: #EDA12E; color: #fff; border: #EDA12E solid 1px; border-radius: 10px; text-align:center; padding-top:10px;}
.prov img {width: 50px; height: 60px;}
.prov:hover {background-color: #E3AD5B; color: #fff;}

.migr {box-shadow: 5px 10px 18px #888888;height: 120px; background-color: #CD367A; color: #fff; border: #CD367A solid 1px; border-radius: 10px; text-align:center; padding-top:10px;}
.migr img {width: 50px; height: 60px;}
.migr:hover {background-color: #DF4289; color: #fff;}

.notice {min-height: 412px;}
.fas{margin-right:4px !important; /*override*/}
.pagination .fas{margin-right:0px !important; /*override*/}
.pagination a{color:#fff;}
.card ul{padding:0px;margin:0px;list-style:none;}
.news-item {padding:4px 4px;margin:0px;border-bottom:1px dotted #555;width:100%;font-size:13px;}
.news-item a {height:100px;width:100%;}