/* ------------------------------------------------------------------------------------------------------------------------ */
  /* font-size: min(max(16px, 5vw), 20px); */
  html{
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  }
/* ------------------------------------------------------------------------------------------------------------------------ */
.contact{
  color:orange;
  padding: 1vh 1vw;
  height:100%;
  display:grid;
  grid-template-columns: 3fr 6fr 1fr;
  grid-template-rows: 3fr 26fr 3fr;
  gap: 1vh;
  font-size: 1rem;
  overflow: hidden;
}
.question-mid{
  grid-row:1/3;
  grid-column: 1/2;
  display:flex;
  /* padding-top: 1%;
  padding-bottom: 5%; */
  text-align: center;
  align-items: center;
  justify-content: center;
  /* border:3px solid rgba(248, 134, 58, 0.8); */
  border: 2px solid rgba(255, 255, 255, 0.245);

}
.question-mid img{
  height: 100%;
  width: auto; 
  display: block; 
  max-width: 100%; 
}
#qimage {
  transform-origin: center;
  display: block;
}
/* ------------------------------------------------------------------------------------------------------------------------ */
.clist-header{
  grid-column: 1/2;
  grid-row: 3/4;
  display:flex;
  background-color: rgba(0, 0, 0, 0.189);
  align-items: center;
  justify-content: end;
  padding-right: 1vw;
  color: beige;
  /* container-type:inline-size; */
}
.clist-header p{
  font-size: 0.6rem;
  font-weight: 200;
}
/* ------------------------------------------------------------------------------------------------------------------------ */
.cnt-center{
  color:beige;
  grid-column: 2/4;
  grid-row: 1/3;
  display:flex;
  align-items:end;
  justify-content: center;
  text-align:center;
  padding: 4%;
  overflow-y: auto; 
  background-color: rgba(0, 0, 0, 0.189);
  border: 2px solid rgba(255, 255, 255, 0.245);
}
.input-content {
  flex: 1;
  display:flex;
  flex-direction:column;
  align-items: center;
  /* justify-content:space-around; */
  font-weight:500;
  /* padding:0vh 1vw; */
  border-radius: 5px;
  box-sizing: border-box;
}

.header1{
  color: orange;
  font-weight: 600;
  font-size: 1.2rem;
  /* font-weight: bold; */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header1::before {
  content: "📧";
  font-size: 2rem; /* 1.5x of 2rem */
  line-height: 1;
  display: inline-block;
}


.feedback-input {
  font-family: 'Poppins', sans-serif;
  font-weight:500;
  font-size: 0.8rem;
  border-radius: 5px;
  /* line-height: 1.5rem; */
  background-color: transparent;
  border:1px solid rgba(248, 134, 58, 0.8);
  transition: all 1s;
  padding: 1vh 1vw;
  width:100%;
  outline:0;
  color: white;
}

label{
font-size: 0.4rem;
font-weight: 200;
font-style: italic;
align-self: start;
padding-left: 2vw;;
color:orange;
}
textarea {
  overflow: auto;
  min-height: 6rem;
  line-height: 0.8rem;
}

.feedback-input:focus {  border:2px solid white;}

#submit-button{
  /* width: 30%; */
  width: auto;
  height:15%;
  border:2px solid rgba(248, 134, 58, 0.8);
  border-radius:5px;
  /* padding: 0.8vh 0.8vw; */
  background-color: rgba(248, 134, 58, 0.2);
  color: rgba(255, 255, 255, 0.644);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight:bold;
  font-family: 'Poppins', sans-serif;
  margin-top: 3vh;
  /* line-height: 1.2rem; */
  white-space: nowrap;
  transition: all 0.5s;
}
#submit-button:hover { 
  background:rgba(248, 134, 58, 0.8); 
  border:2px solid rgb(6, 2, 61);
  border-radius: 5px;
  color:rgba(255,255,255,0.9);
} 
#form-message {
  color: rgb(235, 16, 16);
  width:90%;
  font-size: 0.6rem;
  text-align: center;
  justify-content: center; 
  font-weight: 500;
  border:3px solid rgba(250, 211, 72, 0.6);
  margin-top: 5vh;
  min-height: 3vh;
  padding: 1vh 1vw;
}
/* ------------------------------------------------------------------------------------------------------------------------ */
.scroller-clist{
  grid-column: 2/4;
  grid-row: 3/4;
  height:100%
  /* height: 6vh; */
}
  .scroller-inner-clist{
    display:flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    border: 2px solid orange;
    align-items: center;
    border-radius: 10px;
    background: rgba(116, 116, 215, 0.285);
    gap:1vw;
    width:100%;
    height: 100%;
    padding-inline: 0;
    overflow-x: hidden;
    justify-content: space-evenly;
  }
  .scroller-inner-clist img {
    height: 5vh;
    margin: 0.8vh 0.5vw;
    display:inline-block
  }

.scroller-clist[data-animated="true"]{
  overflow: hidden;
  -webkit-mask:
  linear-gradient(90deg, 
  transparent, white 20%, white 80%, transparent);
  mask:
  linear-gradient(90deg, 
  transparent, white 20%, white 80%, transparent);

  border: 3px solid rgba(1, 5, 19, 0.6);
}
.scroller-clist[data-animated="true"] .scroller-inner-clist{
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll
                      var(--_animation-duration, 30s)
                      var(--_animation-direction, forwards)
  linear infinite;
  /* animation-play-state: running; */
}

.scroller-clist[data-direction = "right"]{
  --_animation-direction: reverse;
}
.scroller-clist[data-direction = "left"]{
  --_animation-direction: forwards;
}

@keyframes scroll{
  to {
      transform: translate(calc(-50% - 0.2rem));
  }
}

/* ------------------------------------------------------------------------------------------------------------------------ */
@media(max-width: 500px){
  .contact{
    grid-template-columns: 1fr;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------ */