@media(max-width:1300px) {
  body, html {
    width: 1300px;
  }
}

:root {
  --primary-color: #e74c3c;
  --bg-color: #f8f9fa;
  --text-color: #333;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Raleway',Arial,sans-serif}
body{background:var(--bg-color);color:var(--text-color)}
.navbar{background:white;border-bottom:1px solid #ddd;padding:5px 0;}
.navbar .container{display:flex;justify-content:center;align-items:center;position: relative; height: 80px;}
/* .navbar .logo{font-size:1.5rem;font-weight:bold;color:var(--primary-color)} */
.navbar .logo {position: absolute; right: 10px;}
.navbar .logo img{height:80px;width:auto;display:block}
.navbar .btn{height:40px;line-height:40px;padding:0 20px}
.nav-links{display:flex;list-style:none}
.nav-links li{margin:0 15px}
.nav-links a{text-decoration:none;color:var(--text-color);font-weight:bold}
.menu-toggle{display:none;font-size:2rem;cursor:pointer}
.btn{background:#0d6efd;color:#fff;border:none;padding:10px 20px;cursor:pointer;border-radius:4px}
.navbar .title-name {font-size: 24px; font-weight: bold; color: black; position: absolute; left: 20px;}
/* Carousel */
.carousel{position:relative;height:420px;overflow:hidden;background:#000;color:#fff}
.carousel .slides{width:100%;height:100%;position:relative}
.carousel .slide{position:absolute;inset:0;background-size: 100% 100%;background-repeat: no-repeat;background-repeat: no-repeat;background-position:center;opacity:0;transform:scale(1.02);transition:opacity .6s,transform 1.2s;display:grid;place-items:center}
.carousel .slide.active{opacity:1;transform:scale(1);z-index:1}
.carousel .slide-overlay{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.carousel .slide-content{position:relative;z-index:2;text-align:center;padding:0 1rem;max-width:900px}
.carousel .slide-content h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:14px}
.carousel .slide-content p{font-size:clamp(1rem,2.5vw,1.2rem);margin-bottom:18px}
.text-top{background-color: black; color: white;padding: 10px 20px;font-size: 28px;font-weight: bold;border-radius: 10px;margin: 0px;margin: 0px 0px 0px 30px !important;}
.text-bottom{background-color: white; color: black;padding: 10px 20px;font-size: 28px;font-weight: bold;border-radius: 10px;margin: 0px;margin: 0px 30px 0px 0px !important;}
.carousel .nav-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius:50%;
  cursor:pointer;
  z-index:3;
  font-size: 2rem;
  line-height: 1;
}
.carousel .nav-arrow:hover{background:rgba(255,255,255,.3)}
.carousel .nav-arrow.prev{left:16px}
.carousel .nav-arrow.next{right:16px}
.carousel .dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.carousel .dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer}
.carousel .dots button.active{background:var(--primary-color);transform:scale(1.2)}
/* Services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:40px 20px;}
.service-card{
  background:linear-gradient(to bottom, #d3d3d3, #696969);
  padding:20px;
  text-align:center;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.service-card:hover {
  transform: scale(1.05);
  z-index: 10;
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.service-card img{width:150px;margin:15px}
.service-card h3{color:#0d6efd}
.service-card a{display:inline-block;margin-top:10px;color:#0d6efd;font-weight:bold;text-decoration:none}
footer{background:#333;color:white;text-align:center;padding:15px 0}
/* @media(max-width:768px){.nav-links{display:none;flex-direction:column;background:white;position:absolute;top:60px;right:20px;border:1px solid #ddd;padding:10px}.nav-links.active{display:flex}.menu-toggle{display:block}} */

/* Blog page start -------------------------------------------------------------------------------------- */

/* containerForSectionIframe that holds both the reports section and the iframe */
.containerForSectionIframe {
  display: flex; /* Makes the children (sections) aligned horizontally */
  justify-content: space-between; /* Adds space between elements */
  gap: 20px; /* Adds space between the sections */
}

/* Monthly Reports (Blog) */
.monthly-reports{flex: 1;padding:40px 20px;max-width:1000px;min-width:700px;margin:0 auto}
.monthly-reports .monthly-report{background:#fff;padding:24px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);border-left:4px solid var(--primary-color);margin-bottom:20px;text-align: center;}
.monthly-reports .monthly-report h2{font-size:1.25rem;line-height:1.4;margin-bottom:10px;color:#0d6efd}
.monthly-reports .monthly-report p{margin-bottom:12px;line-height:1.8}
.monthly-reports .monthly-report:last-child{margin-bottom:0}
.monthly-reports .monthly-report:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px);transition:box-shadow .2s ease,transform .2s ease}
/* @media(max-width:768px){.monthly-reports{padding:24px 16px}.monthly-reports .monthly-report{padding:18px;border-radius:8px}} */

/* Styling for the iframe */
iframe {
  border: none;
  border-radius: 8px;
  margin: 20px;
}

/* Blog nav card --------------------------------------------------------------------------------------- */
.blog-nav{margin:30px 0}
.blog-nav__card{background:#ffffff;position:relative;border-radius:12px;padding:18px;max-width:420px;margin:0 auto;box-shadow:0 6px 18px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);overflow:hidden}
.blog-nav__card::before{content:"";position:absolute;inset:-2px;z-index:0;background:conic-gradient(from 180deg at 50% 50%, rgba(13,110,253,.35), rgba(231,76,60,.35), rgba(13,110,253,.35));filter:blur(18px);opacity:.0;transition:opacity .4s ease}
.blog-nav__card:hover::before{opacity:.6}
.blog-nav__card::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.9));z-index:1}
.blog-nav__list{list-style:none;padding:0;margin:0;position:relative;z-index:2}
.blog-nav__item{margin-bottom:12px}
.blog-nav__link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#333;font-weight:600;letter-spacing:.2px;position:relative}
.blog-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.blog-nav__link:hover::after{transform:scaleX(1)}
.blog-nav__link:hover{color:#0d6efd}
.blog-nav__link--primary{color:#0d6efd}
.blog-nav__link--primary:hover{filter:brightness(1.05)}

/* Fancy entrance on load */
@keyframes cardFloatIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.blog-nav__card{animation:cardFloatIn .5s ease both}

/* Details dropdown styling */
.blog-nav__details{position:relative}
.blog-nav__summary{cursor:pointer;color:#0d6efd;font-weight:700;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;transition:color .3s ease}
.blog-nav__summary::marker{content:""}
.blog-nav__summary::before{content:"\25BC";font-size:.9em;display:inline-block;transform:rotate(-90deg);transition:transform .3s ease}
.blog-nav__details[open] .blog-nav__summary::before{transform:rotate(0deg)}
.blog-nav__summary:hover{color:#0a58ca}

.blog-nav__submenu{list-style:none;padding-left:18px;margin:8px 0 0 0;display:grid;gap:8px;transform-origin:top;transition:all .35s ease}
.blog-nav__submenu-item{opacity:.0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
.blog-nav__details[open] .blog-nav__submenu-item{opacity:1;transform:translateY(0)}

/* Subtle hover lift for items */
.blog-nav__item:hover{transform:translateX(2px)}
.blog-nav__item{transition:transform .25s ease}

/* @media(max-width:480px){ .blog-nav__card{max-width:100%;border-radius:10px} .blog-nav__link{font-weight:700} } */

/* Flip-card start*/

.flashcard-panel {
  padding: 10px;
  width: 20%;
}

.flashcard {
  background-color: transparent;
  width: 90%;
  height: 150px;
  perspective: 1000px;
  cursor: pointer; /* So users know it's clickable */
  margin: 30px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.flashcard-header {
  height: 30px;
  background-color: black;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.flashcard-content {
  flex: 1;
  padding: 15px;
  background: linear-gradient(to top, #87CEFA, #e0f7ff);
  color: black;
  font-weight: bold;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flashcard-back {
  transform: rotateY(180deg);
}


/* Flip-card end*/

/* Blog page end  -------------------------------------------------------------------------------------- */

/* FLAGSHIP COURSES PAGE START -------------------------------------------------------------------------------------- */

.monthly-report ul,
.monthly-report ol {
  list-style-position: inside;
}

.monthly-report table {
  margin: auto;
}

.monthly-report ol {
  text-align: left;
}

.table-data-in-flagship {
  margin-bottom: 0px !important;
}

/* FLAGSHIP COURSES PAGE END -------------------------------------------------------------------------------------- */

/* Table Start */

  table {
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  th, td {
    vertical-align: top;
    padding: 10px;
    line-height: 1.6;
  }
  
  tr:hover td {
    background-color: #eef6ff;
    transition: background-color 0.3s ease;
  }

  tr:nth-child(even) td {
    background-color: #f7f7f7;
  }

    /* Add the vertical line on the second column */
  .course-comparison-table td:nth-child(2) {
    border-left: 2px solid #CCC;
  }

  .course-comparison-table th:nth-child(2) {
    border-left: 2px solid #CCC;
  }
  
/* Table End */

/* Sticky Button Start */
.sticky.button {
  position: fixed;
  bottom: 100px;
  right: 0px;
  width: 200px;
  height: 60px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #0d6efd;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  color: white;
  font-weight: bold;
  /* Add a slight shadow for better visibility */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
}
/* Sticky Button End */