/* reset */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --main-color: #017a45;
  --dark-color: #171d26;
  --dark-lite: #2d343f;
  --grey-color: #f6f6f6;
  --grey-lite: #fbfbfb;
  --shadow-md: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
}

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

body {
  font-family: "Montserrat", serif;
  font-size: 14px;
  background-color: white;
}

section{
  width: 100%;
}

figure{
  margin: 0;
}

a{
  text-decoration: none;
}

.site-wrap{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.section-header{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.section-header.full{
  max-width: 100%;
}
.section-header.left{
  width: 100%;
  max-width: unset;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.section-title{
  text-align: center;
  width: 100%;
  font-size: 38px;
}
.section-title.color{
  color: var(--main-color);
}
.section-title.white{
  color: white;
}
.section-title.inline{
  width: fit-content;
}
.section-title.bold{
  font-weight: 600;
  padding-left: 12px;
}

.section-title_sub{
  margin-bottom: 0;
  margin-top: 6px;
  text-align: center;
  font-size: 20px;
}
.section-title_sub.sm{
  font-size: 16px;
  text-align: justify;
}
.section-title_sub.left{
  margin-bottom: 0;
  margin-top: 6px;
  text-align: left;
  font-size: 16px;
}

#wpadminbar {
  display: none !important;
}


/* ------- */

/* header */

.header-st{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.header-overlay{
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: rgba(23, 29, 38, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.header-overlay.show{
  opacity: 1;
  visibility: visible;
}

.topbar{
  width: 100%;
  background-color: white;
  z-index: 99;
}

.topbar-wrap{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.topbar-contact{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 16px;
  align-items: center;
}

.topbar-contact li{
  width: fit-content;
}

.topbar-contact li a{
  color: var(--dark-lite);
  transition: all .3s;
}
.topbar-contact li a:hover{
  color: var(--main-color);
}

.login-btn{
  display: inline-block;
  padding-left: 16px;
  color: var(--dark-color);
  font-weight: 500;
  border-left: 2px solid var(--grey-color);
  transition: all .3s;
}
.login-btn:hover{
  color: var(--main-color);
}

.header{
  width: 100%;
  transition: all .3s;
  position: relative;
  z-index: 99;
}
.header.fill{
  background-color: white;
}

.main-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.call-menu_btn{
  display: none;
}

.main-header_logo{
  background-color: white;
  padding: 12px;
  display: inline-block;
}
.main-header_logo_img{
  width: fit-content;
}
.main-header_logo_img img{
  width: 180px;
}

.main-header_nav{
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 120px;
}

.main-menu{
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 50px;
}

.main-menu > li{
  width: fit-content;
  position: relative;
}
.main-menu > li::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: white;
  height: 3px;
  transition: all .3s;
}
.main-menu > li:hover:before{
  width: 100%;
}

.main-menu > li > a{
  display: block;
  padding: 8px 0;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  transition: all .3s;
}

.search-btn{
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: white;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: var(--dark-color);
  border-radius: 20px;
  transition: all .3s;
}
.search-btn:hover{
  background-color: var(--main-color);
  color: white;
}

.search-btn_mobile{
  display: none;
  font-size: 22px;
  color: var(--dark-color);
  transition: all .3s;
}
.search-btn_mobile:hover{
  color: var(--main-color);
}

.mobile-menu_contact{
  display: none;
}

.close-menu_wrap{
  display: none;
}

.header.fill .main-menu > li > a{
  color: var(--dark-color);
}

.header.fill .search-btn{
  background-color: var(--dark-color);
  color: white;
}
.header.fill .search-btn:hover{
  background-color: var(--main-color);
  color: white;
}
.header.fill .main-menu > li::before{
  background-color: var(--dark-lite);
}


.search-contain{
  position: absolute;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .4s;
}

.search-contain.show{
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
}

.search-form{
  position: relative;
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--dark-lite);
  transition: all .3s;
}

.search-form_input{
  font-size: 18px;
  padding: 6px 0;
  flex: 1;
  border: none;
  outline: none;
  background-color: white;
  color: var(--dark-color);
}

.search-form:focus-within{
  border-bottom: 1px solid var(--main-color);
}
.search-form:focus-within .search-form_submit{
  color: var(--main-color);
}

.search-form_submit{
  flex-shrink: 0;
  font-size: 18px;
  color: var(--dark-color);
  border: none;
  outline: none;
  background-color: transparent;
  transition: all .3s;
}

.close-search{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -70px;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background-color: white;
  border-radius: 20px;
  color: var(--dark-color);
  transition: all .3s;
}
.close-search:hover{
  background-color: var(--main-color);
  color: white;
}



/* hero */
.hero-st{
  width: 100%;
}

.hero-wrap{
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-list{
  width: 100%;
}

.hero-item{
  position: relative;
  z-index: 1;
}
.hero-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .4);
}

.hero-img{
  width: 100%;
  height: 900px;
  overflow: hidden;
}
.hero-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content_wrap{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}

.hero-content{
  width: 900px;
  text-align: center;
}
.hero-content h4{
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 35px;
  margin-bottom: 16px;
}
.hero-content h4 span{
  font-size: 25px;
}
.hero-content h2{
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 65px;
  margin-bottom: 16px;
}

.hero-nav{
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 18px;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  transition: all .3s;
}
.hero-nav.prev{
  left: 100px;
}
.hero-nav.next{
  right: 100px;
}

.hero-nav:hover{
  background-color: white;
  color: var(--dark-color);
}

.hero-social_list{
  position: absolute;
  width: fit-content;
  left: 50%;
  top: 57%;
  transform: translateX(-50%);
  display: flex;
  gap: 22px;
  align-items: center;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-social_list > li{
  width: fit-content;
}
.hero-social_list > li > a{
  display: block;
  font-size: 18px;
  color: white;
}

.hero-paginate_wrap{
  display: none;
}
/* ----- */


/* criteria */
.criteria-st{
  width: 100%;
  padding: 140px 0;
}

.criteria-list{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.criteria-item{
  width: 20%;
  aspect-ratio: 1/1;
  background-color: var(--grey-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
.criteria-item:nth-child(even){
  background-color: var(--grey-lite);
}
.criteria-item:hover{
  background-color: var(--main-color);
}
.criteria-item:hover .criteria-img{
  opacity: 0;
}
.criteria-item:hover .criteria-img_w{
  opacity: 1;
}
.criteria-item:hover .criteria-name{
  color: white;
}
.criteria-item:hover .criteria-number{
  color: white;
}

.criteria-img_wrap{
  width: 50px;
  height: 50px;
  position: relative;
  margin-bottom: 12px;
}
.criteria-img{
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: all .3s;
}
.criteria-img_w{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all .3s;
}
.criteria-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.criteria-img_w img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.criteria-name{
  font-size: 18px;
  color: var(--dark-lite);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  transition: all .3s;
}
.criteria-number{
  font-size: 40px;
  color: var(--dark-color);
  font-weight: 700;
  margin: 0;
  transition: all .3s;
}


/* -------- */


/* featured */
.featured-banner_wrap{
  width: 100%;
  position: relative;
  z-index: 1;
}

.featured-list{
  width: 100%;
}

.featured-item{
  width: 100%;
}

.featured-img{
  width: 100%;
  aspect-ratio: 5/3;
  overflow: hidden;
}
.featured-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.featured-nav{
  display: inline-block;
  position: absolute;
  width: fit-content;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.featured-nav.prev{
  left: -4px;
}
.featured-nav.prev .f-nav-btn{
  border-radius: 0 32px 32px 0;
}
.featured-nav.prev .f-nav-btn::before{
  border-radius: 0 37px 37px 0;
}

.featured-nav.next{
  right: -4px;
}
.featured-nav.next .f-nav-btn{
  border-radius: 32px 0 0 32px;
}
.featured-nav.next .f-nav-btn::before{
  border-radius: 37px 0 0 37px;
}

.f-nav-btn{
  display: inline-block;
  width: 32px;
  height: 64px;
  text-align: center;
  line-height: 64px;
  background-color: white;
  font-size: 16px;
  color: var(--dark-color);
  position: relative;
  transition: all .3s;
  z-index: 1;
}
.f-nav-btn:hover{
  background-color: var(--main-color);
  color: white;
}

.f-nav-btn::before{
  content: "";
  position: absolute;
  inset: -5px;
  background-color: rgba(255,255,255, 0.4);
  z-index: -1;
  transition: all .3s;
}
.f-nav-btn:hover::before{
  background-color: rgba(1, 122, 69, 0.4);
}



.featured-content{
  width: 100%;
  height: 100%;
  background-color: var(--dark-color);
  color: white;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

.featured-item{
  width: 580px;
  padding-right: 12px;
}

.featured-title{
  font-size: 18px;
  font-weight: 500;
  color: var(--main-color);
}
.featured-text{
  margin: 0;
}
/* -------- */

/* founder */
.founder-st{
  width: 100%;
  padding: 140px 0;
}

.founder-list{
  width: 100%;
  display: flex;
  justify-content: center;
}

.founder-item{
  width: 33.33%;
  padding: 16px 30px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.founder-item:not(:last-child)::before{
  content: "";
  position: absolute;
  right: -1px;
  background-color: var(--grey-color);
  z-index: 2;
  top: 60px;
  bottom: 60px;
  width: 2px;
}

.founder-item:hover .founder-view{
  opacity: 1;
}

.founder-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.founder-thumb{
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.founder-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.founder-info{
  flex: 1;
  text-align: center;
}

.founder-name{
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-lite);
  margin-bottom: 4px;
}
.founder-position{
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-color);
  margin: 0;
}

.founder-desc{
  margin: 0;
  text-align: center;
}

.founder-view{
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transition: all .3s;
}
.founder-view img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

}
/* ------- */

/* news */
.news-st{
  padding-top: 40px;
  padding-bottom: 140px;
}

.news-wrap{
  width: 100%;
}

.news-list{
  width: 100%;
}

.news-item{
  width: 100%;
  display: inline-block;
}
.news-item:hover .news-thumb img{
  transform: scale(1.2);
}

.news-item_head{
  width: 100%;
  position: relative;
}

.news-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all .3s;
}

.news-author{
  position: absolute;
  display: inline-block;
  padding: 5px 10px;
  left: 20px;
  top: 20px;
  color: white;
  font-size: 13px;
  background-color: rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
}

.news-item_info{
  padding: 20px;
}
.news-item_info_text{
  padding-left: 20px;
  border-left: 2px solid var(--grey-color);
}

.news-title{
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 6px;
  color: var(--dark-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-time{
  color: var(--dark-lite);
  font-weight: 400;
  margin: 0;
}

.news-paginate .swiper-pagination-bullet{
  width: 16px;
  height: 4px;
  background-color: var(--dark-lite);
  border-radius: 0;
}
.news-paginate .swiper-pagination-bullet-active{
  width: 22px;
  height: 4px;
}
/* ----- */

/* contact-st */
.contact-st{
  width: 100%;
  padding: 140px 0;
  position: relative;
  z-index: 1;
}
.contact-st::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* background-color: rgba(255,255,255, 0.3); */
}

.contact-company_name{
  font-weight: 600;
  font-size: 26px;
}
.contact-company_name.normal{
  font-weight: 500;
}

.contact-text{
  margin-bottom: 0;
  font-weight: 500;
  font-size: 16px;
}

.contact-social_list{
  width: fit-content;
  display: flex;
  gap: 16px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-social_list > li{
  width: fit-content;
}
.contact-social_list > li > a{
  display: block;
  font-size: 18px;
  color: var(--dark-color);
}

#wpcf7-f156-o1 .wpcf7-form{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}

#wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap{
  width: calc(50% - 15px);
}
#wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap:nth-child(4), #wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap:nth-child(5){
  width: 100%;
}

#wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap .contact-form_input{
  width: 100%;
  background-color: var(--dark-lite);
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  border: none;
  outline: none;
}

#wpcf7-f156-o1 .wpcf7-form .contact-form_submit{
  width: fit-content;
  background-color: var(--main-color);
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  border: none;
  outline: none;
  font-weight: 600;
}

#wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap .contact-form_text{
  width: 100%;
  background-color: var(--dark-lite);
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  height: 100px;
}

#wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap .contact-form_input::placeholder, .contact-form_text::placeholder{
  color: var(--grey-color);
}


#wpcf7-f157-o1 .wpcf7-form{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}

#wpcf7-f157-o1 .wpcf7-form .wpcf7-form-control-wrap{
  width: calc(50% - 15px);
}
#wpcf7-f157-o1 .wpcf7-form .wpcf7-form-control-wrap:nth-child(4), #wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap:nth-child(5){
  width: 100%;
}

#wpcf7-f157-o1 .wpcf7-form .wpcf7-form-control-wrap .contact-form_input{
  width: 100%;
  background-color: var(--dark-lite);
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  border: none;
  outline: none;
}

#wpcf7-f157-o1 .wpcf7-form .contact-form_submit{
  width: fit-content;
  background-color: var(--main-color);
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  border: none;
  outline: none;
  font-weight: 600;
}

#wpcf7-f157-o1 .wpcf7-form .wpcf7-form-control-wrap .contact-form_text{
  width: 100%;
  background-color: var(--dark-lite);
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  height: 100px;
}

#wpcf7-f157-o1 .wpcf7-form .wpcf7-form-control-wrap .contact-form_input::placeholder, .contact-form_text::placeholder{
  color: var(--grey-color);
}
/* ---------- */


/* footer */
.footer-sub{
  background-color: var(--dark-color);
  color: white;
}

.footer-sub_wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footer-sub_title{
  font-size: 38px;
  font-weight: 500;
  color: white;
  margin: 0;
}

.footer-sub_form{
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.footer-sub_form_input{
  width: 340px;
  padding: 10px 0;
  border: none;
  outline: none;
  background-color: transparent;
  border-bottom: 1px solid var(--grey-color);
  color: white;
}
.footer-sub_form_input::placeholder{
  color: var(--grey-color);
  font-style: italic;
}

.footer-sub_form_submit{
  width: fit-content;
  background-color: var(--main-color);
  padding: 10px 20px;
  border-radius: 6px;
  color: white;
  border: none;
  outline: none;
  font-weight: 600;
}

.footer-info{
  width: 640px;
  padding-top: 60px;
}

.footer-logo{
  margin-bottom: 20px;
}
.footer-logo img{
  width: 140px;
}

.footer-desc{
  font-weight: 500;
  color: var(--dark-color);
}

.footer-contact_list{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-contact_list li{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-contact_list li i{
  color: var(--main-color);
  font-size: 18px;
}

.footer-contact_text{
  margin-bottom: 0;
  color: var(--dark-color);
}

.footer-social_list{
  width: fit-content;
  display: flex;
  gap: 16px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 24px;
  margin-top: 20px;
}
.footer-social_list > li{
  width: fit-content;
}
.footer-social_list > li > a{
  display: block;
  font-size: 18px;
  color: var(--main-color);
}

.map-wrap{
  width: 100%;
  height: 100%;
}

.map-wrap iframe{
  width: 100%;
  height: 100%;
}

.copy-right_wrap{
  background-color: var(--main-color);
  padding: 10px 0;
}

.copy-right{
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copy-right_text{
  margin: 0;
}

.footer-menu{
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu > li{
  width: fit-content;
}
.footer-menu > li > a{
  display: block;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}

.scrol-top_btn{
  position: fixed;
  z-index: 88;
  right: 0;
  bottom: 0;
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  color: white;
  background-color: var(--dark-color);
  cursor: pointer;
}
/* ------ */

/* page */
.page-spacing{
  width: 100%;
  height: 112px;
  background-color: var(--dark-color);
}

.page-st{
  padding: 140px 0;
}

.page-title{
  font-weight: 600;
  font-size: 36px;
  color: var(--dark-color);
  margin-bottom: 60px;
  padding-left: 16px;
  text-transform: uppercase;
  position: relative;
}
.page-title::before{
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  top: 6px;
  bottom: 6px;
  background-color: var(--main-color);
}

.page-about_content_text{
  position: relative;
  padding: 60px 40px;
  z-index: 1;
}
.page-about_content_text::before{
  content: "";
  position: absolute;
  background-color: var(--grey-color);
  top: 0;
  left: 0;
  bottom: -80px;
  right: -100px;
  z-index: -1;
}

.page-about_banner{
  width: 100%;
  height: 390px;
  position: relative;
  z-index: 2;
}
.page-about_banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.main-paginate{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.main-paginate span{
  display: inline-block;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  border-radius: 50%;
  font-weight: 500;
  color: white;
  background-color: var(--main-color);
}
.main-paginate a{
  display: inline-block;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  border-radius: 50%;
  color: #333;
  background-color: var(--grey-color);
  text-decoration: none;
  transition: all .3s;
}
.main-paginate a:hover{
  color: white;
  background-color: var(--dark-lite);
}

.single-title{
  font-weight: 600;
  font-size: 32px;
  color: var(--dark-color);
  margin: 0;
  padding-left: 16px;
  text-transform: uppercase;
  position: relative;
}
.single-title::before{
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  top: 6px;
  bottom: 6px;
  background-color: var(--main-color);
}

.single-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.single-info span{
  font-size: 12px;
  font-weight: 500;
}

.single-banner{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}
.single-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sidebar-title{
  font-weight: 600;
  font-size: 24px;
  color: var(--dark-color);
  margin: 0;
  padding-left: 12px;
  text-transform: uppercase;
  position: relative;
}
.sidebar-title::before{
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  top: 0px;
  bottom: 0px;
  background-color: var(--main-color);
}


.sidebar-post-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-post{
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
}

.sidebar-post_img{
  width: 100px;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sidebar-post_text{
  flex: 1;
  color: var(--dark-color);
}
.sidebar-post_text h6{
  font-size: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.sidebar-post_text h6::before{
  content: "";
  position: absolute;
  background-color: var(--grey-color);
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
}
/* --------- */
/* language menu */
.lang-menu{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
  font-size: 12px;
}
.lang-menu > li{
  width: fit-content;
}
.lang-menu >li >a{
  color: var(--dark-color);
  font-weight: 600;
}

.search-key {
    color: var(--main-color);
}
/* ---- */


@media only screen and (max-width: 1366px){
  .featured-img{
    aspect-ratio: 1/1;
  }

  .featured-content{
    padding-left: unset;
    padding: 40px;
  }

  .featured-item{
    width: 100%;
    padding-right: unset;
  }
}

@media only screen and (max-width: 1200px){
  .hero-nav{
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid white;
  }
  .hero-nav.next{
    right: 30px;
  }
  .hero-nav.prev{
    left: 30px;
  }

  .featured-img{
    aspect-ratio: 3/4;
  }

  .page-about_banner{
    height: 480px;
  }
}


@media only screen and (max-width: 992px){
  .main-header_nav{
    gap: 60px;
  }

  .main-menu{
    gap: 30px;
  }

  .hero-content{
    width: 700px;
  }
  .hero-content h4{
    font-size: 24px;
    margin-bottom: 8px;
  }
  .hero-content h2{
    font-size: 48px;
  }

  .hero-img{
    height: 660px;
  }

  .criteria-name{
    font-size: 16px;
  }
  
  .criteria-number{
    font-size: 28px;
  }

  .featured-img{
    aspect-ratio: 5/3;
  }

  .featured-content{
    padding: 60px 40px;
  }

  .footer-sub_title{
    font-size: 30px;
  }

  .footer-sub_form{
    gap: 12px;
  }
}

@media only screen and (max-width: 820px){
  .main-header_logo_img img{
    width: 144px;
  }

  .main-header_nav{
    gap: 40px;
  }

  .main-menu{
    gap: 24px;
  }

  .hero-nav.next{
    right: 12px;
  }
  .hero-nav.prev{
    left: 12px;
  }

  .hero-content h4{
    font-size: 20px;
  }
  .hero-content h4 span{
    font-size: 16px;
  }
  .hero-content h2{
    font-size: 36px;
  }

  .hero-img{
    height: 720px;
  }

  .hero-social_list{
    top: 55%;
  }

  .criteria-item{
    width: 33.33%;
  }
  .criteria-item:nth-child(4), .criteria-item:nth-child(5){
    width: 50%;
    aspect-ratio: 16/9;
  }

  .footer-sub_wrap{
    gap: 16px;
    justify-content: center;
  }

  .footer-menu{
    gap: 24px;
  }
}


@media only screen and (max-width: 768px){
  .topbar{
    display: none;
  }

  .header{
    background-color: white;
  }

  .main-header_nav{
    position: fixed;
    top: 0;
    bottom: 0;
    right: -290px;
    width: 280px;
    padding: 100px 12px;
    background-color: var(--dark-color);
    overflow-y: auto;
    flex-direction: column;
    gap: 24px;
    z-index: 999;
    transition: all .3s;
  }
  .main-header_nav.show{
    right: 0;
  }

  .search-btn{
    display: none;
  }
  .search-btn_mobile{
    display: inline-block;
  }

  .main-menu{
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  
  .main-menu > li{
    width: 100%;
  }

  .main-menu > li:hover{
    background-color: var(--dark-lite);
  }
  .main-menu > li::before{
    display: none;
  }
  
  .main-menu > li > a{
    display: block;
    padding: 16px;
    font-size: 14px;
  }

  .call-menu_btn{
    display: inline-block;
    font-size: 30px;
    color: var(--dark-color);
    transition: all .3s;
  }
  .call-menu_btn:hover{
    color: var(--main-color);
  }

  .mobile-menu_contact{
    display: block;
    width: 100%;
  }

  .topbar-contact{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }

  .topbar-contact li{
    width: 100%;
    display: block;
    gap: 12px;
    padding: 0 12px;
    color: var(--main-color);
  }

  .topbar-contact li a{
    display: flex;
    gap: 12px;
    width: 100%;
    color: var(--main-color);
  }

  .login-btn{
    display: block;
    text-align: center;
    font-weight: 600;
    padding: 12px;
    background-color: var(--main-color);
    color: white;
    border-left: none;
    border-radius: 4px;
  }
  .login-btn:hover{
    background-color: white;
    color: var(--dark-color);
  }

  .close-menu_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
  }
  .close-menu{
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: var(--dark-lite);
    color: white;
    border-radius: 50%;
    transition: all .3s;
  }

  .founder-list{
    flex-wrap: wrap;
  }
  .founder-item{
    width: 100%;
    padding: 30px;
  }
  .founder-item::before{
    display: none;
  }

  .footer-logo{
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 12px;
  }
  .footer-logo img{
    width: 120px;
  }

  .footer-desc{
    text-align: justify;
  }

  .footer-info{
    width: 100%;
  }

  .map-wrap{
    height: 320px;
  }

  .copy-right{
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .page-about_content_text::before {
    right: 0;
    bottom: 0;
  }

  .page-st{
    padding: 80px 0;
  }

  .page-spacing{
    height: 64px;
  }

  .lang-menu{
    margin-bottom: 24px;
    padding-left: 14px;
    font-size: 14px;
  }
  .lang-menu >li >a{
    color: white;
  }
}

@media only screen and (max-width: 480px){

  .main-header_logo_img img{
    width: 120px;
  }

  .call-menu_btn{
    font-size: 26px;
  }

  .search-btn_mobile{
    font-size: 18px;
  }
  
  .hero-img{
    height: 540px;
  }

  .hero-nav{
    display: none;
  }

  .hero-paginate_wrap{
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 2;
  }

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

  .hero-paginate .swiper-pagination-bullet{
    width: 10px;
    height: 4px;
    background-color: white;
    border-radius: 0;
    opacity: .5;
  }
  .hero-paginate .swiper-pagination-bullet-active{
    width: 16px;
    height: 4px;
    opacity: 1;
  }

  .hero-content{
    padding: 12px;
  }
  .hero-content h4{
    font-size: 14px;
  }
  .hero-content h4 span{
    font-size: 12px;
  }
  .hero-content h2{
    font-size: 22px;
  }

  .hero-social_list{
    top: 86%;
    gap: 12px;
  }
  .hero-social_list > li > a{
    font-size: 14px;
  }

  .criteria-st{
    padding: 80px 0;
  }

  .section-title{
    font-size: 18px;
  }
  .section-title.bold{
    padding-left: 6px;
  }

  .section-title_sub{
    font-size: 14px;
    margin-top: 0;
  }
  .section-title_sub.sm{
    font-size: 14px;
  }

  .criteria-item{
    width: 50%;
  }
  .criteria-item:nth-child(5){
    width: 100%;
  }

  .criteria-img_wrap{
    width: 38px;
    margin-bottom: 4px;
  }

  .criteria-name{
    font-size: 14px;
  }
  .criteria-number{
    font-size: 20px;
  }

  .news-paginate .swiper-pagination-bullet{
    width: 10px;
    height: 4px;
  }
  .news-paginate .swiper-pagination-bullet-active{
    width: 16px;
    height: 4px;
  }

  .featured-img{
    aspect-ratio: 4/3;
  }

  .f-nav-btn{
    width: 24px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
  }
  .featured-nav.prev .f-nav-btn{
    border-radius: 0 24px 24px 0;
  }
  .featured-nav.prev .f-nav-btn::before{
    border-radius: 0 29px 29px 0;
  }

  .featured-nav.next .f-nav-btn{
    border-radius: 24px 0 0 24px;
  }
  .featured-nav.next .f-nav-btn::before{
    border-radius: 29px 0 0 29px;
  }

  .featured-content{
    padding: 60px 16px;
  }

  .founder-st{
    padding: 80px 0;
  }

  .founder-list{
    gap: 28px;
  }

  .founder-item{
    padding: 0;
  }

  .news-st{
    padding-top: 32px;
    padding-bottom: 80px;
  }
  
  #wpcf7-f156-o1 .wpcf7-form{
    gap: 12px;
  }
  #wpcf7-f156-o1 .wpcf7-form .wpcf7-form-control-wrap{
    width: 100%;
  }

  #wpcf7-f157-o1 .wpcf7-form{
    gap: 12px;
  }
  #wpcf7-f157-o1 .wpcf7-form .wpcf7-form-control-wrap{
    width: 100%;
  }

  .contact-company_name.normal{
    font-size: 16px;
  }

  .contact-st{
    padding: 80px 0;
  }

  .footer-sub_title{
    font-size: 16px;
  }

  .footer-sub_form{
    width: 100%;
    gap: 10px;
  }
  .footer-sub_form_input{
    width: unset;
    flex: 1;
    padding: 6px 0;
  }
  .footer-sub_form_submit{
    padding: 6px 10px;
  }

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

  .footer-menu{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .footer-menu > li >a{
    font-size: 14px;
  }

  .scrol-top_btn{
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }

  .search-contain{
    padding: 0 16px;
  }

  .search-form_input{
    font-size: 14px;
  }

  .search-form_submit{
    font-size: 14px;
  }

  .close-search{
    bottom: -60px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
  }

  .page-about_content_text{
    padding: 20px 12px;
  }

  .page-st{
    padding: 60px 0;
  }

  .page-spacing{
    height: 57px;
  }
}