:root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --varyDarkBlue: hsl(234, 12%, 34%);
    --grayishBlue: hsl(229, 6%, 66%);
    --veryLightGray: hsl(0, 0%, 98%);
    --weight1: 200;
    --weight2: 400;
    --weight3: 600;
}

.typewriter{
  display: inline-block;
}
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  border-right: .15em solid black; /* The typwriter cursor */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .05em; /* Adjust as needed */
  animation: 
    typing 1.8s steps(50, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black; }
}

body {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    background-color: var(--veryLightGray);
}

.attribution { 
    font-size: 11px; text-align: center; 
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

h1:first-of-type {
    font-weight: var(--weight1);
    color: var(--varyDarkBlue);

}

h1:last-of-type {
    color: var(--varyDarkBlue);
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.5rem;
    }
}

.header {
    text-align: center;
    line-height: 0.8;
    margin-bottom: 50px;
    margin-top: 50px;
}

.header p {
    margin: 0 auto;
    line-height: 2;
    color: var(--grayishBlue);
}


.box p {
    color: var(--grayishBlue);
}

.box {
    border-radius: 5px;
    box-shadow: 0px 30px 40px -20px var(--grayishBlue);
    padding: 30px;
    margin: 20px;  
}
.img-contanier{
  margin-bottom: 50px;
}
img {
    width: 128px;
    height: 128px;
}

@media (max-width: 450px) {
    .box {
        min-height: 450px;
    }
}

@media (max-width: 950px) and (min-width: 450px) {
    .box {
        text-align: center;
        min-height: 200px;
    }
}

.cyan {
    border-top: 3px solid var(--cyan);
}
.red {
    border-top: 3px solid var(--red);
}
.blue {
    border-top: 3px solid var(--blue);
}
.orange {
    border-top: 3px solid var(--orange);
}

h2 {
    color: var(--varyDarkBlue);
    font-weight: var(--weight3);
    text-align: center;
}


@media (min-width: 950px) {
    .row1-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .box-down {
        position: relative;
        top: 150px;
    }
    .box {
        width: 30%;
     
    }
    .header p {
        width: 30%;
    }
    
}

input {
  appearance: none;
  border-radius: 0;
}

.card {
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 425px;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 0 10px 20px 0 rgba(#999, .25);
  padding: .75rem;
}

.card-form {
  padding: 1.5rem 1rem 0;
}

.input {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  padding-top: 1.5rem;
}

.input-field {
  border: 0;
  z-index: 1;
  background-color: transparent;
  border-bottom: 2px solid #eee; 
  font: inherit;
  font-size: 1.125rem;
  padding: .25rem 0;
}

.input-field:focus{
  outline: 0;
  border-bottom-color: #6658d3;
}

.action {
  margin-top: 2rem;
}

.action-button {
  font: inherit;
  font-size: 1.25rem;
  padding: 1em;
  width: 100%;
  font-weight: 500;
  background-color: #6658d3;
  border-radius: 6px;
  color: #FFF;
  border: 0;
}

.action-button:focus{
  outline: 0;
}

.action-button:disabled {
  font: inherit;
  font-size: 1.25rem;
  padding: 1em;
  width: 100%;
  font-weight: 500;
  cursor: not-allowed;
  background-color: rgb(229, 229, 229) !important;
  border-radius: 6px;
  color: #FFF;
  border: 0;
}

.card-info {
  padding: 1rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: #8597a3;
}

/* autocomplete */

#result , #resultJobs{
    z-index: 9;
}

#result ul, #resultJobs ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#result ul li, #resultJobs ul li{
    padding: 5px 0;
}
#result ul li:hover, #resultJobs ul li:hover{
    background: #eee;
}

/* creating css loader */

#loading {
    display:    none;
    position:   fixed;
    color: black;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
    url('../images/loading.gif')
    50% 50%
    no-repeat;
}