/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/

.body-container-wrapper{
  padding:0px;
  margin:0px;
}

.header-form{
  padding:24px 0px;
  background-color: #006DB3; 
  
  .dnd-column{
    width:100%;
    display: flex;
    justify-content: space-between;
    border-radius:16px;
    margin:0px;
    padding:0px;
    
    img{
      height:80px !important;
      width: auto !important;
    }
  }
}

.hero-form{
  padding:24px 0px;
  
  .dnd-column{
    width:100%;
    display: flex;
    gap:24px;
    margin:0px;
    padding:0px;
    
    .widget-type-rich_text{
      
      padding:24px;
      background-color: rgba(254, 254, 254, 0.6);
      border-radius:16px;
      
      span{
        display:flex;
        flex-direction: column;
        gap:16px;
        
        h1,h2,p,ul{
         margin:0px;
        }
        
        h1{
          font-size:32px;
        }
        
        h2{
          font-size:26px;
        }
        
        p,ul{
          font-size:16px;
        }
      }
    }
    
    .hsfc-Step__Content{
      padding: 24px !important;
      background-color: #FEFEFE;
      border-radius: 16px;
      
      button{
        width:100%;
      }
      
      .hsfc-RichText{
        
        p{
          margin:16px 0px 0px 0px;
        }
      }
    }
  }
}

.footer-form{
  padding:24px 0px;
  
  .dnd-column{
    width:100%;
    display: flex;
    flex-direction:column;
    gap:16px;
    margin:0px;
    padding:0px;
    justify-content:center;
    
    .widget-type-linked_image{
      display:flex;
      justify-content: center;
    }
    
    .widget-type-rich_text{
    
      span{
      
        p{
          margin:0px;
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 768px){
  
  .header-form{
    padding:24px 16px;
    
    .dnd-column{
      
      img{
        height:60px !important;
        width: auto !important;
      }
    }
  }
  
  .hero-form{
    padding:24px 16px;

    .dnd-column{
      flex-direction: column;
      gap:16px;
      margin:0px;
      
      
      }
    }
  }

}