@import url("https://fonts.googleapis.com/css2?family=Arya:wght@400;700&display=swap");
@import url('nav.css');
@import url("footer.css");
@import url("chat.css");
p,h1,h3,h2,:placeholder-shown,select,button,input, textarea{
 font-family: "Arya", sans-serif;
 font-weight: 400;
 font-style: normal;
}
body {
   background-image: url('Short\ bg.png');
   background-attachment: scroll;
   background-repeat: no-repeat;
   background-size: 100% auto;
   overflow-x: hidden;
   margin: 0;
 }
@media (max-width: 768px) {
    body {
      background-image: url('long-bg.png');
    }
}
html{
   margin: 0;
}
#topSection{
  height: 11vw;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
}
#topLogo{
  height: 6vw;
  margin-top: 4vw;
}
#feedbackText{
  text-align: center;
  line-height: 10vw;
  letter-spacing: 2.8vw;
  margin-top: 4vw;
  font-size: 2.1vw;
}
.formBox{
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   margin-top: 1vw;
}
.title{
   font-size: 2vw;
   letter-spacing: 0.3vw;
   text-align: left;
   color:#222958;
}
.title h2 {
   margin-bottom: 0.3vw;
}
.title p {
   margin-top: 0;
}
.feedbackForm{
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   gap: 1vw;
   height: 40vw;
   border-radius: 5vw;
   width: 60vw;
   border-style: none;
   border-color: #222958;
   border-width: 0.25vw;
   background-color: rgba(255, 255, 255, 0.8);
   border: solid, 0.2vw #FEB84E;
   transition: all 0.5s ease;
   padding: 1%;
}

.feedbackForm:hover {
   background-color: rgba(255, 255, 255, 0.92);
   box-shadow: 0 0 0.5vw #e0c282;
   transition: all 0.5s ease;
   opacity: 20;
}

#selectSection{
   height: 3vw;
   width: 50vw;
   border-radius: 1vw;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   border-style: solid;
   border-color: #222958;
   border-width: 0.1vw;
   background-color: rgba(255, 255, 255, 0);
   font-size: 1vw;
   color: #222958;
}
.IDinput{
   display: flex;
   flex-direction: column;
   height: 3vw;
   width: 50vw;
   border-radius: 1vw;
   border-style: solid;
   border-color: #222958;
   border-width: 0.1vw;
   background-color: rgba(255, 255, 255, 0);
   font-size: 1vw;
   color: #222958;
}
.mainFeedbackInput{
   display: flex;
   flex-direction: column;
   height: 20vw;
   width: 50vw;
   border-radius: 1vw;
   resize: none;
   border-style: solid;
   border-color: #222958;
   border-width: 0.1vw;
   background-color: rgba(255, 255, 255, 0);
   font-size: 1vw;
   color: #222958;
}
.submitButton{
   height: 3vw;
   width: 9vw;
   font-size: 2vw;
   color: #FFAA4C;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   border-radius: 0.7vw;
   background-color: #222958;
   box-shadow: inset 0 0 0 0.12vw #FFAA4C;
   transition: all 0.3s ease;
}
.submitButton:hover{
   background-color: #2d3372;
   color: #ffd08a; 
   transform: translateY(-0.2vw) scale(1.05);
   transition: all 0.3s ease;
}
.spacerSection{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.spacer{
   width: 70vw;
   height: auto;
   display: block;
}
.whatsNext{
   height: 10vw;
   width: 40vw;
   background-color: rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
   border-radius: 1vw;
   margin: auto;
   margin-top: 2vw;
   margin-bottom: 4vw;
   gap: 0.1vw;
   transition: all 0.3s ease;
} 

.whatsNextTitle {
   margin: 0;       
   font-size: 2.5vw;
}
.whatsNextText {
   margin: 0;       
   font-size: 1.2vw;
}
@media (max-width: 768px){
   body{
      background-image: url('long-bg.png');
   }
   #topSection{
       height: 18vw;
   }
   #feedbackText{
       font-size: 4vw;
       letter-spacing: 4vw;
       margin-top: 6vw;
   }
   #topLogo{
      height: 8vw;
  }
  .title{
   font-size: 3vw;
  }
  .feedbackForm{
   height: 85vw;
   width: 75vw;
  }
  #selectSection{
   width: 71.5vw;
   height: 8vw;
   font-size: 2vw;
  }
  .IDinput{
   width: 70vw;
   height: 8vw;
   font-size: 2vw;
  }
  .mainFeedbackInput{
   width: 70vw;
   height: 30vw;
   font-size: 2vw;
  }
  #submitButton{
   height: 6vw;
   width: 5vw;
   margin-top: 3vw;
  }
  .submitButton{
   height: 6vw;
   width: 30vw;
   font-size: 3vw;
   margin-top: 2vw;
  }
  .spacer{
   width: 80vw
  }
  .whatsNext{
   height: 15vw;
   width: 50vw;
   margin-bottom: 6vw;
  }
  .whatsNextTitle{
   font-size: 3.5vw;
  }
  .whatsNextText{
   font-size: 1.75vw;
  }
}