@media (max-width: 576px) {
  .container,
  .container-fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.yellow-splash,
.green-doodle,
.yellow-scribble,
.orange-underline,
.flower-shape {
  max-width: 100%;
  overflow: hidden;
}

.section-with-blob {
  position: relative;
  overflow-x: hidden;
}

.image-style-align-left {
  float: left;
  margin-right: 1rem;
  max-width: 50%;
}

.image-style-align-right {
  float: right;
  margin-left: 1rem;
  max-width: 50%;
}

.image-style-align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.image-style-side {
  float: left;
  margin-right: 1rem;
  max-width: 40%;
}

.image-style-full {
  display: block;
  width: 100%;
  margin: 1rem 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f3f4f6; /* світло-сірий фон */
  color: #1f2937; /* темно-сірий текст (Tailwind gray-800) */
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: #f97316; /* помаранчевий фон при ховері */
  color: #ffffff; /* білий текст при ховері */
  transform: translateY(-2px);
}


:root {
  --primary-orange: #f97316;
  --primary-green: #65a30d;
  --primary-purple: #7e22ce;
  --primary-red: #dc2626;
  --nav-bg: #ffffff;
  --nav-text: #1f2937;
  --nav-hover: #f97316;
  --font-sans: 'Segoe UI', 'Inter', sans-serif;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  background-color: #fff;
  color: var(--nav-text);
  margin: 0;
}

.navbar {
  background-color: var(--nav-bg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.navbar-brand {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--nav-text) !important;
}

.navbar-brand img {
  max-height: 40px;
  width: auto;
}

.navbar-nav .nav-link {
  color: var(--nav-text);
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--nav-hover);
}

.dropdown-menu {
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08);
}

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.btn-primary {
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
}
.btn-primary:hover {
  background-color: #ea580c;
  border-color: #ea580c;
}

.color-splash-background {
  position: relative;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
}

.color-splash-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, #f97316, transparent 40%),
              radial-gradient(circle at 70% 40%, #65a30d, transparent 50%),
              radial-gradient(circle at 50% 70%, #7e22ce, transparent 50%),
              radial-gradient(circle at 80% 80%, #dc2626, transparent 50%);
  animation: splashMove 6s linear infinite;
  z-index: -1;
  opacity: 0.3;
  transform: rotate(0deg) scale(3);
}

@keyframes splashMove {
  0% {
    transform: rotate(0deg) scale(3.5);
  }
  50% {
    transform: rotate(180deg) scale(3);
  }
  100% {
    transform: rotate(360deg) scale(4);
  }
}

.logo-animated path,
.logo-animated polygon {
  opacity: 0;
  transform: scale(0.85) translateY(10px);
  transform-origin: center;
  animation: fadeInShape 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.logo-animated path:nth-of-type(1) { animation-delay: 0.1s; }
.logo-animated path:nth-of-type(2) { animation-delay: 0.2s; }
.logo-animated path:nth-of-type(3) { animation-delay: 0.5s; }
.logo-animated path:nth-of-type(4) { animation-delay: 0.7s; }
.logo-animated path:nth-of-type(5) { animation-delay: 0.3s; }
.logo-animated path:nth-of-type(6) { animation-delay: 0.4s; }
.logo-animated path:nth-of-type(7) { animation-delay: 0.6s; }
.logo-animated path:nth-of-type(8) { animation-delay: 0.8s; }
.logo-animated path:nth-of-type(9) { animation-delay: 0.1s; }

.logo-animated polygon:nth-of-type(1) { animation-delay: 0.3s; }
.logo-animated polygon:nth-of-type(2) { animation-delay: 0.4s; }
.logo-animated polygon:nth-of-type(3) { animation-delay: 0.6s; }
.logo-animated polygon:nth-of-type(4) { animation-delay: 0.8s; }

@keyframes fadeInShape {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
  60% {
    transform: scale(1.05) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}

.navbar-brand .school-name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  color: #111827;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  transition: color 0.3s ease;
}

.navbar-brand .school-name:hover {
  color: var(--primary-orange);
}

.partner-marquee {
  overflow: hidden;
  position: relative;
}

.partner-track {
  display: flex;
  width: fit-content;
  animation: scroll-left 40s linear infinite;
  gap: 3rem;
  align-items: center;
}

.partner-track img {
  max-height: 40px;
  height: auto;
  vertical-align: middle;
  object-fit: contain;
  padding: 0.25rem 0;
  transition: transform 0.3s ease;
}

/* Приглушення (opacity: .7) прибрано свідомо. Це чужі торгові знаки, і їхні
   правила вимагають показувати їх без змін і з достатнім контрастом —
   напівпрозорий знак вибілює фірмові кольори. Ефект наведення лишається,
   але тепер це лише масштаб, який пропорцій не псує. */
.partner-track img:hover {
  transform: scale(1.1);
}

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

.nav-link.active {
  font-weight: 600;
  color: var(--primary-orange) !important;
  position: relative;
}

.nav-link.active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary-orange);
  position: absolute;
  bottom: -0.2rem;
  left: 0;
}

.nav-link.active.dropdown-toggle::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-orange);
}
.nav-link.active.dropdown-toggle {
  position: relative;
}
.nav-link.active.dropdown-toggle::after {
  display: none;
}

.orange-underline {
  position: absolute;
  top: 10px;
  left: -20px;
  width: 120%;
  height: 130%;
  background: url("data:image/svg+xml,%3Csvg width='300' height='180' viewBox='0 0 300 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 140C60 180 240 180 280 140C300 120 260 100 220 80C180 60 140 50 100 60C60 70 40 100 20 140Z' stroke='%23f97316' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
}

.yellow-splash {
  position: absolute;
  top: 20%;
  right: 0;
  width: 160px;
  height: 160px;
  background: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M140 20C160 40 160 80 140 100C120 120 80 120 60 100C40 80 40 40 60 20C80 0 120 0 140 20Z' fill='%23facc15' fill-opacity='0.4'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}

.flower-blob {
  position: absolute;
  bottom: 5%;
  right: 10%;
  width: 140px;
  height: 140px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fb923c' fill-opacity='0.3' d='M55.9,-61.3C70.6,-47.6,79.9,-23.8,75.9,-4.7C72,14.3,54.8,28.5,40.1,44.6C25.4,60.7,12.7,78.6,-1.5,80.5C-15.6,82.3,-31.1,68.1,-47.8,52.5C-64.5,36.8,-82.4,19.4,-82.6,1.1C-82.7,-17.1,-65.1,-34.3,-48.7,-48.4C-32.3,-62.5,-16.1,-73.5,4.4,-77.5C24.9,-81.6,49.9,-78.9,55.9,-61.3Z' transform='translate(100 100)'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

.flower-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23a855f7' fill-opacity='0.3' d='M299.5,527.5Q236,455,167,410.5Q98,366,132.5,288Q167,210,211,132.5Q255,55,328,97.5Q401,140,461.5,195Q522,250,476,325Q430,400,364.5,463.5Q299.5,527.5,299.5,527.5Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

.pink-branch {
  position: absolute;
  top: 10%;
  left: -40px;
  width: 160px;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 Q90 50 100 100 Q110 150 100 200 Q90 250 100 300 M100 50 Q60 60 70 90 M100 110 Q140 120 130 150 M100 170 Q60 180 70 210 M100 230 Q130 240 120 270' stroke='%23f9a8d4' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

.green-doodle {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 180px;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 100 Q40 80 60 100 T100 100 T140 100 Q160 80 180 100 T220 100 Q240 110 260 90' stroke='%2384cc16' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}


.circle-photo-wrapper {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.circle-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* 🪄 Hover ефект */
.circle-photo-wrapper:hover img {
  transform: scale(1.08);
}

.yellow-scribble {
  position: absolute;
  top: 5%;
  left: -10%;
  width: 500px;
  height: 300px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 300 Q120 250 180 280 Q230 300 260 240 Q290 180 330 230 Q360 270 400 210 Q440 150 470 210 Q490 250 530 200 Q570 150 580 100' stroke='%23facc15' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.grecaptcha-badge {
    visibility: hidden;
  }

.radio-buttons .btn {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.radio-buttons input[type="radio"]:checked + label {
  background-color: var(--primary-orange);
  color: white;
  border-color: var(--primary-orange);
}

/* кастомні кольори на основі тем */
.radio-buttons input[type="radio"]#theme2:checked + label {
  background-color: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}
.radio-buttons input[type="radio"]#theme3:checked + label {
  background-color: var(--primary-purple);
  color: white;
  border-color: var(--primary-purple);
}
.radio-buttons input[type="radio"]#theme4:checked + label {
  background-color: var(--primary-red);
  color: white;
  border-color: var(--primary-red);
}

.radio-buttons label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  font-weight: 500;
  user-select: none;
}

.orange-form {
  background-color: #fff7ed; /* ніжно-оранжевий */
  border: 1px solid #fde68a; /* легкий акцент */
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.1);
}

.wavy-underline {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q30 10 60 30 T120 30 T180 30 Q210 10 240 30' stroke='%2384cc16' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.5;
}

.radio-buttons .btn {
  color: #6b7280; /* Tailwind gray-500 */
  background-color: #f9fafb; /* дуже світлий фон */
  border: 1px solid #d1d5db; /* light gray border */
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
.radio-buttons {
  margin-top: 40px;
}

/* Після вибору (натискання) */
input[type="radio"]:checked + label.btn {
  background-color: #f97316; /* оранжева заливка */
  color: white;
  border-color: #f97316;
}

.section-with-blob {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f97319' fill-opacity='0.2' d='M55.9,-61.3C70.6,-47.6,79.9,-23.8,75.9,-4.7C72,14.3,54.8,28.5,40.1,44.6C25.4,60.7,12.7,78.6,-1.5,80.5C-15.6,82.3,-31.1,68.1,-47.8,52.5C-64.5,36.8,-82.4,19.4,-82.6,1.1C-82.7,-17.1,-65.1,-34.3,-48.7,-48.4C-32.3,-62.5,-16.1,-73.5,4.4,-77.5C24.9,-81.6,49.9,-78.9,55.9,-61.3Z' transform='translate(100 60)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 0;
}

.section-with-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: -1;
}

.announcement-fallback {
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}

.announcement-fallback img {
  z-index: 0;
}

.announcement-fallback span {
  z-index: 1;
}

.radio-buttons .btn-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.orange-form {
  border: none;
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.08);
  transition: all 0.3s ease;
}

.form-floating .form-control {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb; /* Tailwind gray-200 */
  transition: border-color 0.3s;
}

.form-floating .form-control:focus {
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 0.1rem rgba(249, 115, 22, 0.25);
}

.radio-buttons label:focus-within {
  outline: 2px solid var(--primary-orange);
  outline-offset: 2px;
}

.btn-style, .btn-primary {
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.text-orange {
  color: var(--primary-orange);
}

.contact-card a {
  color: var(--nav-text);
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus {
  background-color: #f97316 !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.4) !important;
}

.card-link {
  color: #1f2937;
  text-decoration: none;
  transition: all 0.2s ease;
}

.card-link:hover {
  color: #f97316;
  text-decoration: none;
}

.btn-outline-orange {
  color: #f97316;
  border-color: #f97316;
  transition: all 0.2s ease;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
  color: #fff;
  background-color: #f97316;
  border-color: #f97316;
  text-decoration: none;
}

.btn-outline-orange:active {
  background-color: #ea580c;
  border-color: #ea580c;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #f97316 !important;
  color: #fff !important;
}

.btn_style {
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
  color: white;
}

.btn_style:hover {
  background-color: #ea580c;
  border-color: #ea580c;
}

.btn_style:disabled {
  opacity: 0.9;
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
  color: white;
}

.card-animated {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s ease;
  pointer-events: none;
  max-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.card-animated.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  max-height: 1000px;
  margin: initial;
  padding: initial;
}