/**
* Template Name: Haircut Landing Page
*/

/*============================================
1. Color Veriables
2. Preloader
3. Scroll top button
4. General
5. Animation keyframes
6. Header 
7. Hero
8. Gallery box
9. About us
10. Count
11. Our Services
12. Our Gallery
13. Our Team
14. video
15. Our Training Schedule
16. Video
17. Clear Pricing
18. Our Testimonial
19. Our Blog
20. Contact Info
21. Footer
============================================*/

/*--------------------------------------------------------------
# Color Veriables
--------------------------------------------------------------*/
:root {
  --h02-primary-color:#1D1D1D;
  --h02-secondary-color: #D7B07E  ;
  --h02-text-primary-color: #1D1D1D;
  --h02-text-secondary-color: #777777;
  --h02-tertiary-color: #FFFFFF;
  --h02-text-hover-color: #1D1D1D;
}

:root {
  scroll-behavior: smooth;
}
:root
{

	/* ----------------------------------
   @font weight declaration
  ------------------------------------ */
	--lh-fw-normal: normal;
	--lh-fw-elight: 200;
	--lh-fw-light: 300;
	--lh-fw-regular: 400;
	--lh-fw-medium: 500;
	--lh-fw-sbold: 600;
	--lh-fw-bold: 700;
	--lh-fw-ebold: 800;
	--lh-fw-black: 900;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--h02-primary-color);
  -webkit-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--h02-secondary-color);
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

@-webkit-keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: var(--h02-secondary-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.scroll-top i {
  font-size: 24px;
  color: var(--h02-primary-color);
  line-height: 0;
  margin-top: -5px;
}

.scroll-top:hover {
  background: var(--h02-secondary-color);
  color: var(--h02-primary-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-size: 18px;
  font-family: "poppins", sans-serif;
  background-color: var(--h02-tertiary-color);
  line-height: 26px;
  overflow-x: hidden !important; 
}
::-webkit-scrollbar {
	height: 4px;
	width: 4px;
	background: var(--h02-primary-color);
}

::-webkit-scrollbar-thumb {
	background:var(--h02-secondary-color);
	-webkit-border-radius: 1ex;
	-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
	background: transparent;
}
img {
  max-width: 100%;
  height: auto;
}

a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration: none;
  font-family: "poppins", sans-serif;
}

a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "poppins", sans-serif;
  line-height: 1.6;
  margin-bottom: 0px;
  
}

h1,
.h1 {
  font-family: "poppins", sans-serif;
  font-size: 80px;
  font-weight: 800;
  line-height: 100px;
  
}

h2,
.h2 {
  font-family: "poppins", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 70.56px;
  
}

h3,
.h3 {
  font-family: "poppins", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 60px;
 
}

h4,
.h4 {
  font-family: "poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 40.32px;
  
}

h5,
.h5 {
  font-family: "poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
 
}

h6,
.h6 {
  font-family: "poppins", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
 
}

p {
  font-family: "poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: var(--h02-text-secondary-color);
}
.services-title
{
  margin-bottom: 50px;
}
.services-title h6 {
  color: var(--h02-secondary-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.services-title h3 {
  color: var(--h02-primary-color);
}
/*==============================
  # Header 
==============================*/
.header {
  position: absolute;
  padding: 15px 0px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--h02-primary-color);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  z-index: 1030;
}

.header .navbar-expand-lg>.container>.row {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.header.sticked {
  padding: 15px 0px;
  position: fixed;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
  background-color: var(--h02-primary-color);
  -webkit-animation: fadeInDown 1s ease-in-out;
  -moz-animation: fadeInDown 1s ease-in-out;
  top: 0;
  left: 0;
}

.header .navbar-expand-lg {
  padding: 0;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0 12px;
}

.navbar-toggler:not(:disabled):not(.disabled) {
  text-align: end;
}

.header .navbar-nav .nav-item .nav-link {
  font-size: 14px;
  font-family: "poppins", sans-serif !important;
  font-weight: 400 !important;
  color: var(--h02-tertiary-color) !important;
}

.header .navbar-nav .nav-item .nav-link:hover,
.header .navbar-nav .nav-item .nav-link.active {
  color: var(--h02-secondary-color) !important;
}
.header .navbar-nav .nav-item .nav-link.active .menu-dot {
  color: var(--h02-secondary-color);
  padding: 0px 5px;
}
.menu-dot
{
  color: transparent;
  padding: 0px 5px;
}

.lets-talk-btn {
  width: 100%;
  height: 48px;
  border: none;
  background-color:var(--h02-secondary-color);
  color: var(--h02-tertiary-color);
  padding: 0px;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  font-family: "poppins", sans-serif;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.lets-talk-btn:hover {
  background-color:var(--h02-tertiary-color);
  color: var(--h02-primary-color);
}

.lets-talk-btn img {
  padding-right: 10px;
}

/*==============================
   End of Header 
==============================*/

/*==============================
   # start Hero section
==============================*/
section#hero {
  background-color: var(--h02-primary-color);
  height: 900px;
}
.social-links
{
  background-color:#d7b07e1a;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 87px;
  z-index: 1;
}
.social-links i {
  color: var(--h02-tertiary-color);
  font-size: 20px;
  padding: 35px 0px;
}
.hero h6 {
  letter-spacing: 21px;
  color: var(--h02-tertiary-color);
  line-height: 30px;
}
.hero h6 span {
  color: var(--h02-secondary-color);
}
.hero h1 {
  color: var(--h02-tertiary-color);
}
.hero .border-start{
  width: 580PX;
  color: var(--h02-tertiary-color);
  border-left: 5px solid var(--h02-secondary-color) !important;
  margin: 0 auto;
  margin:20px 0px 51px 0px;
  padding-left: 10px;
  flex-wrap: wrap;
}
.getstart-btn {
  display: inline-block;
  padding: 16px 32px;
  border: 1px solid var(--h02-tertiary-color);
  color: var(--h02-tertiary-color);
  background-color: #ffffff17;
  font-size: 18px !important;
  font-family: "poppins", sans-serif;
  font-weight: 500;
  line-height: normal;
}
.getstart-btn:hover{
  color: var(--h02-tertiary-color);
}
.getstart-btn img{
  margin-left: 8px;
  display: inline-block !important;
  transition: 0.5s;
}
.getstart-btn:hover img {
  transform: rotate(45deg);
  transition: 0.5s;
}
.subscribe-btn {
  display: inline-block;
  padding: 16px 54px;
  border: 1px solid transparent;
  background-color: var(--h02-secondary-color);
  color: var(--h02-tertiary-color);
  font-size: 18px !important;
  font-family: "poppins", sans-serif;
  font-weight: 500;
  margin: 0px 20px;
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
.subscribe-btn:hover{
  background-color: var(--h02-tertiary-color);
  color: var(--h02-primary-color);
  box-shadow: 0 4px 8px 0 rgb(255 255 255 / 27%), 0 6px 20px 0 rgb(255 255 255 / 15%);
}
/*==============================
  End of Hero section
==============================*/

/*================================
  # start of Gallery Box section
==================================*/
.gallerybox-inner
{
  margin-top: -175px;
  z-index: 1;
}
.gallerybox-inner img
{
  border: 10px solid var(--h02-tertiary-color);
}

/*==============================
  End of Gallery Box section
================================*/

/*==============================
  # start of About us section
================================*/
.aboutus .services-title {
  margin-bottom: 20px;
}
.aboutus
{
  margin: 120px 0px;
}
.dot-img
{
    position: absolute;
    left: 31%;
    bottom: 74%;
}
.aboutus .read-more {
  padding: 16px 40px;
  border: 1px solid transparent;
  background-color: var(--h02-secondary-color);
  color: var(--h02-tertiary-color);
  font-size: 18px !important;
  font-family: "poppins", sans-serif;
  font-weight: 500;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
  border: 1px solid transparent;
}
.aboutus .read-more:hover{
  color: var(--h02-primary-color) !important;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid var(--h02-primary-color);
}
.aboutus .read-more svg{
  transition: 0.5s;
  margin-left: 12px;
}
.aboutus .read-more:hover svg path{
  fill: var(--h02-primary-color) !important;
}
.aboutus .read-more:hover svg {
  transform: rotate(45deg);
  transition: 0.5s;
}
.aboutus .read-more:hover svg{
  transition: 0.5s;
  transform: rotate(45deg);
}


/*==============================
 End of About us section
================================*/

/*==============================
  # Start Count section
==============================*/
.count .count-bg
{
padding:0px;
}
.count .count-bg .count-border
{
  border-right: 1px solid var(--h02-text-secondary-color);
}
.count .count-bg .stats-item span
{
  font-size: 48px;
  display: block;
  color: var(--h01-primary-color);
  font-weight:var(--lh-fw-bold);
  line-height: normal;
}
.count .count-bg .stats-item span::after {
  content: " +";
  display: inline-block;
  color: var(--h02-primary-color);
  font-size: 50px;
  padding-left: 8px;
}
.count .count-bg .stats-item p{
  font-size: 20px;
  font-weight: 500;
  color: var(--h02-text-secondary-color);
  font-weight: var(--lh-fw-medium);
  margin-bottom: 0px;
}
.count .count-bg .stats-item1 span
{
  font-size: 48px;
  display: block;
  color: var(--h02-primary-color);
  font-weight:var(--lh-fw-bold);
  line-height: normal;
}
.count .count-bg .stats-item1 span::after {
  content: " k";
  display: inline-block;
  color: var(--h02-primary-color);
  font-size: 50px;
  padding-left: 8px;
}
.count .count-bg .stats-item1 p{
  color: var(--h02-text-secondary-color);
  font-size: 20px;
  font-weight: 500;
  font-weight: var(--lh-fw-medium);
  margin-bottom: 0px;
}
/*==============================
   End of Count section
==============================*/

/*=================================
  # start of Our Services section
==================================*/
.ourservices{
  margin-top: 120px;
}
.arrows-box-custom button.previous.btn-arrow {
  padding: 22px 26px;
  border: 1px solid #d6b080;
  background-color: var(--h02-tertiary-color);
  line-height: inherit;
}
.arrows-box-custom svg{
  fill: var(--h02-secondary-color);
}
.arrows-box-custom button.previous.btn-arrow:hover {
  border: 1px solid #d6b080;
  background-color: var(--h02-secondary-color);
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
.arrows-box-custom button.previous.btn-arrow:hover svg path{
  fill: var(--h02-tertiary-color);
}
.arrows-box-custom button.next.btn-arrow {
  padding: 22px 26px;
  border: 1px solid #d6b080;
  background-color: var(--h02-tertiary-color);
  margin: 0px 10px;
  line-height: inherit;
}
.arrows-box-custom button.next.btn-arrow:hover {
  border: 1px solid #d6b080;
  background-color: var(--h02-secondary-color);
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
.arrows-box-custom button.next.btn-arrow:hover svg path{
  fill: var(--h02-tertiary-color);
}
.services-box
{
  background-color: var(--h02-tertiary-color);
  box-shadow: 0 3px 20px -2px rgb(0 0 0 / 15%);
  margin: 9px;
}
.ourservices-title
{
  font-size: 26px;
  font-weight: 600;
  color: var(--h02-primary-color);
  padding: 20px 0px;
}
.services-box p{
  padding: 0px 30px;
}
/*================================
  End of Our Services section
=================================*/

/*==============================
  # start of Our Gallery section
==============================*/
.ourgallery
{
  margin: 120px 0px;
}
.ourgallery .gallery-content{
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.gallery-content a
{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.image {
  display: inline-block;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:#1D1D1DB7; 
}

.gallery-content a:hover .overlay {
  opacity: 1;
} 
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
/*==============================
  End of Our Gallery section
==============================*/

/*==============================
  # start of Our Team section
==============================*/
.ourteam .member {
  position: relative;
}
.ourteam .member .pic {
  overflow: hidden;
  margin-bottom: 90px;
}
.ourteam .member .pic img{
  inset: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ourteam .member .member-info {
  background-color: var(--h02-tertiary-color);
  color: var(--h02-text-secondary-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: -50px;
  left: 35px;
  right: 35px;
  padding: 20px 17px;
  overflow: hidden;
  transition: 0.5s;
}
.ourteam .member h5 {
  font-weight: 600;
  font-size: 26px;
  position: relative;
  color: var(--h02-primary-color);
}
.ourteam .member span {
  display: block;
  font-size: 16px;
  font-weight: 400;
}
.ourteam .member .link {
  position: absolute;
  right: 30px;
  bottom: 30px;
}
.arrows-box-custom button.team-previous.btn-arrow {
  padding: 20px 26px;
  border: 1px solid #d6b080;
  background-color: var(--h02-tertiary-color);
  line-height: inherit;
}
.arrows-box-custom button.team-previous.btn-arrow:hover {
  border: 1px solid #d6b080;
  background-color: var(--h02-secondary-color);
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
.arrows-box-custom button.team-previous.btn-arrow:hover svg path 
{
  fill: var(--h02-tertiary-color);
}
.arrows-box-custom button.team-next.btn-arrow {
  padding: 20px 26px;
  border: 1px solid #d6b080;
  background-color: var(--h02-tertiary-color);
  margin: 0px 10px;
  line-height: inherit;
}
.arrows-box-custom button.team-next.btn-arrow:hover {
  border: 1px solid #d6b080;
  background-color: var(--h02-secondary-color);
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
.arrows-box-custom button.team-next.btn-arrow:hover svg path 
{
  fill: var(--h02-tertiary-color);
}
/*==============================
  End of Our Team section
==============================*/

/*==========================
  # start of video section
============================*/
.video-box{
  margin:30px 0px;
  position: relative;
  display: flex;
}
.video-img::before {
  content: "";
  background: color-mix(in srgb, var(--h02-primary-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index:0;
}
.video-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.wrapper {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.video-main {
  position: relative;
  display: inline-block;
}

.video {
  height: 98px;
  width: 98px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  color: var(--h02-secondary-color);
  background: color-mix(in srgb, #ffffff00, transparent 10%);
  z-index: 999 !important;
  font-size: 30px;
}
.video:hover{
  color: var(--h02-primary-color);
}
@keyframes waves {
  0% {
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
    opacity: 0;
   
  }
  50% {
    opacity: 0.9;

  }
  100% {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity: 0;
    
  }
}

.fa-play:before {
  content: "\f04b";
}

.waves {
  position: absolute;
  width: 180px;
  height: 180px;
  background: color-mix(in srgb, #d6b0804f, #d6b08040 30%);
  opacity: 0;
  border-radius: 100%;
  right: -40px;
  bottom: -40px;
  z-index: -1;
  -webkit-animation: waves 3s ease-in-out infinite;
  animation: waves 3s ease-in-out infinite;
}
        
.wave-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.wave-2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.wave-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

/*==========================
  End of video section
============================*/

/*==============================
  # start of Clear Pricing section
==============================*/
.pricing
{
  margin-top: 120px;
}
.pricing .pricing-item {
  background-color:var(--h02-primary-color);
  padding: 50px 20px;
  height: 100%;
  border: 2px solid #77777750;
}
.pricing .pricing-item:hover{
  background-color:var(--h02-secondary-color);
  border: 2px solid #1d1d1d0d;
}
.pricing .pricing-item:hover h5{
  color: var(--h02-primary-color);
}
.pricing .pricing-item:hover p{
  color: var(--h02-primary-color);
}
.pricing .pricing-item:hover h2{
  color: var(--h02-primary-color);
}
.pricing .pricing-item:hover span{
  color: var(--h02-primary-color);
}
.pricing .pricing-item:hover ul li {
  color: var(--h02-primary-color);
}
.pricing .pricing-item:hover .pricing-btn {
  background: var(--h02-tertiary-color);
  color: var(--h02-primary-color) !important;
  fill: var(--h02-primary-color);
}
.pricing .pricing-item:hover .pricing-line {
  background:#1d1d1d73;
}
.pricing .pricing-item:hover .pricing-btn svg path {
  fill: var(--h02-primary-color);
}
.pricing .pricing-item h5{
  color: var(--h02-tertiary-color);
}
.pricing .pricing-item p{
  color: var(--h02-tertiary-color);
}
.pricing .pricing-item h2 {
  color: var(--h02-tertiary-color);
  font-size: 54px;
  font-weight: 500;
  margin-bottom: 0;
}
.pricing .pricing-item h2 span {
  color: var(--h02-tertiary-color);
  font-size: 18px;
  font-weight: 400;
}
.pricing-line
{
 height: 2px;
 background:#77777750;
 margin: 37px 0px 17px 0px;
}
.pricing .pricing-item ul li {
  padding: 10px 0;
  align-items: center;
  color: var(--h02-tertiary-color);
}
.pricing .pricing-item ul li span{
 font-size: 18px;
 font-weight: 400;
}
.pricing-btn
{
  display: block;
  font-size: 18px;
  font-weight: 600;
  background: var(--h02-secondary-color);
  color: var(--h02-tertiary-color);
  border-color: var(--h02-secondary-color);
  padding: 20px;
  text-align: center;
  margin: 48px 0px 43px 0px;
  transition: 0.4s;
}
.pricing-btn svg
{
 margin-left: 10px;
 transition: 0.5s;
}
.pricing-btn:hover svg
{
  transform: rotate(45deg); 
  transition: 0.5s;
}
/*==============================
   End of Clear Pricing section
==============================*/

/*==================================
  # start of Our Testimonial section
===================================*/
.our-client
{
  margin-top: 120px;
}
.our-client .testimonial-item
{ 
  box-sizing: content-box;
}
.our-client .testimonial-item.slick-slide img {
  display:inline-block !important;
}
.our-client .testimonial-item h5 {
   margin-bottom: 0px;
   color: var(--h02-primary-color);
}
.our-client .testimonial-item h6 {
  font-size: 16px;
  font-weight: 400;
  color: var(--h02-primary-color);
}
.our-client .testimonial-item .stars {
  padding: 10px 0px;
}
.our-client .testimonial-item .stars i {
  color:var(--h02-secondary-color);
  margin: 0 2px;
}
.our-testimonial-slider ul.slick-dots {
  display: none !important;
}
.testimonial-arrows-box-custom
{
position: relative;
}
.testimonial-arrows-box-custom button.testimonial-previous.btn-arrow
{
  padding: 25px;
  border: 1px solid #d6b080;
  background-color: var(--h02-tertiary-color);
  line-height: 0px;
  position: absolute;
  left: 15.6%;
  top: -185px;
}
.testimonial-arrows-box-custom svg{
  fill: var(--h02-secondary-color);
}
.testimonial-arrows-box-custom button.testimonial-previous.btn-arrow:hover {
  border: 1px solid #d6b080;
  background-color: var(--h02-secondary-color);
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
button.testimonial-previous.btn-arrow:hover svg path{
  fill: var(--h02-tertiary-color);
}
.testimonial-arrows-box-custom button.testimonial-next.btn-arrow {
  padding: 25px;
  border: 1px solid #d6b080;
  background-color: var(--h02-tertiary-color);
  margin: 0px 10px;
  line-height: 0px;
  position: absolute;
  left: 36.5%;
  top: -185px;
}
.testimonial-arrows-box-custom button.testimonial-next.btn-arrow:hover {
  border: 1px solid #d6b080;
  background-color: var(--h02-secondary-color);
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 27%), 0 6px 20px 0 rgb(214 176 128 / 15%);
}
button.testimonial-next.btn-arrow:hover svg path{
  fill: var(--h02-tertiary-color);
}
/*==================================
  End of Our Testimonialsection
===================================*/

/*==================================
  # start of Our Blog section
===================================*/
.our-blog
{
  margin: 120px 0px;
}
.our-blog .post-entry {
  background-color: #1d1d1d0a;
  margin-bottom: 20px;
}
.our-blog .post-entry .thumbnail {
  flex: 0 0 45%;
}
.our-blog .post-meta {
  font-size: 16px;
  font-weight: 400;
  color: var(--h02-text-secondary-color);
  margin-bottom: 10px;
}
.our-blog h4 {
  line-height: 32px;
}
.our-blog p {
 padding-top: 20px;
 max-width: 94%;
 color: var(--h02-text-secondary-color);
}
.our-blog h4 a{
  font-size: 28px;
  line-height: 42px;
  font-weight: 600;
  color: var(--h02-primary-color);

}
.post-listbox
{
  border:1px solid #7777774f;
  padding: 11px 20px;
}
.post-list a img{
    inset: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.post-listbox h4 a
{
  font-size: 24px;
  line-height: normal;
  font-weight: 600;
  color: var(--h02-primary-color);
}
.our-blog .post-list {
  margin-bottom: 20px;
}
/*==================================
  # End of Our Blog section
===================================*/

/*==================================
  # start of Contact Info section
===================================*/
.contact-info
{
  padding: 100px 0px;
  background-color: var(--h02-primary-color);
}
.contact-info h4
{
  color: var(--h02-secondary-color);
  font-size: 30px;
  font-weight: 600px;
  line-height: 45px;
  padding-bottom: 20px;
}
.contact-info p
{
  color: var(--h02-tertiary-color);
}
.contact-info .info-item p a{
  color: var(--h02-tertiary-color);
}
.contact-info .info-item {
  width: 100%;
  margin-bottom: 10px;
  color: var(--h01-tertiary-color);
  padding-top: 50px;
}
.contact-info .info-item .info-title h6 {
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  color: var(--h02-tertiary-color);
}
.contact-info .info-item .info-title p{
  font-size: 17px;
  font-weight: 400;
  line-height: 33px;
  margin-bottom: 0px;
}
.contact-info .info-item i {
  font-size: 32px;
  color: var(--h02-tertiary-color);
  background-color:var(--h02-secondary-color);
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  margin-right: 20px;
}
.contact-info .info-item:hover i {
  background: var(--h02-tertiary-color);
  color: var(--h02-secondary-color);
}
/*start contact-info form*/
.contactinfo-form{
  display: block;
  width: 100%;
  padding:18px 0px 18px 30px;
  font-size: 16px;
  font-weight: 400;
  line-height:24px;
  color: var(--h02-tertiary-color);
  background-color:#ffffff0a;
  background-clip: padding-box;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  outline: none;
}
.contactinfo-form::placeholder
{
  color: var(--h02-tertiary-color);
}
.php-email-form .loading {
  display: none;
  background: var(--h02-secondary-color);
  color:var(--h02-tertiary-color);
  text-align: center;
  padding: 10px;
  margin:5px 0px;
}
.php-email-form .error-message{
  display: none;
  background: #df1529;
  color:var(--h02-tertiary-color);
  text-align: left;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
}
.php-email-form .sent-message {
  display: none;
  background: var(--h02-secondary-color);
  color:var(--h02-tertiary-color);
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  margin:5px 0px;
}
*, ::after, ::before {
  box-sizing: border-box;
}
.contact-info .php-email-form button[type=submit] {
  width: 100%;
  color: var(--h02-tertiary-color);
  background: var(--h02-secondary-color);
  border: 0;
  padding: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  transition: 0.4s;
  margin-top: 1px 0px;
  box-shadow: 0 4px 8px 0 rgb(214 176 128 / 25%), 0 6px 20px 0 rgb(214 176 128 / 25%);
}
.contact-info .php-email-form button[type=submit]:hover {
  color: var(--h02-primary-color);
  background: var(--h02-tertiary-color);
  box-shadow: none;
}
.contact-info .php-email-form button[type=submit] svg{
  margin-left: 5px;
  transition: 0.5s;
}
.contact-info .php-email-form button[type=submit]:hover svg{
  transition: 0.5s;
  transform: rotate(45deg);
}
.contact-info .php-email-form button[type=submit]:hover svg path{
  fill: var(--h02-primary-color) !important;
}

/*================================
  End of Contact Info section
=================================*/

/*================================
  # start of Footer section
=================================*/
.footer{
  background-color: var(--h02-primary-color);
  padding: 42px;
 
}
.footer .footer-about .logo h4
{
  font-size: 31px;
  font-weight: 800;
  font-style: italic;
  line-height: 47px;
  color: var(--h02-secondary-color);
}
.footer .footer-about h4 span{
  color: var(--h02-tertiary-color);
  font-size: 31px;
  font-weight: 800;
  line-height: 42px;
  font-style: italic;
}
.footer-links span{
  color: var(--h01-secondary-color);
  font-size: 22px;
  font-weight: 500;
}
.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display:block;
}
.footer .footer-links ul li {
  padding:0px;
  display: inline-block;
  align-items: center;
}
.footer .footer-links ul li a {
  color: var(--h02-tertiary-color);
  display: inline-block;
  line-height: 1;
  font-size: 16px;
  font-weight: 400;
  padding: 0px 11px;
}
.footer .footer-links ul a:hover {
  color: var(--h02-secondary-color);
}
.footer-newsletter .php-email-form .loading {
  display: none;
  background: var(--h02-secondary-color);
  color:var(--h02-tertiary-color);
  text-align: center;
  padding: 10px;
}
.footer-newsletter .php-email-form .error-message{
  display: none;
  background: #df1529;
  color:var(--h02-tertiary-color);
  text-align: left;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  margin: 5px 0px;
}
.footer-newsletter .php-email-form .sent-message {
  display: none;
  background: var(--h02-secondary-color);
  color:var(--h02-tertiary-color);
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
}
.footer .footer-newsletter .newsletter-form {
  position: relative;
  border: none;
  display: flex;
  background-color: transparent;
  transition: 0.3s;
}
.footer .footer-newsletter .newsletter-form input[type=email] {
  border:none;
  font-size: 16px;
  font-weight: 500;
  padding: 15px;
  width: 100%;
  background-color:var(--h02-tertiary-color);
  color: var(--h02-text-secondary-color);
  outline: none;
}
.footer .footer-newsletter .newsletter-form .submit {
  position: absolute;
  border: 0;
  right: 1%;
  top: 7%;
  padding: 11px 17px;
  background: var(--h02-secondary-color);
  color: var(--h02-tertiary-color);
}
.footer-border
{
  height: 1px;
  background-color: #7777773d;
}
.footer .copyright p{
 color: var(--h02-tertiary-color);
 font-size: 16px;
 font-weight: 400;
 line-height: 24px;
 margin-bottom: 0px;
}
/*================================
   End of Footer section
=================================*/