/**
 * Theme Name: glaucomflecken
 * Template: hello-elementor
 * Developed by Heather at soulsiteswebco.com
 */

 .rainbow {
  background: linear-gradient(to right, #FFB7B2, #FFECB5, #CFEBFF);
  padding-left: .1em;
  padding-right: .1em;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.2em;
}

 .rainbowangle {
  background: linear-gradient(45deg, #FFB7B2, #FFECB5, #CFEBFF);
  padding-left: .1em;
  padding-right: .1em;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.2em;
}

 .rainbowdark {
  background: linear-gradient(to right, #06AEAA, #0096FF, #FFECB5, #FA5F55, #FEBD03);
  padding-left: .1em;
  padding-right: .1em;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.2em;
}

 .rainbowdark-reverse {
  background: linear-gradient(to right, #FEBD03, #FA5F55, #FFECB5, #0096FF, #06AEAA);
  padding-left: .1em;
  padding-right: .1em;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.2em;
}

.dr-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, #FFB7B2, #FFECB5); /* Light inner background */
  border-radius: 15px;
  padding: 0.4em 0.8em;
  z-index: 1;
  overflow: hidden;
}

.dr-text::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px; /* border thickness */
  background: linear-gradient(to right, #FEBD03, #FA5F55); /* dark gradient border */
  border-radius: inherit;
  z-index: -1;

  /* mask trick — cuts out the middle so only the border shows */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}


.k-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, #A2ECEA, #CFEBFF); /* Light highlight background */
  border-radius: 15px;
  padding: 0.4em 0.8em;
  z-index: 1;
  overflow: hidden;
}

.k-text::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px; /* Border thickness */
  background: linear-gradient(to right, #0096FF, #06AEAA); /* Darker border gradient */
  border-radius: inherit;
  z-index: -1;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

@keyframes gradientRotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.k-gradient {
  background: linear-gradient(270deg, #0096FF, #CFEBFF, #A2ECEA, #06AEAA);
  background-size: 400% 400%;
    background-position: 0% 50%;
  animation: gradientRotate 10s ease infinite;
}

.full-gradient {
  background: linear-gradient(135deg, #FEBD03, #FA5F55, #FFECB5, #0096FF, #06AEAA);
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: gradientRotate 10s ease-in-out infinite;
  color: #fff;
}

.dr-gradient {
  background: linear-gradient(to right, #FA5F55, #FDAFAA, #FDDC83, #FAB908);
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: gradientRotate 10s ease-in-out infinite;
  color: #fff;
}

.dr-gradient-image {
  background: linear-gradient(to right,  #FA5F55, #FDAFAA, #FDDC83, #FAB908);
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: gradientRotate 10s ease-in-out infinite;
  display: inline-block;
  position: relative;
  padding: 0px; /* optional for gradient padding around image */
  border-radius: 1000px; /* optional */
  overflow: hidden;
}

.gradient-button { position: relative; display: inline-block; background: transparent; border: 2px solid transparent; border-radius: 5px; cursor: pointer; z-index: 1; transition: all 0.3s ease; display: inline-block; } 
.gradient-button::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(90deg, #0096FF, #FEBD03, #FA5F55); background-size: 200% auto; background-position: 0% 50%; border-radius: 10px; z-index: -1; transition: background-position 1s ease; opacity: 1; } 
.gradient-button.reverse::before { background: linear-gradient(90deg, #FA5F55, #FEBD03, #0096FF); background-size: 200% auto; background-position: 0% 50%; } 
.gradient-button:hover::before { background-position: 100% 50%; }

.image-gradient-overlay, .image-gradient-overlaydark {
  position: relative;
  display: inline-block;
  overflow: hidden;
    border-radius: inherit;
}
.image-gradient-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom right,
    #FFB7B2,
    #FFD1B3,
    #FFECB5,
    #CFEBFF,
    #A2ECEA
  );
  opacity: 0.8;
  pointer-events: none; /* keep image clickable */
  z-index: 1;
}
.image-gradient-overlaydark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom right,
    #FEBD03,
    #FA5F55,
    #FFECB5,
    #0096FF,
    #06AEAA
  );
  opacity: 0.5; 
  pointer-events: none; /* keep image clickable */
  z-index: 1;
}

.image-gradient-overlay, .image-gradient-overlaydark img {
  display: block;
  width: 100%;
  height: auto;
  z-index: 0;
  position: relative;
}

.image-hover-gradient {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: inherit;
}

/* Show gradient only on hover */
.image-hover-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom right,
    #FEBD03,
    #FA5F55,
    #FFECB5,
    #0096FF,
    #06AEAA
  );
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.image-hover-gradient:hover::after {
  opacity: 0.8; /* adjust strength of overlay here */
}

.image-hover-gradient img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

/* === PLACEHOLDER TEXT === */
body .gform_wrapper.gravity-theme ::placeholder {
  color: #caa;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body .gform_wrapper.gravity-theme input:focus,
body .gform_wrapper.gravity-theme textarea:focus {
  box-shadow: 0 0 0 2px rgba(0, 150, 255, 0.2);
}

.gravity-rainbow .gform_wrapper.gravity-theme input[type="text"],
.gravity-rainbow .gform_wrapper.gravity-theme input[type="email"],
.gravity-rainbow .gform_wrapper.gravity-theme textarea {
  border: 2px solid transparent !important;
  border-radius: 999px !important; /* Force fully rounded edges */
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #FA5F55, #FEBD03, #0096FF) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  padding: .8rem 1.3rem !important;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-weight: 600;
  outline: none;
}

.gravity-rainbow .gform_wrapper.gravity-theme .gfield_error input,
.gravity-rainbow .gform_wrapper.gravity-theme .gfield_error textarea {
  border-image: linear-gradient(to right, #fa5f55, #FEBD03, #0096ff) !important;
  border-image-slice: 1 !important;
  box-shadow: none !important;
}

.gravity-rainbow .gform_wrapper.gravity-theme input[type="submit"] {
  background: transparent;
  color: #1A103D;
  font-weight: bold;
  border: 2px solid transparent !important;
  border-radius: 999px !important; /* Fully rounded corners */
  background-image:
    linear-gradient(#fff, #fff), /* inner fill */
    linear-gradient(90deg, #FA5F55, #FEBD03, #0096FF, #FA5F55); /* animated gradient border */
  background-size: 200% auto; /* enable animation movement */
  background-position: 0% 50%; /* starting gradient position */
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-position 1s ease, color 0.3s ease, background-color 0.3s ease;
  display: inline-block;
  box-sizing: border-box;
}

.gravity-rainbow .gform_wrapper.gravity-theme input[type="submit"]:hover {
  background-position: 100% 50%; /* moves gradient horizontally */
  background-color: rgba(250, 95, 85, 0.05); /* subtle fill */
  color: #1A103D;
}

.gform_wrapper.gravity-theme input[type="submit"]:hover {
  background-color: #C1BDC7;
  color: white;
}

.gform_wrapper.gravity-theme input[type="submit"] {
  background: transparent;
  color: #1A103D;
  font-weight: bold;
  border-color: #C1BDC7;
  border: 2px solid;
   background-color: transparent;
  border-radius: 999px !important; /* Fully rounded corners */
  padding: 0.75rem 2rem;
  font-size: 1rem;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
}


/* Space between fields */
body .gform_wrapper.gravity-theme .gform_fields .gfield {
  margin-bottom: .8rem;
}

/* Prevent button from breaking layout */
body .gform_wrapper.gravity-theme .gform_footer {
 display: flex;
  justify-content: flex-end;
  padding-top: .8rem;
}

body .gform_wrapper.gravity-theme input[type="text"],
body .gform_wrapper.gravity-theme input[type="email"],
body .gform_wrapper.gravity-theme textarea {
  padding: .7rem 1rem;
   border-color: #C1BDC7!important;
  border: 2px solid;
}

/* Hide the "(Required)" label text in Gravity Forms */
body .gform_wrapper.gravity-theme .gfield_label .gfield_required {
  display: none;
}

.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

.holographic-card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  transition: all 0.5s ease;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    #FFFAFA
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #FFFAFA;
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.rainbowborder-img{
  --rbw: linear-gradient(130deg,
    #FEBD03,
    #FA5F55,
    #FFECB5,
    #0096FF,
    #06AEAA
  );
  padding: 6px;          
  border-radius: 60px;       
  background: var(--rbw);
}

.rainbowborder-img img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(16px - 6px);
  background: #fff;
  border-radius: 60px!important;         
}