/*===============================================
Template Name: dreamhub - Digital Agency HTML5 Template
Version: 0.1
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Start dreamhub Header Menu Area Css
02. Start dreamhub Hero Area Css
03. Start dreamhub Service Area Css
04. Start dreamhub about Area Css
05. Start dreamhub Work Process Area Css
06. Start dreamhub About Style Two Css
07. Start dreamhub About Style Three Css
08. Start dreamhub Testimonial Area Css
09. Start dreamhub Team Area Css
10. Start dreamhub Pricing Area Css
11. Start dreamhub Brand Area Css
12. Start dreamhub Foter Area Css
=======================*/

/*================================================
 <--Start dreamhub Header Top Menu Area Css-->
=================================================*/
.header-top-menu {
  background: #fff;
  padding: 13px 0;
}
.header-top-menu .row.top-menu {
  position: relative;
}
.header-top-menu .row.top-menu::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 98%;
  left: 13px;
  background: #209f2e;
  bottom: -13px;
  opacity: .5;
}
.header-top-menu-adress ul {
  list-style: none;
}
.header-top-menu-adress ul li {
  display: inline-block;
  padding-right: 12px;
}
.header-top-menu-adress ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  color: #39374d;
  font-weight: 400;
}
.header-top-menu-adress ul li a i {
  font-size: 14px;
  border: 1px solid #209f2e;
  color: #209f2e;
  width: 25px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  margin-right: 5px;
}
.header-top-menu-content {
  text-align: right;
}
.header-top-menu-content-icon-thumb {
  display: inline-block;
}
.header-top-menu-content-title {
  display: inline-block;
  margin-left: 7px;
}
.header-top-menu-content-title span {
  font-size: 15px;
  color: #39374d;
  font-weight: 400;
}
.header-top-menu-content-title span i {
  font-size: 10px;
}
.header-top-menu-social-icon {
  display: inline-block;
  margin-left: 20px;
}
.header-top-menu-social-icon ul {
  list-style: none;
}
.header-top-menu-social-icon ul li {
  display: inline-block;
  margin-left: 9px;
}
.header-top-menu-social-icon ul li a {
  font-size: 12px;
  color: #209f2e;
  display: inline-block;
  border: 1px solid #209f2e;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 3px;
  transition: .5s;
}
.header-top-menu-social-icon ul li a:hover {
  background: #209f2e;
  color: #fff;
}


/*================================================
 <--Start dreamhub Header Menu Area Css-->
=================================================*/
.header-area{
  z-index: 1;
  position: relative;
}
.header-menu {
  text-align: center;
}
.header-menu ul {
  list-style: none;
}
.header-menu ul li {
  display: inline-block;
  margin-right: 23px;
}
.header-menu ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  margin: 27px 0;
  border-bottom: 1px solid #fff;
  padding: 8px 0;
  transition: .5s;
}
.header-menu ul li a:hover{
  color: #209f2e;
  border-bottom: 1px solid #209f2e;
}
.header-menu ul li a i {
  font-size: 10px;
}
.header-search-button {
  text-align: right;
}
.search-box-btn {
  display: inline-block;
}
.search-box-btn i {
  font-size: 14px;
  color: #209f2e;
  border: 1px solid #209f2e;
  height: 25px;
  width: 25px;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
}
.header-btn {
  display: inline-block;
  margin-left: 15px;
}
.header-btn a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  background: #209f2e;
  padding: 12px 25px;
  color: #fff;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  transition: .5s;
}
.header-btn a:hover{
  color: #209f2e;
}
.header-btn a::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0,1);
  opacity: 0;
  z-index: -1;
  transition: .5s;
}
.header-btn a:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border: 1px solid #209f2e;
  border-radius: 5px;
}
.header-btn a i {
  margin-left: 2px;
}

/* sticky css */
.sticky-nav {
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  position: fixed !important;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  -webkit-animation: 300ms running fadeInDown;
  animation: 500ms running fadeInUp;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  transition: 0.5s !important;
  background: #fff!important;
  z-index: 9999 !important;
  animation-name: slideInDown;
  padding: 0 30px;
}

/* sub menu area css */
.header-menu ul .sub-menu {
  background: #fff;
  position: absolute;
  top: 125%;
  border-radius: 5px;
  width: 217px;
  text-align: left;
  margin: 0;
  -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
  transition: .5s;
  visibility: hidden;
  border-top: 2px solid #209f2e;
  opacity: 0;
  z-index: 11;
}
.header-menu ul .sub-menu ul li {
  display: inline-block;
  margin-left: 0;
  width: 100%;
}
.header-menu ul .sub-menu ul li a {
  padding: 12px 20px;
  text-align: left;
  width: 100%;
  display: inline-block;
  visibility: inherit !important;
  color: #202020;
  margin: 0;
}
.header-menu ul .sub-menu ul li a:hover {
  background: #209f2e !important;
  color: #fff;
}
.header-menu ul li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 99%;
}



/*================================================
 <--Start dreamhub Header Menu Area Css-->
=================================================*/
.hero-area {
  background: url(../image/hero-thumb.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 800px;
}
.hero-content {
  background: url(../image/hero-shape-2.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 24px 30px 29px;
  border-radius: 10px 0 10px 10px;
}
.heor-content-shape {
  display: inline-block;
}
.hero-content-sub-title {
  display: inline-block;
}
.hero-content-sub-title h5 {
  font-size: 20px;
  font-weight: 500;
  color: #ffff;
  padding-bottom: 10px;
}
.hero-content-main-title h1 {
  font-size: 54px;
  color: #ffffff;
  font-weight: 600;
  line-height: 60px;
}
.hero-content-discription {
  width: 100%;
}
.hero-content-discription p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #ffffff;
  padding: 8px 0 18px;
}

/* dreamhub btn */
.dreamhub-btn {
  display: inline-block;
}
.dreamhub-btn a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 12px 32px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  transition: .5s;
}
.dreamhub-btn a:hover{
  color: #209f2e;
}
.dreamhub-btn a::before {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
  transition: .5s;
  z-index: -1;
}
.dreamhub-btn a:hover::before{
  width: 100%;
  left: 0;
}
.dreamhub-btn.hero {
  margin-left: 16px;
}

/*================================================
 <--Start dreamhub Service Area Css-->
=================================================*/
/* section title */
.service-area {
  padding: 110px 0 0px;
}
.section-sub-title {
  position: relative;
}
.section-sub-title::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 50px;
  background: #209f2e;
  left: 54%;
  bottom: 5px;
}
.section-sub-title::after {
  position: absolute;
  content: "";
  height: 1px;
  width: 50px;
  background: #209f2e;
  right: 54%;
  bottom: 5px;
}
.section-sub-title h5 {
  font-size: 16px;
  font-weight: 600;
  color: #209f2e;
}
.section-main-title {
  margin-bottom: 54px;
  text-align: center;
}
.section-main-title h3 {
  font-size: 45px;
  font-weight: 600;
  line-height: 32px;
  color: #483b33;
  margin: 20px 0 0;
}
/* about section title */
.section-sub-title.about h5 {
  margin-left: 56px;
}
.section-main-title.about h3 {
  font-size: 29px;
  font-weight: 600;
  color: #483b33;
  margin: 20px 0 0;
  line-height: 36px;
}
.section-sub-title.about::after{
  right: 92%;
}
.section-sub-title.about::before{
  display: none;
}
.section-main-title.about {
  margin-bottom: 20px;
}
.section-discription.about {
  width: 85%;
}
.section-discription.about p {
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  line-height: 27px;
}

/* call do action section title */
.section-sub-title.call h5 {
  color: #fff;
}
.section-main-title.call h3 {
  color: #fff;
  line-height: 58px;
}
.section-main-title.call {
  margin-bottom: 39px;  
  line-height: 38px;
}

/* pricing section title */
.section-main-title.pricing {
  margin-bottom: 24px;
}
.section-discription.pricing {
  width: 52%;
  margin: auto;
}

/* testimonial section title */
.section-sub-title.Testimonal::before {
  left: 90px;
}
.section-sub-title.Testimonal::after {
  display: none;
}
/* contact us section title */
.section-main-title.contact {
  margin-bottom: 19px;
}
.section-main-title.contact h3 {
  color: #fff;
  font-size: 42px;
  line-height: 58px;
}
.section-discription.contact {
  width: 78%;
}
.section-discription.contact p {
  color: #fff;
  line-height: 28px;
}
/* team section title */
.section-sub-title.team::before {
  left: 174px;
}
.section-sub-title.team::after {
  display: none;
}
/* single service box */
.service-single-box {
  background: #ffff;
  filter: drop-shadow(0 0 23px rgba(32,159,46,0.1));
  padding: 36px 30px 24px;
  border-radius: 5px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.service-single-box::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  background: #f3f1fa;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: .5s;
}
.service-single-box:hover::before{
  left: 0;
  width: 100%;
  border-radius: 5px;
}
.single-box-icon-thumb {
  float: left;
  margin-top: -13px;
  margin-right: 26px;
  background: #f3f1fa;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
  transition: .5s;
}
.single-box-icon-thumb1 {
  float: left;
  margin-top: -13px;
  margin-right: 26px;
  background: #f3f1fa;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
  transition: .5s;
}
.service-single-box:hover .single-box-icon-thumb{
  background: #209f2e;
}
.service-single-box:hover .single-box-icon-thumb img{
  color: #fff;
}
.service-single-box:hover .single-box-icon-thumb1{
  background: #209f2e;
}
.service-single-box:hover .single-box-icon-thumb1 img{
  color: #fff;
}
.single-box-icon-thumb img{
  transition: .5s;
}
.service-single-box:hover .single-box-icon-thumb img{
  filter: brightness(0)invert(1);
}
.service-single-box:hover .single-box-icon-thumb1 img{
  filter: brightness(1)invert(0);
}
.single-box-content h4 {
  font-size: 20px;
  font-weight: 600;
  color: #209f2e;
  margin-bottom: 33px;
}
.single-box-btn {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.single-box-btn a {
  font-size: 16px;
  display: inline-block;
  text-decoration: none;
  color: #209f2e;
  font-weight: 400;
}
.single-box-icon {
  margin: -8px 50px 0;
}
.single-box-icon i {
  border: 1px solid #209f2e;
  width: 25px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  color: #209f2e;
  border-radius: 3px;
  transition: .5s;
}
.service-single-box:hover .single-box-icon i{
  background: #209f2e;
  color: #fff;
}

/*================================================
 <--Start dreamhub About Area Css-->
=================================================*/
.about-area {
  padding: 90px 0 110px;
}
.about-thumb {
  position: relative;
}
.about-shape {
  position: absolute;
  bottom: -98px;
  left: -59%;
  z-index: -1;
}
.about-content-icon-thumb {
  float: left;
  margin-top: 15px;
  background: #209f2e;
  height: 55px;
  width: 55px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
}
.about-content-icon-thumb.mission {
  float: left;
  margin-top: 15px;
  background: #209f2e;
  height: 55px;
  width: 55px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
}
.about-content-icon-thumb.sevices {
  float: left;
  margin-right: 29px;
  margin-top: 12px;
  margin-bottom: 50px;
  background: #209f2e;
  height: 55px;
  width: 55px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
}
.about-content-title {
  padding-left: 70px;
}
.about-content-title h4 {
  font-size: 20px;
  font-weight: 600;
  color: #483b33;
  margin-bottom: 11px;
}
.about-content-discription {
  width: 90%;
  padding-left: 70px;
}
.about-content-discription p {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px; 
}

/*================================================
 <--Start dreamhub Call Do Action Area Css-->
=================================================*/
.col-do-action-area {
  padding: 105px 0 105px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.video-icon {
  height: 85px;
  width: 85px;
  line-height: 85px;
  display: inline-block;
  border: 3px solid #fff;
  border-radius: 100%;
}
.video-icon i {
  color: #fff;
}

/*================================================
 <--Start dreamhub Pricing Area Css-->
=================================================*/
.pricing-area {
  padding: 90px 0 108px;
}

/* pricing tab */
.pricing-tab {
  text-align: center;
  margin-bottom: 50px;
}
.pricing-tab1 {
  text-align: center;
  margin-bottom: 0;
}
.pricing-tab .monthly.tab {
  font-size: 18px;
  font-weight: 600;
  color: #483b33;
}
.pricing-tab .pricing-tab-switcher {
  width: 45px;
  height: 25px;
  background: #209f2e;
  display: inline-block;
  border-radius: 30px;
  margin: -7px 12px;
  position: relative;
}
.pricing-tab .pricing-tab-switcher::before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  background: #fff;
  top: 4px;
  left: 5px;
  border-radius: 100%;
}
.pricing-tab .yearly-tab {
  font-size: 18px;
  font-weight: 600;
  color: #483b33;
}

/* pricing-single-box */
.pricing-single-box {
	/*margin-bottom: 16px;*/
}
.pricing-single-box-content {
  background: #262b4c;
  padding: 29px 0 8px;
  border-radius: 5px 5px 0px 0px;
  position: relative;
  z-index: 1;
}
.pricing-single-box-content::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  background: #209f2e;
  right: 0;
  bottom: 0;
  border-radius: 5px 5px 0 0;
  z-index: -1;
  transition: .5s;
}
.pricing-single-box:hover .pricing-single-box-content::before{
  width: 100%;
  left: 0;
}
.pricing-content-title h5 {
  font-size: 20px;
  font-weight: 600;
  color: #ffff;
}
.pricing-rate {
  padding: 47px 0 41px;
  position: relative;
  z-index: 1;
}
.pricing-rate::before {
  position: absolute;
  content: "";
  height: 58%;
  width: 74%;
  background: #f3f1fa;
  left: 55px;
  top: 37px;
  z-index: -1;
  border-radius: 5px;
  opacity: 0;
  transition: .5s;
}
.pricing-single-box:hover .pricing-rate::before{
  opacity: 1;
}
.pricing-rate h3 {
  display: inline-block;
  font-size: 50px;
  font-weight: 600;
  color: #fff;
  transition: .5s;
}
.pricing-single-box:hover .pricing-rate h3{
  color: #209f2e;
}
.pricing-rate span {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: .5s;
}
.pricing-single-box:hover .pricing-rate span{
  color: #209f2e;
}
.pricing-content-discription {
  width: 70%;
  margin: auto;
}
.pricing-content-discription p {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
.pricing-info {
  background: #1e223d;
  padding: 34px 72px 30px;
  border-radius: 0 0 5px 5px;
}
.pricing-info2 {
  background: #1e223d;
  padding: 34px 22px 30px 32px;
  border-radius: 0 0 5px 5px;
}
.pricing-info2 ul {
  list-style: none;
}
.pricing-info2 li {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  padding: 11px 0 0;
}
.pricing-info2 ul li i {
  font-size: 11px;
  background: #209f2e;
  height: 20px;
  width: 20px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}
.pricing-info2 ul li i1 {
  font-size: 11px;
  background: ;
  height: 20px;
  width: 20px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}
.pricing-info ul {
  list-style: none;
}
.pricing-info li {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  padding: 11px 0 0;
}
.pricing-info ul li i {
  font-size: 11px;
  background: #209f2e;
  height: 20px;
  width: 20px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}
.pricing-info ul li i1 {
  font-size: 11px;
  background: ;
  height: 20px;
  width: 20px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}
.dreamhub-btn.pricing {
  margin-top: 47px;
  display: grid;
  align-items: center;
  justify-items: center;
}
.dreamhub-btn.pricing a {
  border: 1px solid #209f2e;
  border-radius: 3px;
  text-align: center;
}
.dreamhub-btn.pricing a:hover{
  color: #fff;
}
.dreamhub-btn.pricing a::before{
  background: #209f2e;
}

/* Pricing Tab CSS */
.pricing-list-tab .tabs {
  text-align: center;
  padding-left: 0;
  list-style-type: none;
  margin-bottom: 60px;
}

.pricing-list-tab .tabs li {
  display: inline-block;
  margin-left: -2px;
  margin-right: -2px;
}
.pricing-list-tab:hover .tabs li a{
  background: #89cf91;
}
.pricing-list-tab .tabs li a {
  display: block;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
          box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
  color: #0d1820;
  padding: 14px 30px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #f2f2f2;
  text-decoration: none;
}
.pricing-list-tab .tabs li.current a {
  color: #ffffff;
  background-color: #209f2e;
}
.tabs_item {
    display: none;
    position: relative;
}.tabs_item1 {
    display: none;
    position: relative;
}
.tabs_item:first-child {
    display: block;
}
/*================================================
 <--Start dreamhub Testimonial Area Css-->
=================================================*/
.testimonial-area {
  padding: 0 0 110px;
}
.testimonial-single-box {
  background: #ffff;
  filter: drop-shadow(0 0 23px rgba(32,159,46,0.1));
  padding: 35px 50px 29px;
  border-radius: 5px;
}
.testimonial-content-icon i {
  font-size: 42px;
  opacity: 0.251;
  color: #209f2e;
  margin-bottom: 12px;
  transition: .5s;
}
.testimonial-single-box:hover .testimonial-content-icon i{
  color: #209f2e;
  opacity: 1;
}
.testimonial-content-rating {
  position: relative;
}
.testimonial-content-rating::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  background: #209f2e;
  top: 19px;
  left: 58px;
  opacity: 0.251;
}
.testimonial-content-rating::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  background: #209f2e;
  top: 19px;
  right: 60px;
  opacity: 0.251;
}
.testimonial-content-rating i {
    font-size: 14px;
    color: #209f2e;
    padding: 0 3px;
    margin: 0 0 23px;
}
.testimonial-content-title h4 {
  font-size: 18px;
  font-weight: 400;
  color: #209f2e;
  line-height: 27px;
  padding-bottom: 4px;
}

/* owl nav */
.owl-nav {
  display: inline-flex;
  position: absolute;
  top: -136px;
  right: 18px;
}
.owl-prev i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: 1px solid #209f2e;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  color: #209f2e;
  transition: .5s;
}
.owl-prev i:hover{
  background: #209f2e;
  color: #fff;
}
.owl-next i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: 1px solid #209f2e;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  color: #209f2e;
  margin-left: 15px;
  transition: .5s;
}
.owl-next i:hover{
  background: #209f2e;
  color: #fff;
}

/*================================================
 <--Start dreamhub Contact Us Area Css-->
=================================================*/
.contact-us-area {
  padding: 0px 0 0px;
}
.row.contact {
  background: url(../image/contact-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 106px 18px 105px;
  border-radius: 5px;
}

/*================================================
 <--Start dreamhub Project Area Css-->
=================================================*/
.project-area {
  padding: 108px 0 75px;
}
.project-area.products {
  padding: 18px 0 75px;
}
.project-single-box {
  margin-bottom: 0px;
  padding: 15px;
}
.project-thumb {
  position: relative;
}
.project-thumb::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(32,159,46, 0.9);
  border-radius: 5px;
  transition: .5s;
}
.project-single-box:hover .project-thumb::before{
  width: 100%;
  left: 0;
}
.project-thumb img {
  width: 100%;
}
.project-content {
  position: absolute;
  top: 53%;
  transform: translate(-50%, -50%);
  left: 50%;
  opacity: 0;
  transition: .5s;
  width: 100%;
}
.project-single-box:hover .project-content{
  opacity: 1;
}
.project-content-icon i {
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.project-content-text a {
    display: inline-block;
    text-decoration: none;
}
.project-content-text h6 {
  font-size: 20px;
  color: #ffffff;
  font-weight: 600;
  padding: 27px 0 8px;
}
.project-content-text p {
  color: #ffffff;
}


/*================================================
 <--Start dreamhub Contact Area Css-->
=================================================*/
.contact-area {
  padding: 0 0 110px;
}
.single-contact-box {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 3px;
  padding: 30px 28px 0px;
}
.contact-title h4 {
  font-size: 20px;
  font-weight: 400;
  color: #209f2e;
  margin-bottom: 28px;
}
.contact-info ul {
  list-style: none;
}
.contact-info ul li {
  margin: 0 0 29px;
}
.contact-info ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  color: #696969;
  font-weight: 400;
}
.contact-info ul li a i {
  font-size: 14px;
  border: 1px solid #209f2e;
  color: #209f2e;
  height: 25px;
  width: 25px;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  margin-right: 7px;
}
.contact-info ul li a span {
  display: block;
  margin-left: 36px;
}

/* form box css */
.form_box input {
  height: 45px;
  width: 370px;
  background: #fafafa;
  outline: 0;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 3px;
  padding: 0 15px;
  margin-bottom: 30px;
}
.form_box input::placeholder {
  font-size: 16px;
  color: #696969;
  font-weight: 400;
}
.form-box select {
  height: 46px;
  width: 370px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.1);
  outline: 0;
  border-radius: 3px;
  font-size: 15px;
  padding: 0 15px;
  color: #696969;
}
.form_box textarea {
  width: 370px;
  height: 197px;
  outline: 0;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fafafa;
  border-radius: 3px;
  padding: 10px 13px;
}
.form_box textarea::placeholder{
  font-size: 16px;
  color: #696969;
  font-weight: 400;

}
.form-button button {
  width: 95%;
  height: 45px;
  outline: 0;
  background: #209f2e;
  border: none;
  border-radius: 3px;
  color: #fff;
  margin-top: 21px;
  position: relative;
  z-index: 1;
  transition: .5s;
}
.form-button button:hover{
  color: #209f2e;
}
.form-button button::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0,1);
  opacity: 0;
  z-index: -1;
  transition: .5s;
}
.form-button button:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fafafa;
  border: 1px solid #209f2e;
  border-radius: 3px;
}


/*================================================
 <--Start dreamhub Foter Area Css-->
=================================================*/
.foter-area {
  background: #060505;
  padding: 100px 0 0;
}
.col-lg-31{
  flex:0 0 auto;
  width:19%;
}
.col-lg-32{
  flex:0 0 auto;
  width:31%;
}
.foter-content p {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 25px;
  margin: 19px 0 10px;
  width: 85%;
}
.foter-info ul {
  list-style: none;
}
.foter-info ul li {
  color: #fff;
  margin: 8px 0 0;
}
.foter-info ul li a {
  display: inline-block;
  text-decoration: none;
  color: #ffff;
  font-size: 15px;
  font-weight: 400;
}
.foter-info ul li a i {
  margin-right: 6px;
}
.foter-info ul li span {
  font-size: 15px;
  font-weight: 400;
}
.foter-info ul li span i {
  margin-right: 6px;
}
.foter-social-icon ul {
  list-style: none;
}
.foter-social-icon ul li {
  display: inline-block;
  margin-right: 4px;
  margin-top: 26px;
}
.foter-social-icon ul li a i {
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,0.2);
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100%;
  transition: .5s;
}
.foter-social-icon ul li a i:hover{
  background:  #209f2e;
}
.wiget-title h5 {
  font-size: 22px;
  font-weight: 600;
  color: #ffff;
  margin-bottom: 30px;
}
.wiget-menu ul {
  list-style: none;
}
.wiget-menu ul li {
  padding: 0px 0px 15px;
}
.wiget-menu ul li a {
  display: inline-block;
  color: #ffff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: .5s;
}
.wiget-menu ul li a:hover {
  color: #209f2e;
}
.wiget-menu ul li.menu {
  position: relative;
  padding: 0 0 28px;
}
.wiget-menu ul li.menu::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #209f2e;
  bottom: 11px;
}
.wiget-information h5 {
  font-size: 16px;
  color: #ffff;
  line-height: 22px;
  transition: .5s;
}
.wiget-information h5:hover {
  color: #209f2e;
}
.wiget-information p {
  font-size: 14px;
  color: #7e8890;
  font-weight: 400;
}
.wiget-time h5 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 32px;
}
.company-work-hour ul li {
  display: block;
  list-style: none;
  color: #fff;
  opacity: .8;
  font-size: 15px;
  padding: 0 0 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid #209f2e;
}
.company-work-hour ul li span {
  float: right;
}
li.table-brb {
  border: inherit !important;
}
li.table-brb span.style {
  background: #209f2e;
  padding: 2px 4px;
  font-size: 14px;
  border-radius: 5px;
}
.foter-copy-text {
  text-align: center;
  border-top: 1px solid #209f2e;
  padding: 25px 0px 0px;
  margin: 12px 0 0;
}
.foter-copy-text p {
  font-size: 14px;
  color: #7e8890;
}

/* All Inner Page Css */
.breatcome-area {
  background: url(../image/breatcome.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 130px 0;
  background-attachment: fixed;
}
.breatcome-title h1 {
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 19px;
}
.bratcome-text ul {
  list-style: none;
}
.bratcome-text ul li {
  display: inline-block;
  margin-right: 15px;
  color: #fff;
  font-weight: 600;
}
.bratcome-text ul li a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: .5s;
}
.bratcome-text ul li a:hover{
  color:#209f2e ;
}
.bratcome-text ul li a::before {
  position: absolute;
  content: "/";
  left: 50px;
}

/* about innner page css */
.contact-us-area.style {
  padding: 80px 0 109px;
}

/* Team Inner Page Css */
.team-area {
  padding: 107px 0 63px;
}
.team-single-box {
  overflow: hidden;
  margin-bottom: 40px;
}
.team-thumb {
  position: relative;
  z-index: 1;
}
.team-thumb::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(32,159,46, 0.7);
  transform: scale(0,0.1);
  border-radius: 5px;
  transition: .5s;
}
.team-single-box:hover .team-thumb::before{
  border-radius: 3px;
  transform: scale(1);
}
.team-thumb img{
  width: 100%;
  border-radius: 3px;
}
.team-social-icon {
  position: absolute;
  top: -33px;
  right: 27%;
  transition: .5s;
}
.team-single-box:hover .team-social-icon{
  top:46%;
}
.team-social-icon ul{
  list-style: none;
}
.team-social-icon ul li {
  display: inline-block;
  margin-left: 3px;
}
.team-social-icon ul li a {
  font-size: 12px;
  color: #209f2e;
  display: inline-block;
  background: #fff;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100%;
  transition: .5s;
}
.team-social-icon ul li a:hover {
  background: #209f2e;
  color: #fff;
}
.team-content {
  background: #ffffff;
  text-align: center;
  padding-top: 10px;
}
.team-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #209f2e;
}
.team-content span {
  font-size: 13px;
  font-weight: 500;
  color: #969595;
  padding-left: 5px;
}


/*===========================================
 <--Start dreamhub blog area Css-->
============================================*/

.blog-area {
  padding: 100px 0 111px;
}
.blog-single-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 42px 38px 32px;
  border-radius: 20px;
  margin-bottom: 44px;
}
.blog-thumb {
  position: relative;
  transition: .5s;
  overflow: hidden;
}
.blog-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: rgba(32,159,46, 0.6);
  transform: scale(0);
  transition: .5s;
}
.blog-single-box:hover .blog-thumb::before{
  transform: scale(1);
}
.blog-thumb img {
  width: 100%;
  transition: .5s;
}
.blog-single-box:hover .blog-thumb img {
  transform: scale(1.1);
}
.blog-content-list ul {
  list-style: none;
}
.blog-content-list ul li {
  display: inline-block;
  margin-right: 28px;
}
.blog-content-list ul li a {
  display: inline-block;
  font-size: 15px;
  margin: 29px 0 13px;
  text-decoration: none;
}
.blog-content-list ul li a:hover {
  color: #209f2e;
}
.blog-content-list ul li a i {
  margin-right: 5px;
  color: #209f2e;
}
.blog-content-title h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 7px 0px 20px;
}
.blog-content-title h2 a {
  transition: .5s;
  text-decoration: none;
}
.blog-content-title h2 a:hover{
  color:#209f2e ;
}
.blog-content-discription {
  margin-bottom: 28px;
}
.blog-btn a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  background: #209f2e;
  border: 1px solid #209f2e;
  padding: 16px 36px;
  font-weight: 500;
  position: relative;
  border-radius: 5px;
  z-index: 1;
  overflow: hidden;
  color: #fff;
  transition: .5s;
}
.blog-btn a:hover{
  color: #209f2e;
}
.blog-btn a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.blog-btn a:hover::before {
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 5px;
}
.as-pagination ul {
  list-style: none;
}
.as-pagination ul li {
  display: inline-block;
}
.as-pagination ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  background: rgb(1 15 26 / 6%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 7px;
  margin-left: 5px;
  transition: .5s;
  text-decoration: none;
}
.as-pagination ul li a:hover {
  background: #209f2e;
}

/* sidebar css */
.widget_search {
  padding: 30px 30px 30px;
  border-radius: 4px;
  margin-bottom: 30px;
  background: #fff;
  box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}
.widget_search form {
  position: relative;
}
.widget_search input {
  border-radius: 4px;
  padding-left: 20px;
  height: 60px;
  width: 100%;
  position: relative;
  color: #0D0E14;
  border: 0;
  border: 2px solid #209f2e;
  outline: 0;
}
button.icons {
  border: 0;
  font-size: 18px;
  color: #fff;
  padding: 1px 15px;
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  width: 60px;
  background: #209f2e;
  border-radius: 0 4px 4px 0;
}
.widget-categories-box {
  background: #fff;
  padding: 42px 40px 25px;
  border-radius: 5px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}
.categories-title h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  border-bottom: 2px solid #E9E9EA;
  padding: 0px 0 15px;
  margin: 0 0 30px;
  position: relative;
  padding-left: 10px;
}
.categories-title h4:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 24px;
  width: 3px;
  background: #209f2e;
}
.widget-categories-menu ul {
  display: block;
}
.widget-categories-menu ul li {
  display: block;
  list-style: none;
  margin-bottom: 15px;
  background: transparent;
  padding: 16px 20px 16px;
  border-radius: 4px;
  transition: .5s;
  border: 2px solid #209f2e;
  position: relative;
  z-index: 1;
}
.widget-categories-menu ul li:hover {
  border: 2px solid #209f2e;
}
.widget-categories-menu ul li:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #209f2e;
  transition: .5s;
  z-index: -1;
}
.widget-categories-menu ul li:hover:before {
  width: 100%;
}
.widget-categories-menu ul li a {
  display: block;
  color: #209f2e;
  transition: .5s;
  text-decoration: none;
}
.widget-categories-menu ul li:hover a {
  color: #fff;
}
.widget-categories-menu ul li a span {
  display: inline-block;
  float: right;
  background: #209f2e;
  height: 30px;
  width: 30px;
  font-size: 14px;
  text-align: center;
  margin-top: -4px;
  color: #fff;
  border-radius: 3px;
  line-height: 30px;
  transition: .5s;
}
.widget-categories-menu ul li:hover a span {
  background: #fff;
  color: #0E1317;
}
.sidber-widget-recent-post .recent-widget-content {
  padding-bottom: 20px;
  padding-top: 10px;
}
.sidber-widget-recent-post .recent-widget-content a {
  color: #0E1317;
  font-size: 18px;
  text-decoration: none;
}
.widget-categories-box {
  background: #fff;
  padding: 42px 40px 25px;
  border-radius: 5px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}
.widget-tags a {
  display: inline-block;
  text-decoration: none;
  border: 2px solid #209f2e;
  padding: 3px 20px;
  margin: 9px 7px;
  border-radius: 2px;
  color: #209f2e;
  font-weight: 500;
  position: relative;
  transition: .5s;
  z-index: 1;
}
.widget-tags a:hover {
  color: #fff;
  border-color: #209f2e;
}
.widget-tags a:before {
  position: absolute;
  content: "";
  left: -2px;
  top: 0px;
  height: 102%;
  width: 0%;
  background: linear-gradient(to right, #209f2e 6%, #209f2e 96%);
  z-index: -1;
  border-radius: 3px;
  transition: .5s;
}
.widget-tags a:hover:before {
  width: 104%;
}

/* blog details inner page css */
.blog-details-area {
  padding: 100px 0 100px;
}
.blog-details-single-box {
  margin-bottom: 0px;
}
.blog-details-single-rowtwo {
  margin-top: 38px;
}
.blog-details-single-rowtwoqua {
  margin-top: 0px;
}
.blog-details-thumb {
  position: relative;
  transition: .5s;
  overflow: hidden;
}
.blog-details-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: rgba(32,159,46, 0.6);
  transform: scale(0);
  transition: .5s;
}
.blog-details-single-box:hover .blog-thumb::before{
  transform: scale(1);
}
.blog-details-thumb img {
  width: 100%;
  transition: .5s;
}
.blog-details-thumb.soc img {
  margin-top: 20px;
  border-radius:40px 0px;
}
.blog-details-thumb.biotin img {
  margin-top: 60px;
}
.blog-details-thumb.stock img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  border-radius:40px 0px;
}
.blog-details-thumb.qua img {
  border-radius:40px 0px;
}
.blog-details-thumb ul {
  display: inline-block;
}
.blog-details-thumb ul li {
  list-style: none;
  display: inline-block;  
  margin-top: 20px;
}
.blog-details-thumb.workshops ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 153px;
  width: 204px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.sfarming ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 204px;
  width: 272px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.quality ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 182px;
  width: 272px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.quality2 ul li img {
  display: inline-block;
  height: 160px;
  width: 160px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.monkfruit ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 321px;
  width: 272px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.matcha ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 277px;
  width: 200px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.mushrooms ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 326px;
  width: 300px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-thumb.Shilajit ul li img {
  display: inline-block;
  border-radius:20px 0px;
  height: 197px;
  width: 350px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.blog-details-single-box:hover .blog-thumb img {
  transform: scale(1.1);
}
.blog-content-list ul {
  list-style: none;
}
.blog-details-content-list ul li {
  display: inline-block;
  margin-right: 28px;
}
.blog-details-content-list ul li a {
  display: inline-block;
  font-size: 15px;
  margin: 29px 0 13px;
  text-decoration: none;
}
.blog-details-content-list ul li a:hover {
  color: #209f2e;
}
.blog-details-content-list ul li a i {
  margin-right: 5px;
  color: #209f2e;
}
.blog-details-content-title h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 7px 0px 20px;
}
.blog-details-content-title span {
  font-size: 24px;
  font-weight: 600;
  margin: 7px 0px 20px;
}
.blog-details-content-title h2 a {
  transition: .5s;
  text-decoration: none;
}
.blog-details-content-title h2 a:hover{
  color:#209f2e ;
}
.blog-details-content-discription {
  margin-bottom: 28px;
}
.blog-details-blockquote {
  padding: 40px 50px 26px;
  position: relative;
  margin-bottom: 0px;
}
.blog-details-blockquote-icon {
  position: absolute;
  top: 46px;
  left: 0px;
}
.blog-details-blockquote-icon i {
  font-size: 30px;
  color:#209f2e ;
}
.blog-details-blockquote blockquote {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}
.blog-details-content-list p i {
  font-size: 14px;
  height: 32px;
  width: 32px;
  border: 1px solid #ddd;
  text-align: center;
  line-height: 31px;
  border-radius: 100%;
  margin-right: 15px;
}
.blog-details-button a {
  display: inline-block;
  border: 2px solid #209f2e;
  color: #209f2e;
  padding: 10px 30px;
  position: relative;
  z-index: 1;
  border-radius: 3px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-decoration: none;
}
.blog-details-button a:hover{
  background: #209f2e;
  color: #fff;
}
.blog-details-button a.active {
  border-color: #209f2e;
  background:#209f2e;
  color: #fff;
  transition: .5s;
  margin-left: 10px;
}
.blog-details-button a.active:hover {
  color: #fff;
  border-color: #209f2e;
}
.blog-details-social {
  text-align: right;
}
.blog-details-social a {
  display: inline-block;
  border: 2px solid #209f2e;
  color: #209f2e;
  height: 40px;
  width: 40px;
  line-height: 38px;
  text-align: center;
  border-radius: 100%;
  font-size: 14px;
  transition: .5s;
  margin-left: 5px;
}
.blog-details-social a:hover{
  background:#209f2e ;
  color: #fff;
}
.blog-details-author {
  border-top: 2px solid #209f2e;
  padding-top: 40px;
  margin-top: 32px;
  margin-bottom: 20px;
}
.blog-details-author-inner {
  background: #F3F3F5;
  padding: 30px 30px 25px;
}
.blog-details-author-thumb {
  float: left;
  margin-right: 30px;
}
.blog-details-author-thumb img {
  border-radius: 100%;
}
.blog-details-author-content h2 {
  font-size: 22px;
  font-weight: 600;
  color: #209f2e;
  margin-top: 0;
  margin-bottom: 12px;
}

.blog-details-content {
  margin-top: 28px;
  padding: 0px 0 18px;
}
.blog-details-content h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #209f2e;
}
.blog-details-comment {
  margin-bottom: 10px;
  position: relative;
}
.blog-details-comment-reply {
  position: absolute;
  right: 25px;
}
.blog-details-comment-reply a {
  background: #209f2e;
  padding: 3px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-radius: 2px;
  display: inline-block;
  text-decoration: none;
}
.blog-details-comment-thumb {
  float: left;
  margin-right: 30px;
}
.blog-details-comment-thumb img {
  border-radius: 100%;
}
.blog-details-comment-content {
  overflow: hidden;
  margin-bottom: 40px;
}
.blog-details-comment-content h2 {
  font-size: 18px;
  margin-top: 0;
  color: #209f2e;
}
.blog-details-comment-content span {
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}
.blog-details-comment.reply {
  margin-left: 70px;
  padding-top: 35px;
  border-top: 2px solid #209f2e;
}
/* Protfolio detail inner pager css */
.portfolio-details-area {
  padding: 90px 0 90px;
}
.row.box-shadow {
  box-shadow: 0 0 30px rgb(0 0 0 / 10%);
  padding: 58px 70px 56px;
}
.row.box-shadow1 {
  box-shadow: 0 0 30px rgb(0 0 0 / 10%);
  padding: 58px 70px 56px;
  margin-top: 28px;
}
.portfolio-details-thumb img {
  width: 100%;
  margin-left: -29px;
}
.portfolio-details-thumb1 img {
  width: 100%;
  margin-left: 30px;
}
.portfolio-details-content h4 {
  font-size: 25px;
  font-weight: 600;
}
.portfolio-details-content p {
  font-size: 16px;
  margin-top: 10px;
}
.portfolio-details-content ul li strong {
  font-size: 18px;
  margin-right: 10px;
}
.portfolio-details-content ul li {
  list-style: none;
  border-bottom: 1px solid #ddd;
  padding: 13px 0;
  font-weight: 500;
  color: #483b33;
  font-size: 16px;
}
.port-dtl-social-icon {
  display: inline-block;
  margin-top: 16px;
}
.port-dtl-social-icon span {
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
}
.port-dtl-social-icon ul {
  display: inline-block;
}
.port-dtl-social-icon ul li {
  list-style: none;
  display: inline-block;
}
.port-dtl-social-icon ul li i {
  display: inline-block;
  border: 1px solid #209f2e;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.port-dtl-social-icon ul li i:hover{
  background:#209f2e;
  color: #fff;
}
.port-dtl-social-pic {
  display: inline-block;
  margin-top: 16px;
}
.port-dtl-social-pic p {
  display: inline-block;
  color: #483b33;
}
.port-dtl-social-pic span {
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
}
.port-dtl-social-pic ul {
  display: inline-block;
}
.port-dtl-social-pic ul li {
  list-style: none;
  display: inline-block;  
  margin-top: 10px;
}
.port-dtl-social-pic ul li img {
  display: inline-block;
  border: 1px solid #209f2e;
  height: 58px;
  width: 80px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.port-dtl-social-pic.all ul li img {
  display: inline-block;
  border: 1px solid #209f2e;
  height: 150px;
  width: 145px;
  line-height: 34px;
  text-align: center;
  color: #209f2e;
  margin-left: 6px;
  transition: 0.5s;
  font-size: 15px;
}
.port-dtl-social-pic ul li i:hover{
  background:#209f2e;
  color: #fff;
}
.port-dlt-title h4 {
  font-size: 24px;
  font-weight: 600;
  margin: 27px 0 10px;
  color: #483b33;
}
.port-dlt-text p {
  text-align: justify;
}


/* contact us inner page  */
.contact-info-area {
  padding: 110px 0 100px;
}
.contact-info.inner {
  background: #fff;
  box-shadow: 0px -4px 30px rgb(1 15 28 / 8%);
  padding: 52px 57px 52px;
  background-size: 100% 100%;
  border-radius: 10px;
}
.contact-info-icon {
  width: 80px;
  height: 80px;
  display: inline-block;
  line-height: 80px;
  background: #209f2e;
  font-size: 32px;
  color: #fff;
  position: relative;
  border-radius: 100%;
  z-index: 1;
}
.contact-info-icon::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 10px;
  top: 5px;
  background: #209f2e;
  opacity: 0.4;
  border-radius: 100%;
  z-index: -1;
  transition: .5s;
}
.contact-info:hover .contact-info-icon::before{
  left: 0;
  top: 0;
}
.contact-info-icon::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -10px;
  top: -5px;
  border-radius: 100%;
  background: #209f2e;
  opacity: 0.4;
  z-index: -1;
  transition: .5s;
}
.contact-info:hover .contact-info-icon::after{
  left: 0;
  top: 0;
}
.contact-info-title h3 {
  padding: 26px 0 9px;
  font-size: 24px;
}
.contact-numbar ul {
  list-style: none;
}
.contact-numbar ul li {
  margin: 0 0 0;
}

/*  contact area inner page */
.contact-us-area.inner {
  padding: 0px 0 110px;
  background: #F7F7FB;
}
.contact-title.inner {
  text-align: center;
}
.contact-title.inner h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 59px;
  padding: 60px 0 0;
}
.form-box.inner input {
  height: 54px;
  background-color: #fff;
  border: 0;
  transition: .5s;
  padding: 0px 25px;
  display: block;
  width: 100%;
  color: #0D0E14;
  margin-bottom: 30px;
  border-radius: 4px;
}
.form-box.inner textarea {
  height: 170px;
  background-color: #fff;
  border: 1px solid #209f2e;
  transition: .5s;
  padding: 15px 25px;
  display: block;
  width: 100%;
  border-radius: 4px;
}
.contact-form.inner button{
  width: 100%;
  height: 54px;
  background: #209f2e;
  border: 0;
  color: #fff;
  display: inline-block;
  margin-top: 40px;
  border-radius: 5px;
}
.form-box.inner input::placeholder {
  font-size: 16px;
}
.form-box.inner textarea::placeholder {
  font-size: 16px;
}

/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0,0,0,0.90);
  -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
  -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}
.search-popup{
  width: 100%;
}
.search-active .search-popup{
  transform: translateY(0%);
  margin-top: 0;
}
.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50%;
  text-align: center;
  background-color: #209f2e;
  width: 70px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  border-bottom: 3px solid #ffffff;
  -webkit-transition: all 500ms ease;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
.search-active .search-popup .close-search{
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -ms-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}
.search-popup form{
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin:-35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.search-active .search-popup form{
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}
.search-popup .form-group{
  position:relative;
  margin:0px; 
  overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
  position:relative;
  display:block;
  font-size:18px;
  line-height: 50px;
  color:#000000;
  height:70px;
  width:100%;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
  font-weight:500;
  text-transform:capitalize;
}
.form-group input::placeholder {
  font-size: 16px;
}
.search-popup .form-group input[type="submit"], .search-popup .form-group button {
  position: absolute;
  right: 30px;
  top: 0px;
  height: 70px;
  line-height: 70px;
  background: transparent;
  text-align: center;
  font-size: 24px;
  color: #209f2e;
  padding: 0;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  border: none;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
  color:#000000;
}
.search-popup .close-search.style-two{
  position: absolute;
  right: 25px;
  left: auto;
  color:#ffffff;
  width:auto;
  height:auto;
  top:25px;
  margin:0px;
  border:none;
  background:none !important;
  box-shadow:none !important;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}

.flaticon-multiply:before {
  content: inherit;
}
button.close-search i {
  font-size: 25px;
  color: #fff;
  display: inline-block;
}
span.flaticon-multiply i {
  display: inline-block;
  color: #209f2e;
}




/*<!-- ============================================================== --> 
        <-- Start scrollup section -->
 <!-- ============================================================== --> */
 .scroll-area{
  position: relative;
  z-index: 999;
 }
.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 30px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #209f2e 0%, #209f2e 100%);
    background-image: -webkit-linear-gradient(0deg, #209f2e 0%, #209f2e 100%);
    z-index: 9999;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s;
    border-radius: 10px; 
}
.scroll-area .go-top i {
      position: absolute;
      top: 50%;
      left: -4px;
      right: 0;
      margin: 0 auto;
      font-size: 15px;
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
  }
.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%; 
}
.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #191514  0%, #191514  100%);
    background-image: -ms-linear-gradient(0deg, #191514  0%, #191514  100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    border-radius: 100%;
}
.scroll-area .go-top:focus, .scroll-area .go-top:hover {
      color: #fff; 
  }
.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
        opacity: 1;
        visibility: visible; 
}
.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
        opacity: 0;
        top: 0;
        visibility: hidden;
 }
.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
        opacity: 1;
        visibility: visible;
        top: 50%; 
}
.scroll-area .go-top.active {
    top: 95%;
    -webkit-transform: translateY(-98%);
    -moz-transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    right: 30px;
    border-radius:100%;
}
.top-wrap {
  position: relative; 
}
.top-wrap .go-top-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background: #209f2e;
}
 .top-wrap .go-top-button i {
      font-size: 20px;
      font-weight: 700;
      padding-left: 4px;
      color: #fff;
 }
.top-wrap .go-top-button::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 45px;
    height: 45px;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
    opacity: 0;
    background-image: -moz-linear-gradient(0deg, #209f2e 0%, #209f2e 100%);
    background-image: -webkit-linear-gradient(0deg, #209f2e 0%, #209f2e 100%);
    border-radius: 100%;
}
.top-wrap .go-top-button:hover {
      background-color: #FF3C00;
      color: #fff; 
  }
@keyframes ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8; }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2); } }


/*===========================
<--  Loader Css -->
=============================*/
 .loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}
.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #696969;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
.loader:before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #209f2e;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader:after {
  position: absolute;
  content: '';
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}
.loader-wrapper .loder-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #060505;
  z-index: 2;
}
.loader-wrapper .loder-section.left-section {
left: 0;
transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
right: 0;
transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
left: -100%;
}
.loaded .loder-section.right-section {
right: -100%;
}
.loaded .loader-wrapper {
visibility: hidden;
}
.loaded .loader {
top: -100%;
opacity: 0;
} 

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}







/* Animation */

/* bounce-animate */

.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }

  @-webkit-keyframes float-bob {
      0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px); }
      50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px); }
      100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px); } }
    @-webkit-keyframes float-bob2 {
      0% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px); }
      50% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px); }
      100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px); } }
    @-webkit-keyframes float-bob3 {
      0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px); }
      50% {
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px); }
      100% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px); } }
    @-webkit-keyframes float-bob4 {
      0% {
        -webkit-transform: translateY(-70px);
        transform: translateY(-70px); }
      50% {
        -webkit-transform: translateY(-35px);
        transform: translateY(-35px); }
      100% {
        -webkit-transform: translateY(-70px);
        transform: translateY(-70px); } }
    @-webkit-keyframes float-bob5 {
      0% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px); }
      50% {
        -webkit-transform: translateY(-35px);
        transform: translateY(-35px); }
      100% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px); } }
    @-webkit-keyframes movebounce {
      0% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
      }
      50% {
        -webkit-transform: translateY(20px);
                transform: translateY(20px);
      }
      100% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
      }
    }