@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
 
 :root {
  --primary-color: #047aed;
  --secondary-color: #1c3fa8;
  
  --dark-color: #70777B; /*#33383B;*/
  --light-color: white;
  --odoo-color: #714B67;
  --success-color: #5cb85c;
  --error-color: #d9534f;
  --main-color: #800000;
  --accent-color: #C16060;
  --matching-color: #800000;

    --step--1: clamp(1.33rem, calc(0.78rem + 0.77vw), 0.94rem);
    --step-0: clamp(1.13rem, calc(0.78rem + 1.71vw), 2.00rem);
  --step-1: clamp(1.15rem, calc(0.71rem + 3.22vw), 2.20rem);
  --step-2: clamp(1.62rem, calc(0.50rem + 5.62vw), 4.50rem);
   }
   
   * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
   }
   
 
   body {
     font-family: 'Roboto', sans-serif;
     color: #fff;
     background-color: var(--dark-color);
     line-height: 1.6;

   }

   h1 {
     font-size: var(--step-1);
     letter-spacing: 0.2px;
     line-height: 1.2;
   }

  

   .contact {
     position: relative;
     min-height: 100vh;
     padding: 0px 100px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     /*background: url(/images/IDS_Logo_No_BG.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size:40% ;*/
   }

   .contact .content {
     max-width: 900px;
     text-align: center;
     
   }

   .container {
     width: 100%;
     margin-top: 0px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .container .contactInfo {
     width: 60%;
     display: flex;
     flex-direction: column;
     gap: 50px;
   }

   .container .contactInfo .box {
    position: relative;
    padding: 10px 0;
    display: flex;
    
  }

  

  .container .contactInfo .box .text {
    display: flex;
    margin-left: 20px;
    font-size: 16px;
    flex-direction: column;
  }




.showcase-form {
    /*position: relative;
       top: 60px;
    height: 350px;
    width: 400px;
    
    z-index: 100;*/
  width: 40%;   
  padding: 40px;
  opacity: 0.8;
    /*animation: slideInFromRight 2s ease-in; */
  }
  
  

  .showcase-form .form-control {
    position: relative;
    width: 100%;
    margin: 10px 0;
  }
  
.showcase-form .form-control input
  {
    border: none;
    border-bottom: 1px solid #b4becb;
    width: 100%;
    margin: 10px 0;
    font-size: 16px;
    outline: none;
    
  }

  .showcase-form .form-control textarea
  {
    background-color: rgb(210, 227, 238);
    border: none;
    border-bottom: 1px solid #b4becb;
    width: 100%;
    margin: 10px 0;
    font-size: 16px;
    outline: none;
    
  }

 
  .showcase-form .form-control span {
    position: absolute;
    left: 0;
    pointer-events: none;
  }
  
  .showcase-form .form-control input:focus ~ span,
  .showcase-form .form-control input:valid ~ span,
  .showcase-form .form-control textarea:focus ~ span,
  .showcase-form .form-control textarea:valid ~ span {
  
    color: var(--accent-color);
    font-size: 12px;
    transform: translate(-10px, -15px);

  }
  
   
  .showcase-form .back .btn{
    align-items: center;
  }

  textarea {
    resize: none;
  }

  @media screen and (max-width: 991px) {
    .contact {
      padding: 50px;
    }

    .container {
      flex-direction: column;
    }

    .container .contactInfo {
     
      margin: 20px auto;
      
      
    }

    .container .contactInfo,
    .showcase-form {
      width: 100%;
    }
  }
  
  @media (max-width: 500px) {
  
  
    /*reduce font size in buttons on mobile screens*/
    
    .showcase-form .form-control input {
      font-size: 0.5em;
       }
  
   }