/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Infine - Life and Business Coach HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Potential Css
08. Our Pricing Css
09. Our Expertise Css
10. Intro Video Css
11. How We Work Css
12. Company Growth Css
13. Our FAQs Css
14. Our Testimonial css
15. Our Blog Css
16. Footer css
17. About Us Page css
18. Services Page css
19. Service Single css
20. Blog Archive css
21. Blog Single css
22. Team Page css
23. Team Single css
24. Pricing Page css
25. Testimonial Page css
26. Image Gallery css
27. Video Gallery css
28. FAQs Page css
29. Contact Us Page css
30. Book Appointment Page css
31. 404 Page css
32. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/	

:root{
	--primary-color			: #3d0026;
	--secondary-color		: #F2F1ED;
	--text-color			: #8F8F8F;
	--accent-color			: #edb473;
	--dark-color		    : #807554;
	--white-color			: #FFFFFF;
	--divider-color			: #DFE1DE;
	--dark-divider-color	: #FFFFFF33;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "PoppinsExtraLight", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body{
	font-family: var(--default-font);
	font-size: 16px;

	line-height: 1.6em;
	background: var(--secondary-color);
	color: var(--text-color);
}

p{
	line-height: 1.7em;
	margin-bottom: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
  background-image: linear-gradient(to right, var(--dark-color) 0%, var(--accent-color) 50%, var(--dark-color) 100%);
  background-size: 200% auto;
  border-radius: 100px;
  color: var(--white-color);
  font-size: 16px;
  font-weight: 700;
	line-height: 1em;
  text-transform: capitalize;
  border: none;
  padding: 17px 17px 17px 17px;
  transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 0;
}

.btn-default:hover{
	background-position: right center;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 0;
	width: 24px;
	height: 24px;
	background: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transform: translate(-20px, 50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	transform: translate(-20px, 50%) rotate(45deg);
}

.btn-default.btn-highlighted{
	background: var(--white-color);
    color: var(--primary-color);
	transition: all 0.5s ease-in-out;
}

.btn-default.btn-highlighted:hover{
	background: transparent;
	color: var(--white-color);
}

.btn-default.btn-highlighted::before{
	background: url('../images/dark-arrow.svg');
}

.btn-default.btn-highlighted::after{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 0;
    height: 106%;
    background: linear-gradient(263deg, var(--dark-color) 0.16%, var(--accent-color) 99.84%);
    border-radius: 100px;
    transition: 0.4s ease-in-out;
    z-index: -1;
}

.btn-default.btn-highlighted:hover:after{
    width: 100%;
    left: 0;
    right: auto;
}

.cb-cursor:before{
	background:linear-gradient(263deg, var(--accent-color) 0.16%, var(--dark-color) 99.84%);
}


.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.bg-section{
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	border-radius: 30px;
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0;
}

.section-btn{
	text-align: end;
}

.section-title-content p{
	margin: 0;
} 

.section-title{
	margin-bottom: 40px;
}

.section-title h3{
	display: inline-block;
	font-size: 14px;
    font-weight: 600;
	line-height: 1.4em;
	letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
	background-position: left center;
	background-size: auto;
	padding-left: 24px;
    margin-bottom: 20px;
}

.section-title h1{
	font-size: 70px;
	font-weight: 300;
	line-height: 1.1em;
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-title h2{
	font-size: 38px;
	font-weight: 300;
	line-height: 1.1em;
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-title h1 span,
.section-title h2 span{
	font-weight: 700;
	background-image: linear-gradient(267.43deg, var(--accent-color) 4.95%, var(--dark-color) 97.92%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title p{
	margin-top: 30px;
	margin-bottom: 0;
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-size: 14px;
	font-weight: 500;
}


/************************************/
/***        04. Hero css	      ***/
/************************************/


.hero {
  padding: 4rem 0;
  background-color:var(--primary-color); /* or use your background image/parallax setup */
  color: white;
}

.hero-content {
  padding: 2rem;
}

.section-title h1 span {
  color: #0f5f4c; /* optional highlight */
}

.hero-btn a {
  margin-right: 1rem;
}

.hero-description {
  padding: 2rem;
  font-size: 1.1rem;
  color: #fff;
}

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

@media (max-width: 991.98px) {
  .hero-row {
    flex-direction: column;
  }
}
.hero{
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 60px 30px 60px;
	overflow: hidden;
}

.hero::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background: 
		url('../img/bg2.jpg'),
		linear-gradient(180deg, rgb(45, 4, 31) 65.37%, var(--primary-color) 100.18%),
		linear-gradient(270deg, rgb(26, 4, 45) 59.75%, var(--primary-color) 100%);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	width: 60%;
	height: 50%;
	padding-top: 290px;
	z-index: 1;
	
}




.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}



.hero-section{
	position: relative;
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
	z-index: 2;
}


.hero-slide .hero-section .hero-content .section-title p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
}

.hero-content .section-title h3,
.hero-content .section-title h1{
	color: var(--white-color);
}



.export-coaching-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 60px;
}

.export-coaching-step{
	position: relative;
	width: 20%;
	border-top: 2px solid var(--dark-divider-color);
	padding-top: 30px;
	padding-right: 100px;
	transition: all 0.5s ease-in-out;
}

.export-coaching-step::before{
	content: '';
    display: block;
    position: absolute;
    top: -2px;
	left: auto;
	right: 0;
    background: linear-gradient(to left, var(--accent-color) 0.16%, var(--dark-color) 99.84%);
	width: 0;
	height: 2px;
	transition: all 0.4s ease-in-out;
}

.export-coaching-step:hover:before{
	width: 100%;
	right: auto;
	left: 0;
}

.export-coaching-step .icon-box{
	margin-bottom: 20px;
}

.export-coaching-step .icon-box img{
	max-width: 30px;
}

.export-coaching-step-content p{
	color: var(--white-color);
	margin: 0;
}

/************************************/
/***     07. Our Potential Css    ***/
/************************************/

.our-potential{
	padding: 100px 0;
}

.our-potential-content{
	height: 100%;
}

.our-potential-counter{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.potential-counter-item{
	width: calc(50% - 15px);
	display: flex;
	align-items: center;
}

.potential-counter-item .counter-circle{
	border: 2px solid transparent;
	background: linear-gradient(263deg,var(--accent-color) 0.16%, var(--dark-color) 99.84%) border-box;
	border-radius: 50%;
	margin-right: 30px;
}

.potential-counter-item .counter-circle h2{
	font-size: 30px;
	background-color: var(--white-color);
	border: 10px solid var(--secondary-color);
	border-radius: 50%;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.potential-counter-content{
	width: calc(100% - 154px);
}

.potential-counter-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.potential-body-content{
	margin-bottom: 20px;
}

.potential-body-content h3{
	font-size: 20px;
	text-transform: capitalize;
	font-weight: 600;
	margin-bottom: 20px;
}

.potential-body-content p:last-child{
	margin-bottom: 0;
}

.potential-body-list ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.potential-body-list ul li{
	position: relative;
	text-transform: capitalize;
	padding-left: 30px;
    margin-bottom: 10px;
}

.potential-body-list ul li:last-child{
	margin-bottom: 0;
}

.potential-body-list ul li::before{
	content: '\f00c';
    font-family: 'FontAwesome';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    background-image: linear-gradient(267.43deg, var(--accent-color) 4.95%, var(--dark-color) 97.92%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.our-potential-img{
	border-radius: 20px;
	margin-left: 30px;
	height: 100%;
}

.our-potential-img figure{
	display: block;
	height: 100%;
}

.our-potential-img img{
	width: 100%;
	height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.22;
	border-radius: 20px;
}

/************************************/
/***     09. Our Expertise Css    ***/
/************************************/

.our-expertise{
	padding: 100px 0;
}

.expertise-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	text-align: center;
}

.expertise-item{
	width: auto;
	display: inline-flex;
	align-items: center;
	background: var(--white-color);
	border-radius: 100px;
}

.expertise-item:first-child{
	margin: 0 15px;
}

.expertise-image figure{
	border-radius: 50%;
	overflow: hidden;
}

.expertise-image img{
	max-width: 75px;
	border-radius: 50%;
}

.expertise-content{
	padding: 0 30px 0 15px;
}

.expertise-content p{
	font-weight: 500;
	text-transform: capitalize;
	color: var(--primary-color);
	margin: 0;
}