/* ==============================================
   Starlight Hero Section Styles
   (Based on Angielski Ogólny Online example)
   (Should be placed in starlight.css)
   ============================================== */

/* --- Section Wrapper --- */
/* Keep this constrained unless you specifically want it full-width */
.starlight-wrapper {
  background-color: #ffffff; /* White background like example */
  padding: 70px 0; /* Vertical padding like example */
  overflow-x: hidden; /* Prevent horizontal scroll */
  box-sizing: border-box;
  width: 100%; /* Standard width */
  /* Remove full-width styles if they were here */
}

/* --- Container --- */
.starlight-container {
  max-width: 1200px; /* Max width of content */
  margin: 0 auto; /* Center container */
  padding: 0 0px; /* Side padding */
  box-sizing: border-box;
}

/* --- Flex Layout --- */
.starlight-flex {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 40px; /* Space between columns */
  justify-content: space-between; /* Space between columns */
  align-items: center; /* Vertically align items */
}

/* --- Left Column (Text & Buttons) --- */
.starlight-left {
  flex: 1 1 550px; /* Allow more space for text, match example */
  min-width: 300px; /* Minimum width before wrapping */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text left */
  text-align: left;
}

/* Match title styles from example */
.starlight-left .hero-title {
  font-size: clamp(36px, 6vw, 48px); /* Responsive font size */
  font-weight: 700;
  color: #000000; /* Black */
  line-height: 1.2;
  margin: 0 0 15px 0;
  width: 100%;
}

/* Match subtitle styles from example */
.starlight-left .hero-subtitle {
  font-size: clamp(26px, 4vw, 34px); /* Responsive font size */
  font-weight: 400;
  color: #333333; /* Dark Grey */
  line-height: 1.4;
  margin: 0 0 35px 0;
  max-width: 550px; /* Limit width */
  width: 100%;
}

/* --- Buttons --- */
.starlight-buttons {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap */
  gap: 20px; /* Space between buttons like example */
  justify-content: flex-start; /* Align buttons left */
  width: 100%;
}

/* Base button style - adapt from example's .cta-btn */
.starlight-btn,
.starlight-btn-alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px; /* Example padding */
  font-size: 1.1rem; /* Example font size */
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  border: none;
  font-family: 'Poppins', sans-serif; /* Match example font if desired */
}

/* Main Button Style (Teal from example) */
.starlight-btn {
  background: #00796b; /* Teal */
  color: #fff !important;
}
.starlight-btn:hover {
  background: #004d40; /* Darker Teal */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  color: #fff !important;
}

/* Alt Button Style (Pink from example) */
.starlight-btn-alt {
  background: #ffd6d6; /* Light Pink */
  color: #333 !important; /* Darker text */
}
.starlight-btn-alt:hover {
  background: #ffbaba; /* Darker Pink */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  color: #333 !important;
}

/* Active state */
.starlight-btn:active,
.starlight-btn-alt:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}


/* --- Right Column (Images & Dialogue) --- */
.starlight-right {
  flex: 1 1 450px; /* Allow slightly less space than text, match example */
  min-width: 300px;
  position: relative;
  text-align: center;
  min-height: 480px; /* Match example */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image area container */
.image-area {
  position: relative;
  width: 80%; /* Match example */
  max-width: 400px; /* Match example */
}

/* Main image */
.man-image { /* Using original class name */
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  position: relative; /* Main image is relative */
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Smaller overlay image */
.woman-image { /* Using original class name */
  position: absolute;
  bottom: -30px; /* Position like example */
  left: -40px;   /* Position like example */
  width: 160px;  /* Size like example */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  background: #fff; /* Add background if needed */
  z-index: 2; /* Above main image */
  border: 4px solid white; /* Match example */
  transform: rotate(-8deg); /* Match example */
}

/* --- Dialogue Bubbles (Adopted from example) --- */
.smart-dialogue {
  position: absolute;
  background: #333; /* Dark background like example */
  color: #fff; /* White text */
  padding: 9px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  white-space: nowrap;
  opacity: 0; /* Start hidden for animation */
  transform: scale(0.8) translateY(10px);
  z-index: 3;
  animation: bubbleFadeIn 0.5s ease-out forwards;
}
.smart-dialogue::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Position bubbles like example */
.teacher-bubble-1 {
  bottom: 145px; /* Adjust based on your image heights */
  left: 130px; /* Adjust based on your image widths */
  animation-delay: 0.5s;
}
/* UPDATED: Pointer Down */
.teacher-bubble-1::after {
  border-width: 12px 12px 0 12px; /* Top border has width */
  border-color: #333 transparent transparent transparent; /* Color on top */
  bottom: -11px; /* Position below bubble */
  left: 25px;
  margin-left: -12px;
  top: auto; /* Reset top */
}

.student-bubble-1 {
  top: 30px; /* Higher up */
  right: 5%; /* Towards the right */
  animation-delay: 1.5s;
}
/* UPDATED: Pointer Down */
.student-bubble-1::after {
  border-width: 12px 12px 0 12px; /* Top border has width */
  border-color: #333 transparent transparent transparent; /* Color on top */
  bottom: -11px; /* Position below bubble */
  left: 50%; /* Center horizontally */
  margin-left: -12px;
  top: auto; /* Reset top */
  right: auto; /* Reset right */
}

.teacher-bubble-2 {
  bottom: 115px; /* Lower than first teacher bubble */
  left: 150px; /* Slightly more to the right */
  animation-delay: 2.5s;
}
/* UPDATED: Pointer Down */
.teacher-bubble-2::after {
  border-width: 12px 12px 0 12px; /* Top border has width */
  border-color: #333 transparent transparent transparent; /* Color on top */
  bottom: -11px; /* Position below bubble */
  left: 30px;
  margin-left: -12px;
  top: auto; /* Reset top */
}

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

/* UPDATED: Highlight color */
.smart-highlight {
  font-weight: 600;
  color: #E63946; /* Red color (adjust hex code if needed) */
}


/* --- Responsive Adjustments (Adopted from example) --- */
@media (max-width: 992px) {
  .starlight-flex {
    flex-direction: column-reverse; /* Stack image above text */
    gap: 20px;
  }
  .starlight-left {
    align-items: center;
    text-align: center;
  }
  .starlight-buttons {
    justify-content: center;
  }
  .starlight-right {
    min-height: 380px;
    width: 100%;
    max-width: 450px;
    margin-bottom: 0;
  }
  .image-area { width: 70%; }
  .woman-image { width: 140px; left: -20px; bottom: -15px; }

  /* Reposition bubbles for centered layout */
  .teacher-bubble-1 { bottom: 110px; left: auto; right: 55%; } /* Example adjustment */
  .student-bubble-1 { top: 20px; right: 5%; }
  .teacher-bubble-2 { bottom: 80px; left: auto; right: 45%; } /* Example adjustment */

  /* Keep bubble pointers pointing down on tablet */
  .teacher-bubble-1::after,
  .student-bubble-1::after,
  .teacher-bubble-2::after {
      border-width: 12px 12px 0 12px;
      border-color: #333 transparent transparent transparent;
      bottom: -11px;
      top: auto;
      /* Adjust left/right as needed for centered layout */
  }
   .teacher-bubble-1::after { left: auto; right: 20px; margin-left: 0; margin-right: -12px; }
   .student-bubble-1::after { left: 50%; margin-left: -12px; right: auto; }
   .teacher-bubble-2::after { left: auto; right: 30px; margin-left: 0; margin-right: -12px; }

}

@media (max-width: 480px) {
  .starlight-wrapper { padding: 40px 0; }
  .starlight-left { padding: 20px 0; }
  .starlight-left .hero-title { font-size: 36px; }
  .starlight-left .hero-subtitle { font-size: 26px; }
  .starlight-buttons { flex-direction: column; align-items: center; width: 100%; }
  .starlight-btn, .starlight-btn-alt { width: 100%; max-width: 300px; justify-content: center; }
  .starlight-right { min-height: 320px; }
  .image-area { width: 80%; }
  .woman-image { width: 110px; left: -10px; bottom: -10px;}
  .smart-dialogue { display: none; } /* Hide bubbles on very small screens */
}



















/* Base styles for the section header (applies if .full-width-header is NOT used) */
.section-header {
  margin-left: 22px;
  margin-bottom: 20px; /* Added for default spacing */
}

/* Original .carousel-holder base - this will be overridden by the full-width rules below,
   but leaving it shows the original intent if breakout rules were removed. */
.carousel-holder {
  width: 100%; /* Will be overridden */
  padding: 60px 0; /* Will be overridden by more specific full-width rules */
  background: #fff; /* Will be overridden */
  overflow: visible; /* Will be overridden */
}

/* Styles for individual Swiper slides and cards (.reason-box) */
.swiper-slide {
  display: flex;
  justify-content: center;
  overflow: visible; /* Allows box shadows to display correctly */
}

.reason-box {
  width: 100%;
  max-width: 360px;
  padding: 36px 28px 56px;
  min-height: 420px;
  border-radius: 12px;
  border: 2px solid #000;
  color: #fff; /* Text color for the cards */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 1;
}

.reason-box:hover {
  transform: translateY(-10px);
  z-index: 2; /* Ensure hovered card comes above others */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}

.reason-box h3 {
  font-size: 34px;
  font-weight: bold;
  margin-bottom: 16px;
  line-height: 1.3;
}

.reason-box h4 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 18px;
}

.reason-box p {
  font-size: 21px;
  line-height: 1.8;
  flex-grow: 1; /* Allows p to take available space, pushing icon down */
}

.corner-icon {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 44px;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.reason-box:hover .corner-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* Swiper Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
  width: 44px; /* Increased size for better usability */
  height: 44px; /* Increased size for better usability */
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 10;
  opacity: 0.5; /* Slightly more visible default */
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  background-color: rgba(0,0,0,0.3); /* Default background for visibility */
  border-radius: 50%;
}

/* Positioning relative to .why-carousel (inner content container) */
/* Adjust these values if buttons feel too far out or too close on large screens */
.why-carousel .swiper-button-prev {
  left: -60px;
}

.why-carousel .swiper-button-next {
  right: -60px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: 'Font Awesome 6 Free'; /* Ensure this matches your Font Awesome setup */
  font-weight: 900;
  font-size: 20px; /* Adjusted for new button size */
  color: #fff;    /* White icon on semi-transparent dark background */
}

.swiper-button-next::after {
  content: '\f105'; /* Font Awesome right chevron */
}

.swiper-button-prev::after {
  content: '\f104'; /* Font Awesome left chevron */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.05); /* Slight scale on hover */
  background-color: rgba(0,0,0,0.6); /* Darker on hover */
}

/* Responsive adjustments for cards */
@media (max-width: 1024px) {
  .reason-box {
    min-height: 360px;
    padding: 28px 20px 40px;
  }
  .reason-box h3 { font-size: 30px; }
  .reason-box h4 { font-size: 24px; }
  .reason-box p { font-size: 19px; }
}

@media (max-width: 768px) {
  .reason-box {
    min-height: auto; /* Allow height to shrink based on content on mobile */
    padding: 20px 16px 40px;
  }
  .corner-icon { font-size: 38px; }
  .reason-box h3 { font-size: 26px; }
  .reason-box h4 { font-size: 20px; }
  .reason-box p { font-size: 17px; }

  /* Adjust Swiper nav buttons for mobile for better layout */
  .why-carousel .swiper-button-prev { left: 10px; }
  .why-carousel .swiper-button-next { right: 10px; }
  .swiper-button-next, .swiper-button-prev { width: 38px; height: 38px; }
  .swiper-button-next::after, .swiper-button-prev::after { font-size: 18px; }
}

@media (min-width: 1025px) { /* Styles for larger screens */
  .reason-box h3 { font-size: 36px; }
  .reason-box h4 { font-size: 28px; }
  .reason-box p { font-size: 23px; }
}


/* ──────────────────────────────────────────
   FULL-WIDTH SECTION BREAKOUTS
────────────────────────────────────────── */

/* Apply class .full-width-header to your <div class="section-header"> in HTML
   if you want the header preceding the carousel to also be full-width. */
.section-header.full-width-header,
.carousel-holder {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  /* margin-right: -50vw; Is not strictly necessary with the above combo */
  max-width: none !important; /* Crucial to override theme's max-width constraints */
  box-sizing: border-box !important;
}

/* Specifics for the .carousel-holder (this will always be full-width with these rules) */
.carousel-holder {
  background: #fff !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  padding-left: 0 !important;  /* Horizontal padding is on .why-carousel */
  padding-right: 0 !important; /* Horizontal padding is on .why-carousel */
  overflow: visible !important;
}

/* Specifics for the .section-header ONLY when it's made full-width via .full-width-header class */
.section-header.full-width-header {
  background: #f0f0f0; /* Example background for the full-width header bar; change as needed */
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 0 !important;  /* Horizontal padding is on h1.hero-title within */
  padding-right: 0 !important; /* Horizontal padding is on h1.hero-title within */
  /* margin-left and left are inherited from the combined rule above */
  margin-bottom: 0px; /* Adjust spacing if the full-width header has a background and touches carousel */
}

/* Ensure the H1 title within a .full-width-header is constrained and centered like your carousel content */
.section-header.full-width-header h1.hero-title {
  max-width: 1260px !important; /* Match .why-carousel max-width */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px !important; /* Match .why-carousel padding for alignment */
  /* text-align: center; /* Or 'left' if you prefer. Original was effectively left due to .section-header margin-left */
}

/* Styling for the content WITHIN the .carousel-holder (CONSTRAINED WIDTH) */
.why-carousel {
  max-width: 1260px;
  margin: 0 auto;     /* Centers this container */
  padding: 0 20px;    /* Gutters for the content inside this container */
  overflow: visible;  /* Important for Swiper elements that