/**
 * Background Section Block Styles (Frontend)
 *
 * This file contains the frontend styles for the background section block.
 * Most styling is handled via Tailwind utility classes in the PHP output.
 */
.wp-block-ttk-website-background-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-ttk-website-background-section .ttk-bg-section-shape {
  position: absolute;
  background-color: var(--bg-section-shape-color, #b8e6e6);
  top: -2rem;
  bottom: -2rem;
  right: 0;
  width: calc(75% + 2rem);
  transform: translateX(2rem);
}
@media (min-width: 1024px) {
  .wp-block-ttk-website-background-section .ttk-bg-section-shape {
    top: -4rem;
    bottom: 4rem;
    width: calc(75% + 4rem);
    transform: translateX(4rem);
  }
}
.wp-block-ttk-website-background-section .ttk-bg-section-shape.ttk-bg-section-shape-right {
  right: 0;
}
.wp-block-ttk-website-background-section .ttk-bg-section-shape.ttk-bg-section-shape-left {
  left: 0;
  transform: translateX(-2rem);
}
@media (min-width: 1024px) {
  .wp-block-ttk-website-background-section .ttk-bg-section-shape.ttk-bg-section-shape-left {
    transform: translateX(-4rem);
  }
}
.wp-block-ttk-website-background-section .bg-black {
  transition: opacity 0.3s ease-in-out;
}
@media (max-width: 768px) {
  .wp-block-ttk-website-background-section .text-4xl {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .wp-block-ttk-website-background-section .text-5xl {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  .wp-block-ttk-website-background-section .text-lg {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (max-width: 1023px) {
  .wp-block-ttk-website-background-section .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.bg-primary.text-white {
  color: #101828 !important;
}

.bg-primary.text-white:hover {
  color: #ffffff !important;
  background-color: rgb(216, 240, 106, var(--tw-bg-opacity, 1)) !important;
}