/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;
  
  /*========== Colors ==========*/
  --first-color: hsl(36, 72%, 48%);
  --first-color-alt: hsl(36, 72%, 44%);
  --black-color: hsl(206, 12%, 12%);
  --card-color: hsl(0, 0%, 90%);
  --title-color: hsl(206, 12%, 12%);
  --text-color: hsl(206, 4%, 42%);
  --text-color-light: hsl(206, 4%, 75%);
  --body-color: hsl(206, 4%, 97%);
  --container-color: #fff;

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .738rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3 {
  color: var(--title-color);
  font-weight: var(--font-bold);
}

h1, h2, h3, p {
  line-height: 140%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

/*=============== REUSABLE CSS CLASSES ===============*/

.grid {
  display: grid;
  gap: 1.5rem;
}
.section {
  padding: 4.5rem 0 2rem;
}

.section-title {
  position: relative;
  font-size: var(--h1-font-size);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
}

.section-title::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 3px;
  height: 25px;
  background-color: var(--first-color);
}

/*=============== HERO ===============*/
.about-header{
  background-image: url(../img/hero/about_bg.jpg);
  min-height: 67vh !important;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: 0;
  width: 100%;
}
/* .about-header2{
  min-height: 67vh !important;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: -3;
  width: 100%;
  background-color: gray;
  background-image: url(../img/hero/image.jpg);
} */
.about-header::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.322) !important;
  
  z-index: -2;
}
.intro__text {
  margin-top: 30px;
  margin-bottom: 30px;
}
.intro__text h1{
  font-size: 8rem;
  color: #fff;
}
.breadcrubms a {
  font-size: 1rem;
  color: #fff !important;
  
}
.breadcrubms span.about-span {
  //color: #f1cf69!important;
  color: #ffffff!important;
  text-transform: capitalize;
  font-size: 1rem;

}


/*=============== HERO ===============*/
.about-header1{
  background-image: url(../img/hero/contact_bg.jpg);
  min-height: 67vh !important;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: 0;
  width: 100%;
}
/* .about-header2{
  min-height: 67vh !important;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: -3;
  width: 100%;
  background-color: gray;
  background-image: url(../img/hero/image.jpg);
} */
.about-header1::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.322) !important;
  
  z-index: -2;
}


/*=============== HERO ===============*/
.about-header03{
  background-image: url(../img/hero/product_bg.jpg);
  min-height: 67vh !important;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: 0;
  width: 100%;
}
/* .about-header2{
  min-height: 67vh !important;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: -3;
  width: 100%;
  background-color: gray;
  background-image: url(../img/hero/image.jpg);
} */
.about-header03::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.322) !important;
  
  z-index: -2;
}
.intro__text {
  margin-top: 30px;
  margin-bottom: 30px;
}
.intro__text h1{
  font-size: 8rem;
  color: #fff;
}
.breadcrubms a {
  font-size: 1rem;
  color: #fff !important;
  
}
.breadcrubms span.about-span {
  //color: #f1cf69!important;
  color: #ffffff!important;
  text-transform: capitalize;
  font-size: 1rem;

}
/*=============== BUTTON ===============*/
.about{
  background-color: #fff;
}

/*=============== About ===============*/
.image-area{
  box-shadow: 5px 5px 15px #D1D9E6, -5px -5px 15px #ffffff;
  background: linear-gradient(145deg, #e2e8ec, #ffffff);
  overflow: hidden;
  border-radius: 30px;

}
.image-area .thumbnail {
  overflow: hidden;
  border-radius: 20px !important;
  
}
.image-area .thumbnail img {
  border-radius: 8px;
  transition: var(--transition);
  width: 100%;
  overflow: hidden !important;
  padding: 30px;
  transition: .5s all ease;
  border-radius: 30px !important;
  margin-right: 20px;
}
.mission .content ul {
  list-style: none;
  padding: 0;
}
.mission .content .content ul li {
  padding-left: 28px;
  position: relative;
}
.mission .content ul i {
  font-size: 20px;
  color: var(--first-color);
}
/*=============== PRODUCTS ===============*/
.section-contact{
  color: #fff;
}
.section-contact .bg-1 {
  background-color: #4a8b71;
}
.section-contact .bg-2 {
  background-color: #282828;
}
.section-contact .item {
  max-width: 600px;
  padding-left: 45px;
  padding-right: 45px;
}
.section-contact [class^=col-xs-]:first-child .item {
  margin-left: auto;
}
.section-contact .item__header {
  margin-bottom: 50px;
}
.section-contact .item__title {
  line-height: 1;
  color: inherit;
  font-weight: 700;
}
.section-contact .item__subtitle {
  font-size: 1.2rem;
  color: #f0f0f0;
  margin: 10px 0 15px;
}
.company-contacts address {
  font-size: .9rem;
  font-family: "Poppins",sans-serif;
  margin-bottom: 45px;
}
.company-contacts address p {
  padding-left: 35px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.company-contacts address i {
  float: left;
  margin-left: -35px;
  line-height: 1.2;
  font-size: 1.1rem;
}
.section-contact .item a:not([class]) {
  color: inherit;
  text-decoration: underline;
}
.company-contacts address, .company-contacts .social-btns {
  margin-top: 55px;
  margin-bottom: 0;
}
.social-btns__inner {
  margin: -5px;
}
.social-btns a {
  min-width: 1em;
  margin: 5px;
  line-height: 1;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-decoration: none;
  -webkit-transition: background-color .3s ease-in-out,color .3s ease-in-out;
  transition: background-color .3s ease-in-out,color .3s ease-in-out;
  color: inherit;
}
 form{
  position: relative;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  width: 100%;
  font-weight: 500;
  font-size: 15px;
}
form .input-wrp {
  display: block;
  margin-bottom: 10px;
  position: relative;
}
form .input-wrp i {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 5.9rem;
  font-size: 1.5rem;
  color: #fff;
}
.wpcf7-form-control-wrap {
  position: relative;
}
form textarea {
  resize: vertical;
  min-height: 160px;
}
form .textfield {
  width: 100%;
  line-height: 1.4;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: inherit;
  color: #9f9f9f;
  background: 0 none;
  background: 0 0;
  border: none;
  border-bottom: 1px solid #b7b7b7;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: background-color .3s ease-in-out,border-color .3s ease-in-out,color .3s ease-in-out;
  transition: background-color .3s ease-in-out,border-color .3s ease-in-out,color .3s ease-in-out;
}
.custom-btn {
  min-width: 135px;
  padding: 15px 10px 13px;
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: #fff;
  color: #fff;
  line-height: 1;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Poppins",sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: background-color .3s ease-in-out,border-color .3s ease-in-out,color .3s ease-in-out;
  transition: background-color .3s ease-in-out,border-color .3s ease-in-out,color .3s ease-in-out;
}
.custom-btn.long {
  width: 100%;
}




/*=============== FOOTER ===============*/
footer .footer__item {
  margin-bottom: 50px;
}

footer p {
 font-size: 14px;
}
.footer__item img {
  width: 100%;
  height: 100%;
}
footer .footer__copy {
  line-height: 1.5;
  font-size: 1.1rem;
  margin-top: 10px;
}
footer .footer__title {
  font-weight: 600;
  text-transform: capitalize;
  color: #282828;
  margin-bottom: 25px;
}
.footer ul {
  margin: 0;
  padding: 0;
}
.footer .footer__menu li {
  line-height: 1;
  margin-top: 20px;
}
.footer .footer__menu li:first-child {
  margin-top: 0;
}
.footer .footer__menu a {
  line-height: 1.2;
  font-size: .9rem;
  font-weight: 600;
  /* color: #282828; */
  color: #000;
}
.footer .footer__menu a:hover {
  line-height: 1.2;
  font-size: .9rem;
  font-weight: 600;
  /* color: #282828; */
  color: #008dd2;
}
.b-table {
  display: flex !important;
}
footer .wpcf7-form .v-bottom {
  vertical-align: top;
}
.form-horizontal .cell:first-child {
  padding-right: 20px;
  width: 95%;
}
.form-horizontal .textfield {
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
  font-size: .8rem;
}

footer  input.wpcf7-form-control.wpcf7-submit {
  background-color: transparent;
  border: 3px solid #fff;
  border-color: #f1cf69;
  color: #504935;
  border-radius: 3px;
  padding: 15px 10px 13px;
  background-color: transparent;
  line-height: 1;
  font-size: .8rem;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: .8rem;
}



/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media (min-width: 320px) {
  .about-header{
    min-height: 37vh !important;
    max-height: 100%;
  }
  .intro__text {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .intro__text h1{
    font-size: 4.5rem;
  }
  .section-contact .item {
    max-width: 650px;
    padding-left: 14px;
    padding-right: 15px;
  }
  .section-contact .item__subtitle {
    font-size: 1rem;
    color: #f0f0f0;
    margin: 10px 0 15px;
  }
}
@media (min-width: 767px) {
  .about-header{
    min-height: 70vh !important;
    max-height: 100%;
  }
  .about-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .intro__text {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .intro__text h1{
    font-size: 5rem;
  }
}