:root {
    --primary-color-dark-blue-1: hsl(217, 28%, 15%);
    --primary-color-dark-blue-2: hsl(218, 28%, 13%);
    --primary-color-dark-blue-3: hsl(216, 53%, 9%);
    --primary-color-dark-blue-4: hsl(219, 30%, 18%);
    --accent-color-cyan: hsl(176, 68%, 64%);
    --accent-color-blue: hsl(198, 60%, 50%);
    --neutral-color-white: hsl(0, 0%, 100%);
    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --padding-sm: 2.5rem 2rem;
    --padding-md: 3.5rem 3rem;
    --padding-lg: 4.5rem 4rem;
    --padding-footer: 15rem 4rem 1rem;
    --padding-footer-tablet: 20rem 3rem 1rem;
    --padding-footer-mobile: 25rem 3rem 1rem;
}
body {
    background:#fff;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
}
.lg-p {
    font-size: 1rem;
}

a {
    color: var(--neutral-color-white);
    font-family: var(--font-heading);
    text-decoration: none;
}


.f{
    display:flex !important;
}
a:hover {
    color: var(--accent-color-cyan);
    transition: 600ms;
}



.intro img,
.productive img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.WorkSans-800 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #602482;
}
.para{
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: rgba(128, 0, 1, 1) !important;
    font-size: 25px;
    line-height: 1.5;
    padding: 10px 0px 0px 10px;
    
}
.color-purple{
        background-color: #2b0f51 !important;
        color: #fff;
    font-weight: bold;
        }
        @media (min-width: 320px) and (max-width: 500px){

    .WorkSans-400 {
        font-size: 25px;
    }
    button {
    height: 70px;
    width: 340px !important;
        }
        .WorkSans-800 {
    
    font-size: 30px;
        }
        .para {
            font-size: 22px;
            padding: 15px 0px 0px 9px;
        }
        .line{
            display: none;
        }
}
.para span{
    color: #2b0f51;
    /*font-weight: bold !important;*/
}





input {
    height: 3rem;
    padding-left: 12px;
    border: none;
    border-radius: 25px;
    background-color: var(--neutral-color-white);
}

.btn {
    display:flex;
    justify-content:center;
}

button:hover {
    color: red;
    cursor: pointer;
    background: linear-gradient(50deg, var(--neutral-color-white), var(--neutral-color-white));
    border: 2px solid red;
}

.para a{
  font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: rgba(128, 0, 1, 1) !important;
    font-size: 25px;
    line-height: 1.5;
    padding: 10px 0px 0px 0px;
}
.para a:hover{
  color: #800020;
}





.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


 .divider{
    border: 1px solid grey;
    width: 90%;
    align-items: center;
    display: flex;
    margin: auto;
 }   
    



.content {
           z-index: 1;
           width: 100%;
           max-width: 600px;
           height: auto !important;
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
           position: relative;
       }

     .space {
 height: 100%;
}


/* The container */
.check-box {
  display: flex;
  font-family: arial;
  line-height: 15px;
  position: relative;
  padding-left: 49px;
  margin-bottom: 20px;
  padding-top: 11px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bolder;
  text-transform: uppercase;
}

/* Hide the browser's default checkbox */
.check-box input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

/* Create a custom checkbox */
.checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 35px;
 width: 35px;
 background-color: #eee;
}

/* On mouse-over, add a grey background color */
.check-box:hover input ~ .checkmark {
 background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-box input:checked ~ .checkmark {
 background-color:rgba(128, 0, 1, 1) !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.check-box input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.check-box .checkmark:after {
 left: 12px;
 top: 3px;
 width: 8px;
 height: 20px;
 border: solid white;
 border-width: 0 3px 3px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
.box-check{
   
display: flex;
   
flex-direction: column;
   
top: 00px;
   
position: relative;
}
label{
   display: flex;
}

.contact-form{
   display: flex;
   position: relative;
   width: 100%;
   max-width: 600px;
   left: 3.3%;
}
.container_checkbox{
   left: 0px;
   width: 500px;
}
@media (min-width: 320px) and (max-width: 500px) {

   .intro-img img {
       width: 100% !important;
   }


}

.divide{
  width: 100%;
  color: red;
  border: 1px solid #000;
}

.box-c {
  padding: 7px;
}

.box-c p {
  padding-bottom: 5px;
  border-bottom: 2px solid #d0cfcf;
}

.box-c p:first-of-type {
  margin-top: 0;
}

.box-c p:last-of-type {
  margin-bottom: 0;
}

input[type="checkbox"] {
  display: none;
}

label {
  cursor: pointer;
  font-size: 16px;
  font-weight: bolder;
  text-transform: uppercase;
}

input[type="checkbox"] + label span {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: -2px 10px 0 0;
  background: #fff;
  border: 2px solid #d0cfcf;
  cursor: pointer;
  vertical-align: middle;
  float: left;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="checkbox"]:checked + label span {
  background: red
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M.5.5h79v79H.5z' fill='%23ff9e12'/%3E%3Cpath d='M60.7 16c1.2.3 2.2.8 3.1 1.7 1.5 1.6 1.7 4 .3 5.8l-9 13.2C49.5 45 43.8 53.2 38.2 61.5c-1.6 2.6-5.1 3.3-7.7 1.7-.5-.3-1-.8-1.4-1.3-4.3-5.2-8.7-10.4-13-15.7-.5-.7-.9-1.5-1.3-2.3v-1.6c.1-.1.1-.2.2-.4.5-1.9 2.2-3.3 4.1-3.5 2-.4 4 .3 5.2 1.9l8.2 9.8c.2.2.3.4.6.7l3.1-4.6c6.2-9.2 12.5-18.3 18.7-27.5.9-1.4 2.3-2.4 4-2.7h1.8z' fill='%23fff'/%3E%3C/svg%3E")
    no-repeat;
}
.content1 {
    z-index: 1;
    width: 100%;
    max-width: 1000px;
    margin-top: 720px;
}

.para1 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: rgba(128, 0, 1, 1) !important;
    font-size: 25px;
    line-height: 1.5;
    padding: 10px 0px 0px 0px;
    text-align:center;
    
}

@media screen and (max-width: 320px) {
     .form-field .ub-input-item.single.form_elem_first_name {
    width: 270px;
    }
    .form-field .ub-input-item.single.form_elem_last_name {
    width: 270px;
  }
  .form-field .ub-input-item.single.form_elem_email {
    width: 270px;
  }
  .form-field .ub-input-item.single.form_elem_phone_number {
    width: 270px;
  }
  #container_last_name, #container_first_name, #container_email, #container_phone_number, .container_checkbox  {
    width: 270px;
  }
  #button-16 {
    left: 0px;
    margin-left: 0%;
  }
}
#button-16 {
    border-style: none;
    border-radius: 5px;
    /* left: 108px; */
    z-index: 3;
    width: 257px;
    height: 42px;
    position: relative;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    font-family: Arial, sans-serif;
    font-style: normal;
    text-align: center;
}
@media screen and (max-width: 430px) {
     .form-field .ub-input-item.single.form_elem_first_name {
    width: 300px;
    }
    .form-field .ub-input-item.single.form_elem_last_name {
    width: 300px;
  }
  .form-field .ub-input-item.single.form_elem_email {
    width: 300px;
  }
  .form-field .ub-input-item.single.form_elem_phone_number {
    width: 300px;
  }
  #container_last_name, #container_first_name, #container_email, #container_phone_number, .container_checkbox  {
    width: 300px;
  }
  #button-16 {
    left: 0px;
    margin-left: 0%;
    width: 250px !important; 
  }
  input[type="text"] {
    width: 280px !important;
  }
  
  .radio-class {
    
    width: 79% !important;
}

    
}


.radio {
  margin: 0.5rem;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #800020;
  display: inline-block;
  width: 25px;
  height: 25px;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type=radio]:checked + .radio-label:before {
  background-color: rgba(128, 0, 1, 1) !important;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #800020;
}

.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}

.radio-btn{
  display: flex;
  justify-content: space-around;
  padding: 20px 0px 0px 0px;
}

.radio-class{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0px;
    left: 0px;
    width: 88%;
  }
  
.inlined{
  margin-left: 20px;
}
.label{
  cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    text-transform: uppercase;
    text-align: left;
}
.participating{
    display: flex;
    justify-content: space-between;
    width: 100%;
}


input[type="number"]{
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: 34px;
  margin: 0;
  outline: 0;
  width: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: #bbbbbb;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  box-shadow: inset 0px 2px 3px #dddddd;
  -webkit-box-shadow: inset 0px 2px 3px #dddddd;
  margin-bottom: 5px;
}
input[type="text"]{
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: 34px;
  margin: 0;
  outline: 0;
  width: 540px;
  border-style: solid;
  border-width: 1px;
  border-color: #bbbbbb;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  box-shadow: inset 0px 2px 3px #dddddd;
  -webkit-box-shadow: inset 0px 2px 3px #dddddd;
  margin-bottom: 5px;
}
.who{
  color: #5232aa !important;
}
.b-family{
  color: rgba(128, 0, 1, 1) !important;
  /*font-style: italic;*/
}
.footer{
  background-color: rgba(128, 0, 1, 1);
    color: #fff;
    text-align: center;
    padding: 20px;
    margin: 0;
    position: relative;
    z-index: 99;
}