/* Topbar CSS Start here*/

/* ===============================
   TOPBAR CSS - FINAL WITH BLINK
=================================*/

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* ===== WRAPPER ===== */
.topbar-wrapper {
    background: #173b8d;
    width: 100%;
}

/* ===== MAIN BAR ===== */
.top-bar {
    display: flex;
    align-items: center;
    height: 60px;
    padding-left: 25px;
    width: 100%;
}

/* ===== LEFT CONTACT ===== */
.contact-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    white-space: nowrap;
}

.contact-info a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* ===== PHONE ICON CIRCLE ===== */
.phone-circle {
    width: 40px;
    height: 40px;
    background: #ff7a2f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-circle i {
    color: #ffffff;
    font-size: 16px;
    transform: rotate(-15deg);
}

/* ===== RIGHT SECTION ===== */
.right-section {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* ===== STUDENT LOGIN BUTTON ===== */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 26px;
    border: 2px solid #ffffff;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    margin-right: 20px;
    transition: all 0.3s ease;
    min-height: 44px;
}

.login-btn img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.login-btn:hover {
    background: #ffffff;
    color: #173b8d;
}

/* ===== ADMISSION RIBBON (BLINK RED ↔ ORANGE) ===== */
.apply-btn {
    color: #fff;
    padding: 0 35px;
    display: flex;
    align-items: center;
    height: 60px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    animation: blinkBg 1.2s infinite alternate ease-in-out;
    transition: all 0.3s ease;
}

/* ===== BLINK ANIMATION ===== */
@keyframes blinkBg {
    0% {
        background-color: #ff0000;   /* Red */
    }
    100% {
        background-color: #ff7a2f;   /* Orange */
    }
}

/* Optional: Stop blink on hover */
.apply-btn:hover {
    animation: none;
    background-color: #ff7a2f;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {

    .top-bar {
        flex-direction: column;
        height: auto;
        padding: 12px;
        gap: 10px;
        text-align: center;
    }

    .right-section {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
        gap: 10px;
    }

    .login-btn {
        margin-right: 0;
    }

    .apply-btn {
        width: 100%;
        justify-content: center;
        height: 50px;
    }
}


/* Empower Your Future With CSS Start here*/

.muwhy-wrapper-main {
  background: #ffffff;
  padding: 40px 20px 80px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.muwhy-container {
  max-width: 1180px;
  margin: auto;
}

/* ===== HEADING ===== */
.muwhy-heading {
  font-size: 42px;
  font-weight: 700 !important;
  color: #020334;
  margin-bottom: 15px;
}

.muwhy-subheading {
  font-size: 18px;
  color: #1a1a1a;
  max-width: 760px;
  margin: 0 auto 70px;
  line-height: 1.7;
}

/* ===== GRID ===== */
.muwhy-grid-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* ===== CARD ===== */
.muwhy-card-box {
  background: #fff;
  border-radius: 24px;
  padding: 70px 20px 38px;
  border: 2px solid #214a9a;
  position: relative;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transition: all .35s ease, background .3s ease, color .3s ease;
}

/* ===== HOVER EFFECT (only blue on hover) ===== */
.muwhy-card-box:hover {
  background: #214a9a;
  border-color: #214a9a;
  transform: translateY(-10px);
  box-shadow: 0 22px 40px rgba(0,0,0,0.14);
}

.muwhy-card-box:hover h3 {
  color: #fff;
}

/* ===== ICON ===== */
.muwhy-icon-box {
  width: 86px;
  height: 86px;
  background: #f36c2f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -43px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid #fff;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition: all .3s ease;
}

.muwhy-icon-box i {
  font-size: 30px;
}

/* ===== TEXT ===== */
.muwhy-card-box h3 {
  font-size: 23px;
  font-weight: 600;
  color: #222;
  line-height: 1.35;
  margin: 0;
  transition: color .3s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .muwhy-grid-box {
    grid-template-columns: repeat(2, 1fr);
  }

  .muwhy-heading {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .muwhy-grid-box {
    grid-template-columns: 1fr;
  }

  .muwhy-heading {
    font-size: 26px;
  }

  .muwhy-subheading {
    font-size: 15px;
  }
}

/* ===== Rana section ===== */
.about__area {background: #F0F6FF; padding:30px 0px;}
.hero4__image{    position: relative;
    padding: 20px;

}
.about__area .about__content{ padding-top:0px !important}
.about__content{ padding-left:30px!important }
.about__content p{ margin-bottom:13px }
.about__area .about__content .about__title{ font-size:36px !important}
.watchNow88{ display:block; margin:15px auto; border-radius: 40px; max-width:120px}

.why-point {
    position: relative;
    padding-left: 32px; /* little more breathing space */
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 1.7;
    color: #1a1a1a;
}

/* diamond bullet */
.why-point::before {
    content: "";
    position: absolute;
    left: 6px; /* centers visually */
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background-color: #1f3f8b;
    border-radius: 1px; /* smoother edges */
}


 /* =====================================================
    Button filter ug/pg courses basic CSS
   ===================================================== */
.course-tabs {
    display: flex;
    background: #e9e9e9;
    border-radius: 40px;
    overflow: hidden;
    max-width: 700px;
    margin: 0 auto;
    border: 1.5px solid #d0d5dd;
    position: relative;
}

/* =====================================================
   BUTTON BASE
   ===================================================== */
.filter-btn {
    flex: 1;
    padding: 18px 22px;
    border: none;
    background: transparent;
    color: #222;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    z-index: 1; /* ⭐ ensures clickable */
}

/* divider */
.filter-btn:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: #d0d5dd;
    pointer-events: none; /* ⭐ VERY IMPORTANT */
}

/* active */
.filter-btn.active {
    background: #1f3f8b;
    color: #fff;
}

.filter-btn.active::after {
    display: none;
}

/* hover */
.filter-btn:hover:not(.active) {
    background: #dcdcdc;
}

/* =====================================================
   📱 MOBILE — SCROLL MODE
   ===================================================== */
@media (max-width: 576px) {

    .course-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        max-width: 100%;
        border-radius: 30px;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px; /* ⭐ improves touch */
        flex-direction: column;
    }

    .filter-btn {
        flex: 0 0 auto;
        padding: 14px 18px;
        font-size: 14px;
    }

    /* hide scrollbar */
    .course-tabs::-webkit-scrollbar {
        display: none;
    }
}
.back__course__area .course__item .back-course-title{    margin: 14px 0 15px;}
.back__course__area .course__item .back-course-title a{ color:#183985; }
.back__course__area .course__item{    border-radius: 44px;
    overflow: hidden;}

/* ===== Discover our accredited Apply Button section ===== */

 .apply-now-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 7px 25px;
    background: #f36c21;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/*  Hover effect */
.apply-now-btn:hover {
    background: #d9540f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}


/*  Faqs tab bg color code */ 

    .accordion__area .accordion-button {
    background-color: #ffffff;
}


/* Explore Best Online filter - Apply now and learn more button mobile responsive */ 


.back__course__area .course__item .course__inner {
    padding: 32px 25px 35px;
}

@media (max-width: 380px) {
    .back__course__area .course__item .course__inner {
        padding: 20px 15px 25px;
    }
}


/* ===== About Mangalayatan University CSS Code Start ===== */
.why-mu-section{
    background:#ffffff;
    padding:70px 20px;
    text-align:center;
}

.why-mu-section .container{
    max-width:1100px;
    margin:auto;
}

.why-mu-section h2{
    font-size:40px;
    font-weight:800;
    color:#020334;
    margin-bottom:10px;
    letter-spacing:1px;
}

.why-mu-section h4{
    font-size:24px;
    color:#020334;
    margin-bottom:20px;
}

.mu-divider{
    width:180px;
    height:4px;
    background:#f26a21;
    margin:20px auto 30px;
}

/* Paragraph Style */
.why-mu-section p{
    max-width:1050px;   /* Increased width */
    margin:auto;
    font-size:18px;
    line-height:1.9;
    color:#222;
    text-align:center;
}

/* Tablet Responsive */

@media (max-width:992px){

.why-mu-section{
    padding:60px 20px;
}

.why-mu-section h2{
    font-size:34px;
}

.why-mu-section h4{
    font-size:20px;
}

.why-mu-section p{
    font-size:17px;
    max-width:100%;
}

}

/* Mobile Responsive */

@media (max-width:768px){

.why-mu-section{
    padding:50px 15px;
}

.why-mu-section h2{
    font-size:26px;
}

.why-mu-section h4{
    font-size:18px;
}

.mu-divider{
    width:120px;
}

.why-mu-section p{
    font-size:16px;
    line-height:1.7;
}

}

/* ===== advantage-section code start CSS Code Start ===== */
.advantage-section {
    background: #ffffff;
    padding: 60px 20px;
}

.advantage-container {
    max-width: 1360px;
    margin: 0 auto;
}

.advantage-heading {
    text-align: center;
    margin-bottom: 50px;
}

.advantage-heading h2 {
    font-weight: 800;
    color: #020334;
    font-size: 36px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.advantage-heading p {
    font-size: 16px;
    color: #111;
    margin: 0;
}

.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.advantage-item {
    text-align: center;
    padding: 45px 20px 38px;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
}

.advantage-item:nth-child(4),
.advantage-item:nth-child(8) {
    border-right: none;
}

.advantage-icon {
    margin-bottom: 20px;
}

.advantage-icon img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.advantage-item h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px;
    line-height: 1.3;
}

.advantage-item p {
    font-size: 18px;
    color: #222;
    margin: 0;
    line-height: 1.5;
}

/* Tablet */
@media (max-width: 991px) {
    .advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantage-item:nth-child(4),
    .advantage-item:nth-child(8) {
        border-right: 1px solid #d7d7d7;
    }

    .advantage-item:nth-child(2),
    .advantage-item:nth-child(4),
    .advantage-item:nth-child(6),
    .advantage-item:nth-child(8) {
        border-right: none;
    }

    .advantage-heading h2 {
        font-size: 30px;
    }

    .advantage-item h3 {
        font-size: 20px;
    }

    .advantage-item p {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .advantage-section {
        padding: 20px 15px;
    }

    .advantage-grid {
        grid-template-columns: 1fr;
    }

    .advantage-item {
        border-right: none !important;
        padding: 30px 15px;
    }

    .advantage-heading {
        margin-bottom: 35px;
    }

    .advantage-heading h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    .advantage-heading p {
        font-size: 15px;
        line-height: 1.5;
    }

    .advantage-item h3 {
        font-size: 18px;
    }

    .advantage-item p {
        font-size: 15px;
    }

    .advantage-icon img {
        width: 70px;
        height: 70px;
    }
}
/* ===== advantage-section code start CSS Code End ===== */


/* ===== Trusted by Leading Organizations Slider CSS Code Start ===== */

.your-class {
    width: 100%;
    overflow: hidden;
}

.your-class .slick-list {
    overflow: hidden;
    margin: 0;
}


.your-class .slick-track {
    display: flex !important;
    align-items: center;
}

/*  tight gap */
.your-class .slick-slide {
    padding: 0 3px;
}

/*  center slides */
.your-class .slick-slide > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100%;
}

/* ⭐ desktop logo */
.partner-logo {
    max-width: 150px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ⭐ arrows desktop */
.your-class .slick-next { right: 4px; }
.your-class .slick-prev { left: 4px; }

.slick-prev:before,
.slick-next:before {
    color: #002F6C !important;
}
.slick-slide img{margin:0px auto}
/* ================= MOBILE ================= */

@media (max-width: 991px) {
  .partner-logo {
    max-width: 130px;
    max-height: 60px;
  }
  .your-class .slick-slide > div {
    height: 70px;
  }
}

@media (max-width: 767px) {
  .partner-logo {
    max-width: 110px;
    max-height: 55px;
  }
  .your-class .slick-slide > div {
    height: 65px;
  }
  .your-class .slick-prev { left: 0; z-index: 2; }
  .your-class .slick-next { right: 0; z-index: 2; }
}

@media (max-width: 480px) {
  .partner-logo {
    max-width: 95px;
    max-height: 48px;
  }
  .your-class .slick-slide > div {
    height: 60px;
  }
  .your-class .slick-slide {
    padding: 0 2px;
  }
}
/* ===== Trusted by Leading Organizations Slider CSS Code End ===== */


/* ===== Regulatory Approvals/ Recognitions CSS start ===== */

.approval-section {
    background: #eef1f6;
    padding: 80px 20px;
    text-align: center;
}

.approval-section .container {
    max-width: 1100px;
    margin: 0 auto;
}

.approval-section h2 {
    font-size: 42px;
    font-weight: 800;
    color: #0b0d3b;
    margin-bottom: 60px;
}

/* Logo Row Fix */
.approval-logos {
    display: flex;
    justify-content: space-between; /* equal left-right spacing */
    align-items: center;
}

/* Each Logo */
.logo-item {
    flex: 1;
    text-align: center;
}

/* Bigger Logo Size */
.logo-item img {
    width: 170px;   /* increased size */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Hover */
.logo-item img:hover {
    transform: scale(1.08);
}

/* Tablet */
@media (max-width: 992px) {
    .approval-section h2 {
        font-size: 34px;
    }

    .logo-item img {
        width: 140px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .approval-logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .logo-item {
        flex: unset;
    }

    .logo-item img {
        width: 110px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .approval-section {
        padding: 60px 15px;
    }

    .approval-section h2 {
        font-size: 26px;
    }

    .logo-item img {
        width: 90px;
    }
}

/* ===== Regulatory Approvals/ Recognitions CSS END ===== */