body{
  font-family: Arial, sans-serif;
  background:#ffe6eb;
  /* padding:20px; */
}
header{
    border-bottom: 1px solid #e6005c !important;
}

.navbar-brand{
  font-weight: 700;
  font-size: 2rem;

  background-image: linear-gradient(
    135deg,
    #e6005c 0%,
    #ff4d6d 35%,
    #ff7aa2 65%,
    #e6005c 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 2px 10px rgba(255, 77, 109, 0.35);
}
.navbar-brand:hover{
  background-image: linear-gradient(
    135deg,
    #e6005c,
    #ff85c1,
    #e6005c
  );
}

.box{
    margin-top: 3rem !important;

  max-width:420px;
  background:#fff;
  padding:20px;
  margin:auto;
  border-radius:14px;
  box-shadow:0 0 15px rgba(0,0,0,0.1);
}
 
h2, h1{
  /* text-align:center; */
  color:#e6005c;
}
input, select, button{
  width:100%;
  padding:10px;
  margin-top:12px;
  font-size:15px;
  outline: none;
  border-radius: 5px;
}
input:focus{
    border: 2px solid #e6005c;
}
select option:checked{
  background-color: #ff7aa2 !important;
  color: #fff;
}

select option:hover{
  background-color: #c9184a !important;
  color: #fff;
}

button{
  background:#e6005c;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
}
button:hover{
  background:#cc0052;
}
.step{ display:none; }

.result{
  text-align:center;
  font-size:18px;
  margin-bottom:8px;
}

.score-text{
  font-size:22px;
  font-weight:bold;
  text-align:center;
  margin-bottom:10px;
}
.rname{
    font-size: 1.5rem;
    text-transform: capitalize;
    font-weight: bold;
}
.lovescore{
    color: #e6005c;
}
/* Gradient Heart Icon */
.heart-icon{
  background: linear-gradient(45deg, #ff4d6d, #ff0055);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display:inline-block;
}

/* Progress Bar */
.love-bar{
  width:100%;
  height:32px;
  background:#f1f1f1;
  border-radius:30px;
  overflow:hidden;
}

.love-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff4d6d,#ff0055);
  color:#fff;
  font-weight:bold;
  text-align:center;
  line-height:32px;
  transition:width 2.5s ease-in-out;
}

.content-area{
    min-height: 80vh;
    padding: 3rem 0;
    margin: 1rem 0;
}


  .info{
        display: flex;
        align-items: center;
        /* justify-content: center; */

    }
    .info i{
        font-size: 2rem;
        margin: 0 10px;
    }
     .info a{
        font-size: 1.2rem;
        text-decoration: none;
        color: black;
    }





    footer{
        background-color: #ffe6eb;
        padding: 1rem 0;
        border-top: 1px solid #e6005c;
    }
    footer div ul{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        list-style: none;
    }
    footer div ul a{
        color: black;
        text-decoration: none;
        font-size: 17px;
    }
    footer div ul a:hover{
        color: #e6005c;
    }
    footer div p{
        color: black;
        text-decoration: none;
        font-size: 17px;
        text-align: center;
    }
    .boxi{
        font-size: 2rem !important;
  background-image: linear-gradient(
    135deg,
    #e6005c 0%,
    #ff7aa2 40%,
    #ffb3c6 70%,
    #ffe3ec 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    }


    .clickableHeart{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 0;
    }

.clickableHeart > i{
  font-size: 4rem !important;

  background-image: linear-gradient(
    135deg,
    #e6005c 0%,
    #ff7aa2 40%,
    #ffb3c6 70%,
    #ffe3ec 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.55)); */
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.clickableHeart > i:hover{
  transform: scale(1.15);
  /* filter: drop-shadow(0 0 16px rgba(255, 105, 180, 0.8)); */
}








    /* ///  */

    /* hear animation  */




.heart2{
    font-size: 3rem !important;
    font-weight: bold;

}
/* Common animation class */
#heart-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.heartAnime{
  position: absolute;
  top: 110vh;                 /* screen ke niche se start */
  font-size: 8rem;
  animation: flyUp 5s linear forwards;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes flyUp{
  0%{
    top: 110vh;
    opacity: 1;
  }
  100%{
    top: -20vh;               /* screen ke upar tak */
    opacity: 0;
  }
}

/* Heart gradients */


/* Romantic Red → Pink */
.heart0{
  background-image: linear-gradient(135deg, #ff0844 0%, #ff5e8a 50%, #ff99ac 100%);
}

/* Soft Rose → Peach */
.heart1{
  background-image: linear-gradient(135deg, #ff758c 0%, #ff7eb3 45%, #ffd1dc 100%);
}

/* Deep Love Pink → Purple */
.heart2{
  background-image: linear-gradient(135deg, #ff4d6d 0%, #c9184a 50%, #720026 100%);
}

/* Romantic Purple → Pink Glow */
.heart3{
  background-image: linear-gradient(135deg, #c77dff 0%, #ff6ec7 50%, #ffb3e6 100%);
}

/* Peach → Warm Gold Love */
.heart4{
  background-image: linear-gradient(135deg, #ffb703 0%, #ff8fab 50%, #ffd166 100%);
}

/* Soft Candy Pink */
.heart5{
  background-image: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fbc2eb 100%);
}

/* Wine Red → Blush Pink */
.heart6{
  background-image: linear-gradient(135deg, #800f2f 0%, #d6336c 50%, #ffb3c1 100%);
}
.heartAnime{
  filter: drop-shadow(0 0 12px rgba(255,105,180,0.45));
}
@keyframes pulseLove{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

.heartAnime{
  animation:
    flyUp 4.5s linear forwards,
    pulseLove 1.2s ease-in-out infinite;
}