/*
Theme Name: 2025
Author: hello@stefanushosea.com
Template: nivea
Version: 04.10.2025
*/

*{scroll-behavior: smooth;}
img{transition: all .5s}
img{user-drag: none; user-select: none;-moz-user-select: none;-webkit-user-drag: none;-webkit-user-select: none;-ms-user-select: none;}
::-moz-selection {
		  background-color: transparent;
		  color: #0032a0;
  		text-shadow: none;
	}
::selection {
  		background-color: transparent;
		  color: #0032a0;
  		text-shadow: none;
	}

#header .fusion-imageframe{
    transition: all .5s ease;
}
#header .fusion-imageframe:hover{
    transform: scale(1.05);
    filter: brightness(1.15);
}

#footer{
    font-size: .75em;
    line-height: 1;
    padding: 1em 0;
    background-image: linear-gradient(45deg, rgba(0,0,0,.5),transparent);
}
#footer img{
    max-width: 100px;
}

body #wrapper .fusion-title h1{
  background: linear-gradient(
      to right,
      #002566 0%,
      #0032a0 30%,
      #0053e5 50%,
      #0032a0 80%,
      #002566 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 250% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

#booth{
  background: rgba(255, 255, 255, .1);
  padding: 2em;
  margin: 2em auto;
  border-radius: 1em;
  box-shadow: inset 0px 0px 30px rgba(255, 255, 255, .3);
  color: #0032a0;
}

#booth input{
  padding: 0.5em 1em;
  margin-top: .25em;
  color: #0032a0;
  border: 1px solid #fff;
  box-shadow: inset 0 0px 20px rgba(255, 255, 255, .5);
  border-radius: 99px;
  background: rgba(255, 255, 255, .25);
  transition: all .5s ease;
}

#booth input:hover, #booth input:active{
  box-shadow: inset 0 0px 20px rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .5);
}

#booth input[type="submit"] {
  background-color: #0032a0;
  color: #fff;
  box-shadow: inset 0px 0px 15px rgba(255, 255, 255, .5), 0px 5px 15px rgba(0, 50, 160, .35) !important;
  padding: 1em !important;
  width: 100%;
  margin: .5em 0 !important;
  border: solid 2px rgba(255,255,255,.75);
  transition: all .25s ease-in-out;
}
#booth input[type="submit"]:hover {
    box-shadow: inset 0px 0px 25px rgba(255, 255, 255, .55), 0px 7.5px 10px rgba(0, 50, 160, .25) !important;
    border: solid 2px rgba(255,255,255,.95);
}

#booth input[type="radio"] {
    display: none;
}

/* Display the radio buttons as a flex container */
#booth .radio-image-group {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping to a new line if necessary */
    gap: 20px; /* Adds space between the images */
}

#booth p+.radio-image-group{
	    margin-top: -15px;
}

/* Hide the default radio buttons */
#booth input[type="radio"] {
    display: none;
}

/* Container */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* spacing between cards */
  justify-content: space-between;
  margin: 0 0 2em;
}

/* Hide native radio button */
.radio-group input[type="radio"] {
  display: none;
}

/* Card styling */
.radio-card {
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;  /* stack elements vertically */
  align-items: center;     /* center horizontally */
}

.radio-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  border: solid 5px rgba(255,255,255,.5);
  box-shadow: 0px 5px 15px rgba(0, 50, 160, .25);
  border-radius: 50%;
  display: block;
}

.radio-card span {
  display: block;
  font-weight: bold;
  font-size: 1.05rem;
  margin-top: 0.25rem;
  line-height: 1.25;
  transition: all .5s ease;
}

.radio-card em {
  display: block;
  font-size: 0.8rem;
  line-height: 1.15;
  color: #202e6095;
  font-style: normal;
  margin-top: 0.25rem;
}

/* Hover effect */
.radio-group label{
    transition: all .5s ease;
}
.radio-group:hover label{
    filter:blur(1.5px);
    opacity: .95;
}
.radio-group:hover label:hover{
    filter:blur(0px);
    opacity: 1;
}
.radio-group label:hover .radio-card img {
  border: solid 5px #0032a075;
  filter: brightness(1.1);
  box-shadow: 0px 10px 10px rgba(0, 50, 160, .15);
  transform: translateY(-3px);
}

/* Active (checked) state */
.radio-group input[type="radio"]:checked + .radio-card img{
  border: solid 5px #0032a0;
  box-shadow: 0px 5px 5px rgba(0, 50, 160, .15);
}

/* Optional: highlight text when active */
.radio-group input[type="radio"]:checked + .radio-card span {
  color: #0073e6;
}

/* Each label as a flex item */
.radio-group label {
  flex: 1 1 calc(33.333% - 1rem); /* 3 columns on desktop */
  max-width: calc(33.333% - 1rem);
  cursor: pointer;
}

/* 2 columns on mobile */
@media (max-width: 768px) {
  .radio-group label {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
  .radio-card {
    padding: .5rem;
  }
}

.personalData input{
    margin-bottom: 2em;
}

body .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin: -1.5em 0 1em;
    direction: ltr;
    color: #0073e6;
    animation: breathe 2s infinite;
}
@-webkit-keyframes breathe {
    0% {
      opacity: .5;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: .5;
    }
}
@-moz-keyframes breathe {
    0% {
      opacity: .5;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: .5;
    }
}
@keyframes breathe {
    0% {
      opacity: .5;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: .5;
    }
}

/* Result */
#cause,#product{
  background: rgba(255, 255, 255, .1);
  padding: 2em;
  margin: 2em auto;
  border-radius: 1em;
  box-shadow: inset 0px 0px 30px rgba(255, 255, 255, .3);
  color: #0032a0;
}
.result .cause img{
  width: 100%;
  max-width:250px;
  height: auto;
  margin: 0 auto 0.5rem;
  border: solid 5px rgba(255,255,255,.5);
  box-shadow: 0px 5px 15px rgba(0, 50, 160, .25);
  border-radius: 50%;
  display: block;
}
.result .cause img:hover{
  box-shadow: 0px 5px 5px rgba(0, 50, 160, .15);
  transform: scale(.99);
}
.result h3,.result h4{
	  text-align:center;
  margin: .25em 0 .25em;
  color: #0073e6;
}
.result h4{
	  color:#0073e685
}
.result h5{
  margin-top:1em;
  border-top:solid 1px;
  padding-top:1em;
  font-size: 1.5em;
  margin-bottom: 1em;
}
.result p{
	text-align:justify;
}
.next{
  color:#202e60;
  margin-top:1em;
}
.button{
  display:block;
  text-align:center;
    background-color: #0032a0;
  color: #fff;
  border-radius:999px;
  box-shadow: inset 0px 0px 15px rgba(255, 255, 255, .5), 0px 5px 15px rgba(0, 50, 160, .35);
  font-family: var(--h1_typography-font-family);
  padding: .75em 1.5em;
  border: solid 2px rgba(255,255,255,.75);
  transition: all .25s ease-in-out;
}
.button:hover {
    box-shadow: inset 0px 0px 25px rgba(255, 255, 255, .55), 0px 7.5px 10px rgba(0, 50, 160, .25) !important;
    border: solid 2px rgba(255,255,255,.95);
  color:#fff;
}

.productImg {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  max-height: 200px;
  margin: 1em auto;
}

.productImg img {
  max-height: 225px;
  object-fit: contain;
  flex: 1 1 0;
  filter:brightness(1) drop-shadow(0px 0px 5px rgba(0, 50, 160, .15));
}
.productImg img:hover{
 transform: scale(1.025);
  filter:brightness(1.1) drop-shadow(0px 5px 15px rgba(0, 50, 160, .25));
}

#product h3{
  color:#0032a0;
  margin-top:1.25em;
}