/**
* Template Name: Regna - v4.7.0
* Template URL: https://bootstrapmade.com/regna-bootstrap-onepage-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@import url(font-awesome.min.css);


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
* {
    box-sizing: border-box !important;
}

body {
  background: #fff;
  color: #666666;
  font-family: "Open Sans", sans-serif;
}

a {
  color: #2dc997;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: #2dca98;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
    font-size: 24px;
    font-family: 'Righteous', cursive;
}

h2 {
    font-size: 22px;
    font-family: 'Righteous', cursive;
}

h3 {
    font-size: 18px;
    font-family: 'Righteous', cursive;
}

h4 {
    font-size: 16px
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 13px
}


/* h1, h2, h3 {
  font-family: 'Righteous', cursive;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}
h4, h5, h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    margin: 0 0 20px 0;
    padding: 0;
} */


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #2dc997;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #49d6a9;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Header                                
--------------------------------------------------------------*/
#header {								/*    */
  height: 90px;							/*  id为header高度90px  */
  transition: all 0.5s; 				/*  所有属性都获得过渡效果  */                    
  z-index: 997;							/*  z层  */	
  background: rgba(52, 59, 64, 0.9);	/*  背景色  */
}
#header #logo h1 {
  font-size: 32px;									/*  字体大小  */
  margin: 0;										/*  外边距  */
  line-height: 1;									/*  多行文本间距  */
  font-family: "Poppins", sans-serif;				/*  字体列表  */
  font-weight: 700;									/*  字体粗细  */
  letter-spacing: 3px;								/*  字符之间的间距  */
  text-transform: uppercase;						/*  字符全部强制大写  */
}
#header #logo h1 a, #header #logo h1 a:hover {
  color: #fff;
}
#header #logo img {
  padding: 0;									/*  控制元素所有四条边的内边距  */
  margin: 0;									/*  控制元素外部的外边距  */
}
#header.header-transparent {
  background: transparent;						/*    */
}
#header.header-scrolled {
  background: rgba(52, 59, 64, 0.9);
  height: 70px;									/*    */
  transition: all 0.5s;							/*    */
}

.scrolled-offset {
  margin-top: 70px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;								         /*    */
}
.navbar ul {
  /* 标题 */
  margin: 180px;								    /*    */
  /* margin: 0;								            */
  padding: 0;								         /*    */
  display: flex;							       /*  元素内部显示  */
  list-style: none;							     /*  ur 和 li表结构  */
  align-items: center;						   /*  元素在侧轴居中  */
}
.navbar li {
  position: relative;						      /*  相对定位元素  */
}
.navbar > ul > li {
  white-space: nowrap;						    /*  设置如何处理元素中的空白  */
  padding: 10px 0 10px 24px;				  /*    */
}
.navbar a, .navbar a:focus {
  display: flex;							        /*    */
  align-items: center;						    /*    */
  justify-content: space-between;			/*    */
  font-family: "Poppins", sans-serif; /*    */
  color: #fff;								       /*    */
  font-size: 14px;							      /*    */
  padding: 0 4px;							        /*    */
  white-space: nowrap;						    /*    */
  transition: 0.3s;							      /*    */
  letter-spacing: 0.4px;					    /*    */
  position: relative;						      /*    */
  text-transform: uppercase;			         /*    */
}
.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: #2dc997;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  visibility: visible;
  transform: scaleX(1);
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #fff;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 24px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  color: #666666;
}
.navbar .dropdown ul a i {
  font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #2dc997;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(77, 77, 77, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile > ul > li {
  padding: 0;
}
.navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before {
  visibility: hidden;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #666666;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #2dc997;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #2dc997;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
    width: 100%;
    height: 100vh;
    background: url(../img/hero-bg2.jpg) top center;
    background-size: cover;
    position: relative;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

#hero:before {
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

#hero .hero-container {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

#hero h1 {
    margin: 30px 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 768px) {
    #hero h1 {
        font-size: 28px;
        line-height: 36px;
    }
}

#hero h2 {
    color: #eee;
    margin-bottom: 50px;
    font-size: 24px;
}

@media (max-width: 768px) {
    #hero h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }
}

#hero .btn-get-started {
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px;
    border: 2px solid #fff;
    color: #fff;
}

#hero .btn-get-started:hover {
    background: #2dc997;
    border: 2px solid #2dc997;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
  overflow: hidden;
}

/* Sections Header
--------------------------------*/
.section-header .section-title {
  font-size: 32px;
  color: #111;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  margin-bottom: 5px;
}
.section-header .section-description {
  text-align: center;
  padding-bottom: 40px;
  color: #999;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 20px 0;
  background-color: whitesmoke;
  min-height: 40px;
  margin-top: 92px;
}
.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}
@media (max-width: 992px) {
  .breadcrumbs h2 {
    margin: 0 0 10px 0;
  }
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.breadcrumbs ol li + li {
  padding-left: 10px;
}
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #6c757d;
  content: "/";
}
@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}


/* -- */
/** blog_main section **/



/*---------------------------- preloader area ----------------------------*/

.main-layout {
     background-repeat: no-repeat;
     background: url(../images/body_bg.png);
}

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}




/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/

.head_top {
     background: url(../images/banner1.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
}

.header {
     width: 100%;
     background: transparent;
     padding: 30px 30px;
}

.logo a {
     font-size: 40px;
     font-weight: bold;
     text-transform: uppercase;
     color: #fff;
     line-height: 40px;
}

.banner_main {
     padding: 90px 0 190px 0;
}

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

.text-bg h1 {
     color: #02fee5;
     font-size: 75px;
     line-height: 110px;
     font-weight: bold;
}

.text-bg p {
     color: #fff;
     font-size: 17px;
     line-height: 28px;
     padding: 40px 0;
}

.text-bg a {
     font-size: 17px;
     background-color: #fff;
     color: #000;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
}

.text-bg a:hover {
     background-color: #02fee5;
     color: #000;
     transition: ease-in all 0.5s;
     border-radius: 26px;
}

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

.white1 {color: #fff;}

.titlepage {
     text-align: center;
     padding-bottom: 60px;
}

.titlepage h2 {
     font-size: 40px;
     color: #3e3e3e;
     line-height: 57px;
     font-weight: bold;
     padding: 0;
     padding-bottom: 20px;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}


/** blog_main section **/
.blog_main {margin-top: 85px;}
.blog_main .span {font-size: 17px; line-height: 20px; color: #2d2d2d;}
.our_two_box {box-shadow: #ddd 0px 0px 10px 0px; margin-bottom: 90px;}
.our_text_box {padding: 1px 30px 1px 1px;}
.our_img figure {margin: 0;}
.our_img figure img {width: 100%;}
.awesome {padding-bottom:40px; font-size: 26px; line-height: 38px; color:#333334; } 
.our_text_box p {padding-bottom: 50px; color: #3c3c3c; display: inline-block; } 
.flot_left1 {float: left; padding: 0;} 
ul.like {float: right;}
ul.like li {display: inline-block;}
ul.like li a {display: inline-block; color: #3c3c3c;}
ul.like li img {padding: 0px 10px 0px 40px;}

/** secend section **/

.position_box {position: absolute; bottom: 0; padding: 0px 20px 20px 20px;}
.withi_color {color: #fff;}
.position_box p {color: #fff;} 
ul.withi_color li a {color: #fff;}
ul.withi_color {float: left; padding-left: 40px;}

/** end secend section **/



/** end three section **/
.padding_flot {
     padding-bottom:0; 
     display: inline-block; 
     float: left;
     font-size: 20px;
     padding-right: 14px;
}
.three_box {padding: 20px 20px; box-shadow: #ddd 0px 0px 10px 0px;}
.three_box p {padding-bottom: 0; padding-top: 15px;}
ul.padding_left2 li img {padding: 0px 10px 0px 30px;}



/** end three section **/


/** end for section **/

.magna_top90 {margin-top: 90px;}

/** end for section **/


/** end blog_main section **/





/** Testimonial section **/

.Testimonial {
     background: url(../images/test_bg.jpg);
     background-repeat: no-repeat;
    padding: 60px 0px;
     background-position: center;
     background-size: 100% 100%;
}
.Testimonial .titlepage {text-align: left; padding-bottom: 15px;}
.Testimonial .titlepage h2 {
     color: #fff;
     margin-bottom: 0px;
     padding-bottom: 0px;
}

.Testimonial .titlepage span {
     color: #fff;
}

.Testimonial_box i {
     border: #e6e1e1 solid 10px;
     width: 220px;
     height: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     border-radius: 210px;
     cursor: pointer;
     background: #6ad0bc;
     padding: 8px;
}

.Testimonial_box i::after {
     position: absolute;
     content: "";
     width: 50px;
     height: 50px;
     top: -16px;
     left: 34px;
     display: inline-block;
     border: #ddd solid 6px;
     border-radius: 30px;
     background: #6ad0bc;
}

.Testimonial_box {
     text-align: left;
}

.Testimonial_box h4 {
     color: #fff;
     text-transform: uppercase;
     font-size: 20px;
     line-height: 20px;
     font-weight: 400;
     padding: 0;
}

.Testimonial_box p {
     color: #fff;
     font-size: 17px;
     line-height: 28px;
     padding: 25px 0 0px 0;
}


/** end Testimonial section **/


/** contact section **/

.padd_leri0 {
     padding-left: 0;
     padding-right: 0;
}

.contact .titlepage span {
     font-size: 17px;
     line-height: 28px;
}

.contact {
     padding-top: 90px;
}

.main_form {
     padding: 50px 50px;
     border: #046c58 solid 1px;
     margin: 0px 80px;
}

.contact .main_form .form_contril {
     border: #046c58 solid 1px;
     margin-bottom: 20px;
     width: 100%;
     height: 45px;
     background: #fff;
     color: #046c58;
     font-size: 17px;
     border-top: 0;
     border-right: 0;
     border-left: 0;
}

.contact .main_form .textarea {
     border: #046c58 solid 1px;
     margin-bottom: 20px;
     width: 100%;
     height: 60px;
     background: #fff;
     color: #046c58;
     font-size: 17px;
     border-top: 0;
     border-right: 0;
     border-left: 0;
}

.contact .main_form .send_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #000;
     text-transform: uppercase;
     color: #fff;
     padding: 13px 0px;
     float: right;
     display: block;
     margin-top: 30px;
     width: 100%;
     max-width: 190px;
}

.contact .main_form .send_btn:hover {
     background-color: #046c58;
     transition: ease-in all 0.5s;
     color: #fff;
     border-radius: 26px;
}

#contact *::placeholder {
     color: #046c58;
     opacity: 1;
}

.current {
     color: #fff;
     margin-top: -4px;
     position: absolute;
}

.con_img figure {
     margin: 0;
}

.con_img figure img {
     width: 100%;
}


/** end contact section **/

.read_more {
     font-size: 17px;
     background-color: #fff;
     color: #000;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 10px;
}

.read_more:hover {
     background: #000;
     color: #fff;
     border-radius: 26px;
     transition: ease-in all 0.5s;
}


/** footer **/

.multi {
     color: #046c58;
}

.footer {
     background: #fff;
}

.cont {
     text-align: center;
     margin-top: 80px;
}

.cont h3 {
     font-family: 'Righteous', cursive;
     font-size: 30px;
     line-height: 45px;
     color: #23262d;
     font-weight: bold;
     padding-bottom: 30px;
}

.cont span {
     color: #fff;
     font-size: 30px;
     line-height: 30px;
     padding: 30px 0px 30px 0px;
     display: inline-block;
     font-weight: bold;
}

.cont p {
     color: #fff;
     font-size: 17px;
     line-height: 30px;
     padding: 0 130px;
     padding-bottom: 60px;
}

ul.social_icon {
     text-align: center;
}

ul.social_icon li {
     display: inline-block;
     margin: 0 3px;
}

ul.social_icon li a {
     background: #fff;
     box-shadow: #ddd 0px 0px 10px 0px;
     font-size: 22px;
     padding-top: 5px;
     border-radius: 50px;
     width: 50px;
     height: 50px;
     display: inline-block;
     color: #000000;
}

ul.social_icon li a:hover {
     background: #046c58;
     color: #fff;

}



/** end footer **/



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #343b40;
  padding: 30px 0;
  color: #fff;
  font-size: 14px;
}
#footer .copyright {
  text-align: center;
}
#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #ccc;
}