/**
Theme Name: Astra Child Theme
Theme URI: https://wpastra.com/
Author: Malene Jonassen, Cathrine Kjeldahl, Freja Matthiesen og Sarah Heltborg
Author URI: https://storyscaping.shstudio.dk
Description: The Astra WordPress theme is based upon the original Astra Mother Theme in Wordpress. This Astra Child Theme is lightning-fast and highly customizable theme.
Template: astra
Version: 0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
**/

/* ------------------- ANIMATIONER ------------------- */
@keyframes marquee-left {
  from { transform: translate(0, -50%); }
  to   { transform: translate(-100%, -50%); }
}

/* ------------------- RAMMEN / BÅNDET ------------------- */
.slogan-marquee-css {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100vw;
  padding: 20px 0;

  --slogan-color: #bd3001;
  --slogan-size: clamp(28px, 5vw, 56px);
  --speed: 60s;
}

.slogan-marquee-css .elementor-heading-title {
  text-indent: -9999px;
  white-space: nowrap;
}

.slogan-marquee-css::before,
.slogan-marquee-css::after {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.03em;
  will-change: transform;
  color: var(--slogan-color);
  font-size: var(--slogan-size);
    content:
    " CONNECT • CREATE • CELEBRATE • CONNECT • CREATE • CELEBRATE • CONNECT • CREATE • CELEBRATE •"
    " CONNECT • CREATE • CELEBRATE •"
    " CONNECT • CREATE • CELEBRATE •"
    " CONNECT • CREATE • CELEBRATE •"
    " CONNECT • CREATE • CELEBRATE •";
}

.slogan-marquee-css::before {
  animation: marquee-left var(--speed) linear infinite;
}

.slogan-marquee-css::after {
  transform: translate(100%, -50%);
}

/* ------------------- HERO PILEN ------------------- */
.hero-scroll {
  position: relative;
}

.hero-scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 12vh);
  width: 32px;
  height: 32px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 6px solid #ffffff;
  border-bottom: 6px solid #ffffff;
  z-index: 5;
  pointer-events: none;
  animation: scroll-bounce 1.6s ease-in-out infinite;
}

.hero-scroll::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 14vh);
  width: 32px;
  height: 32px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 6px solid #ffffff;
  border-bottom: 6px solid #ffffff;
  opacity: 0.6;
  animation: scroll-bounce 1.6s ease-in-out infinite;
  animation-delay: 0.15s;
}

@keyframes scroll-bounce {
  0%   { transform: translate(-50%, 0) rotate(45deg); }
  50%  { transform: translate(-50%, 8px) rotate(45deg); }
  100% { transform: translate(-50%, 0) rotate(45deg); }
}

/* ------------- form - på bag bellis og bellis anbefaler ------------- */
#wpforms-submit-66{
  background-color: #BD3001;
  color: #F4F2EA;
  }

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #F4F2EA !important;
    border: 2px solid #BD3001 !important;
    box-sizing: border-box;
  	border-radius: 15px;
    color: #ffffff;
}