body{
   margin: auto;
   min-height: 100vh;
   overflow: auto;
   font-weight: 100;
   font-style: normal;
   font-family: "Poppins", sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 1.2rem;
   box-sizing: border-box;
   background-color: #181e2b;
}
label{
   color: #fff;
   font: 14px system-ui, sans-serif;
}
.input-div{
   display: flex;
   justify-content: center ;
   box-shadow: 0 10px 15px -1px rgba(0, 0, 0, 0.2),0 4px 10px -2px rgba(0, 0, 0, 0.2);
   flex-direction: column;
   border: none;
   background-color:  rgb(255, 255, 255, 0.2);
   transition: all 0.1s ease-in;
   margin: auto;
   margin: 0 auto;
   width: 500px;
   text-align: center;
   aspect-ratio: 1/0.7;
   border-radius: 10px;
}
.color-input {
   background-color: #ffffff00;
   color: #fff;
   padding: 20px;
   text-align: center;
   font-size: 2.5em;
   border:  none;
   outline: none;
   text-decoration-thickness: 1px;
   font-weight: bold;
}
.whatsapp{
   display: flex;
   margin:0 auto;
   color: #fff;
   font-family: sans-serif;
   align-items: center;
   width: 90%;
   justify-content: space-between;
}
.issues{
   color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
}
footer a{
   color: #fff;
}
@media (max-width: 768px) {
   .input-div {
      width:100%;
      font-size: 16px;
   }
}
.feedback-btn{
   position: fixed; 
   right: 20px; 
   padding: 0.7rem;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #ccc;
   bottom: 20px; 
   background: linear-gradient(135deg, #3a8dde 0%, #181e2b 100%);
   border: none; 
   cursor: pointer; 
   font-size: 1.7rem;
   z-index: 1000;
   transition: all ease-in-out 0.3s ;
}
.feedback-btn:hover{
   scale:0.9;
}
.feedback-btn:active{
   scale: 0.7;
}
.form{
   display:none;
   font-weight: bolder;
   font-family: "Poppins", sans-serif;
   flex-direction: column;
   background-color: rgb(34, 41, 60);
   box-shadow: 0 8px 24px 0 rgba(0,0,0,0.18);
   border-radius: 20px;
   min-width: 300px;
   position: fixed;
   right: 10px;
   bottom: 57px;
   padding: 1.3rem;
   margin: 1rem;
}
@keyframes slideInBottomRight {
   0% { transform: translate(100%, 100%) scale(0.7); opacity: 0;}
   80% { transform: translate(0, 0) scale(0.98); opacity: 1;}
   100% { transform: translate(0, 0) scale(1);opacity: 1;display: flex;}
}
@keyframes slideOutBottomRight {
   0% { transform: translate(0, 0) scale(1); opacity: 1;}
   20% { opacity: 1;}
   100% { transform: translate(100%, 100%) scale(0.7); opacity: 0; display: none;}
}
.slideOutBottomRight{ animation: slideOutBottomRight 0.6s forwards;}
.slideInBottomRight{ animation: slideOutBottomRight 0.6s forwards;}
label{
   margin-top: 15px;
   font-weight:400;
   color: #ccc;
}
.input{
   margin-top: 5px;
   padding: 0.8rem;
   border-radius:7px;
   background-color: rgb(76, 85, 105);
   color: #fff;
   border: none;
}
.input:focus{
   outline: 1px solid #3a8dde;
   outline-offset: 1px;
   box-shadow: 0 0 0 2px #3a8dde33;
}
textarea{
   resize: none;
   scrollbar-width:thin;
   scrollbar-color: #a9a9a9 #fff;
   overflow: auto;
   min-height: 100px;
   font-size: 1em;
}
.submit-feedback{
   display: flex;
   justify-content: center;
   margin-top: 10px;
}
#submit-feedback{
   color: #ccc;
   background: linear-gradient(135deg, #4182c3 , #2c3f69);
   border: none;
   font-weight:bold;
   border-radius: 20px;
   padding: 0.6rem;
   width: 60%;
   cursor: pointer;
   transition: all ease-in-out 0.3s ;
}
#submit-feedback:hover{
   background: linear-gradient(135deg, #2c3f69, #4182c3);
   color: #fff;
   scale:1.05;
}
#submit-feedback:active{
   scale:1;
}
@media (max-width: 600px) {
   .form {
      min-width: unset;
      left: 2.5vw;
      right: 2.5vw;
      box-sizing: border-box;
      padding: 1rem;
      max-width: 90vw;
   }
}
.cancel-btn{
   position: fixed;
   top: 10px;
   right: 15px;
   font-size: 1.3rem;
   color: #ccc;
   cursor: pointer;
}