/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */




h1 { font-family: 'Lustria', sans-serif; }

p, h2 { font-family: 'Plus Jakarta Sans', sans-serif; }

h3 { font-family: 'Syne', sans-serif; }

/* "în curând" Top Banner */
.scroll-banner {
background-color: var(--theme-palette-color-4);
color: #fff;
padding: 14px 0;
overflow: hidden;
white-space: nowrap;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: medium;
letter-spacing: 1px;
}

.scroll-text {
display: inline-block;
padding-left: 100%;
animation: scroll-left 30s linear infinite;
}

.scroll-text span {
display: inline-block;
}

@keyframes scroll-left {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}


/* Form Custom Style */
#forminator-module-27 .forminator-row {
display: inline-block !important;
vertical-align: top !important;
margin-bottom: 0 !important;
}

#forminator-module-27 .forminator-row:not(.forminator-row-last) {
width: 38% !important;
margin-right: 2% !important;
}

#forminator-module-27 .forminator-row-last {
width: 30% !important;
}

#forminator-module-27 .forminator-label {
display: none !important;
}

#forminator-module-27 {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border: 1px solid #e2e8f0;
border-radius: 50px !important;
padding: 6px 6px 6px 20px !important;
background-color: #ffffff;
max-width: 500px;
margin: 0 auto;
}

#forminator-module-27 .forminator-row {
margin-bottom: 0 !important;
width: auto !important;
flex-grow: 1 !important;

}
#forminator-module-27 .forminator-row-last {
flex-grow: 0 !important;
}
#forminator-module-27 .forminator-col {
padding: 0 !important;
margin: 0 !important;
}

#forminator-module-27 input.forminator-input {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 10px 0 !important;
font-size: 16px !important;
width: 100% !important;
outline: none !important;
}

#forminator-module-27 .forminator-button-submit {
background: linear-gradient(90deg, #1e7bf2 0%, #00b4f4 100%) !important;
color: #ffffff !important;
font-weight: 600 !important;
letter-spacing: 0.5px;
padding: 12px 28px !important;
border-radius: 40px !important;
border: none !important;
cursor: pointer;
transition: opacity 0.2s ease;
box-shadow: none !important;
}

#forminator-module-27 .forminator-button-submit:hover {
opacity: 0.9 !important;
}

/* 1. Make the form wrapper allow absolute children, and add bottom margin for the error room */
#forminator-module-27 {
position: relative !important;
margin-bottom: 25px !important;
}

/* 2. Break the error message out of the capsule flex flow */
#forminator-module-27 .forminator-error-message {
position: absolute !important;
top: 100% !important;
left: 20px !important;
width: auto !important;
white-space: nowrap !important;

/* 3. Strip background and style the text */
background-color: transparent !important;
background: none !important;
color: #e53e3e !important;
padding: 5px 0 0 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
}

forminator-module-27 .forminator-col,
#forminator-module-27 .forminator-field,
#forminator-module-27 .forminator-input-with-icon {
  width: 100% !important;
  display: flex !important;
  flex-grow: 1 !important;
}

/* Ensure the text input takes all space and doesn't hide text */
#forminator-module-27 input.forminator-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 15px 10px 0 !important; /* Added right padding so text doesn't touch the button */
  font-size: 16px !important;
  width: 100% !important;
  outline: none !important;
  
  /* Reset any hidden truncation properties */
  overflow: visible !important;
  text-overflow: clip !important; 
  white-space: nowrap !important;
}


@media screen and (max-width: 480px) {
/* 2. Break the error message out of the capsule flex flow safely */
#forminator-module-27 .forminator-error-message {
  white-space: normal !important;
  word-wrap: break-word !important;

}
}



/* Setup the global animated blob background */
.site-bg-blob {
    position: fixed;
    top: 35%;
    left: 5%;
    width: 20vw;
    height: 20vw; 
    max-width: 600px;
    max-height: 600px;
    background: linear-gradient(47deg, rgba(205, 243, 241, 1) 21%, rgb(0, 164, 173) 67%, rgba(205, 243, 241, 1) 81%);
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
    box-shadow: inset 50px 50px 17px 0px #A8E6FF,
                inset 100px 100px 17px 0px #CDF3F1;
    opacity: 0.35; 
    filter: blur(60px);
    z-index: -9999;
    pointer-events: none;
    animation: globalBlobAnimate 60s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate forwards;
}
@keyframes globalBlobAnimate {
    /* 1. START: Left Corner */
    0% {
        transform: translate(0vw, 35vh) rotate(0deg) scale(1);
        border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
        opacity: 0.20;
    }
    
    /* 2. Move to Top Center */
    16% {
        transform: translate(40vw, -5vh) rotate(45deg) scale(1.15);
        border-radius: 40% 60% 50% 50% / 70% 85% 60% 75%;
    }
    
    /* 3. Drift to Top Right */
    33% {
        transform: translate(75vw, 5vh) rotate(90deg) scale(1.3);
        border-radius: 30% 70% 40% 60% / 50% 60% 80% 90%;
    }
    
    /* 4. Float down to Center Bottom */
    50% {
        transform: translate(45vw, 75vh) rotate(150deg) scale(0.95);
        border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
        opacity: 0.35;
    }
    
    /* 5. Disappear off-screen down below */
    66% {
        transform: translate(45vw, 110vh) rotate(210deg) scale(0.8);
        border-radius: 80% 30% 70% 40% / 90% 40% 80% 50%;
        opacity: 0; /* Fully fades out as it exits the screen */
    }
    
    /* 6. Travel invisibly back to the far left edge */
    83% {
        transform: translate(-5vw, 70vh) rotate(280deg) scale(1.1);
        border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
        opacity: 0; /* Stays invisible while repositioning */
    }
    
    /* 7. LOOP END: Seamlessly comes back from the left to meet 0% */
    100% {
        transform: translate(0vw, 35vh) rotate(360deg) scale(1);
        border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
        opacity: 0.35; /* Fades back in beautifully */
    }
}

@media (max-width: 768px) {
    .site-bg-blob {
        width: 45vw;  
        height: 45vw;
        top: 25%; 
    }
}