@font-face {
    font-family: kalameh;
    src: url("../fonts/KalamehWeb-Medium.woff2");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: kalameh;
  scroll-behavior: smooth;
}

img{
  user-select: none;
}

/* CONTACTUS START */

.contactus{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0px 10px;
  margin: 50px 0px;
}
.contactus-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 1200px;
  gap: 30px;
}

.contactus-rast{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  width: 500px;
}
.contactus-rast-title{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.contactus-rast-title p{
  font-size: 18px;
  color: gray;
}
.contactus-rast-title h1{
  font-size: 30px;
  position: relative;
}
.contactus-rast-title h1 span{
  color: red;
}
.contactus-rast-title h1::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 165px;
  height: 3px;
  background-color: red;
  border-radius: 3px;
}
.contactus-rast-desc{
  width: 100%;
  text-align: justify;
  color: gray;
}

form{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  width: 500px;
}

.form-name,
.form-tel,
.form-about,
.form-desc{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.form-name input,
.form-tel input,
.form-about input,
.form-desc textarea{
  outline: none;
  padding: 5px 10px;
  width: 100%;
  border: 3px solid rgba(128, 128, 128, 0.5);
  border-radius: 5px;
  font-size: 16px;
  text-align: right;
  color: gray;
  resize: none;
}
.form-name input::placeholder,
.form-tel input::placeholder,
.form-about input::placeholder,
.form-desc textarea::placeholder{
  font-size: 14px;
  color: rgba(128, 128, 128, 0.7);
}
.form-btn input{
  outline: none;
  padding: 5px 20px;
  border: 2px solid #5462FF;
  background-color: #5462FF;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: all .5s;
}
.form-btn input:hover{
  background-color: white;
  color: #5462FF;
}

/* CONTACTUS END */
















/* RESPONSIVE START */

@media screen and (max-width:768px) {

  .contactus-container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  .contactus-rast{
    width: 100%;
  }
  .contactus-rast-title h1{
    font-size: 20px;
  }
  form{
    width: 100%;
  }
  
}

@media screen and (min-width:769px) and (max-width:1200px) {

  .contactus-container{
    width: 100%;
  }
  
  .contactus-rast{
    width: 100%;
  }
  form{
    width: 100%;
  }
  
}

/* RESPONSIVE END */