/* ==============================
            Home Pages Form Styles
          ============================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;

}

                                 /*-------------- home page - Top Header Styles ---------------------- */

                          
.top-header {
  background-color: #068d53;
  color: white;
  display: flex;
  justify-content: space-between; /* left side vs right side */
  align-items: center;
  /* padding: 8px 100px; */
  font-size: 15px;
  flex-wrap: wrap; /* mobile friendly */
  padding: 8px 5%;
}

.top-header .left {
  display: flex;
  gap: 20px; /* space between time and email */
  align-items: center;
  /* margin-left: 100px; */

   margin-left: 0;
}

.top-header .right {
  display: flex;
  align-items: center;
  gap: 6px;
  /* margin-right: 100px; */

   margin-right: 0;
}

.top-header a {
  color: white;
  text-decoration: none;
}

.top-header a:hover {
  text-decoration: underline;
  color: rgb(8, 48, 228);
}


              /* ------------------ Tablet Responsive (768px – 1024px) ------------------- */

@media (max-width: 1024px) {
  .top-header {
    padding: 8px 3%;
    font-size: 14px;
  }

  .top-header .left,
  .top-header .right {
    gap: 12px;
  }
}

                /* ------------------ Mobile Responsive (up to 768px) ------------------- */

@media (max-width: 768px) {

  .top-header {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  .top-header .left,
  .top-header .right {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

}

                /* ------------------ Small Mobile Responsive (up to 400px) ------------------- */

@media (max-width: 400px) {

  .top-header {
    font-size: 13px;
    padding: 6px 4%;
  }

}


/* ------------------------------------------------------------------------------------------------------------------------------------- */

                                  /* ------------------ Home Page - Main Header Styles ------------------- */

 
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #e3e8ee;
  flex-wrap: wrap;
  padding: 10px 5%;
}

.header-left-logo img {
  width: auto;
  max-height: 81px;
  margin-top: -2px;
}

    /* --- Main menu --- */

nav ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav ul.menu li {
  position: relative;
}

nav ul.menu li a {
  text-decoration: none;
  color: rgba(8, 20, 133, 0.986);
  padding: 10px 15px;
  display: block;
  font-size: 18.5px;
  
}

nav ul.menu li a:hover {
  background: #068d53;
  color: white;
  border-radius: 9px;
}

  /*--- Dropdown menu ---*/

nav ul.menu li .dropdown {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 250px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 0;
  margin: 0;
  z-index: 100;
  border: 1.5px solid #555;
  border-radius: 9px;
  overflow: hidden; 
}

nav ul.menu li .dropdown li {
  /* width: 100%; */
  min-width: 300px;
}

    /*--- Show dropdown on hover ---*/

nav ul.menu li:hover .dropdown {
  display: block;
}

nav ul.menu li .dropdown li a {
  padding: 10px 15px;
  font-size: 13px;
}

.header-right nav {
  display: flex;
  gap: 30px;
  margin-top: -10px;
}

.header-right nav a {
  color: rgba(8, 20, 133, 0.986);
  text-decoration: none;
  font-size: 18px;
  font-weight: 510;
  transition: color 0.3s;
}

.buttons {
  display: flex;
  gap: 20px;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.login-btn {
  border: 2px solid #dc4c2c;
  color: #dc4c2c;
  font-size: 16px;
  padding: 10px 25px;
  margin-top: -8px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
}

.login-btn:hover {
  background: #dc4c2c;
  color: white;
}

.register-btn {
  border: 2px solid #007bff;
  color: #007bff;
  font-size: 16px;
  padding: 10px 25px;
  margin-top: -8px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
}

.register-btn:hover {
  background: #007bff;
  color: white;
}

      /*--- Icon Menu mobile , Tab --- */

.menuToggle-fixing {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #068d53;
}

/* default */
.menuToggle-fixing::before {
  content: "☰";
}

/* when menu open */
.menuToggle-fixing.open::before {
  content: "✖";
}

/* --- login / register hide inside menu show ---*/
.mobile-buttons {
  display: none;
}


                                   /* ------------- Responsive style header ---------------*/

                                            /* ========== Mobile & Tablet ========== */

@media (max-width: 1024px) {
  /* show icon */
  .menuToggle-fixing {
    display: block;
    order: 2;
  }

  /* hide buttons outside */
  .buttons {
    display: none;
  }

  /* make nav sidebar */
  #mainMenu-st {
    position: fixed;
    top: 0;
    left: -270px;
    width: 260px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    padding-top: 35px;
    z-index: 2000;
    overflow-y: auto;
  }

  /* open */
  #mainMenu-st.active {
    left: 0;
  }

  /* vertical list */
  nav ul.menu {
    flex-direction: column;
    padding: 0;
  }

   nav ul.menu li {
    width: 100%;
  }

  nav ul.menu li a {
    font-size: 18px;         
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;    
    display: block;
    width: 100%;
    padding: 10px 18px;
    word-break: break-word;
  }

  /* remove big min width from desktop */
  nav ul.menu li .dropdown li {
    min-width: 100%;
  }

  /* dropdown behave normal */
  nav ul.menu li .dropdown {
    position: static;        
    width: 100%;
    background: #f7f7f7;
    box-shadow: none;
    border-radius: 0;
    min-width: 100%;
    margin: 0;
  }

  nav ul.menu li .dropdown li a {
    padding: 8px 18px 8px 30px;   /* indent */
    display: block;
    width: 100%;
    font-size: 13px;
    word-break: break-word;
  }

  /* remove green hover box */
  nav ul.menu li a:hover {
    background: none;
    color: #068d53;
  }

  nav ul.menu li:last-child a {
    border-bottom: none;
  }
}

                      /* ---------- mobile-buttons login & register --------- */

@media (max-width: 1024px) {
  .mobile-buttons {
    display: block;
    padding: 7px 18px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0;                    
  }

  .mobile-buttons a {
    display: block;
    width: 100%; 
  }
}

@media (max-width: 1024px) {
  .mobile-buttons .login-btn,
  .mobile-buttons .register-btn {
    border: none;       
    background: none;  
    margin: 0;   
  }
}

/* ------------------------------------------------------------------------------------------------------------------------------- */
                                /* ---------------------- Home page - Banner Styles ------------------------ */

.banner {
  background: url("picture/icon-medical-coding-institute.jpg") center/cover
    no-repeat;
  height: 610px;
  position: relative;
  display: flex;
  align-items: center; 
  justify-content: center; 
  color: whitesmoke;
  text-align: center;
  margin-top: -10px;

}

.banner h1 {
  position: absolute;
  top: 30%;
  right: -4.7%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  padding: 20px;
  text-align: justify; /* optional: makes the paragraph clean and aligned */
  word-wrap: break-word; /* ensures long words don’t overflow */
  line-height: 1.5;
  color: wheat;

  /* font-style: italic; */
  /* background-color: rgba(255, 255, 255, 0.7); Semi-transparent background */
  /* border-radius: 10px; */
}

/* " + " Icon  */
.banner h1 .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -4px; /* small space */
  font-weight: bold;
}

.banner p {
  position: absolute;
  top: 45%;
  right: -7%;
  transform: translate(-50%, -50%);
  font-size: 29px;
  padding: 20px;
  text-align: justify; /* optional: makes the paragraph clean and aligned */
  word-wrap: break-word; /* ensures long words don’t overflow */
  line-height: 1.3;
  color: wheat;

  /* font-style: italic; */
  /* background-color: rgba(255, 255, 255, 0.7); Semi-transparent background */
  /* border-radius: 10px; */
}

/* Explore Courses */

/* .explore-courses {
  background-color: #068d53;
  color: white;

  border-radius: 30px;
  text-decoration: none;
  font-weight: 510;
  transition: 0.3s;
  font-size: 18px;
  padding: 15px;
  line-height: 1;

  margin-top: 15%;
  margin-left: 30%;
} */

 /* Banner title */ 

.banner-title {
  color: #092e5e;
  font-weight: bold;
}

.banner-sub {
  color: #053805;
  font-weight: bold;
}

.explore-courses:hover {
  background-color: #055733;
}



/* -------------- */


.home-banner-image {
  position: relative;
  background: url("picture/home_2.jpeg") no-repeat center;
  background-size: cover;
  height: 70vh;   /* auto adjust to screen */
  min-height: 380px;
  margin-top: -10px;
}

/*---- invisible clickable button area ----*/
.home-banner-btn-link {
  position: absolute;
  left: 8.6%;
  top: 72%;
  width: 252px;
  height: 70px;
  cursor: pointer;
  z-index: 5;
  border-radius: 6px;
}

.home-banner-btn-link {
  background: rgb(222, 226, 160);
  opacity: -1;
}
      
/*---- Tablet ----*/
@media (max-width:1024px) {
  .home-banner-image { 
    height: 60vh; }
}

/*---- Mobile ----*/
@media (max-width:768px) {
  .home-banner-image { 
    height: 23vh;
    min-height: 1px;
    background-size: contain;   /* show full image */
    background-position: top center;
    background-repeat: no-repeat;
}

  .home-banner-btn-link {
    left: 10%;
    top: 68%;
    width: 40%;
    height: 10%;
   }
}


/* ------------------- */









/* =========================
   MOBILE (320px – 575px)
========================= */
@media (max-width: 575px) {

  .banner {
    min-height: 85vh;
    padding: 20px 15px;
  }

  .banner h1 {
    font-size: 19px;
    line-height: 1.4;

    margin-right: -125px;
  }

  .banner p {
    font-size: 13.5px;
    line-height: 1.4;

     margin-right: -130px;

     margin-top: -35px;
  }

  .explore-courses {
    font-size: 14px;
    padding: 12px 18px;

    margin-left: -1px;
  }
}

/* =========================
   TABLET (576px – 1024px)
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .banner {
    min-height: 70vh;
  }

  .banner h1 {
    font-size: 30px;
  }

  .banner p {
    font-size: 20px;
  }

  .explore-courses {
    font-size: 16px;
    padding: 14px 22px;
  }
}

/* =========================
   DESKTOP (1025px+)
========================= */
@media (min-width: 1025px) {

  .banner {
    height: 610px;
  }

  .banner h1 {
    font-size: 40px;
  }

  .banner p {
    font-size: 29px;
  }

  .explore-courses {
    font-size: 18px;
  }
}












/* ----------------------------------------------------------------------------------------------------- */

            /* ------------------------ Home page - Our Founder ----------------------------- */

.founder-section {
  background-color: white;
  padding: 40px 20px;
  text-align: center;
}

.founder-title {
  font-size: 37px;
  color: #333;
  margin-bottom: 30px;

  /* font-size: clamp(24px, 3vw, 38px); */
}

.founder-title span {
  color: #e6004c;
}

.founder-section .founder-title::after {
  margin-left: 43.3%;
  
}

.founder-name {
  font-size: 24px;
  color: #09685e;
  margin-bottom: 30px;
  font-weight: 600;

   /* font-size: clamp(18px, 2vw, 24px); */
}

.founder-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  gap: 50px;
  /* align-items: flex-start; */
  text-align: left;
}

.founder-image {
  flex: 1 1 450px;
  display: flex;
  justify-content: center;

  align-items: center;
  /* background: linear-gradient(135deg, #aee0c9, #6ca574); */
  background: linear-gradient(135deg, #137748, #065013);
  padding: 20px;
  border-radius: 12px;
}

.founder-image img {
  /* width: 500px;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: -40px; */

  width: 100%;
  max-width: 335px;
  height: auto;         
  border-radius: 10px;
  display: block;
  margin-bottom: -40px;
}

.founder-content {
  max-width: 650px;
}

.founder-content .designation {
  font-style: italic;
  color: #525050;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  margin-top: -1px;
}

.founder-content p {
  line-height: 1.5;
  color: #555;
  text-align: justify;
  /* font-size: 18px; */

  font-size: clamp(18px, 1.2vw, 18px);
}


.fade-in {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


                  /* ============= Responsive Our Founder - Home Page ============== */

/* =========================
   MOBILE DEVICES
   320px – 414px
========================= */
@media (max-width: 575px) {

  .founder-section {
    padding: 30px 15px;
  }

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

  /* Fix ::after center issue */
  .founder-section .founder-title::after {
    margin-left: auto;
    margin-right: auto;
  }

  .founder-name {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .founder-container {
    gap: 25px;
    text-align: center;
  }

  .founder-image {
    flex: 1 1 100%;

    display: flex;
    justify-content: center;

    align-items: center;
    /* background: linear-gradient(135deg, #aee0c9, #6ca574); */
    background: linear-gradient(135deg, #137748, #065013);
    padding: 10px;
    border-radius: 12px;
  }

  .founder-image img {
    width: 100%;
    max-width: 270px;
    height: auto;
    margin-bottom: 0;
  }

  .founder-content {
    max-width: 100%;
  }

  .founder-content .designation {
    font-size: 16px;
  }

  .founder-content p {
    font-size: 15px;
    text-align: left;
  }
}

/* =========================
   TABLET DEVICES
   768px – 1024px
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .founder-section {
    padding: 40px 20px;
  }

  .founder-title {
    font-size: 32px;
  }

  .founder-section .founder-title::after {
    margin-left: auto;
    margin-right: auto;
  }

  .founder-name {
    font-size: 22px;
    text-align: center;
  }

  .founder-container {
    gap: 40px;
  }

  .founder-image {
    flex: 1 1 100%;

    display: flex;
    justify-content: center;

    align-items: center;
    /* background: linear-gradient(135deg, #aee0c9, #6ca574); */
    background: linear-gradient(135deg, #137748, #065013);
    padding: 10px;
    border-radius: 12px;
  }

  .founder-image img {
    width: 480px;
    height: auto;
    margin-bottom: 0;
  }

  .founder-content {
    max-width: 100%;
  }

  .founder-content p {
    font-size: 16px;
  }
}

/* =========================
   DESKTOP DEVICES
   1280px+
========================= */
@media (min-width: 1025px) {

  .founder-title {
    font-size: 37px;
  }

  .founder-image img {
    width: 500px;
    height: 350px;
    margin-bottom: -40px;
  }

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


/* ------------------------------------------------------------------------------------------------ */

                                    /*---------- home pages ------------- */
                              /*----------- Banner Section Styles ----------- */

.list-banner {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #c4bcbc;
  padding: 20px 20px;
  text-align: center;
  gap: 20px;
}

.banner-item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1 1 200px;
  border: 1.5px solid #ccc;
}

.banner-icon {
  width: 55px; /* adjust size */
  height: 55px;
  margin-bottom: 15px;

  font-size: 50px; /* size of icon */
  color: #ff5722; /* icon color */
}

.banner-item h3 {
  margin-bottom: 10px;
  color: #068d53;
  font-size: 24px;
}

.banner-item p {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.banner-item:hover {
  transform: translateY(6px);
  box-shadow: 0 4px 12px rgba(179, 4, 4, 0.2);
}


                /* ============= Responsive Banner Section - Home Page ============== */

/* =========================
   MOBILE DEVICES
   320px – 414px
========================= */
@media (max-width: 575px) {

  .list-banner {
    padding: 15px;
    gap: 15px;
  }

  .banner-item {
    flex: 1 1 100%; /* full width */
    padding: 18px;
  }

  .banner-icon {
    width: 40px;
    height: 40px;
    font-size: 36px;
    margin-bottom: 10px;
  }

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

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

/* =========================
   TABLET DEVICES
   768px – 1024px
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .list-banner {
    padding: 20px;
    gap: 20px;
  }

  .banner-item {
    flex: 1 1 45%; /* two items per row */
    padding: 20px;
  }

  .banner-icon {
    width: 48px;
    height: 48px;
    font-size: 44px;
  }

  .banner-item h3 {
    font-size: 21px;
  }

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

/* =========================
   DESKTOP DEVICES
   1280px+
========================= */
@media (min-width: 1025px) {

  .list-banner {
    padding: 25px 20px;
  }

  .banner-item {
    flex: 1 1 200px; /* original behavior */
  }

  .banner-icon {
    width: 55px;
    height: 55px;
    font-size: 50px;
  }

  .banner-item h3 {
    font-size: 24px;
  }

  .banner-item p {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------------------------------- */

                 /*---- Home Pages ---- */
           /* ---- Our Placement Partners ---- */
           
.placement-partners {
  text-align: center;
  /* padding: 25px 20px; */
  background-color: white;
  padding: 36px 40px;
  color: #e44e52;
  overflow-x: hidden;

}

/* remove the line  */
.placement-partners h2::after {
  display: none;
}

.placement-partners h2 {
  /* font-size: 29px; */
  font-weight: 600;
  margin-bottom: 40px;
  font-size: clamp(20px, 2.5vw, 30px);

}

.partner-slider {

  display: flex;
  width: calc(200%); 
  animation: scroll 20s linear infinite;

  gap: 30px;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  margin-top: -20px;
  margin-bottom: -20px;

}

/* .partner-slider:hover {
  animation-play-state: paused;
} */

.slide {
  /* min-width: 200px;
  margin: 0 20px;

  display: flex;
  justify-content: center;
  align-items: center; */

  flex: 0 0 auto;
  margin: 0 10px;
}

.slide img {
  width: 100%;
  max-width: 150px;
  height: auto;

}

          /* Our Placement-Partners */
    /* Animation for smooth horizontal loop */

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.slide img:hover {
  transform: scale(1.1);
}


                /* ============= Responsive Placement Partners - Home Page ============== */

                         /* -------------- MOBILE (320–414px) ---------------- */

@media (max-width: 480px) {
  .placement-partners {
    padding: 25px 12px;
  }

  .placement-partners h2 {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .partner-slider {
    gap: 18px;
    animation-duration: 20s; /* slower on mobile */
  }

  .slide img {
    max-width: 90px;
  }
}


                             /* ---------------- TABLET (768–1024px) ------------------ */

@media (min-width: 768px) and (max-width: 1024px) {
  .placement-partners {
    padding: 30px 25px;
  }

  .partner-slider {
    gap: 25px;
    animation-duration: 20s;
  }

  .slide img {
    max-width: 120px;
  }
}

       /* ----------------- LARGE DESKTOP (1600+) ---------------- */

@media (min-width: 1600px) {
  .partner-slider {
    gap: 40px;
  }

  .slide img {
    max-width: 180px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------ */

        /* ======================== Home page - Career Support Services ====================== */

.career-support {
  text-align: center;
  padding: 50px 20px;
  background-color: #fff;
  margin-top: -20px;
}

.career-support h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  color: rgb(226, 149, 7);
  position: relative;

  margin-top: -20px;
}

.career-support h2::after {
  content: "";
  width: 220px;
  height: 3px;
  background: #0f86b6;
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: #ddd;
  border-left: 4px solid #068d53;
  border-radius: 15px;
  padding: 35px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(219, 4, 4, 0.1);
}

.service-card h3 {
  font-size: 19px;
  color: #047a22;
  margin-bottom: 20px;
}

.service-card p {
  color: #040a44;
  font-size: 15px;
  line-height: 1.6;
  text-align: justify;
}


                /* ============= Responsive Career Support Services - Home Page ============== */

/* =========================
   MOBILE DEVICES
   320px – 414px
========================= */
@media (max-width: 575px) {

  .career-support {
    padding: 35px 15px;
    margin-top: -10px;
  }

  .career-support h2 {
    font-size: 22px;
    margin-bottom: 25px;
    margin-top: -30px;

  }

  .career-support h2::after {
    width: 140px;
  }

  .services-grid {
    grid-template-columns: 1fr; /* single column */
    gap: 20px;
  }

  .service-card {
    padding: 22px;
  }

  .service-card h3 {
    font-size: 17px;
  }

  .service-card p {
    font-size: 14px;
  }
}

/* =========================
   TABLET DEVICES
   768px – 1024px
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .career-support {
    padding: 45px 20px;

    margin-top: -20px;
  }

  .career-support h2 {
    font-size: 26px;
    margin-bottom: 35px;

  }

  .career-support h2::after {
    width: 180px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 30px;
  }

  .service-card {
    padding: 30px;
  }

  .service-card h3 {
    font-size: 18px;
  }

  .service-card p {
    font-size: 15px;
  }
}

/* =========================
   DESKTOP DEVICES
   1280px+
========================= */
@media (min-width: 1025px) {

  .career-support {
    padding: 60px 20px;
  }

  .career-support h2 {
    font-size: 28px;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 35px;
  }

  .service-card {
    padding: 35px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------------- */

                           /* ==============Home page -- Our Motto =================  */

.motto-section {
  text-align: center;
  /* padding: 50px 200px; */
  margin-bottom: -40px;

  padding: clamp(30px, 5vw, 50px) clamp(15px, 10vw, 200px);

}

.motto-section h2 {
  /* font-size: 2.3rem; */
  font-weight: 700;
  margin-bottom: 30px;
  color: #0b7694;

  font-size: clamp(22px, 2.5vw, 36px);

}

.motto-section h2::after {
  display: none;

}

.motto-tabs {
  display: flex;
  justify-content: center;
  background-color: #e6e5eb;
  border-radius: 40px;
  padding: 10px;
  gap: 100px;
  flex-wrap: wrap;
  margin-bottom: 40px;

}

.motto-tab-btn {
  border: none;
  background: none;
  font-weight: 600;
  /* font-size: 1.4rem; */
  padding: 10px 20px;
  cursor: pointer;
  color: #333;
  position: relative;

  font-size: clamp(16px, 1.5vw, 22px);
}

.motto-tab-btn.active {
  color: #00bfa6;
}

.motto-tab-btn.active::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 3px;
  background-color: #00bfa6;
  bottom: 0;
  left: 30%;
  border-radius: 3px;
}

.motto-tab-content {
  display: none;
  justify-content: center;
  align-items: center;

}

.motto-tab-content.active {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 15px;
  max-width: 1200px;
  margin: 0 auto;

}

.motto-card {
  text-align: left;
  gap: 10px;
  display: flex;
  align-items: stretch;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  min-height: 290px;

}

.motto-card img {
  width: 410px;
  height: 100%;
  object-fit: cover;
  border-radius: 25px 0 0 25px;
  display: block;

}

.motto-text {
  flex: 1;
  padding: 50px;
  background-color: #c2bce0;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.motto-text h3 {
  /* font-size: 1.9rem; */
  font-weight: 700;
  color: #000;
  /* margin-bottom: 30px; */

  font-size: clamp(20px, 2vw, 30px);
  margin-bottom: 25px;
}

.motto-text p {
  /* font-size: 1.1rem; */
  line-height: 1.7;
  color: #333;
  text-align: justify;

  font-size: clamp(14px, 1.2vw, 18px);
  
}


                /* ============= Responsive Our Motto - Home Page ============== */

/* =========================
   MOBILE DEVICES
   320px – 414px
========================= */
@media (max-width: 575px) {

  .motto-section {
    padding: 30px 15px;
    margin-bottom: -35px;
  }

  .motto-tabs {
    gap: 20px;
    padding: 8px;
    border-radius: 25px;
  }

  .motto-tab-btn {
    padding: 8px 23px;
    font-size: 15px;
  }

  .motto-tab-content.active {
    padding: 0;
  }

  .motto-card {
    flex-direction: column;
    min-height: auto;
  }

  .motto-card img {
    width: 100%;
    height: 220px;
    border-radius: 25px 25px 0 0;
  }

  .motto-text {
    padding: 25px 20px;
  }

  .motto-text h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .motto-text p {
    font-size: 14px;
    text-align: left;
  }
}

/* =========================
   TABLET DEVICES
   768px – 1024px
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .motto-section {
    padding: 40px 40px;
    margin-bottom: -50px;
  }

  .motto-tabs {
    gap: 40px;
    padding: 10px;
  }

  .motto-card {
    flex-direction: column;
  }

  .motto-card img {
    width: 100%;
    height: 280px;
    border-radius: 25px 25px 0 0;
  }

  .motto-text {
    padding: 35px;
  }

  .motto-text h3 {
    font-size: 22px;
  }

  .motto-text p {
    font-size: 16px;
  }
}

/* =========================
   DESKTOP DEVICES
   1280px+
========================= */
@media (min-width: 1025px) {

  .motto-section {
    padding: 50px 200px;
  }

  .motto-tabs {
    gap: 100px;
  }

  .motto-card {
    flex-direction: row;
  }

  .motto-card img {
    width: 410px;
    height: 100%;
    border-radius: 25px 0 0 25px;
  }

  .motto-text {
    padding: 50px;
  }
}

/* ----------------------------------------------------------------------------------------------------- */

                    /* --------- Home Page - International Certifications --------------- */

.international-certifications {
  padding: 60px 20px;
  background-color: white;
  text-align: center;
  margin-top: -50px;
}

.international-certifications h2 {
  font-size: clamp(22px, 3vw, 40px);
  margin-bottom: 20px;
  color: #0696af;

}

.international-certifications h2::after {
  display: none;
}

.international-certifications p {
  font-size: clamp(14px, 1.2vw, 18px); 
  color: #333; 
  line-height: 1.6; 
  margin-bottom: 10px; 
  text-align: center;
  margin-top: 10px;

}

.certifications-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

.cert-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(4, 8, 240, 0.301);
  width: 280px;
  transition: transform 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-10px);
}

.cert-card img {
  width: 100px;
  height: auto;
  margin-bottom: 15px;
}

/* img */
.cert-card .ICD {
  width: 93px;
}

.cert-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  white-space: nowrap; /* Prevents text wrapping */
}

.cert-card p {
  font-size: 0.9rem;
  color: #555;
}



                /* ============= Responsive International Certifications - Home Page ============== */

                               /* -------------- MOBILE (320–414px) ------------ */

@media (max-width: 480px) {
  .international-certifications {
    padding: 35px 12px;
    margin-top: -40px;
  }

  .international-certifications h2 {
    font-size: 20px;
  }

  .international-certifications p {
    font-size: 14px;
  }

  .certifications-grid {
    gap: 20px;
  }

  .cert-card {
    width: 100%;
    max-width: 320px;
    padding: 18px;
  }

  .cert-card h3 {
    white-space: normal; 
    font-size: 16px;
  }

  .cert-card p {
    font-size: 13px;
  }
}

                               /* ---------- TABLET (768–1024px) --------------- */
 
@media (min-width: 768px) and (max-width: 1024px) {
  .international-certifications {
    padding: 50px 30px;
  }

  .certifications-grid {
    gap: 30px;
  }

  .cert-card {
    width: 260px;
  }

  .cert-card h3 {
    font-size: 17px;
  }
}

                       /* -------------------- DESKTOP ---------------- */

@media (min-width: 1600px) {
  .certifications-grid {
    gap: 50px;
  }

  .cert-card {
    width: 300px;
  }
}

/* ------------------------------------------------------------------------------------------------------- */

                    /*   =====================================================
                              youtube video - 3470 medical coding  home Page 
                         =====================================================   */

/* Section styling */
.courses-video {
  background-color: #d1d8dd; /* light background */
  padding: 40px 20px;
  text-align: center;
  border-top: 3px solid #0077cc;
}

.courses-video h3 {
  color: #b429a9; /* healthcare blue tone */
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 35px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.courses-video .subtitle-video {
  color: #125a3e;
  font-size: 20px;
  margin-bottom: 10px;
  font-style: italic;
  margin-left: 38%;

}

/* Flex container for two-column layout */
.courses-video .content-video {
  display: flex; /* side-by-side layout */
  justify-content: space-between;
  gap: 50px; /* space between text and video */
  max-width: 1200px; /* optional max width */
  margin: auto; /* center container */
  flex-wrap: wrap; /* wrap on smaller screens */
}

/* Left side text styling */
.text-video {
  flex: 1; /* take half or available space */
  min-width: 300px; /* prevent shrinking too much */
}

.text-video p {
  color: #444;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 23px;
  text-align: justify;
}

/* Right side video styling */
.video-grid {
  flex: 1;
}

/* "+"  Icon  */
.courses-video .add {
  font-size: 0.8em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -4px; /* small space */
  font-weight: bold;

  color: #008000;
}

.video-grid iframe {
  width: 100%; 
  max-width: 500px;
  height: 330px;
  border-radius: 5px;
  border: 2px solid #06634c;

}

                /* ============= Responsive YouTube Video Section - Home Page ============= */

                                 /* ---------- 320–414 ------------ */

@media (max-width: 590px) {
  .courses-video {
    padding: 25px 12px;
  }

  .courses-video h3 {
    font-size: 20px;
    line-height: 1.3;
  }

  .courses-video .subtitle-video {
    font-size: 14px;
  }

  .courses-video .content-video {
    flex-direction: column;
    gap: 20px;
  }

  .text-video p {
    font-size: 15px;
    text-align: left;
  }

  .video-grid {
    width: 100%;
  }
}

                              /* ------------------ 320×568 | 360×640 | 375×667 | 414×736 ------------------ */

@media (max-width: 767px) {
  .courses-video {
    padding: 30px 15px;
  }

  .courses-video h3 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .courses-video .subtitle-video {
    font-size: 16px;
  }

  .courses-video .content-video {
    flex-direction: column;
    gap: 25px;
  }

  .text-video p {
    font-size: 16px;
    text-align: left;
  }

  .video-grid iframe {
    max-width: 100%;
  }

  .video-grid {
    order: -1;
  }
}


                    /* ----------------- 768×1024 ----------------------- */

@media (min-width: 768px) and (max-width: 991px) {
  .courses-video h3 {
    font-size: 26px;
  }

  .courses-video .subtitle-video {
    font-size: 18px;
  }

  .courses-video .content-video {
    flex-direction: column;
    gap: 30px;
  }

  .text-video p {
    font-size: 18px;
  }

  .video-grid iframe {
    max-width: 600px;
  }

  .video-grid {
    order: -1;
  }
}

                              /*-------------- 1024×768 --------------- */

@media (min-width: 992px) and (max-width: 1024px) {
  .courses-video .content-video {
    gap: 35px;
  }

  .text-video p {
    font-size: 18px;
  }

  .video-grid iframe {
    max-width: 480px;
  }
}

                            /* ------------- 1280×768 | 1366×768 ------------ */

@media (min-width: 1025px) and (max-width: 1366px) {
  .courses-video h3 {
    font-size: 28px;
  }

  .text-video p {
    font-size: 19px;
  }
}

                         /* ------------------ 1600×900 | 1920×1080 ------------ */

@media (min-width: 1367px) {
  .courses-video {
    padding: 60px 40px;
  }

  .courses-video h3 {
    font-size: 32px;
  }

  .video-grid iframe {
    max-width: 560px;
  }
}


/* --------------------------------------------------------------------------------------------------------------- */

                 /* ============== Home pages - OUR ACHIEVERS ==================== */

.achievers-section {
  text-align: center;
  padding: 40px 20px;
  

  background: linear-gradient(120deg, #8b8a50, #5ab109);
  margin-bottom: -10px;
}

.achievers-section h2 {
  font-size: 30px;
  margin-bottom: 10px;
  
}

.achievers-section h2 span {
  color: #e6004c;
}

.achievers-section h2::after {
  display: none;
}

.achievers-section p.subtitle {
  color: #2c2121;
  margin-bottom: 35px;
  font-size: 18px;
}



.carousel-container {
  max-width: 1200px; 
  margin: 20px auto;
  overflow: hidden;

  width: 100%;
  
}

.carousel-slide {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 60px;
}

.carousel-slide img {
  height: 250px;
  flex-shrink: 0;
  border-radius: 10px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 11;
}

.dots {
  text-align: center;
  margin-top: 25px;
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  display: inline-block;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.active-dot {
  background-color: #333;
}



                       /* ============= Responsive Our Achievers - Home Page ============== */


    
                /* ------- Tablet ------- */

@media (max-width: 1024px) {
  .carousel-slide {
    gap: 16px;
  }

  .carousel-slide img {
    width: calc((100% - 16px) / 2);
    max-width: none;
  }
}


                 /* ------- Mobile ------- */

@media (max-width: 768px) {
  .carousel-slide {
    gap: 15px;
  }

  .carousel-slide img {
    /* flex-shrink: 0; */
    width: 100%;
    /* max-width: 600px;
    aspect-ratio: 16 / 11;
    border-radius: 10px; */
  }

  .carousel-container {
    width: 1200px; 
    margin: 20px auto;
    overflow: hidden;
    width: 100%;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */

                            /* ==================== Home Pages - Certifications Offered ============================= */

.certifications-cert-group {
  max-width: 950px;
  margin: auto;
  /* background: #ffffff; */
  padding: 30px;
  border-radius: 8px;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
  margin-top: 15px;
  margin-bottom: -20px;
}

.certifications-cert-group h2 {
  text-align: center;
  margin-bottom: 30px;
  /* color: #2c3e50; */
  font-size: 30px;
  font-weight: 700;
  position: relative;
  color: #138326;   
}

.certifications-cert-group h2::after {
  content: "";
  width: 220px;
  height: 3px;
  background: #0f86b6;
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

.cert-group {
  margin-bottom: 28px;
}

.cert-group h3 {
  color: #1e6bb8;
  margin-bottom: 20px;
  font-size: 19.5px;
  font-weight: 600;
}

.cert-group ul li a {
  text-decoration: none;
  color: inherit;
}

.cert-group ul li a:hover {
  color: #04552f;
}

.cert-group ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.cert-group li {
  background-color: #eef4ff;
  padding: 12px 14px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  cursor: default;
  transition: background-color 0.3s ease;
}

.cert-group li:hover {
  background-color: #d6e6ff;
}


              /* ============= home page - responsive Certifications Offered ============== */

@media (min-width: 1601px) {
  .certifications-cert-group {
    max-width: 1300px;
  }

  .certifications-cert-group h2 {
    font-size: 34px;
  }

  .cert-group h3 {
    font-size: 20px;
  }

  .cert-group li {
    font-size: 16px;
    padding: 14px 18px;
  }
}


@media (min-width: 1367px) and (max-width: 1600px) {
  .certifications-cert-group {
    max-width: 1150px;
  }

  .certifications-cert-group h2 {
    font-size: 32px;
  }

  .cert-group li {
    font-size: 15.5px;
  }
}


@media (min-width: 1281px) and (max-width: 1366px) {
  .certifications-cert-group {
    max-width: 1050px;
  }
}


@media (max-width: 1280px) {
  .certifications-cert-group {
    max-width: 1000px;
    padding: 26px;
  }

  .certifications-cert-group h2 {
    font-size: 28px;
  }

  .cert-group h3 {
    font-size: 18px;
  }

  .cert-group li {
    font-size: 14.5px;
    padding: 10px 14px;
  }
}

@media (max-width: 767px) {
  .certifications-cert-group {
    max-width: 100%;
    padding: 20px 15px;
    margin-bottom: 0;
  }

  .certifications-cert-group h2 {
    font-size: 20px;
  }

  .certifications-cert-group h2::after {
    width: 160px;
  }

  .cert-group h3 {
    font-size: 17px;
    margin-bottom: 15px;
  }

  .cert-group ul {
    gap: 10px;
  }

  .cert-group li {
    font-size: 13.5px;
    padding: 8px 12px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .certifications-cert-group {
    max-width: 90%;
    padding: 25px;
  }

  .certifications-cert-group h2 {
    font-size: 26px;
  }

  .cert-group h3 {
    font-size: 18px;
  }

  .cert-group li {
    font-size: 14.5px;
  }
}


/* --------------------------------------------------------------------------------------------------- */


                            /* ================ Our Facilities  - Home pages ================= */
  
.facilities-section {
  background: linear-gradient(135deg, #bdecec 0%, #91d8d8 100%);
  text-align: center;
  padding: 80px 30px;
  border-radius: 150px 0 0 150px;
  font-family: "Poppins", sans-serif;
  color: #004c4c;

  margin-top: 30px;
  margin-bottom: 30px;

}

.facilities-section h2 {
  font-size: 40px;
  font-weight: 700;
  color: #007c7c;
  margin-bottom: 20px;
  margin-top: -25px;
}

.facilities-section h2::after {
  display: none;
}

.academy-intro {
  font-size: 20px;
  color: #333;
  margin-bottom: 40px;
}

.academy-intro .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -2px; /* small space */
  font-weight: bold;
  color: #f70909;

}

.our-fact {
  color: #05399b;
}

.facilities-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-content: center;
}

.facility-item {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.068);
  padding: 30px 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.facility-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(5, 88, 12, 0.527);
}

.facility-item i {
  font-size: 40px;
  color: #00a8a8;
  margin-bottom: 15px;
}

.facility-item h3 {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}


              /* --------------- responsive Our Facilities - Home pages -----------------------*/
                     /* ------------ 320×568 | 360×640 | 375×667 | 414×736 -------------- */

@media (max-width: 767px) {
  .facilities-section {
    padding: 50px 15px;
    border-radius: 40px 0 0 40px;
  }

  .facilities-section h2 {
    font-size: 26px;
    margin-top: 0;
  }

  .academy-intro {
    font-size: 16px;
    margin-bottom: 25px;
  }

  .facilities-container {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .facility-item {
    padding: 22px 18px;
  }

  .facility-item i {
    font-size: 32px;
  }

  .facility-item h3 {
    font-size: 15px;
  }
}


                         /* ---------------- 768×1024 ------------------- */

@media (min-width: 768px) and (max-width: 991px) {
  .facilities-section {
    padding: 60px 25px;
    border-radius: 80px 0 0 80px;
  }

  .facilities-section h2 {
    font-size: 32px;
  }

  .academy-intro {
    font-size: 18px;
  }

  .facilities-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .facility-item h3 {
    font-size: 16px;
  }
}



                        /* -------------- 1024×768 ------------------ */

@media (min-width: 992px) and (max-width: 1024px) {
  .facilities-section {
    padding: 70px 30px;
    border-radius: 100px 0 0 100px;
  }

  .facilities-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .facilities-section h2 {
    font-size: 36px;
  }
}


                      /* ------------------ 1280×768 | 1366×768 ----------------------- */


@media (min-width: 1025px) and (max-width: 1366px) {
  .facilities-section h2 {
    font-size: 38px;
  }

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

                    /* ---------------------- 1600×900 ------------------------- */

@media (min-width: 1367px) and (max-width: 1600px) {
  .facilities-section {
    padding: 90px 40px;
  }

  .facilities-section h2 {
    font-size: 40px;
  }
}


                /* ------------------- 1920×1080 ----------------------- */

@media (min-width: 1601px) {
  .facilities-section {
    padding: 100px 60px;
    border-radius: 150px 0 0 150px;
  }

  .facilities-container {
    gap: 30px;
  }

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


/* ------------------------------------------------------------------------------------------------------------------------------------------ */

                                            /* ==============================
                                                 Register Page Form Styles
                                               ============================== */

.register-container {
  width: 100%;
  max-width: 900px;   
  display: flex;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 20px;

  animation: slideUp 1.2s ease-in-out;
  transition: all 0.4s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

       /* ----- Left Side (Logo + Text) ----- */

.left-register {
  background: linear-gradient(135deg, #758d94, #037231);
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
  text-align: center;
  position: relative;
  padding: 60px 40px;

  /* background: linear-gradient(120deg, #85bfd3, #d0cbe6); */
}

.left-register .home-link {
  position: absolute;
  top: 15px;
  left: 20px;
  color: #fff;
  /* color: #035c28; */
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 10;
}

.home-link:hover {
  color: #052e6d; 
}

    /*---- Company Logo ---- */

.register-logo {
  width: 180px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  margin: 0  50px;
  background: #fff;
  padding: -5px;
  display: block;
  mix-blend-mode: multiply;
  background: transparent; 
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));

  margin-top: 0;
  margin-bottom: 10px;
}

.left-register h2 {
  font-size: 2.7rem;
  margin-top: 5px;
  margin-bottom: 20px;

  /* color: #0d7e4f; */
}

.left-register p {
  font-size: 1rem;
  margin-top: -10px;  
  /* font-weight: bold; */
  
  /* color: #0d7e4f; */
}

.left-register button {
  padding: 10px 28px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 20px;

  /* color: #0d7e4f;
  border: 2px solid #0d7e4f; */
}

.left-register button:hover {
  background: #ffffff;
  color: #089c4b;
}

 
    /* ----- Right Side (Form) ----- */

.right-register {
  flex: 1;
  padding: 50px;
  position: relative;
  width: 100%;
}

.right-register .help {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 0.9rem;
  color: #555;
  cursor: pointer;
}

.right-register h3 {
  text-align: center;
  color: #0d7e4f;
  margin-bottom: 25px;
  font-size: 23px;
}

.register-form {
  display: flex;
  flex-direction: column;
}

.register-form label {
  margin-bottom: 5px;
  color: #333;
  font-weight: 500;       
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="mobile"],
.register-form input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1.5px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: 0.3s;  
}

.register-form input:focus {
  border-color: #0d7e4f;
  box-shadow: 0 0 5px rgba(2, 190, 81, 0.5);
}

.register-terms {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #333;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 35px;
}

.password-wrapper .toggle-password {
  position: absolute;
  top: 35%;
  right: 10px;
  transform: translateY(-50%);
  color: #888;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s;
}

.password-wrapper .toggle-password:hover {
  color: #0d7e4f;
}

.register-terms input {
  margin-right: 8px;
}

.signup-btn {
  background: #0d7e4f;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.signup-btn:hover {
  background: #034b2d;
}


                                           /* ----- SweetAlert2 Popup Customization ----- */
                                                    /*--- Register popup message --- */

.swal-title {
  font-size: 22px; 
  font-weight: bold;
  color: #2c3e50; 
}

.swal-text {
  font-size: 16px; 
  color: #555; 
}

.swal-btn {
  font-size: 14px; 
  border-radius: 8px;
  background-color: #28a745 !important; 
}

.swal-small-icon {
  color: #28a745;
  transform: scale(0.7); 
  font-size: 15px;
}

                           /* ---------------- Responsive Styles - Register Page ---------------- */

/* =================================
          TABLET  768 – 1024
   ================================= */
@media (max-width: 1024px) {
  .register-container {
    max-width: 95%;
  }

  .left-register {
    padding: 40px 25px;
  }

  .left-register h2 {
    font-size: 2rem;
  }

  .right-register {
    padding: 35px;
  }

  .right-register .help {
    top: 10px;
    right: 15px;
    font-size: 0.85rem;
  }
}

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

  .register-container {
    flex-direction: column;  
    margin: 10px;
  }

  .left-register {
    padding: 30px 20px;
  }

  .register-logo {
    width: 140px;
    margin: 0 auto 10px;
    margin-top: 15px;
  }

  .left-register h2 {
    font-size: 1.6rem;
    margin-top: -10px;
  }

  .left-register p {
    font-size: 0.9rem;
  }

  .left-register button {
    font-size: 0.9rem;
    padding: 8px 20px;
  }

  .right-register {
    padding: 25px 20px;
  }

  .right-register h3 {
    font-size: 18px;
  }

  .register-form input {
    padding: 9px;
    font-size: 14px;
  }

  .signup-btn {
    padding: 10px;
    font-size: 14px;
  }

  .right-register .help {
    display: none;
  }
}


/* =================================
     VERY SMALL PHONES below 480
   ================================= */
@media (max-width: 480px) {
  .left-register h2 {
    font-size: 1.4rem;
  }

  .register-form label {
    font-size: 13px;
  }

  .register-terms {
    font-size: 12px;
  }

  .right-register .help {
    display: none;
  }

  .right-register h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */

                                /* <!-- First Footer (Detailed Info) --> */

.footer-main {
  background: #164e7a;
  color: #fff;
  padding: 50px 80px;
  margin-top: 10px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 70px;
  /* padding-bottom: -10px; */
}

.footer-col h3 {
  margin-bottom: 15px;
  border-bottom: 1px solid #bbc0c4;
  /* display: inline-block; */
  padding-bottom: 10px;
  text-align: justify;
  font-size: 20px;

  color: rgb(10, 241, 99);
}

/* Footer ' + '  Icon */

.footer-col .add {
  font-size: 0.8em; /* make it smaller */
  position: relative;
  top: -0.5em; /* move it up */
  margin-left: -1px; /* small space */
  font-weight: bold;
}

.footer-col p {
  color: #d1e6f3;
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
}

.footer-address-chennai {
  display: flex; /* Use flexbox for icon + text alignment */
  align-items: flex-start; /* Align icon to top of text */
  gap: 5px; /* Space between icon and text */
  margin-bottom: 20px;
}

.footer-address-trichy {
  display: flex; /* Use flexbox for icon + text alignment */
  align-items: flex-start; /* Align icon to top of text */
  gap: 5px; /* Space between icon and text */
}

.footer-address-chennai i {
  font-size: 15px; /* Icon size */
  margin-top: 3px; /* Adjust icon vertical alignment if needed */
  margin-top: 6.2px;
}

.footer-address-trichy i {
  font-size: 15px; /* Icon size */
  margin-top: 3px; /* Adjust icon vertical alignment if needed */
  margin-top: 6.2px;
}

.footer-phone {
  display: flex; /* flex container */
  gap: 4px; /* space between icon and numbers */
}

.footer-phone i {
  margin-top: 7px; /* align icon with top line */
}

.footer-col ul {
  list-style: none;
  padding: 0;
  text-align: justify;
  line-height: 1.5;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: #d1e6f3;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #fff;
  /* padding-left: 5px; */
}

.footer-col i {
  color: #f25072;
  margin-right: 8px;
}

.footer-col ul li i {
  font-size: 12px;
}

  
                      /* ================= responsive First footer styles ========================== */

@media (max-width: 1280px) {
  .footer-main {
    padding: 45px 60px;
  }

  .footer-container {
    gap: 55px;
  }

  .footer-col h3 {
    font-size: 19px;
  }
}

@media (min-width: 1367px) and (max-width: 1600px) {
  .footer-main {
    padding: 55px 100px;
  }

  .footer-container {
    max-width: 1400px;
    margin: auto;
  }
}

@media (min-width: 1601px) {
  .footer-main {
    padding: 60px 140px;
  }

  .footer-container {
    max-width: 1600px;
    margin: auto;
    gap: 80px;
  }

  .footer-col h3 {
    font-size: 21px;
  }

  .footer-col p,
  .footer-col ul li a {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .footer-main {
    padding: 40px 40px;
  }

  .footer-container {
    gap: 40px;
  }

  .footer-col h3 {
    font-size: 18px;
  }

  .footer-col p,
  .footer-col ul li a {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .footer-main {
    padding: 30px 20px;
    text-align: left;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-col h3 {
    font-size: 17px;
  }

  .footer-col p,
  .footer-col ul li a {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .footer-address-chennai,
  .footer-address-trichy,
  .footer-phone {
    gap: 6px;
  }
}

/* -------------------------------------------------------------------------------------------------- */

                         /* ===============  Second Footer Styles ===================  */

footer {
  background-color: #00061e;
  color: white;
  text-align: center;
  margin-top: -1px;
  /* padding: 15px 30px; */
  padding: 15px 0;
}

.footer-content p {
  margin: 0;
  font-size: 15px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* helps stack on mobile */
  max-width: 1200px; /* keeps content inside a centered box */
  margin: 0 auto; /* centers that box */
  padding: 0 40px; /* space from left + right */
}

                /* Social Media Icons  */

.social-icons a {
  transition: color 0.3s;
  text-decoration: none; /* removes underline */
  color: #fff; /* default icon color */
  margin: 0 10px;
  font-size: 10px;
}

.social-icons a i {
  color: white; /* fallback color */
  transition: transform 0.3s, color 0.3s; /* smooth hover effect */
}

.social-icons a.instagram i {
  color: #d40a4e;
} /* or gradient */
.social-icons a.facebook i {
  color: #1877f2;
}
.social-icons a.youtube i {
  color: #ff0000;
}
.social-icons a.twitter i {
  color: #1da1f2;
}
.social-icons a.linkedin i {
  color: #027bf3;
}
.social-icons a.Whatsapp i {
  color: #09f35f;
}
                     
           /* ================= responsive second footer styles ========================== */

@media (max-width: 1280px) {
  .footer-content {
    max-width: 1100px;
    padding: 0 30px;
  }
}

@media (min-width: 1367px) and (max-width: 1600px) {
  .footer-content {
    max-width: 1300px;
  }

  .footer-content p {
    font-size: 15.5px;
  }
}

@media (min-width: 1601px) {
  .footer-content {
    max-width: 1500px;
  }

  .footer-content p {
    font-size: 16px;
  }

  .social-icons a i {
    font-size: 18px;
  }
}


@media (max-width: 767px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 0 15px;
  }

  .footer-content p {
    font-size: 13px;
  }

  .social-icons a {
    margin: 0 8px;
  }

  .social-icons a i {
    font-size: 15px;
  }
}


@media (min-width: 768px) and (max-width: 1024px) {
  .footer-content {
    padding: 0 25px;
  }

  .footer-content p {
    font-size: 14px;
  }

  .social-icons a i {
    font-size: 16px;
  }
}


/* ------------------------------------------------------------------------------------ */

        /*   =============================
                 Login Page from Styles
              ============================== */

/* Login Page Styles */

.login-container {
  width: 80%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  position: relative;
}

.login-left {
  flex: 1;
  /*background: rgba(255, 255, 255, 0.1);*/
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px;
  background-color: rgb(219, 250, 234);
}

.login-left img {
  width: 180px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));

  mix-blend-mode: multiply;
  background: transparent;
}

.login-right {
  flex: 1.2;
  padding: 60px 50px;
  color: white;
}

.login-right .icon {
  display: flex;
  justify-content: center;
  align-items: center;   /* 🔑 IMPORTANT */
  margin-bottom: 15px;
 
  width: 70px;
  height: 55px; 
  margin: 0 auto 20px;
  /* background: rgba(255,255,255,0.15);
  border-radius: 50%; */
  
}

.login-right .icon i {
  font-size: 45px;
  /* line-height: 1; */
}

.login-right h2 {
  text-align: center;
  margin-bottom: 25px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 35px;
  margin-top: -20px;
}

/* USER TYPE BUTTONS */
.user-type {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}

.user-option {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  padding: 8px 0;              /* vertical padding only */
  width: 120px;                /* 🔹 fixed smaller width */
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: center;     /* center text + icon */
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.user-option i {
  font-size: 15px;
  margin-bottom: 5px;
}

.user-option.active,
.user-option:hover {
  background: #2196f3;
  transform: scale(1.05);
}

/* INPUT FIELDS */
.input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  padding: 10px 15px;
  border-radius: 30px;
  position: relative;

  width: 100%;
}

.input-group i {
  margin-right: 10px;
  color: white;

}

.input-group input {
  background: transparent !important;;
  border: none !important;;
  outline: none;
  color: #fff;
  flex: 1;
  font-size: 15px;
  padding-right: 40px;
  box-shadow: none !important;;

}

.input-group input::placeholder {
  color: white;
  
}

/* password-icon */
.input-group .toggle-password {
  color: white;
  position: absolute;
  right: 5px;
  font-size: 15px;
  position: relative;
}

.input-group .toggle-password:hover {
  color: #1e90ff;
}

/* login pages -- Invalid credentials   */
#error {
  color: red;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: center; 
  display: none; /* hidden by default */
}

.remember-me {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 20px;
  align-items: center;
  margin-left: 3%;
  margin-right: 3%;
  
}

.remember-me a {
  color: white;
  text-decoration: none;
}

.remember-me a:hover {
  color: #004aad;
  text-decoration: underline;
}

.primary-btn {
  width: 100%;
  padding: 8px;
  border: none;
  background: #2196f3;
  color: white;
  border: none;
  font-weight: 500;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.primary-btn:hover {
  background: #096fc9;
}

/* REGISTER LINK */
.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 15px;
}

.register-link a {
  color: rgb(13, 63, 109);
  text-decoration: none;
  font-weight: 500;
}

.register-link a:hover {
  text-decoration: underline; 
}


          /* Login pages animated  */

         /* Add this to your styles.css */

.login-container {
  opacity: 0; /* start hidden */
  transform: translateY(-50px); /* start slightly above */
  transition: all 0.8s ease-out;
}

/* Add an active class to trigger animation */
.login-container.active {
  opacity: 1;
  transform: translateY(0); /* move to original position */
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.login-container.active {
  animation: bounceIn 0.8s ease forwards;
}

.input-group input {
  transition: 0.3s ease;
}

.input-group input:focus {
  transform: scale(1.05);
  border-color: #036868;
}


                     /* ===== Responsive Styles - Login Page ===== */ 

                          /* ===== Tab -> 1024 × 768 ===== */

@media (max-width: 1024px) {

  .login-container {
    width: 90%;
    max-width: 720px;
  }

  .login-left {
    padding: 30px;
  }

  .login-left img {
    width: 160px;
  }

  .login-right {
    padding: 40px 35px;
  }

  .login-right h2 {
    font-size: 30px;
  }
}


                            /* ===== Tab -> iPad Landscape — 768 × 1024 ===== */

@media (max-width: 768px) {

  body {
    display: block;
    padding: 15px;
    overflow-y: auto;
  }

  .login-container {
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
  }

  .login-left {
    padding: 30px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }

  .login-left img {
    width: 140px;
  }

  .login-right {
    padding: 30px 20px;
  }

  .login-right h2 {
    font-size: 26px;
  }

  .user-type {
    gap: 15px;
  }

  .user-option {
    width: 100px;
    font-size: 13px;
  }
}


                  /* ================================
                        Mobile Responsive (≤480px)
                        Covers: 320, 360, 375, 414
                     ================================ */

@media (max-width: 480px) {

  .login-left img {
    width: 120px;
  }

  .login-right h2 {
    font-size: 24px;
  }

  .input-group input {
    font-size: 14px;
  }

  .remember-me {
    font-size: 13px;
    flex-direction: column;
    gap: 8px;
  }

  .primary-btn {
    font-size: 14px;
    padding: 8px;
  }

  .register-link {
    font-size: 14px;
  }
}


/* 📱 VERY SMALL DEVICES (320 x 568) */
@media (max-width: 360px) and (max-height: 568px) {

  body {
    padding: 15px;
    align-items: flex-start;
  }

  .login-container {
    margin-top: 10px;
   
  }

  .login-left {
    padding: 15px;
  }

  .login-left img {
    max-width: 150px;
  }

  .login-right {
    padding: 20px 10px;
  }

  .login-right h2 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .login-right .icon {
    width: 55px;
    height: 55px;
    margin-bottom: 10px;
  }

  .login-right .icon i {
    font-size: 24px;
  }

  .user-type {
    gap: 10px;
    margin-bottom: 15px;
  }

  .user-option {
    font-size: 13px;
    padding: 6px 12px;
  }

  .input-group {
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .remember-me {
    font-size: 12px;
    margin-bottom: 15px;
  }

  .primary-btn {
    padding: 8px;
    font-size: 14px;
  }

  .register-link {
    font-size: 13px;
    margin-top: 12px;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------------------*/

       /* =============================
             Dashboard Page from Styles
          ============================== */


    /* Dashboard header */
.header-top-dash {
  /* background-color: #2c3e50; */
  color: #0556a7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 40px;
  font-size: 25px;
  flex-wrap: wrap;
}

.left-section-dash {
  display: flex;
  align-items: center;
  gap: 160px;
}

.menu-toggle-dash {
  font-size: 25px;
  /* background: none; */
  /* border: none; */
  color: rgb(31, 104, 20);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  margin-left: 20%;
}

.logo-dash {
  width: auto;
  max-height: 75px; /* Adjust size of logo */
  margin-top: -5px;
  margin-bottom: -5px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

 /* Student  Portal Title */
.portal-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 auto;
  color: #0a7c43;
}


/* Right Header Section */
.right-section-dash {
  display: flex;
  align-items: center;
  gap: 55px;
}

.search-bar {
  border: 2px solid #088b4a;
  padding: 8px 25px;
  border-radius: 4px;
  font-size: 15px;
  /* border: none; */
  outline: none;
}

.search-bar::placeholder {
  color: #111;
}

   /* Profile Dropdown */
.profile-dropdown {
  position: relative;
}

#profileBtn {
  font-size: 27px;
  background: none;
  border: none;
  cursor: pointer;
  color: #088b4a;
  transition: color 0.3s ease;
  margin-bottom: -15px;
  margin-top: 2px;

}

#profileBtn:hover {
  color: #065e19;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 50px;
  right: -10px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  flex-direction: column;
  min-width: 182px;
  z-index: 100;
  border: 1px solid #34495e;
  padding: 10px 2px;
}

.dropdown-menu ::after {
  content: "";
  position: absolute;
  top: -6px; /* small gap above box */
  right: 20px; /* adjust horizontally */
  width: 12px;
  height: 12px;
  background: white;
  border-left: 1px solid #34495e;
  border-top: 1px solid #34495e;
  transform: rotate(45deg);
  z-index: -1; /* keeps arrow under text */
}

.dropdown-menu a {
  /* display: block; */
  display: flex;
  padding: 10px 16px;
  text-decoration: none;
  color: black;
  transition: background 0.2s;
  font-size: 14.5px;
  align-items: center;
  gap: 10px;
}

.dropdown-menu a i {
  color: #088b4a;
}

.dropdown-menu a:hover {
  background: #f0f0f0;
}

                                /* ---------------- responsive dashboard header -----------------  */


                                /* --------------MOBILE RESPONSIVE CSS (≤ 767px) ------------------- */

@media (max-width: 767px) {

  .header-top-dash {
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    gap: 10px;
  }

  .left-section-dash {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .menu-toggle-dash {
    margin-left: 0;
    font-size: 22px;
    padding: 5px;
  }

  .logo-dash {
    max-height: 70px;
  }

  .portal-title {
    text-align: center;
    font-size: 22px;
    margin: 8px 0;
  }

  .right-section-dash {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
  }
}

@media (max-width: 767px) {
  .profile-dropdown {
    position: relative;
  }

  #profileBtn {
    font-size: 24px;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .dropdown-menu {
    right: 0;              
    left: auto;
    top: 40px;
    min-width: 160px;
    max-width: 90vw;
  }

  .dropdown-menu a {
    font-size: 14px;
    padding: 8px 12px;
  }
}

                        /* ------------------------ Proper Tablet Layout (768px – 1024px) -------------------------- */


@media (min-width: 768px) and (max-width: 1024px) {

  .header-top-dash {
    padding: 10px 20px;
    gap: 10px;
  }

  .left-section-dash {
    gap: 50px; 
    flex: 1;
  }

  .portal-title {
    font-size: 25px;
    text-align: center;
    white-space: nowrap;
    margin-right: 150px ;
  }

  .menu-toggle-dash {
    margin-left: 10px;
    padding: 5px;
  }

  .right-section-dash {
    gap: 20px;
  }

  .search-bar {
    width: 160px;   
    padding: 6px 12px;
    font-size: 14px;
  }

  #profileBtn {
    font-size: 24px;
  }
}

@media (max-width: 1024px) {
  .search-bar {
    display: none;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------- */

                           /* ------------------- Dashboard sidebar ---------------- */

.dashboard {
  display: flex;
}

.sidebar {
  width: 250px;
  /* background-color: #34495e; */
  /* background: linear-gradient(135deg, #01500e, #024e2f); */

  background: linear-gradient(180deg,#084a2a,#05352a);
  color: white;
  padding: 20px;
  min-height: calc(100vh - 60px);
  transition: transform 0.3s ease;
  flex-shrink: 0;

}

.sidebar ul {
  list-style: none;
  
}

.sidebar ul li {
  margin: 15px 5px;

}

.sidebar ul li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  display: block;
  display: flex;
  align-items: center;
  gap: 11px; 
  padding: 5px 5px;
  font-size: 17px;
  transition: background 0.2s ease;

}

.sidebar ul li a i {
  width: 20px;
  text-align: center;
  color: #007bff;
  
}

  /* When hovered */
.sidebar ul li a:hover {
  background-color: #026b38;
  border-radius: 5px;

}

/* Active link (optional highlight) */
/* .sidebar ul li a.active {
  background-color: #028a48;
} */


.sidebar ul li:nth-child(1) i { color: #00ff99; }  /* Dashboard */
.sidebar ul li:nth-child(2) i { color: #00bfff; }  /* Topics */
.sidebar ul li:nth-child(3) i { color: #ff9900; }  /* Course Materials */
.sidebar ul li:nth-child(4) i { color: #ff6666; }  /* Videos */
.sidebar ul li:nth-child(5) i { color: #c266ff; }  /* Tests */
.sidebar ul li:nth-child(6) i { color: #33cc33; }  /* Score */
.sidebar ul li:nth-child(7) i { color: #ff3333; }  /* Logout */


/* .sidebar ul li a:hover {
  background-color: #4b5563;
  padding-left: 10px;
  border-radius: 4px;
} */














/* MOBILE VIEW */
/* MOBILE */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%); /* hidden */
    z-index: 1000;
  }

  .sidebar.active {
    transform: translateX(0); /* show */
  }
}




/* --------------------------------------------------------------------------------------------------------------------- */

/*----- Dashboard Main Content ------*/
.main-content {
  flex-grow: 1;
  padding: 25px;
  /* background: #f4f4f4; */
  background: linear-gradient(120deg, #87aca3, #9cdbd2);
}

.main-content h1 {
  font-size: 35px;
  margin-bottom: 15px;
}

.main-content p {
  font-size: 18px;
  color: #555;
  margin-bottom: 30px;
}

.cards {
  display: flex;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.card {
  background: white;
  padding: 20px;
  flex: 1 1 250px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.modules,
.resources {
  background: white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
}

.modules ul,
.resources ul {
  margin-top: 10px;
  list-style: none;
}

.modules li {
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}

.modules li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3498db;
}

.resources a {
  text-decoration: none;
  color: #3498db;
}

/* ========================= */
/* 📱 MOBILE RESPONSIVE */
/* ========================= */
@media (max-width: 414px) {
  .main-content {
    padding: 12px;
  }

  .main-content h1 {
    font-size: 22px;
  }

  .main-content p {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .cards {
    flex-direction: column;
    gap: 12px;
  }

  .card {
    flex: 1 1 100%;
    padding: 15px;
  }

  .modules,
  .resources {
    padding: 15px;
  }
}

/* ========================= */
/* 📱 SMALL MOBILE */
/* ========================= */
@media (max-width: 375px) {
  .main-content h1 {
    font-size: 20px;
  }

  .main-content p {
    font-size: 13px;
  }
}

/* ========================= */
/* 📱 TABLET (768px) */
/* ========================= */
@media (max-width: 768px) {
  .main-content {
    padding: 18px;
  }

  .main-content h1 {
    font-size: 28px;
  }

  .main-content p {
    font-size: 16px;
  }

  .cards {
    flex-wrap: wrap;
  }

  .card {
    flex: 1 1 45%;
  }
}

/* ========================= */
/* 📱 TABLET LANDSCAPE (1024px) */
/* ========================= */
@media (max-width: 1024px) {
  .card {
    flex: 1 1 45%;
  }
}


/* ----------------------------------------------------------------- */

        /* =============================
             Contact_Us Page from Styles
          ============================== */

                 /* ---------------- Contact_Us - Banner ------------- */

.contact-banner {
  width: 100%;
  height: auto;
  max-height: 265px; /* Adjust height as needed */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  margin-top: -10px;
}

.contact-text {
  position: relative;
  text-align: center;
  color: whitesmoke;
}

.contact-text h1 {
  /* font-style: italic; */
  position: absolute;
  top: 35%;
  left: 20%;
  nav-down: auto;
  transform: translate(-50%, -50%);
  font-size: 52px;
  padding: 20px;
  /* background-color: rgba(255, 255, 255, 0.7); Semi-transparent background */
  /* border-radius: 10px; */
  max-width: 80%;
  color: yellow;
}

.contact-text p {
  position: absolute;
  top: 60%;
  left: 20%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  padding: 10px;
  /*background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  /* border-radius: 10px; */
  max-width: 80%; /* Limit width for better readability */
  color: orange;

  text-align: justify; /* optional: makes the paragraph clean and aligned */
  word-wrap: break-word; /* ensures long words don’t overflow */
}


                /* -------------------- Responsive Styles for Contact Us Banner --------------------- */

                      /* --------- MOBILE (max-width: 576px) ----------------- */

@media (max-width: 576px) {

  .contact-banner {
    max-height: 160px;
  }

  .contact-text h1 {
    top: 32%;
    left: 30%;
    font-size: 23px;
    padding: 10px;
    transform: translate(-50%, -50%);
    max-width: 100%;
    text-align: center;
  }

  .contact-text p {
    top: 65%;
    left: 32.5%;
    font-size: 10.5px;
    padding: 6px;
    transform: translate(-50%, -50%);
    max-width: 100%;
    text-align: center;
  }
}


                      /* --------- TABLET (577px to 1024px) ----------------- */

@media (min-width: 577px) and (max-width: 1024px) {

  .contact-banner {
    max-height: 220px;
  }

  .contact-text h1 {
    top: 38%;
    left: 30%;
    font-size: 36px;
    max-width: 85%;
  }

  .contact-text p {
    top: 65%;
    left: 30%;
    font-size: 18px;
    max-width: 85%;
  }
}

                      /* --------- Laptops (1025px to 1366px) ----------------- */

@media (min-width: 1025px) and (max-width: 1366px) {

  .contact-text h1 {
    font-size: 44px;
  }

  .contact-text p {
    font-size: 20px;
  }
}


/* -------------------------------------------------------------------------------------------------------------------------- */


                                 /* ---------------- Contact pages - Form styles --------------- */

.contact-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 3px;
}

.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  
}

.contact-form h2 {
  text-align: center; /* center align text */
  color: #068d53; /* blue color (you can change hex code) */
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.contact-form h2::after {
  display: none;
}

.contact-form label {
  display: block; /* ensures label stays above input */
  margin-bottom: 6px;
}

/* Contact pages */
/* Form styles */
.contact-form {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  order: 2;
}

.form-group {
  margin-bottom: 15px;
}


                                     /* --------------- Contact pages --------------*/
                                      /* ------------- Address styles ------------ */


.contact-info {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 17px;
}

.address-box {
  /* margin-bottom: 15px; */
  /* padding-left: 10px; */

  background-color: #fff; /* White background */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 8px; /* Rounded corners */
  padding: 15px 30px; /* Inner spacing */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  max-width: 500px; /* Optional width */
  margin: 20px auto; /* Center horizontally */
  font-family: Arial, sans-serif;
}

.address-box:hover {
  transform: translateY(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.address-box h4 {
  margin-bottom: 15px;
  color: #068d53;
  font-size: 18px;
}

.address-box p {
  margin: 20px 0;
  font-size: 16px;
  color: #0556a7;
}

.contact-info p {
  margin-bottom: 15px;
  line-height: 1.5;
}

.address-box h4 i {
  color: #068d53; /* blue icon */
  margin-right: 10px;
  margin-left: -10px;
}


            /* ------------------------------ responsive styles for Contact Us Form Page and address ----------------------------  */

/* ===============================
   TABLET VIEW
   768px – 1023px
================================ */
@media (max-width: 1024px) {
  .contact-container {
    gap: 25px;
  }

  .contact-info,
  .contact-form {
    flex: 1 1 50%;
  }

  .address-box {
    max-width: 100%;
    margin: 10px 0;
  }
}

/* ===============================
   MOBILE VIEW
   ≤ 767px
================================ */
@media (max-width: 767px) {
  .contact-container {
    flex-direction: column;
    gap: 20px;

  }

  /* Address first, form below */
  .contact-info {
    order: 2;
  }

  .contact-form {
    order: 1;
    margin-top: -20px;
  }

  .contact-info,
  .contact-form {
    width: 100%;
  }

  .address-box {
    max-width: 100%;
    margin: 0;
    padding: 15px;
  }

  .contact-form {
    padding: 15px;
  }

  .contact-form h2 {
    font-size: 20px;
  }

  .address-box p {
    font-size: 14px;
  }
}

/* ===============================
   VERY SMALL MOBILES
   ≤ 375px
================================ */
@media (max-width: 375px) {
  .address-box h4 {
    font-size: 16px;
  }

  .address-box p {
    font-size: 13px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------- */

                          /* ---------------------- Contact Pages - Google Map ------------------------------------ */

.map-container {
  margin-top: 100px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(45, 218, 2, 0.1);
  height: 520px;
  margin: 10px 200px;
  max-width: 85%;
  margin-bottom: 50px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}


                                     /*------------- Responsive google Map Container ---------- */

                                        /* --------- MOBILE (max-width: 576px) ----------------- */

@media (max-width: 576px) {

  .map-container {
    margin: 20px 15px;
    height: 280px;
    max-width: 100%;
  }
}

                                        /* --------- TABLET (577px to 1024px) ----------------- */

@media (min-width: 577px) and (max-width: 1024px) {

  .map-container {
    margin: 30px 40px;
    height: 380px;
    max-width: 100%;
  }
}

                                        /* --------- LAPTOP (1025px to 1366px) ----------------- */

@media (min-width: 1025px) and (max-width: 1366px) {

  .map-container {
    margin: 40px auto;
    height: 460px;
    max-width: 90%;
  }
}

                                        /* --------- DESKTOP (1367px and above) ----------------- */  

@media (min-width: 1367px) {

  .map-container {
    height: 520px;
    max-width: 85%;
    margin: 10px auto 50px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------- */

           /* --------------------------- World Wide Branches Section - Contacts Page -------------------------------  */

.branches-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 35px 10%;
  flex-wrap: wrap;
  background-color: #fff;
  margin-bottom: -10px;

   gap: 40px;
}

.branches-text {
  max-width: 400px;
  text-align: left;

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1.5s ease forwards 0.3s;

}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.branches-text h2 {
  color: #007c88;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}


.branches-text h2::after {
  width: 130px;
  height: 3px;
  display: block;
  border-radius: 2px;
  margin-left: 1%;
  background: linear-gradient(90deg, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9);
  background-size: 300%;
  animation: colorFlow 3s linear infinite;

}

.branches-text p {
  color: #333;
  font-size: 1.5rem;

  line-height: 1.5;
}


/* 🌎 Map Container */
.world-map-container {
  position: relative;
  width: 600px;
  height: 400px;
  background: url('picture/World-map.jpg') no-repeat center;
  background-size: contain;

  overflow: hidden;
  transition: all 0.6s ease;
  border-radius: 5px;
  
}


/* ✨ Glow and shine on hover */
.world-map-container:hover {
  box-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
  filter: brightness(1.1);
}

.world-map-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-25deg);
}

.world-map-container:hover::after {
  animation: shine 1.2s forwards;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* 📍 Red Location Pins */
.pin {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  cursor: pointer;

  /* animation: pulse 2s infinite ease-in-out; */
   
  animation: dropPin 1s forwards;
  animation-delay: var(--delay, 0s);

}


@keyframes dropPin {
  0% { transform: translateY(-50px) rotate(-45deg) scale(0); opacity: 0; }
  100% { transform: translateY(0) rotate(-45deg) scale(1); opacity: 1; }
}

/* @keyframes pulse {
  0% { transform: scale(1) rotate(-45deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(-45deg); opacity: 0.7; }
  100% { transform: scale(1) rotate(-45deg); opacity: 1; }
} */


/* 🌟 Hover Tooltip for Pins */
.pin:hover::before {
  content: attr(title);
  position: absolute;
  top: -35px;
  left: -20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  animation: tooltipFade 0.4s forwards;
}

@keyframes tooltipFade {
  to { opacity: 1; transform: translateY(0); }
}

.pin::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 50%;
}


/* 🌐 Approximate positions (adjust for your map image) */
.india { top: 40%; left: 68%; }
.dubai { top: 60%; left: 48%; }
.singapore { top: 20%; left: 75%; }
.london { top: 38%; left: 48%; }
.usa { top: 48%; left: 20%; }
.germany { top: 47%; left: 51%; }
.france { top: 40%; left: 55%; }


                        /* ----------------responsive Styles for World Wide Branches Section ---------------*/

                                 /* ---------------- MOBILE (320px – 576px) -------------- */

@media (max-width: 576px) {

  .branches-section {
    flex-direction: column;
    padding: 25px 15px;
    text-align: center;
  }

  .branches-text {
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .branches-text h2 {
    font-size: 1.8rem;
  }

  .branches-text h2::after {
    margin: 8px auto 0;
  }

  .branches-text p {
    font-size: 1rem;
  }

  .world-map-container {
    width: 100%;
    height: 240px;
  }

  .pin {
    width: 14px;
    height: 14px;
  }

  .pin::after {
    width: 5px;
    height: 5px;
    top: 4.5px;
    left: 4.5px;
  }
}


                          /* --------------- Tablet (577px – 1024px) ---------------- */

@media (min-width: 577px) and (max-width: 1024px) {

  .branches-section {
    padding: 35px 5%;
    gap: 30px;
  }

  .branches-text {
    max-width: 360px;
  }

  .branches-text h2 {
    font-size: 2.1rem;
  }

  .branches-text p {
    font-size: 1.2rem;
  }

  .world-map-container {
    width: 480px;
    height: 320px;
  }

  .pin {
    width: 18px;
    height: 18px;
  }

  .pin::after {
    width: 7px;
    height: 7px;
    top: 5.5px;
    left: 5.5px;
  }
}


                          /* --------------- Laptop (1025px – 1439px) ---------------- */ 

@media (min-width: 1025px) and (max-width: 1439px) {

  .world-map-container {
    width: 550px;
    height: 360px;
  }

  .branches-text p {
    font-size: 1.35rem;
  }
}

                          /* --------------- Desktop (1440px and above) ---------------- */ 

@media (min-width: 1440px) {

  .world-map-container {
    width: 650px;
    height: 420px;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------- */


                          /*   =======================================
                                home page  Popup Enquiry Form Styles
                               ======================================= */

/* Dark overlay */
.popup-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* stays on top of everything */
}

/* Popup Box */
.popup-box {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  width: 360px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: popup-zoom 0.3s ease;
}

/* Heading */
.popup-box h2 {
  margin-bottom: 15px;
  font-size: 22px;
  color: #068d53;
}

/* Inputs & textarea */
.popup-box input,
.popup-box textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  color: black;

  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Submit button */
.popup-box button {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.popup-box button:hover {
  background: #218838;
}

/* Close button */
.close-btn {
  float: right;
  cursor: pointer;
  font-size: 20px;
  color: red;
  font-weight: bold;
}

body.no-scroll {
  overflow: hidden;
}

/* Popup animation */
@keyframes popup-zoom {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Style for dropdown (select box) */
.popup-box select {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  appearance: none; /* removes default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  color: black;
  outline: none;
}

.popup-box input::placeholder,
.popup-box textarea::placeholder,
.popup-box select::placeholder {
  color: black;
}

/* When user clicks (focuses) on the field */
.popup-box input:focus,
.popup-box select:focus,
.popup-box textarea:focus {
  border-color: #4caf50; /* Green border color */
  box-shadow: 0 0 5px #4caf50; /* Soft glow effect */
}

/* ---------------- Fee Calculation Box ------------------ */

#feeBox {
  display: none;
  /* margin-top: 18px; */
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7f9ff, #eef2ff);
  border: 1px solid #dbe3ff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  max-width: 420px;

}

/* Fee & Discount rows */
#feeBox p {
  /* margin: 6px 0; */
  font-size: 15px;
  color: #444;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

/* Final amount */
#feeBox h3 {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #cfd8ff;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: #1a237e;
  font-weight: 700;
}

/* Price numbers highlight */
#fee,
#discount,
#final {
  font-weight: 700;
}

/* Discount in green */
#discount {
  color: #16a34a;
}

/* Final price highlight */
#final {
  color: #0b5ed7;
  font-size: 22px;
}


                            /* ----------- responsive Styles for Fee Calculation Box ------------ */

                     /* ------------------------ ✅ Tablet (768px and below) --------------------------- */

@media (max-width: 768px) {
  #feeBox {
    max-width: 100%;
    padding: 16px;
  }

  #feeBox h3 {
    font-size: 18px;
  }
}


       /* -------------------------------- ✅ Mobile (480px and below) ------------------------------- */

@media (max-width: 480px) {

  #feeBox {
    max-width: 100%;
    padding: 14px;
    border-radius: 10px;
  }

  #feeBox p {
    font-size: 14px;
  }

  #feeBox h3 {
    font-size: 17px;
  }

  #final {
    font-size: 20px;
  }
}





                      /* ----------------------- ✅ Laptops (1025px to 1366px) ------------------------ */  

@media (min-width: 1600px) {
  #feeBox {
    max-width: 600px;
    padding: 26px 32px;
  }

  #feeBox h3 {
    font-size: 22px;
  }

  #final {
    font-size: 24px;
  }
}

                      /* ----------------------- ✅ Desktops (1367px to 1599px) ------------------------ */ 

@media (min-width: 1920px) {
  #feeBox {
    max-width: 680px;
  }
}





                      /* ----------------- responsive styles - home page popup enquiry form -------------------- */

                                          /* ------------  1280 × 768 --------------- */

@media (max-width: 1280px) {
  .popup-box {
    width: 340px;
    padding: 22px;
  }

  .popup-box h2 {
    font-size: 21px;
  }
}
 
                                /* ---------------- 1600 × 900 ----------------- */

@media (min-width: 1367px) and (max-width: 1600px) {
  .popup-box {
    width: 380px;
    padding: 28px;
  }

  .popup-box h2 {
    font-size: 23px;
  }
}

                                   /* ---------------- 1920 × 1080 -------------- */

@media (min-width: 1601px) {
  .popup-box {
    width: 420px;
    padding: 32px;
  }

  .popup-box h2 {
    font-size: 24px;
  }

  .popup-box input,
  .popup-box select,
  .popup-box textarea {
    font-size: 15px;
  }
}

                                         /* --------------- 768 × 1024 & 1024 × 768 ----------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .popup-box {
    width: 90%;
    max-width: 400px;
    padding: 22px;
  }

  .popup-box h2 {
    font-size: 20px;
  }

  .popup-box input,
  .popup-box select,
  .popup-box textarea {
    font-size: 14px;
  }
}

                      /* --------------- 320 × 568 → 414 × 736 --------- */

@media (max-width: 767px) {
  .popup-box {
    width: 80%;
    padding: 18px;
    border-radius: 10px;
  }

  .popup-box h2 {
    font-size: 18px;
  }

  .popup-box input,
  .popup-box select,
  .popup-box textarea {
    font-size: 13.5px;
    padding: 9px;
  }

  .popup-box button {
    font-size: 14px;
    padding: 10px;
  }

  .close-btn {
    font-size: 18px;
  }
}


/* ----------------------------------------------------------------------------------- */

            /* ====================================
                       Course overview
               ====================================   */

.course {
  background-image: url("picture/course-overview.jpg"); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  padding: 80px 0; 

  margin-bottom: 50px;
  position: relative;
  overflow: hidden;

  margin-top: -10px;

}

.course h1 {
  text-align: center;
  color: #fff;
  font-size: 2rem;
  letter-spacing: 1px;
  font-family: "Source Serif 4", Sans-serif;
  font-size: 50px;
  font-weight: 600;

  margin-top: -50px;
  gap: 100px;
}

.course p {
  text-align: justify;
  color: #e2f105; 
  font-size: 18px;
  max-width: 700px;
  margin: 20px auto 0;
  line-height: 1.6;
  margin-bottom: -50px;
}


                      /* --------------- Responsive Styles for Course Overview Section --------------- */

                                        /* --------- DESKTOP (1025px to 1366px) ----------------- */  

@media (min-width: 768px) and (max-width: 1024px) {
  .course {
    padding: 70px 30px;
  }

  .course h1 {
    font-size: 40px;
  }

  .course p {
    font-size: 16px;
    max-width: 600px;
  }
}

                          /* --------- TABLET (481px to 767px) ----------------- */

@media (min-width: 481px) and (max-width: 767px) {
  .course {
    padding: 60px 20px;
  }

  .course h1 {
    font-size: 32px;
  }

  .course p {
    font-size: 15px;
  }
}

                          /* --------- MOBILE (max-width: 480px) ----------------- */

@media (max-width: 480px) {
  .course {
    padding: 70px 15px;
  }

  .course h1 {
    font-size: 25px;
  }

  .course p {
    font-size: 13px;
    text-align: left;
  }
}

                          /* --------- LARGE DESKTOP (1367px to 1599px) ----------------- */

@media (min-width: 1600px) {
  .course h1 {
    font-size: 56px;
  }

  .course p {
    font-size: 19px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------------- */

                                    /*---------------course overview - Medical Coding --------------- */

.medical-coding-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.image-container img {
  width: 400px; 
  height: auto;
}

.text-container h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.text-container p {
  font-size: 17px;
  color: #333; 
  line-height: 1.6;
  text-align: justify;
}


                      /* --------------- Responsive Styles for Medical Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */

@media (max-width: 767px) {
  .medical-coding-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
    margin-top: -30px;
  }

  .image-container img {
    max-width: 100%;
  }

  .text-container h2 {
    font-size: 20px;
    text-align: center;
  }

  .text-container h2::after {
   display: none;
  }

  .text-container p {
    font-size: 15px;
    text-align: left;
  }
}

                                        /* --------- TABLET (768px to 1024px) ----------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .medical-coding-section {
    gap: 30px;
    padding: 20px;
  }

  .image-container img {
    max-width: 320px;
  }

  .text-container h2 {
    font-size: 22px;
  }

  .text-container p {
    font-size: 16px;
  }
}

                                        /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .medical-coding-section {
    max-width: 1400px;
  }

  .image-container img {
    max-width: 400px;
  }

  .text-container h2 {
    font-size: 25px;
  }

  .text-container p {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------------- */

                       /* ===== course overview page equiry btn   Enquiry Button Fixed Bottom ===== */

.enquiry-btn-container-cr-ls {
  position: fixed;      
  bottom: 30px;
  left: 50%;            
  transform: translateX(-50%); 
  z-index: 9999;

   /* display: flex;
  justify-content: center;
  margin: 40px 0; */
}

.enquiry-btn-cr-ls {
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: #fff;
  padding: 14px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: inline-block;

  white-space: nowrap;
}

.enquiry-btn-cr-ls:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #0056b3, #003f80);
}

@media (max-width: 480px) {
  .enquiry-btn-container-cr-ls {
    bottom: 15px;
  }

  .enquiry-btn-cr-ls {
    padding: 10px 18px;
    font-size: 14px;
  }
}


@media (min-width: 481px) and (max-width: 1024px) {
  .enquiry-btn-container-cr-ls {
    bottom: 25px;
  }

  .enquiry-btn-cr-ls {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------------------- */

                                              /*-------- course overview - BMCT Coding ------- */

.bmct-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;

}

.bmct-section img {
  width: 400px;
  height: auto;
}

.bmct-section h2 {
  font-size: 25px;
  color: #004aad; 
  margin-bottom: 20px;
}

.bmct-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}

                      /* --------------- Responsive Styles for BMCT Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */


@media (max-width: 767px) {
  .bmct-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .bmct-section img {
    max-width: 100%;
    order: 1;
  }

  .bmct-section .text-container {
    order: 2;          
  }

  .bmct-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .bmct-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                        /* --------- TABLET (768px to 1024px) ----------------- */    

@media (min-width: 768px) and (max-width: 1024px) {
  .bmct-section {
    gap: 30px;
    padding: 20px;
  }

  .bmct-section img {
    max-width: 320px;
  }

  .bmct-section h2 {
    font-size: 22px;
  }

  .bmct-section p {
    font-size: 16px;
  }
}

                                        /* --------- LAPTOP (1025px to 1279px) ----------------- */   

@media (min-width: 1280px) {
  .bmct-section {
    max-width: 1400px;
  }

  .bmct-section img{
    max-width: 400px;
  }

  .bmct-section h2{
    font-size: 25px;
  }

  .bmct-section p {
    font-size: 17px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------ */

                                  /*---------- Course overview - AMCT Coding --------------------*/

.Amct-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.Amct-section img {
  width: 400px;
  height: auto;
}

.Amct-section h2 {
  font-size: 25px;
  color: #004aad; 
  margin-bottom: 20px;
}

.Amct-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}


                      /* --------------- Responsive Styles for AMCT Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */

@media (max-width: 767px) {
  .Amct-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .Amct-section img {
    max-width: 100%;
  }

  .Amct-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .Amct-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                        /* --------- TABLET (768px to 1024px) ----------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .Amct-section {
    gap: 30px;
    padding: 20px;
  }

  .Amct-section img {
    max-width: 320px;
  }

  .Amct-section h2 {
    font-size: 22px;
  }

  .Amct-section p {
    font-size: 16px;
  }
}

                                        /* --------- LAPTOP (1025px to 1279px) ----------------- */ 

@media (min-width: 1280px) {
  .Amct-section {
    max-width: 1400px;
  }

  .Amct-section img {
    max-width: 400px;
  }

  .Amct-section h2 {
    font-size: 25px;
  }

  .Amct-section p {
    font-size: 17px;
  }
} 


/* -------------------------------------------------------------------------------------------------------------------------------- */

                                   /* ---------- course overview - CPC Coding ------------- */

.CPC-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.CPC-section img {
  width: 400px;
  height: auto;
}

.CPC-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.CPC-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}


                                 /* --------------- Responsive Styles for CPC Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */

@media (max-width: 767px) {
  .CPC-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .CPC-section img {
    max-width: 100%;
  }

  .CPC-section .text-container {
    order: 2;          
  }

  .CPC-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .CPC-section p {
    font-size: 15px;
    text-align: left;
  }
}


                                    /* --------- TABLET (768px to 1024px) ----------------- */                    


@media (min-width: 768px) and (max-width: 1024px) {
  .CPC-section {
    gap: 30px;
    padding: 20px;
  }

  .CPC-section img {
    max-width: 320px;
  }

  .CPC-section h2 {
    font-size: 22px;
  }

  .CPC-section p {
    font-size: 16px;
  }
}

                   /* --------- LAPTOP (1025px to 1279px) ----------------- */ 

@media (min-width: 1280px) {
  .CPC-section {
    max-width: 1400px;
  }

 .CPC-section img {
    max-width: 400px;
  }

  .CPC-section h2 {
    font-size: 25px;
  }

  .CPC-section p {
    font-size: 17px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------- */

                                   /* ------------- course overview -- EM Coding --------------- */

.EM-section {
  display: flex;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.EM-section img {
  width: 400px;
  height: auto;
}

.EM-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.EM-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}

                           /* --------------- Responsive Styles for EM Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */


@media (max-width: 767px) {
  .EM-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .EM-section img {
    max-width: 100%;
  }

  .EM-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .EM-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                  /* --------- TABLET (768px to 1024px) ----------------- */   

@media (min-width: 768px) and (max-width: 1024px) {
  .EM-section {
    gap: 35px;
    padding: 20px;
  }

  .EM-section img {
    max-width: 320px;
  }

  .EM-section h2 {
    font-size: 22px;
  }

  .EM-section p {
    font-size: 16px;
  }
}

                                               /* --------- LAPTOP (1025px to 1279px) ----------------- */ 

@media (min-width: 1280px) {
  .EM-section {
    max-width: 1400px;
  }

  .EM-section img {
    max-width: 400px;
  }

  .EM-section h2 {
    font-size: 25px;
  }

  .EM-section p {
    font-size: 17px;
  }
}


/* -------------------------------------------------------------------------------------------------------------------------------------- */

                                  /* -------------- course overview - ipdrg Coding ----------------- */

.ipdrg-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.ipdrg-section img {
  width: 400px;
  height: auto;
}

.ipdrg-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.ipdrg-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}


                                   /* --------------- Responsive Styles for ipdrg Coding Section --------------- */
 
                                              /* --------- MOBILE (max-width: 767px) ----------------- */

@media (max-width: 767px) {
  .ipdrg-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .ipdrg-section img {
    max-width: 100%;
  }

  .ipdrg-section .text-container {
    order: 2;          
  }

  .ipdrg-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .ipdrg-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                          /* --------- TABLET (768px to 1024px) ----------------- */   

@media (min-width: 768px) and (max-width: 1024px) {
  .ipdrg-section {
    gap: 30px;
    padding: 20px;
  }

  .ipdrg-section img {
    max-width: 320px;
  }

  .ipdrg-section h2 {
    font-size: 22px;
  }

  .ipdrg-section p {
    font-size: 16px;
  }
}

                                                /* --------- LAPTOP (1025px to 1279px) ----------------- */ 

@media (min-width: 1280px) {
  .ipdrg-section {
    max-width: 1400px;
  }

  .ipdrg-section img {
    max-width: 400px;
  }

  .ipdrg-section h2 {
    font-size: 25px;
  }

  .ipdrg-section p {
    font-size: 17px;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------------------- */

                                /* ---------------------- course overview - ED Coding --------------------*/

.ed-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}
  
.ed-section img {
  width: 400px;
  height: auto;
}

.ed-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.ed-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}


                   /* --------------- Responsive Styles for ED Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */



@media (max-width: 767px) {
  .ed-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .ed-section img {
    max-width: 100%;
  }

  .ed-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .ed-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                /* --------- TABLET (768px to 1024px) ----------------- */   

@media (min-width: 768px) and (max-width: 1024px) {
  .ed-section {
    gap: 30px;
    padding: 20px;
  }

  .ed-section img {
    max-width: 320px;
  }

  .ed-section h2 {
    font-size: 22px;
  }

  .ed-section p {
    font-size: 16px;
  }
}

                                             /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .ed-section {
    max-width: 1400px;
  }

  .ed-section img {
    max-width: 400px;
  }

  .ed-section h2 {
    font-size: 25px;
  }

  .ed-section p {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------------- */

                                   /* --------- course overview - ccs Coding -------------- */

.ccs-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.ccs-section img {
  width: 400px;
  height: auto;
}

.ccs-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.ccs-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}



                  /* --------------- Responsive Styles for Css Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */


@media (max-width: 767px) {
  .ccs-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .ccs-section img {
    max-width: 100%;
  }

  .ccs-section .text-container {
    order: 2;          
  }

  .ccs-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .ccs-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                    /* --------- TABLET (768px to 1024px) ----------------- */   

@media (min-width: 768px) and (max-width: 1024px) {
  .ccs-section {
    gap: 30px;
    padding: 20px;
  }

  .ccs-section img {
    max-width: 320px;
  }

  .ccs-section h2 {
    font-size: 22px;
  }

  .ccs-section p {
    font-size: 16px;
  }
}

                                              /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .ccs-section {
    max-width: 1400px;
  }

  .ccs-section img {
    max-width: 400px;
  }

  .ccs-section h2 {
    font-size: 25px;
  }

  .ccs-section p {
    font-size: 17px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------------- */

                                       /* ---------- course overview -- ccs Coding ------------ */

.cpma-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.cpma-section img {
  width: 400px;
  height: auto;
}

.cpma-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.cpma-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}

                         /* --------------- Responsive Styles for CPMA Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */


@media (max-width: 767px) {
  .cpma-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .cpma-section img {
    max-width: 100%;
  }

  .cpma-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .cpma-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                 /* --------- TABLET (768px to 1024px) ----------------- */   

@media (min-width: 768px) and (max-width: 1024px) {
  .cpma-section {
    gap: 30px;
    padding: 20px;
  }

  .cpma-section img {
    max-width: 320px;
  }

  .cpma-section h2 {
    font-size: 22px;
  }

  .cpma-section p {
    font-size: 16px;
  }
}

                                /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .cpma-section {
    max-width: 1400px;
  }

  .cpma-section img {
    max-width: 400px;
  }

  .cpma-section h2 {
    font-size: 25px;
  }

  .cpma-section p {
    font-size: 17px;
  }
}


/* --------------------------------------------------------------------------------------------------------------- */

                                       /* --------- course overview -- crc Coding -------------- */

.crc-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.crc-section img {
  width: 400px;
  height: auto;
}

.crc-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.crc-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}

                         /* --------------- Responsive Styles for crc Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */


@media (max-width: 767px) {
  .crc-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .crc-section img {
    max-width: 100%;
  }

  .crc-section .text-container {
    order: 2;          
  }

  .crc-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .crc-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                     /* --------- TABLET (768px to 1024px) ----------------- */   


@media (min-width: 768px) and (max-width: 1024px) {
  .crc-section {
    gap: 30px;
    padding: 20px;
  }

  .crc-section img {
    max-width: 320px;
  }

  .crc-section h2 {
    font-size: 22px;
  }

  .crc-section p {
    font-size: 16px;
  }
}

                                /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .crc-section {
    max-width: 1400px;
  }

  .crc-section img {
    max-width: 400px;
  }

  .crc-section h2 {
    font-size: 25px;
  }

  .crc-section p {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------- */

                                /*------------ course overview -- ivr Coding ----------------- */

.ivr-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 50px auto; 
  padding: 20px;
  background: none;
  border: none;
}

.ivr-section img {
  width: 400px;
  height: auto;
}

.ivr-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.ivr-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}

                              /* --------------- Responsive Styles for crc Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */

@media (max-width: 767px) {
  .ivr-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  .ivr-section img {
    max-width: 100%;
  }

  .ivr-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .ivr-section p {
    font-size: 15px;
    text-align: left;
  }
}

                              /* --------- TABLET (768px to 1024px) ----------------- */ 


@media (min-width: 768px) and (max-width: 1024px) {
  .ivr-section {
    gap: 30px;
    padding: 20px;
  }

  .ivr-section img {
    max-width: 320px;
  }

  .ivr-section h2 {
    font-size: 22px;
  }

  .ivr-section p {
    font-size: 16px;
  }
}

                              /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .ivr-section {
    max-width: 1400px;
  }

  .ivr-section img {
    max-width: 400px;
  }

  .ivr-section h2 {
    font-size: 25px;
  }

  .ivr-section p {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------- */

                          /* ----------- course overview - Surgery Coding ------------------- */

.surgery-section {
  display: flex;
  gap: 45px;
  max-width: 1200px;
  margin: 0 auto 30px auto;
  padding: 20px;
  background: none;
  border: none;
}

.surgery-section img {
  width: 400px;
  height: auto;
}

.surgery-section h2 {
  font-size: 25px;
  color: #004aad;
  margin-bottom: 20px;
}

.surgery-section p {
  font-size: 17px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}

section h2::after {
  content: "";
  width: 120px;
  height: 3px;
  background: #004aad;
  display: block;
  margin-top: 8px;
  border-radius: 2px;
}

                                    /* ----- course overview - Title color styling ------- */

.title-main {
  color: #004aad; 
  font-weight: bold;
}

.title-sub {
  color: #008000; 
  font-weight: bold;
}

            /* course Days */

.title-days {
  color: #004aad; 
  font-weight: bold;
}

               /* course duration */

.text-container .course-duration {
  margin-top: 15px;
  font-size: 16px;
  color: #006400;
}

.text-container .course-duration p {
  margin: 5px 0;
  color: #006400;
}

                            /* --------------- Responsive Styles for surgery Coding Section --------------- */

                                        /* --------- MOBILE (max-width: 767px) ----------------- */

@media (max-width: 767px) {
  .surgery-section {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
    margin-top: -20px;
  }

  .surgery-section img {
    max-width: 100%;
    order: 1;   
  }

  .surgery-section .text-container {
    order: 2;          
  }

  .surgery-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .surgery-section p {
    font-size: 15px;
    text-align: left;
  }
}

                                       /* --------- TABLET (768px to 1024px) ----------------- */ 

@media (min-width: 768px) and (max-width: 1024px) {
  .surgery-section {
    gap: 30px;
    padding: 20px;
    margin-top: -30px;
  }

  .surgery-section img {
    max-width: 320px;
  }

  .surgery-section h2 {
    font-size: 22px;
  }

  .surgery-section p {
    font-size: 16px;
  }
}

                                      /* --------- LAPTOP (1025px to 1279px) ----------------- */

@media (min-width: 1280px) {
  .surgery-section {
    max-width: 1400px;
  }

  .surgery-section img {
    max-width: 400px;
  }

  .surgery-section h2 {
    font-size: 25px;
  }

  .surgery-section p {
    font-size: 17px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------- */

                 /* ======================================
                             About US from style
                    ====================================== */

/* Banner Section */
.about-banner {
  background: url("picture/images.jpeg") center/cover no-repeat;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;

  margin-top: -10px;
}

.about-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(41, 1, 1, 0.5);
}

.banner-content {
  position: relative;
  z-index: 1;
}

.banner-content h1 {
  font-size: 45px;
  margin-bottom: 30px;
  /* text-transform: uppercase; */
  text-align: justify;
}

.banner-content p {
  font-size: 25px;
  max-width: 600px;
  margin: 0 auto;

  text-align: justify;
  line-height: 1.4;
}


                                    /* ------------ About Us Banner Responsive Styles ------------------- */

                                           /* --------- Mobile (320px – 576px) ------------ */

@media (max-width: 576px) {

  .about-banner {
    height: 200px;
    margin-top: 0;
    padding: 0 15px;
  }

  .banner-content h1 {
    font-size: 26px;
    margin-bottom: 12px;
    text-align: center;
  }

  .banner-content p {
    font-size: 15px;
    max-width: 100%;
    text-align: center;
    line-height: 1.5;
  }
}

                                /* ----------------- Tablet (577px – 1024px) ----------------- */


@media (min-width: 577px) and (max-width: 1024px) {

  .about-banner {
    height: 260px;
    padding: 0 40px;
  }

  .banner-content h1 {
    font-size: 34px;
    margin-bottom: 20px;
    text-align: center;
  }

  .banner-content p {
    font-size: 18px;
    max-width: 500px;
    text-align: center;
  }
}


                                /* ----------------- Small Desktop (1025px – 1439px) ----------------- */

@media (min-width: 1025px) and (max-width: 1439px) {

  .about-banner {
    height: 280px;
  }

  .banner-content h1 {
    font-size: 40px;
  }

  .banner-content p {
    font-size: 22px;
  }
}


                                /* ----------------- Large Desktop (1440px+) ----------------- */

@media (min-width: 1440px) {

  .about-banner {
    height: 300px;
  }

  .banner-content h1 {
    font-size: 45px;
  }

  .banner-content p {
    font-size: 25px;
  }
}


/* -----------------------------------------------------------------------------------------------------------------------------
                   /* -------------------------------- About Section ------------------------------ */

.about-section {
  padding: 80px 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-section .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.about-text {
  flex: 1;
}

.about-text h2 {
  font-size: 37px;
  color: #004aad;
  margin-top: -20px;
}

/* // + icon */
.about-text .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -4px; /* small space */
  font-weight: bold;
}

.about-text span {
  color: #087267;

  /* background: linear-gradient(to bottom, #05380d 0%, #1c7436 50%);
      -webkit-background-clip: text; 
      background-clip: text;
      color: transparent;             
      -webkit-text-fill-color: transparent; */
}

.about-text p {
  margin: 25px 0;
  color: #555;
  font-size: 18px;
  text-align: justify;
  line-height: 1.6;
  margin-bottom: -5px;
}

.about-image {
  flex: 1;
  text-align: center;
}

.about-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 2px;
}


                                    /*------------ About Us Section Responsive Styles ------------------- */

/* =========================
   MOBILE (320px – 576px)
========================= */

@media (max-width: 576px) {

  .about-section {
    padding: 40px 20px;
  }

  .about-section .container {
    flex-direction: column;
    gap: 25px;
  }

  .about-text h2 {
    font-size: 26px;
    margin-top: 0;
    text-align: center;
  }

  .about-text h2::after {
    display: none;
  }

  .about-text p {
    font-size: 15px;
    text-align: left;
  }

  .about-image img {
    max-width: 100%;
  }
}


/* =========================
   TABLET (577px – 1024px)
========================= */

@media (min-width: 577px) and (max-width: 1024px) {

  .about-section {
    padding: 60px 6%;
  }

  .about-section .container {
    gap: 30px;
  }

  .about-text h2 {
    font-size: 28px;
    margin-top: -10px;
  }

  .about-text p {
    font-size: 16px;
  }

  .about-image img {
    max-width: 380px;
  }
}

/* =========================
   TABLET (768px – 1024px)              
========================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .about-section {
    padding: 60px 6%;
  }

  .about-section .container {
    gap: 30px;
  }

  .about-text h2 {
    font-size: 22.5px;
    margin-top: -10px;
  }

  .about-text p {
    font-size: 16px;
  }

  .about-image img {
    max-width: 380px;
    margin-top: 50px;
    height: 230px;
  }
}

/* =========================
   SMALL DESKTOP (1025px – 1439px)
========================= */

@media (min-width: 1025px) and (max-width: 1439px) {

  .about-section {
    padding: 70px 8%;
  }

  .about-text h2 {
    font-size: 35px;
  }

  .about-text p {
    font-size: 17px;
  }
}



/* =========================
   LARGE DESKTOP (1440px+)
========================= */

@media (min-width: 1440px) {

  .about-section {
    padding: 80px 10%;
  }

  .about-text h2 {
    font-size: 37px;
  }

  .about-text p {
    font-size: 18px;
  }

  .about-image img {
    max-width: 450px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------ */

                    /* -------------------------------- training-section ------------------------------ */

.training-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background-color: #099750;
  border-radius: 150px 0 0 150px; 
  color: white;
  padding: 60px 30px;
  text-align: center;
  margin-bottom: 3px;
}

.training-item {
  flex: 1;
  min-width: 200px;
  max-width: 250px;
}

.training-item i {
  font-size: 70px;
  margin-bottom: 20px;
  display: block;

  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.training-item h3 {
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

/* 1️⃣ Icon 1 – Floating Up/Down */
.training-item:nth-child(1) i {
  animation-name: float;
}

/* 2️⃣ Icon 2 – Slow Rotation */
.training-item:nth-child(2) i {
  animation-name: slowRotate;
  animation-timing-function: linear;
}

/* 3️⃣ Icon 3 – Pulse/Breath Effect */
.training-item:nth-child(3) i {
  animation-name: pulseGlow;
}

/* 4️⃣ Icon 4 – Wiggle (Small Shake) */
.training-item:nth-child(4) i {
  animation-name: shakeX;
}


         /* KEYFRAMES */

/* Float animation */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* Rotate animation */
@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse Glow */
@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}


                      /* ---------------- responsive styles for training section ------------------ */

/* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .training-section {
    padding: 50px 20px;
    border-radius: 100px 0 0 100px;
  }

  .training-item {
    max-width: 220px;
  }

  .training-item i {
    font-size: 55px;
  }

  .training-item h3 {
    font-size: 19px;
    white-space: normal;
  }
}

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .training-section {
    padding: 40px 15px;
    border-radius: 70px 0 0 70px;
  }

  .training-item {
    max-width: 100%;
    margin-bottom: 25px;
  }

  .training-item i {
    font-size: 45px;
    margin-bottom: 15px;
  }

  .training-item h3 {
    font-size: 17px;
    white-space: normal;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .training-section {
    padding: 30px 12px;
    border-radius: 50px 0 0 50px;
  }

  .training-item i {
    font-size: 38px;
  }

  .training-item h3 {
    font-size: 15px;
  }
}

/* -------------------------------------------------------------------------------------------------------------------------- */

                  /* --------------------------- Mission & Vision --------------------------------------- */

.mission-vision {
  background: #e4e5e6;
  padding: 50px 10%;
  display: flex;
  justify-content: center;
}

.mission-vision .container {
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
}

.card {
  flex: 1;
  background: white;
  /* border-radius: 15px; */
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  border: 2px;
}

.card h3 {
  color: #087267;
  margin-bottom: 15px;
  font-size: 32px;
}

.card p {
  margin: 25px 0;
  color: #555;
  font-size: 18px;
  text-align: justify;
  line-height: 1.5;
  margin-bottom: -5px;
}


                      /* ---------------- responsive styles for mission & vision section ------------------ */  

/* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .mission-vision {
    padding: 45px 6%;
  }

  .mission-vision .container {
    gap: 60px;
  }

  .card {
    padding: 25px;
  }

  .card h3 {
    font-size: 28px;
  }

  .card p {
    font-size: 16px;
  }
}

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .mission-vision {
    padding: 35px 15px;
  }

  .mission-vision .container {
    flex-direction: column;
    gap: 30px;
  }

  .card {
    padding: 22px 20px;
  }

  .card h3 {
    font-size: 24px;
    text-align: center;
  }

  .card p {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .mission-vision {
    padding: 30px 12px;
  }

  .card {
    padding: 18px 15px;
  }

  .card h3 {
    font-size: 20px;
  }

  .card p {
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------------- */

                       /* ------------------- Why Choose Us ----------------------- */

.why-choose-us {
  text-align: center;
  padding: 55px 10%;
  background-color: #c0c9d6;
}

.why-choose-us h2 {
  font-size: 35px;
  color: #004aad;
  margin-bottom: 55px;
}

/*   + icon    */
.why-choose-us .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -4px; /* small space */
  font-weight: bold;
}

.why-choose-us span {
  color: #087267;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.feature-box {
  flex: 1 1 300px;
  background: white;
  border-radius: 10px;

  border: 1px solid #ccc;
  padding: 40px;
  box-shadow: 0 4px 8px rgba(2, 255, 57, 0.1);
  transition: transform 0.3s;
}

.feature-box h4 {
  margin-bottom: 10px;
  color: #087267;
  margin-bottom: 15px;
  font-size: 23px;
}

.feature-box p {
  margin: 25px 0;
  color: #555;
  font-size: 17px;
  text-align: justify;
  line-height: 1.5;
  margin-bottom: -5px;
}

.feature-box:hover {
  transform: translateY(-8px);
}

/* text underline  */

.why-choose-us h2::after {
  content: "";
  width: 120px;
  height: 3px;
  background: #004aad;
  display: block;
  margin-top: 8px;
  border-radius: 2px;
  margin-left: 29.8%;
}

/* About icon   */

.feature-icon {
  font-size: 30px;
  color: #ff5722;
  margin-bottom: 15px;
  margin-top: -15px;
  display: block;
}



                      /* ---------------- responsive styles for why choose us section ------------------ */


/* ===============================
   Desktop (1280px – 768px)
================================ */ 
@media (max-width: 1280px) {
  .why-choose-us h2::after {
    width: 100px;
    margin-left: 24.8%;
  }
}


/* ===============================
   Desktop (1366px – 768px)
================================ */ 
@media (max-width: 1366px) {
  .why-choose-us h2::after {
    width: 100px;
    margin-left: 26.8%;
  }
}


/* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .why-choose-us {
    padding: 45px 6%;
  }

  .why-choose-us h2 {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .why-choose-us h2::after {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  .features {
    gap: 30px;
  }

  .feature-box {
    padding: 30px;
  }

  .feature-box h4 {
    font-size: 21px;
  }

  .feature-box p {
    font-size: 16px;
  }
}

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .why-choose-us {
    padding: 35px 15px;
  }

  .why-choose-us h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .why-choose-us h2::after {
    width: 80px;
    margin-left: auto;
    margin-right: auto;
  }

  .features {
    gap: 20px;
  }

  .feature-box {
    padding: 25px 20px;
  }

  .feature-box h4 {
    font-size: 19px;
  }

  .feature-box p {
    font-size: 14px;
    line-height: 1.4;
  }

  .feature-icon {
    font-size: 26px;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .why-choose-us h2 {
    font-size: 20px;
  }

  .feature-box {
    padding: 20px 15px;
  }

  .feature-box h4 {
    font-size: 17px;
  }

  .feature-box p {
    font-size: 13px;
  }

  .why-choose-us h2::after {
    display: none;
  }

  .feature-icon {
    font-size: 24px;
  }
}


/* --------------------------------------------------------------------------------------------------------------- */
                                     /* ---------- About Page -------------- */

                 /* ------------------- OUR MILESTONES AND ACHIEVEMENTS --------------------- */

.milestones {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(120deg, #4a854e, #0b4730);
}

.milestones h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 50px;
}

.milestones h2 {
  color: #004aad;
}

.milestones h2 span {
  color: #ff0055;
}

.milestones-card {
  display: inline-block;
  width: 400px;
  text-align: center;
}

.milestones-card i {
  font-size: 60px;
  color: white;
  margin-bottom: 25px;
  margin-left: 10px;
}

.milestones-card .number {
  font-size: 35px;
  margin-bottom: 15px;
  color: white;
  margin-right: -19.5px;
}

.milestones-card .label {
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin-top: 20px;
  margin-bottom: -15px;
}


                      /* ---------------- responsive styles for milestones section ------------------ */

/* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .milestones {
    padding: 35px 15px;
  }

  .milestones h2 {
    font-size: 26px;
    margin-bottom: 40px;
  }

  .milestones-card {
    width: 320px;
    margin-bottom: 20px;
  }

  .milestones-card i {
    font-size: 50px;
   
    margin-right: 15px;

  }

  .milestones-card .number {
    font-size: 30px;
    margin-right: 0;
  }

  .milestones-card .label {
    font-size: 16px;
  }
}

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .milestones {
    padding: 30px 12px;
  }

  .milestones h2 {
    font-size: 22px;
    margin-bottom: 30px;
  }

  .milestones-card {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 25px;
  }

  .milestones-card i {
    font-size: 42px;
    margin-bottom: 20px;
  }

  .milestones-card .number {
    font-size: 26px;
  }

  .milestones-card .label {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 0;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .milestones h2 {
    font-size: 20px;
  }

  .milestones-card i {
    font-size: 36px;
  }

  .milestones-card .number {
    font-size: 22px;
  }

  .milestones-card .label {
    font-size: 13px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------- */


                  /* ---------------------- About Pages FAQS --------------------- */
                               

.faq-section {
  max-width: 700px;
  margin: auto;
  margin-bottom: 50px;
  margin-top: -5px;
  
}

.faq-section h2 {
  text-align: center;
  color: #d80027;
  margin-bottom: 30px;
  margin-top: 30px;
  font-size: 30px;
}

.faq-item {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 17px;
  border: 1px solid #645f5f;
  overflow: hidden;
}

.faq-question {
  padding: 15px 20px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #177734;
}

.faq-question:hover {
  background: #d3cece;
}

.faq-answer {
  padding: 0 20px 15px 20px;
  display: none;
  font-weight: normal;
  line-height: 1.5;
  text-align: justify;
  border-top: 1px solid rgb(5, 43, 24);
}

.faq-answer p {
  text-align: justify;
  margin-top: 10px;
  font-size: 15px;
  margin-bottom: 20px;
  color: #000102;
}

.steps p {
  margin: 8px 0; /* spacing between steps */
  font-size: 15px; /* readable text */
  line-height: 1.2; /* line height */
}

.steps strong {
  color: #076dda; /* highlight "Step X:" in blue */
}

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

.faq-item.active .faq-answer {
  display: block;
}

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

                                    /* ------------------responsive styles for FAQ section ---------------------- */
                     

 /* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .faq-section {
    max-width: 90%;
    margin-bottom: 40px;
  }

  .faq-section h2 {
    font-size: 26px;
    margin-bottom: 25px;
  }

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

  .faq-answer p,
  .steps p {
    font-size: 14px;
  }

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

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .faq-section {
    max-width: 95%;
    margin-top: 0;
    margin-bottom: 30px;
  }

  .faq-section h2 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

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

  .faq-question {
    padding: 12px 15px;
    font-size: 14px;
  }

  .faq-answer {
    padding: 0 15px 12px 15px;
  }

  .faq-answer p,
  .steps p {
    font-size: 13px;
    line-height: 1.4;
  }

  .faq-question span {
    font-size: 16px;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .faq-section h2 {
    font-size: 20px;
  }

  .faq-question {
    padding: 10px 12px;
    font-size: 13px;
  }

  .faq-answer p,
  .steps p {
    font-size: 12px;
  }

  .faq-question span {
    font-size: 15px;
  }
}


/* --------------------------------------------------------------------------------------------------------------------------- */

                                     /* ===== Call to Action Section ===== */

.cta-section {
  text-align: center;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  padding: 40px 20px;
  border-radius: 12px;
  max-width: 800px;
  margin: 40px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta-section h2 {
  font-size: 32px;
  margin-bottom: 15px;
  font-weight: 700;
  margin-top: -15px;
  
}

.cta-section h2::after {
  display: none;
}

.cta-section p {
  font-size: 19px;
  margin-bottom: 25px;
}


.call-btn {
  display: inline-block;
  background-color: #f39c12;
  color: white;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 18px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.call-btn i {
  margin-right: 10px;
}

.call-btn:hover {
  background-color: #d97706;
  transform: scale(1.05);
}


              /* ------------------ Responsive Styles for CTA Section ------------------ */

/* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .cta-section {
    max-width: 90%;
    padding: 35px 20px;
    margin: 35px auto;
  }

  .cta-section h2 {
    font-size: 28px;
  }

  .cta-section p {
    font-size: 17px;
  }

  .call-btn {
    font-size: 17px;
    padding: 10px 22px;
  }
}

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .cta-section {
    max-width: 95%;
    padding: 30px 15px;
    margin: 30px auto;
    border-radius: 10px;
  }

  .cta-section h2 {
    font-size: 24px;
    margin-top: 0;
  }

  .cta-section p {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .call-btn {
    font-size: 16px;
    padding: 9px 20px;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .cta-section {
    padding: 25px 12px;
  }

  .cta-section h2 {
    font-size: 20px;
  }

  .cta-section p {
    font-size: 14px;
  }

  .call-btn {
    font-size: 15px;
    padding: 8px 18px;
  }
}

/* -------------------------------------------------------------------------------------------------------------- */

            /* -------------------- Eligibility Criteria for Medical Coding Courses ------------------------ */

.eligibility-section {
  max-width: 1600px;
  margin: 50px auto;
  padding: 30px;
  color: white;
  position: relative;
  background: url("picture/cc.jpg") no-repeat center center/cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;

  margin-top: -3px;

}

/* Optional: add a transparent dark overlay for text readability */
.eligibility-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.4);  */
  background: rgba(1, 19, 13, 0.4); 
 
}

.eligibility-section h2,
.eligibility-section ul {
  position: relative; /* ensure text appears above overlay */
  z-index: 1;
}

.eligibility-section h2 {
  text-align: justify;
  /* color: #6fee07; */
  /* color: #260eaa;  */
   color: #eff303; 
  margin-bottom: 25px;
  font-size: 26px;
  font-weight: 600;
  margin-left: 100px;
}

.eligibility-section h2::after {
    display: none;
}

/* Remove default list styling */
.eligibility-section ul {
  list-style: none;
  padding-left: 100px;
  margin: 0;
}

/* List item styles */
.eligibility-section li {
  font-size: 18px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  line-height: 1.6;
}

/* Style for the thumbs-up icon */
.eligibility-section li i {
  /* color: #07ac75;  */
  /* color: #76ec07; */
  color: #04154d;
  margin-right: 10px;
  font-size: 18px;
}

/* Optional: hover effect */
.eligibility-section li:hover i {
  color: #f39c12; /* Gold color on hover */
  transform: scale(1.1);
  transition: 0.2s ease;
}



              /* ------------------ Responsive Styles for Eligibility Section ------------------ */


/* ===============================
   Tablet (768px – 1024px)
================================ */
@media (max-width: 1024px) {
  .eligibility-section {
    padding: 25px 20px;
    margin: 40px auto;
  }

  .eligibility-section h2 {
    font-size: 24px;
    margin-left: 40px;
  }

  .eligibility-section ul {
    padding-left: 40px;
  }

  .eligibility-section li {
    font-size: 16px;
  }

  .eligibility-section li i {
    font-size: 17px;
  }
}

/* ===============================
   Mobile (up to 768px)
================================ */
@media (max-width: 768px) {
  .eligibility-section {
    padding: 20px 15px;
    margin: 30px auto;
    text-align: left;
  }

  .eligibility-section h2 {
    font-size: 20px;
    margin-left: 0;
    text-align: left;
  }

  .eligibility-section ul {
    padding-left: 0;
  }

  .eligibility-section li {
    font-size: 14px;
    line-height: 1.5;
  }

  .eligibility-section li i {
    font-size: 16px;
  }
}

/* ===============================
   Small Mobile (320px – 480px)
================================ */
@media (max-width: 480px) {
  .eligibility-section {
    padding: 15px 12px;
  }

  .eligibility-section h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .eligibility-section li {
    font-size: 13px;
  }

  .eligibility-section li i {
    font-size: 15px;
  }
}


/* -------------------------------------------------------------------------------------------------------------------------------------- */

          /* ============================ Our Core Values -  About Page ========================== */

.core-values {
  background-color: #cdecee;
  text-align: center;
  padding: 80px 30px;
  border-radius: 180px 0 0 180px;
  color: #004c4c;
  font-family: "Poppins", sans-serif;
  margin-bottom: 50px;
  
}

.core-values h2 {
  font-size: 39px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #007c7c;
  margin-top: -40px;
}

.core-values h2::after {
  display: none;
}

.company-name {
  font-size: 22px;
  font-weight: 600;
  color: #097934;
  margin-bottom: 40px;
}

.company-name .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -3px; /* small space */
  font-weight: bold;
}

.values-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
}

.value-item {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  padding: 30px 20px;
  max-width: 250px;
  flex: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(2, 47, 143, 0.63);
}

.value-item i {
  font-size: 45px;
  color: #00a8a8;
  margin-bottom: 15px;
}

.value-item h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.value-item p {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  text-align: justify; 
}



              /* ===== Responsive Styles - About Page - Our Core Values  ===== */

                             /* Tablets: 768px - 1024px */

@media screen and (max-width: 1024px) {
  .core-values {
    padding: 60px 20px;
    border-radius: 120px 0 0 120px;
  }

  .core-values h2 {
    font-size: 32px;
    margin-top: -30px;
  }

  .company-name {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .value-item {
    max-width: 220px;
    padding: 25px 15px;
  }

  .value-item i {
    font-size: 40px;
  }

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

  .value-item p {
    font-size: 14px;
  }
}


                                /* ----------- Mobile: up to 768px ------------- */

@media screen and (max-width: 768px) {
  .core-values {
    padding: 40px 15px;
    border-radius: 80px 0 0 80px;
  }

  .core-values h2 {
    font-size: 28px;
    margin-top: -20px;
  }

  .company-name {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .values-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .value-item {
    max-width: 90%;
    padding: 20px 15px;
  }

  .value-item i {
    font-size: 35px;
    margin-bottom: 10px;
  }

  .value-item h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .value-item p {
    font-size: 13px;
  }
}

                      /* ---------------- Extra small mobile: up to 480px ---------------- */

@media screen and (max-width: 480px) {
  .core-values {
    padding: 30px 10px;
    border-radius: 60px 0 0 60px;
  }

  .core-values h2 {
    font-size: 24px;
    margin-top: -15px;
  }

  .company-name {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .value-item i {
    font-size: 30px;
  }

  .value-item h3 {
    font-size: 15px;
  }

  .value-item p {
    font-size: 12px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */

         /* ======================================
                  Terms and Conditions  
            ======================================  */

.terms-header {
  /* background-color: #005fa3; */
  color: rgb(25, 41, 143);
  text-align: center;
  padding: 50px 20px;
  margin-top: -10px;
  display: block;

  background: linear-gradient(120deg, #50a556, #036868);
}

/* Main title */
.terms-header h1 {
  font-size: 35px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* Style for the "+" */
.terms-header span {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -4px; /* small space */
  font-weight: bold;
  color: rgb(158, 231, 11);
}

/* Tagline text */
.header-subtext {
  margin-top: 23px;
  font-size: 20px;
  font-weight: 400;
  color: whitesmoke;
  letter-spacing: 0.4px;
}

                      /* ---------------- responsive styles for terms and conditions header ------------------ */ 

/* =========================
   MOBILE (320px – 575px)
========================= */
@media (max-width: 575px) {

  .terms-header {
    padding: 30px 15px;
    margin-top: 0;
  }

  .terms-header h1 {
    font-size: 22px;
    letter-spacing: 0.5px;
  }

  .terms-header span {
    font-size: 0.65em;
    top: -0.4em;
  }

  .header-subtext {
    font-size: 14px;
    margin-top: 15px;
    line-height: 1.5;
  }
}

/* =========================
   TABLET (576px – 1024px)
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .terms-header {
    padding: 40px 20px;
  }

  .terms-header h1 {
    font-size: 28px;
  }

  .header-subtext {
    font-size: 17px;
    margin-top: 20px;
  }
}

/* =========================
   DESKTOP (1025px+)
========================= */
@media (min-width: 1025px) {

  .terms-header h1 {
    font-size: 35px;
  }

  .header-subtext {
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------- */

                                    /* -------------- Terms Main Container -------------- */

.terms-container {
  max-width: 1000px;
  margin: 50px auto;
  background-color: rgb(221, 211, 211);
  padding: 40px 50px;
  /* border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */

  background: none;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Section Headings */
.terms-container h2 {
  text-align: center;
  /* color: #998b11; */
  margin-bottom: 35px;
  font-size: 38px;

  background: linear-gradient(to bottom, #0b5d72 30%, #998b11 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.terms-container h2::after {
  content: "";
  width: 250px;
  height: 3px;
  background: #0d8844;
  display: block;
  margin: 5px auto 0;
  border-radius: 2px;
}

/* .terms-container h3::after {
  content: "";
  width: 80px;
  height: 3px;
  background: #0454e9;
  display: block;
  margin: 5px auto 0;
  border-radius: 2px;
  
  margin-left: 1px;

} */

.terms-container h3 {
  color: #05882c;
  margin-top: 35px;
  margin-bottom: 10px;
  font-size: 24px;
}

.terms-container p {
  margin-bottom: 20px;
  text-align: justify;
  font-size: 17px;
  line-height: 1.5;

  text-indent: 30px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  /* margin-bottom: 10px; */
  line-height: 2;
}

.icon {
  font-size: 15px;
  margin-right: 10px;
  text-align: center;

  width: 20px;
}

.contact-item strong {
  color: #000;
  margin-right: 5px;
}

.term-address {
  font-size: 17px;
  line-height: 1.8;
}

.term-address strong {
  color: #000;
  margin-right: 5px;
}

                      /* ---------------- responsive styles for terms main container ------------------ */

/* =========================
   MOBILE (320px – 575px)
========================= */
@media (max-width: 575px) {

  .terms-container {
    padding: 20px 15px;
    margin: 20px auto;
  }

  .terms-container h2 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .terms-container h2::after {
    width: 120px;
  }

  .terms-container h3 {
    font-size: 18px;
    margin-top: 25px;
  }

  .terms-container p {
    font-size: 14px;
    text-indent: 0;
    line-height: 1.6;
  }

  .contact-item {
    font-size: 14px;
    line-height: 1.6;
  }

  .term-address {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* =========================
   TABLET (576px – 1024px)
========================= */
@media (min-width: 576px) and (max-width: 1024px) {

  .terms-container {
    padding: 30px 30px;
    margin: 30px auto;
  }

  .terms-container h2 {
    font-size: 30px;
  }

  .terms-container h2::after {
    width: 180px;
  }

  .terms-container h3 {
    font-size: 21px;
  }

  .terms-container p {
    font-size: 16px;
    text-indent: 15px;
  }

  .term-address {
    font-size: 16px;
  }
}

/* =========================
   DESKTOP (1025px+)
========================= */
@media (min-width: 1025px) {

  .terms-container {
    padding: 40px 50px;
  }

  .terms-container h2 {
    font-size: 38px;
  }

  .terms-container h3 {
    font-size: 24px;
  }

  .terms-container p {
    font-size: 17px;
    text-indent: 30px;
  }
}


/* --------------------------------------------------------------------------------------------------------------------- */

              /* ============================
                     Courses / course-list  
                 ============================ */

.course-hc {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(26, 167, 21, 0.3);
  font-family: "Poppins", sans-serif;
}

.course-hc h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
}

.course-hc p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 10px;
  text-align: justify;
}

.course-hc p strong {
  color: #000;
}

.course-hc .course-mode {
  color: #004aad;
  font-weight: 600;
  margin-right: 5px;
}

.course-hc .course-badge {
  color: #008000;
  font-weight: 600;
}

.course-batches {
  margin-top: 1rem;
}

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

.batch-list li {
  margin-bottom: 0.9rem;
  
}

.course-badge {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 4px 8px;
  margin: 2px;
  font-size: 0.9rem;
}


.enquiry-btn-container {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 10px;
}

.enquiry-btn {
  background-color: #b6890d;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.enquiry-btn:hover {
  background-color: #5e4604;
}

.course-hc {
  animation: fadeIn 2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


                  /* ------------------- responsive size -- Courses / course-list ------------------ */

                        /* ---------------- Mobile Responsive (≤ 767px) ---------------------- */

@media (max-width: 767px) {
  .course-hc {
    max-width: 95%;
    margin: 20px auto;
    padding: 15px;
    border-radius: 10px;
  }

  .course-hc h1 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .course-hc p {
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }

  .batch-list li {
    margin-bottom: 0.6rem;
  }

  .course-badge {
    font-size: 0.8rem;
    padding: 3px 6px;
  }

  .enquiry-btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }
}

                               /* -------------------- Tablet Responsive (768px – 1024px) ------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .course-hc {
    max-width: 90%;
    margin: 30px auto;
    padding: 18px;
  }

  .course-hc h1 {
    font-size: 26px;
  }

  .course-hc p {
    font-size: 16px;
  }

  .enquiry-btn {
    font-size: 15px;
    padding: 10px 18px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------- */

              /* ============================
                     Careers Page Style  
                 ============================ */


.header-careers {
  background-color: #0056a3;
  color: white;
  text-align: center;
  padding: 3rem 25rem;
  margin-top: -12px;
  background: url("picture/careers.png") center/cover no-repeat;

   /* padding: 3rem 25%; */
}

.header-careers h1 {
  font-size: 2.9rem;
  margin-bottom: 0.3rem;
  margin-top: -10px;
}

.header-careers p {
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-left: 6px;
}

.careers h2::after {
  content: "";
  width: 150px;
  height: 3px;
  display: block;
  margin: 4px auto 0;
  border-radius: 2px;
  margin-left: 557px;


  background: linear-gradient(90deg, transparent, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9, transparent);
  background-size: 200%;
  animation: moveLine 3s linear infinite;

  /* background: linear-gradient(90deg, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9);
  background-size: 300%; 
  animation: colorFlow 4s linear infinite; */
   
}

/* @keyframes colorFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
} */

@keyframes moveLine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/*   + icon    */
.header-careers .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -4px; /* small space */
  font-weight: bold;
}


            /* ----------------- responsive styles for Careers Page Banner section ----------------------  */

                          /* ------------ MOBILE (up to 576px) ------------------ */


@media (max-width: 576px) {

  .header-careers {
    padding: 2.5rem 1.2rem;
    margin-top: 0;
  }

  .header-careers h1 {
    font-size: 1.9rem;
    margin-top: 0;
  }

  .header-careers p {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
  }

  .careers h2::after {
    width: 100px;
  }
}

                          /* ------------ TABLET (577px – 1024px) ------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .header-careers {
    padding: 3rem 5%;
  }

  .header-careers h1 {
    font-size: 2.4rem;
  }

  .header-careers p {
    font-size: 1.05rem;
  }

  .careers h2::after {
    width: 130px;
  }
}

                          /* ------------ SMALL DESKTOP (1025px – 1439px) ------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .header-careers {
    padding: 3.5rem 22%;
  }

  .header-careers h1 {
    font-size: 2.7rem;
  }
}

                            /* ---------- LARGE DESKTOP (1440px+) -------------- */

@media (min-width: 1440px) {

  .header-careers {
    padding: 4rem 25%;
  }
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

                          /* ------------------ Employer Brand Section ------------------ */  

.employer-brand {
  background: #ffffff;
  text-align: center;
  padding: 40px 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.employer-brand h2 {
  color: #007a39;
  font-size: 30px;
  margin-bottom: 25px;
}

.employer-brand h2::after {
  content: "";
  width: 175px;
  height: 3px;
  display: block;
  margin: 4px auto 0;
  border-radius: 2px;
  /* margin-left: 44%; */

  background: linear-gradient(90deg, transparent, #06eb9e, #00c6ff, #920e50, #ff8c00, #452188, transparent);
  background-size: 200%;
  animation: moveLine 4s linear infinite;
}

.employer-brand p {
  font-size: 17.3px;
  color: #333;
  max-width: 800px;
  /* margin: 0 auto; */
  line-height: 1.5;
  text-align: justify;
  /* margin: 15px 25%; */

  margin: 15px auto;
}

/*   + icon    */
.employer-brand .add {
  font-size: 0.7em; /* make it smaller */
  position: relative;
  top: -0.6em; /* move it up */
  margin-left: -2px; /* small space */
  font-weight: bold;
}

              /* ------------------ Responsive Styles - Employer Brand Section ------------------ */

                          /* ---------------- MOBILE (up to 576px) ------------------ */

@media (max-width: 576px) {

  .employer-brand {
    padding: 25px 15px;
  }

  .employer-brand h2 {
    font-size: 22px;
  }

  .employer-brand h2::after {
    width: 120px;
  }

  .employer-brand p {
    font-size: 14.5px;
    text-align: left;
    margin: 10px auto;
  }
}


                          /* ---------------- TABLET (577px – 1024px) ------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .employer-brand {
    padding: 35px 30px;
  }

  .employer-brand h2 {
    font-size: 26px;
  }

  .employer-brand h2::after {
    width: 145px;
  }

  .employer-brand p {
    font-size: 16px;
    max-width: 700px;
  }
}

                          /* ---------------- SMALL DESKTOP (1025px – 1439px) ------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .employer-brand p {
    max-width: 760px;
  }
}

                          /* ---------------- LARGE DESKTOP (1440px+) ------------------ */

@media (min-width: 1440px) {

  .employer-brand p {
    max-width: 820px;
  }
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

                                   /* ------------------ Job Search Bar ------------------ */

.job-search {
  text-align: center;
  margin: 30px 0;
}
.job-search input {
  padding: 10px 20px;
  width: 50%;
  border: 2px solid #007a39;
  border-radius: 25px;
  outline: none;
}

.job-search input:focus {
  border-color: #0454e9;
}

                                         /* ------------------ Careers Section ------------------ */

.careers {
  max-width: 1300px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 30px;


}

.careers h2 {
  grid-column: 1 / -1; 
  text-align: center;
  margin-bottom: 1rem;
  color: #007a39;
  font-size: 30px;
}

                                /* --------------- Medical Coding Specialist ------------------ */


.job-card {
  background: rgb(180, 221, 198);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease;
}

.job-card:hover {
  transform: translateY(-3px);
}

.job-card h3 {
  color: #0056a3;
  font-size: 24px;
}

.job-card p {
  line-height: 1.9;
}

.apply-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.5rem;
  background: #0056a3;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.apply-btn:hover {
  background: #003e73;
}


                         /* ---------------- Responsive Styles - Careers Page ---------------- */

                          /* ------------------- MOBILE (320px – 576px) ------------------------ */ 

/* Tablet */
@media (max-width: 1024px) {
  .careers {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .careers {
    grid-template-columns: 1fr;
  }
}




@media (max-width: 576px) {

  .job-search {
    margin: 20px 0;
    padding: 0 1rem;
  }

  .job-search input {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .careers {
    padding: 0 1rem;
  }

  .careers h2 {
    font-size: 1.5rem;
  }

  .careers h2::after {
    display: none;
  }

  .job-card {
    padding: 1.2rem;
  }

  .job-card h3 {
    font-size: 1.1rem;
  }

  .apply-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.8rem;
    font-size: 0.95rem;
  }
}

                          /* ------------------- TABLET (577px – 1024px) ------------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .job-search input {
    width: 80%;
    max-width: 500px;
  }

  .careers {
    max-width: 800px;
  }

  .careers h2 {
    font-size: 1.7rem;
  }

  .careers h2::after {
    display: none;
  }

  .job-card h3 {
    font-size: 1.2rem;
  }
}


                          /* ------------------- SMALL DESKTOP (1025px – 1439px) ------------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .job-search input {
    width: 65%;
  }
}

                          /* ------------------- LARGE DESKTOP (1440px+) ------------------------ */

@media (min-width: 1440px) {

  .job-search input {
    width: 60%;
  }
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

                                /* ------------------- Careers page -- Application Form ----------------------- */

.application-form {
  background: white;
  max-width: 700px;
  margin: 3rem auto;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.199);
}

.application-form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #007a39;
}


.application-form h2::after {
  content: "";
  width: 195px;
  height: 3px;
  display: block;
  margin: 4px auto 0;
  border-radius: 2px;
  /* margin-left: 218px; */

  background: linear-gradient(90deg, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9);
  background-size: 300%; 
  animation: colorFlow 3s linear infinite;
  
}


@keyframes colorFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}


.application-form form {
  display: flex;
  flex-direction: column;

}

.application-form label {
  margin: 0.5rem 0 0.2rem;
  font-weight: 600;
  
}

.application-form input,
.application-form select {
  padding: 0.6rem;
  border: 1px solid #adacac;
  border-radius: 10px;
  margin-bottom: 1rem;

}

.application-form input:focus,
.application-form select:focus {
  border-color: #ff9800;
  box-shadow: 0 0 6px rgba(255, 152, 0, 0.4);
  background-color: #fff8e1;
  outline: none;
}


.application-form button {
  padding: 0.8rem;
  background: #007a39;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 1rem;
  
}

.application-form button:hover {
  background: #055229;
}

/* Thank You Message */
.thank-you {
  display: none;
  text-align: center;
  color: #0056a3;
  margin-top: 1rem;
  font-weight: bold;
  font-family: "Lato", "Calibri", sans-serif;

}


              /* ---------------- Responsive Styles - Application Form Section ---------------- */

                          /* ------------------- MOBILE (320px – 576px) ------------------------ */

@media (max-width: 576px) {

  .application-form {
    margin: 2rem 1rem;
    padding: 1.5rem;
    max-width: 100%;
  }

  .application-form h2 {
    font-size: 1.3rem;
  }

  .application-form h2::after {
    /* width: 120px; */
    display: none;
  }

  .application-form label {
    font-size: 0.9rem;
  }

  .application-form input,
  .application-form select {
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  .application-form button {
    font-size: 0.95rem;
    padding: 0.75rem;
  }
}


                          /* ------------------- TABLET (577px – 1024px) ------------------------ */


@media (min-width: 577px) and (max-width: 1024px) {

  .application-form {
    max-width: 600px;
    padding: 1.8rem;
  }

  .application-form h2 {
    font-size: 1.7rem;
  }

  .application-form h2::after {
    width: 150px;
    /* display: none; */
  }
}

                          /* ------------------- SMALL DESKTOP (1025px – 1439px) ------------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .application-form {
    max-width: 650px;
  }
}

                          /* ------------------- LARGE DESKTOP (1440px+) ------------------------ */

@media (min-width: 1440px) {

  .application-form {
    max-width: 700px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------- */

                            /* ============================ Testimonials ================================= */

.testimonials {
  text-align: center;
  padding: 3rem 1rem;
  background: #f5f9f6;
  
}

.testimonials h2 {
  font-size: 2rem;
  color: #007a39;
  font-weight: 700;
  margin-bottom: 2.5rem;
  margin-top: -10px;
}

.testimonials h2::after {
  content: "";
  width: 197px;
  height: 3px;
  display: block;
  margin: 4px auto 0;
  border-radius: 2px;
  /* margin-left: 43.5%; */

  background: linear-gradient(90deg, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9);
  background-size: 300%; 
  animation: colorFlow 3s linear infinite;
  
}

.testimonial-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;

}

.testimonial {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  padding: 1.8rem;
  max-width: 320px;
  transition: all 0.3s ease;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes text and name apart */

}

.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(10, 155, 87, 0.37);
}

.testimonial p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  text-align: justify;

}

.testimonial h4 {
  color: #007a39;
  font-weight: 600;
  font-size: 1rem;
}

.testimonial h4 span {
  color: #353333;
  font-weight: 600;
}



              /* ---------------- Responsive Styles - Testimonials Section ---------------- */

                          /* ------------------- MOBILE (320px – 576px) ------------------------ */   

@media (max-width: 576px) {

  .testimonials {
    padding: 2rem 1rem;
  }

  .testimonials h2 {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
  }

  .testimonials h2::after {
    /* width: 120px; */
    display: none;
  }

  .testimonial-cards {
    gap: 1.5rem;
  }

  .testimonial {
    max-width: 100%;
    padding: 1.4rem;
  }

  .testimonial p {
    font-size: 0.9rem;
    text-align: left;
  }

  .testimonial h4 {
    font-size: 0.95rem;
  }
}

                          /* ------------------- TABLET (577px – 1024px) ------------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .testimonials {
    padding: 3rem 2rem;
  }

  .testimonials h2 {
    font-size: 1.8rem;
  }

  .testimonials h2::after {
    width: 150px;
  }

  .testimonial-cards {
    gap: 2rem;
  }

  .testimonial {
    max-width: 300px;
  }
}

                          /* ------------------- SMALL DESKTOP (1025px – 1439px) ------------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .testimonial {
    max-width: 310px;
  }
}

                          /* ------------------- LARGE DESKTOP (1440px+) ------------------------ */

@media (min-width: 1440px) {

  .testimonial {
    max-width: 330px;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------------- */

                                /* ==================== Meet the Team ========================= */

.meet-team {
  text-align: center;
  padding: 3rem 1rem;
  margin-top: -10px;
}

.meet-team h2 {
  font-size: 2rem;
  color: #007a39;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.meet-team h2::after {
  content: "";
  width: 198px;
  height: 3px;
  display: block;
  margin: 4px auto 0;
  border-radius: 2px;
  /* margin-left: 43.5%; */

  background: linear-gradient(90deg, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9);
  background-size: 300%; 
  animation: colorFlow 3s linear infinite;
}

.meet-team .team-intro {
  color: #555;
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.team-members {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.member {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  width: 350px;
  box-shadow: 0 4px 14px rgba(8, 158, 76, 0.027);
  transition: all 0.3s ease;
}

.member:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(9, 141, 68, 0.349);
}

.member img {
  /* width: 100%; */
  height: 220px;
  border-radius: 10px;
  object-fit: cover;  
  margin-bottom: 1rem;
}

.member h4 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.3rem;
}

.member p {
  color: #007a39;
  font-weight: 500;
  font-size: 0.95rem;
}

.member .bio {
  color: #555;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 0.5rem;
  text-align: justify;
}


              /* ---------------- Responsive Styles - Meet the Team Section ---------------- */

                          /* ------------------- MOBILE (320px – 576px) ------------------------ */

@media (max-width: 576px) {

  .meet-team {
    padding: 2rem 1rem;
  }

  .meet-team h2 {
    font-size: 1.6rem;
  }

  .meet-team h2::after {
    display: none;
  }

  .meet-team .team-intro {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .team-members {
    gap: 1.5rem;
  }

  .member {
    width: 100%;
    max-width: 320px;
    padding: 1.2rem;
  }

  .member img {
    height: 200px;
  }

  .member .bio {
    text-align: left;
    font-size: 0.85rem;
  }
}


                          /* ------------------- TABLET (577px – 1024px) ------------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .meet-team {
    padding: 3rem 2rem;
  }

  .meet-team h2 {
    font-size: 1.8rem;
  }

  .meet-team h2::after {
    width: 150px;
  }

  .team-members {
    gap: 2rem;
  }

  .member {
    width: 230px;
  }

  .member img {
    height: 220px;
  }
}


                          /* ------------------- SMALL DESKTOP (1025px – 1439px) ------------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .team-members {
    gap: 2.5rem;
  }
}

                          /* ------------------- LARGE DESKTOP (1440px+) ------------------------ */

@media (min-width: 1440px) {

  .team-members {
    gap: 3rem;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------------- */

                            /* ======================Careers page - Company Benefits =============================== */

.benefits {
  background-color: #d6eeda;
  padding: 2rem;
  margin-top: 0px;
  box-shadow: 0 4px 15px rgba(0, 122, 57, 0.24);
  transition: transform 0.3s ease;
  border-top: 1px solid #badbca;
}

.benefits h2 {
  text-align: center;
  color: #007a39;
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1.7rem;
  position: relative;
}

.benefits h2::after {
  content: "";
  width: 198px;
  height: 3px;
  display: block;
  margin: 4px auto 0;
  border-radius: 2px;
  /* margin-left: 43.7%; */

  background: linear-gradient(90deg, #0454e9, #00c6ff, #ff0080, #ff8c00, #0454e9);
  background-size: 300%; 
  animation: colorFlow 3s linear infinite;
}

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

.benefits li {
  background: #ffffff;
  border-left: 4px solid #007a39;
  margin-bottom: 1.1rem;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin: 18px 170px;

  display: flex;
  align-items: flex-start;
  gap: 10px;

}

/* Default icon style */
.benefits li i {
  font-size: 1.2rem;
  margin-top: 3px;
  
}

/* 🎨 Individual icon colors */
.icon-gold {
  color: #ffb400;
}

.icon-blue {
  color: #007bff; 
}

.icon-orange {
  color: #ff7043; 
}

.icon-green {
  color: #b12a2a; 
}

.icon-purple {
  color: #8e44ad; 
}

.benefits li:hover {
  background-color: #e8f8ee;
  transform: translateX(5px);
}

.benefits li strong {
  color: #007a39;
}

              /* ---------------- Responsive Styles - Company Benefits Section ---------------- */

                         /* ------------------- MOBILE (320px – 576px) ------------------------ */  


@media (max-width: 576px) {

  .benefits {
    padding: 1.5rem 1rem;
  }

  .benefits h2 {
    font-size: 1.4rem;
  }

  .benefits h2::after {
    width: 110px;
  }

  .benefits li {
    font-size: 0.9rem;
    padding: 0.8rem;
    margin: 14px auto;
  }

  .benefits li i {
    font-size: 1rem;
  }
}


                          /* ------------------- TABLET (577px – 1024px) ------------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .benefits {
    padding: 2rem 2rem;
  }

  .benefits h2 {
    font-size: 1.6rem;
  }

  .benefits h2::after {
    width: 150px;
  }

  .benefits li {
    font-size: 0.95rem;
    margin: 16px 10px;
  }
}

                          /* ------------------- SMALL DESKTOP (1025px – 1439px) ------------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .benefits li {
    margin: 18px 75px;
  }
}

                          /* ------------------- LARGE DESKTOP (1440px+) ------------------------ */

@media (min-width: 1440px) {

  .benefits li {
    margin: 18px 170px;
  }
}

/* -------------------------------------------------------------------------------------------------------------------------- */

              /* ===================================
                    CV Download Section  - Careers
                 ===================================  */

.careers-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40vh;
  margin-top: 10px;
 
}

.cv-container {
  text-align: center;
  background: #fff;
  padding: 20px 60px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(3, 121, 29, 0.432);
  max-width: 500px;
}

.cv-icon img {
  width: 150px;
  height: 150px;
  border-radius: 60%;
  padding: 20px;
  margin-top: -20px;
}

.cv-container h2 {
  margin-top: -15px;
  color: #333;
  
}

.careers-section h2::after {
  display: none;
  
}

.cv-container p {
  margin-top: 10px;
  font-size: 16px;
  color: #555;
}

.cv-container p a {
  color: #0d8832;
  text-decoration: none;
  font-weight: 600;
}

.cv-container p a:hover {
  text-decoration: underline;
}


              /* ================ Responsive Styles - CV Download Section - Careers Page ==================== */    

                         /* ------------------- MOBILE (320px – 576px) ------------------------ */ 

@media (max-width: 576px) {

  .careers-section {
    padding: 0 15px;
    min-height: auto;
  }

  .cv-container {
    padding: 20px 25px;
    max-width: 100%;
  }

  .cv-icon img {
    width: 100px;
    height: 100px;
    padding: 12px;
    margin-top: -10px;
  }

  .cv-container h2 {
    font-size: 20px;
    margin-top: -8px;
  }

  .cv-container p {
    font-size: 14px;
  }
}


                          /* ------------------- TABLET (577px – 1024px) ------------------------ */

@media (min-width: 577px) and (max-width: 1024px) {

  .careers-section {
    min-height: 35vh;
  }

  .cv-container {
    padding: 25px 40px;
    max-width: 480px;
  }

  .cv-icon img {
    width: 120px;
    height: 120px;
  }

  .cv-container h2 {
    font-size: 22px;
  }

  .cv-container p {
    font-size: 15px;
  }
}


                          /* ------------------- SMALL DESKTOP (1025px – 1439px) ------------------------ */

@media (min-width: 1025px) and (max-width: 1439px) {

  .cv-container {
    padding: 25px 50px;
  }
}

                          /* ------------------- LARGE DESKTOP (1440px+) ------------------------ */

@media (min-width: 1440px) {

  .cv-container {
    padding: 30px 60px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------------- */


              /* ============================
                   Scroll to Top Button  
                 ============================  */

     /* Scroll to Top Button Styles */
    
#scrollToTopBtn {
  position: fixed;
  bottom: 68px;
  right: 16px;
  z-index: 99;
  background-color: #038824;
  color: white;
  border: none;
  padding: 7px 16px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);

  opacity: 0;
  pointer-events: none;
  transform: translateY(50px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;

}

#scrollToTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: bounce 1.5s infinite;
}

/* Bouncing animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

#scrollToTopBtn:hover {
  background-color: #8a056d;
 
}


      /* ---------------- Responsive styles - scroll to top btn -----------------  */
             /* --------- 320×568 | 360×640 | 375×667 | 414×736 --------------- */

@media (max-width: 767px) {
  #scrollToTopBtn {
    bottom: 20px;
    right: 14px;
    font-size: 18px;
    padding: 6px 12px;
  }

  /* Better UX: no bouncing on mobile */
  #scrollToTopBtn.show {
    animation: none;
  }
}

                             /* ------------- 768×1024 | 1024×768 ----------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  #scrollToTopBtn {
    bottom: 40px;
    right: 18px;
    font-size: 20px;
    padding: 7px 14px;
  }
}

                   /* ---------- 1280×768 | 1366×768 ---------------- */

@media (min-width: 1025px) and (max-width: 1366px) {
  #scrollToTopBtn {
    bottom: 60px;
    right: 18px;
    font-size: 22px;
  }
}

                  /* --------------------- 1600×900 ---------------------- */

@media (min-width: 1367px) and (max-width: 1600px) {
  #scrollToTopBtn {
    bottom: 70px;
    right: 22px;
    font-size: 23px;
    padding: 8px 16px;
  }
}

                        /* ---------------- 1920×1080 -------------- */

@media (min-width: 1601px) {
  #scrollToTopBtn {
    bottom: 85px;
    right: 26px;
    font-size: 24px;
    padding: 10px 18px;
  }
}


/* --------------------------------------------------------------------------------- */



         /* Dashboard -- Topic Page  */


  /* Main content */
.Topic-content {
  margin-left: 200px;
  padding: 40px;
  
}

.Topic-content h1 {
  font-size: 32px;
  margin-bottom: 35px;
  color: #04552f;
  text-align: center;

}


   /* Topic list */
.topic-list {
  list-style: none;
  padding: 0;

  display: grid;     
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;  
}

.topic-list li {
  background: #fff;
  margin-bottom: 12px;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topic-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.topic-list a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex; 
  font-size: 18px;

}

.topic-list a:hover {
  color: #005fa3;
}

.module-label {
  color: #005fa3;       
  font-weight: 600;
  margin-right: 6px;
}

.topic-title {
  color: #333;          
  font-weight: 500;
   letter-spacing: 0.8px;
}

.topic-list a:hover .topic-title,
.topic-list a:hover .module-label {
  color: #057a2c;
}



/* ========================= */
/* 📱 TABLET (1024px) */
/* ========================= */
@media (max-width: 1024px) {
  .Topic-content {
    margin-left: 0;   /* important for sidebar collapse */
    padding: 25px;
  }

  .topic-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================= */
/* 📱 TABLET (768px) */
/* ========================= */
@media (max-width: 768px) {
  .Topic-content {
    margin-left: 0;
    padding: 20px;
  }

  .Topic-content h1 {
    font-size: 26px;
    margin-bottom: 25px;
  }

  .topic-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topic-list a {
    font-size: 16px;
  }
}

/* ========================= */
/* 📱 MOBILE (414px & below) */
/* ========================= */
@media (max-width: 414px) {
  .Topic-content {
    padding: 15px;
  }

  .Topic-content h1 {
    font-size: 22px;
  }

  .topic-list li {
    padding: 12px 15px;
  }

  .topic-list a {
    font-size: 15px;
  }
}

/* ========================= */
/* 📱 SMALL MOBILE (360px) */
/* ========================= */
@media (max-width: 360px) {
  .Topic-content h1 {
    font-size: 20px;
  }

  .topic-list a {
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------------------------------------------------------------- */


     /* Dashboard Topic Dropdown  */

.Topic-dropdown-content {
  display: none;
  margin-left: 25px;
  margin-top: 5px;
}

.Topic-dropdown-content li a {
  font-size: 14.5px !important; 
  color: #fff !important;
}

.Topic-dropdown-arrow {
  transition: transform 0.3s;
}

.Topic-dropdown-arrow.rotate {
  transform: rotate(180deg);
}

.Topic-dropdown-btn { cursor: pointer; }

.dash-topic-show { display: block; }


/* Add dot or arrow before each topic */
.Topic-dropdown-content li a::before {
  content: "» ";
  color: #2dee07;
}

.dash-Topic-dropdown > a {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px; /* space between icon & text */
  position: relative;
  padding-right: 25px; 
  
}

.dash-Topic-dropdown > a i:first-child {
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* Push arrow to the right */
.Topic-dropdown-arrow {
  position: absolute;
  right: -10px;
  transition: transform 0.3s;
 
}


/* ------------------------------------------------------------ */



                 /* Dashboard -- Course Materials Page  */


/* Main content area */
.materials-content {
  margin-left: 200px; /* space for sidebar */
  padding: 40px;
}

.materials-content h1 {
  font-size: 32px;
  color: #04552f;
  margin-bottom: 35px;
  text-align: center;
}

.materials-content p {
  font-size: 20px;  
  color: #363b36;
  margin-bottom: 25px;
  font-weight: 600;
}

/* Materials container */
.materials {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
  gap: 50px;
}

/* Individual material card */
.materials-item {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.materials-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Module title */
.materials-item h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

/* Material links */
.materials-item a {
  display: inline-block;
  text-decoration: none;
  background: #306e9b;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-right: 10px;
  transition: background 0.3s ease;
}

.materials-item a:hover {
  background: #0077c2;
}


.materials-item .pdf-btn {
  display: inline-block;
  background: #306e9b;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.materials-item .pdf-btn:hover {
  background: #1f4d70;
}





/* ========================= */
/* 📱 TABLET (1024px) */
/* ========================= */
@media (max-width: 1024px) {
  .materials-content {
    margin-left: 0;
    padding: 25px;
  }

  .materials {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* ========================= */
/* 📱 TABLET (768px) */
/* ========================= */
@media (max-width: 768px) {
  .materials-content {
    margin-left: 0;
    padding: 20px;
    width: 100%;
  }

  .materials-content h1 {
    font-size: 26px;
  }

  .materials-content p {
    font-size: 16px;
  }

  .materials {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .materials-item h3 {
    font-size: 16px;
  }

  .materials-item a,
  .materials-item .pdf-btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* ========================= */
/* 📱 MOBILE (414px & below) */
/* ========================= */
@media (max-width: 414px) {
  .materials-content {
    padding: 15px;
  }

  .materials-content h1 {
    font-size: 22px;
  }

  .materials-content p {
    font-size: 14px;
  }

  .materials-item {
    padding: 15px;
  }

  .materials-item a,
  .materials-item .pdf-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
}

/* ========================= */
/* 📱 SMALL MOBILE (360px) */
/* ========================= */
@media (max-width: 360px) {
  .materials-content h1 {
    font-size: 20px;
  }

  .materials-content p {
    font-size: 13px;
  }

  .materials-item a,
  .materials-item .pdf-btn {
    font-size: 12px;
    padding: 8px;
  }
}





/* =========================
   TABLET VIEW
   ========================= */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    left: -250px;
    top: 60px; /* header height */
    height: calc(100% - 60px);
    z-index: 1000;
    transition: left 0.3s ease;
  }

  .sidebar.active {
    left: 0;
  }

  .materials-content {
    margin-left: 200px;
    padding: 25px;
  }

  .materials {
    gap: 20px;
  }
}


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

  /* Hide sidebar by default */
  .sidebar {
    position: fixed;
    left: -250px;
    top: 60px;
    height: calc(100% - 60px);
    z-index: 1000;
  }

  /* When active show */
  .sidebar.active {
    left: 0;
  }

  /* Remove content margin */
  .materials-content {
    margin-left: 0;
    padding: 20px;
  }

  /* Single column */
  .materials {
    grid-template-columns: 1fr;
  }

  .materials-content h1 {
    font-size: 22px;
  }

  .materials-content p {
    font-size: 16px;
  }
}



/* -------------------------------------------------------------------------------- */


               /* Dashboard -- Course Video Page  */


main.dash-video-content {
  text-align: center;
  padding: 40px;
  margin-left: 100px; /* space for sidebar */
}

.dash-video-content h1 {
  font-size: 32px;
  color: #04552f;
  margin-bottom: 35px;
}

.dash-video-container {
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2 equal-width columns */
  gap: 80px;
}

.video-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 25px;
  transition: transform 0.2s ease;

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

  /* width: 500px; 
  height: 350px; */
}

.video-item h2 {
  font-size: 19px;
  color: #054c7c;
  margin-bottom: 20px;
}

.video-item iframe {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  border: none;
}

          /* Form - course video request access - Dashboard */

.request-box h2 {
  text-align: center;
  color: #005fa3;
  margin-bottom: 25px;
  font-size: 25px;
}

.request-box {
  background: #ffffffaa;
  padding: 25px;
  border-radius: 12px;
  max-width: 450px;
  margin: 20px auto;
  backdrop-filter: blur(4px);
  margin-bottom: 50px;
}

.request-box label {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  color: #222;
  font-size: 17px;
  text-align: justify;
  margin-left: 5px;
}

.request-box input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #038824;
  border-radius: 8px;
  margin-bottom: 15px;
}

.request-box input:focus {
  outline: none;
  border-color: #0099ff;
  box-shadow: 0 0 5px #0099ff55;
}

.request-box select {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #038824;
  border-radius: 8px;
  margin-bottom: 15px;
  background: white;
  font-size: 16px;
}

.request-box select:focus {
  outline: none;
  border-color: #0099ff;
  box-shadow: 0 0 5px #0099ff55;
}

.request-box button {
  width: 100%;
  padding: 10px;
  background: #038824;
  color: white;
  border: none;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
}

.request-box button:hover {
  background: #005fa3;
}

#responseMsg {
  color: rgb(12, 88, 133);
  font-size: 16px;
  margin-top: 15px;
  font-weight: 600;
  font-family: 'Lato', 'Calibri', sans-serif;
}


/* ========================= */
/* 📱 TABLET (1024px) */
/* ========================= */
@media (max-width: 1024px) {
  main.dash-video-content {
    margin-left: 0;
    padding: 25px;
  }

  .dash-video-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* ========================= */
/* 📱 TABLET (768px) */
/* ========================= */
@media (max-width: 768px) {
  main.dash-video-content {
    margin-left: 0;
    padding: 20px;
    width: 100%;
  }

  .dash-video-content h1 {
    font-size: 26px;
  }

  .dash-video-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .video-item {
    padding: 18px;
  }

  .video-item iframe {
    height: 220px;
  }
}

/* ========================= */
/* 📱 MOBILE (414px & below) */
/* ========================= */
@media (max-width: 414px) {
  main.dash-video-content {
    padding: 15px;
  }

  .dash-video-content h1 {
    font-size: 22px;
  }

  .video-item iframe {
    height: 200px;
  }
}

/* ========================= */
/* 📱 SMALL MOBILE (360px) */
/* ========================= */
@media (max-width: 360px) {
  .dash-video-content h1 {
    font-size: 20px;
  }

  .video-item iframe {
    height: 180px;
  }
}



/* ========================= */
/* 📱 FORM MOBILE FIX */
/* ========================= */
@media (max-width: 414px) {
  .request-box {
    padding: 18px;
    margin: 15px;
  }

  .request-box h2 {
    font-size: 20px;
  }

  .request-box label {
    font-size: 15px;
  }

  .request-box input,
  .request-box select {
    font-size: 14px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------------------------- */
              

             /* Dashboard -- Tests Assignment Page  */


/* Main content */
.cpc-test-assignments {
  margin-left: 200px; /* space for sidebar */
  padding: 40px;
}

.cpc-test-assignments h1 {
  font-size: 32px;
  margin-bottom: 40px;
  color: #004d40;
  text-align: center;
  /* color: #04552f; */
  
}

.cpc-test-links-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
  gap: 40px;
}

.cpc-test-assignment-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cpc-test-assignment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cpc-test-assignment-card h3 {
  color: #055791;
  font-size: 20px;
  margin-bottom: 15px;
}

.cpc-test-assignment-card a {
  display: inline-block;
  padding: 8px 15px;
  background: #004d40;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
} 

.cpc-test-assignment-card a:hover {
  background: #00695c;
}


/* ========================= */
/* 📱 TABLET (1024px) */
/* ========================= */
@media (max-width: 1024px) {
  .cpc-test-assignments {
    margin-left: 0;
    padding: 25px;
  }

  .cpc-test-links-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* ========================= */
/* 📱 TABLET / MOBILE (768px) */
/* ========================= */
@media (max-width: 768px) {
  .cpc-test-assignments {
    margin-left: 0;
    padding: 20px;
    width: 100%;
  }

  .cpc-test-assignments h1 {
    font-size: 26px;
  }

  .cpc-test-links-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .score-box {
    flex-direction: column;
  }

  .score-input,
  .save-btn {
    width: 100%;
  }
}

/* ========================= */
/* 📱 MOBILE (414px) */
/* ========================= */
@media (max-width: 414px) {
  .cpc-test-assignments h1 {
    font-size: 22px;
  }

  .cpc-test-assignment-card {
    padding: 15px;
  }

  .cpc-test-assignment-card h3 {
    font-size: 18px;
  }
}

/* ========================= */
/* 📱 SMALL MOBILE (360px) */
/* ========================= */
@media (max-width: 360px) {
  .cpc-test-assignments h1 {
    font-size: 20px;
  }

  .cpc-test-assignment-card h3 {
    font-size: 16px;
  }
}

            
/* --------------------------------------------------------------------------------------------------------------------------------- */

             /* Dashboard -- Mock Tests Assignment Page  */


/* Main content */
.cpc-mock-test {
  margin-left: 200px; /* space for sidebar */
  padding: 40px;
}

.cpc-mock-test h1 {
  font-size: 32px;
  margin-bottom: 40px;
  color: #004d40;
  text-align: center;  
}

.cpc-mock-test-links-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
  gap: 40px;
}

.cpc-mock-test-assignment-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cpc-mock-test-assignment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cpc-mock-test-assignment-card h3 {
  color: #055791;
  font-size: 20px;
  margin-bottom: 15px;
}

.cpc-mock-test-assignment-card a {
  display: inline-block;
  padding: 8px 15px;
  background: #004d40;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
} 

.cpc-mock-test-assignment-card a:hover {
  background: #00695c;
}


/* ========================= */
/* 📱 TABLET (1024px) */
/* ========================= */
@media (max-width: 1024px) {
  .cpc-mock-test {
    margin-left: 0;
    padding: 25px;
  }

  .cpc-mock-test-links-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* ========================= */
/* 📱 TABLET / MOBILE (768px) */
/* ========================= */
@media (max-width: 768px) {
  .cpc-mock-test {
    margin-left: 0;
    padding: 20px;
    width: 100%;
  }

  .cpc-mock-test h1 {
    font-size: 26px;
  }

  .cpc-mock-test-links-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========================= */
/* 📱 MOBILE (414px) */
/* ========================= */
@media (max-width: 414px) {
  .cpc-mock-test h1 {
    font-size: 22px;
  }

  .cpc-mock-test-assignment-card {
    padding: 15px;
  }

  .cpc-mock-test-assignment-card h3 {
    font-size: 18px;
  }
}

/* ========================= */
/* 📱 SMALL MOBILE (360px) */
/* ========================= */
@media (max-width: 360px) {
  .cpc-mock-test h1 {
    font-size: 20px;
  }

  .cpc-mock-test-assignment-card h3 {
    font-size: 16px;
  }
}




   
/* Responsive */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    padding: 20px;
  }

  #quizForm {
    width: 100%;
  }
}

/* 1366 and below */
@media (max-width: 1400px) {
  .cpc-mock-test-links-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 1024 and below */
@media (max-width: 1100px) {
  .cpc-mock-test-links-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .cpc-mock-test-links-container {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */


           /* Dashboard -- Tests-Quiz score Page  */


/* Main content area */
/* .test-quiz-content {
  max-width:900px;
  margin:20px auto;
  background: #ffffff;
  max-width: 600px;
  margin: 50px auto;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.test-quiz-content h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #0d47a1;
  border-bottom: 2px solid #0a5f66;
  padding-bottom: 6px;
}

.test-quiz-content .score-card {
  background:linear-gradient(135deg,#ffffff,#88afab);
  padding:16px 20px;
  margin:20px 0;
  border-left:6px solid #0aa6a6;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  font-size:17px;
  font-weight:600;
  transition:0.3s;
}

.test-quiz-content .score-card p {
  display:flex;
  align-items:center;
  margin:0;
}

.test-quiz-content .score-card:hover {
  transform:scale(1.02);
}

.score-card p .test-name{
  width:220px;
  font-weight:600;
  color:#333;
}

.score-card .colon{
  margin:0 10px;
}

.test-quiz-content .score-card p {
  font-size: 18px;
  color: #333;
  margin: 15px 0;
  line-height: 1.6;
}

.score-card p .score-number{
  color:#0a8f2e;   
  font-weight:bold;
  font-size:18px;
}

.score-card p .score-total{
  color:#e53935;    
  font-weight:600;
  margin-left:6px;
}
 */







.test-quiz-content {
  max-width: 600px;
  margin: 50px auto;
  background: #ffffff;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* TITLE */
.test-quiz-content h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #0d47a1;
  border-bottom: 2px solid #0a5f66;
  padding-bottom: 6px;
}

/* SCORE CARD */
.test-quiz-content .score-card {
  background: linear-gradient(135deg, #ffffff, #88afab);
  padding: 16px 20px;
  margin: 20px 0;
  border-left: 6px solid #0aa6a6;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-size: 17px;
  font-weight: 600;
  transition: 0.3s;
}

.test-quiz-content .score-card:hover {
  transform: scale(1.02);
}

/* TEXT ROW */
.test-quiz-content .score-card p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0;
  font-size: 18px;
  color: #333;
  line-height: 1.6;
}

/* LEFT SIDE (TEST NAME) */
.score-card p .test-name {
  flex: 1;
  font-weight: 600;
  color: #333;
}

/* COLON */
.score-card .colon {
  margin: 0 10px;
}

/* SCORE */
.score-card p .score-number {
  color: #0a8f2e;
  font-weight: bold;
  font-size: 18px;
}

/* TOTAL */
.score-card p .score-total {
  color: #e53935;
  font-weight: 600;
  margin-left: 6px;
}

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

  .test-quiz-content {
    margin: 20px 10px;
    padding: 20px 15px;
  }

  .test-quiz-content h1 {
    font-size: 22px;
    text-align: center;
  }

  
  .test-quiz-content .score-card p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 16px;
  }

  .score-card .colon {
    display: none;
  }

  .score-number,
  .score-total {
    font-size: 16px;
  }
}







/* =========================
   📲 SMALL MOBILE (≤480px)
   ========================= */
@media (max-width: 480px) {

  .test-quiz-content {
    margin: 15px;
    padding: 15px;
  }

  .test-quiz-content h1 {
    font-size: 20px;
  }

  .test-quiz-content .score-card p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .score-card .colon {
    display: none;
  }

  .score-number,
  .score-total {
    display: inline-block;
  }
}

/* =========================
   💻 TABLET (768px - 1024px)
   ========================= */
@media (max-width: 1024px) {
  .test-quiz-content {
    max-width: 90%;
  }
}




















/* -------------------------------------------------------------------------------------------------------------------------- */

                /* -------------- Dashboard -- title - Medical Coding Training Programs ---------------- */
  
/* Page Title */
.course-title-3470 {
  text-align: center;
  margin-top: 40px;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 45px;
  color: rgb(13, 59, 160);

}

/* Course List Container */
.course-list-3470 {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
    
}

.course-list-3470 a:last-child {
  grid-column: span 2;   
  justify-self: center;   
  width: 50%;
}

/* Course Card */
.course-card-3470 {
  display: block;   
  background-color: #068d53;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  color: white;
  font-size: 18.5px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  text-decoration: none; 
  position: relative;
  
}

/* Hover Style */
.course-card-3470:hover {
  background-color: #026b38;
  transform: translateY(-5px);
  
}

/* .course-card-3470:hover .course-lock {
  opacity: 1;
} */

.course-lock {
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 18px;
  color: red;

  /* opacity: 0;            
  transition: opacity 0.3s ease;    */
}


                        /*---------------- responsive size dashboard -- course detail ---------------- */

                 /* ----------------------- Mobile Responsive (≤ 767px) ------------------------------ */

@media (max-width: 767px) {
  .course-title-3470 {
    font-size: 19px;
    margin-top: 25px;
    margin-bottom: 30px;
  }

  .course-list-3470 {
    grid-template-columns: 1fr; /* single column */
    gap: 20px;
    margin: 25px auto;
  }

  /* Remove last-card spanning on mobile */
  .course-list-3470 a:last-child {
    grid-column: auto;
    width: 100%;
  }

  .course-card-3470 {
    font-size: 15px;
    padding: 16px;
  }

  .course-lock {
    top: 17px;
    right: 10px;
    font-size: 13px;
  }
}


                    /* -------------- Tablet Responsive (768px – 1024px) --------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .course-title-3470 {
    font-size: 26px;
    margin-bottom: 35px;
  }

  .course-list-3470 {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .course-list-3470 a:last-child {
    grid-column: span 2;
    width: 70%;
  }

  .course-card-3470 {
    font-size: 17px;
    padding: 18px;
  }
}


/* --------------------------------------------------------------------------------------------------------------------------------- */

                    /* ------------------------ Dashboard -- Password Popup Form - All course ---------------------- */

     /* Popup */
.dash-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dash-popup h2 {
  margin-bottom: 10px;
  color: #068d53;
  font-size: 22px;
}

.dash-popup-box {
  background: white;
  padding: 25px;
  border-radius: 10px;
  width: 350px;
  text-align: center;
  
}

.dash-popup input {
  width: 100%;
  padding: 10px;
  margin: 15px 0;
  border: 1px solid #aaa;
  border-radius: 5px;
}

.dash-popup input:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 5px #28a74555;
  background-color: #e6ffe6;
  
}

.dash-popup-buttons button {
  padding: 10px 25px;
  margin: 10px;
  cursor: pointer;
  background: #28a745;
  color: white;
  
  font-size: 14px;
  border: 1px solid #aaa;
  border-radius: 5px;
  outline: none;

}

.dash-popup-buttons button:hover {
  background: #218838;
  
}

.dash-error {
  color: red;
  font-size: 14px;
  
}

                       /* ----------------- responsive size -- dashboard course password popup ------------------  */

                        /* -------------------------- Mobile Responsive Fix (≤ 767px) -------------------------- */
 
@media (max-width: 767px) {
  .dash-popup-box {
    width: 80%;
    max-width: 320px;
    padding: 20px;
    border-radius: 8px;
  }

  .dash-popup h2 {
    font-size: 18px;
  }

  .dash-popup input {
    padding: 9px;
    font-size: 14px;
  }

  .dash-popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dash-popup-buttons button {
    width: 100%;
    margin: 0;
    padding: 10px;
    font-size: 14px;
  }

  .dash-error {
    font-size: 13px;
  }
}

                            /* ---------------- Tablet Responsive (768px – 1024px) ------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .dash-popup-box {
    width: 380px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------- */



            /* =========== Forgot - Password ===============  */

.forgot-password-container {
  width: 900px;
  display: flex;
  background: #7bb392;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;

   animation: pageFade 0.9s ease forwards;
}

@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

    /* RIGHT SIDE - Company Logo */
.forgot-password-right {
  flex: 1;
  background: linear-gradient(to bottom, #068545, #e8f5e9);
  /* background: linear-gradient(135deg, #068545, #03521d); */
  display: flex;
  align-items: center;
  justify-content: center;

  animation: slideRight 0.9s ease forwards;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.forgot-password-logo-box {
  text-align: center;
  padding: 20px;
}

.forgot-password-logo-box img {
  max-width: 60%;
  margin-bottom: 5px;

  animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.forgot-password-logo-box h3 {
  color: #2e7d32;
  margin: 10px 0 15px;
  font-size: 20px;
}

.forgot-password-logo-box p {
  color: #4f4f4f;
  font-size: 15px;
}


  /* LEFT SIDE - Forgot Password */
.forgot-password-left {
  flex: 1;
  padding: 50px;
  text-align: center;

   animation: slideLeft 0.9s ease forwards;
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.forgot-password-left h2 {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 30px;

}

.forgot-password-left p {
  color: #ffffff;
  font-size: 17px;
}

.forgot-password-input-group {
  margin: 20px 0;
}

.forgot-password-input-group input {
  width: 90%;
  padding: 12px;
  border-radius: 25px;
  border: none;
  outline: none;
}

.forgot-btn button {
  width: 90%;
  padding: 12px;
  border-radius: 25px;
  background: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.forgot-btn button:hover {
  background: #1976d2;
}

.forgot-msg {
  margin-top: 20px;
  font-size: 14px;
  color: #ffffff;

  animation: fadeMsg 0.4s ease;
}

@keyframes fadeMsg {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.forgot-back {
  display: block;
  margin-top: 15px;
  color: #003f2e;
  text-decoration: none;
  font-weight: bold;

} 

.forgot-back:hover {
  /* background: #1976d2; */
  text-decoration: underline;
}


     /* ----------------- responsive styles - Forgot Password --------------------- */
            /* ------------   Tab --> 1024 x 768 ---------- */

@media (max-width: 1024px) {

  body {
    padding: 30px;
    height: auto;
  }

  .forgot-password-container {
    width: 100%;
    max-width: 795px;
  }

  /* Keep 2-column layout */
  .forgot-password-left,
  .forgot-password-right {
    padding: 35px;
  }

  .forgot-password-left h2 {
    font-size: 26px;
  }

  .forgot-password-left p {
    font-size: 15px;
  }

  .forgot-password-logo-box img {
    max-width: 55%;
  }

  .forgot-password-logo-box h3 {
    font-size: 18px;
  }

  .forgot-password-logo-box p {
    font-size: 14px;
  }

  .forgot-password-input-group input,
  .forgot-btn button {
    width: 95%;
  }
}

               /* ------------   Tab --> 768 x 1024 ---------- */

@media (max-width: 768px) {

  body {
    height: auto;
    padding: 20px;
  }

  .forgot-password-container {
    width: 100%;
    max-width: 420px;
    flex-direction: column;
    border-radius: 12px;
  }

  .forgot-password-right {
    padding: 25px;
  }

  .forgot-password-logo-box img {
    max-width: 140px;
  }

  .forgot-password-logo-box h3 {
    font-size: 18px;
  }

  .forgot-password-logo-box p {
    font-size: 14px;
  }

  .forgot-password-left {
    padding: 30px 20px;
  }

  .forgot-password-left h2 {
    font-size: 24px;
  }

  .forgot-password-left p {
    font-size: 15px;
  }

  .forgot-password-input-group input,
  .forgot-btn button {
    width: 100%;
  }
}

                /* ------------   Mobile --> 480 x 800 ---------- */

@media (max-width: 480px) {

  body {
    padding: 15px;
  }

  .forgot-password-logo-box img {
    max-width: 140px;
  }

  .forgot-password-left h2 {
    font-size: 22px;
  }

  .forgot-password-left p {
    font-size: 14px;
  }

  .forgot-btn button {
    font-size: 14px;
    padding: 10px;
  }

  .forgot-back {
    font-size: 14px;
  }
}

                /* ------------   Mobile --> 360 x 640 ---------- */

@media (max-width: 360px) {

  body {
    padding: 10px;
    align-items: flex-start;
  }

  .forgot-password-container {
    margin-top: 10px;
  }

  .forgot-password-left {
    padding: 20px 15px;
  }

  .forgot-password-left h2 {
    font-size: 20px;
  }

  .forgot-password-left p {
    font-size: 13px;
  }

  .forgot-btn button {
    padding: 9px;
    font-size: 13px;
  }

  .forgot-password-logo-box img {
    max-width: 120px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------  */


            /* ============= Reset - Password ================ */

.reset-password-container {
  /* display: flex;
  width: 800px;
  max-width: 90%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden; */


  display: flex;
  width: 800px;
  max-width: 90%;
  min-height: 420px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;

  animation: resetFade 0.9s ease forwards;
}

@keyframes resetFade {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* RIGHT PANEL */
.reset-password-right {
  flex: 1;
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(to bottom, #068545, #e8f5e9);

  animation: resetSlideRight 0.9s ease forwards;
}

@keyframes resetSlideRight {
  from {
    opacity: 0;
    transform: translateX(35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.reset-password-right img {
  max-width: 60%;
  margin-bottom: 5px;

  animation: resetFloat 3s ease-in-out infinite;
}

@keyframes resetFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.reset-password-right h3 {
  color: #2e7d32;
  margin: 10px 0 15px;
  font-size: 20px;
}

.reset-password-right p {
  color: #4f4f4f;
  font-size: 15px;
}

/* LEFT PANEL */
.reset-password-left {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to Top, #068545, #e8f5e9);

   animation: resetSlideLeft 0.9s ease forwards;
}

@keyframes resetSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.reset-password-left h2 {
  margin-bottom: 20px;
  color: #333;  
  font-size: 30px;
}

.reset-password-left p {
  margin-bottom: 20px;
  /* color: #666; */
  color: #333232;
  font-size: 15px;  
}

.reset-fill input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.reset-fill input:focus {
  outline: none;
  border-color: #085e29;
}

.reset-fill button {
  width: 100%;
  padding: 12px;
  border: none;
  /* background-color: #3c8c5a; */
  background-color: #1984e9;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
      
}

.reset-fill button:hover {
  background-color: #2b6e45;
}

#reset-msg {
  margin-top: 15px;
  font-size: 14px;
  color: green;
  text-align: center;
}

.reset-back {
  display: block;
  margin-top: 20px;
  text-align: center;
  /* color: #003f2e; */

  color: #061a52;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;

}

.reset-back:hover {
  text-decoration: underline;
}

.show-password {
  display: flex;
  align-items: center;
  gap: 6px;        
  margin: -2px 190px 13px 5px;
  white-space: nowrap;
}

.show-password input {
  margin: 0;       
  cursor: pointer;
}

.show-password label {
  cursor: pointer;
  font-size: 14px;
  /* color: #555 */
  color: #333232;
}


        /* ------------------ Responsive Styles - Reset Password ------------------- */
               /* ------------   Tab --> 1024 x 768 ---------- */ 


  @media (max-width: 1024px) {

  .reset-password-container {
    width: 90%;
  }

  .reset-password-left,
  .reset-password-right {
    padding: 30px;
  }

  .reset-password-left h2 {
    font-size: 26px;
  }

  .show-password {
    margin: 0 290px 15px 7px;
    justify-content: flex-start;
  }
}

                /* ------------   Tab --> 768 x 1024 ---------- */

@media (max-width: 768px) {

  body {
    height: auto;
    padding: 20px;
  }

  .reset-password-container {
    flex-direction: column;
    width: 100%;
  }

  .reset-password-right {
    order: 1;
    padding: 25px 15px;
  }

  .reset-password-left {
    order: 2;
    padding: 25px 15px;
  }

  .reset-password-right img {
    max-width: 160px;
  }

  .reset-password-left h2 {
    font-size: 24px;
    text-align: center;
  }

  .reset-password-left p {
    text-align: center;
  }

  /* IMPORTANT FIX */
  .show-password {
    margin: 0 500px 15px 10px;
    justify-content: flex-start;
  }
}
 
                          /* ------- 320 x 568 (Small phones) ----------- */

@media (max-width: 320px) and (max-height: 568px) {

  body {
    padding: 12px;
    height: auto;
  }

  .reset-password-container {
    flex-direction: column;
    width: 100%;
  }

  .reset-password-right img {
    max-width: 130px;
  }

  .reset-password-left,
  .reset-password-right {
    padding: 10px 15px;
  }

  .reset-password-left h2 {
    font-size: 22px;
    text-align: center;
  }

  .reset-password-left p {
    font-size: 13px;
    text-align: center;
  }

  .reset-fill input,
  .reset-fill button {
    padding: 10px;
    font-size: 13px;
  }

  .show-password {
    margin: 0 150px 12px 10px;
  }
}

                       /* ---------------- 360 x 640 (Android phones) ----------- */

@media (min-width: 321px) and (max-width: 360px) {

  body {
    padding: 15px;
    height: auto;
  }

  .reset-password-container {
    flex-direction: column;
    width: 100%;
  }

  .reset-password-right img {
    max-width: 130px;
  }

  .reset-password-left,
  .reset-password-right {
    padding: 18px 18px;
  }

  .reset-password-left h2 {
    font-size: 23px;
    text-align: center;
  }

  .reset-fill input,
  .reset-fill button {
    font-size: 14px;
  }

  .show-password {
    margin: 0 150px 12px 10px;
  }
}

           /* --------------- 375 x 667 (iPhone 6/7/8) ------------- */

@media (min-width: 361px) and (max-width: 375px) {

  body {
    padding: 18px;
    height: auto;
  }

  .reset-password-container {
    flex-direction: column;
    width: 100%;
  }

  .reset-password-right img {
    max-width: 130px;
  }

  .reset-password-left,
  .reset-password-right {
    padding: 23px 20px;
  }

  .reset-password-left h2 {
    font-size: 24px;
    text-align: center;
  }

  .reset-fill input,
  .reset-fill button {
    font-size: 14px;
  }

  .show-password {
    margin: 0 150px 12px 10px;
  }
}

                     /* -------------------- 414 x 736 (Large phones) ---------------- */

@media (min-width: 376px) and (max-width: 414px) {

  body {
    padding: 20px;
    height: auto;
  }

  .reset-password-container {
    flex-direction: column;
    width: 100%;
  }

  .reset-password-right img {
    max-width: 130px;
  }

  .reset-password-left,
  .reset-password-right {
    padding: 28px 22px;
  }

  .reset-password-left h2 {
    font-size: 25px;
    text-align: center;
  }

  .reset-fill input,
  .reset-fill button {
    font-size: 15px;
  }

  .show-password {
    margin: 0 170px 12px 10px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------------ */


              /* ============== Admin Access Portal ================  */



   /* Course video Access  */

.admin-box h2 {
  text-align: center;
  color: #1d75af;
  font-size: 25px;
  margin-top: 35px;
  margin-bottom: 10px;
}

.admin-box input {
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  margin-top: 15px;
  border-radius: 5px;
  border: 1px solid #aaa;
  font-size: 15px;      
  display: block;           
  box-sizing: border-box;  
}

.admin-box input:focus {
  outline: none;
  border-color: #15b33c;
  box-shadow: 0 0 5px #04701655;
}
      
button.admin-approve-btn {
  width: 90%;
  margin-top: 50px;
  padding: 12px;
  background: green;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin: 20px auto;  
  display: block; 
  box-sizing: border-box;    
        
}

button.admin-approve-btn:hover {
  background: darkgreen;
}

#Admin-msg {
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}              

/* ------------------------------------------------------------------------------------------------------------------------------------------- */


                              /* ----------------- Enquiry form -- user fill -------------------- */



.enquiry-wrapper-std {
    max-width: 900px;
    display: flex;
    align-items: center;
    background: #c7d4cc;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
    width: 100%;
    margin: 20px;

    
    margin: 20px auto;
    padding: 20px;
    gap: 20px;
}

.enquiry-logo {
    flex: 1;
    text-align: center;
}

.enquiry-logo img {
    width: 220px;
    max-width: 100%;
}

.form-container-enquiry {
    flex: 1;
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.form-container-enquiry h2 {
    text-align: center;
    color: #078b33;
}

.enquiryForm-std-3470 label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #0f53ac;
}

.enquiryForm-std-3470 input,
.enquiryForm-std-3470 select {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 8px;
    background-color: #f1f5f3;
    border: 1px solid #2ecc71;
}

.enquiryForm-std-3470 button {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: #039734;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
}

#message-enquiry-btn {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

                                          /* ----------- responsive style  -- Enquiry form ---------------------  */

/* =====================================
   TABLET
   768 - 1024
===================================== */
@media (max-width: 1024px) {
  .enquiry-wrapper-std {
    max-width: 95%;
    padding: 18px;
    gap: 18px;
  }

  .enquiry-logo img {
    width: 180px;
  }

  .form-container-enquiry {
    padding: 20px;
  }
}


/* =====================================
   LARGE MOBILES
   481 - 767
===================================== */
@media (max-width: 767px) {
  body {
    padding: 15px;
    align-items: flex-start;
  }

  .enquiry-wrapper-std {
    flex-direction: column;   
    /* margin: 0; */
  }

  .enquiry-logo {
    margin-bottom: -10px;
  }

  .enquiry-logo img {
    width: 160px;
  }

  .form-container-enquiry {
    width: 100%;
  }
}


/* =====================================
   SMALL MOBILES
   up to 480
===================================== */
@media (max-width: 480px) {

  .form-container-enquiry {
    padding: 15px;
  }

  .form-container-enquiry h2 {
    font-size: 18px;
  }

  .enquiryForm-std-3470 label {
    font-size: 13px;
  }

  .enquiryForm-std-3470 input,
  .enquiryForm-std-3470 select {
    padding: 8px;
    font-size: 13px;
  }

  .enquiryForm-std-3470 button {
    padding: 10px;
    font-size: 14px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------------- */

                     /* --------------- Website Enquiry Form ----- User fill -------------------  */


 
.website-host-std {
  max-width: 900px;
  display: flex;
  align-items: center;
  background: #c7d4cc;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
  width: 100%;
  margin: 20px;
  
  margin: 20px auto;
  padding: 20px;
  gap: 20px;
}

/* --- LEFT --- */
.website-host-logo {
   flex: 1;
   text-align: center;
}

.website-host-logo img {
  width: 220px;
  max-width: 100%;
}

  /* --- RIGHT --- */
.website-host-enquiry {
  flex: 1;
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.website-host-enquiry h2 {
  text-align: center;
  color: #078b33;
}

.website-host-enquiry label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: #0f53ac;
}

.website-host-enquiry input,
.website-host-enquiry textarea,
.website-host-enquiry select {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border-radius: 8px;
  background-color: #f1f5f3;
  border: 1px solid #2ecc71;
}

.website-host-enquiry textarea {
  resize: vertical;
  min-height: 80px;
}

.website-host-enquiry button {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: #039734;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.website-host-enquiry button:hover {
  background: #1b3c4a;
}

#message-website-btn {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}


  
                                    /* ----------- responsive style  -- Website Enquiry form ---------------------  */



/* =====================================
   TABLET
   768 - 1024
===================================== */
@media (max-width: 1024px) {
  .website-host-std {
    max-width: 95%;
    padding: 18px;
    gap: 18px;
  }

  .website-host-logo img {
    width: 180px;
  }

  .website-host-enquiry {
    padding: 20px;
  }
}


/* =====================================
   LARGE MOBILES
   481 - 767
===================================== */
@media (max-width: 767px) {
  body {
    padding: 15px;
    align-items: flex-start;
  }

  .website-host-std {
    flex-direction: column;   
    /* margin: 0; */
  }

  .website-host-logo {
    margin-bottom: -10px;
  }

  .website-host-logo img {
    width: 160px;
  }

  .website-host-enquiry {
    width: 100%;
  }
}


/* =====================================
   SMALL MOBILES
   up to 480
===================================== */
@media (max-width: 480px) {

  .website-host-enquiry {
    padding: 15px;
  }

  .website-host-enquiry h2 {
    font-size: 18px;
  }

  .websiteFrom-std-3470 label {
    font-size: 13px;
  }

  .websiteFrom-std-3470 input,
  .websiteFrom-std-3470 select {
    padding: 8px;
    font-size: 13px;
  }

  .websiteFrom-std-3470 button {
    padding: 10px;
    font-size: 14px;
  }
}



/* ----------------------------------------------------------------------------------------------------------------------------------------- */


                                  /* --------- Student feedback - form -------- */

.feedback-form-container {
      max-width: 900px;
      display: flex;
      align-items: center;
      background: #c7d4cc;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
      width: 100%;
      margin: 20px;
  
      margin: 20px auto;
      padding: 20px;
      gap: 20px;
    }

    .feedback-left-logo {
      flex: 1;
      text-align: center;
    }

    .feedback-left-logo img {
      width: 220px;
      max-width: 100%;
    }

    .feedback-right-form {
      flex: 1;
      background: #fff;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    }

    .feedback-right-form h2 {
      text-align: center;
      color: #078b33;
    }

    .feedback-right-form label {
      display: block;
      margin-top: 20px;
      font-weight: bold;
      color: #0f53ac;

      font-size: 18px;
    }

    .feedback-right-form input,
    .feedback-right-form textarea,
    .feedback-right-form select {
      width: 100%;
      padding: 10px;
      margin-top: 6px;
      border-radius: 8px;
      background-color: #f1f5f3;
      border: 1px solid #2ecc71;

      font-size: 15px;
    }

    .feedback-right-form textarea {
      resize: vertical;
      min-height: 80px;
    }

    .feedback-right-form button {
      width: 100%;
      margin-top: 20px;
      padding: 12px;
      background: #039734;
      border: none;
      color: white;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
    }

    .feedback-right-form button:hover {
      background: #034e29;
    }

    #message-feedback-btn {
      text-align: center;
      margin-top: 15px;
      font-weight: bold;
    }


                                    /* ----------- responsive style  -- Student Feedback form ---------------------  */


/* =====================================
   TABLET
   768 - 1024
===================================== */
@media (max-width: 1024px) {
  .feedback-form-container {
    max-width: 95%;
    padding: 18px;
    gap: 18px;
  }

  .feedback-left-logo img {
    width: 180px;
  }

  .feedback-right-form {
    padding: 20px;
  }
}


/* =====================================
   LARGE MOBILES
   481 - 767
===================================== */
@media (max-width: 767px) {
  body {
    padding: 15px;
    align-items: flex-start;
  }

  .feedback-form-container {
    flex-direction: column;   
    /* margin: 0; */
  }

  .feedback-left-logo {
    margin-bottom: -10px;
  }

  .feedback-left-logo img {
    width: 160px;
  }

  .feedback-right-form {
    width: 100%;
  }
}


/* =====================================
   SMALL MOBILES
   up to 480
===================================== */
@media (max-width: 480px) {

  .feedback-right-form {
    padding: 15px;
  }

  .feedback-right-form h2 {
    font-size: 18px;
  }

  .feedback-form label {
    font-size: 13px;
  }

  .feedback-form input,
  .feedback-form select {
    padding: 8px;
    font-size: 13px;
  }

  .feedback-form button {
    padding: 10px;
    font-size: 14px;
  }
}


/* -------------------------------------------------------------------------------------------------------------------------------- */

                                  /*-------- Certified Cardiology Coder (CCC) ------------ */


/* =========================
   MAIN CONTAINER
========================= */

.ccc-course-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

/* =========================
   MAIN TITLE
========================= */

.ccc-course-container h1 {
  text-align: center;
  font-size: 34px;
  color: #04552f;
  margin-bottom: 40px;
}

.ccc-course-container h2::after {
  display: none;
}

/* =========================
   COURSE OVERVIEW SECTION
========================= */

.ccc-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

/* ---- Flex layout for text + image ---- */
.ccc-overview-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* ---- Left Text ---- */
.ccc-overview-text {
  flex: 1;
}

.ccc-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.ccc-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ---- Right Image ---- */
.ccc-overview-image {
  flex: 1;
  text-align: right;
}

.ccc-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.ccc-overview-image img:hover {
  transform: scale(1.05);
}

/* =========================
   CARD DESIGN
========================= */

.ccc-card-full-width {
  background: #d4cea8;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.ccc-card-full-width:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.ccc-card-full-width h2,
.ccc-card-full-width h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.ccc-card-full-width p {
  font-size: 18px;
  color: #043819;
}

.ccc-card-full-width ul {
  padding-left: 20px;
}

.ccc-card-full-width ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* =========================
   DETAILS GRID
========================= */

.ccc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}



                                /* =================================
                                        CCC - RESPONSIVE DESIGN
                                   ================================= */

/* ======================
   TABLET (768px - 1024px)
====================== */
@media (max-width: 1024px) {

  .ccc-overview-content {
    flex-direction: column;
    text-align: center;
  }

  .ccc-overview-image {
    text-align: center;
  }

  .ccc-overview-image img {
    max-width: 400px;
  }

  .ccc-overview-text h2 {
    margin-top: 0;
  }

  .ccc-course-container {
    padding: 40px 20px;
  }
}


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

  .ccc-course-container {
    padding: 30px 15px;
  }

  .ccc-course-container h1 {
    font-size: 26px;
  }

  .ccc-overview {
    padding: 20px;
  }

  .ccc-overview-text h2 {
    font-size: 22px;
  }

  .ccc-overview-text p,
  .ccc-card-full-width p,
  .ccc-card-full-width ul li {
    font-size: 16px;
  }

  .ccc-overview-image img {
    max-width: 100%;
  }

  .ccc-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -20px;
  }
}


/* ======================
   SMALL MOBILE (Below 400px)
====================== */
@media (max-width: 400px) {

  .ccc-course-container h1 {
    font-size: 22px;
  }

  .ccc-overview-text h2 {
    font-size: 20px;
  }

  .ccc-overview-text p {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */

                               /*-------- Healthcare Information Management (HIM) ------------ */

/*--- CONTAINER ---*/
.him-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

/*--- TITLE ---*/
.him-container h1 {
  text-align: center;
  font-size: 34px;
  color: #04552f;
  margin-bottom: 40px;
}

.him-container h2::after {
  display: none;
}

/*--- OVERVIEW ---*/
.him-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.him-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

/*--- TEXT ---*/
.him-overview-text {
  flex: 1;
}

.him-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.him-overview-text p {
  font-size: 18px;
  color: #043819;
}

/*--- IMAGE ---*/
.him-overview-image {
  flex: 1;
  text-align: right;
}

.him-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.him-overview-image img:hover {
  transform: scale(1.05);
}

/*--- CARD DESIGN ---*/
.him-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.him-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.him-card h2 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.him-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.him-card p {
  font-size: 18px;
  color: #043819;
}

.him-card ul {
  padding-left: 20px;
}

.him-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/*--- GRID ---*/
.him-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                                /* =================================
                                        Him - RESPONSIVE DESIGN
                                   ================================= */

/* ======================
   TABLET (768px - 1024px)
====================== */
@media (max-width: 1024px) {

  .him-overview-content {
    flex-direction: column;
    text-align: center;
  }

  .him-overview-image {
    text-align: center;
  }

  .him-overview-image img {
    max-width: 400px;
  }

  .him-overview-text h2 {
    margin-top: 0;
  }

  .him-container {
    padding: 40px 20px;
  }
}


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

  .him-container {
    padding: 30px 15px;
  }

  .him-container h1 {
    font-size: 26px;
  }

  .him-overview {
    padding: 20px;
  }

  .him-overview-content h2 {
    font-size: 22px;
  }

  .him-overview-text p,
  .him-card p,
  .him-card ul li {
    font-size: 16px;
  }

  .him-overview-image img {
    max-width: 100%;
  }

  .him-details-grid{
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -20px;
  }
}


/* ======================
   SMALL MOBILE (Below 400px)
====================== */
@media (max-width: 400px) {

  .him-container h1 {
    font-size: 22px;
  }

  .him-overview-content h2 {
    font-size: 20px;
  }

  .him-overview-text p {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------------- */


                                 /*-------- Radiology Medical Coding ------------ */


/*--- CONTAINER ---*/
.radiology-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

/*--- TITLE ---*/
.radiology-container h1 {
  text-align: center;
  font-size: 34px; 
  margin-bottom: 40px;
  color: #04552f;
}

.radiology-container h2::after {
  display: none;
}

/*--- OVERVIEW ---*/
.radiology-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.radiology-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

/*--- TEXT ---*/
.radiology-overview-text {
  flex: 1;
}

.radiology-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.radiology-overview-text p {
  font-size: 18px;
  color: #043819;
}

/*--- IMAGE ---*/
.radiology-overview-image {
  flex: 1;
  text-align: right;  
}

.radiology-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.radiology-overview-image img:hover {
    transform: scale(1.05);
}

/*--- CARDS ---*/
.radiology-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.radiology-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.radiology-card h2 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.radiology-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.radiology-card p {
  font-size: 18px;
  color: #043819;
}

.radiology-card ul {
  padding-left: 20px;
}

.radiology-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/*--- GRID ---*/
.radiology-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                                /* ===================================================
                                       Radiology Medical Coding - RESPONSIVE DESIGN
                                   =================================================== */

/* ----------- TABLET (768px - 1024px) ----------- */

@media (max-width: 1024px) {

  .radiology-container {
    padding: 40px 20px;
  }

  .radiology-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .radiology-overview-image {
    text-align: center;
  }

  .radiology-overview-image img {
    max-width: 400px;
  }

  .radiology-overview-text h2 {
    font-size: 28px;
  }

  .radiology-container h1 {
    font-size: 30px;
  }

  .radiology-card h2,
  .radiology-card h3 {
    font-size: 22px;
  }

  .radiology-card p,
  .radiology-card ul li {
    font-size: 16px;
  }

  .radiology-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -20px;
  }
}

/* ----------- MOBILE (Below 768px) ----------- */

@media (max-width: 767px) {

  .radiology-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .radiology-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .radiology-overview {
    padding: 20px;
  }

  .radiology-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .radiology-overview-text p {
    font-size: 15px;
  }

  .radiology-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .radiology-overview-image img {
    max-width: 100%;
  }

  .radiology-card {
    padding: 20px;
  }

  .radiology-card h2,
  .radiology-card h3 {
    font-size: 20px;
  }

  .radiology-card p,
  .radiology-card ul li {
    font-size: 15px;
  }

  .radiology-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -20px;
  }
}

/* ----------- SMALL MOBILE (Below 400px) ----------- */

@media (max-width: 400px) {

  .radiology-container h1 {
    font-size: 20px;
  }

  .radiology-overview-text h2 {
    font-size: 18px;
  }

  .radiology-card h2,
  .radiology-card h3 {
    font-size: 18px;
  }

  .radiology-card p,
  .radiology-card ul li {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------------------- */

                                         /*-------- Anesthesia Medical Coding ------------ */

/*--- CONTAINER ---*/
.anesthesia-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

/*--- TITLE ---*/
.anesthesia-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.anesthesia-container h2::after {
  display: none;
}

/*--- OVERVIEW ---*/
.anesthesia-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.anesthesia-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

/*--- TEXT ---*/
.anesthesia-overview-text {
  flex: 1;
}

.anesthesia-overview-text h2 { 
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.anesthesia-overview-text p {
  font-size: 18px;
  color: #043819;
}

/*--- IMAGE ---*/
.anesthesia-overview-image {
  flex: 1;
  text-align: right;    
}

.anesthesia-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.anesthesia-overview-image img:hover {
  transform: scale(1.05);
}

/*--- CARDS ---*/
.anesthesia-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.anesthesia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.anesthesia-card h2 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.anesthesia-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.anesthesia-card p {
  font-size: 18px;
  color: #043819;
}

.anesthesia-card ul {
  padding-left: 20px;
}

.anesthesia-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/*--- GRID ---*/
.anesthesia-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}



                                /* ===================================================
                                       anesthesia Medical Coding - RESPONSIVE DESIGN
                                   =================================================== */


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

  .anesthesia-container {
    padding: 40px 20px;
  }

  .anesthesia-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .anesthesia-overview-image {
    text-align: center;
  }

  .anesthesia-overview-image img {
    max-width: 100%;
  }

  .anesthesia-container h1 {
    font-size: 30px;
  }

  .anesthesia-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .anesthesia-card h2,
  .anesthesia-card h3 {
    font-size: 22px;
  }

  .anesthesia-card p,
  .anesthesia-card ul li {
    font-size: 16px;
  }

  .anesthesia-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ----------- MOBILE (Below 768px) ----------- */
@media (max-width: 767px) {

  .anesthesia-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .anesthesia-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .anesthesia-overview {
    padding: 20px;
  }

  .anesthesia-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .anesthesia-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .anesthesia-overview-text p {
    font-size: 15px;
  }

  .anesthesia-overview-image img {
    max-width: 100%;
  }

  .anesthesia-card {
    padding: 20px;
  }

  .anesthesia-card h2,
  .anesthesia-card h3 {
    font-size: 20px;
  }

  .anesthesia-card p,
  .anesthesia-card ul li {
    font-size: 15px;
  }

  .anesthesia-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ----------- SMALL MOBILE (Below 400px) ----------- */
@media (max-width: 400px) {

  .anesthesia-container h1 {
    font-size: 20px;
  }

  .anesthesia-overview-text h2 {
    font-size: 18px;
  }

  .anesthesia-card h2,
  .anesthesia-card h3 {
    font-size: 18px;
  }

  .anesthesia-card p,
  .anesthesia-card ul li {
    font-size: 14px;
  }
}


/* -------------------------------------------------------------------------------------------------------------------------------- */


                                        /*-------- Hierarchical Condition Category (HCC) ------------ */
         

/* ===============================
   COMMON COURSE CONTAINER
================================= */

.hcc-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.hcc-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.hcc-container h2::after {
  display: none;
}

/* ===============================
   COURSE OVERVIEW SECTION
================================= */

.hcc-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.hcc-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

.hcc-overview-text {
  flex: 1;
}

.hcc-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.hcc-overview-text p {
  font-size: 18px;
  color: #043819;
}

/*--- Image Styling ---*/
.hcc-overview-image {
  flex: 1;
  text-align: right;    
}

.hcc-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.hcc-overview-image img:hover {
  transform: scale(1.05);
}

/* ===============================
   CARD STYLING
================================= */

.hcc-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.hcc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.hcc-card h2 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.hcc-card h3 {
 color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.hcc-card p {
  font-size: 18px;
  color: #043819;
}

.hcc-card ul {
  padding-left: 20px;
}

.hcc-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===============================
   DETAILS GRID
================================= */

.hcc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                                   /* ============================================================
                                       Hierarchical Condition Category (HCC) - RESPONSIVE DESIGN
                                      ============================================================ */


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

  .hcc-container {
    padding: 40px 20px;
  }

  .hcc-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .hcc-overview-image {
    text-align: center;
  }

  .hcc-overview-image img {
    max-width: 100%;
  }

  .hcc-container h1 {
    font-size: 30px;
  }

  .hcc-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .hcc-card h2,
  .hcc-card h3 {
    font-size: 22px;
  }

  .hcc-card p,
  .hcc-card ul li {
    font-size: 16px;
  }

  .hcc-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .hcc-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .hcc-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .hcc-overview {
    padding: 20px;
  }

  .hcc-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .hcc-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .hcc-overview-text p {
    font-size: 15px;
  }

  .hcc-overview-image img {
    max-width: 100%;
  }

  .hcc-card {
    padding: 20px;
  }

  .hcc-card h2,
  .hcc-card h3 {
    font-size: 20px;
  }

  .hcc-card p,
  .hcc-card ul li {
    font-size: 15px;
  }

  .hcc-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .hcc-container h1 {
    font-size: 20px;
  }

  .hcc-overview-text h2 {
    font-size: 18px;
  }

  .hcc-card h2,
  .hcc-card h3 {
    font-size: 18px;
  }

  .hcc-card p,
  .hcc-card ul li {
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------------------------------------------------------- */

                                    /*-------- Certified Coding Specialist – Physician (CCS-P) ------------ */


/* ===================================
   CCS-P SECTION STYLING
=================================== */

.ccsp-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.ccsp-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.ccsp-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.ccsp-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.ccsp-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

.ccsp-overview-text {
  flex: 1;
}

.ccsp-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.ccsp-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.ccsp-overview-image {
  flex: 1;
  text-align: right;    
}

.ccsp-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.ccsp-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.ccsp-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.ccsp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.ccsp-card h2 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.ccsp-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.ccsp-card p {
  font-size: 18px;
  color: #043819;
}

.ccsp-card ul {
  padding-left: 20px;
}

.ccsp-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===================================
   DETAILS GRID
=================================== */

.ccsp-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                                  /* ======================================================================
                                       Certified Coding Specialist – Physician (CCS-P) - RESPONSIVE DESIGN
                                     ====================================================================== */


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

  .ccsp-container {
    padding: 40px 20px;
  }

  .ccsp-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .ccsp-overview-image {
    text-align: center;
  }

  .ccsp-overview-image img {
    max-width: 100%;
  }

  .ccsp-container h1 {
    font-size: 30px;
  }

  .ccsp-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .ccsp-card h2,
  .ccsp-card h3 {
    font-size: 22px;
  }

  .ccsp-card p,
  .ccsp-card ul li {
    font-size: 16px;
  }

  .ccsp-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .ccsp-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .ccsp-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .ccsp-overview {
    padding: 20px;
  }

  .ccsp-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .ccsp-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .ccsp-overview-text p {
    font-size: 15px;
  }

  .ccsp-overview-image img {
    max-width: 100%;
  }

  .ccsp-card {
    padding: 20px;
  }

  .ccsp-card h2,
  .ccsp-card h3 {
    font-size: 20px;
  }

  .ccsp-card p,
  .ccsp-card ul li {
    font-size: 15px;
  }

  .ccsp-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .ccsp-container h1 {
    font-size: 20px;
  }

  .ccsp-overview-text h2 {
    font-size: 18px;
  }

  .ccsp-card h2,
  .ccsp-card h3 {
    font-size: 18px;
  }

  .ccsp-card p,
  .ccsp-card ul li {
    font-size: 14px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------- */

                              /*-------- Registered Health Information Administrator (RHIA) ------------ */


/* ===================================
   RHIA SECTION STYLING
=================================== */

.rhia-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.rhia-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.rhia-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.rhia-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.rhia-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

.rhia-overview-text {
  flex: 1;
}

.rhia-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.rhia-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.rhia-overview-image {
  flex: 1;
  text-align: right;  
}

.rhia-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.rhia-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.rhia-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.rhia-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.rhia-card h2,
.rhia-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.rhia-card p {
  font-size: 18px;
  color: #043819;
}

.rhia-card ul {
  padding-left: 20px;
}

.rhia-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===================================
   DETAILS GRID
=================================== */

.rhia-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                                  /* ======================================================================
                                       Certified Coding Specialist – Physician (CCS-P) - RESPONSIVE DESIGN
                                     ====================================================================== */


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

  .rhia-container {
    padding: 40px 20px;
  }

  .rhia-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .rhia-overview-image {
    text-align: center;
  }

  .rhia-overview-image img {
    max-width: 100%;
  }

  .rhia-container h1 {
    font-size: 30px;
  }

  .rhia-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .rhia-card h2,
  .rhia-card h3 {
    font-size: 22px;
  }

  .rhia-card p,
  .rhia-card ul li {
    font-size: 16px;
  }

  .rhia-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .rhia-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .rhia-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .rhia-overview {
    padding: 20px;
  }

  .rhia-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .rhia-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .rhia-overview-text p {
    font-size: 15px;
  }

  .rhia-overview-image img {
    max-width: 100%;
  }

  .rhia-card {
    padding: 20px;
  }

  .rhia-card h2,
  .rhia-card h3 {
    font-size: 20px;
  }

  .rhia-card p,
  .rhia-card ul li {
    font-size: 15px;
  }

  .rhia-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .rhia-container h1 {
    font-size: 20px;
  }

  .rhia-overview-text h2 {
    font-size: 18px;
  }

  .rhia-card h2,
  .rhia-card h3 {
    font-size: 18px;
  }

  .rhia-card p,
  .rhia-card ul li {
    font-size: 14px;
  }
}                                     

/* --------------------------------------------------------------------------------------------------------------- */

                                 /*----- Registered Health Information Technician (RHIT) -------*/



/* ===================================
   RHIT SECTION STYLING
=================================== */

.rhit-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.rhit-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.rhit-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.rhit-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.rhit-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

.rhit-overview-text {
  flex: 1;
}

.rhit-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.rhit-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.rhit-overview-image {
  flex: 1;
  text-align: right;  
}

.rhit-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.rhit-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.rhit-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.rhit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.rhit-card h2,
.rhit-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.rhit-card p {
  font-size: 18px;
  color: #043819;
}

.rhit-card ul {
  padding-left: 20px;
}

.rhit-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===================================
   DETAILS GRID
=================================== */

.rhit-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}




                                  /* ======================================================================
                                       Registered Health Information Technician (RHIT) - RESPONSIVE DESIGN
                                     ====================================================================== */

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

  .rhit-container {
    padding: 40px 20px;
  }

  .rhit-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .rhit-overview-image {
    text-align: center;
  }

  .rhit-overview-image img {
    max-width: 100%;
  }

  .rhit-container h1 {
    font-size: 30px;
  }

  .rhit-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .rhit-card h2,
  .rhit-card h3 {
    font-size: 22px;
  }

  .rhit-card p,
  .rhit-card ul li {
    font-size: 16px;
  }

  .rhit-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .rhit-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .rhit-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .rhit-overview {
    padding: 20px;
  }

  .rhit-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .rhit-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .rhit-overview-text p {
    font-size: 15px;
  }

  .rhit-overview-image img {
    max-width: 100%;
  }

  .rhit-card {
    padding: 20px;
  }

  .rhit-card h2,
  .rhit-card h3 {
    font-size: 20px;
  }

  .rhit-card p,
  .rhit-card ul li {
    font-size: 15px;
  }

  .rhit-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .rhit-container h1 {
    font-size: 20px;
  }

  .rhit-overview-text h2 {
    font-size: 18px;
  }

  .rhit-card h2,
  .rhit-card h3 {
    font-size: 18px;
  }

  .rhit-card p,
  .rhit-card ul li {
    font-size: 14px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------- */

                       /*--------- Certified Inpatient Coder (CIC) --------------*/


/* ===================================
        CIC SECTION STYLING
   =================================== */

.cic-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cic-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cic-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cic-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cic-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

.cic-overview-text {
  flex: 1;
}

.cic-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cic-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cic-overview-image {
  flex: 1;
  text-align: right;  
}

.cic-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cic-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cic-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.cic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cic-card h2,
.cic-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cic-card p {
  font-size: 18px;
  color: #043819;
}

.cic-card ul {
  padding-left: 20px;
}

.cic-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cic-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                                   /* ======================================================================
                                                Certified Inpatient Coder (CIC) - RESPONSIVE DESIGN
                                      ====================================================================== */
 
/* ---------- TABLET (768px - 1024px) ---------- */
@media (max-width: 1024px) {

  .cic-container {
    padding: 40px 20px;
  }

  .cic-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cic-overview-image {
    text-align: center;
  }

  .cic-overview-image img {
    max-width: 100%;
  }

  .cic-container h1 {
    font-size: 30px;
  }

  .cic-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cic-card h2,
  .cic-card h3 {
    font-size: 22px;
  }

  .cic-card p,
  .cic-card ul li {
    font-size: 16px;
  }

  .cic-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cic-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cic-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cic-overview {
    padding: 20px;
  }

  .cic-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cic-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cic-overview-text p {
    font-size: 15px;
  }

  .cic-overview-image img {
    max-width: 100%;
  }

  .cic-card {
    padding: 20px;
  }

  .cic-card h2,
  .cic-card h3 {
    font-size: 20px;
  }

  .cic-card p,
  .cic-card ul li {
    font-size: 15px;
  }

  .cic-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cic-container h1 {
    font-size: 20px;
  }

  .cic-overview-text h2 {
    font-size: 18px;
  }

  .cic-card h2,
  .cic-card h3 {
    font-size: 18px;
  }

  .cic-card p,
  .cic-card ul li {
    font-size: 14px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------- */

                                 /*------------------ Certified Outpatient Coder (COC) -----------*/


/* ===================================
   COC SECTION STYLING
=================================== */

.coc-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.coc-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.coc-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.coc-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.coc-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;  
}

.coc-overview-text {
  flex: 1;
}

.coc-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.coc-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.coc-overview-image {
  flex: 1;
  text-align: right;  
}

.coc-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.coc-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.coc-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.coc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.coc-card h2,
.coc-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.coc-card p {
  font-size: 18px;
  color: #043819;
}

.coc-card ul {
  padding-left: 20px;
}

.coc-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===================================
   DETAILS GRID
=================================== */

.coc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}



                          /* =====================================
                                  RESPONSIVE DESIGN - COC
                             ===================================== */

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

  .coc-container {
    padding: 40px 20px;
  }

  .coc-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .coc-overview-image {
    text-align: center;
  }

  .coc-overview-image img {
    max-width: 100%;
  }

  .coc-container h1 {
    font-size: 30px;
  }

  .coc-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .coc-card h2,
  .coc-card h3 {
    font-size: 22px;
  }

  .coc-card p,
  .coc-card ul li {
    font-size: 16px;
  }

  .coc-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .coc-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .coc-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .coc-overview {
    padding: 20px;
  }

  .coc-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .coc-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .coc-overview-text p {
    font-size: 15px;
  }

  .coc-overview-image img {
    max-width: 100%;
  }

  .coc-card {
    padding: 20px;
  }

  .coc-card h2,
  .coc-card h3 {
    font-size: 20px;
  }

  .coc-card p,
  .coc-card ul li {
    font-size: 15px;
  }

  .coc-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .coc-container h1 {
    font-size: 20px;
  }

  .coc-overview-text h2 {
    font-size: 18px;
  }

  .coc-card h2,
  .coc-card h3 {
    font-size: 18px;
  }

  .coc-card p,
  .coc-card ul li {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------------- */

                                        /*--------- Certified Professional Biller (CPB) -----------*/

/* ===================================
   CPB SECTION STYLING
=================================== */

.cpb-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cpb-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cpb-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cpb-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cpb-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between; 
}

.cpb-overview-text {
  flex: 1;
}

.cpb-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cpb-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cpb-overview-image {
  flex: 1;
  text-align: right; 
}

.cpb-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cpb-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cpb-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.cpb-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cpb-card h2,
.cpb-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cpb-card p {
  font-size: 18px;
  color: #043819;
}

.cpb-card ul {
  padding-left: 20px;
}

.cpb-card ul li {
  margin-bottom: 8px;
  color: #043819;
  font-size: 18px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cpb-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}



                          /* =====================================
                                  RESPONSIVE DESIGN - Cpb
                             ===================================== */

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

  .cpb-container {
    padding: 40px 20px;
  }

  .cpb-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cpb-overview-image {
    text-align: center;
  }

  .cpb-overview-image img {
    max-width: 100%;
  }

  .cpb-container h1 {
    font-size: 30px;
  }

  .cpb-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cpb-card h2,
  .cpb-card h3 {
    font-size: 22px;
  }

  .cpb-card p,
  .cpb-card ul li {
    font-size: 16px;
  }

  .cpb-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cpb-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cpb-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cpb-overview {
    padding: 20px;
  }

  .cpb-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cpb-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cpb-overview-text p {
    font-size: 15px;
  }

  .cpb-overview-image img {
    max-width: 100%;
  }

  .cpb-card {
    padding: 20px;
  }

  .cpb-card h2,
  .cpb-card h3 {
    font-size: 20px;
  }

  .cpb-card p,
  .cpb-card ul li {
    font-size: 15px;
  }

  .cpb-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cpb-container h1 {
    font-size: 20px;
  }

  .cpb-overview-text h2 {
    font-size: 18px;
  }

  .cpb-card h2,
  .cpb-card h3 {
    font-size: 18px;
  }

  .cpb-card p,
  .cpb-card ul li {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------------------------------------------------------------- */

                          /*----- Certified Emergency Department Coder (CEDC) -----*/


/* ===================================
   CEDC SECTION STYLING
=================================== */

.cedc-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cedc-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cedc-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cedc-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cedc-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.cedc-overview-text {
  flex: 1;
}

.cedc-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cedc-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cedc-overview-image {
  flex: 1;
  text-align: right;
}

.cedc-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cedc-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cedc-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.cedc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cedc-card h2,
.cedc-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cedc-card p,
.cedc-card ul li {
  font-size: 18px;
  color: #043819;
}

.cedc-card ul {
  padding-left: 20px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cedc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}



                         /* =====================================
                                  RESPONSIVE DESIGN - CEDC
                             ===================================== */

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

  .cedc-container {
    padding: 40px 20px;
  }

  .cedc-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cedc-overview-image {
    text-align: center;
  }

  .cedc-overview-image img {
    max-width: 100%;
  }

  .cedc-container h1 {
    font-size: 30px;
  }

  .cedc-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cedc-card h2,
  .cedc-card h3 {
    font-size: 22px;
  }

  .cedc-card p,
  .cedc-card ul li {
    font-size: 16px;
  }

  .cedc-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cedc-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cedc-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cedc-overview {
    padding: 20px;
  }

  .cedc-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cedc-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cedc-overview-text p {
    font-size: 15px;
  }

  .cedc-overview-image img {
    max-width: 100%;
  }

  .cedc-card {
    padding: 20px;
  }

  .cedc-card h2,
  .cedc-card h3 {
    font-size: 20px;
  }

  .cedc-card p,
  .cedc-card ul li {
    font-size: 15px;
  }

  .cedc-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cedc-container h1 {
    font-size: 20px;
  }

  .cedc-overview-text h2 {
    font-size: 18px;
  }

  .cedc-card h2,
  .cedc-card h3 {
    font-size: 18px;
  }

  .cedc-card p,
  .cedc-card ul li {
    font-size: 14px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------------- */

                                  /*----- Certified Evaluation & Management Coder (CEMC) -----*/

/* ===================================
   CEMC SECTION STYLING
=================================== */

.cemc-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cemc-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cemc-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cemc-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cemc-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.cemc-overview-text {
  flex: 1;
}

.cemc-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cemc-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cemc-overview-image {
  flex: 1;
  text-align: right;
}

.cemc-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cemc-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cemc-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}
 
.cemc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cemc-card h2,
.cemc-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cemc-card p,
.cemc-card ul li {
  font-size: 18px;
  color: #043819;
}

.cemc-card ul {
  padding-left: 20px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cemc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                         /* =====================================
                                  RESPONSIVE DESIGN - CEMC
                             ===================================== */

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

  .cemc-container {
    padding: 40px 20px;
  }

  .cemc-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cemc-overview-image {
    text-align: center;
  }

  .cemc-overview-image img {
    max-width: 100%;
  }

  .cemc-container h1 {
    font-size: 30px;
  }

  .cemc-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cemc-card h2,
  .cemc-card h3 {
    font-size: 22px;
  }

  .cemc-card p,
  .cemc-card ul li {
    font-size: 16px;
  }

  .cemc-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cemc-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cemc-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cemc-overview {
    padding: 20px;
  }

  .cemc-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cemc-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cemc-overview-text p {
    font-size: 15px;
  }

  .cemc-overview-image img {
    max-width: 100%;
  }

  .cemc-card {
    padding: 20px;
  }

  .cemc-card h2,
  .cemc-card h3 {
    font-size: 20px;
  }

  .cemc-card p,
  .cemc-card ul li {
    font-size: 15px;
  }

  .cemc-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cemc-container h1 {
    font-size: 20px;
  }

  .cemc-overview-text h2 {
    font-size: 18px;
  }

  .cemc-card h2,
  .cemc-card h3 {
    font-size: 18px;
  }

  .cemc-card p,
  .cemc-card ul li {
    font-size: 14px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------ */


/* ===================================
   CDEO OUTPATIENT SECTION STYLING
=================================== */

.cdeo-op-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cdeo-op-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cdeo-op-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cdeo-op-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cdeo-op-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.cdeo-op-overview-text {
  flex: 1;
}

.cdeo-op-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cdeo-op-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cdeo-op-overview-image {
  flex: 1;
  text-align: right;
}

.cdeo-op-overview-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cdeo-op-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cdeo-op-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.cdeo-op-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cdeo-op-card h2,
.cdeo-op-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cdeo-op-card p,
.cdeo-op-card ul li {
  font-size: 18px;
  color: #043819;
}

.cdeo-op-card ul {
  padding-left: 20px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cdeo-op-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                          /* =====================================
                                  RESPONSIVE DESIGN - CDEO
                             ===================================== */

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

  .cdeo-op-container {
    padding: 40px 20px;
  }

  .cdeo-op-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cdeo-op-overview-image {
    text-align: center;
  }

  .cdeo-op-overview-image img {
    max-width: 50%;
  }

  .cdeo-op-container h1 {
    font-size: 30px;
  }

  .cdeo-op-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cdeo-op-card h2,
  .cdeo-op-card h3 {
    font-size: 22px;
  }

  .cdeo-op-card p,
  .cdeo-op-card ul li {
    font-size: 16px;
  }

  .cdeo-op-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cdeo-op-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cdeo-op-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cdeo-op-overview {
    padding: 20px;
  }

  .cdeo-op-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cdeo-op-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cdeo-op-overview-text p {
    font-size: 15px;
  }

  .cdeo-op-overview-image img {
    max-width: 100%;
  }

  .cdeo-op-card {
    padding: 20px;
  }

  .cdeo-op-card h2,
  .cdeo-op-card h3 {
    font-size: 20px;
  }

  .cdeo-op-card p,
  .cdeo-op-card ul li {
    font-size: 15px;
  }

  .cdeo-op-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cdeo-op-container h1 {
    font-size: 20px;
  }

  .cdeo-op-overview-text h2 {
    font-size: 18px;
  }

  .cdeo-op-card h2,
  .cdeo-op-card h3 {
    font-size: 18px;
  }

  .cdeo-op-card p,
  .cdeo-op-card ul li {
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------------------------------------------------------------------- */


                            /*----- Certified Documentation Expert – Inpatient (CDEI) -----*/


/* ===================================
   CDEI SECTION STYLING
=================================== */

.cdei-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cdei-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cdei-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cdei-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cdei-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.cdei-overview-text {
  flex: 1;
}

.cdei-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cdei-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cdei-overview-image {
  flex: 1;
  text-align: right;
}

.cdei-overview-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cdei-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cdei-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.cdei-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cdei-card h2,
.cdei-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cdei-card p,
.cdei-card ul li {
  font-size: 18px;
  color: #043819;
}

.cdei-card ul {
  padding-left: 20px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cdei-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}


                          /* =====================================
                                  RESPONSIVE DESIGN - CDEI
                             ===================================== */

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

  .cdei-container {
    padding: 40px 20px;
  }

  .cdei-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cdei-overview-image {
    text-align: center;
  }

  .cdei-overview-image img {
    max-width: 50%;
  }

  .cdei-container h1 {
    font-size: 30px;
  }

  .cdei-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cdei-card h2,
  .cdei-card h3 {
    font-size: 22px;
  }

  .cdei-card p,
  .cdei-card ul li {
    font-size: 16px;
  }

  .cdei-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cdei-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cdei-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cdei-overview {
    padding: 20px;
  }

  .cdei-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cdei-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cdei-overview-text p {
    font-size: 15px;
  }

  .cdei-overview-image img {
    max-width: 100%;
  }

  .cdei-card {
    padding: 20px;
  }

  .cdei-card h2,
  .cdei-card h3 {
    font-size: 20px;
  }

  .cdei-card p,
  .cdei-card ul li {
    font-size: 15px;
  }

  .cdei-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cdei-container h1 {
    font-size: 20px;
  }

  .cdei-overview-text h2 {
    font-size: 18px;
  }

  .cdei-card h2,
  .cdei-card h3 {
    font-size: 18px;
  }

  .cdei-card p,
  .cdei-card ul li {
    font-size: 14px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------------ */




/* ===================================
   CPPM SECTION STYLING
=================================== */

.cppm-container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px;
  margin-top: -10px;
}

.cppm-container h1 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 40px;
  color: #04552f;
}

.cppm-container h2::after {
  display: none;
}

/* ===================================
   OVERVIEW SECTION
=================================== */

.cppm-overview {
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  background: #d4cea8;
}

.cppm-overview-content {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.cppm-overview-text {
  flex: 1;
}

.cppm-overview-text h2 {
  margin-bottom: 15px;
  margin-top: -20px;
  color: #052569;
  font-size: 32px;
}

.cppm-overview-text p {
  font-size: 18px;
  color: #043819;
}

/* ===================================
   IMAGE STYLE
=================================== */

.cppm-overview-image {
  flex: 1;
  text-align: right;
}

.cppm-overview-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.cppm-overview-image img:hover {
  transform: scale(1.05);
}

/* ===================================
   CARD STYLE
=================================== */

.cppm-card {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
  background: #d4cea8;
}

.cppm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.cppm-card h2,
.cppm-card h3 {
  color: #052569;
  margin-bottom: 15px;
  font-size: 26px;
}

.cppm-card p,
.cppm-card ul li {
  font-size: 18px;
  color: #043819;
}

.cppm-card ul {
  padding-left: 20px;
}

/* ===================================
   DETAILS GRID
=================================== */

.cppm-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
  margin-bottom: -50px;
}



                          /* =====================================
                                  RESPONSIVE DESIGN - CPPM
                             ===================================== */

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

  .cppm-container {
    padding: 40px 20px;
  }

  .cppm-overview-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cppm-overview-image {
    text-align: center;
  }

  .cppm-overview-image img {
    max-width: 50%;
  }

  .cppm-container h1 {
    font-size: 30px;
  }

  .cppm-overview-text h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .cppm-card h2,
  .cppm-card h3 {
    font-size: 22px;
  }

  .cppm-card p,
  .cppm-card ul li {
    font-size: 16px;
  }

  .cppm-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: -30px;
  }
}


/* ---------- MOBILE (Below 768px) ---------- */
@media (max-width: 767px) {

  .cppm-container {
    padding: 30px 15px;
    margin-top: 0;
  }

  .cppm-container h1 {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cppm-overview {
    padding: 20px;
  }

  .cppm-overview-content {
    flex-direction: column;
    gap: 20px;
  }

  .cppm-overview-text h2 {
    font-size: 22px;
    margin-top: 0;
  }

  .cppm-overview-text p {
    font-size: 15px;
  }

  .cppm-overview-image img {
    max-width: 100%;
  }

  .cppm-card {
    padding: 20px;
  }

  .cppm-card h2,
  .cppm-card h3 {
    font-size: 20px;
  }

  .cppm-card p,
  .cppm-card ul li {
    font-size: 15px;
  }

  .cppm-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: -30px;
  }
}


/* ---------- SMALL MOBILE (Below 400px) ---------- */
@media (max-width: 400px) {

  .cppm-container h1 {
    font-size: 20px;
  }

  .cppm-overview-text h2 {
    font-size: 18px;
  }

  .cppm-card h2,
  .cppm-card h3 {
    font-size: 18px;
  }

  .cppm-card p,
  .cppm-card ul li {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------------- */

                                /*-------------- Student attendance -----------------*/

.attendance-main-container {
  display: flex;
  height: 100vh;
}

/*---- LEFT SIDE ----*/
.attendance-left-section {
  flex: 1;
  background: #9ccaa6;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.attendance-left-section h2 {
  font-size: 28px;
  color: #004aad;
}

.attendance-left-section img {
  width: 250px;
  margin-bottom: 20px;
}

/*---- RIGHT SIDE ----*/
.attendance-right-section {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}

.attendance-right-section h2 {
  font-size: 36px;
  margin-bottom: 15px;
  color: #078518;
}

.attendance-right-section form {
  max-width: 450px;
}

.attendance-form-group {
  margin-bottom: 15px;
}

.attendance-form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 20px;
  color: black;
}

.attendance-form-group input,
.attendance-form-group select {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  font-size: 16px;
  border: 1px solid #0cbe5c;
  outline: none;
  box-sizing: border-box;
}

.attendance-form-group input:focus,
.attendance-form-group select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.attendance-right-section button {
  width: 100%;
  padding: 10px;
  background: #049428;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 18px;
  margin-bottom: 20px;
}

.attendance-right-section button:hover {
  background: #035e1a;
}

                                   /*------ Student Attendance responsive style ------*/

/* ============================= */
/* TABLET VIEW (768px - 1024px) */
/* ============================= */

@media (max-width: 1024px) {

  .attendance-right-section {
    padding: 30px;
  }

  .attendance-right-section h2 {
    font-size: 28px;
  }

  .attendance-left-section h2 {
    font-size: 22px;
  }

  .attendance-left-section img {
    width: 200px;
  }
}

/* ============================= */
/* MOBILE VIEW (Below 768px) */
/* ============================= */

@media (max-width: 768px) {

  .attendance-main-container {
    flex-direction: column;
  }

  .attendance-left-section,
  .attendance-right-section {
    flex: none;
    width: 100%;
    height: auto;
  }

  .attendance-left-section {
    padding: 40px 20px;
    text-align: center;
  }

  .attendance-left-section img {
    width: 180px;
  }

  .attendance-right-section {
    padding: 30px 20px;
  }

  .attendance-right-section h2 {
    font-size: 24px;
    text-align: center;
  }

  .attendance-form-group label {
    font-size: 16px;
  }

  .attendance-right-section button {
    font-size: 16px;
  }
}

/* ============================= */
/* SMALL MOBILE (Below 480px) */
/* ============================= */

@media (max-width: 480px) {

  .attendance-left-section img {
    width: 150px;
  }

  .attendance-right-section {
    padding: 20px 15px;
  }

  .attendance-form-group input,
  .attendance-form-group select {
    font-size: 14px;
  }

  .attendance-right-section button {
    padding: 8px;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------------------- */

                                 /*----------------- User Profile  -------------*/


.user-profile-wrapper {
  display:flex;
  min-height:100vh;
}

/*--- LEFT SIDE ---*/
/* .user-profile-left {
  width:50%;
  background:#bfe1f8;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.user-profile-left h2 {
  color: #047730;
  margin-bottom: 10px;   
  font-size: 28px;
}

.user-profile-left p {
  font-size: 20px;
  background: linear-gradient(to bottom, #0765f1 50%, #047730 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.user-profile-company-logo {
  width:200px;
} */


/* -------------------------------------------------------------------------------------------------------------------------------------- */

                        /*======================================
                             Online Student registration Form
                          ======================================*/
 
/*--- Main Layout ---*/
.student-registration-form {
  display: flex;
  min-height: 100vh;
}

/*--- Left Logo Section ---*/
.student-registration-logo {
  flex: 1;
  background: #a2bdbe;
  display: flex;
  justify-content: center;
  align-items: center;
}

.student-registration-logo img {
  max-width: 40%;
}

/*--- Right Form Section ---*/
.right-student-registration-form {
  flex: 1;
  padding: 50px;
  background: #64ac90;
}

.right-student-registration-form h2 {
  margin-bottom: 20px;
  font-size: 28px;
  text-align: center;
  color:#0a319c;
}

/*--- Form Styling ---*/
.student-registration-3470 label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

.student-registration-3470 input,
.student-registration-3470 select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.student-registration-3470 input:focus,
.student-registration-3470 select:focus {
  border: 1px solid #02147a;     
  outline: none;               
  box-shadow: 0 0 0 3px rgba(10, 160, 110, 0.15);
}

/*---- Button ----*/
.student-registration-3470 button {
  margin-top: 20px;
  padding: 12px;
  width: 100%;
  background: #0a319c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.student-registration-3470 button:hover {
  background: #0056b3;
}

/*--- Success Message ---*/
#student-registration-btn {
  margin-top: 15px;
  color: green;
}

                                              /*----------- Responsive style -------------------*/

/* =========================
   📱 MOBILE (320px – 767px)
========================= */
@media (max-width: 767px) {

  .student-registration-form {
    flex-direction: column;
  }

  .student-registration-logo {
    height: 180px;
  }

  .student-registration-logo img {
    max-width: 60%;
  }

  .right-student-registration-form {
    padding: 20px;
  }

  .right-student-registration-form h2 {
    font-size: 20px;
  }

  .student-registration-3470 input,
  .student-registration-3470 select {
    padding: 8px;
    font-size: 14px;
  }

  .student-registration-3470 button {
    padding: 10px;
    font-size: 14px;
  }
}


/* =========================
   📲 TABLET (768px – 1024px)
========================= */
@media (min-width: 768px) and (max-width: 1024px) {

  .student-registration-form {
    flex-direction: column;
  }

  .student-registration-logo {
    height: 220px;
  }

  .student-registration-logo img {
    max-width: 50%;
  }

  .right-student-registration-form {
    padding: 30px;
  }

  .right-student-registration-form h2 {
    font-size: 24px;
  }
}


/* =========================
   💻 SMALL DESKTOP (1025px – 1366px)
========================= */
@media (min-width: 1025px) and (max-width: 1366px) {

  .student-registration-logo img {
    max-width: 45%;
  }

  .right-student-registration-form {
    padding: 40px;
  }
}


/* =========================
   🖥 LARGE DESKTOP (1367px+)
========================= */
@media (min-width: 1367px) {

  .student-registration-logo img {
    max-width: 35%;
  }

  .right-student-registration-form {
    padding: 60px;
  }

  .right-student-registration-form h2 {
    font-size: 32px;
  }
}                          

/* --------------------------------------------------------------------------------------------------------------------------- */

                           /* ----------------- Admission form -- user fill -------------------- */

                           
.admission-form-std {
  max-width: 1000px;
  display: flex;
  align-items: center;
  background: #c7d4cc;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
  width: 100%;
  margin: 20px;
  margin: 20px auto;
  padding: 20px;
  gap: 20px;
}

.admission-logo {
  flex: 1;
  text-align: center;
}

.admission-logo img {
  width: 220px;
  max-width: 100%;
}

.admission-logo h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}

.admission-logo p {
  color: #555;
  font-size: 18px;
  margin-top: 20px;
}

.admission-container-enquiry {
  flex: 1;
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.admission-container-enquiry h2 {
  text-align: center;
  color: #078b33;
}

.admissionForm-std-3470 label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: #0f53ac;
}

.admissionForm-std-3470 input,
.admissionForm-std-3470 select {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border-radius: 8px;
  background-color: #f1f5f3;
  border: 1px solid #2ecc71;
}

.admissionForm-std-3470 textarea {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid #2ecc71;
  background-color: #f1f5f3;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.3s;
}

.admissionForm-std-3470 textarea {
  resize: none;
  height: 80px;
}

.admissionForm-std-3470 button {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: #039734;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.admissionForm-std-3470 button:hover {
  background-color: rgb(6, 89, 167);
}

#admission-enquiry-btn {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

                                         /*------ Responsive Size - Admission Size ------*/


/* ========================= */
/* 📱 MOBILE (320px - 480px) */
/* ========================= */
@media (max-width: 480px) {
  .admission-form-std {
    flex-direction: column;
    padding: 15px;
    gap: 15px;
  }

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

  .admission-logo h3 {
    font-size: 18px;
  }

  .admission-logo p {
    font-size: 14px;
  }

  .admission-container-enquiry {
    padding: 15px;
  }

  .admissionForm-std-3470 button {
    font-size: 14px;
    padding: 10px;
  }
}

/* ========================= */
/* 📱 LARGE MOBILE (481–767px) */
/* ========================= */
@media (min-width: 481px) and (max-width: 767px) {
  .admission-form-std {
    flex-direction: column;
  }

  .admission-logo img {
    width: 160px;
  }
}

/* ========================= */
/* 📟 TABLET (768px - 1024px) */
/* ========================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .admission-form-std {
    flex-direction: column;
    padding: 20px;
  }

  .admission-logo {
    margin-bottom: 10px;
  }

  .admission-logo img {
    width: 180px;
  }
}

/* ========================= */
/* 💻 SMALL DESKTOP (1025–1366px) */
/* ========================= */
@media (min-width: 1025px) and (max-width: 1366px) {
  .admission-form-std {
    max-width: 1000px;
  }
}

/* ========================= */
/* 🖥 LARGE DESKTOP (1367px+) */
/* ========================= */
@media (min-width: 1367px) {
  .admission-form-std {
    max-width: 1200px;
  }
}


/* ------------------------------------------------------------------------------------------------------------------------------------- */
  
                                            /* ------------------------
                                                Our Institutes Results 
                                               ------------------------ */

.our-results {  
  text-align: center;
  border-bottom: 3px solid #007bff;
}

.our-results h2 {
  font-size: 32px;
  font-weight: bold;
  color: #106cce;
  margin-bottom: 40px;
  margin-top: 40px;
  letter-spacing: 1px;
}

.results-btn {
  padding: 14px 24px;
  background: rgb(3, 104, 53);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 40px;
}

.results-btn:hover {
  background-color: rgb(11, 148, 55);
}

/* ========================= */
/* 📱 Tablet (768px - 1024px) */
/* ========================= */
@media (max-width: 1024px) {
  .our-results {
    padding: 15px;
  }

  .our-results h2 {
    font-size: 26px;
    margin: 30px 0;
  }

  .results-btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ========================= */
/* 📱 Mobile (<= 768px) */
/* ========================= */
@media (max-width: 768px) {
  .our-results h2 {
    font-size: 22px;
    margin: 25px 0;
  }

  .results-btn {
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 8px;
  }
}

/* ========================= */
/* 📱 Small Mobile (<= 480px) */
/* ========================= */
@media (max-width: 480px) {
  .our-results h2 {
    font-size: 18px;
    letter-spacing: 0.5px;
  }

  .results-btn {
    width: 90%;
    max-width: 250px;
    display: block;
    margin: 0 auto 30px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------- */