JezK

Edit File: membership_styles.css

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  width: 100%;
  color: black;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding-top: 10px;
  font-weight: bold;
}

p {
  padding-top: 10px;
}

input{
  background: #fff !important;
}

.header {
  background-color: #323232;
  color: white;
  padding: 30px 60px;
}

.header h1 {
  font-weight: 600;
  color: #fff;
  font-size: 30px;
}

.header-para {
  line-height: 1.5;
  font-style: normal;
  font-weight: 400;
  text-align: justify;
  color: #FFFFFF;
}

.content h2 {
  color: #041B32;
}

.content p {
  color: #000908;
  font-weight: 400;
  line-height: 160.0%;
}

.content {
  padding: 30px 60px;
}

.apply-membership {
  background-color: rgba(32, 190, 199, 0.09);
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  padding: 20px;
  line-height: 2;
  border-radius: 12px;
}

.apply-membership p {
  font-weight: 700;
  line-height: 157.4%;
  text-align: center;
  color: #000908;
}

.buttons {
  background-color: #20BEC7;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  border: 0px;
  margin: 20px;
  font-weight: 700;
}

.membership {
  text-align: center;
  margin-top: 30px;
}

.membership h3 {
  color: #041B32;
}

.list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: left;
  /* margin: auto; */
  /* margin-top: 20px; */
}

.list-items li {
  padding: 10px
}

.list-blocks {
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: space-between;
  text-align: left;
  margin-top: 20px;
  border-radius: 30px;

}

.list-blocks li {
    padding: 6px 0px;
}

.research_image {
  display: block;
  margin: auto;
}

label {
  position: relative;
  left: 1rem;
  top: 1.3rem;
  background: white;
  padding: 0 8px;
}

/* ----------------------------------------------------------------*/
.floating-form {
  width: 100%;
  margin-top: 40px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.floating-textarea {
  min-height: 30px;
  max-height: 260px;
  overflow: hidden;
  overflow-x: hidden;
}

/* highlighter */
.highlight {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 15%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

.site-content .ast-container {
  display: block;
}

.site-content {
  max-width: 100%;
  padding: 0;
}

input.floating-input:focus {
  border-style: solid !important;
}
::marker{
font-size: 22px;
}
.inner-list-1 {
  padding: 20px;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 40px;
  background-color: rgba(32, 190, 199, 0.09);
}

.inner-list-2 {
  padding: 20px 10px 20px 40px;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 45%;
  margin-right: 40px;
  background-color: rgba(90, 125, 136, 0.13);
}

.inner-list-3 {
  padding: 20px 10px 20px 40px;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 44.5%;
  margin-right: 40px;
  background-color: rgba(32, 159, 124, 0.3)
}

.inner-list-4 {
  padding: 20px 10px 20px 40px;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 47.5%;
  /* margin-right:40px; */
  background-color: rgba(32, 159, 124, 0.09);
}

.membership_div {
  width: 33%;
}

@media only screen and (min-width: 1px) and (max-width: 1200px) {
  .membership_div {
    width: 100%;
  }

.inner-list-1 {
    width: 100%;
    margin-right: 0px;
    padding: 20px 10px 20px 20px;
  }

.inner-list-2 {
    width: 100%;
    margin-right: 0px;
    padding: 20px 10px 20px 20px;
  }

.inner-list-3 {
    width: 100%;
    margin-right: 0px;
    padding: 20px 10px 20px 20px;
  }

.inner-list-4 {
    width: 100%;
    margin-right: 0px;
    padding: 20px 10px 20px 20px;
  }
}

/****  floating-Lable style start 
  .floating-label { 
    position:relative; 
    margin-bottom:30px; 
   
  }

.floating-input , .floating-select {
    font-size:14px;
    padding:4px 20px;
    display:block;
    width:70%;
    height:35px;
    background-color: transparent;
    border-radius: 5px;
    border:1px solid #757575;
  }
  
  .floating-input:focus, .floating-select:focus {
    outline:none;
    border-bottom:2px solid #5264AE; 
  }
  
  label {
    color:#999; 
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:10px;
    top:7px;
    padding-left: 5px;
    padding-right: 5px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    background-color: white;
  }
  
  .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
    top:-8px;
    font-size:14px;
    color:#5264AE;
  }
  
  .floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
    top:-10px;
    font-size:14px;
    color:#5264AE;
  }
  
 
  .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
    width:50%;
  }****/

/* active state */
/* .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
    border-style:solid !important;
  } */

/* animation */
/* @-webkit-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  } */