@import "_colors";
@import "_fonts";

#jobs{
  .emailSignupWidget{
    width:600px;
    max-width:96%;
    display:block;
    padding:30px;
    position:relative;
    background-color:$color_purple;
    //background-image:var(--purpleBG);
    border-radius:10px;
    background-size:cover;
    background-position:top right;
    margin:10px;
    margin-left:auto;
    color:#fff;
    margin-right:auto;
    form{
      position:static !important;
    }


    .bgIcon{
      z-index:0;
      position:absolute;
      color:#fff;
      opacity:0.1;
      transform:rotate(-12deg);
      left:-80px;
      width:250px;
      height:250px;
      top:-30px;
    }





    h3, h4{

      margin:0px;
      padding:3px;

    }

    h3{
      margin-bottom:10px;
      u{
        color:#00e8ff;
      }
    }

    h4{
      opacity:0.9;
      font-size:14px;
    }

    form{
      display:grid;
      grid-template-columns:2fr 1fr;
      grid-column-gap:10px;
    }

    input[type='email']{
      padding:12px;
      border-radius:10px;
      border:2px solid #00e8ff;
      width:100%;
      margin-top:0px;
    }

    button{

      background-color:#1d86f2;
      background:linear-gradient(to bottom right,#00e8ff,#1d86f2,#1d86f2);
      background-size:130% auto;
      box-shadow:0px 2px 4px rgba(0,0,0,0.2);
      color:#fff;
      width:180px;
      height:50px;
      font-size:14px;
      text-shadow:-1px -1px 0px rgba(0,0,0,0.5);

    }

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

      h3{
        text-align:center;
      }
      form{
        grid-template-columns:1fr;
        grid-template-rows:auto auto;
        grid-row-gap:10px;

      }

      button{
        display:block;
        width:fit-content;
        width:-webkit-fit-content;
        width:-moz-fit-content;
        margin-left:auto;
        margin-right:auto;

      }
    }
  }
}