header .header-menu-bar {
    background-color: #8C1515;
    border-bottom: 5px solid #a06717;
}

/* Default styles for menu links */
header .header-menu-bar .menu-list > li > a {
    color: #ffffff !important; /* Default text color */
    background: transparent !important; /* Default background */
    position: relative;
    transition: color 0.3s, background 0.3s;
}

/* Hover and active styles for all menu items */
header .header-menu-bar .menu-list > li:hover > a,
header .header-menu-bar .menu-list > li.active > a {
    color: #333333 !important; /* Text color for hover and active state */
    background: #ffffff !important; /* Background color for hover and active state */
    border-radius: 0.3125rem;
}

/* Submenu arrow styles */
header .header-menu-bar .menu-list > li.has-submenu > a:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: 0.3125rem solid #ffffff; /* Default arrow color */
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    transition: border-top 0.3s;
}

/* Hover and active styles for submenu arrows */
header .header-menu-bar .menu-list > li.has-submenu:hover > a:after,
header .header-menu-bar .menu-list > li.active > a:after {
    border-top: 0.3125rem solid #333333 !important; /* Arrow color for hover and active state */
}

.footer{
    background-color: #8C1515;
    border-top: 5px solid #a06717;
}

@media (min-width: 992px) {
    .card-img-slide3col {
        height: 10vw;
    }
}

/*more link*/
.more-link a {
    background-color: #eef0ef;
    color: #090b13;
    font-size: 14px;
    font-weight:400;
    border-radius: 100px;
    padding: 5px 25px;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    float: right;
    font-family: 'Athitisemibold', sans-serif;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    margin:10px;
}
.more-link a:hover {
    color: #fff;
    background-color:#ae1b1f;
    text-decoration: underline;
}

/*Headline*/
.head-line2 {
  font-weight: 400;
  border-left: 10px #EF3E36 solid;
  padding-left: 10px;
  margin-bottom: 50px;
}
.head-line2 h2 {
  color: #333333;
  font-size: 30px;
}
.head-line4, .frame-6{
  text-transform: capitalize;
  margin-bottom:10px;
  border-bottom:5px solid #8c1515;
  width: 100%;
}
.head-line4 h2, .frame-6 h2{
  color:#232931;
  font-size:2rem;
  /*margin-bottom:-20px;*/
}
.head-line4 h3, .frame-6 h3{
  border-bottom:0px;
    font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
  margin-bottom:0;
}

/*Hover Image*/
.hover-image img , .frame-18 img{

}
.hover-image img:hover , .frame-18 img:hover {
  transition: 1s ease;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.05);
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

header .header-primary .action-menu-list .action-menu-item a.primary-link,
header .header-primary .action-menu-list .action-menu-item button.primary-link {
    background-color: #cf2d1e;
}
header .header-primary .action-menu-list .action-menu-item a,
header .header-primary .action-menu-list .action-menu-item button {
    border: 0.0625rem solid #cf2d1e;
    color:#cf2d1e
}

.tx-mfunewsletter figure figcaption, .tx-mfuissue figure figcaption {
    background: #00adb5;
}

.frame-1 ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.frame-1 li a{
  display: block;
  color: #000;
  font-size: 16px;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #dddddd;
  border-radius: 5px;
  margin-bottom:5px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.frame-1 li a:hover{
    background-color: #8c1515;
    border: 1px solid #8c1515;
  color: white;
}

.frame-2 ul{
    list-style-type: none;
    font-size: 1.1rem;
    line-height:20pt;
    margin: 0;
    padding:0;
    width: 100%;
}
.frame-2 ul li a {
    font-family: "athitisemibold", sans-serif;
    display: block;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 30px;
    color: #3D3736;
    background-color: #F9F7E1;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: all 0.3s;
}
.frame-2 li a:hover{
  background-color:#ae1b1f;
  color:#ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* * Professional Degree Card Styles 
 * Integrated with provided HTML structure
 * -------------------------------------------
 */

.container-card {
    position: relative;
    width: 100%;
    overflow: hidden; 
    border-radius: 24px; /* Soft, modern rounded corners */
    background: #ffffff;
    /* Subtle shadow for depth */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    margin-bottom:40px;
}

/* Ensure the anchor covers the whole card */
.container-card a {
    text-decoration: none;
    display: block;
}

.image-card {
    display: block;
    width: 100%;
    height: auto;
    padding: 12%; /* Spacing around the degree icon */
    transition: transform 0.6s ease;
}

.overlay-card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    
    /* Modern Red Gradient Overlay */
    background: linear-gradient(135deg, rgba(207, 45, 30, 0.9) 0%, rgba(142, 28, 18, 0.95) 100%);
    backdrop-filter: blur(4px); /* Trendy glass-blur effect */
}

/* --- Interaction States --- */

.container-card:hover {
    transform: translateY(-8px); /* Card lift effect */
    box-shadow: 0 20px 40px rgba(207, 45, 30, 0.15); /* Warm red shadow */
}

.container-card:hover .image-card {
    transform: scale(1.05); /* Slight zoom for focus */
    filter: blur(2px); /* Blur original image slightly when overlay appears */
}

.container-card:hover .overlay-card {
    opacity: 1;
}

.text-card {
    color: #ffffff;
    font-size: 1.5rem; /* Adjusted for better proportion */
    font-family: 'athitisemibold', sans-serif;
    text-align: center;
    padding: 15px 25px;
    border: 2px solid rgba(255, 255, 255, 0.3); /* White outline for the button look */
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    
    /* Animation: Slide text up from bottom */
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.container-card:hover .text-card {
    transform: translateY(0);
}

/* For smaller screens */
@media (max-width: 768px) {
    .text-card {
        font-size: 1.2rem;
        padding: 10px 20px;
    }
}

/* faq */
.tx-jpfaq ul {
  padding: 10px 0;
  clear: both;
}
.tx-jpfaq li h3 {
  border: 0;
  background: #F2EBDA;
  padding: 8px 20px;
  display: block;
  font-size: 18px;
  color: #61481C;
}
.tx-jpfaq li h3.questionUnfolded {
  background: #A47E3B;
  color:#ffffff;
}
.tx-jpfaq li h3:hover {
  background: #A47E3B;
  color:#ffffff;
  transition-duration: 0.4s;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.tx-jpfaq li .jpfaqAnswer ul {
  padding: 0 0 0 40px;
}
.tx-jpfaq li .jpfaqAnswer ul li {
  list-style: disc;
  margin: 0;
}
.tx-jpfaq li .jpfaqAnswer ol li {
  list-style: decimal;
  margin: 0;
}
.jpfaqAnswer {
  font-family: 'Pridi', sans-serif;
  padding: 10px 25px;
  border: 1px solid #213253;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.tx-jpfaq .jpfaqAll {
  position: relative;
}
.tx-jpfaq .jpfaqShowAll, .tx-jpfaq .jpfaqHideAll {
  float: right;
}

.header-page {
    font-size: 4em;
    font-weight: 600;
    border-left: 25px #ae1b1f solid;
    padding-left: 10px;
}

/*Social media*/
footer .social-media-list, .social-media-list{
    margin-bottom:100px;
    /*float:left;*/
}
footer .social-media-list ul , .social-media-list ul{
    float: left;
}
footer .social-media-list ul li a , .social-media-list ul li a{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
footer .social-media-list ul li a.facebook , .social-media-list ul li a.facebook{
    background:#4267B2;
}
footer .social-media-list ul li a.youtube , .social-media-list ul li a.youtube{
    background:#FF0000;
}
footer .social-media-list ul li a.twitter , .social-media-list ul li a.twitter{
    background:#14171A;
}
footer .social-media-list ul li a.instagram , .social-media-list ul li a.instagram{
    background:#FCAF45;
}
footer .social-media-list ul li a:hover , .social-media-list ul li a:hover{
    background:#333333;
}

.slick-slider .slick-dots li button {
    width: 2rem;
    height: 2rem;
}

@media (min-width: 992px) {
    header .header-primary {
        padding:0;
    }
}

.accordion-button.collapsed, .accordion-button:not(.collapsed) {
    font-size: 1rem;
    color:#FFFFFF;
    background:#8c1515;
}
.accordion-item {
    margin-bottom:8px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #FFFFFF;
    background-color: #8c1515;
    border-bottom: 5px solid #8c1515;
    border-color: #8c1515;
}
/*
 * Modern Pill/Capsule Tab Styles
 * -------------------------------------------
 */
.df-tab {
    padding: 10px 0;
}

.nav-tabs {
    border-bottom: none !important; /* Remove default bottom border */
    background-color: #f0f0f0;    /* Faint background for the tab track */
    padding: 6px;
    border-radius: 50px;           /* Create the oval capsule shape */
    display: inline-flex !important; /* Shrink-wrap the container around buttons */
    gap: 5px;
    width: 100%;
}

.nav-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    color: #555555 !important;
    font-family: 'athitimedium', sans-serif;
    font-size: 1.2rem !important;
    padding: 10px 25px !important;
    border-radius: 40px !important; /* Rounded buttons to match the track */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* --- Active State: White capsule with red text --- */
.nav-tabs .nav-link.active {
    color: #CF2D1E !important;
    background-color: #ffffff !important; /* Button pops up with a white background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Add depth with a subtle shadow */
    font-family: 'athitisemibold', sans-serif;
}

/* --- Hover State: Slightly brighter background --- */
.nav-tabs .nav-link:hover:not(.active) {
    color: #333333 !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px); /* Subtle lift effect for feedback */
}

/* Adjust spacing for the content below the tabs */
.tab-content {
    padding-top: 15px;
}

/* Responsive Styles */
@media (max-width: 576px) {
    .nav-tabs {
        display: flex !important;
        width: 100%;
        justify-content: center;
    }
    .nav-tabs .nav-link {
        font-size: 0.95rem;
        padding: 8px 15px !important;
        flex: 1; /* Allow buttons to expand equally on mobile */
        text-align: center;
    }
}

/* * Modern News List Styles 
 * -------------------------------------------
 */

/* Container for each news item */
.news-list-item .article {
    padding: 10px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent; /* Prepare for hover effect */
    background-color: transparent;
}

/* Hover effect on the entire article block */
.news-list-item .article:hover {
    background-color: #f9f9f9;
    border-left: 4px solid #8c1515; /* Highlight with MFU Red */
    padding-left: 20px; /* Subtle sliding effect */
}

/* Date section */
.news-list-date {
    font-family: 'athitlight', sans-serif;
    font-size: 0.8rem;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.news-list-date i {
    color: #CF2D1E; /* Red calendar icon */
    font-size: 0.85rem;
}

/* Headline Link */
.link-news {
    font-family: "athitimedium", sans-serif;
    font-size: 1.15rem !important;
    line-height: 1.4;
    color: #333333 !important;
    transition: color 0.2s ease;
    text-decoration: none;
    display: block;
}

/* Link Hover State */
.article:hover .link-news {
    color: #CF2D1E !important;
}

/* Remove default underline from anchor */
.news-list-item a.d-block {
    text-decoration: none !important;
}

/* Spacing between items */
.article.mb-3 {
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.article.mb-3:last-child {
    border-bottom: none;
}

.mfu-countdown-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 30px 10px;
    font-family: 'athitisemibold', sans-serif;
}

.countdown-item {
    background: linear-gradient(145deg, #cf2d1e, #b02418);
    color: #ffffff;
    width: 85px;
    padding: 15px 5px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(207, 45, 30, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-item span {
    font-size: 2.2rem; 
    display: block;
    line-height: 1;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.countdown-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-top: 8px;
    letter-spacing: 1px;
    opacity: 0.9;
    font-weight: normal;
}

@media (max-width: 576px) {
    .mfu-countdown-container {
        gap: 8px;
    }
    .countdown-item {
        width: 70px;
        padding: 12px 5px;
        border-radius: 12px;
    }
    .countdown-item span {
        font-size: 1.6rem;
    }
    .countdown-item .label {
        font-size: 0.65rem;
    }
    .countdown-header h2 {
    font-size: 1rem;
}
}
.countdown-wrapper {
    text-align: center;
    padding: 40px 20px;
    background: #ffffff; 
    border-radius: 20px;
}

.countdown-header h2 {
    color: #cf2d1e;
    font-family: 'athitisemibold', sans-serif;
    letter-spacing: 3px;
    margin-bottom: 5px;
    font-size: 3rem;
}

.countdown-header p {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.countdown-footer p {
    margin-top: 20px;
    color: #888;
    font-size: 1rem;
}