/* body{
    display: flex;
    flex-direction: column;
    align-items: center;

} */


/* MAIN-SECTION */
   .section-form{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 0 auto;
      justify-content: center;
      width: 100%;
   }

/* FORM */
   .form{
      display: flex;
      /* position: relative; */

      justify-content:space-between;
      width: 250px;
      background-color: rgba(255, 255, 255, 0.11);
      padding: 5px 20px;
      border-radius: 28px;
      /* transition: 0.3s; */

   }
   .form:hover{
      border: 1px solid var(--clr-interaction);

   }
   .form__input {
      padding: 5px 20px;
      border: none;
      border-radius: 28px;
      background:transparent;
      outline: none;
      /* margin-right: 10px; */
      color: rgb(171, 202, 248);
      font-size:var( --size-sm) ;
      font-family: 'Montserrat', Arial, sans-serif;
       /* font-family: 'Lato', Helvetica, Arial, sans-serif; */
      
      }
  
  .form__input::placeholder {
   color: rgba(255, 255, 255, 0.452);
   font-family: 'Montserrat', Arial, sans-serif;
   font-style: italic;
   }

   /*button*/
   .form__submit{
      background:transparent;
      border: none;
      /* margin-right: 10px; */
   }
   .form__submit:hover{
     cursor: pointer;
     transform:scale(1.1);
     transition: 1s;
   }

   .fa-search{
      color: var( --clr-interaction);
   }
   /* form suggestions */
   .suggestions{
      padding: 5px 20px;
      position:absolute;
      background-color: #1e1e1ef5;
      width: 250px;
      border-radius: 5px;
      z-index: 1;
   } 
   .form__suggestion-item{
      padding: 15px 0px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.137);
      color: #c5d8ee96;
      display: flex;
      align-items: center;
      gap: 8px;
   }
   .form__suggestion-item:hover{
      border-bottom: 1px solid var(--clr-interaction);
      color: #c5d8eece;
      cursor: pointer;
   }
   .form__suggestion-item .icon{
      width: 20px;
      height: 20px;
   }
 
   /* INTODUCTION */
   .introduction{
      width: 85%;
      margin: 0 auto;
   }
   /* xs */
/* @media(min-width :475px){
 
} */
/* s */
/* @media(min-width :640px){
   
} */
/* m */
@media(min-width :768px){
   .form, .suggestions{
      width: 300px;
      padding: 10px 20px;
   }
   
   .form__input {  
      font-size:16px ;
      }
}
/* l */
/* @media(min-width :1024px){
   
} */
/* xl */
@media(min-width :1280px){
   .form__input {  
      font-size:18px ;
      }
}
/* 2xl */
/* @media(min-width :1536px){