/* =========================
   KickOffLLC – Modern Add-on Styles (fixed dark mode, spacing, branding preserved)
   ========================= */

/* ===== Base styles ===== */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #333333;
  background: #ffffff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: #ff6a00;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover {
  color: #ee0979;
}

p {
  margin: 0 0 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== Header container (без брендингу / меню) ===== */
.header {
  padding: 0.8rem 0;
}

.fixed-header-enabled--scroll-up .header {
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255, 255, 255, 1);
}

/* ===== Hero / Banner / Slideshow ===== */
.region-banner .views-field-title a,
.views_slideshow_cycle_teaser_section .views-field-title a {
  position: absolute;
  left: 3%;
  bottom: 6%;
  z-index: 10;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  padding: 0.8em 1.2em;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-width: 90%;
}

.region-banner img {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.hero-top {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.06), rgba(238, 9, 121, 0.06));
}

/* ===== Section titles ===== */
h2.title,
.page-title.title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.1em;
  margin: 1.4em 0 1em;
  position: relative;
}

h2.title::after,
.page-title.title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 0.6em auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
}

/* ===== Article teasers / cards ===== */
.node--view-mode-teaser .node__container {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: 2.5em; /* додає відступ між блоками статей */
}

.node--view-mode-teaser .node__container:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}

.node__title a {
  color: #111111;
  font-weight: 700;
}

.node__title a:hover {
  color: #ff6a00;
}

.node__meta {
  color: #8a8a8a;
  font-size: 0.9em;
}

.images-container .image-wrapper img {
  border-radius: 10px;
}

/* ===== Buttons ===== */
.button,
.btn,
.mt-button,
.webform-button--next {
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  border: none;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 0.7em 1.1em;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.button:hover,
.btn:hover,
.mt-button:hover,
.webform-button--next:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(238, 9, 121, 0.25);
}

.button:focus-visible,
.btn:focus-visible,
.webform-button--next:focus-visible {
  outline: 3px solid rgba(238, 9, 121, 0.35);
  outline-offset: 2px;
}

/* ===== Forms ===== */
form .form-item label {
  font-weight: 700;
  color: #333333;
  margin-bottom: 0.35rem;
}

form input[type="text"],
form select,
form textarea {
  background: #fff;
  border: 1px solid #e6e6ef;
  border-radius: 10px;
  padding: 0.65em 0.85em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) inset;
}

form input[type="text"]:focus,
form select:focus,
form textarea:focus {
  border-color: #ee0979;
  box-shadow: 0 0 0 4px rgba(238, 9, 121, 0.12);
  outline: none;
}

/* ===== Pager ===== */
.pager__items a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  margin: 0.2rem;
  border-radius: 10px;
  font-weight: 700;
  background: #fff;
  color: #333333;
  border: 1px solid #ececf3;
  transition: all 0.2s ease;
}

.pager__item.is-active a {
  color: #fff;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  border-color: transparent;
}

.pager__items a:hover {
  transform: translateY(-2px);
  border-color: #ee0979;
}

/* ===== Footer ===== */
#footer {
  background: linear-gradient(135deg, rgba(0, 114, 255, 0.08), rgba(238, 9, 121, 0.08));
  color: #333333;
}

#footer .menu a {
  color: #333333;
  font-weight: 600;
  position: relative;
  padding: 0.2rem 0;
}

#footer .menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  transition: width 0.25s ease;
}

#footer .menu a:hover::after {
  width: 100%;
}

/* ===== Misc elements ===== */
.to-top {
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6a00, #ee0979);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.feed-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ececf3;
}

/* ===== Responsive ≤ 640px ===== */
@media (max-width: 640px) {
  .region-banner .views-field-title a,
  .views_slideshow_cycle_teaser_section .views-field-title a {
    position: static;
    display: block;
    width: 100%;
    margin: 0.75rem auto 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.72);
    padding: 0.7em 1em;
    border-radius: 10px;
  }

  .node--view-mode-teaser .node__container {
    padding: 0.9rem;
    margin-bottom: 2em;
  }

  .button,
  .btn,
  .mt-button {
    width: 100%;
    justify-content: center;
  }

  .hero-top__container,
  .banner__container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===== Dark mode – improved readability ===== */
@media (prefers-color-scheme: dark) {
  body {
    background: #0f1115;
    color: #e9e9ef;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
  }

  p, li, a, span, div {
    color: #695177;
  }

  a:hover {
    color: #ff6a00;
  }

  .node--view-mode-teaser .node__container,
  .pager__items a,
  form input[type="text"],
  form select,
  form textarea,
  #footer .menu a {
    background: #181a22;
    color: #e9e9ef;
    border-color: #272a36;
  }

  .region-banner .views-field-title a {
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
  }

  #footer {
    background: linear-gradient(135deg, rgba(0,114,255,0.12), rgba(238,9,121,0.12));
    color: #eaeaea;
  }

  #footer .menu a {
    color: #eaeaea;
  }

  .node__meta {
    color: #aaa;
  }

  .node__title a {
    color: #ffffff;
  }

  .node__title a:hover {
    color: #ff6a00;
  }
}

/* ===== Do not touch admin toolbar ===== */
#toolbar,
.toolbar,
.toolbar-bar,
.toolbar-tray,
.admin-toolbar,
body.toolbar-tray-open {
  all: unset;
}





.site-branding__logo img {
max-width: 110px
}

.views_slideshow_cycle_teaser_section  {
  margin: 10px;
}

.views_slideshow_cycle_teaser_section .views-row {
    
    
  margin: auto;
  width: 90%;
  min-width: 400px;
  
}
.views_slideshow_cycle_teaser_section .views-field-body {
  z-index: 100;
  position: absolute;
  color: #FFF;
  bottom: 8%;
  margin: 2%;
  width: 45%;
  min-width: 250px;
  background: #000;
  padding: 0 2em;
}

.views_slideshow_cycle_teaser_section .views-field-field-slide img {
  margin: auto;
  display: flex;
}

.views_slideshow_cycle_teaser_section {
  margin: auto;
}
 
.views_slideshow_cycle_teaser_section .views-field-title a {
  position: absolute;
  color: #fff;
  z-index: 10;
  background: rgba(0, 0, 0, 0.85); /* чорний з прозорістю 30% */
  padding: 1em 2em;
  margin: 3%;
}


.field.field--name-field-form.field--type-webform .webform-ajax-form-wrapper,
#webform-submission-start-node-5-form-ajax,
#webform-submission-start-node-5-add-form,
.field.field--name-field-form.field--type-webform.field--label-hidden.field__item,
#block-corporateclean-content .content #webform-submission-start-form-ajax-content.webform-ajax-form-wrapper,
.webform-submission-form.webform-submission-add-form.webform-submission-start-form.webform-submission-start-add-form {
  max-width: 750px;
  margin: auto;
  min-width: 300px;
}


#block-corporateclean-page-title  {
  text-align: center;
}

#block-corporateclean-pereklyuchatelyazyka {
  float: right;
}
h2.title {
  position: relative;
  text-align: center;
  font-size: 2.2em;
  font-weight: 700;
  color: #222;
  margin: 1.5em 0 1em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInDown 0.8s ease both;
}

/* декоративна лінія під заголовком */
h2.title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  margin: 0.6em auto 0;
  border-radius: 2px;
  animation: growLine 1s ease;
}

/* анімація появи */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* анімація лінії */
@keyframes growLine {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 80px;
    opacity: 1;
  }
}

/* Стиль назви (як у попередньому прикладі) */
.site-name a {
  font-family: 'Poppins', 'Montserrat', sans-serif;
  font-size: 2.2em;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s ease;
  display: inline-block;
  position: relative;
}

.site-name a:hover {
  transform: scale(1.05);
  text-shadow: 0 0 15px rgba(255,106,0,0.5);
}

.site-name a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  border-radius: 2px;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.site-name a:hover::after {
  width: 60%;
}



<nav class="main-menu">
  <ul>
    <li class="menu-item"><a href="#">Головна</a></li>
    <li class="menu-item"><a href="#">Послуги</a></li>
    <li class="menu-item"><a href="#">Про нас</a></li>
    <li class="menu-item"><a href="#">Контакти</a></li>
  </ul>
</nav>

/* Контейнер меню */
.main-menu {
  text-align: center;
  margin: 1em 0 2em;
}

/* Скидання базових стилів */
.main-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 1.5em;
  flex-wrap: wrap;
}

/* Посилання меню */
.menu-item a {
  font-family: 'Poppins','Montserrat',sans-serif;
  font-weight: 600;
  font-size: 1.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #333;
  position: relative;
  padding: 0.3em 0;
  transition: all 0.3s ease;
}

/* Ефект підкреслення з градієнтом */
.menu-item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  border-radius: 2px;
  transition: all 0.35s ease;
  transform: translateX(-50%);
}

/* Ефекти наведення */
.menu-item a:hover {
  color: #ff6a00;
  transform: translateY(-2px);
}

.menu-item a:hover::after {
  width: 80%;
}

/* Активний пункт меню */
.menu-item.active a {
  color: #ee0979;
}

.menu-item.active a::after {
  width: 80%;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
}

/* Адаптація для мобільних */
@media (max-width: 640px) {
  .main-menu ul {
    flex-direction: column;
    gap: 0.8em;
  }

  .menu-item a {
    font-size: 1em;
  }

  .menu-item a::after {
    bottom: -4px;
  }
}



/* Стиль слогану */

/* Стиль назви (як у попередньому прикладі) */
.site-name a {
  font-family: 'Poppins', 'Montserrat', sans-serif;
  font-size: 2.2em;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s ease;
  display: inline-block;
  position: relative;
}

.site-name a:hover {
  transform: scale(1.05);
  text-shadow: 0 0 15px rgba(255,106,0,0.5);
}

.site-name a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  border-radius: 2px;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.site-name a:hover::after {
  width: 60%;
}

/* Стиль слогану */
.site-slogan,
.site-branding__slogan {
  text-align: center;
  font-family: 'Poppins','Montserrat', sans-serif;
  font-size: 1.15em;
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-top: 0.35em;
  opacity: 0;
  animation: sloganFadeIn 1s ease forwards;
  animation-delay: 0.25s;
  display: inline-block;
  position: relative;
  /* делікатний градієнтний текст, як в логотипі */
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* акцент “підкреслення” з синього градієнта LLC */
.site-slogan::after,
.site-branding__slogan::after {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  margin: 0.5em auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s ease;
}

/* легкий ховер-ефект */
.site-slogan:hover::after,
.site-branding__slogan:hover::after {
  transform: scaleX(1);
}

/* контейнер брендингу по центру */
.site-branding { text-align: center; }

/* Анімація появи */
@keyframes sloganFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Темна тема (необов'язково, якщо є темний фон) */
@media (prefers-color-scheme: dark) {
  .site-slogan,
  .site-branding__slogan {
    /* робимо текст більш читабельним на дуже темному фоні */
    filter: drop-shadow(0 0 12px rgba(238,9,121,0.25));
  }
}

/* Адаптація для мобільних */
@media (max-width: 640px) {
  .site-slogan,
  .site-branding__slogan {
    font-size: 1.02em;
    letter-spacing: 0.3px;
  }
}

/* Центрування */
.site-branding {
  text-align: center;
  margin: 1em 0 2em;
}

/* Адаптація для мобільних */
@media (max-width: 640px) {
  .site-name a {
    font-size: 1.8em;
  }
  .site-slogan,
  .site-branding__slogan {
    font-size: 1em;
  }
}



/* Анімація появи */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Центрування */
.site-branding {
  text-align: center;
  margin: 1em 0 2em;
}

/* Адаптація для мобільних */
@media (max-width: 640px) {
  .site-name a {
    font-size: 1.8em;
  }
  .site-slogan,
  .site-branding__slogan {
    font-size: 1em;
  }
}

/* адаптація для мобільних */
@media (max-width: 640px) {
  h2.title {
    font-size: 1.6em;
  }
}

@media (max-width: 640px) {
  .views_slideshow_cycle_teaser_section .views-field-title a {
    position: static; /* або relative, щоб текст не накладався на зображення */
    display: block;
    width: 90%;
    margin: 1em auto;
    padding: 0.75em 1em;
    font-size: 0.9em;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
  }
}




/* ===== Form Labels – KickOffLLC Style ===== */
form .form-item label,
label {
  display: block;
  font-family: 'Inter', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.3px;
  color: #333333;
  margin-bottom: 0.4em;
  transition: color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  font-size: 20px;
}

/* Ефект при фокусі на полі або наведенні */
form .form-item:focus-within label,
form .form-item label:hover,
label:hover {
  color: #695177;
  transform: translateX(2px);
}

/* Темний режим */
@media (prefers-color-scheme: dark) {
  form .form-item label,
  label {
    color: #695177;
  }

  form .form-item:focus-within label,
  form .form-item label:hover,
  label:hover {
    color: #ff6a00;
  }
}


/* ===== Hero Section Background – Cross-browser fix ===== */
.hero-top {
  /* fallback (для старих браузерів) */
  background-color: #fff4ec;

  /* основний градієнт — стабільний і рівномірний */
  background: linear-gradient(
    135deg,
    rgba(255, 106, 0, 0.12) 0%,
    rgba(238, 9, 121, 0.12) 100%
  );

  /* легка текстура/глибина для Safari та Firefox */
  background-blend-mode: soft-light;
}