/* .form {
    background-color: #15172b;
    border-radius: 20px;
    box-sizing: border-box;
    padding-top: 5px;
    width: 300;
    margin: auto;
  } */
  
  .title {
    color: #eee;
    font-family: sans-serif;
    font-size: 36px;
    font-weight: 600;
    margin-top: 30px;
  }
  
  .subtitle {
    color: #eee;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
  }
  
  /* .input-container {
    height: 40px;
    position: relative;
    width: 100%;
  } */
  
  /* .ic1 { margin-top: 20px }
  .ic2 { margin-top: 20px } */
  
  /* .input {
    background-color: #303245;
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    font-size: 18px;
    height: 100%;
    outline: 0;
    padding: 4px 10px 0;
    width: 100%;
  } */
  /* .textarea {
    background-color: #303245;
    border-radius: 12px;
    border: 0; 
    box-sizing: border-box;
    color: #eee;
    font-size: 18px;
    height: 100%;
    outline: 0;
    padding: 4px 10px 0;
     width: 100%;
  } */
  
  /* .cut {
    background-color: #15172b;
    border-radius: 10px;
    height: 20px;
    left: 20px;
    position: absolute;
    top: -20px;
    transform: translateY(0);
    transition: transform 200ms;
    width: 50px;
  } */

  /* .cut_textA {
  width: 120px;
} */
  
  /* .cut-short { width: 50px; }
  .cut_country { width: 58px; } */
  
  /* .input:focus ~ .cut, 
 .input:not(:placeholder-shown) ~ .cut { transform: translateY(8px) } */

 /* .textarea:focus ~ .cut, 
 .textarea:not(:placeholder-shown) ~ .cut { transform: translateY(8px) } */

  
  /* .placeholder {
    color: turquoise;
    font-family: sans-serif;
    left: 20px;
    line-height: 14px;
    pointer-events: none;
    position: absolute;
    transform-origin: 0 50%;
    transition: transform 200ms, color 200ms;
    top: 20px;
  } */
  
  /* .input:focus ~ .placeholder,
  .input:not(:placeholder-shown) ~ .placeholder { transform: translateY(-30px) translateX(10px) scale(0.75) }
  .input:not(:placeholder-shown) ~ .placeholder { color: turquoise; }
  .input:focus ~ .placeholder { color: turquoise; } */
  
  /* .textarea:focus ~ .placeholder,
  .textarea:not(:placeholder-shown) ~ .placeholder { transform: translateY(-30px) translateX(10px) scale(0.75) }
  .textarea:not(:placeholder-shown) ~ .placeholder { color: turquoise; }
  .textarea:focus ~ .placeholder { color: turquoise; } */

  /* .submit {
    background-color: #08d;
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    height: 40px;
    margin-top: 12px;
    outline: 0;
    text-align: center;
    width: 100%;
  } */
  
  /* .textareaMore {
    resize: none;
      overflow: hidden;
      transition: height 0.3s; 
    } */

    /* .textareaMore {
      resize: none;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
      transition: height 0.3s;
    } */
  /* .submit:active { background-color: #06b } */
  .channel > button{font-size: 1.8rem;}
  @media (min-width: 551px) and (max-width: 750px) {.form{ width: 400px} .res{width:400px} .fee{width:400px}}
  @media (max-width: 550px) {.form{ width: 300px} .res{width:300px} .fee{width:320px} .gf{font-size: 15px;} .imgs{width:300px;height: 380px;} .why{width: 280px; font-size: 1.02rem;} .img{width:296px} .course{width: 350px;} .cour{ font-size: 15px } .nazra{ width: 330px } .tafseer{width: 120px;} .hifz{width: 230px;} .qaida{width: 90px;} .channel > button{font-size: 1rem;}}
  @media (max-width: 360px) { .why { font-size: .9rem; line-height: 1rem; height: 40; } .imgs{ height: 370px } .quran-text{ font-size: 25px; line-height: 1.5rem; } .cour{ font-size: 12.5px } .gf{font-size: 15px;}}