/* =====================================================
   HERO BANNER WITH FORM - NEWCOURSE.CSS
===================================================== */

/* =========================================
   HERO BANNER FIX
========================================= */

.hero.noshade{
    position: relative;
    margin-top: 0 !important;
    min-height: auto !important;
    overflow: hidden;
}

/* Remove Common CSS Gap */

@media only screen and (min-width: 1280px){

    .hero.noshade{
        margin: 0 !important;
        min-height: auto !important;
    }
}

/* =========================================
   BANNER IMAGE
========================================= */

.hero.noshade .hero_img img{
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   RIGHT SIDE FORM
========================================= */

.course-banner-form{
    position: absolute;
    top: 53%;   /* Changed from 50% to 53% */
    right: 4%;
    transform: translateY(-50%);
    width: 380px;
    z-index: 99;

    /* Small Bottom Visibility */
    padding-bottom: 10px;
}

/* =========================================
   FORM BOX
========================================= */

.course-banner-form .form-box{
    background: #f5f5f5;
    padding: 30px 25px 35px;
    border-radius: 18px;

    box-shadow: 0 12px 40px rgba(0,0,0,0.18);

    border: 1px solid rgba(255,255,255,0.6);
}

/* =========================================
   FORM FIELD IMPROVEMENT
========================================= */

.course-banner-form input,
.course-banner-form select{
    border-radius: 6px !important;
}

/* =========================================
   BROCHURE BUTTON
========================================= */

.banner-brochure-btn{
    position: absolute;
    left: 8%;
    top: 55%;
    transform: translateY(-50%);
    z-index: 99;
}

.btn-brochure{
    display: inline-block;
    background: #f58220;
    color: #fff !important;

    padding: 14px 28px;
    border-radius: 50px;

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 8px 25px rgba(0,0,0,0.20);

    transition: all 0.3s ease;
}

.btn-brochure:hover{
    background: #d96b0c;
    color: #fff !important;
    transform: translateY(-2px);
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 991px){

    .hero.noshade{
        overflow: visible;
    }

    .course-banner-form{
        position: relative;
        top: auto;
        right: auto;
        transform: none;

        width: 100%;
        max-width: 500px;

        margin: -40px auto 30px;
        padding: 0 15px;
    }

    .course-banner-form .form-box{
        padding: 25px 20px 30px;
    }

    .banner-brochure-btn{
        position: relative;
        left: auto;
        top: auto;
        transform: none;

        text-align: center;
        margin: 20px 0;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 576px){

    /* Keep Full Banner Visible */

    .hero.noshade .hero_img img{
        width: 100%;
        height: auto;
    }

    .course-banner-form{
        margin-top: 20px;
    }

    .course-banner-form .form-box{
        padding: 20px 15px 25px;
        border-radius: 14px;
    }

    .btn-brochure{
        width: 100%;
        max-width: 280px;

        padding: 12px 20px;
        font-size: 15px;
    }
}

/* ===================================================== HERO BANNER WITH FORM - NEWCOURSE.CSS CODE END ===================================================== */

/* =================================== Course Fee Duration Eligibility HIGHLIGHTS SECTION start =================================== */

.course-highlights{
    display:flex;
    gap:22px;
    padding:25px 15px;
    flex-wrap:wrap;
    justify-content:center;
}

/* BOX DESIGN */

.highlight-box{
    flex:1;
    min-width:250px;
    max-width:310px;
    background:#f3f1f1;
    border:1px solid #8c8c8c;
    border-radius:16px;
    padding:30px 24px;
    display:flex;
    align-items:flex-start;
    gap:18px;
    transition:all 0.4s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    cursor:pointer;
    min-height:140px;
}

/* REMOVE CONFLICT CSS */

.highlight-content{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
}

/* ICON */

.icon{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#000;
    transition:all 0.4s ease;
}

/* CONTENT */

.highlight-content h4{
    font-size:19px;
    font-weight:700;
    color:#000;
    margin:0 0 4px;
    line-height:1.2;
    transition:all 0.4s ease;
}

.highlight-content p{
    font-size:17px;
    margin:0;
    color:#111;
    line-height:1.3;
    transition:all 0.4s ease;
}

.highlight-content span{
    display:inline-block;
    margin-top:6px;
    font-size:12px;
    font-weight:700;
    color:#ef4f23;
    background:#fff;
    padding:5px 10px;
    border-radius:5px;
    transition:all 0.4s ease;
}

/* HOVER EFFECT */

.highlight-box:hover{
    background:#ef4f23;
    transform:translateY(-3px);
}

.highlight-box:hover .highlight-content h4,
.highlight-box:hover .highlight-content p{
    color:#fff;
}

.highlight-box:hover .icon{
    background:#fff;
    color:#000;
}

/* =========================
TABLET
========================= */

@media(max-width:991px){

    .course-highlights{
        gap:18px;
    }

    .highlight-box{
        max-width:48%;
    }
}

/* =========================
MOBILE
========================= */

@media(max-width:576px){

    .course-highlights{
        padding:20px 10px;
        gap:15px;
    }

    .highlight-box{
        max-width:100%;
        min-width:100%;
        padding:20px 18px;
        min-height:auto;
    }

    .highlight-content h4{
        font-size:17px;
    }

    .highlight-content p{
        font-size:15px;
    }

    .icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
    }
}

/* =================================== Course Fee Duration Eligibility HIGHLIGHTS SECTION END =================================== */

/* =================================== Recognitions & Approvals SECTION start =================================== */
.recognitions-section {
  background: #e9dfd2;
  padding: 40px 20px 60px; /* extra bottom gap added */
  margin-bottom: 30px; /* footer se distance */
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px; /* more gap between left & right */
  flex-wrap: wrap;
}

.title-wrap {
  display: flex;
  align-items: center;
  gap: 35px;
}

.title-wrap h2 {
  font-size: 48px;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
  margin: 0;
}

.arrow {
  font-size: 60px;
  font-weight: bold;
  color: #000;
}

.logos {
  display: flex;
  align-items: center;
  gap: 80px; /* increased gap between logos */
  flex-wrap: wrap;
}

.logos img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .title-wrap {
    flex-direction: column;
    gap: 15px;
  }

  .title-wrap h2 {
    font-size: 36px;
  }

  .arrow {
    transform: rotate(90deg);
    font-size: 45px;
  }

  .logos {
    justify-content: center;
    gap: 35px;
  }

  .logos img {
    width: 100px;
    height: 100px;
  }

  .recognitions-section {
    padding-bottom: 50px;
    margin-bottom: 20px;
  }
}
/* =================================== Recognitions & Approvals SECTION END =================================== */



/* =================================== Description & Curriculum Eligibility and Fee Structure SECTION start =================================== */

.mba-wrapper *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

.mba-wrapper{
  background:#ffffff;
  padding:40px 20px;
  color:#111;
}

/* container */
.mba-container{
  max-width:1100px;
  margin:auto;
}

/* title */
.mba-title{
  text-align:center;
  font-size:35px;
  font-weight:700;
  margin-bottom:40px;
}

/* =========================
   TABS DESIGN
========================= */
.mba-tabs{
  display:flex;
  border:2px solid #f15a29;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:40px;
  background:#fff;
}

/* tab buttons */
.mba-tab-btn{
  flex:1;
  padding:18px 20px;
  border:none;
  background:#fff;
  font-size:22px;
  cursor:pointer;
  transition:.3s;
  font-weight:500;
  position:relative;
}

/* separator lines */
.mba-tab-btn:not(:last-child){
  border-right:1px solid #f15a29;
}

/* active tab */
.mba-tab-btn.mba-active{
  background:#f15a29;
  color:#fff;
}

/* =========================
   TAB CONTENT
========================= */
.mba-tab-content{
  display:none;
  animation:mbaFade .3s ease;
}

.mba-tab-content.mba-active{
  display:block;
}

@keyframes mbaFade{
  from{opacity:0;}
  to{opacity:1;}
}

/* headings */
.mba-heading{
  font-size:30px;
  margin-bottom:20px;
  font-weight:700;
}

/* paragraph */
.mba-text{
  font-size:20px;
  line-height:1.8;
  margin-bottom:40px;
}

/* =========================
   ACCORDION
========================= */
.mba-accordion{
  border-top:1px solid #999;
}

.mba-accordion-item{
  border-bottom:1px solid #999;
}

/* header */
.mba-accordion-header{
  width:100%;
  background:none;
  border:none;
  padding:25px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:30px;
  font-weight:700;
  cursor:pointer;
}

/* icon */
.mba-icon{
  font-size:26px;
  transition:.3s;
}

/* rotate + into × */
.mba-accordion-header.mba-active .mba-icon{
  transform:rotate(45deg);
}

/* content */
.mba-accordion-content{
  display:none;
  padding:15px 0 25px;
}

.mba-accordion-content.mba-active{
  display:block;
}

/* subjects */
.mba-subject{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  font-size:20px;
  border-bottom: 1px solid rgba(2, 3, 52, 0.078);
}

/* =========================
   INFO BOX
========================= */
.mba-info-box{
  background:#fff;
  padding:30px;
  border-radius:14px;
  box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

/* list */
.mba-list{
  padding-left:20px;
  margin-top:20px;
}

.mba-list li{
  margin-bottom:15px;
  font-size:20px;
}

/* table */
.mba-table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

.mba-table th,
.mba-table td{
  border:1px solid #ddd;
  padding:16px;
  font-size:18px;
}

.mba-table th{
  background:#f15a29;
  color:#fff;
}

/* =========================
   RESPONSIVE DESIGN
========================= */

/* tablets */
@media(max-width:768px){

  .mba-title{
    font-size:30px;
  }

  .mba-heading{
    font-size:28px;
  }

  .mba-tab-btn{
    font-size:16px;
    padding:14px 8px;
  }

  .mba-accordion-header{
    font-size:22px;
  }

  .mba-text,
  .mba-subject,
  .mba-list li{
    font-size:18px;
  }
}

/* mobile fix (tabs wrap properly) */
@media(max-width:600px){

  .mba-tabs{
    flex-wrap:wrap;
  }

  .mba-tab-btn{
    flex:1 1 50%;
    font-size:15px;
    padding:12px 10px;
  }

  /* remove right border issue on wrap */
  .mba-tab-btn:nth-child(2n){
    border-right:none;
  }
}
/* =================================== Description & Curriculum Eligibility and Fee Structure SECTION END =================================== */


/* =================================== Admission Process and Final Call Banner SECTION start =================================== */
.final-call-banner {
  width: 100%;
  max-width: 1600px; /* optional: limits banner width */
  margin: 0 auto;
  padding-bottom: 30px;
  overflow: hidden; /* prevents overflow on small screens */
}

.final-call-banner img {
  width: 100%;
  height: auto; /* maintains aspect ratio */
  display: block;
  object-fit: cover; /* ensures the image covers its container if resized */
}
/* =================================== Admission Process and Final Call Banner SECTION END =================================== */


/* =================================== Benefits of Distance Learning MBA Degree Course SECTION start =================================== */
.mtsou-section{
  text-align:center;
  max-width:1200px;
  margin:auto;
  padding:40px 15px;
}

.mtsou-section h1{
  font-size:35px;
  font-weight:600;
  color:#000;
}

.mtsou-section .sub{
  font-size:2.3rem;
  font-weight:400;
  color:#666;
  margin-bottom:40px;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 6 boxes = 3 columns */
}

/* ITEM */
.item{
  padding:35px 20px;
  position:relative;
}

/* vertical lines */
.item:not(:nth-child(3n)){
  border-right:2px solid #ccc;
}

/* horizontal line (first row only) */
.item:nth-child(-n+3){
  border-bottom:2px solid #ccc;
}

/* ICON */
.icon{
  width:60px;
  height:60px;
  margin:auto;
  border-radius:50%;
  background:#e94e1b;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  margin-bottom:15px;
}

/* TEXT */
.item h3{
  font-size:1.6rem;
  font-weight:600;
}

.item p{
  font-size:1.4rem;
  color:#666;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .item:not(:nth-child(2n)){
    border-right:1px solid #ccc;
  }
  .item:nth-child(-n+4){
    border-bottom:1px solid #ccc;
  }
}

@media(max-width:768px){
  .grid{grid-template-columns:1fr;}
  .item{
    border-right:none;
    border-bottom:1px solid #ccc;
  }
}
/* =================================== Benefits of Distance Learning MBA Degree Course SECTION END =================================== */

/* =================================== Career Opportunities SECTION start =================================== */

.career-section{
    background:#f3f3f3;
    padding:40px 0 50px;
    font-family:'Poppins', sans-serif;
    overflow:hidden;
}

/* CUSTOM CONTAINER */

.career-container{
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}

.career-heading{
    text-align:center;
    font-size:35px;
    font-weight:700;
    color:#000;
    margin-bottom:45px;
    line-height:1.2;
}

/* =========================
   MAIN WRAPPER
========================= */

.career-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:80px;
}

/* =========================
   LEFT CONTENT BOX
========================= */

.career-box{
    width:48%;
    border:2px solid #f15a24;
    border-radius:18px;
    padding:22px 30px;
    background:#f3f3f3;
}

.career-title{
    background:#f15a24;
    color:#fff;
    text-align:center;
    font-size:30px;
    font-weight:700;
    border-radius:8px;
    padding:12px 15px;
    margin-bottom:22px;
    line-height:1.2;
}

.career-list{
    list-style:none;
    margin:0;
    padding:0;
}

.career-list li{
    position:relative;
    padding-left:28px;
    margin-bottom:16px;
    font-size:18px;
    font-weight:500;
    color:#222;
    line-height:1.4;
}

.career-list li:last-child{
    margin-bottom:0;
}

.career-list li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:1px;
    color:#f15a24;
    font-size:15px;
    font-weight:700;
}

/* =========================
   RIGHT IMAGE
========================= */

.career-image{
    width:42%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.career-image img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:18px;
    border:2px solid #222;
    display:block;
}

/* =====================================
   LARGE TABLET RESPONSIVE
===================================== */

@media(max-width:1199px){

    .career-wrapper{
        gap:50px;
    }

    .career-heading{
        font-size:40px;
    }

    .career-title{
        font-size:28px;
    }

    .career-list li{
        font-size:17px;
    }

    .career-image img{
        height:480px;
    }
}

/* =====================================
   TABLET RESPONSIVE
===================================== */

@media(max-width:991px){

    .career-section{
        padding:35px 0 45px;
    }

    .career-wrapper{
        flex-direction:column;
        gap:35px;
    }

    .career-box,
    .career-image{
        width:100%;
    }

    .career-heading{
        font-size:34px;
        margin-bottom:20px;
    }

    .career-box{
        padding:20px 24px;
    }

    .career-title{
        font-size:26px;
        margin-bottom:20px;
    }

    .career-list li{
        font-size:17px;
        margin-bottom:14px;
    }

    .career-image img{
        height:420px;
    }
}

/* =====================================
   MOBILE RESPONSIVE
===================================== */

@media(max-width:767px){

    .career-section{
        padding:30px 0 40px;
    }

    .career-heading{
        font-size:28px;
        line-height:1.3;
        margin-bottom:20px;
    }

    .career-wrapper{
        gap:25px;
    }

    .career-box{
        width:100%;
        padding:18px;
        border-radius:14px;
    }

    .career-title{
        font-size:22px;
        padding:10px;
        margin-bottom:18px;
        border-radius:8px;
    }

    .career-list li{
        font-size:16px;
        padding-left:24px;
        margin-bottom:12px;
        line-height:1.4;
    }

    .career-list li::before{
        font-size:13px;
    }

    .career-image{
        width:100%;
    }

    .career-image img{
        width:100%;
        height:319px;
        border-radius:14px;
    }
}

/* =====================================
   SMALL MOBILE RESPONSIVE
===================================== */

@media(max-width:480px){

    .career-heading{
        font-size:24px;
    }

    .career-box{
        padding:15px;
    }

    .career-title{
        font-size:20px;
    }

    .career-list li{
        font-size:15px;
        margin-bottom:10px;
    }

    .career-image img{
        height:320px;
    }
}
/* =================================== Career Opportunities SECTION END =================================== */


/* =================================== MOOCS SECTION start =================================== */
/* =========================
   MOOCS SECTION
========================= */

.moocs-section{
    padding:20px 0;
    background:#fff;
    font-family:'Poppins', sans-serif;
}

.moocs-container{
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}

/* Heading Box */

.moocs-heading{
    background:#ece3d7;
    display:flex;
    align-items:center;
    padding:14px 22px;
    margin-bottom:28px;
    position:relative;
}

.moocs-heading span{
    width:8px;
    height:58px;
    background:#f15a24;
    position:absolute;
    left:0;
    top:0;
}

.moocs-heading h2{
    font-size:35px;
    font-weight:700;
    color:#000;
    margin:0;
    padding-left:18px;
    line-height:1.2;
}

/* Content */

.moocs-content p{
    font-size:20px;
    font-weight:400;
    line-height:1.5;
    color:#222;
    margin:0;
}

/* =========================
   TABLET RESPONSIVE
========================= */

@media(max-width:991px){

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

    .moocs-content p{
        font-size:18px;
    }
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:767px){

    .moocs-section{
        padding:15px 0;
    }

    .moocs-heading{
        padding:12px 18px;
        margin-bottom:20px;
    }

    .moocs-heading span{
        width:6px;
        height:50px;
    }

    .moocs-heading h2{
        font-size:24px;
        padding-left:14px;
    }

    .moocs-content p{
        font-size:16px;
        line-height:1.6;
    }
}
/* =================================== MOOCS SECTION END =================================== */

/* =================================== FAQs SECTION start =================================== */

.faq-section{
    background:#f3f3f3;
    padding:40px 0 50px;
    font-family:'Poppins', sans-serif;
}

.faq-container{
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}

/* =========================
   HEADING
========================= */

.faq-heading{
    text-align:center;
    font-size:46px;
    font-weight:700;
    color:#000;
    margin-bottom:35px;
    line-height:1.2;
}

/* =========================
   FAQ ITEM
========================= */

.faq-item{
    background:#eee6da;
    border-radius:14px;
    margin-bottom:16px;
    overflow:hidden;
    transition:0.3s ease;
}

/* =========================
   QUESTION
========================= */

.faq-question{
    width:100%;
    border:none;
    background:transparent;
    padding:20px 24px;
    font-size:22px;
    font-weight:500;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    text-align:left;
    font-family:'Poppins', sans-serif;
    gap:20px;
}

/* =========================
   ICON
========================= */

.faq-question span{
    width:28px;
    height:28px;
    background:#f15a24;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0;
    transition:0.3s ease;
}

/* =========================
   ANSWER
========================= */

.faq-answer{
    background:#f4bf98;
    margin:0 18px 18px;
    border-radius:10px;
    padding:0 20px;
    font-size:18px;
    line-height:1.5;
    color:#111;

    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all 0.4s ease;
}

/* =========================
   ACTIVE FAQ
========================= */

.faq-item.active .faq-answer{
    padding:18px 20px;
    max-height:300px;
    opacity:1;
}

.faq-item.active .faq-question span{
    transform:rotate(180deg);
}

/* =========================
   TABLET RESPONSIVE
========================= */

@media(max-width:991px){

    .faq-heading{
        font-size:38px;
    }

    .faq-question{
        font-size:20px;
        padding:18px 20px;
    }

    .faq-answer{
        font-size:17px;
    }
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:767px){

    .faq-section{
        padding:35px 0 40px;
    }

    .faq-heading{
        font-size:28px;
        margin-bottom:25px;
    }

    .faq-item{
        border-radius:12px;
        margin-bottom:14px;
    }

    .faq-question{
        font-size:17px;
        padding:16px 18px;
        line-height:1.5;
        gap:15px;
    }

    .faq-question span{
        width:24px;
        height:24px;
        font-size:14px;
    }

    .faq-answer{
        margin:0 14px 14px;
        font-size:15px;
        padding:0 16px;
        border-radius:8px;
    }

    .faq-item.active .faq-answer{
        padding:14px 16px;
    }
}
/* =================================== FAQs SECTION END =================================== */