* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
}

/* fonts */
@font-face {
          font-family: Museo;
          src: url('../fonts/Museo_300.otf');
          font-weight: 300;
}

@font-face {
          font-family: MuseoSans;
          src: url('../fonts/MuseoSans-300.otf');
          font-weight: 300;
}

@font-face {
          font-family: MuseoSans;
          src: url('../fonts/MuseoSans_500.otf');
          font-weight: 500;
}

@font-face {
          font-family: MuseoSans;
          src: url('../fonts/MuseoSans_700.otf');
          font-weight: 700;
}

/* root variables */
:root {
          --primary-color: #23402A;
          --secondary-color: #EFF299;
          --dark-color: #2F2F2F;
          --white-color: #FFFFFF;
          --light-bgcolor: #F6F7F6;
          --light-color: #9E9E9E;
}

.margin-top {
          display: block;
          margin-top: 2rem;
}

.margin-bottom {
          display: block;
          margin-bottom: 2rem;
}

.container {
          width: 100%;
          max-width: 1640px;
          margin: 0 auto;
          padding: 0 15px;
}

.row {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-grow: 1;
}

.p-flex {
     display: flex;
}

.flex-start {
          align-items: flex-start;
}

.flex-end {
          align-items: flex-end;
}

.col-md-1, .col-1 {
          width: calc(100% / 12);
}

.col-md-2, .col-2 {
          width: calc((100% / 12)*2);
}

.col-md-3, .col-3 {
          width: calc((100% / 12)*3);
}

.col-md-4, .col-4 {
          width: calc((100% / 12)*4);
}

.col-md-5, .col-5 {
          width: calc((100% / 12)*5);
          padding-right:30px;
}

.col-md-6, .col-6 {
          width: calc((100% / 12)*6);
}

.col-md-7, .col-7 {
          width: calc((100% / 12)*7);
}

.col-md-8, .col-8 {
          width: calc((100% / 12)*8);
}

.col-md-9, .col-9 {
          width: calc((100% / 12)*9);
}

.col-md-10, .col-10 {
          width: calc((100% / 12)*10);
}

.col-md-11, .col-11 {
          width: calc((100% / 12)*11);
}

.col-md-12, .col-12 {
          width: calc((100% / 12)*12);
}

@media screen and (max-width: 767px) {
          .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
                    width: 100%;
          }
}

a {
          text-decoration: none;
}

li {
          list-style: none;
}

.button,
.button-outline {
          text-decoration: none;
          border: 2px solid var(--primary-color);
          color: var(--primary-color);
          background: none;
          padding: 8px 18px;
          font-family: MuseoSans;
          font-weight: 700;
          transition: 0.3s ease;
          cursor: pointer;
          display: inline-block;
}

.button {
          border: none;
}

.button-outline:hover {
          background-color: var(--primary-color);
          color: var(--white-color);
}

.text-left {
          text-align: left;
}

.text-center {
          text-align: center;
}

.text-right {
          text-align: right;
}

.form-field-area,
.form-field,
.form-select-field {
          width: 100%;
          max-width: 100%;
          margin-bottom: 25px;
          border-radius: 5px;
          position: relative;
          font-family: MuseoSans;
}

.form-field-area {
          height: 136px;
}

textarea,
input,
select {
          width: 100%;
          height: 40px;
          border: none;
          outline: none;
          padding: 10px;
          font-size: 16px;
          font-weight: 300;
          border-radius: 5px;
          color: var(--dark-color);
          border: 2px solid var(--primary-color);
}

textarea {
     height: 100%;
}

select {
          font-size: 16px;
          font-weight: 700;
          padding: 0 10px;
          margin-top: 20px;
}

@media screen and (max-width: 767px) {
     select {
          margin-top: 12px;
     }
}

select option {
     font-size: 16px;
     font-weight: 700;
     padding: 7px 4px;
}

.form-field-area label,
.form-field label {
          font-size: 16px;
          font-weight: 700;
          pointer-events: none;
          transition: 0.3s ease;
          color: var(--dark-color);
          transform: translateY(-50%);
          background-color: var(--white-color);
}

.form-field-area label {
          top: 18px;

}

.form button {
          border-radius: 50px;
          margin: 12px 0;
}

.form h3 {
          font-size: 18px;
          margin-bottom: 2.3rem;
          padding-bottom: 0.8rem;
          border-bottom: 2px solid var(--dark-color);
}

.hidden {
     display: none !important;
}