/* =====================================
Template Name: Metalpeak
Author Name: Webby Crown
Author URI: 
Description: Metalpeak HTML5 Template.
Version:1.0
========================================*/

/*======================================
[ CSS Table of contents ]
|
|___ Home one style
| |
| |___ 01. Header CSS
| |___ 02. Hero section CSS
| |___ 03. partner section CSS
| |___ 04. training section CSS
| |___ 05. needs section CSS
| |___ 06. our-services section CSS
| |___ 07. team section CSS
| |___ 08. portfolio section CSS
| |___ 09. blog section CSS
| |___ 10. testimonial section CSS
| |___ 11. Newsletter section CSS
| |___ 12. footer section CSS
|
|___ Home two style
| |
| |___ 01. Header-two CSS
| |___ 02. Hero-two section CSS
| |___ 03. our-services-two section CSS
| |___ 04. training-two section CSS
| |___ 05. team-two section CSS
| |___ 06. pricing section CSS
| |___ 07. work section CSS
| |___ 08. blog-two section CSS
| |___ 09. testimonial-two section CSS
| |___ 10. newslatter-two section CSS
| |___ 11. footer-two section CSS
|
|___ Home three style
| |
| |___ 01. Header-three CSS
| |___ 02. Hero-three section CSS
| |___ 03. our-services-three section CSS
| |___ 04. training-three section CSS
| |___ 05. counter-three section CSS
| |___ 06. team-three section CSS
| |___ 07. choose section CSS
| |___ 08. plan-three section CSS
| |___ 08. blog-three section CSS
| |___ 09. testimonial-three section CSS
| |___ 11. footer-three section CSS
|
|___ About style
| |
| |___ 01. about-taskflow CSS
| |___ 02. about-services section CSS
| |___ 03. about-count section CSS
| |___ 04. team section CSS
| |___ 05. about-newslatter section CSS
| |___ 06. about-testimonial section CSS
| |___ 07. footer section CSS
|
|___ services-page-one style
| |
| |___ 01. services-page-one CSS
|
|___ services-page-two style
| |
| |___ 01. services-page-two CSS
|
|___ services-detail-one-1 style
| |
| |___ 01. services-detail-one-1 CSS
|
|___ services-detail-one-2 style
| |
| |___ 01. services-detail-one-2 CSS
|
|___ services-detail-two style
| |
| |___ 01. services-detail-two CSS
|
|___ services-detail-three style
| |
| |___ 01. services-detail-three CSS
|
|___ team style
| |
| |___ 01. services-detail-three CSS
|
|___ team-detail style
| |
| |___ 01. team-detail css
|
|___ portfolio-grid style
| |
| |___ 01. portfolio-grid css
|
|___ portfolio-masonary style
| |
| |___ 01. portfolio-masonary css
|
|___ portfolio-slider style
| |
| |___ 01. portfolio-slider css
|
|___ portfolio-detail style
| |
| |___ 01. portfolio-detail css
|
|___ blog-grid style
| |
| |___ 01. blog-grid css
|
|___ blog-list style
| |
| |___ 01. blog-list css
|
|___ blog-classic style
| |
| |___ 01. blog-classic css
|
|___ blog-detail style
| |
| |___ 01. blog-detail css
|
|___ blog-detail-two style
| |
| |___ 01. blog-detail-two css
|
|___ blog-detail-three style
| |
| |___ 01. blog-detail-three css
|
|___ plan-page style
| |
| |___ 01. plan-page css
|
|___ testimonial-page style
| |
| |___ 01. testimonial-page css
|
|___ contact-us-page style
| |
| |___ 01. contact-us-page css
|
|___ error style
| |
| |___ 01. error css
|
|___ faq style
| |
| |___ 01. faq css
|
|___ career-page style
| |
| |___ 01. career-page css
|
|___ presantation-page style
| |
| |___ 01. presantation-page css*/

/**************************************
    Home one style
    **************************************

    /* -------------loader----------- */

.no-scroll {
  overflow: hidden;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}

.loader .loader-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader .loader-text h3 {
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 9px;
}

.loader-two {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}

.loader-two .loader-image {
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*=====================================
    01. Header style 1 CSS
    =======================================*/
  .load-more-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
   }
  .load-more-spinner{
    width:25px; 
    height:25px;
  }


/*=====================================
    01. Header style 1 CSS
    =======================================*/

.header {
  position: fixed;
  width: 100%;
  z-index: 99;
  transition: 0.3s all ease;
}

.header.sticky {
  background-color: var(--color-dark);
  box-shadow: 0px 15px 10px -15px #11111124;
}

.header .wc-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  position: relative;
}

.header.sticky .wc-navbar {
  padding: 10px 0;
}

.header .wc-navbar .mobile-menu {
  display: none;
}

.header .wc-navbar .logo a {
  max-width: 195px;
  width: 100%;
  display: block;
}

.header .wc-navbar .wc-navlist ul .wc-connect {
  display: none;
}

.header .wc-navbar .wc-navlist .logo {
  display: none;
}

.header .wc-navbar .wc-navlist ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .wc-navbar .wc-navlist ul li a {
  padding: 5px 15px;
  position: relative;
  transition: 0.4s all ease;
  width: 100%;
  display: block;
}

.header .wc-navbar .wc-navlist ul li a.active {
  color: var(--color-secondary);
}

.header .wc-navbar .wc-navlist ul li a.active svg path {
  fill: var(--color-secondary);
}

.header .wc-navbar .wc-navlist ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: ".";
  color: transparent;
  background: var(--color-primary);
  height: 1px;
}

.header .wc-navbar .wc-navlist ul li a:hover::after {
  width: 100%;
  transition: 0.4s all ease;
}

.header .wc-navbar .wc-navlist ul li a svg {
  margin-left: 5px;
  vertical-align: middle;
  height: 14px;
}

.header .wc-navbar .wc-navlist .parent-menu {
  position: relative;
}

.header .wc-navbar .wc-navlist .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 999;
  background: var(--color-five);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  border-radius: 9px;
  min-width: 190px;
  display: none;
  height: auto;
  width: max-content;
}

.header .wc-navbar .wc-navlist .parent-menu.on a svg {
  transform: rotate(180deg);
}

.header .wc-navbar .wc-navlist .sub-menu .header .wc-navbar .wc-navlist .sub-menu li a {
  font-size: var(--p-16);
}

.header .wc-navbar .wc-social-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header .wc-navbar .wc-social-btn .wc-search {
  padding-right: 19px;
}

.header .wc-navbar .wc-social-btn .wc-search .home-one-search path {
  fill: unset;
}

.header .wc-navbar .wc-social-btn .wc-connect a {
  padding: 10px 26px;
}

.header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap {
  transition: 0.4s all ease;
  background-color: var(--color-dark);
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  display: table;
  z-index: 99;
}

.header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap.active {
  top: 0;
}

.header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.close-search-log {
  border: 0px;
  background: transparent;
}

.header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .wc-search-close-btn {
  position: absolute;
  right: 0;
  top: -23px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  text-align: center;
  color: var(--color-four);
  font-size: 38px;
  border-radius: 37px;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:10px;
}
.search-loader svg{
  width:20px;
  height:18px;
}

.header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 20px;
  font-size: var(--a-17);
  color: var(--color-third);
  background: transparent;
  background-image: none;
  border: 0;
  border-bottom: 1px solid #000;
  transition: ease-in-out 0.4s;
  margin-top: 15px;
  margin-bottom: 30px;
  outline:none
}

.header.wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .form-control:focus {
  outline: none;
}

.header .wc-navbar .wc-social-btn .wc-search a svg {
  padding-right: 6px;
  font-size: 14px;
  vertical-align: middle;
}

.header .wc-navbar .wc-social-btn .fa-bars {
  display: none;
}

.header .wc-navbar .wc-social-btn .fa-xmark {
  display: none;
  position: absolute;
  z-index: 9;
  right: 0px;
  top: 12px;
}

.search-results{
  padding: 30px;
  overflow-x: auto;
  max-height: 400px;
  border: 1px solid #F1DDB0;
  background-color: #fff;
}
.recent-search-option {
  padding-bottom: 5px;
}

.search_view_btn{
  display:flex;
  align-items:center;
  justify-content:end;
}

.search-log .wc-search-wrap .search-results .recent-search-option .blog-list,
.search-log .wc-search-wrap .search-results .recent-search-option .services-list,
.search-log .wc-search-wrap .search-results .recent-search-option .our_services-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:25px;
  justify-content:space-between;
  margin-bottom: 20px;
}

.search-log .wc-search-wrap .search-results .recent-search-option .blog-list li,
.search-log .wc-search-wrap .search-results .recent-search-option .services-list li,
.search-log .wc-search-wrap .search-results .recent-search-option .our_services-list li{
  display:flex;
  align-items:center;
  gap:10px;
}

.search-log .wc-search-wrap .search-results .recent-search-option .blog-list li .img-cover{
  width:80px;
  height:70px;
  flex-shrink:0;
}

.search-log .wc-search-wrap .search-results .recent-search-option .services-list li .img-cover svg{
  width:70px;
  height:70px;
  flex-shrink:0;
}

.search-log .wc-search-wrap .search-results .recent-search-option .our_services-list li .img-cover{
  width:70px;
  height:70px;
  flex-shrink:0;
  border-radius:100%;
  overflow:hidden;
}

.search-log .wc-search-wrap .search-results .blog-list li .img-cover img,
.search-log .wc-search-wrap .search-results .our_services-list li .img-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.search-log .wc-search-wrap .search-results .blog-list li .img-cover img{
  border-radius:10px;
}

.recent-search-option h6{
  margin-bottom: 20px;
}

/*=====================================
    02. hero style CSS
    =======================================*/

.hero {
  padding: 200px 0;
  position: relative;
  background-color: var(--color-light);
}

.hero .hero-vector1 {
  position: absolute;
  top: 100px;
  left: 0;
}

.hero .hero-vector2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.hero .wc-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero .wc-hero .hero-title h1 {
  max-width: 886px;
  margin-bottom: 32px;
  position: relative;
}

.hero .wc-hero .hero-title p {
  max-width: 780px;
  margin-bottom: 46px;
  font-size: var(--h6-18);
  line-height: 28px;
  position: relative;
}

.hero .wc-hero .hero-image {
  max-width: 760px;
  width: 100%;
}

.wc-hero-image {
  max-width: 760px;
  width: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.wc-hero-image:before {
  padding-top: 79%;
}

.hero .wc-hero .hero-image img {
  padding: 40px 45px;
}

.hero .wc-hero .hero-image .hero-image-text h2 {
  position: absolute;
  left: -58px;
  bottom: -37px;
  color: var(--color-five);
  font-size: 32px;
  background-color: var(--color-primary);
  border-radius: 200px;
  padding: 15px 45px;
  max-width: 320px;
  width: 100%;
  line-height: 45px;
  text-align: center;
}

.hero .wc-hero .btn {
  font-weight: var(--semi-bold);
}

/*=====================================
    03. partner style CSS
    =======================================*/

.partner .partner-image {
  display: flex;
  justify-content: space-between;
}

.partner .partner-image .wc-image {
  background-color: var(--color-five);
  padding: 10px 35px;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  max-width: 230px;
  margin: 0 auto;
}

.partner .partner-image .wc-image img {
  opacity: 0.3;
  filter: invert(110%) sepia(70%) saturate(7%) hue-rotate(339deg)
    brightness(60%) contrast(49%);
}

.partner .partner-image .wc-image img:hover {
  opacity: unset;
  filter: unset;
}

/*=====================================
    04. training style CSS
    =======================================*/

.training .training-wrapper {
  justify-content: space-between;
  align-items: center;
}

.training .training-wrapper .training-image {
  max-width: 660px;
  width: 100%;
  margin-right: 42px;
}

.training .training-wrapper .training-content {
  margin-left: 42px;
}

.training .training-wrapper .training-content h2 {
  max-width: 650px;
  margin-bottom: 25px;
  text-align: start;
}

.training .training-wrapper .training-content p {
  max-width: 635px;
  margin-bottom: 30px;
}

.training .training-wrapper .training-content .training-achiev-wrapper {
  justify-content: space-between;
}

.training
  .training-wrapper
  .training-content
  .training-achiev-wrapper
  .training-achiev
  img {
  margin-bottom: 20px;
}

.training
  .training-wrapper
  .training-content
  .training-achiev-wrapper
  .advices
  img {
  max-width: 60px;
  height: 60px;
}

.training
  .training-wrapper
  .training-content
  .training-achiev-wrapper
  .Customers
  img {
  max-width: 49px;
  height: 60px;
}

.training
  .training-wrapper
  .training-content
  .training-achiev-wrapper
  .Experiences
  img {
  max-width: 60px;
  height: 60px;
}

.training
  .training-wrapper
  .training-content
  .training-achiev-wrapper
  .training-achiev
  h3 {
  margin-bottom: 7px;
}

/*=====================================
    05. needs style CSS
    =======================================*/
.needs {
  padding-top: 0px;
}

.needs .needs-wrapper {
  justify-content: space-between;
  align-items: center;
}

.needs .needs-wrapper .needs-content h2 {
  margin-bottom: 25px;
  max-width: 676px;
  text-align: start;
}

.needs .needs-wrapper .needs-content p {
  margin-bottom: 35px;
  max-width: 635px;
}

.needs .needs-wrapper .needs-image {
  max-width: 660px;
  width: 100%;
  position: relative;
  margin-left: auto;
}

.needs .needs-wrapper .needs-image:before {
  padding-top: 76%;
}

.needs .needs-wrapper .needs-image .nedds-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.needs .needs-wrapper .needs-image .nedds-video-btn .btn {
  background-color: var(--color-primary) !important;
  height: 68px;
  width: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}

.needs .needs-wrapper .needs-image .nedds-video-btn .btn svg path {
  fill: var(--color-five) !important;
}

/*=====================================
    06. our-services style CSS
    =======================================*/

.our-services .our-services-title h2 {
  text-align: center;
  margin-bottom: 60px;
}

.our-services .our-services-wrapper {
  justify-content: center;
  align-items: top;
}

.our-services .our-services-wrapper .our-services-content {
  padding: 0 68px;
  display: block;
}

.our-services .our-services-wrapper .our-services-content .our-services-icon {
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  margin: 0 auto 25px;
  background-color: var(--color-primary);
}

.our-services
  .our-services-wrapper
  .our-services-content
  .our-services-icon
  svg {
  height: 30px !important;
}

.our-services
  .our-services-wrapper
  .our-services-content
  .our-services-icon
  svg
  path {
  fill: var(--color-five);
}
.services-detail-one
  .support-content
  .Support-wrapper
  .support-icon-content
  .services-icon
  svg {
  width: 28px;
  height: 30px;
}
.our-services .our-services-wrapper .our-services-content h4 {
  text-align: center;
  margin-bottom: 15px;
}

.our-services .our-services-wrapper .our-services-content p {
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}

/*=====================================
    07. team style CSS
    =======================================*/

.team .team-head-wrapper {
  justify-content: space-between;
  align-items: center;
}

.team .team-head-wrapper .team-btn {
  text-align: right;
}

.team .team-head-wrapper .team-head-title h2 {
  margin-bottom: 15px;
  text-align: start;
}

.team .team-head-wrapper .team-head-title p {
  max-width: 680px;
  margin-bottom: 35px;
}

.team .wc-team-image-wrapper {
  justify-content: space-between;
}

.team .wc-team-image-wrapper .image-content {
  background-color: var(--color-five);
  padding: 18px;
  border-radius: 10px;
  margin: -80px 35px 0;
  z-index: 1;
  position: relative;
  text-align: center;
  box-shadow: 0px 2px 12px 0px rgba(1, 69, 44, 0.25);
}

.team .wc-team-image-wrapper .team-image {
  padding-bottom: 60px;
}

.team .wc-team-image-wrapper .team-image .image {
  position: relative;
  overflow: hidden;
  display: block;
}

.team .wc-team-image-wrapper .team-image .image::before {
  padding-top: 80%;
  display: block;
  content: "";
}

.team .wc-team-image-wrapper .team-image .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.team .wc-team-image-wrapper .image-content p {
  margin-bottom: 8px;
}

.team .wc-team-image-wrapper .image-content > a {
  margin-bottom: 14px;
  font-size: var(--h5-20);
  font-weight: var(--bold);
  line-height: var(--line-height-26);
  display: block;
  color: var(--color-third);
}

.team .wc-team-image-wrapper .image-content > a:hover {
  color: var(--color-primary);
}

.team .wc-team-image-wrapper .image-content .social-info a {
  padding: 0 7px;
}

.team .wc-team-image-wrapper .image-content .social-info a:hover svg path {
  fill: var(--color-secondary);
}

.team .wc-team-image-wrapper .image-content .social-info a svg path {
  fill: var(--color-six);
}

/*=====================================
    08. portfolio style CSS
    =======================================*/

.portfolio {
  position: relative;
}

.portfolio .hero-vector1 {
  position: absolute;
  top: -40px;
  left: 0;
}

.portfolio .hero-vector2 {
  position: absolute;
  right: 0px;
  bottom: 70px;
}

.portfolio .portfolio-head .portfolio-title h2 {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
}

.portfolio .portfolio-head .portfolio-tab {
  white-space: nowrap;
  overflow: auto;
  text-align: center;
}

.portfolio .portfolio-head .portfolio-tab::-webkit-scrollbar {
  display: none;
}

.portfolio .portfolio-head .portfolio-tab .portfolio-list {
  display: inline-flex;
}

.portfolio .portfolio-head .portfolio-tab ul li a {
  margin: 0 12px;
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.portfolio .portfolio-head .portfolio-tab ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-five);
}

.portfolio .portfolio-head .portfolio-tab ul li a.active {
  background-color: var(--color-primary);
  color: var(--color-five);
}

.portfolio .portfolio-wrapper {
  justify-content: center;
  align-items: center;
  margin-top: 65px;
}

.portfolio .portfolio-wrapper .portfolio-image {
  max-width: 558px;
  width: 100%;
  margin: 0 auto;
}

.portfolio .portfolio-wrapper .portfolio-image:before {
  padding-top: 78%;
}

.portfolio .portfolio-wrapper .portfolio-content {
  padding: 0 30px;
  position: relative;
  z-index: 9;
}

.portfolio .portfolio-wrapper .portfolio-content h2 {
  text-align: start;
}

.portfolio .portfolio-wrapper .portfolio-content p {
  max-width: 652px;
  margin-bottom: 35px;
  margin-top: 25px;
  position: relative;
  z-index: 1;
}

/*=====================================
    09. blog style CSS
    =======================================*/

.blog .blog-head-wrapper {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.blog .blog-head-wrapper .blog-head-title h2 {
  text-align: start;
  margin-bottom: 15px;
}

.blog .blog-head-wrapper .blog-btn {
  text-align: end;
}

.blog .blog-head-wrapper .blog-head-title p {
  max-width: 680px;
  margin-top: 15px;
}

.blog .blog-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
}

.blog .blog-wrapper .wc-column-4 {
  max-width: 100%;
}

.blog .blog-wrapper .blog-content {
  background-color: var(--color-five);
  padding: 20px 20px 22px 20px;
  box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
  border-radius: 15px;
}

.blog .blog-wrapper .blog-content .blog-image {
  max-width: 420px;
  position: relative;
  overflow: hidden;
}

.blog .blog-wrapper .blog-content .blog-image::before {
  padding-top: 61%;
}

.blog .blog-wrapper .blog-content .blog-image img {
  transition: all 0.4s ease-in-out;
}

.blog .blog-wrapper .blog-content .blog-image img:hover {
  transform: scale(1.1);
}

.blog .blog-wrapper .blog-content .blog-image .blog-date {
  position: absolute;
  top: 0;
  right: 16px;
}

.blog .blog-wrapper .blog-content .blog-image .blog-date p {
  background-color: var(--color-secondary);
  font-weight: var(--semi-bold);
  font-size: 12px;
  line-height: 22px;
  min-width: 98px;
  padding: 4px 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: var(--color-six);
}

.blog .blog-wrapper .blog-content h4 {
  margin-top: 22px;
  margin-bottom: 14px;
  font-weight: var(--semi-bold);
  line-height: 28px;
}

.blog .blog-wrapper .blog-content h4:hover {
  color: var(--color-primary);
}

.blog .blog-wrapper .blog-content p {
  max-width: 414px;
  margin-bottom: 30px;
}

/*=====================================
    10. testimonial style CSS
    =======================================*/

.testimonial {
  overflow:hidden;
  position: relative;
  padding-top: 200px;
  padding-bottom: 200px;
}

.testimonial .testimonial-bg-image {
  position: absolute;
  right: 0;
  max-width: 50%;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
}
.testimonial-slider {
  padding-bottom: 20px;
}
.testimonial .testimonial-wrapper {
  background-color: var(--color-seven);
  padding: 66px 80px 55px;
  border-radius: 20px;
  margin-left: 120px;
  max-width: 860px;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}

.testimonial .testimonial-wrapper .quotes-image {
  max-width: 70px;
  height: 70px;
  margin: 0 auto 20px;
}

.testimonial .testimonial-wrapper p {
  max-width: 700px;
  margin: 0 auto 25px;
  text-align: center;
  font-size: var(--h5-20);
  line-height: 34px;
}

.testimonial .testimonial-wrapper h5 {
  text-align: center;
  margin-bottom: 7px;
  line-height: 24px;
  color: var(--color-primary);
}

.testimonial .testimonial-wrapper .testimonial-image {
  max-width: 90px;
  height: 90px;
  margin: 0 auto 23px;
}

.testimonial .testimonial-wrapper .testimonial-founder {
  margin-bottom: 45px;
}

.testimonial .testimonial-wrapper .swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  background-color: var(--color-primary);
  opacity: 1;
  transition: 0.4s;
}

.testimonial
  .testimonial-wrapper
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
  height: 10px;
  border-radius: 20px;
}

/*=====================================
    11. newslatter style CSS
    =======================================*/

.newslatter {
  padding: 47px 0;
}

.newslatter .newslatter-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newslatter .newslatter-wrapper .newslatter-head h2 {
  color: var(--color-five);
  margin-bottom: 0 !important;
}

.newslatter .newslatter-wrapper .newslatter-input {
  max-width: 400px;
  width: 100%;
  position: relative;
  height: 54px;
}

.newslatter .newslatter-wrapper .newslatter-input .send-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn {
  background-color: var(--color-secondary);
  padding: 10px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px;
  cursor: pointer;
  border: 1px solid var(--color-secondary);
  transition: 0.2s all ease;
}
.newslatter .newslatter-wrapper .newslatter-input .send-btn .newslatter-btn {
  padding: 13px 22px;
}

.newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn:hover {
  background-color: var(--color-five);
}

.newslatter
  .newslatter-wrapper
  .newslatter-input
  .send-btn
  .mail-btn:focus-visible {
  outline: 0px;
}

.newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn svg path {
  fill: var(--color-third);
}

.newslatter .newslatter-wrapper .newslatter-input input {
  background-color: var(--color-five);
  padding: 14px 85px 14px 25px;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  border: 0;
  font-size: var(--p-16);
  line-height: var(--line-height-26);
}

.newslatter .newslatter-wrapper .newslatter-input input:focus {
  outline: none;
}

/*=====================================
    12. footer style 1 CSS
    =======================================*/

.footer .wc-footer {
  display: flex;
  justify-content: space-between;
  padding: 60px 0;
}

.footer .wc-footer-logo a {
  max-width: 195px;
  display: block;
  margin-bottom: 25px;
}

.footer .wc-footer-logo p {
  max-width: 393px;
}

.footer .wc-footer-menu h4 {
  margin-bottom: 15px;
}

.footer .wc-footer-menu .contact-menu ul li {
  position: relative;
  padding-left: 30px;
}

.footer .wc-footer-menu .menu ul li a {
  color: var(--color-third);
  margin-bottom: 7px;
  display: block;
  font-weight: var(--regular);
  font-size: var(--p-16);
}

.footer .wc-footer-menu .menu ul li a:hover {
  color: var(--color-primary);
}

.footer .wc-footer-menu .contact-menu ul li a {
  display: flex;
  margin-bottom: 0;
}

.footer .wc-footer-menu .contact-menu ul li a span {
  position: absolute;
  top: 0;
  left: 0;
}

.footer .wc-footer-menu .contact-menu ul li a svg {
  margin-right: 10px;
}

.footer .wc-footer-menu .contact-menu ul li a p {
  margin-bottom: 20px;
  max-width: 231px;
  line-height: var(--line-height-26);
}

.footer .wc-footer-menu .contact-menu ul li a p:hover {
  color: var(--color-primary);
}

.footer .wc-copy {
  display: flex;
  justify-content: space-between;
  padding: 25px 0;
  border-top: 1px solid rgba(111, 111, 111, 0.5);
}

.footer .wc-copy .wc-copy-text {
  display: flex;
  align-items: center;
}

.footer .wc-copy .wc-copy-text a:hover {
  color: var(--color-secondary);
}

.footer .wc-copy .wc-social-logo ul {
  display: flex;
}

.footer .wc-copy .wc-social-logo ul li a {
  padding-left: 14px;
}

.footer .wc-copy .wc-social-logo ul li a:hover svg path {
  fill: var(--color-secondary);
}

/**************************************
    Home two style
    ***************************************/

/*=====================================
    01. header style 2 CSS
    =======================================*/

.header-two.sticky {
  background-color: rgb(1 69 44 / 88%);
  padding: 10px 0;
}

.header-two.sticky .wc-navbar {
  padding: 10px;
  transition: 0.3s all ease;
}

.header-two.sticky .header-two-top-bar {
  margin-top: -66px;
}

.header-two .header-two-top-bar {
  transition: 0.3s all ease;
}

.header-two .wc-row {
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-two .header-contact a {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-five);
  margin-right: 20px;
}

.header-two .header-contact a svg path {
  fill: var(--color-five);
}

.header-two .header-contact a:hover {
  color: var(--color-secondary);
}

.header-two .wc-social-logo ul {
  display: flex;
  justify-content: flex-end;
}

.header-two .wc-social-logo ul li a {
  padding-left: 13px;
}

.header-two .wc-social-logo ul li a svg path {
  fill: var(--color-five) !important;
}

.header-two .wc-social-logo ul li a:hover svg path {
  fill: var(--color-secondary) !important;
}

.header-two .wc-navbar {
  background-color: var(--color-five);
  padding: 20px;
  border-radius: 15px;
}

.header-two .wc-navbar .wc-social-btn .fa-xmark {
  top: -10px;
}

/*=====================================
    02. hero style 2 CSS
    =======================================*/

.hero-two {
  position: relative;
  padding-top: 345px;
  padding-bottom: 238px;
}

.hero-two .hero-two-back-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-two::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(1, 69, 44, 0.5);
  z-index: 0;
}

.hero-two .hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.hero-two .hero-content h1 {
  max-width: 1034px;
  margin: 0 auto;
  position: relative;
  z-index: 9;
  color: var(--color-five);
}

.hero-two .hero-content p {
  max-width: 600px;
  margin: 25px auto 40px;
  color: var(--color-five);
}

.hero-two .hero-content .hero-next-btn,
.hero-two .hero-content .hero-prev-btn {
  position: relative;
}

.hero-two .hero-two-back-image .swiper {
  height: 100%;
}

.hero-two .hero-two-back-image img {
  height: 100%;
  object-fit: cover;
}

/*=====================================
    03. our-services style 2 CSS
    =======================================*/

.services-two .services-two-title h2 {
  text-align: center;
  margin-bottom: 15px;
}

.services-two .services-two-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
}

.services-two .services-two-wrapper .services-two-content {
  border-radius: 15px;
  padding: 38px 30px;
  margin-top: 40px;
  transition: 0.5s all ease;
  height: 100%;
  display: block;
}

.services-two .services-two-wrapper .services-two-content:hover {
  background-color: var(--color-primary);
}

.services-two .services-two-wrapper .services-two-content:hover h4 {
  color: #fff;
}

.services-two .services-two-wrapper .services-two-content:hover p {
  color: #fff;
}

.services-two .services-two-wrapper .services-two-content .services-icon {
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin: 0 auto 25px;
  background-color: var(--color-five);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.services-two .services-two-wrapper .services-two-content .services-icon svg {
  height: 40px !important;
}

.services-two .services-two-wrapper .services-two-content h4 {
  text-align: center;
  margin-top: 24px;
}

.services-two .services-two-wrapper .services-two-content p {
  max-width: 400px;
  margin: 15px auto 0;
  text-align: center;
}

/*=====================================
    04. training style 2 CSS
    =======================================*/
.training-two-count-wrapper {
  justify-content: center;
  margin-top: 80px;
  max-width: 1151px;
  margin-left: auto;
  margin-right: auto;
}

.training-two-count-wrapper .wc-count {
  text-align: center;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}

.training-two-count-wrapper .wc-column-3:nth-child(2) {
  border-left: 1px solid var(--color-dark);
  border-right: 1px solid var(--color-dark);
}

.training-two-count-wrapper .wc-column-3:nth-child(3) {
  border-right: 1px solid var(--color-dark);
}

.training-wrapper .training-image {
  position: relative;
  overflow: hidden;
}

.training-wrapper .training-image::before {
  content: "";
  padding-top: 76%;
  display: block;
}

.training-wrapper .training-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*=====================================
    05. team-two style 2 CSS
    =======================================*/

.team-two .team-head-title {
  text-align: center;
}

.team-two .team-head-title p {
  max-width: 700px;
  width: 100%;
  margin: 16px auto 45px;
}

.team-two .wc-team-image-wrapper .team-image .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 140px;
}

/*=====================================
    06. pricing style 2 CSS
    =======================================*/

.pricing .pricing-title h2 {
  text-align: center;
  margin-bottom: 50px;
}

.pricing .pricing-wrapper {
  gap: 45px;
  flex-wrap: nowrap;
  justify-content: center;
}

.pricing .pricing-wrapper .pricing-col {
  border-radius: 15px;
  box-shadow: 0px 0px 12px 0px #eee;
  padding: 35px 30px;
  max-width: 400px;
  width: 100%;
}

.pricing .pricing-wrapper .pricing-col h4 {
  font-weight: var(--medium);
  margin-bottom: 15px;
}

.pricing .pricing-wrapper .pricing-col p {
  max-width: 340px;
}

.pricing .pricing-wrapper .pricing-col .pricing-nub {
  background-color: var(--color-dark);
  max-width: 190px;
  margin-top: 30px;
  margin-bottom: 24px;
  border-radius: 8px;
  padding: 6px 35px 6px 22px;
}

.pricing .pricing-wrapper .pricing-col .pricing-nub span {
  font-size: 35px;
  line-height: 48px;
  font-weight: var(--medium);
  color: var(--color-third);
}

.pricing .pricing-wrapper .pricing-col .pricing-nub p {
  color: var(--color-third);
  font-weight: var(--medium);
}

.pricing .pricing-wrapper .pricing-col ul {
  list-style: unset;
  margin-bottom: 41px;
  padding-left: 20px;
}

.pricing .pricing-wrapper .pricing-col ul li {
  content: "\2022";
  color: var(--color-four);
}

.pricing .pricing-wrapper .pricing-col .pricing-btn .btn {
  font-weight: var(--medium);
  padding: 10px 45px;
}

/*=====================================
    07. work style 2 CSS
    =======================================*/

.work.background-work{
      background-color: var(--color-seven);
}

.work .work-wrap {
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.work .work-wrap .work-image {
  padding-right: 35px;
  position: relative;
  overflow: hidden;
  max-width: 660px;
  width: 100%;
}

.work .work-wrap .work-image::before {
  padding-top: 80%;
  display: block;
  content: "";
}

.work .work-wrap .work-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.work .work-wrap .work-content {
  padding-left: 35px;
}

.work .work-wrap .work-content h2 {
  margin-bottom: 30px;
  text-align: start;
}

.work .work-wrap .work-content .work-text {
  max-width: 503px;
  margin-bottom: 30px;
}

.work .work-wrap .work-content .work-text:nth-child(4) {
  margin-bottom: 0;
}

.work .work-wrap .work-content .work-text h4 {
  margin-bottom: 10px;
}

/*=====================================
    08. blog-two style 2 CSS
    =======================================*/

.blog-two .blog-wrapper {
  align-items: normal;
}

.blog-two .blog-wrapper .blog-content .blog-image {
  max-width: 100%;
}

.blog-two .blog-wrapper .blog-content .blog-text h5 {
  margin-bottom: 12px;
}

.blog-two .blog-wrapper .blog-right .blog-content {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}

.blog-two .blog-two-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
}

.blog-two .blog-two-wrapper .blog-content {
  background-color: var(--color-five);
  border-radius: 15px;
  box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
  padding: 20px 20px 22px;
  grid-row: 1 / span 2;
  max-width: 100%;
  margin-right: 14px;
}

.blog-two .blog-two-wrapper .blog-content .blog-content-image {
  position: relative;
  overflow: hidden;
  max-width: 676px;
}

.blog-two .blog-two-wrapper .blog-content .blog-content-image::before {
  content: "";
  display: block;
  padding-top: 50%;
}

.blog-two .blog-two-wrapper .blog-content .blog-content-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
}

.blog-two .blog-two-wrapper .blog-content h4 {
  margin-top: 20px;
  margin-bottom: 15px;
}

.blog-two .blog-two-wrapper .blog-content h4:hover {
  color: var(--color-primary);
}

.blog-two .blog-two-wrapper .blog-content p {
  max-width: 676px;
  margin-bottom: 22px;
}

.blog-two .blog-two-wrapper .blog-right-inner {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-five);
  box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
  border-radius: 15px;
  padding: 20px;
  margin-left: 14px;
}

.blog-two .blog-two-wrapper .blog-right-up {
  margin-bottom: 25px;
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-content-image {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  width: 100%;
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-content-image::before {
  content: "";
  display: block;
  padding-top: 75%;
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-content-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-two-text h4 {
  margin-bottom: 12px;
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-two-text h4:hover {
  color: var(--color-primary);
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-two-text p {
  margin-bottom: 28px;
}

.blog-two .blog-two-wrapper .blog-right-inner .blog-two-text {
  width: 100%;
  padding-left: 22px;
}

/*=====================================
    09. testimonial-two style 2 CSS
    =======================================*/

.testimonial-two {
  padding-top: 40px;
}

.testimonial-two .testimonial-two-title h2 {
  text-align: center;
  margin-bottom: 45px;
}

.testimonial-two .testimonial-two-wrapper {
  gap: 40px;
  flex-wrap: nowrap;
}
.testimonial-two .testimonial-two-wrapper .swiper .swiper-wrapper .swiper-slide{
  height:auto !important;
}
.testimonial-two .testimonial-two-wrapper .swiper .swiper-wrapper .swiper-slide .testimonial-two-col{
  height:100%;
}

.testimonial-two .testimonial-two-wrapper .testimonial-two-col {
  border: 1px solid #000;
  border-radius: 25px;
  padding: 30px;
  display: block;
}

.testimonial-two .testimonial-two-wrapper .testimonial-two-col h2 {
  font-size: 120px;
  line-height: var(--line-height-55);
  color: var(--color-primary);
}

.testimonial-two .testimonial-two-wrapper .testimonial-two-col p {
  margin-bottom: 21px;
}

.testimonial-two
  .testimonial-two-wrapper
  .testimonial-two-col
  .testimonial-two-client {
  display: flex;
  align-items: center;
}

.testimonial-two
  .testimonial-two-wrapper
  .testimonial-two-col
  .testimonial-two-client
  .testimonial-two-image {
  max-width: 60px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-right: 20px;
}

.testimonial-two
  .testimonial-two-wrapper
  .testimonial-two-col
  .testimonial-two-client
  .testimonial-two-image::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.testimonial-two
  .testimonial-two-wrapper
  .testimonial-two-col
  .testimonial-two-client
  .testimonial-two-image
  img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.testimonial-two
  .testimonial-two-wrapper
  .testimonial-two-col
  .testimonial-two-client
  .testimonial-two-text
  p {
  margin-bottom: 0;
}

.testimonial-two .testimonial-two-slide-btn {
  display: flex;
  justify-content: center;
  margin-top: 45px;
}

.testimonial-two .testimonial-two-slide-btn .slider-btn {
  border-color: var(--color-primary);
  background-color: var(--color-dark);
  transition: 0.5s all;
}

.testimonial-two .testimonial-two-slide-btn .slider-btn:hover {
  background-color: var(--color-five);
}

.testimonial-two .testimonial-two-slide-btn .testimonial-two-prev-btn {
  padding-right: 12px;
}

.testimonial-two .testimonial-two-slide-btn .testimonial-two-next-btn {
  padding-left: 12px;
}

/*=====================================
    10. newslatter-two style 2 CSS
    =======================================*/

.newslatter-two {
  background-color: var(--color-dark);
  padding: 0;
}

.newslatter-two .newslatter-wrapper {
  border-bottom: 1px solid rgba(111, 111, 111, 0.5);
  padding-top: 50px;
  padding-bottom: 54px;
}

.newslatter-two .newslatter-wrapper .newslatter-head h2 {
  color: var(--color-third);
  margin-bottom: 0 !important;
}

/*=====================================
    11. footer-two style 2 CSS
    =======================================*/

.footer-two .footer-col {
  width: 100%;
}

.footer-two .wc-footer-logo {
  max-width: 356px;
}

.footer-two .wc-footer-official {
  max-width: 265px;
}

.footer-two .wc-footer-official .contact-call p:first-child {
  margin-bottom: 0;
}

.footer-two .wc-footer-link {
  max-width: 98px;
}

.footer-two .wc-footer-logo p {
  max-width: 355px;
}

.footer-two .wc-social-logo ul {
  display: flex;
  margin-top: 22px;
}

.footer-two .wc-social-logo ul li a {
  margin-right: 14px;
}

.footer-two .wc-social-logo ul li a:hover svg path {
  fill: var(--color-secondary);
}

.footer-two .footer-two-terms a {
  color: var(--color-four);
  font-size: var(--p-16);
  line-height: var(--line-height-26);
}

.footer-two .footer-two-terms a:hover {
  color: var(--color-primary);
}

.footer-two .wc-footer-image {
  max-width: 280px;
}

.footer-two .wc-footer-image h4 {
  margin-bottom: 18px;
}

.footer-two .wc-footer-image .wc-footer-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.footer-two .wc-footer-image .wc-footer-image-grid .wc-image {
  max-width: 90px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.footer-two .wc-footer-image .wc-footer-image-grid .wc-image::before {
  content: "";
  padding-top: 100%;
  display: block;
}

.footer-two .wc-footer-image .wc-footer-image-grid .wc-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}

/**************************************
    Home three style
    ***************************************/

/*=====================================
    01. header-three style 3 CSS
    =======================================*/

.header-three.sticky {
  background-color: transparent;
  padding-bottom: 0px;
  padding-top: 0px;
}

.header-three .header-topbar {
  background-color: #01452c;
}

.header-three.sticky .header-two-top-bar {
  margin-top: -46px;
}

.header-three .wc-row {
  padding-top: 7px;
  padding-bottom: 7px;
}

.header-three .header-navbar {
  background-color: var(--color-five);
}

.header-three .wc-navbar {
  border-radius: 0px;
  background-color: transparent;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.header-three .wc-navbar .header-contact {
  justify-content: start;
}

.header-three .header-contact a svg path {
  fill: var(--color-five);
}

.header-three .header-contact .fa-phone {
  display: none;
  margin-right: 6px;
  font-size: 14px;
  padding: 5px;
  border-radius: 50px;
  border: 1px solid var(--color-five);
}

.header-three .wc-navbar .wc-social-btn .fa-xmark {
  top: 10px;
}

/*=====================================
    02. hero-three style 3 CSS
    =======================================*/

.hero-three {
  padding-top: 200px;
  padding-bottom: 55px;
  position: relative;
}

.hero-three .hero-three-slider-btn {
  position: absolute;
  top: 50%;
  left: 40px;
  z-index: 9;
}

.hero-three .hero-three-vector1 {
  position: absolute;
  max-width: 225px;
  width: 100%;
  top: 150px;
  left: 0;
}

.hero-three .hero-three-vector2 {
  position: absolute;
  max-width: 220px;
  width: 100%;
  bottom: 40px;
  left: 32%;
}

.hero-three .hero-three-vector3 {
  position: absolute;
  max-width: 225px;
  width: 100%;
  bottom: 75px;
  right: 0;
}

.hero-three .hero-three-slider-btn .hero-prev-btn {
  margin-bottom: 22px;
}

.hero-three .slider-btn {
  border-color: #000;
}

.hero-three .slider-btn rect {
  stroke: #000;
}

.hero-three .slider-btn path {
  stroke: #000;
}

.hero-three .hero-three-slider {
  justify-content: space-between;
  align-items: center;
}

.hero-three .hero-three-slider .hero-three-slider-left {
  max-width: calc(100vw - 677px);
  width: fit-content;
}

.hero-three .hero-three-slider .hero-three-slider-right {
  max-width: 638px;
}

.hero-three .hero-three-slider .hero-three-image {
  margin-right: -230px;
  position: relative;
  z-index: 9;
  width: fit-content;
}

.hero-three .hero-three-slider .hero-three-image .image-wrapper {
  display: flex;
  justify-content: center;
}

.hero-three .hero-three-slider .hero-three-image .image-wrapper .image img {
  border: 2px solid var(--color-primary);
  padding: 28px;
  background-color: var(--color-five);
  border-radius: 50%;
}

.hero-three
  .hero-three-slider
  .hero-three-image
  .image-wrapper
  .image:nth-child(1) {
  max-width: 421px;
  width: 100%;
}

.hero-three
  .hero-three-slider
  .hero-three-image
  .image-wrapper
  .image:nth-child(2) {
  max-width: 370px;
  width: 100%;
  margin-top: 50px;
  margin-left: -2px;
}

.hero-three .hero-three-slider .hero-three-image .image-wrapper-sec {
  display: flex;
  justify-content: center;
}

.hero-three .hero-three-slider .hero-three-image .image-wrapper-sec .image {
  max-width: 330px;
  width: 100%;
  margin-top: -60px;
  margin-right: -33px;
}

.hero-three .hero-three-slider .hero-three-image .image-wrapper-sec .image img {
  border: 2px solid var(--color-primary);
  padding: 28px;
  background-color: var(--color-five);
  border-radius: 50%;
}

.hero-three .hero-three-slider .hero-three-content h1 {
  margin-bottom: 27px;
  position: relative;
  max-width: 720px;
  width: 100%;
}

.hero-three .hero-three-slider .hero-three-content p {
  margin-bottom: 50px;
  max-width: 585px;
  position: relative;
}

/*=====================================
    03. our-services-three style 3 CSS
    =======================================*/

.our-services-three {
  background-color: transparent;
}

.our-services-three
  .our-services-wrapper
  .our-services-content
  .our-services-icon {
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

/*=====================================
    04. training-three style 3 CSS
    =======================================*/

.training-three {
  padding-bottom: 250px !important;
}

.training-three .training-wrapper .training-images-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.training-three .training-wrapper .training-images-wrapper .training-inner-img {
  width: 100%;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image1 {
  position: relative;
  overflow: hidden;
  max-width: 395px;
  width: 100%;
  margin-top: 17px;
  margin-bottom: 17px;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image1:before {
  content: "";
  padding-top: 100%;
  display: block;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image1
  img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image1
  .mw-image {
  padding: 15px;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image2 {
  position: relative;
  overflow: hidden;
  max-width: 395px;
  width: 100%;
  margin-left: 20px;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image2:before {
  content: "";
  padding-top: 150%;
  display: block;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image2
  img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.training-three
  .training-wrapper
  .training-images-wrapper
  .training-inner-img
  .training-image2
  .mw-image {
  padding: 15px;
}

.training-three .training-wrapper .training-images-wrapper {
  padding-right: 21px;
}

.training-three .training-wrapper .training-content {
  padding-left: 21px;
}

.training-three .training-wrapper .training-content .training-content-list {
  margin-bottom: 40px;
}

.training-three .training-wrapper .training-content .training-content-list p {
  margin-bottom: 14px;
  position: relative;
  padding-left: 50px;
}

.training-three
  .training-wrapper
  .training-content
  .training-content-list
  p::before {
  content: url(../images/check-mark-15\ 1.png);
  position: absolute;
  top: 0;
  left: 0;
}

/*=====================================
    05. counter-three style 3 CSS
    =======================================*/

.counter-three {
  padding-bottom: 80px;
}

.counter-three .counter-three-image {
  justify-content: center;
}

.counter-three .counter-three-image .counter-three-video {
  max-width: 800px;
  width: 100%;
  position: relative;
  margin: -170px auto 60px;
}

.counter-three .counter-three-image .counter-three-video .counter-video-btn {
  position: absolute;
  top: 50%;
  left: 45%;
}

.counter-three .counter-three-title {
  text-align: center;
  max-width: 645px;
  margin: 0 auto 45px;
}

.counter-three .counter-three-number {
  text-align: center;
}

.counter-three .counter-three-number .wc-count {
  border: 1px solid var(--color-secondary);
  background-color: #fff;
  padding: 32px 56px;
  border-radius: 250px;
  margin-left: 10px;
  margin-right: 10px;
}

/*=====================================
    06. team-three style 3 CSS
    =======================================*/

.team-three .team-three-title h2 {
  text-align: center;
  max-width: 715px;
  margin: 0 auto 55px;
}

.team-three .team-three-content {
  display: flex;
  justify-content: center;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  margin-left: 22px;
  margin-right: 22px;
  margin-bottom: 40px;
  overflow:hidden;
}

.team-three .team-three-content .team-three-image {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  width: 100%;
  margin-right: 10px;
}

.team-three .team-three-content .team-three-image:before {
  content: "";
  padding-top: 78%;
  display: block;
}

.team-three .team-three-content .team-three-image img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.team-three .team-three-content .team-three-info {
  margin-left: 20px;
  padding: 30px 0;
  display: grid;
  align-content: center;
  width: 100%;
}

.team-three .team-three-content .team-three-info ul {
  display: flex;
  margin-top: 10px;
}

.team-three .team-three-content .team-three-info ul li a {
  margin-right: 8px;
  background-color: var(--color-secondary);
  padding: 7px 5px;
  border-radius: 50px;
  height: 26px;
  width: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.team-three .team-three-content a.image{
  width:300px;
  height:234px;
  flex-shrink:0;
}
.team-three .team-three-content a.image img{
  width:100%;
  height:100%;
  object-fit:cover;
    border-radius: 10px;
}
.team-three .team-three-content .team-three-info ul li a:hover {
  background-color: var(--color-dark);
}

.team-three .team-three-content .team-three-info ul li a svg {
  font-size: 14px;
}

.team-three .team-three-content .team-three-info p {
  margin-bottom: 6px;
}

.team-three .team-three-content .team-three-info > a {
  margin-bottom: 10px;
  font-size: var(--h5-20);
  font-weight: var(--bold);
  line-height: var(--line-height-26);
  display: block;
  color: var(--color-third);
}

.team-three .team-three-btn {
  text-align: center;
  margin-top: 5px;
}

/*=====================================
    07. choose style 3 CSS
    =======================================*/

.choose .choose-title {
  text-align: center;
  margin-bottom: 50px;
}

.choose .choose-wrapper .choose-content {
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  background-color: var(--color-five);
  padding: 40px 23px 28px 23px;
  margin-left: 20px;
  margin-right: 20px;
}

.choose .choose-wrapper .choose-content .choose-icon {
  height: 80px;
  width: 80px;
  background-color: var(--color-secondary);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 25px;
}

.choose .choose-wrapper .choose-content .choose-icon svg path {
  stroke: var(--color-primary);
  fill: transparent;
}

.choose .choose-wrapper .choose-content h5 {
  margin-bottom: 15px;
  text-align: center;
}

.choose .choose-wrapper .choose-content p {
  text-align: center;
  max-width: 254px;
  margin: 0 auto;
}

/*=====================================
    08. plan-three style 3 CSS
    =======================================*/

.plan-three .plan-three-title {
  text-align: center;
  max-width: 627px;
  margin: 0 auto;
}

.plan-three .plan-three-wrapper {
  flex-wrap: nowrap;
  justify-content: center;
}

.plan-three .plan-three-wrapper .plan-three-content {
  box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
  padding: 35px;
  border-radius: 28px;
  max-width: 570px;
  width: 100%;
}

.plan-three .plan-three-wrapper .left {
  margin-left: auto;
  margin-right: 20px;
}

.plan-three .plan-three-wrapper .plan-three-content .plan-three-icon {
  background-color: var(--color-secondary);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
  width: 110px;
  border: 10px solid rgba(255, 188, 104, 0.5);
  margin: 0 auto 22px;
}

.plan-three .plan-three-wrapper .right {
  margin-right: auto;
  margin-left: 20px;
}

.plan-three .plan-three-wrapper .plan-three-content h3 {
  margin-bottom: 10px;
  text-align: center;
}

.plan-three .plan-three-wrapper .plan-three-content .plan-three-content-para1 {
  max-width: 400px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 188, 104, 0.5);
  padding-bottom: 28px;
  margin: 0 auto;
}

.plan-three .plan-three-wrapper .plan-three-content .plan-three-content-para2 {
  max-width: 400px;
  text-align: center;
  line-height: var(--line-height-38);
  margin: 18px auto 0;
}

.plan-three .plan-three-wrapper .plan-three-content .plan-three-btn {
  text-align: center;
  margin-top: 25px;
}

/*=====================================
    09. blog-three style 3 CSS
    =======================================*/

.blog-three .blog-three-title {
  text-align: center;
  color: var(--color-five);
}

.blog-three .blog-three-title h2 {
  color: var(--color-five);
}

.blog-three .blog-wrapper {
  margin-top: 50px;
  display: unset;
}

.blog-three
  .blog-wrapper
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
  height: 10px;
  border-radius: 20px;
}

.blog-three .blog-wrapper .swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  background-color: var(--color-dark);
  opacity: 1;
  transition: 0.4s;
}

.blog-three .blog-wrapper .swiper-pagination {
  position: unset;
  margin-top: 50px;
}

/*=====================================
    10. testimonial-three style 3 CSS
    =======================================*/

.testimonial-three .testimonial-wrapper-three .testimonial-content {
  display: flex;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  padding: 20px 45px 40px 32px;
  background-color: rgba(251, 238, 208, 0.5);
}
.testimonial-three .testimonial-wrapper-three .swiper .swiper-wrapper .swiper-slide{
  height:auto !important;
}
.testimonial-three .testimonial-wrapper-three .swiper .swiper-wrapper .swiper-slide .testimonial-content{
  height:100%;
}

.testimonial-three .testimonial-wrapper-three .testimonial-content .testimonial-image img {
  width: 70px;
  height: 70px;
  border-radius: 50px;
}

.testimonial-three .testimonial-wrapper-three .testimonial-content .testimonial-info { 
  padding-left: 22px;
}

.testimonial-three .testimonial-wrapper-three .testimonial-content .testimonial-info p {
  max-width: 518px;
  margin-bottom: 12px;
}

.testimonial-three .testimonial-wrapper-three .swiper-pagination {
  position: unset;
  margin-top: 50px;
}

/*=====================================
    11. footer-three style 3 CSS
    =======================================*/
.footer-three {
  padding: 50px 0 35px;
}

.footer-three .footer-three-title {
  align-items: center;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--color-four);
}

.footer-three .footer-three-logo {
  max-width: 195px;
  width: 100%;
}

.footer-three .footer-three-para p {
  max-width: 670px;
  color: var(--color-five);
}

.footer-three .footer-three-menu {
  justify-content: center;
  padding: 50px 0;
}

.footer-three .footer-three-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-three .footer-three-menu ul li a {
  color: var(--color-five);
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  font-weight: var(--regular);
  padding: 0 20px;
}

.footer-three .footer-three-menu ul li a:hover {
  color: var(--color-secondary);
}

.footer-three .footer-three-social {
  justify-content: center;
  border-bottom: 1px solid var(--color-four);
  padding-bottom: 40px;
}

.footer-three .footer-three-social ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.footer-three .footer-three-social ul li {
  width: 25%;
  padding-left: 30px;
  padding-right: 30px;
}

.footer-three .footer-three-social ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-three .footer-three-social ul li a p {
  color: var(--color-five);
  padding-left: 20px;
}

.footer-three .footer-three-social ul li a p:hover {
  color: var(--color-secondary);
}

.footer-three .footer-three-social ul li a span {
  flex-shrink: 0;
  background-color: var(--color-secondary);
  height: 46px;
  width: 46px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-three .footer-three-social ul li a span svg path {
  fill: var(--color-third);
}

.footer-three .footer-three-copy {
  justify-content: space-between;
  align-items: center;
  padding-top: 35px;
}

.footer-three .footer-three-copy .copy-text p {
  text-align: end;
  color: var(--color-five);
}

.footer-three .footer-three-copy .copy-text p a {
  color: var(--color-secondary);
}

.footer-three .footer-three-copy .copy-text p a:hover {
  color: var(--color-light);
}

/**************************************
    about-page style
    ***************************************/

/*=====================================
    01. about-banner style CSS
    =======================================*/

.banner {
  padding-top: 263px !important;
  padding-bottom: 163px !important;
  background-image: url(../images/about-banner.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(1, 69, 44, 0.5);
}

.banner .banner-wrapper {
  text-align: center;
  position: relative;
  z-index: 9;
}

.banner .banner-wrapper h1 {
  color: var(--color-five);
  font-size: 70px;
  line-height: 80px;
  font-weight: var(--semi-bold);
}

.banner .banner-wrapper ul {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.banner .banner-wrapper ul li a {
  color: var(--color-five);
  font-size: var(--h6-18);
  line-height: var(--line-height-26);
  font-weight: var(--semi-bold);
}

.banner .banner-wrapper ul li a:hover {
  color: var(--color-secondary);
}

.banner .banner-wrapper ul li a.active {
  color: var(--color-secondary);
}

.banner .banner-wrapper ul li:nth-child(2) a::before {
  float: left;
  padding-right: 0.5rem;
  color: var(--color-five);
  content: "/";
}

/*=====================================
    02. about-services style CSS
    =======================================*/

.about-services {
  padding-top: 0px;
}

.about-services .our-services-wrapper {
  flex-wrap: nowrap;
}

.about-services .our-services-wrapper .wc-column-4:nth-child(2) {
  margin-left: 40px;
  margin-right: 40px;
}

.about-services .our-services-wrapper .our-services-content {
  padding: 30px !important;
  transition: 0.5s all ease;
}

.about-services .our-services-wrapper .our-services-content:hover {
  background-color: var(--color-primary);
}

.about-services .our-services-wrapper .our-services-content:hover h4 {
  color: var(--color-five);
}

.about-services .our-services-wrapper .our-services-content:hover p {
  color: var(--color-five);
}

.about-services .our-services-wrapper .our-services-content .our-services-icon {
  margin: 0px 0px 22px;
}

.about-services
  .our-services-wrapper
  .our-services-content:hover
  .our-services-icon
  svg
  path {
  fill: var(--color-primary);
}

.about-services
  .our-services-wrapper
  .our-services-content:hover
  .our-services-icon {
  background-color: var(--color-five);
}

.about-services .our-services-wrapper .our-services-content h4 {
  text-align: start;
}

.about-services .our-services-wrapper .our-services-content p {
  text-align: start;
  margin: 0;
  max-width: 400px;
}

/*=====================================
    03. about-count style CSS
    =======================================*/

.about-count .training-two-count-wrapper {
  margin-top: 0px;
}

.about-count .training-two-count-wrapper .wc-count h2 {
  color: var(--color-five);
}

.about-count .training-two-count-wrapper .wc-count p {
  color: var(--color-five);
}

.about-count .training-two-count-wrapper .wc-column-3:nth-child(2) {
  border-color: var(--color-five);
  border-color: var(--color-five);
}

.about-count .training-two-count-wrapper .wc-column-3:nth-child(3) {
  border-color: var(--color-five);
}

/*=====================================
    04. about-newslatter style CSS
    =======================================*/

.about-newslatter {
  overflow-x: hidden;
}

.about-newslatter .about-newslatter-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.about-newslatter .about-newslatter-image {
  position: relative;
  overflow: hidden;
  max-width: 670px;
  width: 100%;
}

.about-newslatter .about-newslatter-image:before {
  content: "";
  padding-top: 72%;
  display: block;
}

.about-newslatter .about-newslatter-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.contact-box {
  background-color: rgba(251, 238, 208, 0.5);
  border: 1px solid var(--color-secondary);
  padding: 45px 40px;
  border-radius: 10px;
}

.contact-box h3 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-42);
  text-align: center;
  margin-bottom: 32px;
}

.contact-box .contact-box-form .form-group {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.contact-box .contact-box-form .form-group > div{
  margin-bottom: 14px;
  width:100%
}

.contact-box .contact-box-form .form-group input,
.contact-box .contact-box-form .form-group textarea {
  border: 0px;
  padding: 12px 0 12px 20px;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 5px;
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  font-family: var(--font-secondary);
}

.contact-box .contact-box-form .form-group input:focus-visible {
  outline: 1px solid var(--color-secondary);
}

.contact-box .contact-box-form .form-group textarea:focus-visible {
  outline: 1px solid var(--color-secondary);
}

.contact-box .contact-submit-btn {
  text-align: center;
  margin-top: 10px;
}

/*=====================================
    05. about-testimonial style CSS
    =======================================*/

.about-testimonial {
  padding-top: 0px;
}

/*=====================================
    06. about-footer style CSS
    =======================================*/

.about-footer {
  padding: 0 !important;
}

.about-footer .wc-footer-menu h4 {
  color: var(--color-secondary);
}

.about-footer .wc-footer-logo {
  display: unset;
}

.about-footer .wc-footer-logo p {
  color: var(--color-five);
  margin-bottom: 34px;
}

.about-footer .wc-footer-menu .menu ul li a {
  color: var(--color-five);
}

.about-footer .wc-footer-menu .menu ul li a:hover {
  color: var(--color-secondary);
}

.about-footer .wc-footer-menu .contact-menu ul li a p {
  color: var(--color-five);
}

.about-footer .wc-footer-menu .contact-menu ul li a p:hover {
  color: var(--color-secondary);
}

.about-footer .wc-footer-menu .contact-menu ul li a svg path {
  fill: var(--color-five);
}

.about-copy {
  background-color: var(--color-third);
}

.about-copy .wc-copy p,
.about-copy .wc-copy a {
  color: var(--color-five);
}

.about-copy .wc-social-logo ul li a svg path {
  fill: var(--color-five);
}

.about-copy .wc-copy {
  border-top: 0px;
}

/**************************************
    services-page-one style
    ***************************************/

.services-two .load-btn {
  text-align: center;
  margin-top: 50px;
}

.services-page-one .services-two-content {
  margin-top: 0px !important;
}

.services-page-one .services-two-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/**************************************
    services-page-two style
    ***************************************/

.services-page-two {
  padding-top: 100px;
}

.services-page-two .our-services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
  margin-bottom: 50px;
}

.services-page-two .our-services-wrapper .our-services-content {
  height: 100%;
  transition: 0.5s all ease;
}

.services-page-two .our-services-wrapper .our-services-content:hover {
  background-color: var(--color-primary);
}

.services-page-two
  .our-services-wrapper
  .our-services-content:hover
  .our-services-icon {
  background-color: var(--color-five);
}

.services-page-two
  .our-services-wrapper
  .our-services-content:hover
  .our-services-icon
  svg
  path {
  fill: var(--color-primary);
}

.services-page-two .our-services-wrapper .our-services-content:hover h4 {
  color: var(--color-five);
}

.services-page-two .our-services-wrapper .our-services-content:hover p {
  color: var(--color-five);
}

/**************************************
    services-detail-one style
    ***************************************/

.services-detail-one {
  max-width: 1260px;
  margin: 0 auto;
}

.services-detail-one .growth-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.services-detail-one .growth-wrapper .image-slider-wrapper {
  width: 50%;
  position: relative;
}

.services-detail-one .growth-wrapper .image-slider-wrapper .image-slider {
  padding-right: 33px;
}

.services-detail-one
  .growth-wrapper
  .image-slider-wrapper
  .image-slider:before {
  padding-top: 118%;
}

.services-detail-one .growth-wrapper .image-slider-wrapper .image-slider img {
  border-top-right-radius: 80px;
  border-bottom-left-radius: 80px;
}

.services-detail-one .growth-wrapper .growth-content {
  padding-left: 66px;
  position: relative;
  z-index: -1;
}

.services-detail-one .growth-wrapper .growth-content h2 {
  max-width: 650px;
  margin-bottom: 22px;
}

.services-detail-one .growth-wrapper .growth-content p {
  max-width: 650px;
}

.services-detail-one .growth-wrapper .growth-content .growth-para-one {
  margin-bottom: 28px;
}

.services-detail-one .growth-wrapper .growth-content ul {
  margin-bottom: 28px;
  margin-left: 25px;
}

.services-detail-one .growth-wrapper .growth-content ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-family: var(--font-secondary);
  color: var(--color-four);
}

.services-detail-one .growth-wrapper .growth-content ul li:before {
  content: url(../images/growth-mark.png);
  position: absolute;
  top: 0;
  left: 0;
}

.services-detail-one .purpose-content h3 {
  margin-bottom: 15px;
}

.services-detail-one .purpose-content p {
  margin-bottom: 40px;
}

.services-detail-one .purpose-content .purpose-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 50px;
}

.services-detail-one .purpose-content .purpose-wrapper .purpose-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 38px;
  width: 50%;
  padding: 0 50px;
}

.services-detail-one
  .purpose-content
  .purpose-wrapper
  .purpose-inner
  .purpose-inner-icon {
  height: 80px;
  min-width: 80px;
  background-color: var(--color-secondary);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.services-detail-one
  .purpose-content
  .purpose-wrapper
  .purpose-inner
  .purpose-inner-icon
  svg
  path {
  stroke: var(--color-primary);
  fill: transparent;
}

.services-detail-one
  .purpose-content
  .purpose-wrapper
  .purpose-inner
  .purpose-inner-text {
  width: 100%;
}

.services-detail-one
  .purpose-content
  .purpose-wrapper
  .purpose-inner
  .purpose-inner-text
  p {
  margin-bottom: 0;
  margin-top: 6px;
  max-width: 395px;
}

.services-detail-one .support-content h3 {
  margin-bottom: 16px;
}

.services-detail-one .support-content p {
  margin-bottom: 30px;
}

.services-detail-one .support-content .Support-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 58px;
}

.services-detail-one .support-content .Support-wrapper .support-icon-content {
  border-radius: 15px;
  padding: 38px 30px;
}

.services-detail-one
  .support-content
  .Support-wrapper
  .support-icon-content
  .services-icon {
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin: 0 auto 25px;
  background-color: var(--color-five);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.services-detail-one
  .support-content
  .Support-wrapper
  .support-icon-content
  h4 {
  text-align: center;
  margin-top: 24px;
}

.services-detail-one .support-content .Support-wrapper .support-icon-content p {
  max-width: 400px;
  margin: 15px auto 0;
  text-align: center;
}

.services-detail-one .support-content .Support-wrapper .support-para p {
  max-width: 729px;
}

.services-detail-one .services-detail-one-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  background: rgba(255, 188, 104, 0.5);
  border-radius: 15px;
  padding: 20px;
  margin-top: 38px;
}

.services-detail-one .services-detail-one-image-grid .image::before {
  padding-top: 68%;
}

/**************************************
    services-detail-one-option style
    ***************************************/

.services-finibus-one {
  padding-bottom: 0px !important;
}

.services-finibus-one::before {
  width: 100% !important;
}

.services-finibus-one .back-image {
  width: 100% !important;
}

.services-finibus-one .services-finibus-wrapper {
  justify-content: center !important;
}

.services-finibus-one .services-finibus-right .Finibus-update {
  justify-content: center !important;
  border-radius: 45px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.services-finibus-one .services-finibus-right {
  text-align: center;
  padding-left: 0px !important;
}

.services-finibus-one .services-finibus-right h2 {
  max-width: 635px;
  width: 100%;
}

.services-finibus-one
  .services-finibus-right
  .Finibus-update
  .Finibus-update-text
  p {
  text-align: start;
}

.services-skill {
  padding-top: 0px;
}

.services-skill .services-skill-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40px;
  text-align: center;
}

.services-skill .services-skill-wrapper .services-skill-box {
  border: 1px solid #ffc700;
  border-radius: 10px;
  background-color: var(--color-dark);
  padding: 0 30px 30px 30px;
}

.services-skill .services-skill-wrapper .services-skill-box .skill-icon {
  height: 80px;
  width: 80px;
  background-color: var(--color-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin: -40px auto 22px;
}

.services-skill
  .services-skill-wrapper
  .services-skill-box
  .skill-icon
  svg
  path {
  stroke: var(--color-primary);
  fill: transparent;
}

.services-skill .services-skill-wrapper .services-skill-box h5 {
  margin-bottom: 14px;
}

.purpose-one {
  padding-top: 30px;
}

.purpose-one .purpose-para h4,
.purpose-one .purpose-para p {
  margin-bottom: 15px;
}

.denounce {
  padding-top: 54px;
}

.denounce .denounce-wrapper {
  display: flex;
  justify-content: space-between;
}

.denounce .denounce-wrapper .denounce-left-content,
.denounce .denounce-wrapper .denounce-right-content {
  width: 50%;
}

.denounce .denounce-wrapper .denounce-left-content {
  padding-right: 23px;
}

.denounce .denounce-wrapper .denounce-right-content {
  padding-left: 23px;
}

.denounce .denounce-wrapper .denounce-left-content .denounce-image {
  display: flex;
  align-items: center;
}

.denounce .denounce-wrapper .denounce-left-content h3 {
  max-width: 588px;
  margin-bottom: 40px;
}

.denounce .denounce-wrapper .denounce-left-content .denounce-image img {
  max-width: 250px;
  padding-right: 8px;
}

.denounce .denounce-wrapper .denounce-left-content .denounce-image p {
  max-width: 330px;
  padding-left: 8px;
}

.denounce .denounce-wrapper .denounce-right-content .faq-wrapper {
  margin-top: 0px;
}

/**************************************
    services-detail-two style
    ***************************************/

.services-detail-two .services-detail-image-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.services-detail-two .services-detail-image-box .services-detail-left h2 {
  max-width: 662px;
  margin-bottom: 20px;
}

.services-detail-two .services-detail-image-box .services-detail-left p {
  max-width: 662px;
  margin-bottom: 30px;
}

.services-detail-two .services-detail-image-box .services-detail-left ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-family: var(--font-secondary);
  color: var(--color-four);
}

.services-detail-two .services-detail-image-box .services-detail-left ul {
  margin-bottom: 38px;
}

.services-detail-two
  .services-detail-image-box
  .services-detail-left
  ul
  li::before {
  content: url(../images/growth-mark.png);
  position: absolute;
  top: 0;
  left: 0;
}

.services-detail-two .services-detail-image-box .services-detail-right {
  columns: 2;
  gap: 30px;
  max-width: 50%;
  width: 100%;
}

.services-detail-two .services-detail-image-box .services-detail-right .image {
  margin-top: 30px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.services-detail-two
  .services-detail-image-box
  .services-detail-right
  .image
  .blog-date {
  background-color: var(--color-secondary);
  font-weight: var(--semi-bold);
  font-size: 12px;
  line-height: 22px;
  max-width: 98px;
  padding: 4px 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: var(--color-six);
  position: absolute;
  top: 0;
  right: 16px;
  font-family: var(--font-secondary);
}

.services-intructions {
  padding-top: 0px;
}

.services-intructions .wc-row {
  justify-content: center;
}

.services-intructions .intructions-nub {
  text-align: center;
}

.services-intructions .intructions-nub span {
  background-color: var(--color-secondary);
  height: 58px;
  width: 58px;
  padding: 13px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: var(--h4-22);
  line-height: var(--line-height-32);
  font-weight: var(--semi-bold);
  margin: 0 auto 15px;
}

.services-intructions .intructions-nub h4 {
  max-width: 183px;
  margin: 0 auto 10px;
}

.services-intructions .intructions-nub p {
  max-width: 308px;
  margin: 0 auto;
}

.services-finibus {
  position: relative;
}

.services-finibus:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 60%;
  background: rgba(1, 69, 44, 0.5);
}

.services-finibus .back-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
}

.services-finibus .services-finibus-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.services-finibus .services-finibus-left .finibus-nub {
  margin-bottom: 56px;
}

.services-finibus .services-finibus-left .finibus-nub span {
  background-color: var(--color-primary);
  height: 46px;
  width: 46px;
  padding: 7px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  color: var(--color-five);
  font-family: var(--font-secondary);
  font-size: var(--h4-22);
  line-height: var(--line-height-32);
  font-weight: var(--semi-bold);
  margin-bottom: 15px;
}

.services-finibus .services-finibus-left .finibus-nub p {
  max-width: 390px;
  margin-bottom: 12px;
}

.services-finibus .services-finibus-right {
  position: relative;
  z-index: 9;
  padding-left: 170px;
}

.services-finibus .services-finibus-left {
  padding-right: 170px;
}

.services-finibus .services-finibus-right h2 {
  color: var(--color-five);
}

.services-finibus .services-finibus-right .services-finibus-btn {
  margin-bottom: 50px;
  margin-top: 36px;
}

.services-finibus .services-finibus-right .services-finibus-btn .btn-primary {
  background-color: var(--color-five);
  color: var(--color-primary);
}

.services-finibus .services-finibus-right .Finibus-update {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--color-dark);
  border-radius: 15px;
  padding: 24px 33px;
}

.services-finibus
  .services-finibus-right
  .Finibus-update
  .Finibus-update-text
  p {
  max-width: 332px;
  font-size: var(--h6-18);
  line-height: var(--line-height-32);
  color: var(--color-third);
  font-weight: var(--semi-bold);
  padding-left: 30px;
}

.services-finibus
  .services-finibus-right
  .Finibus-update
  .Finibus-update-text
  p
  a {
  font-size: var(--h6-18);
  line-height: var(--line-height-32);
  color: var(--color-third);
  font-weight: var(--semi-bold);
}

.services-finibus
  .services-finibus-right
  .Finibus-update
  .Finibus-update-text
  p
  a:hover {
  color: var(--color-primary);
}

.services-challenge .services-challenge-head h3 {
  margin-bottom: 15px;
}

.services-challenge .services-challenge-head p {
  margin-bottom: 35px;
  margin-top: 0px;
}

.services-challenge .services-challenge-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.services-challenge .services-challenge-wrapper .challenge-image {
  max-width: 550px;
  width: 100%;
  position: relative;
  padding-right: 40px;
}

.services-challenge .services-challenge-wrapper .challenge-image .image-inner {
  max-width: 316px;
  width: 100%;
  position: absolute;
  right: -85px;
  bottom: -55px;
}

.services-challenge .services-challenge-wrapper .services-challenge-working {
  max-width: 660px;
  width: 100%;
  padding-left: 40px;
}

.services-challenge .services-challenge-wrapper .services-challenge-working h2 {
  margin-bottom: 22px;
}

.services-challenge .services-challenge-wrapper .services-challenge-working p {
  margin-bottom: 25px;
  margin-top: 0px;
}

.services-challenge
  .services-challenge-wrapper
  .services-challenge-working
  .working-list {
  display: flex;
  gap: 60px;
  margin-bottom: 35px;
}

.services-challenge
  .services-challenge-wrapper
  .services-challenge-working
  .working-list
  ul
  li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-family: var(--font-secondary);
  color: var(--color-four);
}

.services-challenge
  .services-challenge-wrapper
  .services-challenge-working
  .working-list
  ul
  li::before {
  content: url(../images/growth-mark.png);
  position: absolute;
  top: 0;
  left: 0;
}

.services-challenge p {
  margin-top: 70px;
}

/**************************************
    services-detail-three style
    ***************************************/

.services-detail-three .services-detail-three-wrapper {
  display: flex;
  justify-content: space-between;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left {
  width: 70%;
  padding-right: 23px;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left
  .services-image-top:before {
  padding-top: 52%;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left
  h3 {
  font-size: 36px;
  line-height: 46px;
  max-width: 950px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left
  p {
  margin-bottom: 15px;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left
  .services-detail-three-image-slider {
  margin-top: 35px;
  margin-bottom: 70px;
  position: relative;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left
  .services-detail-three-image-slider
  .wc-image-slider::before {
  padding-top: 63%;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-left
  .services-detail-three-image-slider
  .swiper-pagination {
  bottom: -30px;
}
.services-detail-three-wrapper .services-detail-three-left .services-link-wrapper{
  margin-top: 12px;
}
.services-detail-three .services-detail-three-left .services-link-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: var(--color-dark);
  align-items: center;
  padding: 10px 18px;
  border-radius: 5px;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink {
  display: flex;
  align-items: center;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink
  .link {
  background-color: var(--color-five);
  height: 38px;
  width: 38px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-third);
  margin-right: 20px;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink
  .link:hover {
  background-color: var(--color-secondary);
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink
  .link
  svg
  path {
  fill: var(--color-third);
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink
  ul {
  display: flex;
  list-style: unset;
  margin-left: 20px;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink
  ul
  li
  a {
  color: var(--color-third);
  padding-right: 40px;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .hyperlink
  ul
  li
  a:hover {
  color: var(--color-primary);
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .wc-social-logo
  ul {
  display: flex;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .wc-social-logo
  ul
  li
  a {
  padding-right: 7px;
  padding-left: 7px;
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .wc-social-logo
  ul
  li
  a
  svg
  path {
  fill: var(--color-third);
}

.services-detail-three
  .services-detail-three-left
  .services-link-wrapper
  .wc-social-logo
  ul
  li
  a:hover
  svg
  path {
  fill: var(--color-primary);
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right {
  padding-left: 23px;
  width: 30%;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .all-services {
  background-color: var(--color-dark);
  padding: 35px 30px;
  border-radius: 10px;
  margin-bottom: 25px;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .all-services
  .all-services-categories
  ul {
  margin-top: 20px;
  border-top: 1px solid var(--color-secondary);
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .all-services
  .all-services-categories
  ul
  li {
  font-family: var(--font-secondary);
  border-bottom: 1px solid var(--color-secondary);
  padding: 12px 0 12px 35px;
  position: relative;
  font-weight: var(--medium);
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .all-services
  .all-services-categories
  ul
  li
  a {
  display: flex;
  justify-content: space-between;
  color: var(--color-third);
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .all-services
  .all-services-categories
  ul
  li
  a:hover {
  color: var(--color-primary);
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .all-services
  .all-services-categories
  ul
  li::before {
  content: url(../images/growth-mark.png);
  position: absolute;
  top: 12px;
  left: 0;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .Brochures {
  background-color: var(--color-dark);
  padding: 35px 30px;
  border-radius: 10px;
}

.services-detail-three
  .services-detail-three-wrapper
  .services-detail-three-right
  .Brochures
  p {
  margin-top: 15px;
  margin-bottom: 28px;
}

/**************************************
    team-page-popup style
    ***************************************/

.mfp-bg {
  background: rgba(1, 69, 44, 0.6);
}

.team-popup {
  position: relative;
  max-width: 886px;
  width: 100%;
  margin: 0 auto;
}

.team-popup .team-info {
  display: flex;
  align-items:stratch;
  justify-content: center;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--color-five);
}

.team-popup .team-info .team-info-image {
  width: 50%;
  padding-right: 17px;
}
.team-popup .team-info .team-info-content {
  width: 50%;
  padding-left: 17px;
}

.team-popup .team-info .team-info-content h3 {
  margin-bottom: 12px;
}

.team-popup .team-info .team-info-content p {
  margin-bottom: 12px;
}

.team-popup .team-info .team-info-content .team-personal-info ul li  {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.team-popup .team-info .team-info-content .team-personal-info ul li span {
  background-color: var(--color-primary);
  height: 38px;
  min-width: 38px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team-popup .team-info .team-info-content .team-personal-info ul li p {
  margin-bottom: 0px;
}

.team-popup .team-info .team-info-content .team-personal-info ul li p:hover {
  color: var(--color-primary);
}

.team-popup .team-info .team-info-content .team-personal-info ul li span svg path {
  fill: var(--color-five);
}

.team-page .wc-team-image-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}

.team-page .wc-team-image-wrapper .team-image {
  padding-bottom: 10px;
}

.team-page .load-btn {
  margin-top: 50px;
}

/**************************************
    team-detail style
    ***************************************/

.team-detail .team-detail-wrapper {
  max-width: 1258px;
  width: 100%;
  margin: 0 auto;
}

.team-detail .team-detail-wrapper .team-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 38px;
}
.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li span {
  background-color: var(--color-primary);
  height: 38px;
  width: 38px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 13px;
  color:white;
  flex-shrink:0;
}
.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info-nub p {
  margin:0 0 0 8px;
}
.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li span svg path {
  fill:white;
}
.team-detail .team-detail-wrapper .team-info .team-info-image {
  width: 50%;
  padding-right: 25px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content {
  padding-left: 25px;
  width: 50%;
}

.team-detail .team-detail-wrapper .team-info .team-info-content h2 {
  margin-bottom: 12px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content p {
  margin: 0 0 0 8px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info { 
  margin-top: 40px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a span {
  background-color: var(--color-primary);
  height: 38px;
  width: 38px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 13px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a p {
  margin-bottom: 0px;
  max-width: 226px;
  margin-left: 13px;
}

.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a p:hover {
  color: var(--color-primary);
}

.team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a span svg path {
  fill: var(--color-five);
}

.team-detail .team-detail-wrapper .team-info-content h2 {
  margin-bottom: 18px;
}

.team-detail .team-detail-wrapper .team-info-education {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 188, 104, 0.5);
  border-radius: 25px;
  padding: 20px;
  margin: 28px 0;
}

.team-detail .team-detail-wrapper .team-info-education .team-info-interest {
  padding-left: 55px;
}

.team-detail .team-detail-wrapper .team-info-education .team-info-interest ul {
  margin-top: 15px;
  list-style: unset;
}

.team-detail .team-detail-wrapper .team-info-education .team-info-interest ul li {
  color: var(--color-four);
  font-family: var(--font-secondary);
  margin-bottom: 7px;
  font-size: var(--p-16);
  line-height: var(--line-height-26);
}

.team-detail .team-detail-wrapper .team-info-education .education ul {
  margin-top: 15px;
  list-style: unset;
}

.team-detail .team-detail-wrapper .team-info-education .education ul li {
  color: var(--color-third);
  font-family: var(--font-secondary);
  margin-bottom: 12px;
  font-size: var(--h6-18);
  line-height: var(--line-height-28);
  font-weight: var(--medium);
}

.team-detail .team-detail-wrapper .team-info-education .education ul li P {
  margin-top: 7px;
}

.team-detail .team-detail-wrapper .team-info-skill h2 {
  margin-bottom: 18px;
  margin-top: 10px;
}

.team-detail .team-detail-wrapper .team-info-skill .progressbar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 45px;
}

.team-detail .team-detail-wrapper .team-info-skill .progressbar-title h4 {
  margin-bottom: 10px;
}

.team-detail .team-detail-wrapper .team-info-skill .progress {
  background-color: rgba(255, 188, 104, 0.5);
  width: 100%;
  border-radius: 4px;
  margin-bottom: 25px;
}

.team-detail .team-detail-wrapper .team-info-skill .progress h6 {
  color: var(--color-primary);
  font-weight: var(--semi-bold);
}

.team-detail .team-detail-wrapper .team-info-skill .bar {
  border-radius: 3px;
  color: white;
  text-align: center;
}

.team-detail .team-detail-wrapper .team-info-skill .bar.experience {
  background: var(--color-secondary);
  width: 70%;
}

.team-detail .team-detail-wrapper .team-info-skill .bar.financial {
  background: var(--color-secondary);
  width: 90%;
}

.team-detail .team-detail-wrapper .team-info-skill .bar.consulting {
  background: var(--color-secondary);
  width: 60%;
}

.team-detail .team-detail-wrapper .team-info-skill .bar.business {
  background: var(--color-secondary);
  width: 80%;
}

.team-detail .team-detail-wrapper .progressbar-wrapper .progressbar {
  width: 50%;
  padding-right: 32px;
}

.team-detail .team-detail-wrapper .progressbar-wrapper .progressbar-para {
  width: 50%;
  padding-left: 32px;
}

.team-detail .team-detail-wrapper .progressbar-wrapper .progressbar-para p {
  margin-bottom: 15px;
}

/**************************************
   portfolio-grid style
   ***************************************/

.portfolio-grid .portfolio-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 28px;
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image {
  position: relative;
  overflow: hidden;
  max-width: 468px;
  width: 100%;
  display: block;
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image::before {
  padding-top: 80%;
  display: block;
  content: "";
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  background-color: rgba(1, 69, 44, 0.6);
  height: 100%;
  width: 100%;
  border-radius: 10px;
  transition: 0.5s all;
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image:hover::after {
  left: 0%;
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image .portfolio-design {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--color-secondary);
  padding: 15px 10px;
  width: calc(100% - 136px);
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 9;
  transition: 0.5s all;
}

.portfolio-grid
  .portfolio-grid-wrapper
  .portfolio-image:hover
  .portfolio-design {
  bottom: 0;
}

.portfolio-grid .portfolio-grid-wrapper .portfolio-image .portfolio-design h4 {
  font-weight: var(--semi-bold);
}

.portfolio-grid
  .portfolio-grid-wrapper
  .portfolio-image
  .portfolio-design
  h4
  svg {
  vertical-align: middle;
  margin-left: 6px;
}

.portfolio-grid .load-btn {
  margin-top: 60px;
}

/**************************************
   portfolio-masonary style
   ***************************************/

.portfolio-masonary .grid:after {
  content: "";
  display: block;
  clear: both;
}

.portfolio-masonary .grid-sizer,
.portfolio-masonary .grid-item {
  width: calc(25% - 24px);
  margin-bottom: 24px;
}

.portfolio-masonary .grid-item {
  float: left;
  position: relative;
  overflow: hidden;
}

.portfolio-masonary .grid-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(1, 69, 44, 0.6);
  height: 100%;
  width: 100%;
  border-radius: 10px;
  transition: 0.5s all;
  opacity: 0;
}

.portfolio-masonary .grid-item:hover::after {
  opacity: 1;
}

.portfolio-masonary .grid-item img {
  display: block;
  max-width: 100%;
}

.portfolio-masonary .grid-item .portfolio-design {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--color-secondary);
  padding: 15px 10px;
  width: 100%;
  text-align: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 9;
  transition: 0.5s all;
  opacity: 0;
  visibility: hidden;
}

.portfolio-masonary .grid-item:hover .portfolio-design {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}

.portfolio-masonary .grid-item .portfolio-design h4 svg {
  vertical-align: middle;
  margin-left: 6px;
}

/**************************************
   portfolio-slider style
   ***************************************/

.Portfolio-Slider .Portfolio-Slider-wrapper {
  display: block;
  position: relative;
}

.Portfolio-Slider .Portfolio-Slider-wrapper .swiper-pagination {
  bottom: -50px;
}

/**************************************
   portfolio-detail style
   ***************************************/

.portfolio-detail .portfolio-detail-wrapper {
  display: flex;
  justify-content: space-between;
}

.portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left {
  width: 70%;
  padding-right: 30px;
}

.portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right {
  width: 30%;
  padding-left: 30px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-iamge {
  margin-bottom: 28px;
  border-radius: 20px;
  overflow: hidden;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-iamge:before {
  padding-top: 48%;
}

.portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left p {
  margin-bottom: 15px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-inner-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 74px;
  margin-top: 30px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-inner-wrapper
  .image {
  width: 50%;
  position: relative;
  margin-right: 53px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-inner-wrapper
  .image
  .inner-image {
  position: absolute;
  max-width: 280px;
  width: 100%;
  bottom: -46px;
  right: -66px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-inner-wrapper
  .image
  .inner-image
  img {
  border-radius: 10px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-left
  .detail-inner-wrapper
  .detail-inner-para {
  width: 50%;
  margin-left: 53px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box {
  background-color: var(--color-dark);
  border-radius: 10px;
  padding: 35px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box
  .portfolio-detail-content {
  margin-bottom: 25px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box
  .portfolio-detail-content
  h5 {
  margin-bottom: 12px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box
  .portfolio-detail-content
  .wc-social-logo
  ul {
  display: flex;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box
  .portfolio-detail-content
  .wc-social-logo
  ul
  li
  a {
  padding-right: 15px;
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box
  .portfolio-detail-content
  .wc-social-logo
  ul
  li
  a:hover
  svg
  path {
  fill: var(--color-primary);
}

.portfolio-detail
  .portfolio-detail-wrapper
  .portfolio-detail-right
  .detail-right-box
  .portfolio-detail-content
  .wc-social-logo
  ul
  li
  a
  svg
  path {
  fill: var(--color-four);
}

.portfolio-detail .portfolio-detail-slider {
  margin-top: 57px;
}

.portfolio-detail .portfolio-detail-slider h2 {
  margin-bottom: 40px;
}

/**************************************
   blog-grid style
   ***************************************/

.blog-grid .blog-head-wrapper .blog-head-title h2 {
  margin-bottom: 15px;
}

.blog-grid .blog-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/**************************************
   blog-grid style
   ***************************************/

.blog-list .blog-two-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.blog-list .blog-two-wrapper .blog-right-inner {
  margin-left: 0px;
  margin-bottom: 0px;
}

/*=====================================
    blog-classic style
    =======================================*/

.blog-classic .blog-classic-wrapper {
  display: flex;
  justify-content: space-between;
}

.blog-classic .blog-classic-wrapper .blog-classic-left {
  width: 70%;
  padding-right: 28px;
}

.blog-classic .blog-classic-wrapper .blog-classic-right {
  width: 30%;
  padding-left: 28px;
}

.blog-classic .blog-two-wrapper {
  display: unset !important;
}

.blog-classic .blog-classic-left .blog-content {
  margin-right: 0px;
  margin-bottom: 28px;
}

.blog-classic .blog-classic-left .blog-content .blog-content-image {
  max-width: 100%;
}

.blog-classic .blog-classic-left .blog-content p {
  max-width: 100%;
}

.blog-classic .blog-classic-left .blog-content h4 {
  font-size: var(--h3-28);
  line-height: var(--line-height-38);
  font-weight: var(--semi-bold);
}

.blog-classic .blog-two-wrapper .blog-two-btn {
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: 30px;
}

.blog-classic .blog-two-wrapper .classic-blog-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

.blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}
.blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left img{
  border-radius:100%;
}
.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-left
  img {
  max-width: 40px;
  height: 40px;
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-left
  p {
  margin-bottom: 0;
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-left
  .name {
  color: var(--color-secondary);
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-left
  .date
  li {
  color: var(--color-third);
  font-weight: var(--medium);
  position: relative;
  list-style-type: disc;
  font-family: var(--font-secondary);
  margin-left: 20px;
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-right {
  display: flex;
  align-items: center;
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-right
  .like {
  padding-right: 16px;
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-right
  .share {
  padding-left: 16px;
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-right
  span {
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  font-family: var(--font-secondary);
  margin-left: 8px;
  vertical-align: top;
  font-weight: var(--medium);
  color: var(--color-third);
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-right
  svg
  path {
  fill: var(--color-third);
}

.blog-classic
  .blog-two-wrapper
  .classic-blog-bottom
  .classic-blog-bottom-right
  a:hover
  svg
  path {
  fill: var(--color-secondary);
}

.blog-classic .blog-classic-right .search-here .classic-search {
  max-width: 454px;
  width: 100%;
  position: relative;
  height: 50px;
  margin-top: 15px;
}

.blog-classic .blog-classic-right .search-here .classic-search input {
  width: 100%;
  height: 100%;
  border: 0px;
  background-color: var(--color-dark);
  padding: 11px 80px 11px 25px;
  border-radius: 4px;
  font-size: var(--p-16);
  line-height: var(--line-height-26);
}

.blog-classic .blog-classic-right .search-here .classic-search .search-btn {
  height: 50px;
  width: 74px;
  background-color: var(--color-secondary);
  border: none;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid var(--color-secondary);
  transition: 0.2s all ease;
}

.blog-classic
  .blog-classic-right
  .search-here
  .classic-search
  .search-btn:hover {
  background-color: var(--color-five);
}

.blog-classic
  .blog-classic-right
  .search-here
  .classic-search
  .search-btn
  svg
  path {
  fill: unset;
}

.blog-classic .blog-classic-right .Recent-blogs {
  margin-top: 38px;
}

.blog-classic .blog-classic-right .Recent-blogs .recent-blog-content {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  gap: 15px;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-image {
  max-width: 120px;
  width: 100%;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-image
  img {
  border-radius: 5px;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-image::before {
  padding-top: 75%;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-blog-info
  h6 {
  max-width: 314px;
  width: 100%;
  margin-bottom: 10px;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-blog-info
  .comment {
  display: flex;
  align-items: center;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-blog-info
  .comment
  svg {
  vertical-align: bottom;
  margin-right: 8px;
}

.blog-classic
  .blog-classic-right
  .Recent-blogs
  .recent-blog-content
  .recent-blog-info
  .comment
  svg
  path {
  fill: var(--color-four);
}

.blog-classic .blog-classic-right .archives {
  margin-top: 38px;
}

.blog-classic .blog-classic-right .archives .archive-content {
  background-color: var(--color-dark);
  padding: 30px 38px;
  border-radius: 4px;
  margin-top: 20px;
}

.blog-classic .blog-classic-right .archives .archive-content ul {
  list-style: unset;
}

.blog-classic .blog-classic-right .archives .archive-content ul li {
}

.blog-classic .blog-classic-right .archives .archive-content ul li a {
  font-size: var(--h6-18);
  line-height: var(--line-height-28);
  font-weight: var(--medium);
  font-family: var(--font-secondary);
  margin-bottom: 15px;
  color: var(--color-third);
  display: block;
}

.blog-classic .blog-classic-right .archives .archive-content ul li a:hover {
  color: var(--color-primary);
}

.blog-classic .categories {
  margin-top: 38px;
}

.blog-classic .categories .categories-select-dropdown {
  position: relative;
  display: inline-block;
  max-width: 454px;
  width: 100%;
  height: 50px;
  margin-top: 20px;
}
.blog-classic .categories .select-dropdown-button {
  background-color: var(--color-dark);
  color: #616161;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: left;
  border: 0px;
  padding-left: 25px;
}
.blog-classic .categories .select-dropdown-button::focus {
  outline: none;
}

.blog-classic .categories .select-dropdown-button span {
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  font-family: var(--font-secondary);
}

.blog-classic .categories .select-dropdown-button .fa-angle-down {
  position: absolute;
  right: 25px;
  top: 17px;
}
.blog-classic .categories .select-dropdown-list {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(1, 0);
  transition: all ease-in-out 0.3s;
  z-index: 2;
}
.blog-classic .categories .select-dropdown-list.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1, 1);
}
.blog-classic .categories .select-dropdown-list-item {
  display: block;
  list-style-type: none;
  padding: 10px 15px;
  background: var(--color-dark);
  border-top: 1px solid var(--color-secondary);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  color: #616161;
  transition: all ease-in-out 0.3s;
  font-family: var(--font-secondary);
}

.blog-classic .blog-classic-right .instagram-post {
  margin-top: 38px;
}

.blog-classic .blog-classic-right .instagram-post .instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  margin-top: 20px;
  max-width: 454px;
}

.blog-classic .blog-classic-right .instagram-post .instagram-grid .insta-image {
  max-width: 146px;
  width: 100%;
}

.blog-classic
  .blog-classic-right
  .instagram-post
  .instagram-grid
  .insta-image
  img {
  border-radius: 5px;
}

.blog-classic
  .blog-classic-right
  .instagram-post
  .instagram-grid
  .insta-image::before {
  padding-top: 77%;
}

.blog-classic .blog-classic-right .popular-tags {
  margin-top: 38px;
}

.blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper {
  margin-top: 20px;
}

.blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper ul {
  display: flex;
  flex-wrap: wrap;
}

.blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper ul li a {
  border: 1px solid var(--color-secondary);
  border-radius: 4px;
  padding: 6px 16px;
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  color: var(--color-six);
  font-weight: var(--regular);
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 12px;
}

.blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper ul li a:hover {
  background-color: var(--color-secondary);
}

/*=====================================
    blog-detail style
    =======================================*/

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .blog-detail-image::before {
   padding-top: 34%; 
  }

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .blog-detail-image img { 
  border-radius: 10px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar { 
  display: flex; 
  justify-content: space-between;
  margin-top: 25px;
}
.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left { 
  width:100%;
  display: flex;
  align-items: center;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner .quotes svg {
    width: 30px;
}
.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left img {
  max-width: 40px;
  height: 40px;
  margin-right: 15px;
  border-radius:100%;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left .name {
  color: var(--color-secondary);
  margin-right: 15px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left p {
  margin-bottom: 0;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left .date li {
  color: var(--color-third);
  font-weight: var(--medium);
  position: relative;
  list-style-type: disc;
  font-family: var(--font-secondary);
  margin-left: 20px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right { 
  display: flex;
  align-items: center;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right .like {
  padding-right: 16px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right .share {
  padding-left: 16px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right span {
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  font-family: var(--font-secondary);
  margin-left: 8px;
  vertical-align: top;
  font-weight: var(--medium);
  color: var(--color-third);
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right svg
  path {
  fill: var(--color-third);
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right a:hover
  svg
  path {
  fill: var(--color-secondary);
}

.blog-detail-one .blog-detail-wrapper .blog-detail-image-content h3 {
  margin-top: 20px;
  margin-bottom: 15px;
}

.blog-detail-one .blog-detail-wrapper p {
  margin-bottom: 15px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-quotes {
  border: 1px solid var(--color-dark);
  border-radius: 16px;
  padding: 10px;
  margin-top: 60px;
  margin-bottom: 30px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner {
  background-color: var(--color-dark);
  border-radius: 16px;
  padding: 10px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner h4 {
  font-weight: var(--medium);
  text-align: center;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-top: 10px;
}

.blog-detail-one
  .blog-detail-wrapper
  .blog-detail-quotes
  .quotes-inner
  .quotes {
  background-color: var(--color-primary);
  height: 70px;
  width: 70px;
  border-radius: 15px;
  margin: -50px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-detail-one
  .blog-detail-wrapper
  .blog-detail-quotes
  .quotes-inner
  .quotes
  svg
  path {
  fill: var(--color-five);
}

.blog-detail-one .blog-detail-wrapper .blog-detail-iamge-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 22px;
}

.blog-detail-one .blog-detail-wrapper .blog-detail-iamge-wrapper .image-grid {
  margin-top: 28px;
  margin-bottom: 26px;
}

.blog-detail-one
  .blog-detail-wrapper
  .blog-detail-iamge-wrapper
  .image-grid::before {
  padding-top: 55%;
}

.blog-detail-one
  .blog-detail-wrapper
  .blog-detail-iamge-wrapper
  .image-grid
  img {
  border-radius: 5px;
}

.blog-detail-one .blog-detail-wrapper .services-link-wrapper {
  margin-top: 40px;
  margin-bottom: 58px;
}

.blog-detail-one .blog-detail-bottom h2 {
  margin-bottom: 30px;
}

.blog-detail-one .blog-detail-bottom .blog-two-wrapper {
  grid-gap: 28px;
}

.blog-detail-one .blog-detail-bottom .blog-two-wrapper .blog-right-inner {
  margin-left: 0px;
}

/*=====================================
    blog-detail-two style
    =======================================*/

.blog-detail-two .blog-classic-wrapper .services-detail-three-left {
  width: 70%;
  padding-right: 23px;
}

.blog-detail-two .blog-classic-wrapper .blog-classic-right {
  padding-left: 23px;
}

.blog-detail-two .blog-two-wrapper .blog-two-btn {
  border-bottom: 0px;
}

.blog-detail-two .blog-two-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
}

/*=====================================
    blog-detail-three style
    =======================================*/

.blog-detail-three .blog-classic-wrapper {
  flex-direction: row-reverse;
}

.blog-detail-three .blog-classic-wrapper .blog-classic-right {
  padding-right: 23px;
  padding-left: 0px;
}

.blog-detail-three .blog-classic-wrapper .services-detail-three-left {
  padding-left: 23px;
  padding-right: 0px;
}

.blog-detail-three .blog-two-wrapper .blog-two-btn {
  border-bottom: 0px;
}

/*=====================================
    plan-page style
    =======================================*/

.plan-page .plan-three-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40px;
  margin-bottom: 60px;
}

.plan-page .plan-three-wrapper .left {
  margin-right: 0px;
}

.plan-page .plan-three-wrapper .right {
  margin-left: 0px;
}

/*=====================================
    testimonial-page style
    =======================================*/

.testimonial-page .testimonial-wrapper-three {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40px;
  margin-bottom: 70px;
}

/*=====================================
    contact-us-page style
    =======================================*/

.contact-us .help-wrapper {
  align-items: center;
}

.contact-us .help-wrapper .help-content h2 {
  font-weight: var(--semi-bold);
  margin-bottom: 30px;
}

.contact-us .help-wrapper .help-content p {
  max-width: 606px;
  width: 100%;
  margin-bottom: 20px;
}

.contact-information .information-wrapper {
  max-width: 1110px;
  width: 100%;
  margin: 0 auto;
}

.contact-information .information-wrapper .information-box {
  text-align: center;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  background-color: var(--color-five);
  margin-left: 23px;
  margin-right: 23px;
  padding-bottom: 38px;
}

.contact-information .information-wrapper .information-box .information-icon {
  background-color: var(--color-secondary);
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -40px auto 0;
  border-radius: 50px;
}

.contact-information
  .information-wrapper
  .information-box
  .information-icon
  svg {
  font-size: var(--font-size-32);
  line-height: var(--line-height-42);
}

.contact-information
  .information-wrapper
  .information-box
  .information-icon
  svg
  path {
  fill: var(--color-third);
}

.contact-information .information-wrapper .information-box h4 {
  margin-top: 22px;
  margin-bottom: 12px;
}

.contact-information .information-wrapper .information-box a {
  display: block;
  font-size: var(--p-16);
  line-height: normal;
  color: var(--color-third);
  font-weight: var(--regular);
}

.contact-information .information-wrapper .information-box a:hover {
  color: var(--color-primary);
}

.contact-map iframe {
  display: block;
}

/*=====================================
    error style
    =======================================*/

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

.error .error-content .error-image {
  max-width: 600px;
  margin: 0 auto 22px;
}

.error .error-content h2 {
  margin-bottom: 22px;
}

.error .error-content p {
  max-width: 560px;
  width: 100%;
  margin: 0 auto 36px;
}

/*=====================================
    faq style
    =======================================*/

.faq .faq-head {
  max-width: 682px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.faq .faq-head h2 {
  margin-bottom: 15px;
}

.faq .faq-head p {
  margin-bottom: 50px;
}

.faq .faq-head .faq-search {
  max-width: 454px;
  height: 50px;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.faq .faq-head .faq-search input {
  width: 100%;
  height: 100%;
  border: 0px;
  background-color: var(--color-dark);
  padding: 11px 55px 11px 25px;
  border-radius: 4px;
  font-size: var(--p-16);
  line-height: var(--line-height-26);
}

.faq .faq-head .faq-search input:focus {
  outline: 0px;
}

.faq .faq-head .faq-search .faq-search-btn {
  height: 50px;
  width: 74px;
  border: none;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
}

.faq .faq-head .faq-search .faq-search-btn svg path {
  fill: unset;
}

.faq .faq-wrapper {
  margin-top: 80px;
}

.faq .faq-wrapper .acc {
  max-width: 1120px;
  margin: 0 auto;
}

.faq .faq-wrapper .acc .acc-card {
  position: relative;
  margin-bottom: 30px;
}

.faq .faq-wrapper .acc .acc-card .acc-title {
  background-color: var(--color-dark);
  color: var(--color-third);
  cursor: pointer;
  display: block;
  padding: 17px 30px;
  position: relative;
  text-align: left;
  font-family: var(--font-secondary);
  font-size: var(--h4-22);
  line-height: var(--line-height-32);
  font-weight: var(--semi-bold);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.faq .faq-wrapper .acc .acc-card .acc-title::after {
  width: 8px;
  height: 8px;
  border-right: 1px solid #4a6e78;
  border-bottom: 1px solid #4a6e78;
  position: absolute;
  right: 22px;
  content: " ";
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.2s ease-in-out;
}

.faq .faq-wrapper .acc .acc-card .acc-title.active::after {
  transform: rotate(223deg);
  transition: all 0.2s ease-in-out;
}

.faq .faq-wrapper .acc .acc-card .acc-panel {
  border-top: 1px solid rgba(111, 111, 111, 0.5);
  background-color: #fbeed059;
  color: var(--color-four);
  font-size: var(--p-16);
  line-height: var(--line-height-26);
  font-family: var(--font-secondary);
  padding: 25px 35px;
  display: none;
}

/*=====================================
    career-page style
    =======================================*/

/*-- job-section --*/

.career-job .job-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.career-job .job-content {
  margin-left: 67px;
  margin-right: 67px;
}

.career-job .job-content .job-quotes {
  background-color: var(--color-primary);
  border-radius: 15px;
  height: 70px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
}

.career-job .job-content .job-quotes svg path {
  fill: var(--color-five);
}

.career-job .job-content p {
  max-width: 605px;
  margin-top: 23px;
}

.career-job .job-image {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  margin-left: 67px;
  margin-right: 67px;
}

.career-job .job-image::before {
  content: "";
  display: block;
  padding-top: 60%;
}

.career-job .job-image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

/*-- opporunities-section --*/

.career-apply {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  background-color: var(--color-dark);
  border-radius: 10px;
}

.career-apply h4 {
  text-align: center;
}

.career-opporunities {
  background-color: rgba(251, 238, 208, 0.5);
}

.career-opporunities .career-opportunities-title {
  text-align: center;
}

.career-opporunities .career-opportunities-title h2 {
  margin-bottom: 15px;
}

.career-opporunities .career-opportunities-title p {
  max-width: 680px;
  margin: 0 auto 60px;
}

.career-opporunities .career-opporunities-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.career-opporunities .career-opporunities-wrapper .career-opporunities-box {
  border: 1px solid #f1ddb0;
  border-radius: 18px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-box-title {
  background-color: var(--color-dark);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-box-title
  h3 {
  padding: 23px 40px;
  border-bottom: 1px solid #f1ddb0;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content {
  padding: 20px 40px 35px 40px;
  background-color: var(--color-five);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  p {
  margin-top: 20px;
  margin-bottom: 25px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info
  .vacancy-city {
  display: flex;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info
  .vacancy-city
  .vacancy-box {
  background-color: var(--color-dark);
  padding: 6px 15px;
  border-radius: 4px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info
  .vacancy-city
  .vacancy-box:nth-child(1) {
  margin-right: 7px;
}
.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info
  .vacancy-city
  .vacancy-box:nth-child(2) {
  margin-left: 7px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info
  .vacancy-city
  .vacancy-box
  p {
  font-weight: var(--medium);
  color: var(--color-third);
  margin: 0px;
}

.career-opporunities
  .career-opporunities-wrapper
  .career-opporunities-box
  .opporunities-content
  .vacancy-info
  .vacancy-nub
  p {
  font-weight: var(--semi-bold);
  color: var(--color-third);
  margin: 0px;
}

/*-- process-section --*/

.process .process-title {
  text-align: center;
  margin-bottom: 70px;
}

.process .process-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  position: relative;
}

.process .process-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-bottom: 2px solid var(--color-primary);
  width: 62%;
  transform: translateX(-50%);
}

.process .process-wrapper .process-round {
  height: 200px;
  width: 200px;
  background-color: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.process .process-wrapper .process-round .process-round-nub {
  background-color: var(--color-primary);
  height: 70px;
  width: 70px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.process .process-wrapper .process-round .process-round-nub h3 {
  color: var(--color-five);
  font-weight: var(--semi-bold);
}

/*-- success-section --*/

.success {
  padding-bottom: 80px;
}

.success .success-title {
  text-align: center;
  margin-bottom: 57px;
}

.success .success-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  text-align: center;
}

.success .success-wrapper .success-content .success-count {
  height: 70px;
  width: 70px;
  background-color: var(--color-dark);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
}

.success .success-wrapper .success-content .success-count h4 {
  height: 46px;
  width: 46px;
  background-color: var(--color-primary);
  color: var(--color-five);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--semi-bold);
  margin: 0px;
}

.success .success-wrapper .success-content h4 {
  max-width: 192px;
  margin: 0 auto 10px;
}

.success .success-wrapper .success-content p {
  max-width: 308px;
  margin: 0 auto;
}

/*-- career-newslatter --*/

.career-newslatter .career-newslatter-left {
  display: flex;
  margin-right: 122px;
}

.career-newslatter .newslatter-wrapper .newslatter-input {
  margin-left: 122px;
}

.career-newslatter .career-newslatter-left .icon {
  margin-right: 24px;
}

.career-newslatter .career-newslatter-left .icon svg {
  font-size: 76px;
}

.career-newslatter .career-newslatter-left .career-newslatter-content {
  margin-left: 24px;
}

.career-newslatter .career-newslatter-left .career-newslatter-content h3 {
  max-width: 555px;
  margin-bottom: 15px;
}

.career-newslatter .career-newslatter-left .career-newslatter-content p {
  max-width: 767px;
}

/*=====================================
    presantation-page style
    =======================================*/

/*-- hero --*/

.presantation-hero {
  background-image: url(../images/presentation-hero.jpg);
}

.presantation-hero .banner-wrapper h1 {
  max-width: 1079px;
  margin: 0 auto;
}

.presantation-hero .banner-wrapper p {
  max-width: 780px;
  margin: 30px auto 48px;
  color: var(--color-five);
}

.presantation-hero .banner-wrapper .demo-btn {
  margin-bottom: 135px;
}

.presantation-hero .banner-wrapper .demo-btn .btn {
  border: 0px;
}

.presantation-hero .banner-wrapper .btn-primary:hover {
  background-color: var(--color-five);
}

.presantation-hero .presentation-layout {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-five);
  border-radius: 100px;
  padding: 35px 60px;
  margin-bottom: -235px;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
}

.presantation-hero .presentation-layout .layout-box {
  display: flex;
  align-items: center;
}

.presantation-hero .presentation-layout .layout-box .layout-icon {
  height: 80px;
  min-width: 80px;
  background-color: var(--color-secondary);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.presantation-hero .presentation-layout .layout-box .layout-icon svg {
  font-size: 36px;
}

.presantation-hero .presentation-layout .layout-box .layout-content h5 {
  text-align: start;
  margin-bottom: 4px;
  max-width: 150px;
}

.presantation-hero .presentation-layout .layout-box .layout-content p {
  text-align: start;
  color: var(--color-four);
  margin: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 286px;
}

/*-- stylish --*/

.stylish {
  padding-top: 180px;
}

.stylish .stylish-title {
  text-align: center;
  margin-bottom: 50px;
}

.stylish .stylish-title p {
  max-width: 600px;
  margin: 20px auto 0;
}

.stylish .stylish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.stylish .stylish-grid .stylish-image-content .stylish-image {
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  max-width: 460px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.stylish .stylish-grid .stylish-image-content .stylish-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(1, 69, 44, 0.6);
  height: 100%;
  width: 100%;
  border-radius: 10px;
  transition: 0.5s all;
  opacity: 0;
  visibility: hidden;
}

.stylish .stylish-grid .stylish-image-content .stylish-image:hover::after {
  opacity: 1;
  visibility: visible;
}

.stylish .stylish-grid .stylish-image-content .stylish-image .stylish-btn {
  display: flex;
  justify-content: center;
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  visibility: hidden;
  transition: 0.5s all;
}

.stylish
  .stylish-grid
  .stylish-image-content
  .stylish-image:hover
  .stylish-btn {
  top: 50%;
  visibility: visible;
}

.stylish
  .stylish-grid
  .stylish-image-content
  .stylish-image
  .stylish-btn
  .onepage {
  background-color: var(--color-secondary);
  padding: 13px 30px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  color: var(--color-third);
}

.stylish
  .stylish-grid
  .stylish-image-content
  .stylish-image
  .stylish-btn
  .onepage:hover {
  background-color: var(--color-five);
}

.stylish
  .stylish-grid
  .stylish-image-content
  .stylish-image
  .stylish-btn
  .multipage {
  background-color: var(--color-five);
  padding: 13px 30px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: var(--color-third);
}

.stylish
  .stylish-grid
  .stylish-image-content
  .stylish-image
  .stylish-btn
  .multipage:hover {
  background-color: var(--color-secondary);
}

.stylish .stylish-grid .stylish-image-content h4 {
  text-align: center;
  margin-top: 22px;
  font-weight: var(--semi-bold);
}

/*-- inner-Pages --*/

.inner-pages {
  padding-bottom: 140px;
}

.inner-pages .inner-pages-title {
  text-align: center;
}

.inner-pages .inner-pages-title p {
  max-width: 600px;
  width: 100%;
  margin: 20px auto 60px;
}

.inner-pages .inner-image-slider {
  position: relative;
}

.inner-pages .inner-image-slider .inner-image::before {
  padding-top: 75%;
}

.inner-pages .inner-image-slider .inner-image img {
  object-position: top;
}

.inner-pages .inner-image-slider .swiper-pagination {
  bottom: -60px;
}

.inner-pages .inner-image-slider .swiper-button-next:after,
.inner-pages .inner-image-slider .swiper-button-prev:after {
  height: 80px;
  width: 80px;
  font-weight: var(--extra-bold);
}

/*-- amazing-layout --*/

.amazing-layout .amazing-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amazing-layout .amazing-wrapper .amazing-content-left,
.amazing-layout .amazing-wrapper .amazing-content-right {
  width: 50%;
}

.amazing-layout .amazing-wrapper .amazing-content-left {
  margin-right: 85px;
}

.amazing-layout .amazing-wrapper .amazing-content-right {
  margin-left: 85px;
}

.amazing-layout .amazing-wrapper .amazing-content-left h2 {
  margin-bottom: 25px;
}

.amazing-layout .amazing-wrapper .amazing-content-left p {
  margin-bottom: 15px;
}

.amazing-layout .amazing-wrapper .amazing-content-right .amazing-image::before {
  padding-top: 78%;
}

.amazing-layout
  .amazing-wrapper
  .amazing-content-right
  .amazing-image
  .image-text {
  position: absolute;
  top: -55px;
  left: -55px;
  height: 140px;
  width: 140px;
  background-color: var(--color-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 100px;
}

/*-- presentation-life-time  --*/

.life-time .intructions-nub h4 {
  max-width: 100%;
}

/*-- responsive  --*/

.responsive {
  padding-top: 0;
}

.responsive .responsive-wrapper .responsive-content-left .responsive-image {
  max-width: 576px;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.responsive .responsive-wrapper .responsive-content-right {
  margin-left: 60px;
}

.responsive .responsive-wrapper .responsive-content-right h2 {
  margin-bottom: 25px;
}

.responsive .responsive-wrapper .responsive-content-right p {
  margin-bottom: 15px;
}

/*-- presentation-footer --*/

.presentation-footer {
  padding: 165px 0;
}

.presentation-footer .footer-content span {
  font-family: var(--font-secondary);
  font-size: 70px;
  line-height: 80px;
  color: var(--color-five);
  font-weight: var(--semi-bold);
  text-align: center;
  display: block;
  margin-bottom: 28px;
}

.presentation-footer .footer-content h2 {
  text-align: center;
  color: var(--color-five);
  font-weight: var(--medium);
  margin-bottom: 52px;
}

.presentation-footer .footer-content ul {
  display: flex;
  justify-content: center;
  gap: 75px;
}

.presentation-footer .footer-content ul li {
  position: relative;
  color: var(--color-five);
  font-family: var(--font-secondary);
  font-size: var(--h6-18);
  line-height: var(--line-height-26);
}

.presentation-footer .footer-content ul li:before {
  content: url(../images/growth-mark.png);
  position: absolute;
  top: 0;
  left: -35px;
}

.presentation-footer .footer-content .demo-btn {
  text-align: center;
  margin-top: 55px;
}

.presentation-footer .footer-content .btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-third);
}

.presentation-footer .footer-content .btn-primary:hover {
  background-color: var(--color-five);
}

.hidden {
  display: none;
}
.partner-image .swiper {
  width: 100%;
}