/*!------------------------------------------------------------------
[MAIN STYLESHEET]

PROJECT:	Coding Crusaders
VERSION:	Version Number
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]
-------------------------------------------------------------------*/
/*  scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/*  typography */
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700|Roboto:400");

body {
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  color: #4c4c4c;
}

p, .paragraph {
  font-weight: 400;
  color: #4c4c4c;
  font-size: 15px;
  line-height: 1.8;
  font-family: "Roboto", sans-serif;
}
p-lg, .paragraph-lg {
  font-size: 22px;
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-family: "Playfair Display", serif;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 80px;
}
@media (max-width: 991px) {
  h1, .h1 {
    font-size: 65px;
  }
}

h2, .h2 {
  font-size: 60px;
}
@media (max-width: 991px) {
  h2, .h2 {
    font-size: 50px;
  }
}

h3, .h3 {
  font-size: 40px;
}

h4, .h4 {
  font-size: 22px;
}

h5, .h5 {
  font-size: 18px;
}

h6, .h6 {
  font-size: 14px;
}

/* Button style */
.button {
  font-size: 22px;
  font-family: "Playfair Display", serif;
  text-transform: capitalize;
  padding: 16px 44px;
  border-radius: 5px;
  font-weight: 600;
  border: 0;
  position: relative;
  z-index: 1;
  transition: 0.2s ease;
}
.button:focus {
  outline: 0;
  box-shadow: none !important;
}
.button:active {
  box-shadow: none;
}
.button.is-small {
  font-size: 15px;
  padding: 10px 30px;
}
.button.is-extra-small {
  padding: 5px 10px;
  font-size: 15px;
}
.button.is-primary {
  background-color: #2163ee;
  color: #fff;
}
.button.is-primary:active {
  background-color: #542cb7 !important;
}
.button.is-primary:hover {
  background-color: #2163ee;
}
.button.is-primary.focus, .button.is-primary.is-active {
  background-color: #2163ee !important;
  box-shadow: none !important;
}
.button.is-link {
  background-color: transparent;
  color: #41228e;
  font-weight: bold;
  padding-left: 0;
  padding-right: 0;
}
.button.is-link:active, .button.is-link:hover {
  color: #41228e;
  background: transparent;
}

body {
  background-color: #fff;
  overflow-x: hidden;
}

::-moz-selection {
  background: #542cb7;
  color: #fff;
}

::selection {
  background: #542cb7;
  color: #fff;
}

/* preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol,
ul {
  list-style-type: none;
  margin: 0px;
}

img {
  vertical-align: middle;
  border: 0;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a,
button,
select {
  cursor: pointer;
  transition: 0.2s ease;
}
a:focus,
button:focus,
select:focus {
  outline: 0;
}

a.text-dark:hover {
  color: #41228e !important;
}

a:hover {
  color: #41228e;
}

.slick-slide {
  outline: 0;
}

.section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.section-title {
  margin-bottom: 80px;
  font-family: "Playfair Display", serif;
}
.section.is-small {
  padding-top: 40px;
  padding-bottom: 40px;
}

.has-background-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* overlay */
.overlay {
  position: relative;
}
.overlay::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

.outline-0 {
  outline: 0 !important;
}

.d-unset {
  display: unset !important;
}

.has-background-primary {
  background: #41228e !important;
}

.has-background-gray {
  background: #eaeaea !important;
}

.has-text-primary {
  color: #41228e !important;
}

.has-text-color {
  color: #4c4c4c;
}

.has-text-dark {
  color: #000 !important;
}

.has-text-light {
  color: #999999 !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

.mr-20 {
  margin-right: 20px;
}

.zindex-1 {
  z-index: 1;
}

.rounded-lg {
  border-radius: 15px;
}

.overflow-hidden {
  overflow: hidden;
}

.font-secondary {
  font-family: "Playfair Display", serif !important;
}

.font-tertiary {
  font-family: "Playfair Display", serif !important;
}

.shadow {
  box-shadow: 0px 18px 39.1px 6.9px rgba(224, 241, 255, 0.34) !important;
}

.bg-dark {
  background-color: #222222 !important;
}

/* icon */
.icon {
  font-size: 45px;
  height: unset;
  width: unset;
}

.icon-bg {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.icon-light {
  color: #c8d5ef;
}

/* /icon */
/* slick slider */
.slick-dots {
  text-align: center;
  padding-left: 0;
}
.slick-dots li {
  display: inline-block;
  margin: 2px;
}
.slick-dots li.slick-active button {
  background: #fff;
  width: 25px;
}
.slick-dots li button {
  height: 6px;
  width: 12px;
  background: rgba(255, 255, 255, 0.5);
  color: transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.2s ease;
  border: 0;
}

/* /slick slider */
/* form */
.input {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #c7c7c7;
  height: 60px;
  box-shadow: none;
}
.input:focus {
  border-color: #41228e;
  outline: 0;
  box-shadow: none !important;
}

textarea.input {
  height: 120px;
}

/* /form */
/* card */
.card {
  border: 0;
}
.card-header {
  border: 0;
}
.card-footer {
  border: 0;
}
.card.hover-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s;
}

.card.hover-card:hover {
  transform: scale(1.03);
}

.card.hover-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 1rem;
  text-align: center;
}

.card-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.5rem;
}


/* /card */
.list-hero-social {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  border: none;
  width: 40px;
  margin: 30px 0 0 50px;
}
.list-hero-social .list-item {
  border: none;
  background: transparent;
}

.is-rounded {
  border-radius: 50%;
}

.image.is-full {
  width: 100%;
}

.has-border-top {
  border-top: 1px solid #c7c7c7;
}

.has-border-bottom {
  border-bottom: 1px solid #c7c7c7;
}

.is-border-dark {
  border-color: #343a40 !important;
}

.is-border-white {
  border-color: #fff !important;
}

.has-padding-top-15 {
  padding-top: 15px;
}

.has-padding-20 {
  padding: 20px;
}

.buttons .button input {
  width: 0;
  visibility: hidden;
}

.navbar {
  padding: 15px 50px; /* thinner padding */
  transition: 0.3s ease;
}
.navbar.is-dark {
  background-color: #2163ee !important;
}

.navbar.nav-bg {
  background-color: #2163ee !important;
  padding: 10px 50px;
}
@media (max-width: 991px) {
  .navbar.nav-bg {
    padding: 15px 20px;
    background-color: #2163ee !important;
  }
}
@media (max-width: 991px) {
  .navbar {
    padding: 20px;
    background: #ABBCFF !important;
    background-color: #2163ee !important;
  }
}
/* Mobile menu background and text color */
.navbar-menu {
  background-color: #2163ee; /* menu background */
}

.navbar-menu .navbar-item {
  color: #fff; /* text color */
}

/* Optional: make hover lighter */
.navbar-menu .navbar-item:hover {
  background-color: #1a52c7;
  color: #fff;
}

/* Only apply on mobile / small screens */
@media (max-width: 1023px) {
  .navbar-menu {
    background-color: #2163ee;
  }
}

.navbar-item {
  text-transform: uppercase;
}
.navbar-item img {
  max-height: 70px; /* adjust logo height */
  width: auto;      /* keeps aspect ratio */
}
.navbar-item:hover {
  background-color: transparent !important;
}
/* Reduce navbar padding to allow bigger logo */
.navbar-brand {
  padding: -0.2rem 1rem; /* adjust top/bottom to make navbar shorter if needed */
}

/* Make logo bigger inside navbar */
.navbar-logo {
  max-height: 80px; /* logo height */
  width: auto;      /* keep aspect ratio */
  display: block;
}

/* Optional: adjust the link container for vertical centering */
.navbar-item.logo-container {
  display: flex;
  align-items: center; /* vertically center logo */
  padding: 0;          /* remove extra padding */
}

/* HERO SECTION */
.hero-area {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: flex-start;      /* align from top */
  overflow: hidden;
  padding: 120px 0 60px 20px;   /* top padding to avoid navbar */
  background-color: #fff !important;
  color: #000;
}

/* Columns: text takes available space */
.hero-area .columns {
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;  /* text on left, promo image outside container */
}

.hero-area .column {
  max-width: 60%;               /* text column width */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-area h1 {
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.1;
  margin: 0 0 20px 0;
  color: #000 !important;
  position: relative;
  z-index: 2;
  text-align: left;
}

.hero-area p {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.4;
  color: #000 !important;
  position: relative;
  z-index: 2;
  text-align: left;
}

/* PROMO IMAGE */
#promo-image {
  position: absolute;
  bottom: 0;
  right: 0;                    /* flush to right edge */
  width: auto;
  max-width: 600px;            /* consistent size */
  height: auto;
  border-radius: 8px;
  display: block;
}

/* RESPONSIVE: medium screens stack image below text */
@media (max-width: 991px) {
  .hero-area {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 150px 20px 80px;
  }

  .hero-area .column {
    max-width: 100%;
  }

  #promo-image {
    position: relative;
    margin-top: 40px;
    width: 100%;
    max-width: 600px;
  }
}

/* RESPONSIVE: small screens tweak spacing */
@media (max-width: 600px) {
  .hero-area {
    padding: 140px 20px 60px;
  }

  #promo-image {
    max-width: 500px;
    margin-top: 30px;
  }
}


.layer {
  position: absolute;
  z-index: 1;
}

#l1 {
  bottom: 0;
  left: 0;
}

#l2 {
  top: 190px;
  left: -250px;
}

#l3 {
  top: 200px;
  left: 40%;
}

#l4 {
  top: 200px;
  right: 40%;
}

#l5 {
  position: absolute;
  top: 25%;             /* moves dynamically relative to container height */
  right: 35%;            /* distance from right edge, responsive */
  width: 7.5vw;           /* width scales with viewport */
  max-width: 150px;     /* cap the maximum size */
  height: auto;         /* preserves aspect ratio */
  filter: brightness(0.4) contrast(2) saturate(60%) hue-rotate(200deg); /* makes image black */
}

#l6 {
  position: absolute;
  bottom: -10px;       /* distance from bottom */
  left: 10%;          /* 10% from the right edge, dynamic */
  width: 9vw;          /* width scales with viewport */
  max-width: 120px;    /* caps max size */
  height: auto;        /* preserves aspect ratio */
}

#l7 {
  bottom: 100px;
  left: 20%;
}

#l8 {
  bottom: 140px;
  right: 45%;
  width: 40px;
}

#l9 {
  bottom: 100px;
  right: -10px;
}

.layer-bg.is-full {
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  z-index: 1;
  overflow: hidden;
}

.layer-bg.is-full img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes sure the background fills the area */
  filter: invert(76%) sepia(99%) saturate(750%) hue-rotate(1deg) brightness(1.05) contrast(1);
}

/* PROMO IMAGE COLUMN */
.hero-area .column.is-4-desktop {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* push promo image to bottom */
  height: 100%;
}

/* PROMO IMAGE */
#promo-image {
  align-self: flex-end;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: auto;
  margin-bottom: -100px; /* flush with bottom of hero area */
}

/* Responsive fix for smaller screens */
@media (max-width: 768px) {
  .hero-area {
    min-height: 500px;
  }

  #promo-image {
    max-width: 70%;
    align-self: center; /* center image on small screens */
  }
}

/* skills */
.progress-wrapper {
  height: 130px;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 100%;
  height: 100%;
}
.wave::before, .wave::after {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  bottom: 0;
  left: 50%;
  background-color: rgba(33, 99, 238, 0.2);
  border-radius: 45%;
  transform: translateX(-50%) rotate(0);
  -webkit-animation: rotate 6s linear infinite;
          animation: rotate 6s linear infinite;
  z-index: 10;
}
.wave::after {
  border-radius: 47%;
  background-color: rgba(33, 99, 238, 0.35);
  transform: translateX(-50%) rotate(0);
  -webkit-animation: rotate 10s linear -5s infinite;
          animation: rotate 10s linear -5s infinite;
  z-index: 20;
}


@-webkit-keyframes rotate {
  50% {
    transform: translateX(-50%) rotate(180deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes rotate {
  50% {
    transform: translateX(-50%) rotate(180deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
/* /skills */
/* education */
.edu-bg-image {
  position: absolute;
  left: 0;
  top: -200px;
}

/* Features & Collabs */
/* FEATURES & COLLABS */
.features-section {
  position: relative;
  padding: 80px 0;
  background: #fff;
}

/* Slider container */
.features-slider {
  display: flex;
  justify-content: center;
  gap: 40px !important; /* ✅ more space between feature cards */
  position: relative;
  flex-wrap: nowrap; /* no wrapping */
  overflow-x: auto; /* ✅ horizontal scroll */
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* ✅ smooth snap scrolling */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* hide scrollbar (Firefox) */
}
.features-slider::-webkit-scrollbar {
  display: none; /* hide scrollbar (Chrome/Safari) */
}

/* Feature card */
.feature-box {
  background: #f8f9ff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  flex: 0 0 30%; /* desktop: 3 per row */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 350px; /* ✅ ensure some height */
}
.feature-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.feature-box img {
  width: 100%;
  height: 180px; /* ✅ slightly taller image */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.feature-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #597DFF;
}

.feature-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.4;
}

/* Progress bar */
.features-progress-bar {
  height: 4px;
  background: #ddd;
  width: 80%;
  margin: 10px auto 0;
  border-radius: 2px;
  overflow: hidden;
}

.features-progress {
  height: 100%;
  width: 0%;
  background: #597DFF;
  transition: width 0.5s;
}

/* ✅ Responsive: horizontal scroll on medium screens */
@media (max-width: 991px) {
  .features-slider {
    justify-content: flex-start;
    padding-left: 20px;
    gap: 24px; 
  }

  .feature-box {
    flex: 0 0 70%;  /* ✅ smaller width */
    max-width: 60%;
    min-height: 480px; /* ✅ taller cards */
  }

  .feature-box img {
    height: 200px; /* ✅ taller images for balance */
  }
}

/* ✅ Responsive: very small screens */
@media (max-width: 600px) {
  .feature-box {
    flex: 0 0 85%;
    max-width: 70%;
    min-height: 480px; /* ✅ taller for portrait shape */
  }

  .feature-box img {
    height: 220px;
  }
}
/* Features & Collabs */

/* Classes */
#classes {
  background-color: #b4dbff;
}

/* Card wrapper */
.hover-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 220px; /* fixed consistent height for all images */
}

.hover-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  max-width: 1300px;
  padding: 20px;
  box-sizing: border-box;
}

.card.hover-card {
  width: 320px; /* slightly wider */
  min-height: 460px; /* ensure all cards have equal height */
  flex-shrink: 0;
  text-align: center;
  transition: transform 0.2s ease; /* keep hover scale */
}

/* Card image */
.hover-wrapper img.is-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.hover-wrapper:hover img.is-full {
  transform: scale(1.05);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  max-width: 1300px;
  padding: 20px;
  box-sizing: border-box;
}

/* Individual class card */
.class-card {
  width: 320px;
  min-height: 400px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.class-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Uniform image size */
.class-card .class-image {
  width: 100%;
  height: 170px; /* FIXED HEIGHT */
  object-fit: cover; /* ensures all images are cropped nicely */
  display: block;
  flex-shrink: 0;
}

/* Card content */
.class-content {
  padding: 1.2rem 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.class-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #222;
  margin-bottom: 0.6rem;
}

.class-desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.8rem;
}

.class-info {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.4;
}

/* Hover animation for images */
.class-card:hover .class-image {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
/* classes*/

/* REVIEWS SECTION */
.testimonial-content strong {
  color: #2bfdff;
  font-weight: normal;
}

.testimonial-bg-shapes .container {
  position: relative;
  z-index: 1;
}
.testimonial-bg-shapes .bg-map {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.testimonial-bg-shapes .bg-shape-1 {
  position: absolute;
  left: 100px;
  top: -50px;
}
.testimonial-bg-shapes .bg-shape-2 {
  position: absolute;
  right: 150px;
  top: 50px;
}
.testimonial-bg-shapes .bg-shape-3 {
  position: absolute;
  right: 50px;
  top: 200px;
}
.testimonial-bg-shapes .bg-shape-4 {
  position: absolute;
  left: 100px;
  bottom: 200px;
}
.testimonial-bg-shapes .bg-shape-5 {
  position: absolute;
  right: 200px;
  bottom: -50px;
}
#reviews.section {
  background: #2163ee !important;
  color: #fff;
}
#reviews .section-title {
  color: #fff;
}
.testimonial-content p.has-text-white.mb-20 {
  font-size: 1rem; /* change to whatever size you want */
}


/* --- TEAM SECTION --- */
.team-section {
  text-align: center;
  padding: 60px 20px;
  background: #b4dbff !important;
  color: #fff;
}

.team-section .section-subtitle {
  font-size: 1rem;
  color: #666;
  margin-top: -80px;
  margin-bottom: 20px;
}

.team-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  justify-items: center;
  align-items: stretch; /* ensures cards stretch equally */
  max-width: 1000px;
  margin: 0 auto;
}

.team-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 300px;

  display: flex;
  flex-direction: column;
  align-items: center; /* center image + text horizontally */
  justify-content: space-between;
  height: 100%;
  text-align: center;
}

.team-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
  align-self: center; /* ensures image stays centered in flex layout */
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.team-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
}

.team-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 5px;
}

.team-role {
  font-size: 0.95rem;
  color: #777;
  margin-bottom: 10px;
  font-style: italic;
}

.team-card p {
  font-size: 0.9rem;
  color: #555;
  margin: 5px 0;
}

.team-linkedin a {
  display: inline-block;
  margin-top: 10px;
  color: #0077b5;
  font-weight: 600;
  text-decoration: none;
}

.team-linkedin a:hover {
  text-decoration: underline;
}
/* --- TEAM SECTION --- */

/* footer */
.footer-section {
  padding-top: 200px;
  background-color: #fecb04 !important;
  color: #1b1b1b;
}

.footer-section .columns {
  justify-content: center; /* center horizontally */
  text-align: center;      /* center text inside each column */
}
.footer-section .column a {
  text-decoration: none;
  color: #1b1b1b;
  transition: color 0.2s;
}
.footer-section .column a:hover {
  color: #174fc7; /* hover color to match theme */
}

.section-on-footer {
  margin-bottom: -250px;
}

/* Footer heading black */
.footer-title {
  color: #000; /* black */
  font-weight: 750;
  font-size: 1.25rem;
}

.footer-subtitle{
  color: #4A4A4A !important; /* dark grey */
  text-decoration: none;
}

.footer-subtitle a:hover {
  color: #174fc7; /* optional hover */
}

.shadow-down {
  position: relative;
}
.shadow-down::before {
  position: absolute;
  content: "";
  box-shadow: 0px 0px 80.75px 14.25px rgba(224, 241, 255, 0.34);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
/* remove default slick arrows style */
/* Slick arrows responsive and centered */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;                     /* center vertically */
  transform: translateY(-50%);  /* adjust to true center */
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  z-index: 10;
  transition: 0.3s;
}

.slick-prev:hover,
.slick-next:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #41228e;
}

/* Position them wider apart (responsive units) */
.slick-prev {
  left: -5vw;   /* 5% of viewport width to the left */
}
.slick-next {
  right: -5vw;  /* 5% of viewport width to the right */
}

/* On small screens, bring arrows closer so they don’t overflow */
@media (max-width: 768px) {
  .slick-prev {
    left: -30px;
  }
  .slick-next {
    right: -30px;
  }
}

/* hide default dots */
.slick-dots {
  display: none !important;
}
/* remove the quote icon under review */
.testimonial-content .ti-quote-right {
  display: none;
}

/* CONTACT US SECTION
/* Ensure form columns behave as we want */
#contactForm {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#contact .section-title {
  margin-bottom: 10px; /* was 80px, now closer */
}
/* Name: full width */
#contactForm .column:nth-child(1) {
  flex: 1 1 100%;
}

/* Email and Whatsapp: side by side */
#contactForm .column:nth-child(2),
#contactForm .column:nth-child(3) {
  flex: 1 1 calc(50% - 10px); /* each half width minus half the gap */
}

/* Message: full width */
#contactForm .column:nth-child(4) {
  flex: 1 1 100%;
}

/* Submit button: full width if needed */
#contactForm .column:nth-child(5) {
  flex: 1 1 100%;
}

/* Responsive: stack columns on mobile */
@media (max-width: 768px) {
  #contactForm .column:nth-child(2),
  #contactForm .column:nth-child(3) {
    flex: 1 1 100%;
  }
}


/* /footer */
.card-lg {
  flex-direction: row-reverse;
  align-items: center;
}
@media (max-width: 991px) {
  .card-lg {
    flex-direction: column;
  }
}

blockquote {
  display: inline-block;
  padding: 10px 20px;
  background: #eaeaea;
  border-left: 2px solid #41228e;
  font-style: italic;
  font-size: 22px;
}

.content * {
  margin-bottom: 20px;
}
.content strong {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: normal;
  color: #000;
  display: inherit;
  line-height: 1.5;
}

.page-title-alt {
  padding: 350px 0 70px;
}

.border-thick {
  border: 10px solid;
}

.drag-lg-top {
  margin-top: -230px;
}
@media (max-width: 991px) {
  .drag-lg-top {
    margin-top: 0;
  }
}

.page-title-alt .container {
  position: relative;
  z-index: 1;
}
.page-title-alt .bg-shape-1 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.page-title-alt .bg-shape-2 {
  position: absolute;
  left: 70px;
  top: 100px;
}
.page-title-alt .bg-shape-3 {
  position: absolute;
  left: 30%;
  top: 50px;
  transform: rotate(180deg);
}
.page-title-alt .bg-shape-4 {
  position: absolute;
  left: 100px;
  bottom: 100px;
}
.page-title-alt .bg-shape-5 {
  position: absolute;
  left: 40%;
  bottom: -25px;
}
.page-title-alt .bg-shape-6 {
  position: absolute;
  bottom: 100px;
  right: -100px;
}

.page-title {
  padding: 250px 0 150px;
}
.page-title .container {
  position: relative;
  z-index: 1;
}
.page-title .bg-shape-1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.page-title .bg-shape-2 {
  position: absolute;
  left: -20px;
  top: -10px;
}
.page-title .bg-shape-3 {
  position: absolute;
  left: 10%;
  top: 100px;
}
.page-title .bg-shape-4 {
  position: absolute;
  left: 50%;
  top: -20px;
}
.page-title .bg-shape-5 {
  position: absolute;
  left: 90px;
  bottom: -50px;
  transform: rotate(180deg);
}
.page-title .bg-shape-6 {
  position: absolute;
  right: 20%;
  bottom: -20px;
}
.page-title .bg-shape-7 {
  position: absolute;
  right: -220px;
  bottom: -100px;
}

.filter-controls li {
  cursor: pointer;
}
.filter-controls li.active {
  font-weight: bold;
}
/*# sourceMappingURL=style.css.map */

/* Classes Calendar Styling */
/* Calendar Styling */
#calendar {
  width: 95%;       /* slightly wider */
  max-width: 1200px;
  height: 600px;    /* adjust to make calendar shorter */
  margin: auto;
  background: linear-gradient(135deg, #f9f9ff, #eef4fb);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.fc {
  font-family: "Poppins", sans-serif;
}

.fc-timegrid-slot {
  height: 50px !important; /* taller slots */
}

.fc-timegrid-slot-label {
  color: #000 !important;      /* black text for visibility */
  font-weight: 500;
  font-size: 14px;
}
/* Calendar toolbar buttons */
.fc .fc-button {
  background: #41228e !important;   /* your theme purple */
  border: none !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 12px;
}
.fc .fc-button:hover {
  background: #5a36b0 !important;
}
.fc-col-header-cell {
  background: #f1f1f9;
  font-weight: 600;
  color: #333;
}

#formModal input,
#formModal textarea {
  color: #000 !important;      /* ensure user-typed text is visible */
}

.fc-event-title, .fc-event-time {
  color: #fff !important;      /* white text against blue event background */
  font-weight: 600;
}

.fc-event {
  background-color: #007bff !important;
  border-radius: 8px;
  font-size: 14px;
  padding: 4px;
  cursor: pointer;
}

.fc-event, .fc-event-dot {
  min-height: 60px !important; /* adjust height as needed */
  line-height: 1.2em;
  white-space: normal; /* allow text to wrap */
  padding: 4px 2px;
  font-size: 0.85rem;
}

.fc-toolbar-title {
  font-size: 22px;
  font-weight: bold;
}

/* Modal visible */
.modal.is-active {
  display: flex;
}

/* General Event Wrapper */
.fc-event {
  border-radius: 10px !important;
  border: none !important;
  padding: 6px 8px !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 🔹 Month & Week (Grid) Views — unified look */
.fc-daygrid-event,
.fc-timegrid-event {
  background-color: #1142ff !important;   /* theme purple */
  color: #fff !important;                 /* white text */
}

/* fix for week view (was showing white on white) */
.fc-timegrid-event .fc-event-main {
  color: #fff !important;
}

/* 🔹 Event title + time text styling */
.cc-event-wrapper {
  display: flex;
  flex-direction: column;
}

.cc-event-title {
  font-size: 13px !important;             /* title larger */
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 1px;
  line-height: 1.2;
}

.cc-event-time {
  font-size: 12px !important;             /* time smaller */
  font-weight: 500;
  color: #dcd3ff !important;              /* soft lilac for contrast */
}

/* -------------------------
   CLEAN LIST VIEW STYLING
-------------------------- */

/* Base state — white background, blue text */
.fc-list-event a {
  background-color: #ffffff !important;
  color: #007bff !important;
  border-radius: 8px !important;
  display: block;
  transition: all 0.25s ease;
  padding: 6px 10px !important;
}

/* Title + time color default */
.fc-list-event-title,
.fc-list-event-time {
  color: #007bff !important;
}

/* Hover — blue background, white + yellow text */
.fc-list-event a:hover {
  background-color: #007bff !important;
  text-decoration: none !important;
}

.fc-list-event a:hover .fc-list-event-title {
  color: #ffffff !important;
}

.fc-list-event a:hover .fc-list-event-time {
  color: #ffeb3b !important;
}

/* Smooth scroll for long list view */
#calendar {
  max-height: 70vh;
  overflow-y: auto;
}

/* --- CLASS.HTML --- */
#classes-debug {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.class-card {
  width: 260px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.class-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.class-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.class-content {
  padding: 1rem;
  text-align: left;
}

.class-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}

.class-desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.class-meta {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.3rem;
}

.detail-container {
  padding: 2rem;
  max-width: 900px;
  margin: auto;
}

.topic-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.trial-btn {
  display: inline-block;
  background: #2a72de;
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

/* --- CLASS.HTML trial & course list --- */
#trial-list,
#course-list {
  list-style: none; /* removes bullets */
  padding-left: 0;  /* optional, removes default indentation */
}
/* Reduce the top padding on the entire section container */
.content-block {
    /* Use a very small padding-top value to bring content close to the header */
    padding-top: 1rem !important; /* Smaller space above the title */
    padding-bottom: 3rem !important; 
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    background-color: #fff; 
}

/* 🔑 FIX B: Ensure the H1 title has NO top margin (which was the Bulma mt-4 class) */
.content-block #class-title {
    margin-top: 0 !important; /* Critical to remove space above H1 */
    margin-bottom: 0.5rem;
}

/* --- CLASS.HTML header image (GLOBAL / DESKTOP) --- */
/* --- Responsive Short Hero / Header Area (fill height perfectly) --- */
#class-header-section {
  margin-top: 100px;
  position: relative;
  background-color: #b4dbff;
  overflow: hidden;
}

#hero-class-image {
  position: relative;
  background-color: #b4dbff;
  height: 290px; /* base height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#hero-class-image img {
  min-height: 100%; /* ensure it always fills height */
  width: auto;       /* keep proportions */
  object-fit: cover; /* make sure no blue gap appears at bottom */
  display: block;
  filter: none !important;
}

/* Optional tweak: slightly taller on very small screens */
@media (max-width: 600px) {
  #hero-class-image {
    height: 280px;
  }
}