/* Top Bar */
.top-bar {
  background-color: #023f6a;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.top-bar-container {
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 0 64px;
}

.top-bar-active {
  color: #fff;
  border-bottom: 2px solid #fca312;
  padding: 14px 0;
  margin: 0;
}

.top-bar-inactive {
  color: #fff;
  opacity: 0.5;
  padding: 14px 0;
  margin: 0;
}

/* Desktop Navbar */
.desktop-navbar {
  background-color: #fff;
  display: block;
}

.desktop-navbar-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px !important;
  margin-top: 52px;
}

.desktop-logo {
  width: 96px;
  height: 100px;
}

.desktop-nav-wrapper {
  display: flex;
  gap: 28px;
  align-items: center;
}

.desktop-nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: #00243d;
  font-size: 16px;
}

.nav-link {
  color: #00243d;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #03489f;
}

/* Mobile Navbar */
.mobile-navbar {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: white;
  width: 100%;
  z-index: 50;
  margin-top: 52px;
}

.mobile-logo {
  width: 62px;
  height: 66px;
}

/* Hamburger Menu */
.hamburger-menu {
  position: relative;
  width: 32px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-line {
  display: block;
  height: 4px;
  background-color: #03489f;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
}

/* Hamburger Animation States */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.slide-card {
  position: fixed;
  top: 165px;
  right: -100%;
  width: 300px;
  height: 100%;
  overflow-y: scroll;
  max-height: 75vh;
  background-color: white;
  color: black;
  z-index: 9999;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 40px 20px;
  box-shadow: 0 0 4px 2px rgb(211, 211, 211);
  border-radius: 10px;
}

.slide-card::-webkit-scrollbar {
  width: 4px;
}

.slide-card::-webkit-scrollbar-button {
  background: #ffffff;
}

.slide-card::-webkit-scrollbar-track-piece {
  background: #ffffff;
}

.slide-card::-webkit-scrollbar-thumb {
  background: #03489f;
  border-radius: 20px;
}

.slide-card.active {
  right: 100px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: white;
  align-self: flex-end;
  cursor: pointer;
}

.slide-card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.slide-link {
  color: black;
  text-decoration: none;
  font-size: 16px;
}

.slide-link:hover {
  text-decoration: none;
  color: #03489f;
}

/* Mobile and Tablet Styles */
@media (max-width: 767px) {
	.hero-section {
		/* padding: 155px 0 0; */
	}
  .top-bar-container {
    padding: 0 20px;
  }

  .desktop-navbar {
    display: none;
  }

  .mobile-navbar {
    display: flex;
  }

  .slide-card {
    top: 140px;
  }

  .slide-card.active {
    right: 20px;
  }
}

.hamburger span {
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(10px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px);
}

/* Hide by default */
.mobile-only {
  display: none;
}

@media screen and (max-width: 1024px) {
  .slide-card.active {
    right: 60px;
  }
}

/* Show only on screens smaller than 768px (mobile) */
@media (max-width: 820px) {
  .mobile-only {
    display: block;
  }

  .desktop-nav-links {
    display: none;
  }

  .slide-card.active {
    right: 40px;
  }
}

@media screen and (max-width: 640px) {
  .slide-card {
    box-shadow: none;
    border-radius: 0;
    max-height: 80vh;
  }

  .slide-card.active {
    right: 0;
  }

  .slide-card::-webkit-scrollbar {
    width: 0;
  }
}
/*header ends*/

/*footer starts*/
/* Footer Wrapper */
.footer-wrapper {
  background-color: #03489f;
}

/* Footer Main Section */
.footer-main {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid rgba(98, 192, 251, 0.19);
}

/* Footer Content */
.footer-content {
  width: 65%;
  padding-top: 60px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: row;
  gap: 142px;
}

/* Footer Logo */
.footer-logo {
  width: 136px;
  height: 154px;
}

/* Footer Navigation */
.footer-navigation {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
}

.footer-nav-column {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 1;
}

/* Footer Divider */
.footer-divider {
  display: none;
}

/* Footer Contact */
.footer-contact {
  width: 30%;
  border-left: 2px solid rgba(98, 192, 251, 0.19);
  padding-top: 60px;
  padding-bottom: 30px;
  padding-left: 30px;
  color: #fff;
  font-size: 14px;
}

.footer-school-name {
  font-size: 18px;
  margin-bottom: 6px;
}

.footer-address {
  padding-bottom: 40px;
  opacity: 0.8;
  line-height: 1.5;
}

.footer-contact-info {
  opacity: 0.8;
}

.footer-contact-info p {
  margin-bottom: 4px;
}

.footer-email {
  padding: 4px 0;
}

.footer-contact-info a {
  color: #fff;
  text-decoration: none;
}

/* Footer Social */
.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 50px;
  margin-bottom: 30px;
}

.footer-social img {
  width: 40px;
  height: 40px;
  transition: opacity 0.3s ease;
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 30px 0;
  color: #fff;
  opacity: 0.8;
  gap: 32px;
}

.footer-bottom p {
  margin: 0;
}

/* Tablet Styles */
@media (max-width: 1024px) {
  .footer-content {
    gap: 80px;
  }

  .footer-logo {
    width: 120px;
    height: 120px;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
  }

  .footer-content {
    width: 100%;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
  }

  .footer-logo {
    width: 104px;
    height: 120px;
  }

  .footer-divider {
    display: block;
    opacity: 0.3;
    border: none;
    border-top: 1px solid #fff;
  }

  .footer-contact {
    width: 100%;
    border-left: none;
    border-top: 2px solid rgba(98, 192, 251, 0.19);
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 0;
  }

  .footer-address {
    padding-bottom: 24px;
  }

  .footer-social {
    margin-top: 24px;
    margin-bottom: 16px;
  }
}
/*footer ends*/

/*common starts*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

/* weight:500 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap");

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

body {
  font-family: "Open Sans", sans-serif;
  color: #00243d;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  color: #03489f;
}

.container {
  padding: 0 80px;
  margin-inline: auto;
}

/* Header */
.header {
  position: sticky;
  top: 52px;
  z-index: 10;
}

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 10px 16px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: #00243d;
  font-size: 14px;
}

.breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
  color: #00243d;
}

.breadcrumb li a:hover {
  color: #0056b3;
}
.breadcrumb li a {
  text-decoration: none;
  color: #00243d;
  transition: color 0.2s;
}

/* ================== About page template ======================= */

/* Hero Section */
.hero-section {
  border-radius: 20px;
  overflow: hidden;
  height: auto;
}

.hero-wrapper {
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  height: 100%;
}

.hero-left-content {
  width: 30%;
  background-color: #03489f;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: unset;
}

.hero-subtitle {
  color: white;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-title {
  color: white;
  font-size: 40px;
  line-height: 120%;
  font-family: "Playfair Display", serif;
  margin: 0;
  font-weight: 500;
}

.hero-background-image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 40px;
  bottom: 0;
  object-fit: cover;
  object-position: left;
  z-index: 0;
}

.mobile-break {
  display: none;
}

.hero-slider-container {
  width: 70%;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

.hero-swiper {
  height: 100%;
}

.hero-swiper-wrapper {
  margin-bottom: -16px;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content Wrapper */
.content-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  margin-bottom: 100px;
}

/* Desktop Navigation */
.desktop-navigation {
    width: 145%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 220px;
    height: fit-content;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 6px;
}
#block-dais-theme-views-block-about-us-left-block-block-1{width:100%}
.nav-active-item {
  display: flex;
  padding: 12px 20px;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  background-color: #03489f;
  margin-bottom: 4px;
}

.desktop-navigation .nav-item {
  padding: 12px 20px;
  color: #00243d;
  font-size: 14px;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
/* 
.nav-item:hover {
  background-color: rgba(98, 192, 251, 0.19);
} */

/* Mobile Navigation */
.mobile-navigation {
  display: none;
  margin-bottom: 60px;
}

.mobile-select-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.mobile-select-button:focus {
  outline: none;
}

.select-arrow {
  width: 20px;
  height: 20px;
  color: white;
  transition: transform 0.3s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

.mobile-option {
  padding: 8px 16px;
  text-decoration: none;
  color: #374151;
  cursor: pointer;
  font-size: 14px;
}

.mobile-option:hover {
  background-color: #f3f4f6;
}

.hidden {
  display: none !important;
}

/* Main Content */
.main-content {
  width: 70%;
}

/* Swiper */
.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.swiper-pagination-bullet {
  position: relative;
  width: 24px;
  height: auto;
  text-align: left;
  border-radius: 0;
  opacity: 1;
  margin-right: 20px;
  background-color: transparent;
  cursor: pointer;
}

.swiper-pagination-bullet em {
  font-size: 15px;
  line-height: 28px;
  font-weight: bold;
  letter-spacing: -0.38px;
  color: #111;
}

.swiper-pagination-bullet i {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 24px;
  height: 3px;
  background-color: #543e1a;
  border-radius: 20px;
}

.swiper-pagination-bullet b {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 0%;
  height: 3px;
  background-color: #fca312;
  border-radius: 20px;
}

.swiper-pagination-bullet-active {
  background-color: transparent;
}

.swiper-pagination-bullet-active b {
  animation-name: countingBar;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes countingBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  right: 80px;
  bottom: var(--swiper-pagination-bottom, 50px);
  width: auto;
  left: auto;
}

/* ====================== About Template End ========================= */

@media screen and (min-width: 1920px) {
  .container {
    max-width: 1400px;
  }
}

@media screen and (max-width: 1024px) {
  .container {
    padding: 0 40px;
  }

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

@media screen and (max-width: 820px) {
  .container {
    padding: 0 20px;
  }

  .hero-subtitle {
    font-size: 12px;
  }

  .main-content {
    width: 100%;
  }

  .hero-section {
    border-radius: 14px;
  }

  .hero-wrapper {
    flex-direction: column-reverse;
  }

  .hero-left-content {
    width: 100%;
    padding: 50px 20px 20px 20px;
    overflow: hidden;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-slider-container {
    width: 100%;
  }

  .hero-swiper {
    height: 100%;
  }

  .mobile-break {
    display: block;
  }

  .content-wrapper {
    display: block;
    margin-top: 24px;
    margin-bottom: 60px;
  }

  .desktop-navigation {
    display: none;
  }

  .mobile-navigation {
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .swiper-pagination {
    display: none;
  }

  .hero-swiper {
    height: 280px;
  }
}

/*about-overview css*/

/* Learning Section */
.learning-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  gap: 5%;
}

.learning-image-container {
  width: 50%;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
}

.learning-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learning-content {
  width: 45%;
}

.learning-content.youth-para {
  width: 100%;
}

.learning-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
  color: #03489f;
  line-height: 34px;
  font-family: "Playfair Display", serif;
  font-weight: 500;
}

.learning-description {
  font-size: 16px;
  line-height: 22.4px;
  color: #00243d;
  margin: 0;
}

/* Features Section */
.aboutus-features-section {
  background-color: #def4e2;
  border-radius: 10px;
  padding: 40px;
  margin: 60px 0;
}

.aboutus-features-section .features-title {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 30px;
  font-family: "Playfair Display", serif;
  color: #00243d;
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: space-between;
  margin-left: -8px;
  color: #00243d;
}

.aboutus-features-section .feature-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 16px;
}

@media (max-width: 820px) {
  .feature-item {
    width: 100%;
  }
}

.feature-icon {
  width: 36px;
  height: 36px;
}

.feature-text {
  max-width: 150px;
  text-align: center;
  margin: 0;
}

/* Classes Section */
.classes-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

.classes-content {
  color: #00243d;
  width: 45%;
}

.classes-description {
  font-size: 16px;
  line-height: 22.4px;
  margin: 0 0 16px 0;
}

.classes-description:last-child {
  margin-bottom: 0;
}

.classes-image-container {
  width: 50%;
  border-radius: 20px;
  height: 420px;
  overflow: hidden;
  margin-bottom: 0;
}

.classes-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet Styles */
@media (max-width: 1024px) {
  .learning-section {
    flex-direction: row;
    gap: 5%;
  }

  .learning-image-container {
    width: 50%;
    height: 420px;
    border-radius: 20px;
  }

  .learning-content {
    width: 45%;
  }

  .learning-title {
    margin-top: 0;
    font-size: 24px;
    line-height: 34px;
    font-weight: 500;
  }

  .learning-description,
  .classes-description {
    font-size: 16px;
  }

  .aboutus-features-section {
    padding: 40px;
  }

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

  .features-grid {
    gap: 0;
  }

  .feature-item {
    width: 20%;
    font-size: 16px;
  }

  .classes-section {
    flex-direction: row;
    gap: 5%;
  }

  .classes-content {
    width: 45%;
  }

  .classes-image-container {
    width: 50%;
    height: 420px;
    border-radius: 20px;
    margin-bottom: 0;
  }
}

/* Mobile Styles */
@media (max-width: 820px) {
  .learning-section {
    flex-direction: column;
    gap: 0;
  }

  .learning-image-container {
    width: 100%;
    border-radius: 14px;
  }

  .learning-content {
    width: 100%;
  }

  .learning-title {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 28px;
  }

  .learning-description,
  .classes-description {
    font-size: 14px;
  }

  .aboutus-features-section {
    padding: 30px;
  }

  .features-title {
    font-size: 24px;
  }

  .features-grid {
    gap: 42px 0;
    margin-left: -8px;
  }

  .feature-item {
    width: 50%;
    font-size: 14px;
  }

  .classes-section {
    flex-direction: column-reverse;
    gap: 0;
  }

  .classes-content {
    width: 100%;
  }

  .classes-image-container {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 640px) {
  .learning-image-container,
  .classes-image-container {
    height: 236px;
  }
}
/*about overview css ends here*/

/*common ends*/
/*our inspiration page starts*/
.dhirubhai-ambani-bio-container {
  width: 100%;
  background-color: #fff6e7;
  display: flex;
  padding: 30px 30px;
  border-radius: 20px;
  justify-content: space-between;
  margin-bottom: 60px;
}

.dhirubhai-ambani-bio-container .profile {
  width: 33%;
}
.profile img {
  width: 100%;
  height: 403px;
}
.dhirubhai-ambani-bio-container .profile-content {
  width: 63%;
  display: flex;
  flex-direction: column;
}
.profile-name {
  margin-bottom: 24px;
}
.dhirubhai-ambani-bio-container .profile-content h4 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.dhirubhai-ambani-bio-container .profile-content span {
  color: var(--Blue-400, #00243d);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}
.dhirubhai-ambani-bio-container .profile-content p {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 16px;
}
.profile-audio {
  width: 100%;
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 10px;
}

.profile-content .profile-audio p {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
}

.profile-content .profile-audio audio {
  width: 100%;
  /* background-color: white ; */
  /* border-radius: 10px; */
}

.line-container {
  width: 100%;
  border-radius: 20px;
  background: var(--Green-100, #def4e2);
  padding: 40px 207px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.lines-para {
  color: var(--Blue-400, #00243d);
  text-align: center;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.lines-subpara {
  color: var(--Blue-400, #00243d);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* MEDIA QUERY */
/* Medium: below 1024px */
@media (max-width: 1024px) {
  .line-container {
    padding: 46px 46px;
  }
  .dhirubhai-ambani-bio-container .profile {
    width: 45%;
  }
  .dhirubhai-ambani-bio-container .profile-content {
    width: 50%;
  }
  .profile-content .profile-audio p {
    font-size: 14px;
  }
}

/* Small: below 768px */
@media (max-width: 768px) {
}

/* Extra Small: below 480px */
@media (max-width: 768px) {
  .profile img {
    width: auto;
    height: auto;
  }
  .line-container {
    padding: 30px 30px;
    gap: 15px;
  }
  .lines-para {
    font-size: 20px;
  }
  .dhirubhai-ambani-bio-container {
    flex-direction: column;
    padding: 20px 20px;
  }
  .dhirubhai-ambani-bio-container .profile {
    width: 100%;
    text-align: center;
  }
  .dhirubhai-ambani-bio-container .profile-content {
    width: 100%;
  }
  .dhirubhai-ambani-bio-container .profile-content h4 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 3px;
  }
  .profile-content .profile-audio p {
    font-size: 14px;
  }
}

/* Large: below 1280px */
@media (max-width: 1279px) {
  /* Styles for small desktops */
}

/* Extra Large: below 1536px */
@media (max-width: 1535px) {
  /* Styles for medium desktops */
}
/*our inspiration page ends here*/

/*message founder*/
.message-founder-wrapper {
    font-size: 16px;
}

.founder-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom:25px
}

.top-desc {
    font-size: 14px;
    padding: 12px 0 40px 0;
}

.founder-banner {
    width: 100%;
    height: 458px;
    object-fit: cover;
    border-radius: 20px;
    margin-top:25px
}

.founder-second-section {
    padding: 60px 0;
}

.second-section-desc {
    padding-top: 16px;
}

.founder-third-desc {
    padding: 16px 0 30px;
    width: 80%;
}

.founder-list-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
    align-items: start;
}

.founder-list-wrapper p {
    width: 250px;
    line-height: 160%;
    /* 22.4px */
}

.sun-icon-desc {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.founder-third-section-bottom-desc {
    padding: 36px 0 60px 0;
}

.founder-darkblue-banner {
    background-color: #03489f;
    padding: 40px;
    border-radius: 20px;
    color: white;
    margin: 60px 0;
}

.founder-darkblue-banner .founder-list-wrapper {
    row-gap: 0;
}

.blue-banner-title {
    color: white;
    padding-bottom: 24px;
    font-size: 32px;
    font-weight: 500;
}

.founder-green-banner {
    background-color: #def4e2;
    text-align: center;
    padding: 40px 100px;
    border-radius: 20px;
    color: #00243d;
    margin: 60px 0;
    display: flex;
    justify-content: center;
}

.last-section-desc {
    padding: 16px 0 24px 0;
}

.orange-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    margin-top: 60px;
}

.orange-card {
    padding: 30px;
    border-radius: 20px;
    background-color: #ffdda8;
}

.orange-card-title {
    font-size: 16px;
    font-weight: 600;
}

.orange-card-desc {
    padding-top: 8px;
    font-size: 14px;
}

@media screen and (max-width: 1024px) {
    .founder-third-desc {
        width: 100%;
    }

    .founder-green-banner {
        padding: 30px 60px;
    }
}

@media screen and (max-width: 640px) {
    .founder-title {
        font-size: 20px;
    }

    .founder-banner {
        border-radius: 14px;
        height: 240px;
    }

    .founder-second-section {
        padding: 20px 0 60px 0;
    }

    .founder-list-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .founder-darkblue-banner,
    .founder-green-banner {
        padding: 30px;
        border-radius: 14px;
    }

    .blue-banner-title {
        font-size: 24px;
    }

    .founder-darkblue-banner .founder-list-wrapper {
        row-gap: 16px;
    }

    .orange-cards-wrapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
        margin-top: 44px;
    }

    .orange-card {
        background-color: #fff6e7;
        padding: 20px;
        border-radius: 14px;
    }

    .desktop-br {
        display: none;
    }
}
/*message founder ends here*/
/*guiding statement starts*/
/* h2 {
  color: #03489f;
  font-family: "Playfair Display", serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
} */

/* p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
} */

.vision-title {
  padding-bottom: 12px;
}

.vision-para {
  padding-bottom: 30px;
}

.mission-title {
  padding-bottom: 12px;
}

.mission-para {
  padding-bottom: 60px;
}

.motto-wrapper {
  position: relative;
}

.motto-card {
  position: absolute;
  display: flex;
  width: 293px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #03489f;
  bottom: 46px;
  right: 24px;
}

.motto-text {
  color: #fff;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}

.motto-title {
  color: #fff;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.mission-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.values-section {
  position: relative;
  padding: 70px;
}

.values-content {
  position: absolute;
  top: 10%;
  width: 56%;
  text-align: center;
  left: 20%;
}

.values-title {
}

.values-para {
}

.values-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.objective-section {
}

.objective-title {
  padding-bottom: 12px;
}

.objective-para {
  padding-bottom: 40px;
  width: 60%;
}

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.objective-card {
  flex: 0 0 calc(50% - 10px);
  box-sizing: border-box;
  border-radius: 20px;
  padding: 30px;
  background-color: #e6f0f8;
  border-bottom: 1px solid #0066b0;
}

.objective-card-image {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
}

.objective-card-para {
  font-size: 14px;
}

@media (max-width: 820px) {
  h2 {
    font-size: 24px;
  }

  .motto-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
    border-radius: 20px;
    overflow: hidden;
  }

  .mission-image {
    width: 100%;
    height: auto;
  }

  .motto-card {
    position: static;
    width: 100%;
    margin: 0 auto;
    bottom: auto;
    right: auto;
    left: auto;
    border-radius: 0;
  }

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

  .values-content {
    position: static;
  }

  .values-image {
    width: 100%;
  }

  .values-section {
    padding-top: 60px;
  }

  .values-content {
    width: 100%;
  }

  .values-image {
    width: 95%;
  }

  .values-title {
    font-size: 24px;
  }

  .values-para {
    font-size: 14px;
  }

  .objective-para {
    width: 100%;
  }

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

@media (max-width: 1023px) {
  .values-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
    padding: 60px 0 60px 0;
  }

  .values-content {
    position: static;
    width: 90%;
    max-width: 600px;
    text-align: center;
    top: auto;
    left: auto;
  }

  .values-image {
    width: 90%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
  }

  .values-title {
    font-size: 24px;
  }

  .values-para {
    font-size: 14px;
  }
}

/*Guiding statements ends here*/

/*curriculum css code starts*/
.insp-title {
  font-size: 32px;
  font-weight: 500;
}

.insp-description {
  padding: 12px 0 40px 0;
  font-size: 14px;
  max-width: 480px;
}

.curriculum-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  gap: 30px;
}

.insp-card {
  padding: 30px;
  background-color: #fff6e7;
  border-radius: 20px;
  border-bottom: 1px solid #fca312;
}

.insp-card-title {
  padding: 18px 0 8px 0;
  font-size: 16px;
  font-weight: 500;
}

.insp-card-desc {
  font-size: 14px;
  line-height: 160%; /* 22.4px */
}

@media screen and (max-width: 820px) {
  .learning-content {
    padding-top: 24px;
  }
}

@media screen and (max-width: 640px) {
  .insp-title {
    font-size: 24px;
  }

  .insp-description {
    max-width: 100%;
    padding: 8px 0 30px 0;
  }

  .curriculum-cards-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .insp-card {
    padding: 24px;
    width: 100%;
  }
}
/*curriculum css code ends here*/
/*our strategic plan page css */

/* h2 {
  color: #03489f;
  font-family: "Playfair Display", serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
} */

/* p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
} */

.strategic-section {
  display: flex;
  gap: 52px;
  align-items: center;
}

.left-image {
  width: 50%;
  height: 368px;
  object-fit: cover;
  border-radius: 10px;
}

.strategic-text {
  padding-bottom: 34px;
  font-size: 14px;
}

.download-button {
  display: flex;
  padding: 10px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--Blue-300, #03489f);
  background: #03489f;
  width: 80%;
  text-decoration: none;
}

.download-button span {
  color: #fff;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.strategic-plan-text {
  display: inline-flex;
  padding: 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  background: #fee6d9;
  margin: 80px 0 80px 0;
  text-align: center;
}

.strategic-plan-text span {
  font-weight: 600;
}

.strategic-title {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  padding-bottom: 32px;
}

.tab-container {
  max-width: 1000px;
  margin: auto;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tab-button {
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid #03489f;
  background-color: transparent;

  color: #03489f;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  cursor: pointer;
}

.tab-button.active {
  background: #03489f;
  color: white;
}

.tab-content {
  background: white;
  /* padding: 20px;
  border-radius: 10px; */
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.content-row {
  display: flex;
  flex-direction: row;
  gap: 45px;
  align-items: center;
}

.content-image {
  width: 50%;
  height: 330px;
  object-fit: cover;
  border-radius: 10px;
}

.content-text p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.content-text {
  width: 50%;
}

@media screen and (max-width: 1024px) {
  .download-button {
    width: 100%;
  }

  .download-button p {
    font-size: 14px;
  }

  .tab-button {
    padding: 14px 16px;
    font-size: 14px;
  }
}

@media (max-width: 820px) {
  h2 {
    font-size: 24px;
  }

  .tab-buttons {
    flex-wrap: nowrap;
    overflow-x: scroll;
  }

  .strategic-section {
    flex-direction: column;
    gap: 24px;
  }

  .left-image {
    width: 100%;
    height: 306px;
  }

  .content-row {
    flex-direction: column !important;
    gap: 24px;
  }

  .content-image {
    width: 100%;
    height: 236px;
  }

  .content-text {
    width: 100%;
  }

  .tab-content {
    padding: 0;
  }

  .strategic-plan-text {
    padding: 30px;
    margin: 60px 0;
  }

  .strategic-title {
    font-size: 24px;
    padding-bottom: 28px;
  }

  .tab-button {
    font-size: 14px;
    white-space: nowrap;
    padding: 14px 20px;
  }
}

/*our strategic plan page css ends here */

/*unique feature page css*/
.unique-title {
  font-size: 32px;
  max-width: 554px;
  font-weight: 500;
}

.unique-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 40px;
}

.unique-insp-card {
  width: 48%;
  padding: 30px;
  background-color: #fff6e7;
  border-radius: 20px;
  border-bottom: 1px solid #fca312;
}

.unique-insp-card-title {
  padding: 18px 0 8px 0;
  font-size: 16px;
  font-weight: 500;
}

.unique-insp-card-desc {
  font-size: 14px;
  line-height: 160%; /* 22.4px */
}

@media screen and (max-width: 1024px) {
  .unique-insp-card {
    width: 47%;
  }
}

@media screen and (max-width: 640px) {
  .unique-title {
    font-size: 24px;
  }

  .unique-insp-description {
    max-width: 100%;
    padding: 8px 0 30px 0;
  }

  .unique-cards-wrapper {
    flex-direction: column;
  }

  .unique-insp-card {
    padding: 24px;
    width: 100%;
  }
}

/*unique feature page css ends here*/

/*accreditations page css starts here*/

.accred-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 60px;
}

.accred-card {
  display: flex;
  column-gap: 24px;
  align-items: center;
  border-bottom: 2px solid rgba(230, 240, 248, 0.4);
  padding-bottom: 24px;
  width: 48%;
}

.accred-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.accred-desc {
  font-weight: 500;
  font-size: 18px;
}

.accred-icon {
  width: 96px;
  height: 96px;
}

@media screen and (max-width: 1024px) {
  .accred-card {
    width: 47%;
  }

  .accred-desc {
    font-size: 16px;
  }
}

@media screen and (max-width: 640px) {
  .accred-cards-wrapper {
    row-gap: 24px;
  }

  .accred-card {
    width: 100%;
  }

  .accred-icon {
    width: 84px;
    height: 84px;
  }
}

/*academic page css*/

.igcse-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3%;
  margin-top: 80px;
  margin-bottom: 40px;
}
.igcse-img-block {
  width: 50%;
}
.igcse-img-block img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 20px;
}
.igcse-content-block {
  width: 35%;
}
.igcse-content-block p {
  color: #00243d;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 16px;
}

.igse-curriculam-container {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 60px;
  align-items: center;
}

.igse-curriculam-card {
  width: 32%;
  height: 282px;
  padding: 40px;
  background-color: #03489f;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.igse-curriculam-card p {
  color: #fff;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.igse-curriculam-card span {
  color: #fff;
  display: block;
  text-align: center;
  margin: 8px 0px 24px 0px;
  /* Desktop/B1 Regular */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.igse-curriculam-card .igse-curriculam-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 151px;
  border-radius: 50px;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid white;
  padding: 10px 24px;
  gap: 10px;
  cursor: pointer;
  transition: all 0.7s;
  text-decoration: none;
}

.igse-curriculam-button:hover {
  background-color: #0066b0;
}

.igse-curriculam-button span {
  margin: 0;
}

.student-support-container {
  width: 100%;
}

.student-support-content {
  width: 100%;
  margin-bottom: 40px;
}

.student-support-content h4 {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 12px;
}

.student-support-content p {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.student-support-features-container {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin-bottom: 80px;
}

.student-support-features {
  width: 100%;
  padding: 36px 40px;
  border-radius: 0px 0px 20px 20px;
  border-bottom: 1px solid #c3c3c3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.overflowImg {
  position: absolute;
  top: -50%;
  left: 40%;
  z-index: 2;
  display: none;
  transform: rotate(-4deg);
  width: 304px;
  height: 235px;
  border-radius: 10px;
  object-fit: cover;
}

.student-support-features:hover .overflowImg {
  display: block;
  animation: animateUp 0.6s forwards;
}

@keyframes animateUp {
  0% {
    transform: rotate(-4deg) translateY(40px);
  }
  100% {
    transform: rotate(-4deg) translateY(0);
  }
}
.student-support-features:hover {
  background-color: #fff6e7;
  border-radius: 20px;
  border-bottom: 1px solid var(--Yellow-300, #fca312);
}

.feature-heading {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.features-button-span {
  color: #00243d;
  text-align: right;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.2px;
}

.features-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  background-color: transparent;
  border-radius: 50px;
  border: 1px solid #000;
  padding: 12px 20px;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}

.student-support-mobile-container {
  margin-bottom: 60px;
  display: none;
}

.student-support-mobile-features {
  background-color: #fff6e7;
  border-radius: 20px;
  border-bottom: 1px solid var(--Yellow-300, #fca312);
  padding: 12px 26px 12px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  cursor: pointer;
  text-decoration: none;
}

.student-support-mobile-img img {
  width: 136px;
  height: 110px;
  border-radius: 16px;
  object-fit: cover;
}

.student-support-mobile-content {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.student-support-mobile-content p {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 25.6px */
}

/* MEDIA QUERY */
/* Medium: below 1024px */
@media (max-width: 1024px) {
  .igcse-container {
    gap: 5%;
  }
  .igse-curriculam-card {
    padding: 40px 30px;
    height: 320px;
  }
}

/* Small: below 820px */
@media (max-width: 820px) {
  .igcse-container {
    margin-top: 50px;
    flex-wrap: wrap;
  }
  .igcse-img-block {
    width: 100%;
  }
  .igcse-content-block {
    width: 100%;
    margin-top: 35px;
  }
  .igse-curriculam-container {
    flex-direction: column;
    gap: 24px;
  }
  .igse-curriculam-card {
    width: 100%;
    height: auto;
  }
  .student-support-features-container {
    display: none;
  }
  .student-support-mobile-container {
    display: block;
  }
}

/* Extra Small: below 480px */
@media (max-width: 479px) {
  .igcse-content-block {
    margin-top: 20px;
  }
  .igse-curriculam-card p {
    font-size: 20px;
  }
  .igse-curriculam-card .classno {
    font-size: 14px;
    margin: 8px 0px 20px 0px;
  }
  .student-support-content h4 {
    font-size: 24px;
  }
}
/* Academic page css ends here*/
/* 
.ibdp-wrapper p {
  font-size: 14px;
  line-height: 160%; /* 22.4px 
} */

/* .ibdp-wrapper h2 {
  font-weight: 500;
  font-size: 32px;
} */

/* Video Section */
.video-wrapper {
  background-color: #fff6e7;
  padding: 62px 0;
  margin: 80px 0;
}

.ibdp-video-wrapper {
    background-color: #fff6e7;
    padding: 62px 0;
    margin: 80px 0;
}

.igcse-video-wrapper {
    background-color: #fff6e7;
    padding: 62px 0;
    margin: 80px 0;
}

.ninth-section-wrapper .accordion-ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  display: flex;
  flex-wrap: wrap;
}


.ninth-section-wrapper .accordion-subwrapper.active .accordion-ans {
  max-height: 300px;
  padding: 10px 25px;
}
.accordion-ans p {
    margin: 2px 0;
    color: #00243d;
    display: flex;
    /* align-items: center; */
    width: 30%;
}

.video-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-section {
  width: 50%;
  height: 410px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.video-description-wrapper {
  width: 45%;
}

.video-description-wrapper a {
  text-decoration: none;
  color: #03489f;
}

.video-description-wrapper h2 {
  padding-bottom: 16px;
}

/* .video-arrow-wrapper {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.video-arrow-wrapper img {
  width: 12px;
} */

/* Feature Card Section */
.features-card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  gap: 32px;
}

.feature-card {
  border-radius: 20px;
  border-bottom: 1px solid #0066b0;
  background: #e6f0f8;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 170px; */
}

.feature-card-title {
  width: 860px;
}

.feature-card-icon {
  width: 34px;
  height: 34px;
}

/* <!-- Green Section --> */
.green-section-wrapper {
  padding: 50px 70px;
  border-radius: 20px;
  background: #def4e2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
}

.green-section-wrapper h2 {
  width: 50%;
  color: #00243d;
}

.int-mindedness {
  width: 40%;
  object-fit: cover;
}

/* Curriculum Section */
.curriculum-wrapper {
  padding: 80px 0;
}

.left-wrapper-container {
  width: 45%;
}

.curriculum-subwrapper .left-wrapper#ibdp-subtract {
  width: 100%;
  background-color: #fff6e7;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  height: 512px;
  overflow: hidden;
  position: relative;
}

.igcse-wrapper {
  margin: 80px 0 0 0;
}

.curriculum-subwrapper .left-wrapper {
  width: 45%;
  background-color: #fff6e7;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  height: 420px;
  overflow: hidden;
  position: relative;
}

.left-green-wrapper {
  width: 100%;
  background-color: #fff6e7;
  border-radius: 20px;
  padding: 30px 138px 30px 40px;
  border-radius: 20px;
  background: var(--Green-100, #def4e2);
  margin-top: 20px;
}

.left-green-wrapper a {
  text-decoration: none;
  color: #03489f;
}

/* .left-green-wrapper p,
span {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.left-green-wrapper span {
  color: var(--Blue-300, #03489f);
} */

.curriculum-subwrapper .left-wrapper .left-wrapper-title {
  font-family: "PlayFair Display";
  font-size: 20px;
  color: #00243d;
  position: relative;
  z-index: 1;
}

.right-wrapper p {
  font-size: 14px;
}

.right-wrapper-p span {
  color: #03489f;
  font-family: "Open Sans";
  font-size: 14px;
}

.right-wrapper-p a {
  text-decoration: none;
  color: #03489f;
}

.curriculum-subwrapper .right-wrapper {
  width: 52%;
}

.subtract {
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 0;
  bottom: -10px;
}

/* Table */
.blue-table-wrapper {
  padding-bottom: 80px;
}

.blue-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #03489f;
  display: flex;
  margin: 20px 0 0 0;
}

.blue-table-subwrapper {
  width: 20%;
  border-right: 1px solid #03489f;
}

.blue-table-subwrapper:last-child {
  border-right: none;
}

.blue-table-title {
  font-size: 18px !important;
  font-weight: 500;
}

.blue-table-th {
  background: #03489f;
  text-align: center;
  color: #fff;
  padding: 14px 0;
  font-size: 16px !important;
}

.blue-table-td-wrapper {
  padding: 20px 22px;
}

.blue-table-td-wrapper p {
  color: #03489f;
  font-size: 16px;
  font-weight: 500;
}

.blue-table-ul {
  margin-left: 20px;
}

.blue-table-ul li {
  font-size: 16px;
  padding-top: 20px;
  font-weight: 500;
}

.blue-table-desc {
  width: 75%;
  padding-bottom: 42px;
}

/* <!-- Green Section --> */
.icse-green-section-wrapper {
  padding: 24px;
  background-color: #def4e2;
  border-radius: 20px;
  margin: 20px 0 80px 0;
}

.ibdp-green-section-wrapper {
    padding: 24px;
    background-color: #def4e2;
    border-radius: 20px;
    margin: 20px 0 0 0;
}

.green-list {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 16px;
}

/* School Timing */
.timing-cards-wrapper {
  padding-bottom: 80px;
}

.timing-cards-wrapper h2 {
  text-align: center;
  color: #00243d;
}

.timing-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  margin-top: 30px;
}

.timing-card {
  background-color: #e6f0f8;
  border-radius: 20px;
  padding: 26px;
}

.timing-cards-container p:first-child {
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}

.timing-subwrapper {
  display: flex;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.timing-subwrapper:last-child {
  margin-bottom: 0;
}

.timing-cards-wrapper .timing-card-p {
  text-align: center;
  max-width: 529px;
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin: 20px auto 0;
}

/* Gallery Swiper */
.gallery-swiper {
  background-color: #fee6d9;
  padding: 100px 0;
}

.gallery-swiper-wrapper .swiper-img-wrapper {
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  cursor: grab;
}

.gallery-swiper-wrapper .swiper-slide p {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding-top: 18px;
}

.gallery-swiper-wrapper .swiper-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blue-section-mobile,
.green-right-wrapper-mobile,
.personlaity-bottom-banner-img-mobile,
.left-green-wrapper-mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  /* Feature Card Section */
  .features-card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .blue-section-left-image {
    height: 190px;
  }
}

@media screen and (max-width: 820px) {
  /*  Video Section  */
  .video-wrapper {
    margin: 60px 0;
  }

  /* <!-- Curriculum Section --> */
  .curriculum-wrapper {
    padding: 60px 0 10px 0;
  }

  .curriculum-subwrapper {
    flex-direction: column;
    gap: 20px;
  }

  .curriculum-subwrapper .left-wrapper,
  .curriculum-subwrapper .right-wrapper {
    width: 100%;
    height: auto;
  }

  /* <!-- Table --> */
  .blue-table {
    flex-direction: column;
  }

  .blue-table-title {
    font-size: 16px !important;
  }

  .blue-table-subwrapper,
  .blue-table-desc {
    width: 100%;
  }

  /* <!-- Feature Card Section --> */
  .feature-card-title {
    width: 100%;
  }

  /* <!-- Green Section --> */
  .green-section-wrapper {
    flex-direction: column-reverse;
    padding: 24px;
  }

  .green-section-wrapper h2 {
    width: 100%;
    padding-top: 20px;
  }

  /* <!-- Curriculum Section --> */
  .left-wrapper-container {
    width: 100%;
  }

  .left-green-wrapper {
    display: none;
  }

  .left-green-wrapper-mobile {
    padding: 30px 40px 30px 40px;
    display: block;
  }

  /* <!-- School Timing --> */
  .timing-cards-wrapper {
    padding-bottom: 60px;
  }

  .timing-card {
    border-radius: 14px;
  }

  /* <!-- Image Gallery Swiper --> */
  .gallery-swiper {
    padding: 50px 0;
  }

  .gallery-swiper-wrapper .swiper-img-wrapper {
    border-radius: 14px;
    height: 260px;
  }
}

@media screen and (max-width: 640px) {
  .ibdp-wrapper h2 {
    font-size: 24px;
  }

  /* <!-- Video Section --> */
  .video-wrapper {
    margin: 40px 0;
  }

  .video-subwrapper {
    flex-direction: column;
  }

  .video-section,
  .video-description-wrapper {
    width: 100%;
  }

  .video-section {
    height: 224px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  .video-description-wrapper h2 {
    padding-bottom: 12px;
  }

  /* <!-- Feature Card Section --> */
  .features-card-wrapper {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 24px;
    gap: 20px;
  }

  .feature-card {
    padding: 24px;
  }

  /* <!-- Curriculum Section --> */
  .curriculum-subwrapper .left-wrapper .left-wrapper-title {
    font-size: 16px;
  }

  .curriculum-subwrapper {
    margin: 0;
  }

  .curriculum-subwrapper .left-wrapper {
    padding: 24px;
    border-radius: 14px;
  }

  /* <!-- Green Section --> */
  .green-section-wrapper {
    margin-top: 60px;
  }

  .left-green-wrapper-mobile {
    padding: 24px;
  }

  .left-green-wrapper p,
  span {
    /* font-size: 16px; */
  }

  .int-mindedness {
    width: 286px;
    height: 286px;
  }

  /* <!-- Table -->  */
  .blue-table-wrapper {
    padding: 60px 0;
  }

  .blue-table {
    margin: 20px 0 0 0;
  }

  .blue-table-td-wrapper p {
    font-size: 14px;
  }

  .blue-table-ul li {
    font-size: 14px;
    padding-top: 18px;
  }

  .blue-table-td-wrapper {
    padding: 18px;
  }

  /* <!-- Green Section --> */
  .icse-green-section-wrapper {
    margin: 20px 0 0 0;
  }

  /* <!-- School Timing --> */
  .timing-cards-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .timing-cards-wrapper .timing-card-p {
    text-align: start;
  }

  /* <!-- Image Gallery Swiper --> */
  .gallery-swiper-wrapper .swiper-slide p {
    font-size: 16px;
  }
}

.content-wrapper .region--sidebar-first {
	position: sticky;
    top: 220px;
    height: fit-content;
}

/* .page-wrapper .header {
	width: 100%;
	position: fixed;
	top: 0;
} */

@media screen and (max-width: 820px) {
	.content-wrapper .region--sidebar-first {
		position: static;
	}
}


/*ICSE*/

.icse-wrapper p {
  font-size: 14px;
  line-height: 160%; /* 22.4px */
}

.icse-wrapper h2 {
  font-weight: 500;
  font-size: 32px;
}

.video-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-description-wrapper {
  width: 45%;
}

.video-description-wrapper h2 {
  padding-bottom: 16px;
}

/* .video-arrow-wrapper {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.video-arrow-wrapper img {
  width: 12px;
} */

/* <!-- Third Section --> */
.icse-third-section-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 34px;
  padding-bottom: 80px;
}

/* <!-- Fourth Section ( Accordion ) --> */
.accordion-main-wrapper {
  display: flex;
  column-gap: 40px;
  margin-bottom: 130px;
}

/* .accordion-wrapper {
  width: 50%;
} */

.accordion-subwrapper.active .accordion-qtn {
  border-bottom: none;
  background-color: #fff6e7;
  border-radius: 20px 20px 0 0;
}

/* .accordion-subwrapper.active {
  margin-top: 10px;
} */

.accordion-qtn h3 {
  font-weight: 500;
}

.accordion-ans ul {
  margin-left: 20px;
}

/* .accordion-image {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
  object-fit: cover;
} */

.accordion-image-wrapper {
  width: 50%;
  height: 520px;
  border-radius: 20px;
  position: relative;
  width: 50%;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
}

.accordion-image.active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.accordion-arrow {
  transition: transform 0.4s ease;
}

/* Rotate arrow on active */
.accordion-subwrapper.active .accordion-arrow {
  transform: rotate(180deg);
}

/* <!-- Fifth Section --> */
.fifth-section-top-wrapper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
}

.fifth-section-top-wrapper h2 {
  width: 492px;
}

.fifth-section-top-wrapper p {
  width: 40%;
}

/* Table */
.blue-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #03489f;
  display: flex;
  margin: 20px 0 40px 0;
}

.group-table {
  margin-bottom: 0;
}

.table-wrapper .blue-table-subwrapper {
  width: 33.33%;
  border-right: 1px solid #03489f;
}

.blue-table-title {
  font-size: 18px !important;
}

.blue-table-th {
  background: #03489f;
  text-align: center;
  color: #fff;
  padding: 14px 0;
  font-size: 16px !important;
  height: 54px;
}

.blue-table-td-wrapper {
  padding: 30px 22px;
}

.blue-table-td-wrapper p {
  color: #1fb53b;
  font-size: 16px;
  font-weight: 500;
}

.blue-table-ul {
  margin-left: 20px;
}

.blue-table-ul li {
  font-size: 16px;
  padding-top: 26px;
  font-weight: 500;
}

/* .blue-table-ul li:first-child {
  padding-top: 0;    Conmmented for IGCSE Page
} */

.blue-table-desc {
  width: 75%;
  padding-bottom: 42px;
}

.ext-exam-tag {
  width: 594px;
}

.green-list {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 16px;
}

/* School Timing Section */
.timing-cards-wrapper {
  padding-bottom: 80px;
}

.timing-cards-wrapper h2 {
  text-align: center;
  color: #00243d;
}

.timing-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  margin-top: 30px;
}

.timing-card {
  background-color: #e6f0f8;
  border-radius: 20px;
  padding: 26px;
}

.timing-cards-container p:first-child {
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}

.timing-subwrapper {
  display: flex;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.timing-subwrapper:last-child {
  margin-bottom: 0;
}

.accordion-image-mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  .video-section {
    height: 300px;
  }
}

@media screen and (max-width: 820px) {
  /*  Video Section  */
  .video-wrapper {
    margin: 60px 0;
  }

  /* <!-- School Timing Section --> */
  .timing-cards-wrapper {
    padding-bottom: 60px;
  }

  .timing-card {
    border-radius: 14px;
  }

  /* <!-- Fourth Section ( Accordion ) --> */
  .accordion-image-wrapper {
    height: 400px;
  }

  .accordion-subwrapper.active .accordion-ans {
    padding: 0 60px 30px 30px;
  }
}


/*IGSE*/

.igcse-wrapper p {
  font-size: 14px;
  line-height: 160%; /* 22.4px */
}

.igcse-wrapper h2 {
  font-weight: 500;
  font-size: 32px;
}

.video-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-description-wrapper {
  width: 45%;
}

.video-description-wrapper h2 {
  padding-bottom: 16px;
}

/* .video-arrow-wrapper {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.video-arrow-wrapper img {
  width: 12px;
} */

/* Cards */
.features-card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  gap: 32px;
}

.feature-card {
  border-radius: 20px;
  border-bottom: 1px solid #0066b0;
  background: #e6f0f8;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 218px; */
}

.feature-card-icon {
  width: 34px;
  height: 34px;
}

/* Fourth Section */
.curriculum-wrapper {
  padding: 80px 0;
}

.curriculum-subwrapper .left-wrapper .left-wrapper-title {
  font-family: "PlayFair Display";
  font-size: 20px;
  color: #00243d;
  position: relative;
  z-index: 1;
}

.curriculum-subwrapper .right-wrapper {
  width: 50%;
}

.subtract {
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 0;
  bottom: -10px;
}

/* Table */
.blue-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #03489f;
  display: flex;
  margin: 20px 0 30px 0;
}

.blue-table-subwrapper {
  width: 20%;
  border-right: 1px solid #03489f;
}

.blue-table-title {
  font-size: 18px !important;
}

.blue-table-th {
  background: #03489f;
  text-align: center;
  color: #fff;
  padding: 14px 0;
  font-size: 16px !important;
}

.blue-table-td-wrapper {
  padding: 20px 22px;
}

.blue-table-td-wrapper p {
  color: #1fb53b;
  font-size: 16px;
  font-weight: 500;
}

.blue-table-ul {
  margin-left: 20px;
}

.blue-table-ul li {
  font-size: 16px;
  padding-top: 20px;
  font-weight: 500;
}

.blue-table-desc {
  width: 75%;
  padding-bottom: 42px;
}

/* Sixth Section */
.blue-section-wrapper {
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 80px;
}

.blue-section-title {
  color: #fff;
}

.blue-section-left-wrapper {
  padding: 30px;
  background-color: #03489f;
  display: flex;
  align-items: center;
  column-gap: 24px;
  width: 62%;
  border-radius: 20px;
}

.blue-section-left-image {
  width: 45%;
  height: 310px;
}

.blue-section-left-image img {
  width: 100%;
  height: 100%;
}

.blue-section-left-details {
  width: 70%;
}

.blue-section-right-wrapper {
  padding: 30px 64px 30px 30px;
  background-color: #03489f;
  width: 35%;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.blue-section-right-wrapper .frame {
  position: absolute;
  right: -80px;
  bottom: -80px;
  z-index: 1;
  width: 454px;
  height: 340px;
}

.blue-section-ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 36px;
  margin: 40px 0;
}

.blue-section-ul li {
  font-size: 14px;
}

.blue-section-ul li span {
  font-weight: 600;
  letter-spacing: 1px;
}

.blue-section-link-wrapper {
  border-radius: 14px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.1);
}

.blue-section-link-wrapper a {
  color: #fff;
  font-size: 14px;
}

.blue-section-right-wrapper h2 {
  color: #fff;
  font-size: 24px;
}

.blue-section-right-wrapper-list,
.green-section-right-wrapper-list {
  display: flex;
  column-gap: 10px;
  align-items: center;
  margin-top: 24px;
  position: relative;
  z-index: 2;
  font-size: 14px
}

.green-left-wrapper {
  width: 50%;
}

.green-section-right-wrapper-list {
  margin-top: 16px;
}

.assesment-desc {
  padding: 8px 0 0 0;
}

.assesment-qtn-wrapper p:first-child {
  padding: 40px 0 10px 0;
  font-weight: 500;
  font-size: 16px;
}

.green-right-wrapper {
  width: 45%;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
}

.green-right-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eleventh Section ( Timing Cards ) */
.timing-cards-wrapper {
  padding-bottom: 80px;
}

.timing-cards-wrapper h2 {
  text-align: center;
  color: #00243d;
}

.timing-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  margin-top: 30px;
}

.timing-card {
  background-color: #e6f0f8;
  border-radius: 20px;
  padding: 26px;
}

.timing-cards-container p:first-child {
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}

.timing-subwrapper {
  display: flex;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.timing-subwrapper:last-child {
  margin-bottom: 0;
}

/* Eight Section */
.personlaity-bottom-banner-wrapper {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 80px;
}

.personlaity-bottom-banner-img {
  width: 100%;
  height: 382px;
  border-radius: 20px;
  overflow: hidden;
}

.personlaity-bottom-banner-img img {
  width: 100%;
  height: 100%;
}

.personlaity-bottom-subwrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.personlaity-bottom-left-subwrapper {
  width: 35%;
}

.personlaity-bottom-right-subwrapper {
  width: 60%;
}

.personlaity-bottom-left-subwrapper h3 {
  color: #00243d;
  padding-top: 18px;
  font-weight: 500;
  font-size: 20px;
}

/* Ninth Section */
.ninth-section-wrapper {
  padding-bottom: 80px;
}

.ninth-section-wrapper .ninth-section-desc {
  width: 50%;
  padding-top: 10px;
  padding-bottom: 40px;
}

.accordion-subwrapper:last-child {
  border-bottom: none;
}

.accordion-qtn h3 {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.accordion-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  fill: #666;
}

.accordion-subwrapper.active .accordion-arrow {
  transform: rotate(180deg);
}

/* .accordion-subwrapper.active {
  margin-top: 10px;
} */

.accordion-ans p {
  margin: 4px 0;
  color: #00243d;
  display: flex;
  align-items: center;
  width: 30%;
}

.accordion-ans p span {
  padding-right: 6px;
}

/* Tenth Section */
.tenth-section-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 60px;
  padding-bottom: 80px;
}

.tenth-section-wrapper h2 {
  padding-bottom: 20px;
}

.tenth-section-top-right-wrapper {
  padding-top: 60px;
}

/* Gallery Swiper */
.gallery-swiper {
  background-color: #fee6d9;
  padding: 100px 0;
}

.gallery-swiper-wrapper .swiper-img-wrapper {
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  cursor: grab;
}

.gallery-swiper-wrapper .swiper-slide p {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding-top: 18px;
}

.gallery-swiper-wrapper .swiper-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blue-section-mobile,
.green-right-wrapper-mobile,
.personlaity-bottom-banner-img-mobile {
  display: none;
}

/* MEDIA QUERY */
@media screen and (max-width: 1024px) {
  .features-card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .blue-section-left-image {
    height: 170px;
  }
}

@media screen and (max-width: 820px) {
  /*  Video Section  */
  .video-wrapper {
    margin: 60px 0;
  }

  /* <!-- Fourth Section --> */
  .curriculum-wrapper {
    padding: 60px 0 10px 0;
  }

  .curriculum-subwrapper {
    flex-direction: column;
    gap: 20px;
  }

  .curriculum-subwrapper .left-wrapper,
  .curriculum-subwrapper .right-wrapper {
    width: 100%;
    height: auto;
  }

  /* <!-- Fifth Section ( Table ) --> */
  .blue-table {
    flex-direction: column;
  }

  .blue-table-subwrapper,
  .blue-table-desc {
    width: 100%;
  }

  /* <!-- Sixth Section ( Blue ) --> */
  .blue-section-wrapper {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }

  .blue-section-title {
    display: none;
  }

  .blue-section-mobile {
    display: block;
    text-align: left;
    padding-bottom: 20px;
  }

  .blue-section-left-wrapper,
  .blue-section-right-wrapper,
  .blue-section-left-details {
    width: 100%;
  }

  .blue-section-left-image {
    width: 280px;
    height: 280px;
  }

  .blue-section-left-wrapper {
    flex-direction: column;
  }

  /* <!-- Seventh Section ( Green ) --> */
  /* .green-section-wrapper {
    flex-direction: column;
    margin-bottom: 60px; Commented for IBDP
  } */

  .green-left-wrapper,
  .green-right-wrapper {
    width: 100%;
  }

  .green-right-wrapper {
    display: none;
  }

  .green-right-wrapper-mobile {
    display: block;
    margin: 20px 0;
    height: 400px;
  }

  .green-right-wrapper-mobile img {
    object-position: top;
  }

  .assesment-qtn-wrapper p:first-child {
    padding: 0 0 10px 0;
  }

  /* <!-- Eight Section --> */
  .personlaity-bottom-banner-img {
    height: 260px;
  }

  .personlaity-bottom-subwrapper {
    flex-direction: column;
  }

  .personlaity-bottom-left-subwrapper,
  .personlaity-bottom-right-subwrapper {
    width: 100%;
  }

  /* <!-- Ninth Section --> */
  .ninth-section-wrapper {
    padding-bottom: 60px;
  }

  .ninth-section-wrapper .ninth-section-desc {
    width: 100%;
  }

  .personlaity-bottom-banner-wrapper {
    width: 100%;
    padding-bottom: 60px;
  }

  .personlaity-bottom-left-subwrapper h3 {
    padding-top: 14px;
  }

  .personlaity-bottom-banner-img {
    display: none;
  }

  .personlaity-bottom-banner-img-mobile {
    display: block;
    margin: 20px 0;
  }

  /* <!-- Tenth Section --> */
  .tenth-section-wrapper {
    padding-bottom: 60px;
  }

  /* <!-- Eleventh Section ( Timing Cards ) --> */
  .timing-cards-wrapper {
    padding-bottom: 60px;
  }

  .timing-card {
    border-radius: 14px;
  }

  /* <!-- Image Gallery Swiper --> */
  .gallery-swiper {
    padding: 50px 0;
  }

  .gallery-swiper-wrapper .swiper-img-wrapper {
    border-radius: 14px;
    height: 260px;
  }
}

@media screen and (max-width: 640px) {
  .igcse-wrapper h2 {
    font-size: 24px;
  }

  /* <!-- Video Section --> */
  .video-wrapper {
    margin: 40px 0;
  }

  .video-subwrapper {
    flex-direction: column;
  }

  .video-section,
  .video-description-wrapper {
    width: 100%;
  }

  .video-section {
    height: 224px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  .video-description-wrapper h2 {
    padding-bottom: 12px;
  }

  /* <!-- Third Section --> */
  .features-card-wrapper {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 24px;
    gap: 20px;
  }

  .feature-card {
    padding: 24px;
  }

  /* <!-- Fourth Section --> */
  .curriculum-subwrapper .left-wrapper .left-wrapper-title {
    font-size: 16px;
  }

  /* <!-- Fifth Section ( Table ) -->  */
  .blue-table {
    margin: 20px 0;
  }

  .blue-table-title {
    font-size: 16px !important;
  }

  .blue-table-td-wrapper p {
    font-size: 14px;
  }

  .blue-table-ul li {
    font-size: 14px;
    padding-top: 18px;
  }

  .blue-table-td-wrapper {
    padding: 18px;
  }

  /* <!-- Sixth Section ( Blue ) --> */
  .blue-section-left-wrapper,
  .blue-section-right-wrapper {
    padding: 24px;
    border-radius: 14px;
  }

  .blue-section-ul {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }

  .blue-section-link-wrapper a {
    word-break: break-all;
  }

  .blue-section-right-wrapper-list {
    margin-top: 18px;
  }

  /* <!-- Seventh Section ( Green ) --> */
  /* .green-section-wrapper {
    padding: 24px; Commented for IBDP
  } */

  .green-right-wrapper-mobile {
    height: 200px;
    border-radius: 14px;
  }

  /* <!-- Eight Section --> */
  .personlaity-bottom-left-subwrapper h3 {
    font-size: 16px;
    font-family: "Open Sans";
  }

  .personlaity-bottom-banner-img-mobile {
    border-radius: 14px;
  }

  /* <!-- Ninth Section --> */
  .accordion-qtn h3 {
    font-size: 16px;
    font-family: "Open Sans";
    line-height: 160%;
    width: 80%;
  }

  .accordion-ans {
    flex-direction: column;
  }

  .accordion-ans p {
    width: 100%;
  }

  .accordion-subwrapper.active .accordion-ans {
    padding: 0 20px 20px 20px;
    max-height: 500px;
  }

  /* <!-- Tenth Section --> */
  .tenth-section-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .tenth-section-top-right-wrapper {
    padding-top: 0;
    margin-top: -40px;
  }

  /* <!-- Eleventh Section ( Timing Cards ) --> */
  .timing-cards-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  /* <!-- Image Gallery Swiper --> */
  .gallery-swiper-wrapper .swiper-slide p {
    font-size: 16px;
  }
}

/*IGCSE*/

.igcse-wrapper p {
  font-size: 14px;
  line-height: 160%; /* 22.4px */
}

.igcse-wrapper h2 {
  font-weight: 500;
  font-size: 32px;
}

.video-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-description-wrapper {
  width: 45%;
}

.video-description-wrapper h2 {
  padding-bottom: 16px;
}

/* .video-arrow-wrapper {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.video-arrow-wrapper img {
  width: 12px;
} */

/* Cards */
.features-card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  gap: 32px;
}

.feature-card {
  border-radius: 20px;
  border-bottom: 1px solid #0066b0;
  background: #e6f0f8;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 218px; */
}

.feature-card-icon {
  width: 34px;
  height: 34px;
}

/* Fourth Section */
.curriculum-wrapper {
  padding: 80px 0;
}

.curriculum-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}

.curriculum-subwrapper .left-wrapper .left-wrapper-title {
  font-family: "PlayFair Display";
  font-size: 20px;
  color: #00243d;
  position: relative;
  z-index: 1;
}

.curriculum-subwrapper .right-wrapper {
  width: 50%;
}

.subtract {
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 0;
  bottom: -10px;
}

/* Table */
.blue-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #03489f;
  display: flex;
  margin: 20px 0 30px 0;
}

.blue-table-subwrapper {
  width: 20%;
  border-right: 1px solid #03489f;
}

.blue-table-title {
  font-size: 18px !important;
}

.blue-table-th {
  background: #03489f;
  text-align: center;
  color: #fff;
  padding: 14px 0;
  font-size: 16px !important;
}

.blue-table-td-wrapper {
  padding: 20px 22px;
}

.blue-table-td-wrapper p {
  color: #1fb53b;
  font-size: 16px;
  font-weight: 500;
}

.blue-table-ul {
  margin-left: 20px;
}

.blue-table-ul li {
  font-size: 16px;
  padding-top: 20px;
  font-weight: 500;
}

.blue-table-desc {
  width: 75%;
  padding-bottom: 42px;
}

/* Sixth Section */
.blue-section-wrapper {
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 80px;
}

.blue-section-title {
  color: #fff;
}

.blue-section-left-wrapper {
  padding: 30px;
  background-color: #03489f;
  display: flex;
  align-items: center;
  column-gap: 24px;
  width: 62%;
  border-radius: 20px;
}

.blue-section-left-image {
  width: 45%;
  height: 310px;
}

.blue-section-left-image img {
  width: 100%;
  height: 100%;
}

.blue-section-left-details {
  width: 70%;
}

.blue-section-right-wrapper {
  padding: 30px 64px 30px 30px;
  background-color: #03489f;
  width: 35%;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.blue-section-right-wrapper .frame {
  position: absolute;
  right: -80px;
  bottom: -80px;
  z-index: 1;
  width: 454px;
  height: 340px;
}

.blue-section-ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 36px;
  margin: 40px 0;
}

.blue-section-ul li {
  font-size: 14px;
}

.blue-section-ul li span {
  font-weight: 600;
  letter-spacing: 1px;
}

.blue-section-link-wrapper {
  border-radius: 14px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.1);
}

.blue-section-link-wrapper a {
  color: #fff;
  font-size: 14px;
}

.blue-section-right-wrapper h2 {
  color: #fff;
  font-size: 24px;
}

.blue-section-right-wrapper-list,
.green-section-right-wrapper-list {
  display: flex;
  column-gap: 10px;
  align-items: center;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

.green-left-wrapper {
  width: 50%;
}

.green-section-right-wrapper-list {
  margin-top: 16px;
}

.assesment-desc {
  padding: 8px 0 0 0;
}

.assesment-qtn-wrapper p:first-child {
  padding: 40px 0 10px 0;
  font-weight: 500;
  font-size: 16px;
}

.green-right-wrapper {
  width: 45%;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
}

.green-right-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eleventh Section ( Timing Cards ) */
.timing-cards-wrapper {
  padding-bottom: 80px;
}

.timing-cards-wrapper h2 {
  text-align: center;
  color: #00243d;
}

.timing-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 30%);
  align-items: center;
  justify-content: center;
  column-gap: 32px;
  margin-top: 30px;
}

.timing-card {
  background-color: #e6f0f8;
  border-radius: 20px;
  padding: 26px;
}

.timing-cards-container p:first-child {
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}

.timing-subwrapper {
  display: flex;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.timing-subwrapper:last-child {
  margin-bottom: 0;
}

/* Eight Section */
.personlaity-bottom-banner-wrapper {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 80px;
}

.personlaity-bottom-banner-img {
  width: 100%;
  height: 382px;
  border-radius: 20px;
  overflow: hidden;
}

.personlaity-bottom-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: unset;
}

.personlaity-bottom-subwrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.personlaity-bottom-left-subwrapper {
  width: 35%;
}

.personlaity-bottom-right-subwrapper {
  width: 60%;
}

.personlaity-bottom-left-subwrapper h3 {
  color: #00243d;
  padding-top: 18px;
  font-weight: 500;
  font-size: 20px;
}

/* Ninth Section */
.ninth-section-wrapper {
  padding-bottom: 80px;
}

.ninth-section-wrapper .ninth-section-desc {
  width: 50%;
  padding-top: 10px;
  padding-bottom: 40px;
}

.accordion-subwrapper:last-child {
  border-bottom: none;
}

.accordion-qtn h3 {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.accordion-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  fill: #666;
}

.accordion-subwrapper.active .accordion-arrow {
  transform: rotate(180deg);
}

/* .accordion-subwrapper.active {
  margin-top: 10px;
} */

.accordion-ans p {
  margin: 4px 0;
  color: #00243d;
  display: flex;
  align-items: center;
  width: 30%;
}

.accordion-ans p span {
  padding-right: 6px;
}

/* Tenth Section */
.tenth-section-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 60px;
  padding-bottom: 80px;
}

.tenth-section-wrapper h2 {
  padding-bottom: 20px;
}

.tenth-section-top-right-wrapper {
  padding-top: 60px;
}

/* Gallery Swiper */
.gallery-swiper {
  background-color: #fee6d9;
  padding: 100px 0;
}

.gallery-swiper-wrapper .swiper-img-wrapper {
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  cursor: grab;
}

.gallery-swiper-wrapper .swiper-slide p {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding-top: 18px;
}

.gallery-swiper-wrapper .swiper-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blue-section-mobile,
.green-right-wrapper-mobile,
.personlaity-bottom-banner-img-mobile {
  display: none;
}

/* MEDIA QUERY */
@media screen and (max-width: 1024px) {
  .features-card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .blue-section-left-image {
    height: 170px;
  }
}

@media screen and (max-width: 820px) {
  /*  Video Section  */
  .video-wrapper {
    margin: 60px 0;
  }

  /* <!-- Fourth Section --> */
  .curriculum-wrapper {
    padding: 60px 0 10px 0;
  }

  .curriculum-subwrapper {
    flex-direction: column;
    gap: 20px;
  }

  .igcse-wrapper .curriculum-subwrapper .left-wrapper,
  .curriculum-subwrapper .right-wrapper {
    width: 100%;
    height: auto;
  }

  /* <!-- Fifth Section ( Table ) --> */
  .blue-table {
    flex-direction: column;
  }

  .blue-table-subwrapper,
  .blue-table-desc {
    width: 100%;
  }

  /* <!-- Sixth Section ( Blue ) --> */
  .blue-section-wrapper {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }

  .blue-section-title {
    display: none;
  }

  .blue-section-mobile {
    display: block;
    text-align: left;
    padding-bottom: 20px;
  }

  .blue-section-left-wrapper,
  .blue-section-right-wrapper,
  .blue-section-left-details {
    width: 100%;
  }

  .blue-section-left-image {
    width: 280px;
    height: 280px;
  }

  .blue-section-left-wrapper {
    flex-direction: column;
  }

  /* <!-- Seventh Section ( Green ) --> */
  /* .green-section-wrapper {
    flex-direction: column;
    margin-bottom: 60px;
  } */

  .green-left-wrapper,
  .green-right-wrapper {
    width: 100%;
  }

  .green-right-wrapper {
    display: none;
  }

  .green-right-wrapper-mobile {
    display: block;
    margin: 20px 0;
    height: 400px;
  }

  .green-right-wrapper-mobile img {
    object-position: top;
  }

  .assesment-qtn-wrapper p:first-child {
    padding: 0 0 10px 0;
  }

  /* <!-- Eight Section --> */
  .personlaity-bottom-banner-img {
    height: 260px;
  }

  .personlaity-bottom-subwrapper {
    flex-direction: column;
  }

  .personlaity-bottom-left-subwrapper,
  .personlaity-bottom-right-subwrapper {
    width: 100%;
  }

  /* <!-- Ninth Section --> */
  .ninth-section-wrapper {
    padding-bottom: 60px;
  }

  .ninth-section-wrapper .ninth-section-desc {
    width: 100%;
  }

  .personlaity-bottom-banner-wrapper {
    width: 100%;
    padding-bottom: 60px;
  }

  .personlaity-bottom-left-subwrapper h3 {
    padding-top: 14px;
  }

  .personlaity-bottom-banner-img {
    display: none;
  }

  .personlaity-bottom-banner-img-mobile {
    display: block;
    margin: 20px 0;
  }

  /* <!-- Tenth Section --> */
  .tenth-section-wrapper {
    padding-bottom: 60px;
  }

  /* <!-- Eleventh Section ( Timing Cards ) --> */
  .timing-cards-wrapper {
    padding-bottom: 60px;
  }

  .timing-card {
    border-radius: 14px;
  }

  /* <!-- Image Gallery Swiper --> */
  .gallery-swiper {
    padding: 50px 0;
  }

  .gallery-swiper-wrapper .swiper-img-wrapper {
    border-radius: 14px;
    height: 260px;
  }
}

@media screen and (max-width: 640px) {
  .igcse-wrapper h2 {
    font-size: 24px;
  }

  /* <!-- Video Section --> */
  .video-wrapper {
    margin: 40px 0;
  }

  .video-subwrapper {
    flex-direction: column;
  }

  .video-section,
  .video-description-wrapper {
    width: 100%;
  }

  .video-section {
    height: 224px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  .video-description-wrapper h2 {
    padding-bottom: 12px;
  }

  /* <!-- Third Section --> */
  .features-card-wrapper {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 24px;
    gap: 20px;
  }

  .feature-card {
    padding: 24px;
  }

  /* <!-- Fourth Section --> */
  .curriculum-subwrapper .left-wrapper .left-wrapper-title {
    font-size: 16px;
  }

  /* <!-- Fifth Section ( Table ) -->  */
  .blue-table {
    margin: 20px 0;
  }

  .blue-table-title {
    font-size: 16px !important;
  }

  .blue-table-td-wrapper p {
    font-size: 14px;
  }

  .blue-table-ul li {
    font-size: 14px;
    padding-top: 18px;
  }

  .blue-table-td-wrapper {
    padding: 18px;
  }

  /* <!-- Sixth Section ( Blue ) --> */
  .blue-section-left-wrapper,
  .blue-section-right-wrapper {
    padding: 24px;
    border-radius: 14px;
  }

  .blue-section-ul {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }

  .blue-section-link-wrapper a {
    word-break: break-all;
  }

  .blue-section-right-wrapper-list {
    margin-top: 18px;
  }

  /* <!-- Seventh Section ( Green ) --> */
  /* .green-section-wrapper {
    padding: 24px; Commented for IBDP
  } */

  .green-right-wrapper-mobile {
    height: 200px;
    border-radius: 14px;
  }

  /* <!-- Eight Section --> */
  .personlaity-bottom-left-subwrapper h3 {
    font-size: 16px;
    font-family: "Open Sans";
  }

  .personlaity-bottom-banner-img-mobile {
    border-radius: 14px;
  }

  /* <!-- Ninth Section --> */
  .accordion-qtn h3 {
    font-size: 16px;
    font-family: "Open Sans";
    line-height: 160%;
    width: 80%;
  }

  .accordion-ans {
    flex-direction: column;
  }

  .accordion-ans p {
    width: 100%;
  }

  .accordion-subwrapper.active .accordion-ans {
    padding: 0 20px 20px 20px;
    max-height: 500px;
  }

  /* <!-- Tenth Section --> */
  .tenth-section-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .tenth-section-top-right-wrapper {
    padding-top: 0;
    margin-top: -40px;
  }

  /* <!-- Eleventh Section ( Timing Cards ) --> */
  .timing-cards-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  /* <!-- Image Gallery Swiper --> */
  .gallery-swiper-wrapper .swiper-slide p {
    font-size: 16px;
  }
}

/*admission css code*/
.contact-us-container {
  width: 100%;
  margin: 50px 0px;
}

.contact-us-heading {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 30px;
  margin-top: 36px;
}

.contact-information {
  width: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  background: var(--Blue-100, #e6f0f8);
  padding: 40px;
}

.contact-information-part {
  width: 45%;
}

.contact-address {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 30px;
}

.contact-address:last-child {
  margin-bottom: 0;
}

.contact-address a {
  text-decoration: none;
}

.info {
  font-size: 14px;
  color: #00243d;
}

.mailto {
  text-decoration: underline;
}

.contactsvg {
  width: 24px;
  height: 24px;
}

.contact-address .address {
  color: #00243d;
  font-size: 14px;
  font-style: normal;
  line-height: 160%;
  margin-bottom: 20px;
}

.direction {
  display: flex;
  align-items: center;
  gap: 10px;
}

.direction a,
.direction p {
  color: #03489f;
  text-align: right;
  font-size: 14px;
  line-height: 160%;
  text-decoration: none;
}

.add-svg {
  width: 30px;
  height: 30px;
}

.contact-details {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  text-decoration: none;
}

.contact-details:last-child {
  margin-bottom: 0;
}

.admission-container {
  border-radius: 20px;
  background: #def4e2;
  display: flex;
  justify-content: space-between;
  padding: 40px;
}

/* Small: below 768px */
@media (max-width: 768px) {
  .contact-information-part {
    width: 100%;
  }
}

/* Extra Small: below 480px */
@media (max-width: 479px) {
  .contact-information-part-subwrapper {
    padding-bottom: 24px;
  }

  .contact-details {
    margin-bottom: 24px;
  }

  .contact-us-heading {
    font-size: 24px;
    margin: 60px 0 20px 0;
  }

  .contact-information {
    display: block;
    padding: 32px 24px;
  }

  .admission-container {
    padding: 30px 24px 24px 24px;
  }
}


/*Awards css code starts*/

.awards-wrapper p {
  font-size: 14px;
  line-height: 160%; /* 22.4px */
}

.awards-wrapper h2 {
  font-weight: 500;
  font-size: 32px;
  color: #00243d;
}

.tabs-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80px 0 40px 0;
  position: sticky;
  top: 120px;
  background: #fff;
}

/* .tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
} */

.filter-tab {
  border-radius: 10px;
  border: 1px solid #023f6a;
  padding: 8px 24px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.2s all ease;
  background-color: transparent;
}

.filter-tab:hover {
  background-color: #023f6a;
  color: white;
}

.main-dropdown {
  width: 120px;
}

.main-dropdown .mobile-select-button:focus {
  outline: 1px solid #000000;
}

.mobile-navigation .mobile-select-button {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 14px 20px;
    text-align: left;
    color: white;
    cursor: pointer;
    background-color: #03489f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.mobile-navigation .mobile-select-options {
        position: absolute;
    width: 100%;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 2;
}

.mobile-select-button {
    width: 100%;
    font-size: 16px;
    background-color: transparent;
    color: #023f6a;
    border: 1px solid #023f6a;
    padding: 8px 20px;
    border-radius: 8px;
}

@media screen and (min-width: 1024px) {
  .mobile-select-button {
  padding: 8px 14px;
  }
  .select-arrow {
    top: 4px;
    position: relative;
  }
}

.award-tab-active {
  background-color: #023f6a;
  color: white;
}

.award-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 40px;
  padding-bottom: 60px;
}

.awards-card {
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  cursor: pointer;
  transition: 0.4s all ease;
  background-color: transparent;
  text-align: left;
  border: none;
  border-bottom: 2px solid #cbcbcb;
  font-family: "Open Sans", sans-serif;
}

.mobile-select-options p.highlighted {
  background-color: #023f6a;
  color: white;
  outline-offset: -2px;
  transition: all 0.15s ease-in-out;
  border-radius: 4px;
}

.awards-card:hover {
  border-bottom: 2px solid #fca312;
  background: #fff6e7;
}

.awards-card h3 {
  font-size: 20px;
  color: #00243d;
  padding: 10px 0;
  font-weight: 500;
}

.date-arrow-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .blue-arrow {
  display: none;
} */

.title {
  color: #03489f;
  font-weight: 600;
  letter-spacing: 2.1px;
}

.award-card-img {
  width: 184px;
  height: 184px;
  object-fit: cover;
  border-radius: 10px;
}

.view-btn {
  border-radius: 50px;
  padding: 16px 26px;
  font-size: 16px;
  border: 1px solid #03489f;
  background: transparent;
  color: #03489f;
  margin: 0 0 100px 0;
  display: flex;
  justify-content: center;
  transition: 0.3s all ease;
  margin-inline: auto;
  cursor: pointer;
}

.view-btn:hover {
  background: #03489f;
  color: white;
}

.popup-text {
  display: none;
}

/* <!-- Popup --> */
.popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: white;
  border-radius: 20px;
  padding: 48px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  width: 55%;
  height: 86vh;
  animation: fadeIn 0.8s ease-in-out;
}

.popup-inner-wrapper {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.popup-inner-wrapper::-webkit-scrollbar {
  width: 4px;
  border-radius: 60px;
}
.popup-inner-wrapper::-webkit-scrollbar-button {
  background: #ffffff;
}
.popup-inner-wrapper::-webkit-scrollbar-track-piece {
  background: #e6f0f8;
}
.popup-inner-wrapper::-webkit-scrollbar-thumb {
  background: #03489f;
  border-radius: 60px;
}


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

.cross {
  position: absolute;
  top: 4%;
  right: 4%;
  cursor: pointer;
  transition: 0.4s all ease;
}

.cross:hover {
  transform: rotate(90deg);
}

.popup-overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup-content h3 {
  font-size: 20px;
  color: #00243d;
  font-weight: 500;
  padding-bottom: 30px;
  width: 90%;
}

.popup-img {
  width: 100%;
  /* height: 476px; */
  object-fit: cover;
  border-radius: 20px;
}

@media screen and (max-width: 1024px) {
  .popup-content {
    width: 90%;
  }

  .popup-img {
    object-fit: unset;
  }
}

@media screen and (max-width: 820px) {
  .awards-card {
    flex-direction: column;
    padding: 16px;
  }

  .award-card-img {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .award-cards-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    padding-bottom: 30px;
  }

  .tabs-section {
    padding: 60px 0 24px 0;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .award-card-img {
    display: none;
  }

  .mobile-select-button {
    width: 100%;
  }

  .awards-card {
    background: #fff6e7;
    padding: 20px;
    border-radius: 16px;
    border-bottom: 1px solid #fca312;
    align-items: flex-start;
  }

  .card-details-wrapper {
    width: 100%;
  }

  .main-dropdown,
  .mobile-select-options {
    width: 100%;
  }

  #awardSelectOptions.mobile-select-options {
    width: 100%;
  }


  .filter-tab {
    font-size: 14px;
    white-space: nowrap;
  }

  .title {
    font-weight: 500;
  }

  .awards-card h3 {
    font-size: 16px;
    padding: 14px 0;
  }

  .view-btn{
    margin: 0 0 60px 0;
    margin-inline: auto;
  }

  .blue-arrow {
    display: block;
  }

  .popup-content {
    /* height: 544px; */
    padding: 20px;
  }

  .popup-content h3 {
    font-size: 16px;
  }

  .popup-img {
    height: 372px;
    object-fit: cover;
  }
}

.career-first-section {
  margin: 80px 0;
}
.career-first-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.career-first-img {
  width: 48%;
  height: 553px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.career-first-img .career-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.career-first-img .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.career-first-content {
  width: 48%;
}

.career-first-title {
  color: var(--Blue-400, #00243d);
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  max-width: 520px;
}

.career-first-subtitle-link,
.career-first-subtitle-link a {
  color: #03489f;
  text-decoration: underline;
}

.career-first-subtitle-link a:hover {
  color: #00243d;
}

.career-first-subtitle {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  margin-top: 16px;
}

.opening-subtitle {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  max-width: 727px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 40px;
}
.opening-section-wrapper {
  margin: 80px 0 80px 0;
}

.openingcards-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  /* justify-content: space-between; */
}
.opening-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  border-bottom: 1px solid var(--Blue-300, #03489f);
  background: var(--Blue-100, #e6f0f8);
  padding: 30px;
}

.opening-title {
  color: #03489f;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}

.opening-subtext {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
  margin: 13px 0px;
}

.opening-description {
  font-size: 14px;
}

.opening-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 151px;
  border-radius: 50px;
  background-color: transparent;
  box-shadow: none;
  border-radius: 2000px;
  border: 1px solid var(--Blue-400, #00243d);
  padding: 16px 24px;
  margin-top: 40px;
  gap: 10px;
  cursor: pointer;
  transition: all 0.7s;
}

.opening-button span,
.recruiting-opening-button span {
  color: #00243d;
  font-size: 14px;
  text-decoration: none !important;
}

.recruitment-section {
  display: flex;
  margin-top: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  border-radius: 20px;
  border-bottom: 2px solid #1fb53b;
  background: #def4e2;
}

.recruitment-text {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.recruiting-opening-button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 0px;
  padding: 10px 24px;
  border-radius: 2000px;
  border: 1px solid #00243d;
  text-decoration: none;
}

.recruitment-content {
  width: 30%;
}

/* OUR STAFF */
.staff-section {
  width: 100%;
  background: #fff6e7;
  border-radius: 20px;
  padding: 60px;
  margin: 80px 0;
  display: flex;
  justify-content: space-between;
}

.staff-content {
  width: 48%;
}

.staff-content-h2 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 15px;
}

.staff-content-p {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 40px;
}

.staff-content-h3 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 20px;
}

.staff-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}

.staff-img {
  width: 48%;
  height: 652px;
  border-radius: 20px;
  overflow: hidden;
}

.staff-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-staff-img {
  display: none;
}

/* * Media Query */
@media (max-width: 1024px) {
  .staff-img {
    height: 500px;
  }

  .career-first-img {
    height: 450px;
  }
}

@media (max-width: 820px) {
  .openingcards-container {
    grid-template-columns: 1fr 1fr; /* 2 columns */
  }

  .career-first-wrapper {
    flex-direction: column;
  }

  .career-first-img,
  .career-first-content,
  .career-first-title,
  .staff-content {
    width: 100%;
  }

  .career-first-title {
    padding-top: 20px;
    max-width: 100%;
  }

  .recruitment-content {
    width: 50%;
  }

  .staff-section {
    padding: 30px;
  }

  .staff-img {
    display: none;
  }

  .mobile-staff-img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Small screens (phones) */
@media (max-width: 480px) {
  .openingcards-container {
    grid-template-columns: 1fr; /* 1 column */
  }

  .career-first-section {
    margin: 60px 0;
  }

  .career-first-img {
    height: 220px;
    border-radius: 16px;
  }

  .career-first-img .video-play img {
    width: 34px;
  }

  .opening-section-wrapper,
  .staff-section {
    margin: 60px 0;
  }

  .opening-subtitle {
    font-size: 24px;
  }

  .opening-card {
    padding: 24px;
    border-radius: 16px;
  }

  .opening-title {
    font-size: 12px;
  }

  .opening-subtext {
    font-size: 20px;
  }

  .opening-button {
    padding: 10px 20px;
    margin-top: 24px;
  }

  .recruitment-content {
    width: 100%;
  }

  .recruitment-section {
    margin-top: 20px;
    padding: 24px;
    border-radius: 16px;
    flex-direction: column;
    align-items: start;
  }

  .recruiting-opening-button {
    margin-top: 50px;
  }

  .staff-section {
    padding: 24px;
    border-radius: 16px;
  }

  .staff-content-h2 {
    font-size: 24px;
  }

  .staff-content-p {
    margin-bottom: 20px;
  }

  .mobile-staff-img {
    height: 200px;
    border-radius: 16px;
  }

  .staff-content-h3 {
    font-size: 16px;
  }

  .staff-benefit-item {
    margin-bottom: 12px;
  }
}

/* p {
  font-size: 14px;
  line-height: 160%;  22.4px 
  
  h2 {
  font-weight: 500;
  font-size: 32px;
  color: #00243d;
} */

img {
  object-position: top;
}

/* Video Section */
.video-wrapper {
  background: #fff6e7;
  padding: 62px 0;
  margin: 80px 0;
  border-radius: 20px;
}

.campus-wrapper .video-wrapper {
    background: #def4e2;
    padding: 40px 0;
    margin: 80px 0;
    border-radius: 20px;
}

.campus-wrapper h2 {
    font-weight: 500;
    font-size: 32px;
    color: #00243d;
}

.campus-wrapper .accordion-image {
  width: 50%;
  height: 370px;
  border-radius: 20px;
  object-fit: cover;
}
.video-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

.video-thumbnail-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
}

.video-thumbnail-wrapper .icse-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-section video {
  width: 100%;
  height: 100%;
}

.video-description-wrapper {
  width: 45%;
}

.video-description-wrapper h2 {
  padding-bottom: 16px;
}

.icse-info h2 {
    font-weight: 500;
    font-size: 32px;
}

.video-arrow-wrapper {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background-color: white;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

/* <!-- Third Section --> */
.list-wrapper {
  background-color: #e6f0f8;
  padding: 40px;
  border-radius: 20px;
  margin-bottom: 80px;
}

.list-subwrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.list {
  width: 48%;
  display: flex;
  column-gap: 10px;
  align-items: start;
  margin-bottom: 20px;
}

.list img {
  width: 12px;
  margin-top: 5px;
}

/* <!-- Tabs Section --> */
.tabs-main-wrapper {
  padding-bottom: 80px;
}

/* .tabs-wrapper {
  margin: 40px 0 50px 0;
  display: flex;
  column-gap: 14px;
} */

.celebrations-tab .tabs-wrapper {
  position: relative;
}

.campus-wrapper .tabs-wrapper {
    margin: 40px 0 50px 0;
    display: flex;
    column-gap: 14px;
}

.campus-wrapper .tab-panel {
  display: none !important;
}

.campus-wrapper .tab-panel.show-tab {
  display: block !important;
}

.campus-wrapper .tab {
  border-radius: 10px;
  border: 1px solid #023f6a;
  padding: 8px 24px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s all;
  background: transparent;
}

.tab:hover {
  background: #03489f;
  color: #ffffff;
}

.campus-wrapper .active-tab {
  background-color: #03489f;
  color: #fff;
}

.campus-wrapper .accordion-ans p {
  font-size: 14px;
  line-height: 160%;
}

/* <!-- Location Section --> */
.location-tab-wrapper {
  display: flex;
  justify-content: space-between;
  column-gap: 56px;
}

.location-tab-wrapper a {
  color: #00243d;
  text-decoration: none;
}

.location-left-wrapper,
.location-right-wrapper {
  width: 45%;
}

.location-right-wrapper img {
  width: 100%;
  height: 424px;
  object-fit: cover;
  border-radius: 20px;
}

.location-left-wrapper h3 {
  font-size: 20px;
  font-weight: 500;
  color: #00243d;
}

.location-description {
  padding: 8px 0 40px 0;
}

.location-green-wrapper {
  background: #def4e2;
  border-radius: 20px;
  padding: 20px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
}

.direction-wrapper {
  display: flex;
  column-gap: 10px;
  align-items: center;
}

.direction-wrapper {
  font-size: 14px;
  margin-top: 10px;
}

.direction-wrapper a {
  color: #03489f;
}

.location-pin-wrapper {
  display: flex;
  align-items: start;
  column-gap: 10px;
}

.location-subwrapper {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-top: 24px;
  width: 50%;
}

.location-subwrapper a {
  font-size: 14px;
}

.green-bottom-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pin-subwrapper {
  width: 352px;
}

.email-wrapper a {
  text-decoration: underline;
}

/* <!-- Building Section --> */
.text-image-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-image-wrapper p {
  width: 40%;
}

.text-image-wrapper img {
  width: 50%;
  height: 424px;
  border-radius: 20px;
  object-fit: cover;
}

.icse-info .accordion-wrapper {
    width: 50%;
}

.igcse-wrapper .accordion-wrapper {
    width: 100%;
}

.accordion-subwrapper {
  border-bottom: 1px solid #e0e0e0;
  border-radius: 20px;
}

.accordion-qtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px 34px;
  cursor: pointer;
  background: #fff;
  transition: background-color 0.3s ease;
  user-select: none;
  border-radius: 20px;
}

.icse-info .accordion-qtn {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    border-radius: 20px;
    padding: 30px;
    transition: border 0.3s ease, border-radius 0.3s ease;
    background-color: white;
}

.icse-info .accordion-subwrapper.active .accordion-ans {
    max-height: 700px;
    background-color: #fff6e7;
    padding: 0 120px 30px 30px;
    border-bottom: 1px solid #fca312;
    font-size: 14px;
    opacity: 1;
    color: #00243D;
    border-radius: 0 0 20px 20px;
    line-height: 160%;
    transition: max-height 0.4s ease, opacity 0.8s ease, background-color 0.4s ease, padding 0.3s ease;
    overflow: hidden;
}

.icse-info .accordion-qtn h3 {
    font-weight: 500;
    font-size: 20px;
    font-family: "Playfair Display", serif;
    color: #03489f;
}

.icse-info .accordion-image {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
    object-fit: cover;
}

.icse-info .accordion-image.active {
    opacity: 1;
    position: relative;
    z-index: 1;
}

.accordion-qtn h3 {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.accordion-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  fill: #666;
}

.accordion-subwrapper.active .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  display: flex;
  align-items: center;
  column-gap: 34px;
  opacity: 0;
}

.accordion-image {
  width: 100%;
  height: 100%;
  /* position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease; */
  object-fit: cover;
}

.accordion-subwrapper.active .accordion-ans {
  max-height: 500px;
  padding: 0 34px 34px 34px;
  opacity: 1;
}

.accordion-subwrapper.active .accordion-qtn {
  background-color: #fff5e5;
  border-radius: 20px 20px 0 0;
}

.accordion-subwrapper.active {
  background-color: #fff5e5;
  border-bottom: 1px solid #faa011;
}

.icse-info .accordion-subwrapper.active {
    margin-top: 10px;
}

.icse-info .accordion-subwrapper {
    background-color: transparent;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    border: none;
}

.accordion-ans p {
  color: #00243d;
  /* width: 35%; */
}

.accordion-ans p span {
  padding-right: 6px;
}

/* <!-- Off Campus Activities --> */
#tab4.show-tab {
  display: block;
}

.accordion-campus-wrapper .accordion-subwrapper.active .accordion-qtn,
.accordion-campus-wrapper .accordion-subwrapper.active .accordion-ans {
  background: #e6f0f8;
  border-radius: 0 0 20px 20px;
}

.accordion-campus-wrapper .accordion-subwrapper.active .accordion-qtn {
  border-radius: 20px 20px 0 0;
}

.accordion-campus-wrapper .accordion-subwrapper.active {
  border-bottom: 1px solid #00243d;
  background-color: #e6f0f8;
}

.accordion-campus-wrapper .accordion-ans p {
  width: 90%;
}

.campus-acti-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.campus-acti-left-wrapper {
  width: 40%;
}

.campus-acti-left-wrapper h3 {
  font-size: 20px;
  color: #00243d;
  padding-bottom: 16px;
  font-weight: 500;
}

.campus-acti-wrapper img {
  width: 50%;
  height: 424px;
  object-fit: cover;
  border-radius: 20px;
}

/* <!-- School Transport --> */
.transport-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.transport-left-wrapper {
  width: 50%;
  background-color: #def4e2;
  border-radius: 20px;
  padding: 24px;
}

.transport-left-wrapper h3 {
  color: #00243d;
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 8px;
}

.transport-image {
  width: 50%;
  height: 424px;
  object-fit: cover;
  border-radius: 20px;
}

.transport-list-wrapper {
  padding-top: 24px;
}

.transport-list-wrapper .list {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  width: 100%;
}

.transport-list-wrapper .list a {
  text-decoration: none;
  color: #03489f;
}

.transport-list-wrapper .list img {
  width: 20px;
  margin-top: -2px;
}

/* Active Tab */
.tab-data-wrapper {
  display: none;
}

.show-tab {
  display: flex;
}

.view-all-button {
  display: none;
}

@media screen and (max-width: 1024px) {
  .location-left-wrapper {
    width: 50%;
  }
}

@media screen and (max-width: 820px) {
  /*  Video Section  */
  .video-wrapper {
    margin: 60px 0;
  }

  .video-section {
    height: 300px;
  }

  .tabs-wrapper {
    /* flex-wrap: wrap;   Commented for awards*/ 
    gap: 20px;
  }

  .tab-data-wrapper {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .location-tab-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .accordion-image {
    height: 300px;
    border-radius: 14px;
  }

  .accordion-subwrapper.active .accordion-qtn {
    border-radius: 14px 14px 0 0;
  }

  .accordion-subwrapper {
    border-radius: 14px;
  }

  .campus-acti-wrapper {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .transport-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .location-left-wrapper,
  .location-right-wrapper,
  .text-image-wrapper p,
  .text-image-wrapper img,
  .campus-acti-wrapper img,
  .campus-acti-left-wrapper,
  .transport-left-wrapper,
  .transport-image {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .icse-wrapper h2 {
    font-size: 24px;
  }

  /* <!-- Video Section --> */
  .video-wrapper {
    margin: 40px 0;
  }

  .video-subwrapper {
    flex-direction: column;
  }

  .video-section,
  .video-description-wrapper {
    width: 100%;
  }

  .video-section {
    height: 224px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  .video-description-wrapper h2 {
    padding-bottom: 12px;
  }

  .icse-third-section-wrapper {
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 60px;
  }

  .icse-third-section-wrapper h2 {
    padding-bottom: 16px;
  }

  /* <!-- Fourth Section ( Accordion ) --> */
  .accordion-main-wrapper {
    margin-bottom: 60px;
    flex-direction: column;
  }

  .icse-info .accordion-wrapper,
  .accordion-image-wrapper {
    width: 100%;
  }

  .accordion-qtn {
    padding: 20px;
  }

  .accordion-qtn h3 {
    font-size: 20px;
  }

  .accordion-ans {
    border-radius: 0 0 14px 14px;
  }

  .accordion-subwrapper.active .accordion-qtn {
    border-radius: 14px 14px 0 0;
  }

  .icse-info .accordion-subwrapper.active .accordion-ans {
    padding: 0 20px 20px 20px;
  }

  .accordion-image-wrapper {
    display: none;
  }

  .accordion-image-mobile {
    display: block;
    width: 100%;
    height: 190px;
    border-radius: 14px;
    position: static;
    opacity: 1;
    margin-top: 20px;
  }

  /* <!-- Fifth Section --> */
  .fifth-section-top-wrapper {
    flex-direction: column;
    padding-bottom: 0;
  }

  .fifth-section-top-wrapper h2,
  .fifth-section-top-wrapper p {
    width: 100%;
  }

  .fifth-section-top-wrapper p {
    padding: 16px 0 20px 0;
  }

  /* <!-- Table --> */
  .blue-table {
    flex-direction: column;
  }

  .blue-table-title {
    font-size: 16px !important;
  }

  .icse-info .blue-table-subwrapper,
  .ext-exam-tag {
    width: 100%;
  }

  .blue-table-td-wrapper {
    padding: 18px;
  }

  .blue-table-ul li {
    font-size: 14px;
    padding-top: 18px;
  }

  .blue-table-th {
    white-space: nowrap;
    font-size: 16px;
  }

  .empty-th {
    display: none;
  }

  .empty-th-subwrapper {
    border-top: 1px solid #00243d;
  }

  /* <!-- Green Section --> */
  .icse-green-section-wrapper {
    margin: 20px 0 60px 0;
  }

  /* <!-- School Timing Section  --> */
  .timing-cards-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 640px) {
  .campus-wrapper h2 {
    font-size: 24px;
  }

  /* <!-- Video Section --> */
  .campus-wrapper .video-wrapper {
    margin: 40px 0;
    padding: 20px 0;
    border-radius: 14px;
  }

  .video-subwrapper {
    flex-direction: column;
    padding: 0 20px;
  }

  .video-section,
  .video-description-wrapper {
    width: 100%;
  }

  .video-section {
    height: 224px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  .video-description-wrapper h2 {
    padding-bottom: 12px;
  }

  .video-arrow-wrapper img {
    width: 44px;
  }

  .list-wrapper {
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 60px;
  }

  .list-subwrapper {
    flex-direction: column;
  }

  .list {
    width: 100%;
    margin-bottom: 16px;
  }

  .list img {
    width: 16px;
  }

  .list-subwrapper .list:nth-child(n + 9) {
    display: none;
  }

  .show-more .list:nth-child(n + 9) {
    display: flex;
  }

  .view-all-button {
    display: block;
    border-radius: 24px;
    border: 1px solid #03489f;
    padding: 10px 26px;
    background-color: transparent;
    margin: auto;
    color: #03489f;
    font-size: 16px;
    margin-top: 16px;
  }

  .tabs-main-wrapper {
    padding-bottom: 60px;
  }

  .campus-wrapper .tabs-wrapper {
    overflow-x: scroll;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    margin: 20px 0 30px 0;
  }

  .location-green-wrapper {
    padding: 24px;
    border-radius: 14px;
  }

  .pin-subwrapper,
  .location-subwrapper {
    width: 100%;
  }

  .location-subwrapper {
    margin-top: 20px;
  }

  .location-right-wrapper img {
    height: 326px;
    border-radius: 14px;
  }

  .location-description {
    padding: 8px 0 30px 0;
  }

  .text-image-wrapper img {
    height: 252px;
  }

  .accordion-subwrapper {
    border-bottom: 2px solid #b7bec3;
  }

  .accordion-ans {
    flex-direction: column;
  }

  .accordion-image,
  .accordion-ans p {
    width: 100%;
  }

  .accordion-qtn h3 {
    font-size: 16px;
  }

  .accordion-qtn {
    padding: 20px 16px;
  }

  .accordion-subwrapper.active .accordion-qtn {
    padding: 16px;
  }

  .accordion-subwrapper.active .accordion-ans {
    padding: 0 16px 16px 16px;
  }

  .ninth-section-wrapper .accordion-ans {
        flex-direction: column;
    }

  .ninth-section-wrapper .accordion-subwrapper.active .accordion-ans {
        padding: 0 20px 20px 20px;
        max-height: 500px;
    }

  .ninth-section-wrapper .accordion-ans {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    display: flex;
    flex-wrap: wrap;
  }
  .ninth-section-wrapper .accordion-ans p {
    margin: 2px 0;
    color: #00243d;
    display: flex;
} 

  .accordion-image {
    height: 216px;
    margin-bottom: 14px;
  }

  .campus-acti-wrapper img {
    height: 258px;
  }

  .accordion-campus-wrapper .accordion-subwrapper.active .accordion-ans {
    padding: 0 0 16px 0;
  }

  .transport-left-wrapper,
  .text-image-wrapper img,
  .campus-acti-wrapper img {
    border-radius: 14px;
  }

  .transport-image {
    height: 272px;
  }
}


/*****************EVENTS SECTION CSS CODE STARTS*******************/

.event-listing-container {
  width: 100%;
  margin: 80px 0;
}

.student-support-content {
  width: 100%;
  margin-bottom: 40px;
}

.student-support-content h4 {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 12px;
}

.student-support-content p {
  color: #00243d;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.event-support-feature-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
}

.event-support-feature {
  width: 100%;
  padding: 36px 40px;
  border-radius: 0px 0px 20px 20px;
  border-bottom: 1px solid #c3c3c3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.overflowImg {
  position: absolute;
  top: -50%;
  left: 40%;
  z-index: 2;
  display: none;
  transform: rotate(-4deg);
  width: 304px;
  height: 235px;
  border-radius: 10px;
  object-fit: cover;
}

.blue-arrow {
  filter: brightness(0);
}

.event-support-feature:hover .blue-arrow {
  filter: brightness(1);
}

.event-support-feature:hover .overflowImg {
  display: block;
  animation: animateUp 0.6s forwards;
}

.event-support-feature:hover .event-heading {
  color: #03489f;
}

.event-support-feature:hover .event-button {
  color: #03489f;
  border: 1px solid #03489f;
}

.event-support-feature:hover .event-heading {
  color: #03489f;
}

.event-support-feature:hover .event-button-span {
  color: #03489f;
}

@keyframes animateUp {
  0% {
    transform: rotate(-4deg) translateY(40px);
  }

  100% {
    transform: rotate(-4deg) translateY(0);
  }
}

.event-support-feature:hover {
  background-color: #fff6e7;
  border-radius: 20px;
  border-bottom: 1px solid var(--Yellow-300, #fca312);
}

.event-heading {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  transition: all 0.3s ease-in-out;
}

.event-button-span {
  color: #00243d;
  text-align: right;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.2px;
  transition: all 0.3s ease-in-out;
}

.event-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  background-color: transparent;
  border-radius: 50px;
  border: 1px solid #000;
  padding: 12px 20px;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.event-support-mobile-container {
  margin-bottom: 60px;
  display: none;
}

.event-support-mobile-features {
  background-color: #fff6e7;
  border-radius: 20px;
  border-bottom: 1px solid var(--Yellow-300, #fca312);
  padding: 12px 26px 12px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  cursor: pointer;
  text-decoration: none;
}

.student-support-mobile-content {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #03489f;
  font-family: "Playfair Display", serif;
  font-size: 16px;
}

.event-support-mobile-img {
  width: 136px;
  height: 110px;
}

.event-support-mobile-img img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.event-support-mobile-content {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.event-support-mobile-content p {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  /* 25.6px */
}

/* MEDIA QUERY */

/* Small: below 820px */
@media (max-width: 820px) {
  .event-listing-container {
    display: none;
  }

  .event-support-mobile-container {
    display: block;
  }

  .student-support-mobile-content {
    width: 80%;
  }
}

/* Extra Small: below 480px */
@media (max-width: 479px) {
  .student-support-content h4 {
    font-size: 24px;
  }
}

.events-year-container {
  display: flex;
  margin-top: 80px;
}

.events-year-wrapper {
  width: 20%;
}

.graduation-swiper img {
  object-position: top;
}

.events-year-data-wrapper {
  width: 80%;
  background-color: #fff6e7;
  border-radius: 20px;
  padding: 48px;
}

.data-top-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  column-gap: 80px;
  font-size: 14px;
  margin-bottom: 44px;
}

.data-top-right-wrapper img {
  width: 100%;
  height: 335px;
  object-fit: cover;
  border-radius: 20px;
}

.data-top-left-wrapper h2 {
  font-size: 32px;
  color: #00243d;
  padding: 4px 0 10px 0;
  font-weight: 500;
}

.data-top-left-title {
  color: #fca312;
}

.data-top-left-description {
  line-height: 160%;
}

.event-gallery-main-title {
  padding-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  color: #00243d;
}

.event-gallery-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 25px;
  row-gap: 40px;
}

.event-gallery-card {
  position: relative;
}

.event-play-icon {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.event-gallery-img {
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
  height: 196px;
}

.event-gallery-title {
  font-size: 18px;
  padding: 16px 0 10px 0;
  color: #00243d;
  font-weight: 500;
}

.event-gallery-button {
  color: #03489f;
  padding: 16px 26px;
  font-size: 16px;
  border-radius: 60px;
  background: transparent;
  margin: 40px auto;
  cursor: pointer;
  border: 1px solid #03489f;
  display: flex;
  justify-content: center;
  transition: 0.4s all ease;
}

.view-arrow {
  margin-left: 10px;
  width: 12px;
}

.event-gallery-button:hover {
  background: #03489f;
  color: #fff6e7;
}

.event-gallery-button:hover .view-arrow {
  filter: brightness(0) invert(1);
}

.event-gallery-year {
  font-size: 14px;
  color: #03489f;
}

.event-gallery-card.hidden-card {
  display: none;
}

.event-gallery-button.hidden-button {
  display: none;
}

@media screen and (max-width: 1024px) {
  .data-top-wrapper {
    column-gap: 40px;
  }
}

@media screen and (max-width: 480px) {
  .data-top-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .data-top-left-title {
    display: none;
  }

  .data-top-left-wrapper h2 {
    font-size: 24px;
  }

  .data-top-right-wrapper img {
    height: 250px;
    margin-top: 16px;
  }

  .event-gallery-wrapper {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 36px;
  }

  .event-gallery-img {
    height: 200px;
  }

  .event-gallery-main-title {
    font-size: 20px;
  }

  .event-gallery-title {
    font-size: 16px;
    padding: 14px 0 8px 0;
  }

  .event-gallery-button {
    padding: 10px 26px;
    margin-bottom: 0;
  }

  .event-play-icon {
    top: 98px;
  }
}

.events-section {
  background-color: #e8f2f7;
  padding: 40px;
  border-radius: 20px;
  margin: 80px auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.image-container {
  flex: 0 0 50%;
}

.event-image {
  width: 100%;
  height: 454px;
  border-radius: 15px;
}

.content-container {
  flex: 1;
}

.main-heading {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  padding-bottom: 20px;
}

.intro-text {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  padding-bottom: 24px;
}

.friday-assembly-heading {
  color: #03489f;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  padding-bottom: 8px;
}

.friday-assembly-text {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* -------------tab section----------------  */

.tab-wrapper {
  position: relative;
}

.tabs {
  display: flex;
  gap: 14px;
  background: #fff;
  position: sticky;
  top: 197px;
  z-index: 9;
  padding: 0 0 0 0;
}

.tab {
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #023f6a;
  border-radius: 10px;
  color: #023f6a;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  font-size: 16px;
  background: transparent;
}

.tab.active {
  color: white;
  background: #03489f;
}

.university-tabs-container .tab-content {
  display: none;
  background: #fff;
  gap: 78px;
  /* margin-top: 60px;
  margin-bottom: 80px; */
}

.celebrations-tab .tab-content.active {
  display: flex;
}

.celebrations-tab .tab-content {
    display: none;
    background: #fff;
    gap: 78px;
    margin-top: 60px;
    margin-bottom: 80px;
}

/* Sidebar */
.sidebar {
  width: 250px;
  position: sticky;
  top: 275px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sidebar-item {
  color: #00243d4d;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  cursor: pointer;
  display: flex;
  gap: 12px;
  text-align: left;
  background-color: transparent;
  border: none;
}

.sidebar-item.active {
  color: #03489f;
}

.sidebar-item .dot {
  background-color: #00243d4d;
  border-radius: 50px;
  margin-top: 8px;
  padding: 3px;
  height: 6px;
  transition: background-color 0.3s ease;
}

.sidebar-item.active .dot {
  background-color: #03489f;
}

.main-container {
  width: 75%;
}

/* Content area */
.content-area {
  flex: 1;
  padding-left: 20px;
  animation: fadeIn 0.5s ease-in-out;
  background-color: #def4e2;
  border-radius: 20px;
  padding: 46px;
}

.content-area h2 {
  margin: 0 0 16px;
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.content-area p {
  margin: 0 0 15px;
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.content-area img {
  max-width: 100%;
  height: 446px;
  margin: 15px 0 20px 0;
  border-radius: 16px;
  width: 100%;
  object-fit: cover;
}

/* Mobile dropdown */
.sidebar-dropdown {
  display: none;
  margin-bottom: 15px;
  width: 100%;
  padding: 8px;
  width: 97%;
  margin-left: 2px;
  border-radius: 10px;
  border: 1px solid #03489f;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.event-dropdown {
  display: none;
}

/* photo gallery css  */
.celebration-swiper-wrapper {
  margin-top: 64px;
  height: 320px;
}

.celebration-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.celebration-swiper-arrows {
  display: flex;
  align-items: center;
  gap: 40px;
}

.celebration-arrow {
  cursor: pointer;
}

.left-celebration-arrow {
  transform: rotate(180deg);
}

.celebration-title-wrapper h3 {
  font-size: 24px;
  color: #00243d;
  font-weight: 500;
}

.celebration-swiper-img-wrapper {
  border-radius: 10px;
  overflow: hidden;
  height: 204px;
  transition: 0.4s all ease;
}

.celebration-gallery-swiper {
  cursor: grab;
}

.celebration-swiper-img-wrapper .celebration-slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.celebration-swiper-wrapper .swiper-slide-next .celebration-swiper-img-wrapper {
  height: 258px;
}

@media screen and (max-width: 1024px) {
  .celebration-swiper-wrapper {
    height: auto;
  }

  .celebration-swiper-img-wrapper {
    height: 180px;
  }

  .celebration-swiper-wrapper .swiper-slide-next .celebration-swiper-img-wrapper {
    height: 180px;
  }

  .active-year {
    font-size: 44px;
  }

  .event-image {
    height: 400px;
  }

  .content-area img {
    height: 300px;
  }

  .tab-content {
    gap: 40px;
  }
}

@media screen and (max-width: 820px) {
  .events-section {
    flex-direction: column;
    margin: 40px 0;
    gap: 22px;
  }

  .image-container {
    flex: none;
    width: 100%;
  }

  .event-image {
    width: 100%;
    height: 400px;
  }

  .content-container {
    padding-left: 0;
  }

  .main-heading {
    font-size: 24px;
    padding-bottom: 10px;
  }

  .friday-assembly-heading {
    font-size: 1.2em;
    margin-bottom: 10px;
    padding-bottom: 0;
  }

  .intro-text,
  .friday-assembly-text {
    font-size: 16px;
    padding-bottom: 20px;
  }

  .content-area {
    padding: 20px;
  }

  .content-area h2 {
    font-size: 24px;
  }

  .main-container {
    width: 100%;
  }

  .tab-content.active {
    flex-direction: column;
  }

  .celebrations-tab .tab-content {
    gap: 40px;
    margin-top: 0;
  }

  .sidebar {
    display: none;
  }

  .sidebar-dropdown {
    display: block;
  }

  .tabs {
    padding-bottom: 30px;
  }

  .event-dropdown {
    width: 100%;
    display: block;
  }

  .event-dropdown .event-select-button:focus {
    outline: 1px solid #000000;
  }

  .event-select-button {
    width: 100%;
    font-size: 16px;
    background-color: transparent;
    color: #023f6a;
    border: 1px solid #023f6a;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #03489f;
    border-radius: 10px;
    text-align: left;
  }

  .event-select-button svg {
    width: 20px;
    height: 20px;
  }

  .event-dropdown .event-select-button:focus {
    outline: none;
  }

  .celebrations-tab .event-select-options {
    width: 100%;
    font-weight: 500;
    border: 1px solid #03489f;
    border-radius: 10px;
    margin-top: 5px;
    padding: 10px;
  }

  .celebrations-tab .event-option {
    padding: 8px;
    text-decoration: none;
    color: #374151;
    cursor: pointer;
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .tabs {
    top: 150px;
    padding-top: 10px;
    overflow-x: scroll;
  }

  .content-area img {
    height: 250px;
  }

  .events-section {
    padding: 16px;
    margin: 40px 0;
  }

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

  .friday-assembly-heading {
    font-size: 16px;
  }

  .intro-text,
  .friday-assembly-text {
    font-size: 0.9em;
    line-height: 1.5;
  }

  .event-image {
    height: 252px;
  }

  .event-select-button {
    line-height: 22px;
    font-size: 14px;
    align-items: center;
    border-radius: 14px;
  }

  .event-select-button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }
}

.year-container {
  margin: 80px 0;
  display: flex;
  justify-content: space-between;
}

.year-list-wrapper {
  width: 20%;
  margin-left: 40px;
  position: sticky;
  top: 220px;
  height: 100%;
}

.year-list-wrapper li::marker {
  font-size: 28px;
}

.year-data-wrapper {
  width: 80%;
  padding: 50px;
  border-radius: 20px;
  background-color: #fff6e7;
}

.year-content-wrapper {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.year-heading {
  color: rgba(0, 36, 61, 0.3);
  font-family: "Playfair Display";
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 30px;
  cursor: pointer;
  transition: 0.4s all ease;
}

.active-year {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 48px;
  font-weight: 600;
  line-height: 120%;
  /* 57.6px */
}

/* .active {
  display: flex;
} */

.hideBox {
  display: none;
}

.annual-year {
  color: #fca312;
}

.annual-title {
  color: #00243d;
  padding: 4px 0 10px 0;
  font-size: 32px;
  font-weight: 500;
}

.annual-description {
  font-size: 14px;
  line-height: 160%;
}

/* .year-data-subwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.year-content-text {
  width: 42%;
}

.year-content-image {
  width: 50%;
  height: 335px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.year-content-subimage {
  width: 100%;
  height: 100%;
} */

.year-data-subwrapper {
  display: block; /* remove flex */
}

.year-content-subimage {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.year-content-text {
  width: 100%; /* let it take full width, float handles the side-by-side */
  overflow: visible; /* BFC so text doesn't underlap the float */
}

.annual-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
}

.annual-swiper-wrapper {
  margin-top: 64px;
  height: 320px;
}

.annual-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.annual-swiper-arrows {
  display: flex;
  align-items: center;
  gap: 40px;
}

.plain-arrow {
  cursor: pointer;
}

.left-plain-arrow {
  transform: rotate(180deg);
}

.annual-title-wrapper h3 {
  font-size: 24px;
  color: #00243d;
  font-weight: 500;
}

.annual-swiper-img-wrapper {
  border-radius: 10px;
  overflow: hidden;
  height: 204px;
  transition: 0.4s all ease;
}

.annual-gallery-swiper {
  cursor: grab;
}

.annual-swiper-img-wrapper .annual-slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.annual-swiper-wrapper .swiper-slide-next .annual-swiper-img-wrapper {
  height: 258px;
}

.event-main-dropdown {
  display: none;
}

@media screen and (max-width: 1024px) {
  .annual-swiper-wrapper {
    height: 280px;
  }

  .annual-swiper-img-wrapper {
    height: 180px;
  }

  .annual-swiper-wrapper .swiper-slide-next .annual-swiper-img-wrapper {
    height: 220px;
  }

  .active-year {
    font-size: 44px;
  }
}

@media screen and (max-width: 820px) {
  .year-container {
    flex-direction: column;
  }

  .year-data-subwrapper {
    flex-direction: column;
    row-gap: 30px;
  }

  .year-list-wrapper {
    display: none;
  }

  .year-content-text,
  .year-content-image,
  .year-data-wrapper {
    width: 100%;
  }

  .annual-swiper-wrapper {
    height: 300px;
  }

  .year-data-wrapper {
    padding: 30px;
  }

  /* Dropdown */
  .event-main-dropdown {
    display: block;
    width: 100%;
    margin-bottom: 30px;
  }

  .event-main-dropdown .mobile-select-button:focus {
    outline: 1px solid #000000;
  }

  .mobile-select-button {
    width: 100%;
    font-size: 16px;
    background-color: transparent;
    color: #023f6a;
    border: 1px solid #023f6a;
    padding: 14px 20px;
    border-radius: 14px;
    text-align: left;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .mobile-select-options {
    width: 95%;
    /* font-weight: 500; */
  }

  /* Dropdown Ends */
}

@media screen and (max-width: 480px) {
  .year-container {
    margin: 60px 0;
  }

  .year-data-wrapper {
    background-color: transparent;
    padding: 0;
  }

  .annual-year {
    display: none;
  }

  .annual-title {
    font-size: 24px;
  }

  .year-content-image {
    height: 224px;
    border-radius: 16px;
  }

  .annual-swiper-wrapper {
    height: auto;
    margin-top: 60px;
  }

  .annual-title-wrapper h3 {
    font-size: 20px;
  }

  .annual-swiper-img-wrapper,
  .annual-swiper-wrapper .swiper-slide-next .annual-swiper-img-wrapper {
    height: 224px;
  }

  /* Dropdown */
  .annual-day-template .mobile-select-options {
    width: 90%;
  }

  .graduation-day-template .mobile-select-options {
    width: 90%;
  }
}

/*******************Not Found and Hygiene Section CSS CODE********************/

.error-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px 0;
  justify-content: center;
}

.error-number {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 240px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 46px;
}

.page-message {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.error-message {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  text-align: center;
  margin: 16px 0 40px 0;
}

.backbutton-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-button {
  /* width: 15%; */
  height: 100%;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #03489f;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: 600;
  border: none;
}

@media screen and (max-width: 768px) {
  .error-number {
    font-size: 174px;
  }

}

/* .hero-left-content {
  width: 100%;
} */

.hero-background-image {
  width: 60%;
}

.privacy-policy-content-wrapper {
  margin: 80px 0px;
}

.main-heading-pp {
  max-width: 800px;
}

.important-note {
  font-size: 20px;
  line-height: 160%;
  font-weight: 600;
  font-family: "Playfair Display", serif;
  margin: 24px 0px;
}

.pointHeading {
  font-size: 24px;
  line-height: 160%;
  font-weight: 500;
  font-family: "Playfair Display", serif;
  color: #03489f;
  margin-bottom: 16px;
}

.content-list {
  margin-left: 20px;
}

.content-list li {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  line-height: 160%;
  color: #00243d;
}

.list-points {
  margin-bottom: 24px;
}

/************************** Calender Section CSS CODE STARTS **************************/

.calender-details-wrapper,
.calender-details-container {
  width: 100%;
}

.calender-details-container {
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: #fff6e7;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 20px;
  padding: 38px;
  gap: 40px;
  margin: 80px 0;
}

.calender-image {
  width: 100%;
}

.calender-image img {
  width: 100%;
  border-radius: 20px;
  height: 414px;
  object-fit: cover;
}

.calendar-text p {
  margin-bottom: 10px;
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  line-height: 160%;
  /* 22.4px */
}

.calender-table-wrapper {
  width: 100%;
  margin-bottom: 44px;
}

.calender-table-heading {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
  /* 33.6px */
  margin-bottom: 20px;
  max-width: 601px;
}

table {
  width: 100%;
  border: 1px solid #03489f;
  border-collapse: separate;
  /* needed for border-radius */
  border-spacing: 0;
  /* removes the unwanted gap */
  border-radius: 20px;
  /* rounded corners */
  overflow: hidden;
}

tr {
  width: 100%;
}

.calendar-table th {
  width: 50%;
  text-align: left;
  padding: 14px 40px;
  background-color: #03489f;
  color: #fff;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  /* 25.6px */
}

td {
  width: 50%;
  padding: 14px 40px;
  border-left: 1px solid #03489f;
}

td:first-child {
  border-left: none;
}

.calendar-table ul {
  padding-left: 20px;
}

.calendar-table li {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.para-line {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  margin-top: 16px;
  font-weight: 400;
  line-height: 160%;
}

@media (max-width: 448px) {
  .calender-details-container {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
    margin: 60px 0;
  }

  .calender-image img {
    height: 226px;
  }

  th,
  td {
    padding: 10px 20px;
    font-size: 16px;
  }

  .table-scroll {
    overflow-x: auto;
  }

  .calendar-table {
    min-width: 600px;
    /* so it actually scrolls */
  }
}

@media (max-width: 768px) {
  .calender-details-container {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }

  .calender-image img {
    height: auto;
  }

  th,
  td {
    padding: 10px 20px;
  }
}

@media (max-width: 1024px) {
  .calender-details-container {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }

  .calender-image img {
    height: auto;
  }

  th,
  td {
    padding: 10px 20px;
  }
}

/***************** University Placement Section CSS CODE STARTS *******************/

.unversity-container {
  margin: 60px 0;
}

.university-placement-head {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 44.8px */
}

.university-tabs-container {
  margin-top: 40px;
  display: flex;
  gap: 40px;
}

/* Left Tabs Menu */
.tabs-menu {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-btn {
  background: transparent;
  padding: 12px 15px;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
  /* 33.6px */
  color: rgba(0, 36, 61, 0.3);
  transition: 0.3s;
}

.tab-btn.active {
  color: #03489f;
  font-family: "Playfair Display";
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
  /* 33.6px */
}

/* RIGHT CONTENT */
.tab-content-wrapper {
  flex: 1;
}

/* .tab-content {
  display: none;
} */

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

/* GRID of UNIVERSITY CARDS */
.uni-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.uni-card {
  border-radius: 16px;
  border-bottom: 1px solid #cbcbcb;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.uni-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.uni-card p {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
  /* 32px */
}

/* Hide dropdown on desktop */
.custom-dropdown-mobile {
  display: none;
}

/* Dropdown styling (mobile) */

/* MOBILE */
@media (max-width: 768px) {
  .university-tabs-container {
    flex-direction: column;
    gap: 30px;
    margin-top: 24px;
  }

  .university-placement-head {
    font-size: 24px;
  }

  .uni-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .uni-card {
    padding: 18px 0px;
  }

  .uni-card img {
    width: 50px;
    height: 50;
    object-fit: contain;
  }

  .uni-card p {
    font-size: 16px;
  }

  .custom-dropdown-mobile {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
  }

  .dropdown-selected#dropdownSelectedUP {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #03489f;
    font-size: 16px;
    font-weight: 600;
    color: #03489f;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Arrow Icon */
  .dropdown-arrow {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path d='M4 5l3 3 3-3' stroke='%230f4c81' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center;
    transition: transform 0.3s ease;
  }

  /* Rotate when open */
  .dropdown-selected.active .dropdown-arrow {
    transform: rotate(180deg);
  }

  .dropdown-list {
    position: absolute;
    top: 55px;
    width: 100%;
    background: #fff;
    border: 1px solid #0f4c81;
    border-radius: 12px;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 10;
  }

  .dropdown-list li {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 16px;
  }

  .dropdown-list li:hover {
    background: #f3f8ff;
  }

  .tabs-menu {
    display: none;
  }
}

/****************** IBDP RESULT CSS ********************/

.ibdp-wrapper {
  width: 100%;
  margin-top: 66px;
  /* margin-bottom: 111px; */
}

.ibdp-wrapper h2 {
    font-weight: 500;
    font-size: 32px;
}

.ibdp-container {
  width: 100%;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 66px;
}

.ibdp-box1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.ibdp-box2 {
  width: 100%;
  position: relative;
}

.ibdp-box2 img {
  width: 100%;
  height: 441px;
  object-fit: cover;
  border-radius: 20px;
}

.absolute-text {
  width: 414px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-text h2 {
  color: #00243d;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  line-height: 140%;
  /* 33.6px */
}

.best-percentage-wrapper {
  margin: 80px 0 100px;
}

.best-percentage-heading {
  color: #023f6a;
  margin-bottom: 87px;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  text-align: center;
}

.best-percentage-container {
  position: relative;
}

.best-percentage-container::before {
  content: "";
  width: 0.5px;
  background-color: #a3bdd2;
  height: 100%;
  position: absolute;
  top: 0;
  left: 34%;
}

.best-percentage-container::after {
  content: "";
  width: 0.5px;
  background-color: #a3bdd2;
  height: 100%;
  position: absolute;
  top: 0;
  right: 34%;
}

.best-performance-point-container {
  display: flex;
  flex-wrap: wrap;
  /* gap: 48px; */
  justify-content: center;
  align-items: center;
}

.point-card {
  position: relative;
  width: 30%;
  height: 228px;
  margin: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #a3bdd2;
}

.point-card:last-child {
  border-bottom: none;
}

.point-card-title {
  color: #03489f;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 23px;
}

.point-para {
  text-align: center;
  color: #00243d;
  text-align: center;
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
}

/* .point-card:nth-child(2)::before,
.point-card:nth-child(5)::before,
.point-card:nth-child(8)::before,
.point-card:nth-child(10)::before
 {
  content: "";
  width: 1px;
  background-color: red;
  height: 100%;
  position: absolute;
  left: -15px;

} */

.outperform {
  margin: 140px 0 0px;
}

.outperform-heading {
  margin-bottom: 87px;
  color: #023f6a;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 32px;
}

/* Chart Section */
.chart-section {
  margin: 20px auto 80px;
  background: #fff6e7;
  padding: 60px 40px;
  border-radius: 20px;
}

.chart-h2 {
  padding: 0 40px 40px;
}

.chart-h2 h2 {
  color: #00243d;
  font-family: "Playfair Display";
  font-weight: 500;
  font-size: 32px;
  line-height: 140%;
  /* 44.8px */
  max-width: 592px;
}

.chart-h2 p {}

.chart-header {
  text-align: center;
  /* margin-bottom: 40px; */
}

.chart-header .subtitle {
  color: #00243d;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  /* 28.8px */
}

.chart-wrapper,
.chart-wrapper-one {
  position: relative;
  height: 450px;
  width: 100%;
  margin-top: 20px;
  width: 100%;
  overflow-x: auto;
  /* enable horizontal scroll */
  overflow-y: hidden;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.chart-wrapper canvas {
  /* min-width: 600px; */
  /* chart minimum width so scrolling appears */
}

@media (max-width: 480px) {
  .subtitle {
    display: none;
  }

  .ibdp-box2 img {
    width: 100%;
    height: 313px;
  }

  .ibdp-wrapper {
    margin-bottom: 60px;
  }

  .best-percentage-wrapper {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .ibdp-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ibdp-wrapper {
    margin-top: 60px;
  }

  .ibdp-box1 {
    gap: 10px;
  }

  .absolute-text {
    width: 100%;
  }

  .absolute-text h2 {
    font-size: 24px;
    margin: 0 auto;
    width: 100%;
    max-width: 281px;
    padding: 0 20px;
  }

  .best-performance-point-container {
    flex-direction: column;
    gap: 0;
  }

  .best-percentage-container {
    position: relative;
    background-color: #e6f0f8;
    padding: 20px;
    border-radius: 16px;
  }

  .best-percentage-heading {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .point-card {
    width: 100%;
    border-bottom: 1px solid #a3bdd2;
    margin: 0px;
    padding: 30px 0;
    height: auto;
  }

  .point-card-title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .point-para {
    font-size: 16px;
  }

  .outperform {
    margin: 60px 0 0px;
  }

  .outperform-heading {
    margin-bottom: 20px;
    font-size: 24px;
  }

  .best-percentage-wrapper {
    margin: 60px 0 60px;
  }

  /* ============ */

  .chart-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
  }

  /* Chart container */
  .chart-container {
    position: relative;
    height: 400px;
    min-width: 100%;
    /* Full width on desktop */
  }

  /* Mobile: Make chart scrollable */
  .chart-container {
    min-width: 600px;
    /* Force minimum width on mobile to enable scroll */
  }

  /* Optional: Custom scrollbar styling */
  .chart-wrapper::-webkit-scrollbar {
    height: 2px;
  }

  .chart-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .chart-wrapper::-webkit-scrollbar-thumb {
    background: #fca312;
    border-radius: 10px;
  }

  .chart-wrapper::-webkit-scrollbar-thumb:hover {
    background: #e89210;
  }

  .chart-h2 {
    padding: 0;
  }

  .chart-h2 h2 {
    font-size: 24px;
  }

  .chart-h2 p {
    font-size: 12px;
  }
}

/* * * Media Query */
@media (max-width: 980px) {
  .best-performance-point-container {
    flex-direction: column;
    gap: 0;
  }

  .best-percentage-container {
    position: relative;
    background-color: #e6f0f8;
    padding: 20px;
    border-radius: 16px;
  }

  .best-percentage-heading {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .point-card {
    width: 100%;
    border-bottom: 1px solid #a3bdd2;
    margin: 0px;
    padding: 30px 0;
    height: auto;
  }

  .best-percentage-container::before,
  .best-percentage-container::after {
    display: none;
  }
}

@media (max-width: 820px) {
  .chart-section {
    padding: 24px 20px;
    margin: 20px auto 60px;
  }
}

/***************** ICSE Result CSS ******************/

.best-score-icse {
  width: 100%;
  margin: 80px 0;
}
.best-score-icse h2 {
  color: #023f6a;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 140%; /* 44.8px */
}
.best-score-icse-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.result-cards-content {
  width: 100%;
  margin: 80px 0;
}
.result-card-heading {
  color: #023f6a;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 10px;
}
.result-number-cards {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 32px;
}
.result-card-para {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 18px;
  line-height: 160%; /* 28.8px */
}
.number-card {
  padding: 46px 74px;
  background-color: #03489f;
  border-radius: 20px;
  height: 227px;
}
.number-card p {
  color: #fff;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 32px;
  line-height: 140%;
}
.best-score-icse-img {
  width: 50%;
}
.best-score-icse-img img {
  width: 100%;
  height: 398px;
  object-fit: cover;
  border-radius: 20px;
}
.best-score-icse-cards-container {
  width: 47%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.best-score-icse-cards {
  width: 47%;
  border-radius: 16px;
  padding: 38px 73px;
  background-color: #e6f0f8;
  text-align: center;
}
.score-heading {
  color: var(--Blue-400, #00243d);
  font-family: "Playfair Display";
  font-size: 24px;
  line-height: 140%; /* 33.6px */
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(207, 200, 200, 0.753);
}
.score-number {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 40px;
  font-weight: 600;
  padding-top: 12px;
  line-height: 120%;
}

.subject-marks-icse {
  width: 100%;
  padding: 40px;
  background-color: #def4e2;
  border-radius: 20px;
  margin-bottom: 80px;
}

.subject-marks-icse-heading {
  text-align: center;
  color: #2c3e50;
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: 400;
}

.tables-wrapper-icse {
  display: flex;
  gap: 30px;
  justify-content: center;
  /* flex-wrap: wrap; */
  height: auto;
}

.table-container-icse {
  background-color: white;
  border: 2px solid #5cb85c;
  border-radius: 15px;
  flex: 1;
  width: 48%;
  height: auto;
}
.table-container-icse-2 {
  background-color: white;
  border: 2px solid #5cb85c;
  border-radius: 15px;
  flex: 1;
  width: 48%;
  height: auto;
}

.tables-wrapper-icse table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.tables-wrapper-icse th {
  color: var(--Green-200, #1fb53b);
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 28.8px */
  padding: 20px 0;
  border-bottom: 2px solid #5cb85c;
}

.tables-wrapper-icse td {
  width: 50%;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 20px;
  font-style: normal;
}

.tables-wrapper-icse tr:last-child td {
  border-bottom: none;
}

.tables-wrapper-icse tr td:first-child {
  border-right: 1px solid #1fb53b;
}

.tables-wrapper-icse th:first-child {
  border-right: 1px solid #1fb53b;
}

.tables-wrapper-icse td:first-child {
  font-weight: 500;
}

.tables-wrapper-icse td:last-child {
  text-align: center;
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 20px;
}

/* Chart Section */
.icse-chart-section {
  margin: 20px auto 80px;
  background: #e6f0f8;
  padding: 60px 40px;
  border-radius: 20px;
}
.icse-chart-h2 h2 {
  color: #00243d;
  font-family: "Playfair Display";
  padding: 0 40px 40px;
  font-weight: 500;
  font-size: 32px;
  line-height: 140%; /* 44.8px */
  max-width: 592px;
}
.chart-header {
  text-align: center;
  /* margin-bottom: 40px; */
}

.chart-header h1 {
  color: #00243d;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 140%;
}

.chart-header .subtitle {
  color: #00243d;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 28.8px */
}

.chart-wrapper {
  position: relative;
  height: 450px;
  width: 100%;
  margin-top: 20px;
}

/* Subject Comparison Chart Section */
.comparison-chart-section {
  margin: 80px auto;
}
.comparison-chart-container {
  width: 100%;
  background: #e6f0f8;
  padding: 60px 40px;
  border-radius: 20px;
}

.icse-comparison-chart-header {
  text-align: center;
  margin-bottom: 40px;
}

.icse-comparison-chart-header h1 {
  color: #00243d;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
}

.icse-comparison-chart-header .subtitle {
  color: #00243d;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 500;
  line-height: 160%;
  margin-top: 10px;
}

.comparison-chart-wrapper {
  position: relative;
  height: 500px;
  width: 100%;
  margin-top: 20px;
}
.note {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 16px;
  margin-top: 20px;
}
.mob-para {
  display: none;
  color: #00243d;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.comparison-chart-wrapper {
  position: relative;
  height: 450px;
  width: 100%;
  margin-top: 20px;
  width: 100%;
  overflow-x: auto; /* enable horizontal scroll */
  overflow-y: hidden;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.comparison-chart-wrapper canvas {
  min-width: 600px; /* chart minimum width so scrolling appears */
}

@media (max-width: 480px) {
  .comparison-chart-container {
    padding: 30px 15px;
  }

  
  .comparison-chart-wrapper {
    height: 350px;
  }
  .comparison-chart-section {
    margin-top: 0px;
    margin-bottom: 40px;
  }

  .best-score-cards {
    width: 100%;
  }
  .subject-marks-icse-heading {
    font-size: 24px;
  }
  .table-container-icse {
    font-size: 16px;
  }
  .table-container-icse td {
    font-size: 16px;
  }
  .chart-h2 h2 {
    font-size: 20px;
    padding: 0 0 20px;
  }
  .chart-header {
    display: none;
  }
  .tables-wrapper-icse {
    width: 100%;
    overflow-x: scroll;
    justify-content: start;
    gap: 15px;
  }
  
  .subject-marks-icse {
    margin-bottom: 60px;
  }
  .mob-para {
    display: block;
    font-size: 16px;
  }
  .subtitle {
    display: none;
  }
  .note {
    font-size: 16px;
  }
  .tables-wrapper-icse{
    min-width: 900px;
  }
  .table-main-icse{
    overflow: scroll;
  }

  .table-container-icse th {
    font-size: 16px;
  }

  .table-container-icse-2 th {
    font-size: 16px;
  }
  
}

@media (max-width: 768px) {
  .container {
    padding: 20px;
  }

  h1 {
    font-size: 24px;
  }

  .tables-wrapper-icse {
    flex-direction: row;
  }

  .table-container-icse {
    max-width: 100%;
  }
  .icse-chart-section .chart-wrapper {
    height: 350px;
  }
  .comparison-chart-container {
    padding: 40px 20px;
    margin: 24px auto;
  }

  .comparison-chart-header h1 {
    font-size: 24px;
  }

  .comparison-chart-header .subtitle {
    font-size: 16px;
  }

  .comparison-chart-wrapper {
    height: 400px;
  }
  .best-score-icse h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .score-heading {
    font-size: 20px;
  }
  .score-number {
    font-size: 30px;
  }
  .subject-marks-icse {
    padding: 42px 16px 16px;
  }
  .table-container-icse,
  .table-container-2 {
    width: 100%;
    height: 100%;
  }

  .comparative-chart-container{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* Chart container */
  .chart-container {
    position: relative;
    height: 400px;
    min-width: 100%; /* Full width on desktop */
  }

  /* Mobile: Make chart scrollable */
  .chart-container {
    min-width: 600px; /* Force minimum width on mobile to enable scroll */
  }

  /* Optional: Custom scrollbar styling */
  .chart-wrapper::-webkit-scrollbar {
    height: 2px;
  }

  .chart-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .chart-wrapper::-webkit-scrollbar-thumb {
    background: #e89210;
    border-radius: 10px;
  }
  .comparative-chart-container .chart-wrapper-one::-webkit-scrollbar-thumb {
    background: #d1dee8;
    border-radius: 10px;
  }

}

@media (max-width: 1294px) {
  .best-score-icse-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .best-score-img {
    width: 100%;
    margin-bottom: 14px;
  }

  .best-score-icse-cards-container {
    width: 100%;
  }
}

/* * * Media Query */
@media (max-width: 1024px) {
  .best-score-icse-wrapper {
    flex-wrap: wrap;
  }
  .best-score-img {
    width: 100%;
    margin-bottom: 14px;
  }
  .best-score-icse-cards-container {
    width: 100%;
    justify-content: space-between;
    gap: 20px;
  }
  .best-score-cards {
    width: 48%;
  }
  .number-card p {
    font-size: 24px;
  }
  .table-container-icse, .table-container-icse-2{
    height: auto;
  }
}

@media (max-width: 820px) {
  .result-content {
    width: 100%;
  }

  .best-score-icse-img {
    width: 100%;
  }
  .best-score-icse-cards {
    width: 100%;
  }
  .best-score-img img {
    height: 224px;
    border-radius: 20px;
  }
  .result-number-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .number-card {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .number-card p {
    font-size: 24px;
  }
  .result-card-heading {
    font-size: 24px;
  }
  .result-card-para {
    font-size: 16px;
  }
  .result-cards-content {
    margin: 40px 0;
  }
  .best-score-icse {
    margin: 0px 0 60px;
  }

  .best-score-icse-cards-container {
    gap: 14px;
  }

  .icse-chart-section {
    padding: 24px 20px;
    margin: 20px auto 60px;
  }
}

/****************** IGCSE Result CSS ******************/

.igcse-result-wrapper {
  width: 100%;
  margin: 60px 0;
}
.igcse-result-container {
  width: 100%;
}
.igcse-card-grade {
  width: 100%;
  border-radius: 16px;
  padding: 42px 20px;
  background: var(--Green-100, #def4e2);
  text-align: center;
  margin-top: 26px;
}
.igcse-result-wrapper .igcse-heading {
  color: #023f6a;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 140%; /* 44.8px */
}
.igcse-result-wrapper .igcse-subtitle {
  color: #023f6a;
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 500;
  line-height: 160%; /* 28.8px */
}
.igcse-card-grade h1 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 12px;
}
.igcse-card-grade p {
  color: #00243d;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
}

.down-msg {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  line-height: 160%;
  margin: 10px 0;
}

.table-container-igcse {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  margin-bottom: 80px;
}
.table-head {
  color: #00243d;
  margin-bottom: 26px;
  font-family: "Playfair Display";
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  line-height: 140%; /* 44.8px */
}
.table-container-igcse table {
  border: 1px solid #1fb53b;
  border-radius: 20px;
  width: 100%;
  border-collapse: separate; /* needed for border-radius */
  border-spacing: 0; /* removes the unwanted gap */
  border-radius: 20px; /* rounded corners */
  overflow: hidden;
  height: auto;
}
.table-container-igcse.table-igcse-1 {
  width: 100%;
  height: 445px;
}
.table-container-igcse .table-igcse-2 {
  width: 100%;
  height: 391px;
}
.table-container-igcse th {
  color: #1fb53b;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 500;
  line-height: 160%; /* 28.8px */
}
.table-container-igcse th,
.table-container-igcse td {
  padding: 30px 40px;
  font-family: "Open Sans";
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid #1fb53b;
  overflow: hidden;
}
.table-container-igcse td{
  font-family: "Playfair Display";
}
.table-container-igcse th,
.table-container-igcse td {
  width: 50%;
  border-left: 1px solid #1fb53b;
}

.table-container-igcse td:first-child,
.table-container-igcse th:first-child {
  border-left: none;
}
.border-none {
  border-bottom: none;
}

/* Chart Section */

.igcse-chart-section {
  margin: 20px auto 80px;
  background: #fff6e7;
  padding: 60px 40px;
  border-radius: 20px;
}
.comparative-chart-container {
  margin-bottom: 80px;
}
.igcse-comparative-chart {
  background-color: #e6f0f8;
  padding: 60px 40px;
  border-radius: 20px;
  margin-bottom: 28px;
}
.igcse-chart-h2 {
  padding: 0 40px 40px;
}
.igcse-chart-h2 h2 {
  color: #00243d;
  font-family: "Playfair Display";
  font-weight: 500;
  font-size: 32px;
  line-height: 140%; /* 44.8px */
  max-width: 592px;
}
.chart-h2 p {
}
.chart-header {
  text-align: center;
  /* margin-bottom: 40px; */
}

.chart-header .subtitle {
  color: #00243d;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 28.8px */
}

.chart-wrapper{
  height: 400px;
}
.chart-container,.comparative,.resultsChart{
  height: 100%;
}


@media (max-width: 480px) {
  .igcse-heading {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .igcse-subtitle {
    font-size: 16px;
  }
  .igcse-card-grade {
    margin-top: 20px;
  }
  .igcse-card-grade h1 {
    font-size: 30px;
  }
  .igcse-card-grade p {
    font-size: 20px;
  }
  .table-head {
    font-size: 24px;
  }
  .table-container{
    margin-bottom: 60px;
  }
}

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

  .chart-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* Chart container */
  .chart-container {
    position: relative;
    height: 400px;
    min-width: 100%; /* Full width on desktop */
  }

  /* Mobile: Make chart scrollable */
  .chart-container {
    min-width: 600px; /* Force minimum width on mobile to enable scroll */
  }

  /* Optional: Custom scrollbar styling */
  .chart-wrapper::-webkit-scrollbar {
    height: 2px;
  }

  .chart-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .chart-wrapper::-webkit-scrollbar-thumb {
    background: #e89210;
    border-radius: 10px;
  }
  .comparative-chart-container .chart-wrapper-one::-webkit-scrollbar-thumb {
    background: #d1dee8;
    border-radius: 10px;
  }

  .chart-wrapper::-webkit-scrollbar-thumb:hover {
    background: #e89210;
  }
  .igcse-chart-h2 {
    padding: 0;
  }
  .igcse-chart-h2 h2 {
    font-size: 24px;
  }
  .igcse-chart-h2 p {
    font-size: 12px;
  }
}

@media (max-width: 820px) {
  .igcse-chart-section {
    padding: 24px 20px;
    margin: 20px auto 60px;
  }
  .table-container-igcse {
    flex-direction: column;
    padding: 0;
  }
  .table-igcse-1,
  .table-igcse-2 {
    height: auto;
  }
  .table-container-igcse th,
  .table-container-igcse td {
    padding: 15px 20px;
    font-family: "Playfair Display";
    font-size: 16px;
    font-weight: 500;
    line-height: 160%; /* 25.6px */
  }
}

/********************** Result Listing CSS ********************/

.result-section {
  width: 100%;
  margin: 80px 0;
}
.result-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.result-content {
  width: 48%;
}

.result-img-container img {
  width: 100%;
  height: 532px;
  border-radius: 20px;
  object-fit: cover;
}

.result-img-container {
  width: 48%;
}
.result-listing-pages{
  text-decoration: none;
}
.result-content-h3 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 10px;
}
.result-type {
  padding: 32px 30px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cbcbcb;
  cursor: pointer;
  transition: all 0.2s;
}
.result-type:hover {
  background-color: #fff6e7;
  border-bottom: 1px solid #fca312;
}
.result-type:hover .result-content-h3 {
  color: #03489f;
}
.resultarrow {
  transition: fill 0.3s, stroke 0.3s;
}

.result-type:hover .resultarrow {
  stroke: #03489f;
}

/* * * Media Query */
@media (max-width: 1024px) {
}

@media (max-width: 820px) {
  .result-content {
    width: 100%;
  }
  .result-types {
    width: 100%;
  }
  .result-img-container {
    width: 100%;
  }
  .result-content {
    width: 100%;
  }
  .result-img-container img {
    height: 224px;
    border-radius: 20px;
  }
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
  .result-section {
    margin: 60px 0;
  }
  .result-content-h3 {
    font-size: 16px;
  }
  .result-content {
    margin-top: 20px;
  }
  .result {
    width: 100%;
    margin-bottom: 24px;
  }
  .result-type {
    padding: 18px 18px;
  }
}


/***************** Career Inner CSS ******************/

.financial-section {
  width: 100%;
  margin: 80px 0;
}
.financial-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.financial-content {
  width: 48%;
}

.financial-content h2 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 32px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 10px;
}
.financial-description {
  color: #00243d;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
}
.financial-benefits {
  margin-top: 24px;
}
.staff-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 10px 0;
}
.sunicon {
  margin-top: 3.5px;
}
.financial-list {
}
.financialpoints {
  font-size: 14px;
  margin-left: 18px;
  margin-top: 12px;
}
.financial-apply {
  padding: 30px 40px;
  border-radius: 20px;
  background: #e6f0f8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
}
.financial-apply-btn {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #03489f;
  background: var(--Blue-300, #03489f);
  padding: 10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.financial-apply-p {
  width: 50%;
  color: #00243d;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.download {
  color: #fff;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  margin-left: 15px;
}
.financial-img-container {
  width: 48%;
  padding: 34px;
  border-radius: 20px;
  background: #fff6e7;
}
.financial-img-item-wrapper {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.financial-img-h2 {
  color: #00243d;
  font-family: "Playfair Display";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.financial-img-item {
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
}
.financial-img {
  position: relative;
  width: 75px;
  height: 75px;
  z-index: 1;
}
.financial-img-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 75px;
  left: 35px;
  width: 2px;
  height: 78px;
  background-color: #fca312;
  border-radius: 20px;
}

.financial-img-item:last-child::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 32px;
  z-index: 1;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid orange; /* Triangle color and height */
}
.financial-img-item-para {
  max-width: 347px;
  color: #00243d;
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 500;
  line-height: 160%;
  text-decoration: none;
}
.financial-email:hover {
  text-decoration: underline;
}
.financial-img-item:first-child {
  margin-top: 24px;
}

/* * * Media Query */
@media (max-width: 1024px) {
  .financial-apply {
    padding: 20px 20px;
  }
  .financial-apply-p {
    font-size: 16px;
    width: 60%;
  } 
  .financial-img-item:not(:last-child)::before {
    top: 79px;
    height: 78px;
  }
  .financial-img-item:nth-child(2)::before {
    top: 73px;
    height: 67px;
  }
}

@media (max-width: 820px) {
  .financial-content {
    width: 100%;
    margin-bottom: 40px;
  }
  .financial-img-container {
    width: 100%;
  }
  .financial-section {
    margin: 60px 0;
  }
  .financial-img-item:not(:last-child)::before {
    top: 74px;
    height: 78px;
  }
  .financial-img-item:nth-child(2)::before {
    top: 75px;
    height: 74px;
  }
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
  .financial-section {
    margin: 40px 0;
  }
  .financial-content h2 {
    font-size: 24px;
  }
  .financial-content {
    width: 100%;
    margin-bottom: 24px;
  }
  .financial-apply {
    margin-top: 60px;
  }
  .financial-apply-p {
    width: 100%;
  }
  .financial-apply-btn {
    width: 100%;
    padding: 10px 20px;
    gap: 5px;
  }
  .financial-img-h2 {
    font-size: 20px;
  }
  .financial-img-item-para {
    font-size: 16px;
  }
  .financial-img-item {
    gap: 16px;
  }
  .financial-img-container {
    padding: 24px;
  }
  .financial-img {
    width: 48px;
    height: 48px;
  }
  .financial-img-item-wrapper {
    height: 300px;
  }
  .financial-img-item:not(:last-child)::before {
    top: 75px;
    left: 22px;

    height: 63px;
  }
  .financial-img-item:not(:last-child)::before {
    top: 60px;
    height: 68px;
  }
  .financial-img-item:nth-child(2)::before {
    top: 48px;
    height: 54px;
  }
  .financial-img-item:last-child::after {
    top: -4px;
    left: 19px;
    border-top: 6px solid orange; /* Adjusted triangle size */
  }

  .download {
    font-weight: 100;
  }
}

.desktop-navigation::-webkit-scrollbar {
    width: 4px;
}
.desktop-navigation::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.desktop-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.login-details form.user-login-form {
  margin: 20px auto;
  width: 500px;
  max-width: 95%;
}

.login-details .messages,
.login-details [data-drupal-messages] {
  margin: 20px auto;
  width: 500px;
  max-width: 95%;
}

.login-details .messages--error,
.login-details .messages-error {
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.login-details form.user-login-form .form-text {
    height: 40px;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
    display: flex;
    border: 1px solid #ccc;
    padding: 0 10px;
}

.login-details form.user-login-form .form-text {
  margin-top: .25rem;
  font-size: .875em;
  color: rgb(33 37 41 / 75%);
}

.login-details form.user-login-form .form-item {
  margin-bottom: 24px;
}

.login-details form.user-login-form label {
  font-weight: 600;
}

.login-details form.user-login-form label {
  margin-bottom: .25rem;
  font-weight: 500;
}

.login-details form.user-login-form .form-actions input {
    border: 1px solid #208cdb;
    color: #ffff;
}

.login-details form.user-login-form [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
.login-details form.user-login-form .button {
    background-color: #208cdb;
    text-align: center;
    border-radius: 10vw;
    padding: .625rem 1.5rem;
    font-size: .875rem;
    font-weight: 400;
    transition-property: background-color;
}