/* ----------------------------------------------------------------------------------------
* Project       : Estaton - Smart Estate & Community Management Platform
* File          : CSS File
* Version       : 1.0
*
* Built on the "Skyvilla - Real Estate & Construction Group" HTML template by Awaiken.
* The palette is re-pointed in :root (01. Global Variables) and every Estaton-specific
* rule lives in one block at the bottom of this file (36. Estaton brand overrides) so the
* template's own sections stay recognisable against the vendor's original.
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Who We Are css
08. Intro Video css
09. Our Commitment css
10. Our Projects css
11. Our Fact css
12. CTA Box css
13. Our FAQs css
14. Our Testimonials 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. Projects Page css
23. Project Single css
24. Team Page css
25. Team Single css
26. Pricing Page css
27. Testimonials Page css
28. Image Gallery css
29. Video Gallery css
30. FAQ's Page css
31. Contact Us Page css
32.	404 Error Page css
33. Responsive css
34. Home - Version 2 css
35. Home - Version 3 css 
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color				: #1B1C45;
	--secondary-color			: #FFFFFF;
	--bg-color					: #F4F6FC;
	--text-color				: #5C5D75;
	--accent-color				: #3F4096;
	--accent-secondary-color	: #ED2790;
	--white-color				: #FFFFFF;
	--divider-color				: #1B1C451A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: 'General Sans';

	/* Estaton brand tokens - see assets/css/custom.css bottom for the override block */
	--brand-magenta				: #ED2790;
	--brand-magenta-dark		: #C71A76;
	--brand-magenta-light		: #FCE3F1;
	--brand-indigo				: #3F4096;
	--brand-indigo-deep			: #2E2E6D;
	--brand-ink					: #1B1C45;
}

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

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

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--accent-secondary-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-secondary-color);
}

::selection{
	color: var(--primary-color);
	background-color: var(--accent-secondary-color);
	filter: invert(1);
}

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

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

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;
}

.container{
	max-width: 1500px;
}

.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: var(--accent-color);
	border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
	line-height: 1em;
    text-transform: capitalize;
    color: var(--white-color);
    padding: 17px 58px 17px 24px;
    border: none;
    overflow: hidden;
	outline: none;
	transition: all 0.5s ease-in-out;
    z-index: 0;
}

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

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

.btn-default:hover:before{
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(0);
} 

.btn-default::after{ 
   	content: '';
    position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    width: 0;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

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

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

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

.readmore-btn{
	position: relative;
	display: inline-block;
	color: var(--primary-color);
	font-weight: 600;
	line-height: normal;
	text-transform: capitalize;
	padding-right: 30px;
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
	background-image: url('../images/arrow-primary.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 24px;
	height: 24px;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.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: 1880px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin: 0 auto;
}

.bg-section .container-fluid{
	padding: 0;
}

.dark-section{
	background-color: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

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

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

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

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

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

.section-title-content p{
	margin-bottom: 20px;
}

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

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

.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
	background-color: var(--secondary-color);
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
    margin-bottom: 15px;
}

.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-secondary-color);
	border-radius: 50%;
    width: 6px;
    height: 6px;
}

.section-title h1{
	font-size: 60px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 50px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h1 span,
.section-title h2 span{
	font-style: italic;
}

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

.bg-section .section-title .section-sub-title{
	background: var(--bg-color);
}

.dark-section .section-title .section-sub-title{
	background: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

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

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

/************************************/
/**** 	    03. Header css		 ****/
/************************************/

header.main-header{
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	max-width: 1500px;
	top: 0;
	background: var(--white-color);
	border-radius: 100px;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    transform: translateY(0);
	background: var(--white-color);
	border-bottom: 1px solid var(--divider-color);
	border-radius: 0 0 20px 20px;
}

.navbar{
	padding: 25px 10px;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 10px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2em;
	padding: 12px 10px !important;
	color: var(--text-color);
	background: transparent;
	border-radius: 0px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scale(1,0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--accent-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--accent-secondary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	position: relative;
	top: 0;
}

.slicknav_btn{
	background: var(--accent-secondary-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--primary-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--primary-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 7px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-secondary-color);
}

.slicknav_menu ul ul li a{
    padding: 7px 20px 7px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--accent-secondary-color);
}

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

.hero{
    position: relative;
    background-image: url('../images/hero-bg-image.jpg');
    align-content: end;
    min-height: 100vh;
    padding: 220px 0 80px;
    margin-top: 20px;
    overflow: hidden;
}

.hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 50%, var(--primary-color) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero .container{
    position: relative;
    z-index: 2;
}

.hero-content-box .section-title{
    margin-bottom: 0;
}

.hero-counter-box{
    margin-left: 3.125vw;
}

.hero-counter-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 4.479vw;
}

.hero-counter-item{
    position: relative;
    width: calc(33.33% - 2.986vw);
}

.hero-counter-item::before{
    content: '';
    position: absolute;
    top: 0;
    right: -2.24vw;
    transform: rotate(10deg);
    background-color: var(--dark-divider-color);
    height: 100%;
    width: 1px;
}

.hero-counter-item:last-child:before{
    display: none;
}

.hero-counter-item h2{
    font-size: 50px;
    font-weight: 700;
    color: var(--white-color);
}

.hero-counter-item p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.hero-counter-footer{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 50px;
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.hero-rating-box-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.hero-rating-box-header h3{
    font-size: 20px;
    color: var(--white-color);
}

.hero-rating-box-header p{
    margin-bottom: 0;
}

.hero-rating-box-header p i{
    color: var(--accent-secondary-color);
}

.hero-rating-box-content{
    margin-top: 5px;
}

.hero-rating-box-content p{
    color: var(--white-color);
    margin-bottom: 0;
}

/************************************/
/*** 	   05. About Us css	      ***/
/************************************/

.about-us{
    padding: 100px 0;
}

.about-us-image-box{
    position: relative;
    height: 100%;
}

.about-us-image{
    height: 100%;
}

.about-us-image figure{
    height: 100%;
    display: block;
    border-radius: 20px;
}

.about-us-image img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 0.782;
    object-fit: cover;
    border-radius: 20px;
}

.about-us-circle{
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
}

.about-us-circle a{
    display: inline-block;
    border-radius: 50%;
}

.about-us-circle img{
    width: 100%;
    max-width: 140px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

.about-us-circle img:hover{
    animation-play-state: paused;
}

.about-us-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.about-us-item{
    width: calc(50% - 15px);
    min-height: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white-color);
    border-radius: 20px;
    gap: 30px;
    padding: 10px;
}

.about-us-item.box-2 .about-us-item-content{
	padding: 0 30px 30px;
}

.about-us-item.box-2{
    flex-direction: column-reverse;
}

.about-us-item-content{
    padding: 30px 30px 0;
}

.about-us-item-content h3{
    font-size: 20px;
}

.about-us-item-content p{
    margin: 10px 0 0;
}

.about-us-item.box-1 .about-us-item-image{
    margin-bottom: -10px;
}

.about-us-item-image figure{
    display: block;
    border-radius: 20px;
}

.about-us-item-image img{
    width: 100%;
    aspect-ratio: 1 / 0.733;
    object-fit: cover;
    object-position: top center;
    border-radius: 20px;
}

.about-us-item.box-1 .about-us-item-image figure,
.about-us-item.box-1 .about-us-item-image img{
    border-radius: 20px 20px 0 0;
}

.about-counter-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 50px;
    margin-top: 60px;
}

.about-counter-item{
    width: calc(33.33% - 33.33px);
}

.about-counter-item h2{
    font-size: 50px;
}

.about-counter-item p{
    margin: 5px 0 0;
}

/************************************/
/*** 	 06. Our Services css     ***/
/************************************/

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

.service-item{
    position: relative;
    border-radius: 20px;
    min-height: 430px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-item:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-color);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.service-item.active::before, 
.service-item:hover::before{
    transform: translate(100%, -100%);
}

.service-item-image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-image,
.service-item:hover .service-item-image{
	opacity: 1;
}

.service-item-image::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;	
	background-color: var(--primary-color);
	opacity: 50%;
}

.service-item-image figure{
    display: block;
	width: 100%;
    height: 100%;
}

.service-item-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-item-body{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: 100%;
    z-index: 2;
}

.service-item-body .icon-box{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.service-item-body .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item.active .service-item-body .icon-box::before,
.service-item:hover .service-item-body .icon-box::before{
    transform: scale(1);
}

.service-item-body .icon-box img{
    position: relative;
    width: 100%;
    max-width: 30px;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-body .icon-box img,
.service-item:hover .service-item-body .icon-box img{
    filter: brightness(1) invert(1);
}

.service-item-content h2{
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.service-item-content h2 a{
    color: inherit;
}

.service-item-content p{
    margin: 10px 0 0;
    transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-content h2,
.service-item:hover .service-item-content h2,
.service-item.active .service-item-content p,
.service-item:hover .service-item-content p,
.service-item.active .service-item-btn .readmore-btn,
.service-item:hover .service-item-btn .readmore-btn{
    color: var(--white-color);
}

.service-item-btn{
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.service-item.active .service-item-btn,
.service-item:hover .service-item-btn{
    border-color: var(--dark-divider-color);
}

.service-item-btn .readmore-btn{
    padding-right: 35px;
    transition: all 0.4s ease-in-out;
}

.service-item-btn .readmore-btn::before{
    height: 26px;
    width: 26px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    background-size: 16px auto;
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	background: var(--accent-color);
	color: var(--primary-color);
	line-height: 1em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-right: 10px;
}

.section-footer-text p a{
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--accent-secondary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text ul li:last-child{
	margin: 0;
}

.section-footer-text ul li i{
	color: var(--accent-secondary-color);
}

.dark-section .section-footer-text.section-satisfy-img .satisfy-client-image{
    border-color: var(--primary-color);
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

.dark-section .section-footer-text p a{
    color: var(--accent-secondary-color);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

.section-footer-text.section-footer-contact{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
}

.section-footer-text.section-footer-contact span{
	width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
	align-items: center;
    margin-right: 10px;
}

.section-footer-text.section-footer-contact span img{
	width: 100%;
	max-width: 16px;
}

.satisfy-client-images{
	display: inline-flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
	display: inline-block;
	border: 1px solid var(--white-color);
	border-radius: 50%;
	margin-left: -14px;
	overflow: hidden;
	z-index: 1;
}

.satisfy-client-image:first-child{
	margin-left: 0;
}

.satisfy-client-image figure{
	display: block;
}

.satisfy-client-image img{
	width: 100%;
	max-width: 50px;
}

.satisfy-client-image.add-more{
	width: 52px;
	height: 52px;
	background: var(--accent-secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

.satisfy-client-image.add-more h3{
	font-size: 16px;
}

.satisfy-client-image.add-more i{
	color: var(--primary-color);
	font-size: 20px;
}

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
    margin-left: -10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	max-width: 18px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

/************************************/
/*** 	  07. Who We Are css      ***/
/************************************/

.who-we-are{
	padding: 100px 0;
}

.who-we-nav{
	margin-bottom: 40px;
}

.who-we-nav .nav-tabs{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
    text-align: center;
	gap: 15px 0;
	border-bottom: 4px solid var(--divider-color);
}

.who-we-nav ul li{
	width: 33.33%;
}

.who-we-nav ul li .nav-link{
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	gap: 15px;
	border: none;
	font-size: 16px;
	font-weight: 600;
    line-height: 1.2em;
	color: var(--primary-color);
	background: transparent;
	border: none;
	border-radius: 0px;
	padding: 0 5px 30px;
	transition: all 0.4s ease-in-out;
}

.who-we-nav ul li .nav-link.active,
.who-we-nav ul li .nav-link:hover{
	color: var(--primary-color);
	background: transparent;
}

.who-we-nav ul li .nav-link::before{
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: auto;
    right: 0;
    background: var(--accent-secondary-color);
    width: 0;
    height: 4px;
    transition: all 0.4s ease-in-out;
}

.who-we-nav ul li .nav-link.active:before,
.who-we-nav ul li .nav-link:hover:before{
	width: 100%;
    left: 0;
}

.who-we-nav ul li .nav-link img{
	width: 100%;
	max-width: 30px;
	transition: all 0.3s ease-in-out;
}

.who-we-tab-header-content h3{
	font-size: 20px;
}

.who-we-tab-header-content p{
	margin: 20px 0 0;
}

.who-we-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.who-we-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.who-we-item .icon-box img{
	width: 100%;
	max-width: 34px;
}

.who-we-item-content{
	width: calc(100% - 49px);
}

.who-we-item-content h3{
	font-size: 20px;
}

.who-we-footer{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}


.about-us-contact-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-box .icon-box{
    position: relative;
    background: var(--accent-secondary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.about-us-contact-box .icon-box::before{
    content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-us-contact-box:hover .icon-box::before{
    transform: scale(1);
}

.about-us-contact-box .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-contact-box:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-conatct-content p{
	margin: 0 0 5px;
}

.about-us-conatct-content h3{
	font-size: 20px;
}

.about-us-conatct-content h3 a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-us-conatct-content h3 a:hover{
	color: var(--accent-secondary-color);
}

.who-we-image-box{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 20px 30px;
	margin-left: 20px;
}

.who-we-image-box-1{
	width: calc(55% - 15px);
}

.who-we-image-box-2{
	width: calc(45% - 15px);
}

.who-we-image figure{
	display: block;
	border-radius: 20px;
}

.who-we-image img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.who-we-image-box-1 .who-we-image img{
	aspect-ratio: 1 / 1.622;
}

.who-we-image-box-2 .who-we-image img{
	aspect-ratio: 1 / 1.27;
}

.who-we-cta-box{
	background-color: var(--white-color);
	border-radius: 20px;
	margin-bottom: 30px;
	padding: 30px;
}

.who-we-cta-box .satisfy-client-image img{
	max-width: 34px;
}

.who-we-cta-box .satisfy-client-image.add-more{
	height: 36px;
	width: 36px;
}

.who-we-cta-box .satisfy-client-image.add-more i{
	font-size: 16px;
}

.who-we-cta-rating{
	margin-top: 20px;
}

.who-we-cta-rating span i{
	color: var(--accent-secondary-color);
}

.who-we-cta-content{
	margin-top: 10px;
}

.who-we-cta-content p{
	margin: 0;
}

/************************************/
/*** 	  08. Intro Video css     ***/
/************************************/

.intro-video{
    position: relative;
    background-image: url('../images/banner2.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 45.833vw;
    align-content: end;
    padding: 100px 0;
    overflow: hidden;
}

.intro-video::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, var(--primary-color));
    opacity: 60%;
    z-index: 1;
}

.intro-video .container{
    position: relative;
    z-index: 2;
}

.intro-video-content .section-title{
    margin-bottom: 0;
}

.watch-video-circle{
    text-align: end;
}

.watch-video-circle a{
    display: inline-block;
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
	cursor: none;
    border-radius: 50%;
}

.watch-video-circle img{
    width: 100%;
    max-width: 160px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

.watch-video-circle img:hover{
    animation-play-state: paused;
}

/************************************/
/***    09. Our Commitment css    ***/
/************************************/

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

.our-commitment-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: 100%;
    margin-right: 20px;
}

.commitment-client-box-content{
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.commitment-client-box-content p{
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.commitment-item{
    position: relative;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    margin-bottom: 40px;
    padding: 40px;
    transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.commitment-item:last-child{
    margin-bottom: 0;
}

.commitment-item:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
	left: 0;
    background: var(--white-color);
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
}

.commitment-item:hover:before{
	top: auto;
	bottom: 0;
	height: 100%;
}

.commitment-item-header{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
	z-index: 1;
}

.commitment-item-header .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	overflow: hidden;
	transition: all 0.6s ease-in-out;
}

.commitment-item:hover .commitment-item-header .icon-box{
	background: transparent;
}

.commitment-item-header .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.commitment-item:hover .commitment-item-header .icon-box::before{
    transform: scale(1);
}

.commitment-item-header .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
	transition: all 0.4s ease-in-out;
}

.commitment-item:hover .commitment-item-header .icon-box img{
   filter: brightness(1) invert(1);
}

.commitment-item-title{
	position: relative;
	width: calc(100% - 75px);
	z-index: 1;
}

.commitment-item-title h3{
	font-size: 20px;
	line-height: 1.3em;
}

.commitment-item-content{
	position: relative;
    margin-top: 30px;
	z-index: 1;
}

.commitment-item-content p{
    margin: 0;
}

/************************************/
/*** 	  10. Our Projects css    ***/
/************************************/

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

.project-item{
	position: relative;
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.project-item-image figure{
	position: relative;
	display: block;
	border-radius: 20px;
}

.project-item-image a{
	cursor: none;
	display: block;
}

.project-item-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 20px;
	background: linear-gradient(180deg, transparent 50%, rgba(4, 6, 24, 0.80) 92.5%);
	border-radius: 20px;
	z-index: 1;
}

.project-item-image img{
	width: 100%;
	aspect-ratio: 1 / 1.305;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.6s ease-in-out;
}

.project-item:hover .project-item-image img{
	transform: scale(1.06);
}

.project-item-content{
	position: absolute;
	right: 40px;
	bottom: 40px;
	left: 40px;
	z-index: 2;
}

.project-item-content ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.project-item-content ul li{
	position: relative;
	color: var(--white-color);
	line-height: 1.5em;
	padding-left: 15px;
}

.project-item-content ul li:before{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	width: 6px;
	height: 6px;
}

.project-item-content ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.project-item-content ul li a:hover{
	color: var(--accent-secondary-color);
}

.project-item-content h2{
	color: var(--white-color);
	font-size: 20px;
	line-height: 1.4em;
}

.project-item-content h2 a{
	color: inherit;
}

/************************************/
/*** 	    11. Our Fact css      ***/
/************************************/

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

.our-fact-image-box{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	background: url('../images/our-fact-image-box-bg.png') no-repeat;
	background-position: bottom 30px left 57%;
	background-size: auto;
	margin-right: 20px;
}

.our-fact-image-box-1{
	position: relative;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 10px;
	width: 55%;
	z-index: 2;
}

.our-fact-image-box-1 .our-fact-image figure{
	display: block;
	border-radius: 14px;
}

.our-fact-image-box-1 .our-fact-image img{
	width: 100%;
	aspect-ratio: 1 / 0.765;
	object-fit: cover;
	border-radius: 14px;
}

.our-fact-image-content{
	padding: 20px 10px 10px;
}

.our-fact-image-content p{
	color: var(--primary-color);
	font-weight: 500;
	margin: 0;
}

.our-fact-image-box-2{
	padding-bottom: 90px;
	width: 45%;
}

.our-fact-image-box-2 .our-fact-image{
	margin-left: -270px;
}

.our-fact-image-box-2 .our-fact-image figure{
	display: block;
	border-radius: 20px;
}

.our-fact-image-box-2 .our-fact-image img{
	width: 100%;
	aspect-ratio: 1 / 1.071;
	object-fit: cover;
	border-radius: 20px;
}

.fact-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.fact-item{
	position: relative;
	width: calc(50% - 15px);
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	min-height: 320px;
	overflow: hidden;
}

.fact-item:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
	left: 0;
    background: var(--white-color);
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
}

.fact-item:hover:before{
	top: auto;
	bottom: 0;
	height: 100%;
}

.fact-item-title{
	position: relative;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	z-index: 1;
}

.fact-item-title ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.fact-item-title ul li{
	line-height: 1.5em;
}

.fact-item-title ul li::marker{
	color: var(--accent-secondary-color);
}

.fact-item-counter-content{
	position: relative;
	z-index: 1;
}

.fact-item-counter-content h2{
	font-size: 50px;
}

.fact-item-counter-content p{
	margin: 10px 0 0;
}

/************************************/
/***    	12. CTA Box css       ***/
/************************************/

.cta-box{
	position: relative;
	background-image: url('../images/banner4.jpg');
	padding: 100px 0;
	overflow: hidden;
}

.cta-box:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(270deg, transparent 0%, rgba(4, 6, 24, 0.70) 100%);
	z-index: 1;
}

.cta-box .container{
	position: relative;
	z-index: 2;
}

.cta-box-content{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.cta-item-box-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.cta-box-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.cta-box-item:last-child{
    width: 100%;
    border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
}

.cta-box-item .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cta-box-item .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.cta-box-item:hover .icon-box::before{
    transform: scale(1);
}

.cta-box-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.cta-box-item-content{
	width: calc(100% - 65px);
}

.cta-box-item-content p{
	color: var(--white-color);
	margin-bottom: 5px;
}

.cta-box-item-content h3{
	color: var(--white-color);
	font-size: 20px;
}

.cta-box-item-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.cta-box-item-content h3 a:hover{
	color: var(--accent-secondary-color);
}

.cta-form-box{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 60px;
}

.cta-form-box .section-title .section-sub-title{
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.cta-form-box .section-title h2{
	color: var(--primary-color);
}

.cta-contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--primary-color);
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 17px 20px;
	box-shadow: none;
	outline: none;
}

.cta-contact-form .form-control::placeholder{
	color: var(--text-color);
}

/************************************/
/*** 	   13. Our Faqs css       ***/
/************************************/

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

.faqs-content{
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

.faq-client-box{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.faq-client-box-content{
    max-width: 67%;
}

.faq-client-box-content p{
    margin-bottom: 0;
}

.faq-accordion .accordion-item{
    border: 1px solid var(--divider-color);
    border-radius: 10px;
    margin-bottom: 25px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.faq-accordion .accordion-item .accordion-button.collapsed{
    background: transparent;
    color: var(--primary-color);
}

.faq-accordion .accordion-header .accordion-button{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.333em;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 20px 50px 20px 24px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-body{
    background: var(--primary-color);
    border-top: 1px solid var(--dark-divider-color);
    padding: 20px 24px;
}

.faq-accordion .accordion-item .accordion-body p{
    color: var(--white-color);
    margin-bottom: 0;
}

.accordion-item .accordion-body ul{
    list-style: disc;
    margin: 10px 0 0;
    padding-left: 20px;
}

.accordion-item .accordion-body ul li{
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 5px;
}

.accordion-item .accordion-body ul li:last-child{
    margin-bottom: 0;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    font-size: 20px;
    font-weight: 400;
    transform: translateY(-50%);
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
    color: var(--white-color);
}

/************************************/
/***   14. Our Testimonials css   ***/
/************************************/

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

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    min-height: 430px;
    background-color: var(--bg-color);
    border-radius: 20px;
    padding: 40px;
}

.testimonial-item-header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.testimonial-item-rating i{
    color: var(--accent-secondary-color);
    font-size: 18px;
}

.testimonial-item-quote img{
    width: 100%;
    max-width: 40px;
}

.testimonial-item-content p{
    margin-bottom: 0;
    font-weight: 600;
}

.testimonial-item-author{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.testimonial-author-image figure{
    display: block;
    border-radius: 50%;
}

.testimonial-author-image img{
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.testimonial-author-content{
    width: calc(100% - 65px);
}

.testimonial-author-content h3{
    font-size: 20px;
}

.testimonial-author-content p{
    margin: 5px 0 0;
}

.company-supports-slider-box{
    margin-top: 80px;
}

.company-supports-content{
    display: flex;
    align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content hr{
    height: 1px;
    width: 36%;
    color: var(--divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content p{
    margin-bottom: 0;
}

.company-supports-slider{
	padding: 0 4.167vw 0;
} 

.company-supports-logo{
	text-align: center;
}

.company-supports-logo img{
	width: 100%;
	max-width: 170px;
}

/************************************/
/*** 	    15. Our Blog css      ***/
/************************************/

.our-blog{
	padding: 100px 0 70px;
}

.post-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.post-featured-image{
	margin-bottom: 20px;
}

.post-featured-image a,
.post-featured-image figure{
	display: block;
	border-radius: 20px;
    cursor: none;
    overflow: hidden;
}

.post-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 0.724;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.06);
}

.post-item-content{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.post-item-content h2{
    font-size: 20px;
	line-height: 1.4em;
}

.post-item-content h2 a{
    color: inherit;
}

/************************************/
/*** 	    16. Footer css        ***/
/************************************/

.main-footer{
    padding: 100px 0 0;
    margin-bottom: 20px;
}

.footer-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 60px;
    margin-bottom: 60px;
}

.footer-header .section-title{
    margin-bottom: 0;
    max-width: 860px;
}

.footer-social-links h3{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 20px;
}

.footer-social-links ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-social-links ul li a{
    width: 36px;
    height: 36px;
    border: 1px solid var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a:hover{
    background-color: var(--accent-secondary-color);
}

.footer-social-links ul li a i{
    font-size: 18px;
    color: var(--accent-secondary-color);
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a:hover i{
    color: var(--primary-color);
}

.about-footer{
    margin-right: 2.604vw;
}

.footer-logo img{
    width: 100%;
    max-width: 177px;
}

.about-footer-content{
    margin-top: 30px;
}

.about-footer-content p{
    color: var(--white-color);
    margin-bottom: 0;
}

.footer-links-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.footer-links{
    max-width: 35%;
}

.footer-links h3{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li{
    text-transform: capitalize;
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 15px;
}

.footer-links ul li:last-child{
    margin-bottom: 0;
}

.footer-links ul li a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

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

.footer-links p{
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-newsletter-form .form-group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    border: 1px solid var(--dark-divider-color);
    border-radius: 100px;
    padding: 4px;
}

.footer-newsletter-form .form-group .form-control{
    width: calc(100% - 50px);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white-color);
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 6px 14px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-secondary-color);
    border: none;
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
    background-color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn i{
    font-size: 24px;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.footer-copyright{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding: 60px 0;
    text-align: center;
}

.footer-copyright-text p{
    color: var(--white-color);
    margin-bottom: 0;
}

/************************************/
/***    17. About Us Page css     ***/
/************************************/

.page-header{
	position: relative;
	background-image: url('../images/page-header-bg.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 290px 0 150px;
	margin-top: 20px;
	overflow: hidden;
}

.page-header:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--primary-color);
	opacity: 50%;
	z-index: 1;
}

.page-header-box{
	position: relative;
    text-align: center;
	z-index: 2;
}

.page-header-box h1{
	display: inline-block;
	font-size: 60px;
    font-weight: 500;
	color: var(--white-color);
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box h1 span{
    font-style: italic;
}

.page-header-box ol{
    justify-content: center;
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
    text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

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

.our-approach-images{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 35px;
}

.our-approach-images::before{
	content: '';
	position: absolute;
	bottom: 70px;
	left: 20px;
	border: 4px solid var(--accent-secondary-color);
	width: 394px;
	height: 410px;
	z-index: 0;
}

.our-approach-image-box-1{
    position: relative;
    width: 56%;
    z-index: 2;
}

.our-approach-image figure{
    display: block;
	border-radius: 20px;
}

.our-approach-image figure img{
    width: 100%;
	aspect-ratio: 1 / 0.89;
	object-fit: cover;
	border-radius: 20px;
}

.our-approach-image-box-2{
	position: relative;
    width: 44%;
    padding-bottom: 135px;
	z-index: 1;
}

.our-approach-image-box-2 .our-approach-image figure{
    margin-left: -285px; 
}

.our-approach-image-box-2 .our-approach-image figure img{
    aspect-ratio: 1 / 0.82;
}

.approach-item-box{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.approach-item{
	width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.approach-item .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.approach-item:hover .icon-box{
    background: var(--accent-secondary-color);
}

.approach-item .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.approach-item:hover .icon-box img{
    filter: brightness(1) invert(1);
}

.approach-item-content{
    width: calc(100% - 65px);
}

.approach-item-content h3{
    font-size: 20px;
}

.approach-item-content p{
    margin: 10px 0 0;
}

.approach-item:last-child{
	width: 100%;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

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

.our-history-content{
    position: sticky;
    top: 30px;
}

.explore-project-circle a{
	display: inline-block;
	border-radius: 50%;
}

.explore-project-circle img{
	width: 100%;
	max-width: 140px;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

.explore-project-circle img:hover{
	animation-play-state: paused;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

.history-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.history-item{
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--white-color);
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
}

.history-item-header h2{
    font-size: 50px;
}

.history-item-content{
    border-top: 1px solid var(--divider-color);
    padding-top: 20px;
    margin-top: 20px;
}

.history-item-content h3{
    font-size: 20px;
}

.history-item-content p{
    margin: 10px 0 0;
}

.history-item-image{
    align-content: end;
}

.history-item-image figure{
	width: 100%;
    max-width: 370px;
    border-radius: 0 20px 0 0;
    margin: 0 auto -200px -50px;
}

.history-item-image img{
    width: 100%;
    border-radius: 0 20px 0 0;
    aspect-ratio: 1 / 1.24;
    object-fit: cover;
}

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

.team-item{
    background: var(--white-color);
    border-radius: 20px;
    padding: 30px 30px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	gap: 10px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    transition: all 0.6s ease-in-out;
}

.team-item:hover{
    background-color: var(--primary-color);
}

.team-item-content{
	max-width: 80%;
}

.team-item-content h2{
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.team-item-content h2 a{
    color: inherit;
}

.team-item-content p{
    margin: 10px 0 0;
    transition: all 0.4s ease-in-out;
}

.team-item:hover .team-item-content h2,
.team-item:hover .team-item-content p{
    color: var(--white-color);
}

.team-item-image{
    text-align: center;
}

.team-item-image figure{
	display: block;
	border-radius: 20px 20px 0 0;
}

.team-item-image img{
	width: 100%;
	max-width: 245px;
    aspect-ratio: 1 / 1.54;
    object-fit: cover;
	border-radius: 20px 20px 0 0;
}

.team-social-list{
    position: absolute;
    right: 30px;
    top: 30px;
    transform: translateY(30px);
	opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-social-list{
    transform: translateY(0);
	opacity: 1;
    visibility: visible;
}

.team-social-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-social-list ul li{
	margin-bottom: 15px;
}

.team-social-list ul li:last-child{
	margin-bottom: 0;
}

.team-social-list ul li a{
	width: 36px;
	height: 36px;
	color: var(--white-color);
    background: transparent;
    border: 1px solid var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.team-social-list ul li:hover a{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
	color: var(--primary-color);
}

.team-social-list ul li a i{
    font-size: 18px;
    color: inherit;
}

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

.our-process-item{
    background: var(--white-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
	overflow: hidden;
}

.our-process-item-number{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
}

.our-process-item-number h2{
    font-size: 50px;
}

.our-process-item-content h3{
    font-size: 20px;
}

.our-process-item-content p{
    margin: 20px 0 0;
}

.our-process-item-content ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

.our-process-item-content ul li{
    position: relative;
    color: var(--primary-color);
    font-size: 14px;
    background-color: var(--bg-color);
    border-radius: 100px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 10px 16px 10px 32px;
}

.our-process-item-content ul li::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    height: 6px;
    width: 6px;
    transform: translateY(-50%);
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
}

.our-process-item.box-2 .our-process-item-number{
    margin-bottom: 30px;
}

.our-process-item-image{
    align-content: end;
}

.our-process-item-image figure{
	width: 100%;
    max-width: 300px;
    margin: 0 auto -90px 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.our-process-item-image img{
    width: 100%;
    aspect-ratio: 1 / 0.88;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.our-process-item.box-3{
    position: relative;
    background-image: url('../images/banner3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.our-process-item.box-3::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
    opacity: 60%;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.our-process-item.box-3 .our-process-item-number,
.our-process-item.box-3 .our-process-item-content{
    z-index: 2;
}

.our-process-item.box-3 .our-process-item-number{
    border-color: var(--dark-divider-color);
}

.our-process-item.box-3 .our-process-item-number h2,
.our-process-item.box-3 .our-process-item-content h3,
.our-process-item.box-3 .our-process-item-content p{
    color: var(--white-color);
}

.our-process-item.box-3 .our-process-item-content ul li{
    color: var(--white-color);
    background-color: var(--dark-divider-color);
}

/************************************/
/*** 	 18. Services Page css	  ***/
/************************************/

.page-services{
    padding: 100px 0 70px;
}

.page-services .service-item:before{
    background: var(--white-color);
}

/************************************/
/***    19. Service Single css    ***/
/************************************/

.page-service-single{
	padding: 100px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.page-category-list{
	background: var(--secondary-color);
	border-radius: 20px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list h2{
	font-size: 20px;
	line-height: normal;
	color: var(--white-color);
	background: var(--accent-color);
    padding: 25px 40px;
}

.page-category-list ul{
	list-style: none;
    margin: 0;
	padding: 40px;
}

.page-category-list ul li{
	line-height: 1.4em;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.page-category-list ul li:last-child{
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
	color: inherit;
    padding-right: 25px;
	transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover{
	color: var(--primary-color);
}

.page-category-list ul li a::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 22px;
    height: 22px;
	transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
	transform: rotate(45deg);
}

.sidebar-cta-box{
	border-radius: 20px;
	overflow: hidden;
}

.sidebar-cta-image figure{
	position: relative;
	display: block;
}

.sidebar-cta-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 0%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.sidebar-cta-image img{
	width: 100%;
	aspect-ratio: 1 / 1.145;
	object-fit: cover;
}

.sidebar-cta-body{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	text-align: center;
	z-index: 1;
}

.sidebar-cta-logo img{
	width: 100%;
	max-width: 177px;
}

.sidebar-cta-content,
.sidebar-cta-btn{
	margin-top: 40px;
}

.sidebar-cta-content h2{
	font-size: 30px;
	color: var(--white-color);
}

.page-single-image{
	margin-bottom: 30px;
}

.page-single-image figure{
	display: block;
	border-radius: 20px;
}

.page-single-image img{
    width: 100%;
    aspect-ratio: 1 / 0.5361;
    object-fit: cover;
	border-radius: 20px;
}

.service-entry{
    margin-bottom: 60px;
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry p:last-child,
.service-entry h3:last-child{
    margin-bottom: 0;
}

.service-entry h2{
    font-size: 50px;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin-bottom: 20px;
}

.service-entry h2 span{
	font-style: italic;
}

.service-entry h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.service-entry ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
}

.service-entry ul li{
	position: relative;
	width: calc(50% - 10px);
    line-height: 1.5em;
    padding-left: 25px;
}

.service-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.service-approach-box,
.service-projects-box,
.service-entry-info-box{
	margin-top: 60px;
}

.service-approach-item-list{
	margin-top: 40px;
}

.service-approach-item{
	margin-bottom: 40px;
}

.service-approach-item:last-child{
	margin-bottom: 0;
}

.service-approach-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.service-approach-item-header .icon-box{
	position: relative;
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.5s ease-in-out;
}

.service-approach-item:hover .service-approach-item-header .icon-box{
	background: transparent;
}

.service-approach-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-approach-item:hover .service-approach-item-header .icon-box::before{
	transform: scale(1);
}

.service-approach-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-approach-item:hover .service-approach-item-header .icon-box img{
	filter: brightness(0) invert(0);
}

.service-approach-item-title{
	width: calc(100% - 55px);
}

.service-approach-item-content{
	margin-top: 20px;
}

.service-project-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.service-project-item{
	width: calc(33.33% - 20px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	gap: 20px;
	background: var(--white-color);
	border-radius: 20px;
	padding: 40px 20px 0;
	overflow: hidden;
}

.service-project-item-image figure{
	display: block;
	width: 100%;
	max-width: 310px;
	border-radius: 20px 20px 0 0;
}

.service-project-item-image img{
	width: 100%;
	aspect-ratio: 1 / 0.62;
	object-fit: cover;
	border-radius: 20px 20px 0 0;
}

/************************************/
/***     20. Blog Archive css     ***/
/************************************/

.page-blog{
	padding: 100px 0;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 100px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
    color: var(--white-color);
}

/************************************/
/***     21. Blog Single css      ***/
/************************************/

.page-single-post{
	padding: 100px 0;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 20px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 20px;
}

.post-content{
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 500;
	line-height: 1.2em;
	margin: 0 0 0.4em;
}

.post-entry h1{
	font-size: 60px;
}

.post-entry h2{
	font-size: 50px;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 20px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--secondary-color) url('../images/icon-blockquote.svg');
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 20px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--primary-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
    font-size: 20px;
	font-weight: 500;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 100px;
    padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--accent-secondary-color);
	color: var(--primary-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 100px;
    width: 40px;
    height: 40px;
    transition: all 0.4s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--accent-secondary-color);
	color: var(--primary-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/***    22. Page Projects css     ***/
/************************************/

.page-projects{
    padding: 100px 0 70px;
}

/************************************/
/***   23. Project Single css     ***/
/************************************/

.page-project-single{
	padding: 100px 0;
}

.project-category-list ul li span{
	width: 100%;
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.project-entry{
    margin-bottom: 60px;
}

.project-entry p{
    margin-bottom: 20px;
}

.project-entry h2{
    font-size: 50px;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin-bottom: 20px;
}

.project-entry h2 span{
	font-style: italic;
}

.project-entry h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.project-entry ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.project-entry ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
	margin-bottom: 15px;
}

.project-entry p:last-child,
.project-entry h2:last-child,
.project-entry h3:last-child,
.project-entry ul li:last-child{
    margin-bottom: 0;
}

.project-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.project-planning-box,
.project-entry-info-box,
.project-challenges-box{
	margin-top: 60px;
}

.project-planning-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.project-planning-item{
	position: relative;
	width: calc(33.33% - 20px);
	min-height: 280px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 30px;
	background: var(--white-color);
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}

.project-planning-item .icon-box{
	position: absolute;
	top: -20px;
	right: -20px;
}

.project-planning-item .icon-box img{
	width: 100%;
	max-width: 100px;
}

.project-planning-item-no h2{
	line-height: 1em;
}

.project-planning-item-no h2 span{
	font-style: normal;
}

.project-planning-item-content h3{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.project-entry-info-image-content{
	position: relative;
	padding: 40px;
	margin-top: 40px;
}

.project-entry-info-image{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.project-entry-info-image figure{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.project-entry-info-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.project-entry-info-content{
	position: relative;
	display: inline-block;
	background: var(--white-color);
	border-radius: 20px;
	padding: 30px;
	z-index: 1;
}

.project-entry-info-content h3{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.project-challenges-item-list{
	margin-top: 40px;
}

.project-challenges-item{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}

.project-challenges-item:last-child{
	margin-bottom: 0;
}

.project-challenges-item:nth-child(even){
	flex-direction: row-reverse;
}

.project-challenges-image{
	width: calc(50% - 15px);
}

.project-challenges-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.project-challenges-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.814;
	object-fit: cover;
	border-radius: 20px;
}

.project-challenges-item-content{
	width: calc(50% - 15px);
	align-content: center;
}

.project-challenges-item-header,
.project-challenges-item-body{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.project-challenges-item-body{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.project-challenges-item-body .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.5s ease-in-out;
}

.project-challenges-item-body:hover .icon-box{
	background: transparent;
}

.project-challenges-item-body .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.project-challenges-item-body:hover .icon-box::before{
    transform: scale(1);
}

.project-challenges-item-body .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
    z-index: 1;
	transition: all 0.4s ease-in-out;
}

.project-challenges-item-body:hover .icon-box img{
   filter: brightness(1) invert(1);
}

.project-challenges-item-body-content{
	width: calc(100% - 75px);
}

.project-challenges-body-list ul li{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.project-challenges-body-list ul li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

/************************************/
/*** 	   24. Team Page css      ***/
/************************************/

.page-team{
    padding: 100px 0 70px;
}

/************************************/
/*** 	 25. Team Single css      ***/
/************************************/


.page-team-single{
	padding: 100px 0;
}

.team-single-image{
    background: var(--white-color);
	border-radius: 20px;
	padding: 30px 30px 0;
	margin-bottom: 60px;
	text-align: center;
	overflow: hidden;
}

.team-single-image figure{
	display: block;
	border-radius: 20px 20px 0 0;
}

.team-single-image img{
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1.525;
	object-fit: cover;
	border-radius: 20px 20px 0 0;
}

.team-member-about,
.team-member-experience-box,
.team-member-skills-box{
	margin-bottom: 60px;
}

.team-contact-list{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--divider-color);
    border-right: none;
    border-bottom: none;
    border-radius: 20px;
    overflow: hidden;
}

.team-contact-item{
    display: flex;
    align-items: center;
	gap: 15px;
    width: 50%;
    border-right: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
    padding: 50px;
}

.team-contact-item:nth-of-type(-2n + 2){
    border-radius: 0 20px 0 0;
}

.team-contact-item:last-child,
.team-contact-item:nth-child(2n):nth-last-child(2){
    border-radius: 0 0 20px 0;
}

.team-contact-item .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--accent-secondary-color);
    border-radius: 50%;
}

.team-contact-item .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    transform: scale(0);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
}

.team-contact-item:hover .icon-box::before{
    transform: scale(1);
}

.team-contact-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-contact-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.team-contact-item-content{
    width: calc(100% - 65px);
}

.team-contact-item h3{
	font-size: 20px;
}

.team-contact-item-content p{
	margin-bottom: 5px;
}

.team-contact-item ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-contact-item ul li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

.team-contact-item ul li a:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.team-contact-item ul li i{
    font-size: 18px;
    color: inherit;
}

.member-experience-image-content{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.member-experience-content{
	width: calc(62% - 15px);
	align-content: center;
}

.member-experience-content-item{
	margin-bottom: 40px;
}

.member-experience-content-item:last-child{
	margin-bottom: 0;
}

.member-experience-content-item h3{
	font-size: 20px;
}

.member-experience-content-item p{
	margin: 15px 0 0;
}

.member-experience-image{
	width: calc(38% - 15px);
}

.member-experience-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.member-experience-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.041;
	object-fit: cover;
	border-radius: 20px;
}

.member-skill-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.skills-progress-bar{
	width: calc(50% - 15px);
}

.skills-progress-bar:last-child{
	margin-bottom: 0px;
}

.skills-progress-bar .skill-data{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
    line-height: normal;
}

.skills-progress-bar .skillbar .skill-progress{
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--divider-color);
    border-radius: 30px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--primary-color);
    border-radius: 30px;
}

.contact-form.team-contact-form{
	margin: 0;
}

/************************************/
/*** 	 26. Pricing Page css     ***/
/************************************/

.page-pricing{
    padding: 100px 0;
}

.pricing-item{
	background-color: var(--white-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
}

.pricing-item-header{
	background-color: var(--bg-color);
	border-radius: 20px;
	padding: 30px;
}

.pricing-item-header .icon-box{
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 30px;
}

.pricing-item-header .icon-box img{
    width: 100%;
    max-width: 24px;
}

.pricing-item-content .pricing-item-title{
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--primary-color);
	margin-bottom: 10px;
}

.pricing-item-content h2{
	font-size: 50px;
}

.pricing-item-content h2 sub{
    color: var(--text-color);
    font-size: 16px;
    font-weight: 400;
    bottom: 0;
}

.pricing-item-content p{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	margin: 20px 0 0;
}

.pricing-item-body{
	padding: 30px;
}

.pricing-item-list h3{
	font-size: 20px;
}

.pricing-item-list ul{
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.pricing-item-list ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.pricing-item-list ul li:last-child{
	margin-bottom: 0;
}

.pricing-item-list ul li:before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
    top: 0;
    left: 0;
}

.pricing-item-btn{
	margin-top: 30px;
}

.pricing-item-btn .btn-default{
	width: 100%;
    padding: 17px;
	text-align: center;
}

.pricing-item-btn .btn-default::before{
	display: none;
}

.pricing-item.highlighted-box .pricing-item-header .icon-box{
    background-color: var(--accent-secondary-color);
}

.pricing-item.highlighted-box .pricing-item-header .icon-box img{
    filter: brightness(1) invert(1);
}

.pricing-benefit-list{
	margin-top: 30px;
}

.pricing-benefit-list ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 20px 40px;
}

.pricing-benefit-list ul li{
    display: inline-flex;
    align-items: center;
}

.pricing-benefit-list ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

/************************************/
/***  27. Testimonials Page css   ***/
/************************************/

.page-testimonials{
    padding: 100px 0 70px;
}

.page-testimonials .testimonial-item{
    background-color: var(--white-color);
    height: calc(100% - 30px);
    margin-bottom: 30px;    
}

/************************************/
/***    28. Image Gallery css     ***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.745;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***    29. Video Gallery css     ***/
/************************************/

.page-video-gallery{
	padding: 100px 0 70px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 50%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-secondary-color);
	color: var(--primary-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.745;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***     30. FAQ's Page css       ***/
/************************************/

.page-faqs{
	padding: 100px 0;
}

.page-faqs .page-single-faqs{
    margin-bottom: 60px;
}

.page-faqs .page-single-faqs:last-child{
    margin-bottom: 0px;
}

/************************************/
/***    31. Contact Us Page css   ***/
/************************************/

.page-contact-us{
    padding: 100px 0 50px;
}

.contact-us-content{
	margin-right: 15px;
}

.contact-info-item{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.contact-info-item h2{
    font-size: 30px;
    font-weight: 500;
}

.contact-info-item h4{
    font-size: 20px;
    font-weight: 600;
}

.contact-info-item h3{
    font-size: 20px;
    font-weight: 500;
    margin-top: 25px;
}

.contact-info-item p{
    margin: 10px 0 0;
}

.contact-info-item h2 a,
.contact-info-item h3 a,
.contact-info-item p a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.contact-info-item h2 a:hover,
.contact-info-item h3 a:hover,
.contact-info-item p a:hover{
    color: var(--accent-secondary-color);
}

.contact-us-social-list ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-us-social-list ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	width: 36px;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.contact-us-social-list ul li a:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}

.contact-us-social-list ul li a i{
	font-size: 18px;
	color: inherit;
}

.contact-form{
    background: var(--white-color);
    border-radius: 20px;
    padding: 60px;
}

.contact-form label{
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 15px;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	background: var(--bg-color);
	border: none;
	border-radius: 10px;
	padding: 18px 25px;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	color: var(--text-color);
}

.google-map{
    padding: 50px 0 100px;
}

.google-map-iframe iframe{
	width: 100%;
	height: 700px;
	border-radius: 20px;
}

/************************************/
/***    32. 404 Error Page css    ***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 520px;
}

.error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      33. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1880px){
	
	.bg-section{
		width: calc(100% - 40px);
	}
}

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

	header.main-header .header-sticky{
		width: calc(100% - 70px);
	}
}

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

	.container{
        max-width: 1300px;
    }

	.hero-counter-list{
        gap: 20px 30px;
    }

    .hero-counter-item{
        width: calc(33.33% - 20px);
    }

    .hero-counter-item::before{
        right: -10px;
    }

	.hero-counter-footer{
		margin-top: 30px;
		padding-top: 30px;
	}

    .about-us-item{
        min-height: initial;
    }

    .about-us-item-content{
        padding: 20px 20px 0;
    }

    .about-us-item.box-2 .about-us-item-content{
        padding: 0 20px 20px;
    }

    .about-counter-item-list{
        margin-top: 30px;
		gap: 30px;
    }

	.about-counter-item{
		width: calc(33.33% - 20px);
	}

    .service-item{
        padding: 30px 20px;
        min-height: 370px;
    }

	.who-we-cta-box{
		padding: 20px;
	}

	.commitment-item{
		padding: 30px;
		margin-bottom: 30px;
	}

	.project-item-content{
		right: 25px;
		bottom: 25px;
		left: 25px;
	}

	.fact-item{
		padding: 30px;
		min-height: 290px;
	}

	.cta-form-box{
		padding: 40px;
	}

	.faqs-content{
		margin: 0;
	}

    .faq-client-box-content{
        max-width: 60%;
    }

    .testimonial-item{
        padding: 30px;
    }

    .testimonial-item-author{
        padding-top: 30px;
        margin-top: 30px;
    }

	.history-item{
        padding: 30px;
    }

    .our-process-item{
        padding: 30px;
    }

    .our-process-item-content ul{
        margin-top: 30px;
    }

	.page-category-list h2{
		padding: 20px 30px;
	}

	.page-category-list ul{
		padding: 30px;
	}

	.sidebar-cta-body{
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

	.sidebar-cta-content,
	.sidebar-cta-btn{
		margin-top: 30px;
	}

    .post-content{
        max-width: 1100px;
    }

    .team-contact-item{
		padding: 40px;
	}

	.member-experience-content-item{
		margin-bottom: 30px;
	}

    .pricing-item-header,
    .pricing-item-body{
        padding: 20px;
    }

    .contact-info-item{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .contact-info-item h3{
        margin-top: 15px;
    }

    .contact-form{
        padding: 40px;
    }
}

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

	.main-menu ul li{
		margin: 0;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}

	.hero{
        min-height: auto;
    }

    .hero-counter-box{
        margin: 30px 0 0;
    }

    .about-us-image-box,
    .about-us-image,
    .about-us-image figure{
        height: auto;
    }

    .about-us-image img{
        height: auto;
        aspect-ratio: 1 / 0.6;
    }

    .about-us-content-box{
        margin-top: 30px;
    }

	.who-we-content{
		margin-bottom: 40px;
	}

	.who-we-image-box{
		max-width: 800px;
		margin: 0 auto;
	}

    .intro-video{
        min-height: 550px;
    }

	.watch-video-circle img{
		max-width: 130px;
	}

	.our-commitment-content{
		height: auto;
		margin: 0 0 30px;
	}

	.commitment-client-box-content{
		margin-top: 20px;
		padding-top: 20px;
	}

	.project-item-image img{
		aspect-ratio: 1 / 1.2;
	}

	.our-fact-image-box{
		max-width: 700px;
		margin: 0 auto 30px;
	}

	.cta-box-content{
		height: auto;
		margin: 0 0 30px;
	}

	.faqs-content{
        position: initial;
        margin: 0 0 40px 0;
    }

    .company-supports-content hr{
        width: 33%;
    }

    .footer-header .section-title{
        max-width: 650px;
    }

    .about-footer{
        margin: 0 0 30px 0
    }

    .about-footer-content{
        margin-top: 15px;
    }
	
	.our-approach-images{
        max-width: 690px;
        margin: 0 auto 30px;
    }

    .our-history-content{
        position: initial;
        margin-bottom: 30px;
    }

    .explore-project-circle img{
        max-width: 120px;
    }

    .our-process-item-image figure{
        max-width: 250px;
    }

	.page-single-sidebar{
		margin: 0;
	}
    
	.page-category-list h2{
        padding: 15px 20px;
    }

	.page-category-list ul{
		padding: 20px;
	}

	.page-category-list ul li{
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

	.sidebar-cta-body{
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

	.sidebar-cta-content h2{
		font-size: 26px;
	}

	.page-single-image{
		margin-bottom: 20px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-entry ul{
		gap: 10px;
		margin-top: 30px;
	}

	.service-entry ul li{
		width: 100%;
	}

	.service-entry ul li::before{
		font-size: 16px;
	}

	.service-approach-box,
	.service-projects-box,
	.service-entry-info-box{
		margin-top: 40px;
	}

	.service-approach-item-list{
		margin-top: 30px;
	}

	.service-approach-item{
		margin-bottom: 30px;
	}

	.service-approach-item-content{
		margin-top: 15px;
	}

	.service-project-item-list{
		margin-top: 30px;
	}

	.service-project-item{
		width: calc(50% - 15px);
		padding: 30px 20px 0;
	}

    .project-entry{
		margin-bottom: 40px;
	}

	.project-planning-box,
	.project-entry-info-box,
	.project-challenges-box{
		margin-top: 40px;
	}

	.project-planning-item-list{
		margin-top: 30px;
	}

	.project-planning-item{
		width: calc(50% - 15px);
	}

	.project-entry-info-image-content{
		margin-top: 30px;
	}

	.project-challenges-item-list{
		margin-top: 30px;
	}

    .team-single-image{
		padding: 30px 20px 0;
	}

	.team-member-about,
	.team-member-experience-box,
	.team-member-skills-box{
		margin-bottom: 40px;
	}

	.team-contact-item{
        padding: 25px 20px;
    }

	.team-contact-item h3{
		font-size: 18px;
	}
	
	.member-experience-content,
	.member-experience-image{
		width: 100%;
	}

    .contact-us-content{
        margin: 0 0 30px;
    }

	.google-map-iframe iframe{
		height: 500px;
	}
}

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

	.btn-default{
        padding: 15px 46px 15px 16px;
    }

	.btn-default::before{
		right: 16px;
		width: 22px;
		height: 22px;
	}
	
	header.main-header{
		top: 0px;
	}

	header.main-header .header-sticky{
		width: 100%;
		border-radius: 0;
	}
	
	header.main-header .header-sticky.active{
		width: 100%;
		border-radius: 0;
	}

	.navbar{
		padding: 20px 0;
	}

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.bg-section{
		width: 100%;
		border-radius: 0;
		margin: 0;
	}

	.bg-section .container-fluid{
		padding: 0 15px;
	}

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

	.section-title .section-sub-title{
		padding: 6px 12px 6px 26px;
		margin-bottom: 10px;
	}

	.section-title .section-sub-title::before{
		left: 12px;
		width: 6px;
		height: 6px;
	}

	.section-title h1{
		font-size: 46px;
	}

	.section-title h2{
		font-size: 38px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.hero{
        padding: 140px 0 50px;
        margin-top: 0;
    }

    .hero-counter-item h2{
        font-size: 38px;
    }

    .hero-counter-item p{
        margin: 5px 0 0;
    }

    .about-us{
        padding: 50px 0;
    }

    .about-us-circle{
        top: 20px;
        left: 20px;
    }

    .about-us-circle img{
        max-width: 120px;
    }

    .about-counter-item h2{
        font-size: 38px;
    }

    .our-service{
        padding: 50px 0;
    }

    .service-item{
		padding: 20px;
    }

    .service-item-body .icon-box{
        height: 50px;
        width: 50px;
    }

    .service-item-body .icon-box img{
        max-width: 24px;
    }

	.service-item-btn{
		margin-top: 20px;
		padding-top: 20px;
	}

    .section-footer-text{
		margin-top: 10px;
	}

	.section-footer-text ul{
		margin-top: 10px;
	}

	.section-footer-text ul li{
		font-size: 18px;
		margin-right: 5px;
	}

	.section-footer-text ul li i{
		font-size: 16px;
	}

	.who-we-are{
		padding: 50px 0;
	}

	.who-we-content{
		margin-bottom: 30px;
	}

	.who-we-nav{
		margin-bottom: 30px;
	}

	.who-we-nav ul li .nav-link{
		padding-bottom: 20px;
		gap: 10px;
	}

	.who-we-tab-header-content p{
		margin-top: 10px;
	}

	.who-we-item-list{
		margin-top: 30px;
	}

	.who-we-item{
		gap: 10px;
	}

	.who-we-item .icon-box img{
		max-width: 28px;
	}

	.who-we-item-content{
		width: calc(100% - 38px);
	}

	.who-we-footer{
		margin-top: 30px;
		padding-top: 30px;
	}

    .intro-video{
		min-height: 450px;
        padding: 50px 0;
    }

	.our-commitment{
		padding: 50px 0;
	}

	.commitment-item{
		padding: 20px;
	}

	.commitment-item-header .icon-box{
		width: 50px;
		height: 50px;
	}

	.commitment-item-header .icon-box img{
		max-width: 24px;
	}

	.commitment-item-title{
		width: calc(100% - 65px);
	}

	.commitment-item-content{
		margin-top: 20px;
	}

	.our-project{
		padding: 50px 0;
	}

	.project-item-content{
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

	.project-item-content ul{
		margin-bottom: 10px;
	}

	.our-fact{
		padding: 50px 0;
	}

	.fact-item{
        padding: 20px;
		gap: 20px;
        min-height: 260px;
    }

	.fact-item-title{
        padding-bottom: 20px;
    }

	.fact-item-counter-content h2{
		font-size: 38px;
	}

	.fact-item-counter-content p{
		margin-top: 5px;
	}

	.cta-box{
		padding: 50px 0;
	}

	.cta-form-box{
        padding: 30px;
    }

	.cta-contact-form .form-control{
		padding: 12px 15px;
	}

	.our-faqs{
        padding: 50px 0;
    }

	.faqs-content{
		margin-bottom: 30px;
	}

	.faq-client-box{
		margin-top: 30px;
		padding-top: 30px;
	}

    .faq-accordion .accordion-item{
        margin-bottom: 20px;
    }

    .faq-accordion .accordion-header .accordion-button{
        padding: 15px 40px 15px 15px;
    }

    .faq-accordion .accordion-item .accordion-body{
        padding: 15px;
    }

    .faq-accordion .accordion-item .accordion-button::after, 
    .faq-accordion .accordion-item .accordion-button.collapsed::after{
        right: 15px;
    }

    .our-testimonials{
        padding: 50px 0;
    }

    .testimonial-item{
        padding: 20px;
        min-height: initial;
    }

    .testimonial-item-author{
        padding-top: 20px;
        margin-top: 20px;
    }

    .company-supports-slider-box{
        margin-top: 40px;
    }

    .company-supports-content hr{
        width: 27%;
    }

    .company-supports-content{
        margin-bottom: 20px;
    }

    .our-blog{
        padding: 50px 0 20px;
    }

    .post-featured-image{
        margin-bottom: 15px;
    }

    .post-item-content{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .main-footer{
        padding: 50px 0 0;
        margin-bottom: 0;
    }

    .footer-header{
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

	.footer-header .section-title{
		max-width: 100%;
	}

    .footer-social-links h3{
        margin-bottom: 15px;
    }

    .footer-links{
        max-width: 40%;
    }

    .footer-links h3{
        margin-bottom: 20px;
    }

	.footer-links p{
		margin-bottom: 20px;
	}

    .footer-links ul li{
        margin-bottom: 10px;
    }

    .footer-newsletter-form .form-group{
        margin-top: 20px;
    }

    .footer-newsletter-form .form-group .form-control{
        width: calc(100% - 40px);
    }

    .footer-newsletter-form .form-group .newsletter-btn{
        width: 40px;
        height: 40px;
    }

    .footer-newsletter-form .form-group .newsletter-btn i{
        font-size: 18px;
    }

    .footer-copyright{
        margin-top: 30px;
        padding: 30px 0;
    }

	.page-header{
        margin-top: 0;
		padding: 180px 0 90px;
	}
    
	.page-header-box h1{
        font-size: 44px;
	}
    
    .our-approach{
        padding: 50px 0;
    }

    .our-history{
        padding: 50px 0;
    }
    
    .history-item-header h2{
        font-size: 38px;
    }

    .our-team{
        padding: 50px 0;
    }

    .team-item-image img{
        max-width: 200px;
    }

    .our-process{
        padding: 50px 0;
    }

	.our-process-item{
		gap: 20px;
		padding: 20px;
	}

    .our-process-item-number{
        padding-bottom: 20px;
    }

    .our-process-item-number h2{
        font-size: 38px;
    }

    .our-process-item.box-2 .our-process-item-number{
        margin-bottom: 20px;
    }   

    .our-process-item-content p{
        margin: 10px 0 0;
    }

	.page-services{
        padding: 50px 0 20px;
    }

    .page-service-single{
		padding: 50px 0;
	}

	.page-single-sidebar,
	.page-category-list{
		margin-bottom: 30px;
	}

	.sidebar-cta-image img{
		aspect-ratio: 1 / 0.85;
	}
    
	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
		font-size: 38px;
		margin-bottom: 15px;
	}

    .page-blog{
		padding: 50px 0;
	}

	.page-pagination{
		margin-top: 10px;
	}

    .page-single-post{
        padding: 50px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 38px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

    .page-projects{
        padding: 50px 0 20px;
    }

    .page-project-single{
		padding: 50px 0;
	}

	.project-entry h2{
		font-size: 38px;
		margin-bottom: 15px;
	}

	.project-entry p{
		margin-bottom: 15px;
	}

	.project-entry ul li{
		margin-bottom: 10px;
	}
	
	.project-entry ul li::before{
		font-size: 16px;
	}

	.project-planning-item{
		min-height: initial;
	}

	.project-planning-item .icon-box{
		top: -10px;
		right: -10px;
	}

	.project-planning-item .icon-box img{
		max-width: 80px;
	}

	.project-entry .section-footer-text{
		margin-top: 30px;
	}

	.project-entry-info-image-content{
		padding: 30px;
	}

	.project-challenges-item-header,
	.project-challenges-item-body{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.project-challenges-item-body .icon-box{
		width: 50px;
		height: 50px;
	}

	.project-challenges-item-body .icon-box img{
		max-width: 24px;
	}

	.project-challenges-item-body-content{
		width: calc(100% - 65px);
	}

	.project-challenges-body-list ul li{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .page-team{
        padding: 50px 0 20px;
    }

    .page-team-single{
		padding: 50px 0;
	}
	
	.team-single-image{
		margin-bottom: 30px;
	}

	.member-experience-content-item p{
		margin: 10px 0 0;
	}

    .page-pricing{
        padding: 50px 0;
    }

    .pricing-item-header{
        padding: 20px;
    }

	.pricing-item-header .icon-box{
		margin-bottom: 20px;
	}

	.pricing-item-content p{
		padding-top: 15px;
		margin: 15px 0 0;
	}

    .pricing-item-body{
        padding: 20px 10px 10px;
    }

    .pricing-item-content h2{
        font-size: 38px;
    }

    .pricing-item-list ul{
        margin-top: 20px;
    }

    .pricing-item-list ul li{
        margin-bottom: 10px;
    }

    .pricing-item-list ul li:before{
        font-size: 16px;
    }

	.pricing-item-btn .btn-default{
        padding: 15px;
    }

    .pricing-benefit-list{
		margin-top: 10px;
	}

	.pricing-benefit-list ul{
		gap: 15px 30px;
	}

    .page-testimonials{
        padding: 50px 0 20px;
    }

    .page-gallery{
        padding: 50px 0 20px;
    }

    .page-video-gallery{
        padding: 50px 0 20px;
    }

    .page-faqs{
        padding: 50px 0;
    }

    .page-faqs .page-single-faqs{
        margin-bottom: 40px;
    }

    .page-contact-us{
        padding: 50px 0 25px;
    }

	.contact-info-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

    .contact-info-item h2{
        font-size: 26px;
    }

    .contact-form{
        padding: 30px;
    }

    .contact-form .form-control{
        padding: 13px 15px;
    }

    .google-map{
        padding: 25px 0 50px;
    }

    .error-page{
		padding: 50px 0px;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}
}

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

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

	.section-title h1{
		font-size: 28px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-counter-item h2{
        font-size: 26px;
    }

	.hero-counter-item p{
		font-size: 14px;
	}

    .about-us-image img{
        aspect-ratio: 1 / 0.782;
    }

    .about-us-circle img{
        max-width: 90px;
    }

    .about-us-item{
        width: 100%;
    }

    .about-us-item-content h3{
        font-size: 18px;
    }

    .about-us-item-content p{
        margin: 5px 0 0;
    }

    .about-counter-item-list{
        gap: 20px;
    }

    .about-counter-item{
        width: calc(50% - 10px);
    }

    .about-counter-item h2{
        font-size: 26px;
    }

	.about-counter-item p{
		font-size: 14px;
	}

	.service-item{
		min-height: 310px;
	}

    .service-item-content h2{
        font-size: 18px;
    }

	.service-item-btn .readmore-btn{
		padding-right: 30px;
	}

    .service-item-btn .readmore-btn::before{
        height: 22px;
        width: 22px;
        background-size: 14px auto;
    }

    .satisfy-client-image figure img{
		max-width: 38px;
	}

	.satisfy-client-image.add-more{
		width: 40px;
		height: 40px;
	}

	.satisfy-client-image.add-more h3,
	.satisfy-client-image.add-more i{
		font-size: 18px;
	}

	.who-we-nav ul li .nav-link img{
		max-width: 26px;
	}

	.who-we-tab-header-content h3,
	.who-we-item-content h3{
		font-size: 18px;
	}

	.who-we-item-list{
		gap: 20px;
	}

	.who-we-item{
		width: 100%;
	}

	.who-we-footer{
		gap: 20px;
	}

	.about-us-conatct-content h3{
		font-size: 18px;
	}

	.who-we-image-box-1,
	.who-we-image-box-2{
		width: 100%;
	}

	.who-we-image-box-1 .who-we-image img{
		aspect-ratio: 1 / 1.27;
	}

	.who-we-cta-box{
		margin-bottom: 20px;
	}

	.intro-video{
		align-content: center;
		text-align: center;
	}

    .watch-video-circle{
		text-align: center;
        margin-top: 30px;
    }

    .watch-video-circle img{
        max-width: 100px;
    }

	.commitment-client-box-content p{
		font-size: 16px;
	}

	.commitment-item-title h3{
		font-size: 18px;
	}

	.commitment-item-content{
		margin-top: 15px;
	}

	.project-item-content h2{
		font-size: 18px;
	}

	.our-fact-image-box-1{
		width: 100%;
		margin-bottom: 20px;
	}

	.our-fact-image-box-2{
		width: 100%;
		padding: 0;
	}

	.our-fact-image-box-2 .our-fact-image{
		margin-left: 0;
	}

	.fact-item-list{
		gap: 20px;
	}

	.fact-item{
		width: 100%;
        min-height: initial;
    }

	.fact-item-counter-content h2{
        font-size: 26px;
    }

    .cta-item-box-list{
        gap: 20px;
    }

    .cta-box-item:last-child{
        border-top: none;
        padding-top: 0px;
    }

	.cta-box-item-content h3{
		font-size: 18px;
	}

	.cta-form-box{
		padding: 20px;
	}

	.faq-client-box-content{
        max-width: 100%;
    }

    .faq-accordion .accordion-header .accordion-button{
        padding: 12px 34px 12px 12px;
    }

    .faq-accordion .accordion-item .accordion-button::after, 
    .faq-accordion .accordion-item .accordion-button.collapsed::after{
        font-size: 16px;
        right: 12px;
    }

    .faq-accordion .accordion-item .accordion-body{
        padding: 12px;
    }

    .testimonial-author-content h3{
        font-size: 18px;
    }

    .company-supports-content hr{
        display: none;
    }

    .company-supports-content{
        justify-content: center;
    }

	.post-item-content h2{
        font-size: 18px;
    }

    .footer-social-links h3{
        font-size: 18px;
    }

    .footer-links{
        max-width: 100%;
    }

    .footer-links h3{
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-copyright{
        padding: 15px 0;
    }

	.page-header-box h1{
        font-size: 28px;
	}
    
    .our-approach-images::before{
        bottom: 50px;
		width: 210px;
		height: 220px;
    }
    
    .our-approach-image-box-2{
        padding-bottom: 80px;
    }
    
    .our-approach-image-box-2 .our-approach-image figure{
        margin-left: -150px;
    }

	.approach-item-box{
		gap: 20px;
	}
    
    .approach-item{
        width: 100%;
    }

	.approach-item:last-child{
		border-top: none;
		padding-top: 0;
	}
    
    .approach-item-content h3{
        font-size: 18px;
    }
    
    .approach-item-content p{
        margin: 5px 0 0;
    }
    
    .explore-project-circle img{
        max-width: 90px;
    }
    
    .history-item{
        width: 100%;
        padding: 20px;
    }
    
    .history-item-header h2{
        font-size: 26px;
    }
    
    .history-item-content{
        margin-top: 15px;
        padding-top: 15px;
    }
    
    .history-item-content h3{
        font-size: 18px;
    }

	.history-item-content p{
		margin: 5px 0 0;
	}

	.history-item-image figure{
		margin-bottom: -150px;
	}

    .team-item{
        padding: 20px 20px 0;
    }

    .team-item-content h2{
        font-size: 18px;
    }

    .team-item-content p{
        margin: 5px 0 0;
    }

    .our-process-item-number h2{
        font-size: 26px;
    }

    .our-process-item-content h3{
        font-size: 18px;
    }

    .our-process-item-content ul{
        margin-top: 20px;
    }

    .our-process-item-content ul li{
        padding: 8px 14px 8px 28px;
    }

	.page-category-list h2{
		font-size: 18px;
	}	

	.sidebar-cta-image img{
		aspect-ratio: 1 / 1.145;
	}

	.sidebar-cta-content,
	.sidebar-cta-btn{
		margin-top: 20px;
	}
	
	.sidebar-cta-content h2{
        font-size: 22px;
    }

	.page-single-image img{
		aspect-ratio: 1 / 0.65;
	}
	
	.service-entry h2{
        font-size: 26px;
    }

	.service-entry h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.service-approach-item{
        margin-bottom: 20px;
    }

	.service-approach-item-content{
        margin-top: 10px;
    }

	.service-project-item{
        width: 100%;
        padding: 20px 20px 0;
    }

    .post-single-meta ol li,
	.post-single-meta ol li i{
		font-size: 16px;
	}

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote{
		background-position: 15px 15px;
		padding: 60px 15px 15px 15px;
	}

	.post-entry blockquote p{
		font-size: 16px;
	}

	.post-entry h2{
		font-size: 26px;
	}
	
	.tag-links{
		font-size: 18px;
	}

    .project-category-list ul li span{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.project-entry h2{
		font-size: 26px;
	}

	.project-entry h3{
		font-size: 18px;
	}

	.project-planning-item{
		width: 100%;
		padding: 20px;
	}

	.project-planning-item .icon-box img{
		max-width: 60px;
	}

	.project-entry-info-image-content{
		padding: 0;
	}

	.project-entry-info-image{
		position: initial;
		margin-bottom: 20px;
		height: auto;
	}

	.project-entry-info-image figure,
	.project-entry-info-image img{
		height: auto;
	}

	.project-entry-info-image img{
		aspect-ratio: 1 / 0.65;
	}

	.project-entry-info-content{
		display: block;
		padding: 20px;
	}

	.project-entry-info-content h3{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.project-challenges-image,
	.project-challenges-item-content{
		width: 100%;
	}

    .team-single-image img{
		max-width: 270px;
	}

	.team-contact-item{
        padding: 20px;
        width: 100%;
    }

    .team-contact-item:nth-of-type(-2n + 2),
    .team-contact-item:nth-child(2n):nth-last-child(2){
        border-radius: 0;
    }

	.member-experience-content-item h3{
		font-size: 18px;
	}

	.member-skill-list{
		gap: 20px;
	}

	.skills-progress-bar{
		width: 100%;
	}

    .pricing-item-content .pricing-item-title,
    .pricing-item-list h3{
        font-size: 18px;
    }

    .pricing-item-content h2{
        font-size: 26px;
    }

	.pricing-item-content h2 sub{
		font-size: 14px;
	}

    .pricing-item-content p{
        padding-top: 10px;
        margin-top: 10px;
    }

	.pricing-benefit-list ul{
        gap: 10px 15px;
    }

	.pricing-benefit-list ul li{
		font-size: 14px;
	}

	.pricing-benefit-list ul li img{
		margin-right: 5px;
	}

    .contact-info-item h2{
        font-size: 22px;   
    }

    .contact-info-item h3,
    .contact-info-item h4{
        font-size: 18px;
    }

    .contact-info-item p{
        margin: 5px 0 0;
    }

	.contact-form{
		padding: 20px;
	}

	.contact-form label{
		margin-bottom: 10px;
	}

    .google-map-iframe iframe{
		height: 350px;
	}	
}

/************************************/
/***   34. Home - Version 2 css	  ***/
/************************************/

.dark-section.dark-section-prime{
    background-image: url('../images/dark-section-bg-image-prime.png');
}

.hero-prime{
    position: relative;
    padding: 250px 0 0;
    margin-top: 20px;
    overflow: hidden;
}

.hero-prime.dark-section.dark-section-prime{
    background-image: url('../images/hero-bg-image-prime1.jpg');
}

.hero-prime::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    opacity: 50%;
    z-index: 1;
}

.hero-prime .container{
    position: relative;
    z-index: 2;
}

.hero-content-prime{
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-btn-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.hero-btn-prime .btn-default.btn-transparent{
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.hero-benefit-item-list-prime{
    max-width: 1245px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 30px;
    margin: 100px auto 0;
}

.hero-benefit-item-prime{
    position: relative;
    width: calc(30% - 20px);
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px 20px 0 0;
    padding: 40px;
    overflow: hidden;
}

.hero-benefit-item-prime.box-2{
    width: calc(40% - 20px);
    padding: 0;
}

.hero-benefit-item-prime .icon-box{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 40px;
}

.hero-benefit-item-prime .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.hero-benefit-item-prime:hover .icon-box::before{
    transform: scale(1);
}

.hero-benefit-item-prime .icon-box img{
    position: relative;
    width: 100%;
    max-width: 30px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.hero-benefit-item-content-prime h2{
    font-size: 20px;
    color: var(--white-color);
}

.hero-benefit-item-content-prime p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.hero-benefit-image-prime{
    height: 100%;
}

.hero-benefit-image-prime figure{
    display: block;
    height: 100%;
}

.hero-benefit-image-prime img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.733;
    object-fit: cover;
    filter: brightness(80%);
}

.hero-benefit-item-prime.box-2 .contact-us-circle-prime{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.contact-us-circle-prime a{
    display: inline-block;
    border-radius: 50%;
}

.contact-us-circle-prime img{
    width: 100%;
    max-width: 120px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

.contact-us-circle-prime a:hover img{
    animation-play-state: paused;
}

.hero-rating-box-prime{
	display: flex;
	align-items: center;
	gap: 15px;
    margin-top: 40px;
}

.hero-rating-logo-prime img{
	width: 100%;
	max-width: 55px;
}

.hero-rating-info-prime{
    width: calc(100% - 70px);
}

.hero-rating-header-prime{
	display: flex;
	align-items: center;
    gap: 10px;
	margin-bottom: 10px;
}

.hero-rating-header-prime h3{
	width: 75px;
	font-size: 30px;
	color: var(--white-color);
}

.hero-rating-star-prime{
	margin-bottom: 0;
}

.hero-rating-star-prime i{
	color: var(--accent-secondary-color);
}

.hero-rating-review-content-prime p{
	color: var(--white-color);
	margin: 0;
}

.about-us-prime{
    padding: 100px 0;
}

.about-us-image-box-prime{
    display: flex;
    flex-wrap: wrap;
}

.about-us-image-box-1-prime{
    position: relative;
    background: url('../images/about-image-bg-shape-prime.png') no-repeat;
    background-position: bottom 50px left 140px;
    background-size: 135px auto;
    width: 78%;
    padding-bottom: 130px;
}

.about-us-image-prime figure{
    position: relative;
    display: block;
    border-radius: 20px;
    z-index: 0;
}

.about-us-image-prime img{
    width: 100%;  
    object-fit: cover;
    border-radius: 20px;
}

.about-us-image-box-1-prime .about-us-image-prime img{
    aspect-ratio: 1 / 0.891;
}

.about-us-image-box-2-prime{
    width: 22%;
    align-content: end;
}

.about-us-image-box-2-prime .about-us-image-prime{
    margin-left: -295px;
}

.about-us-image-box-2-prime .about-us-image-prime figure,
.about-us-image-box-1-prime .contact-us-circle-prime a{
    border: 6px solid var(--bg-color);
}

.about-us-image-box-2-prime .about-us-image-prime img{
    aspect-ratio: 1 / 0.748;
    border-radius: 10px;
}

.about-us-image-box-1-prime .contact-us-circle-prime{
    position: absolute;    
    top: 80px;
    right: 0;
    transform: translateX(50%);
    z-index: 1;
}

.about-us-body-item-prime{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.about-us-body-item-prime:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.about-us-body-item-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.about-us-body-item-prime:hover .icon-box{
	background: transparent;
}

.about-us-body-item-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-us-body-item-prime:hover .icon-box::before{
    transform: scale(1);
}

.about-us-body-item-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.about-us-body-item-prime:hover .icon-box img{
   filter: brightness(1) invert(1);
}

.about-body-item-content-prime{
    width: calc(100% - 75px);
}

.about-body-item-content-prime h3{
    font-size: 20px;
}

.about-body-item-content-prime p{
    margin: 10px 0 0;
}

.about-counter-item-list-prime{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.about-counter-item-prime{
    width: calc(50% - 15px);
    background: var(--white-color);
    border-radius: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 40px;
}

.about-counter-item-header-prime{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.about-counter-item-no-prime h2{
    font-size: 50px;
}

.about-counter-item-header-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.about-counter-item-prime:hover .about-counter-item-header-prime .icon-box{
	background: transparent;
}

.about-counter-item-header-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-counter-item-prime:hover .about-counter-item-header-prime .icon-box::before{
    transform: scale(1);
}

.about-counter-item-header-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.about-counter-item-prime:hover .about-counter-item-header-prime .icon-box img{
   filter: brightness(1) invert(1);
}

.about-counter-item-content-prime h3{
    font-size: 20px;
}

.about-counter-item-content-prime p{
    border-top: 1px solid var(--divider-color);
    margin: 15px 0 0;
    padding: 15px 0 0;
}

.our-services-prime{
    padding: 100px 0;
}

.service-item-prime{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--bg-color);
    border-radius: 20px;
    min-height: 390px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-item-prime:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
	left: 0;
    background: var(--primary-color);
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
}

.service-item-prime.active:before,
.service-item-prime:hover:before{
	top: auto;
	bottom: 0;
	height: 100%;
}

.service-item-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.service-item-prime.active .icon-box,
.service-item-prime:hover .icon-box{
	background: transparent;
}

.service-item-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-item-prime.active .icon-box::before,
.service-item-prime:hover .icon-box::before{
    transform: scale(1);
}

.service-item-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-prime.active .icon-box img,
.service-item-prime:hover .icon-box img{
   filter: brightness(1) invert(1);
}

.service-item-body-prime{
    position: relative;
    z-index: 1;
}

.service-item-content-prime h2{
    font-size: 20px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
    transition: all 0.4s ease-in-out;
}

.service-item-content-prime h2 a{
    color: inherit;
}

.service-item-content-prime p{
    transition: all 0.4s ease-in-out;
}

.service-item-content-prime p:last-child{
    margin: 0;
}

.service-item-prime.active .service-item-content-prime h2,
.service-item-prime:hover .service-item-content-prime h2,
.service-item-prime.active .service-item-content-prime p,
.service-item-prime:hover .service-item-content-prime p{
    color: var(--white-color);
}

.service-item-prime.active .service-item-content-prime h2,
.service-item-prime:hover .service-item-content-prime h2{
    border-color: var(--dark-divider-color);
}

.service-item-btn-prime{
    margin-top: 30px;
}

.service-item-btn-prime a{
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--divider-color);
    border-radius: 50%;
}

.service-item-btn-prime a::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-item-prime.active .service-item-btn-prime a::before,
.service-item-prime:hover .service-item-btn-prime a::before{
    transform: scale(1);
}

.service-item-prime.active .service-item-btn-prime a:hover::before,
.service-item-prime:hover .service-item-btn-prime a:hover::before{
    background: var(--white-color);
}

.service-item-btn-prime a img{
    position: relative;
    width: 100%;
    max-width: 20px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-btn-prime a:hover img{
    transform: rotate(45deg);
}

.our-benefits-prime{
    padding: 100px 0;
}

.benefit-image-box-prime{
    position: relative;
}

.benefit-image-prime figure{
    position: relative;
    display: block;
    border-radius: 20px;
}

.benefit-image-prime figure::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(243, 243, 243, 0.00) 0%, var(--bg-color) 88.75%);
    width: 100%;
    height: 120px;
}

.benefit-image-prime img{
    width: 100%;
    aspect-ratio: 1 / 1.041;
    object-fit: cover;
    border-radius: 20px;
}

.benefit-content-box-prime{
    margin-left: 15px;
}

.benefit-counter-box-prime{
    position: absolute;
    bottom: 80px;
    left: 90px;
    width: 240px;
    background: var(--white-color);
    border-radius: 12px;
    text-align: center;
    padding: 30px;
}

.benefit-counter-box-prime h2{
    font-size: 40px;
}

.benefit-counter-box-prime p{
    margin: 5px 0 0;
}

.benefit-counter-rating-prime{
    display: inline-block;
    margin-top: 20px;
}

.benefit-counter-rating-prime i{
    color: var(--accent-secondary-color);
}

.benefit-body-item-list-prime{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.benefit-body-item-list-prime:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.benefit-body-item-prime{
    width: calc(50% - 15px);
}

.benefit-body-item-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 30px;
	transition: all 0.5s ease-in-out;
}

.benefit-body-item-prime:hover .icon-box{
	background: transparent;
}

.benefit-body-item-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.benefit-body-item-prime:hover .icon-box::before{
    transform: scale(1);
}

.benefit-body-item-prime .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.benefit-body-item-prime:hover .icon-box img{
   filter: brightness(1) invert(1);
}

.benefit-body-item-content-prime h3{
    font-size: 20px;
}

.benefit-body-item-content-prime p{
    margin: 10px 0 0;
}

.our-facts-prime{
    padding: 100px 0;
}

.fact-item-prime{
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    transition: all 0.4s ease-in-out;
}

.fact-item-prime:hover{
    transform: translateY(-5px);
}

.fact-item-header-prime .icon-box{
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.5s ease-in-out;
}

.fact-item-header-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.fact-item-prime:hover .fact-item-header-prime .icon-box::before{
    transform: scale(1);
}

.fact-item-header-prime .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.fact-item-list-prime{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 20px;
    padding-top: 20px;
}

.fact-item-list-prime ul{
    list-style: disc;
    padding: 0 0 0 20px;
    margin: 0;
}

.fact-item-list-prime ul li{
    line-height: 1.5em;
    color: var(--white-color);
    margin: 0 0 10px;
}

.fact-item-list-prime ul li:last-child{
    margin: 0;
}

.fact-item-list-prime ul li::marker{
    color: var(--accent-secondary-color);
}

.fact-item-body-prime h2{
    font-size: 50px;
    color: var(--white-color);
    line-height: 1em;
}

.fact-item-body-prime p{
    color: var(--white-color);
    margin: 15px 0 0;
}

.company-supports-slider-box-prime{
    margin-top: 50px;
}

.company-supports-content-prime{
    display: flex;
    align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content-prime hr{
    height: 1px;
    width: 35%;
    color: var(--dark-divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content-prime p{
    color: var(--white-color);
    margin-bottom: 0;
}

.company-supports-slider-prime{
    margin: 0 4.167vw;
}

.company-supports-logo-prime{
	text-align: center;
}

.company-supports-logo-prime img{
	width: 100%;
	max-width: 170px;
    height: 40px;
}

.why-choose-us-prime{
    padding: 100px 0;
}

.why-choose-item-prime{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    gap: 20px;
    background: var(--white-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px 40px 0;
    overflow: hidden;
}

.why-choose-item-header-prime .icon-box{
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
	transition: all 0.5s ease-in-out;
}

.why-choose-item-prime:hover .why-choose-item-header-prime .icon-box{
    background: transparent;
}

.why-choose-item-header-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.why-choose-item-prime:hover .why-choose-item-header-prime .icon-box::before{
    transform: scale(1);
}

.why-choose-item-header-prime .icon-box img{
    position: relative;
	width: 100%;
	max-width: 30px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.why-choose-item-prime:hover .why-choose-item-header-prime .icon-box img{
    filter: brightness(0) invert(0);
}

.why-choose-header-content-prime{
    margin-top: 40px;
}

.why-choose-header-content-prime h3{
    font-size: 20px;
}

.why-choose-header-content-prime p{
    border-top: 1px solid var(--divider-color);
    margin: 20px 0 0;
    padding: 20px 0 0;
}

.why-choose-item-image-prime figure{
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
}

.why-choose-item-image-prime img{
    width: 100%;
    aspect-ratio: 1 / 0.658;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.intro-video-prime{
    position: relative;
    min-height: 900px;
    align-content: end;
    padding: 100px 0;
    overflow: hidden;
}

.intro-video-prime.dark-section.dark-section-prime{
    background-image: url('../images/intro-video-bg-prime1.png');
}

.intro-video-prime::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(4, 6, 24, 0.00) 0%, rgba(4, 6, 24, 0.95) 80%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.intro-video-prime .container{
    position: relative;
    z-index: 2;
}

.intro-video-content-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.intro-video-content-prime .section-title{
    width: calc(60% - 15px);
    margin: 0;
}

.intro-video-circle-box-prime{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}

.video-play-button-prime a{
    position: relative;
    height: 120px;
    width: 120px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    transition: all 0.4s ease-in-out;
}

.video-play-button-prime a:hover{
    background-color: var(--white-color);
    color: var(--primary-color);
}

.video-play-button-prime a i{
    font-size: 24px;
    color: inherit;
    margin-left: 2px;
}

.intro-video-circle-box-prime .contact-us-circle-prime{
    margin-left: -20px;
}

.intro-video-list-prime{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding-top: 60px;
}

.intro-video-list-prime ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.intro-video-list-prime ul li{
    position: relative;
    width: calc(25% - 15px);
    line-height: 1.5em;
    color: var(--white-color);
    padding-left: 25px;
}

.intro-video-list-prime ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
    top: 0;
    left: 0;
}

.our-faqs-prime{
    padding: 100px 0;
}

.faq-image-box-prime{
    position: relative;
    height: 100%;
}

.faq-image-prime{
    height: 100%;
}

.faq-image-prime figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.faq-image-prime img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.286;
    object-fit: cover;
    border-radius: 20px;
}

.faq-cta-box-prime{
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--bg-color);
    border: 20px solid var(--bg-color);
    border-bottom: none;
    border-left: none;
    border-radius: 0 20px 0 0;
    z-index: 1;
}

.faq-cta-box-prime::before,
.faq-cta-box-prime::after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	mask: url('../images/image-corner-bg-shape.svg');
	-webkit-mask: url('../images/image-corner-bg-shape.svg');
	background-color: var(--bg-color);
	mask-repeat: no-repeat;
	mask-size: cover;
	z-index: 1;
}

.faq-cta-box-prime::before{
	top: -40px;
	left: 0;
}

.faq-cta-box-prime::after{
	right: -40px;
	bottom: 0;
}

.faq-cta-content-box-prime{
    max-width: 215px;
    background-color: var(--accent-color);
    padding: 30px;
    border-radius: 20px;
}

.faq-cta-content-box-prime .icon-box{
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    border-radius: 50%;
}

.faq-cta-content-box-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.faq-image-box-prime:hover .faq-cta-content-box-prime .icon-box::before{
    transform: scale(1);
}

.faq-cta-content-box-prime .icon-box img{
    position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.faq-cta-content-prime h3{
    font-size: 18px;
    color: var(--white-color);
}

.faq-cta-content-prime p{
    color: var(--white-color);
    border-top: 1px solid var(--dark-divider-color);
    margin: 10px 0 0;
    padding: 10px 0 0;
}

.faq-cta-content-prime p a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.faq-cta-content-prime p a:hover{
    color: var(--accent-secondary-color);
}

.faqs-content-prime{
    height: 100%;
    align-content: center;
    margin-left: 15px;
}

.faq-accordion-prime .accordion-item-prime{
	background: var(--white-color);
	border-radius: 20px;
	margin-bottom: 30px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.faq-accordion-prime .accordion-item-prime:last-child{
	margin-bottom: 0;
}

.faq-accordion-prime .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.333em;
    background-color: var(--white-color);
    color: var(--primary-color);
    padding: 22px 60px 22px 30px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion-prime .accordion-header .accordion-button:not(.collapsed){
	background-color: var(--accent-color);
	color: var(--white-color);
}

.faq-accordion-prime .accordion-item-prime:last-child .accordion-header .accordion-button.collapsed{
	border-bottom: none;
}

.faq-accordion-prime .accordion-item-prime .accordion-button::after, 
.faq-accordion-prime .accordion-item-prime .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
    right: 30px;
    top: 50%;
    font-size: 20px;
	transform: translateY(-50%);
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.faq-accordion-prime .accordion-button:not(.collapsed)::after{
    transform: translateY(-50%) rotate(45deg);
	color: var(--white-color);
}

.faq-accordion-prime .accordion-item-prime .accordion-body{
	background-color: var(--accent-color);
	border-top: 1px solid var(--dark-divider-color);
	padding: 22px 30px;
}

.faq-accordion-prime .accordion-item-prime .accordion-body p{
	color: var(--white-color);
	margin: 0;
}

.our-testimonials-prime{
    padding: 100px 0;
}

.testimonial-slider-prime .swiper-wrapper{
    cursor: none;
}

.testimonial-item-prime{
    min-height: 530px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    padding: 40px;
}

.testimonial-company-logo-prime img{
    width: 100%;
    max-width: 170px;
    height: 40px;
}

.testimonial-item-content-prime p{
    font-size: 20px;
    font-weight: 600;
    color: var(--white-color);
}

.testimonial-item-content-prime p:last-child{
    margin-bottom: 0;
}

.testimonial-item-footer-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.testimonial-author-content-prime{
    width: calc(100% - 65px);
}

.testimonial-author-content-prime h3{
    font-size: 20px;
    color: var(--white-color);
}

.testimonial-author-content-prime p{
    color: var(--white-color);
    margin: 5px 0 0;
}

.testimonial-item-quote-prime{
    position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.testimonial-item-quote-prime img{
    width: 100%;
    max-width: 24px;
}

.our-testimonials-prime .section-footer-text{
    margin-top: 60px;
}

.main-footer-prime{
    padding: 100px 0 0;
    margin-bottom: 20px;
}

.footer-logo-prime img{
    width: 100%;
    max-width: 177px;
}

.about-footer-content-prime{
    margin: 15px 0 0;
}

.about-footer-content-prime p{
    color: var(--white-color);
    margin: 0;
}

.footer-newsletter-form-prime{
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    padding: 30px;
    margin-top: 40px;
}

.footer-newsletter-form-prime h3{
    font-size: 20px;
    color: var(--white-color);
}

.footer-newsletter-form-prime p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.footer-newsletter-form-prime .form-group{
	display: flex;
	flex-wrap: wrap;
	background: var(--divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border-radius: 10px;
	padding: 7px;
	margin-top: 30px;
}

.footer-newsletter-form-prime .form-group .form-control{
	width: calc(100% - 46px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 14px;
}

.footer-newsletter-form-prime .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form-prime .form-group .newsletter-btn{
	width: 46px;
	height: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-secondary-color);
	border: none;
	border-radius: 10px;
	outline: none;
	box-shadow: none;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-prime .form-group .newsletter-btn:hover{
    background-color: var(--white-color);
}

.footer-newsletter-form-prime .form-group .newsletter-btn img{
    width: 100%;
    max-width: 26px;
    transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-prime .form-group .newsletter-btn:hover img{
	transform: rotate(45deg);
}

.footer-links-box-prime{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-left: 3.646vw;
}

.footer-links-prime{
    max-width: 34%;
}

.footer-links-prime h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-links-prime ul{
	list-style: disc;
    margin: 0;
    padding: 0 0 0 20px;
}

.footer-links-prime ul li{
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 15px;
}

.footer-links-prime ul li:last-child{
	margin-bottom: 0;
}

.footer-links-prime ul li::marker{
    color: var(--accent-secondary-color);
}

.footer-links-prime ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links-prime ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-contact-list-prime{
    max-width: 41%;
}

.footer-contact-list-prime ul{
    list-style: none;
    padding: 0;
}

.footer-contact-list-prime ul li span{
    font-weight: 600;
}

.footer-social-links-prime{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.footer-social-links-prime h3{
    font-size: 20px;
    color: var(--white-color);
}

.footer-social-links-prime ul{
	display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social-links-prime ul li a{
	display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    color: var(--white-color);
    background: var(--dark-divider-color);
    backdrop-filter: blur(180px);
    -webkit-backdrop-filter: blur(180px);
    border-radius: 12px;
    padding: 10px 16px;
    transition: all 0.4s ease-in-out;
}

.footer-social-links-prime ul li a:hover{
    background: var(--accent-secondary-color);
    color: var(--primary-color);
}

.footer-social-links-prime ul li a i{
    font-size: 20px;
    line-height: normal;
    color: inherit;
}

.footer-copyright-text-prime{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding: 60px 0;
    text-align: center;
}

.footer-copyright-text-prime p{
    color: var(--white-color);
    margin: 0;
}

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

    .about-us-image-box-1-prime .contact-us-circle-prime{
        top: 60px;
    }

    .about-counter-item-prime{
        padding: 30px;
    }

    .service-item-prime{
        min-height: 350px;
        padding: 30px 25px;
    }

    .benefit-content-box-prime{
        margin: 0;
    }

    .fact-item-prime{
        padding: 30px;
    }

    .why-choose-item-prime{
        padding: 30px 30px 0;
    }

    .faq-cta-content-box-prime{
        padding: 20px;
    }

    .faq-cta-content-box-prime .icon-box{
        margin-bottom: 30px;
    }

    .testimonial-item-prime{
        min-height: 460px;
        padding: 30px;
    }

    .footer-newsletter-form-prime{
        padding: 20px;
        margin-top: 30px;
    }

    .footer-links-box-prime{
        margin-left: 15px;
    }

    .footer-social-links-prime ul{
        gap: 10px 15px;
    }

    .footer-social-links-prime ul li a{
        padding: 10px;
    }
}

@media only screen and (max-width: 1024px){
    
    .hero-prime{
        padding-bottom: 50px;
    }

    .hero-benefit-item-prime{
        width: calc(50% - 15px);
        border-radius: 20px;
        align-content: center;
        padding: 30px;
    }
    
    .hero-benefit-item-prime.box-2{
        width: calc(50% - 15px);
    }

    .about-us-image-box-prime{
        max-width: 800px;
        margin: 0 auto 30px;
    }

    .service-item-prime{
        min-height: initial;
    }

    .benefit-image-box-prime{
        max-width: 780px;
        margin: 0 auto 30px;
    }

    .fact-item-prime{
        min-height: initial;
    }

    .company-supports-content-prime hr{
        width: 26%;
    }

    .company-supports-slider-prime{
        margin: 0;
    }

    .intro-video-content-prime .section-title{
        width: 100%;
    }

    .intro-video-list-prime ul li{
        width: calc(50% - 10px);
    }

    .faq-image-box-prime,
    .faq-image-prime,
    .faq-image-prime figure,
    .faq-image-prime img{
        height: auto;
    }
    
    .faq-image-box-prime{
        max-width: 780px;
        margin: 0 auto 30px;
    }
    
    .faq-image-prime img{
        aspect-ratio: 1 / 0.95;
    }

    .faqs-content-prime{
        margin: 0;
    }

    .about-footer-prime{
        margin-bottom: 30px;
    }

    .footer-links-box-prime{
        margin: 0;
    }

    .footer-social-links-prime{
        margin-top: 0;     
    }

    .footer-copyright-text-prime{
        margin-top: 30px;
        padding: 30px 0;
    }
}

@media only screen and (max-width: 991px){
    
    .hero-prime{
        padding: 140px 0 50px;
        margin: 0;
    }

    .hero-benefit-item-list-prime{
        margin-top: 50px;
    }

    .hero-benefit-item-list-prime{
        align-items: initial;
    }

    .hero-benefit-item-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .hero-benefit-item-prime .icon-box img{
        max-width: 24px;
    }

    .contact-us-circle-prime img{
        max-width: 100px;
    }

    .hero-rating-box-prime{
        margin-top: 30px;
    }

    .hero-rating-logo-prime img{
        max-width: 45px;
    }

    .hero-rating-info-prime{
        width: calc(100% - 60px);
    }

    .hero-rating-header-prime h3{
        font-size: 26px;
    }

    .about-us-prime{
        padding: 50px 0;
    }

    .about-us-image-box-1-prime{
        padding-bottom: 100px;
    }

    .about-us-body-item-prime{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .about-us-body-item-prime .icon-box,
    .about-counter-item-header-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .about-us-body-item-prime .icon-box img,
    .about-counter-item-header-prime .icon-box img{
        max-width: 24px;
    }

    .about-body-item-content-prime{
        width: calc(100% - 65px);
    }

    .about-counter-item-list-prime{
        margin-top: 30px;
    }

    .about-counter-item-no-prime h2{
        font-size: 38px;
    }

    .our-services-prime{
        padding: 50px 0;
    }

    .service-item-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .service-item-prime .icon-box img{
        max-width: 24px;
    }
    
    .our-benefits-prime{
        padding: 50px 0;
    }

    .benefit-counter-box-prime{
        padding: 20px;
    }

    .benefit-counter-box-prime h2{
        font-size: 34px;
    }

    .benefit-body-item-list-prime{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .benefit-body-item-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .benefit-body-item-prime .icon-box img{
        max-width: 24px;
    }
    
    .our-facts-prime{
        padding: 50px 0;
    }
    
    .fact-item-header-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .fact-item-header-prime .icon-box img{
        max-width: 24px;
    }

    .fact-item-body-prime h2{
        font-size: 38px;
    }

    .company-supports-slider-box-prime{
        margin-top: 10px;
    }

    .company-supports-content-prime{
        margin-bottom: 20px;
    }

    .why-choose-us-prime{
        padding: 50px 0;
    }

    .why-choose-item-prime{
        padding: 20px 20px 0;
    }

    .why-choose-header-content-prime{
        margin-top: 30px;
    }

    .why-choose-item-header-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .why-choose-item-header-prime .icon-box img{
        max-width: 24px;
    }

    .intro-video-prime{
        padding: 50px 0;
        min-height: auto;
    }

    .video-play-button-prime a{
        width: 100px;
        height: 100px;
    }

    .video-play-button-prime a i{
        font-size: 20px;
    }

    .intro-video-list-prime{
        margin-top: 30px;
        padding-top: 30px;
    }

    .intro-video-list-prime ul li::before{
        font-size: 16px;
    }

    .our-faqs-prime{
        padding: 50px 0;
    }

    .faq-cta-content-box-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .faq-cta-content-box-prime .icon-box img{
        max-width: 24px;
    }

    .faq-accordion-prime .accordion-item-prime{
        border-radius: 12px;
        margin-bottom: 20px;
    }

    .faq-accordion-prime .accordion-header .accordion-button{
        padding: 16px 45px 16px 20px;
    }

    .faq-accordion-prime .accordion-item-prime .accordion-body{
        padding: 16px 20px;
    }

    .faq-accordion-prime .accordion-item-prime .accordion-button::after,
    .faq-accordion-prime .accordion-item-prime .accordion-button.collapsed::after{
        right: 20px;
    }

    .our-testimonials-prime{
        padding: 50px 0;
    }

    .testimonial-item-prime{
        min-height: initial;
        gap: 30px;
        padding: 20px;
    }

    .testimonial-item-content-prime p{
        font-size: 18px;
    }

    .testimonial-item-footer-prime{
        margin-top: 30px;
        padding-top: 30px;
    }

    .our-testimonials-prime .section-footer-text{
        margin-top: 40px;
    }

    .main-footer-prime{
        padding: 50px 0 0;
        margin: 0;
    }

    .footer-links-prime h3{
        margin-bottom: 20px;
    }

    .footer-links-prime ul li{
        margin-bottom: 10px;
    }
}

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

    .hero-benefit-item-list-prime{
        gap: 20px;
    }

    .hero-benefit-item-prime,
    .hero-benefit-item-prime.box-2{
        width: 100%;
    }

    .hero-benefit-item-prime{
        padding: 20px;
    }

    .hero-benefit-item-prime .icon-box{
        margin-bottom: 20px;
    }

    .hero-benefit-item-content-prime h2{
        font-size: 18px;
    }

    .hero-rating-header-prime h3{
        width: 60px;
        font-size: 22px;
    }

    .about-us-image-box-1-prime,
    .about-us-image-box-2-prime{
        width: 100%;
    }

    .about-us-image-box-1-prime{
        background: transparent;
        padding-bottom: 20px;
    }

    .about-us-image-box-1-prime .contact-us-circle-prime{
        top: auto;
        left: 50%;
        transform: translate(-50%, 50%);
        right: auto;
        bottom: 10px;
    }

    .about-us-image-box-2-prime .about-us-image-prime{
        margin: 0;
    }

    .about-us-image-box-2-prime .about-us-image-prime figure{
        border: none;
    }

    .about-us-body-item-prime{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .about-body-item-content-prime{
        width: 100%;
    }

    .about-body-item-content-prime h3{
        font-size: 18px;
    }
    
    .about-counter-item-prime{
        width: 100%;
        padding: 20px;
        min-height: initial;
    }

    .about-counter-item-no-prime h2{
        font-size: 26px;
    }

    .about-counter-item-content-prime h3{
        font-size: 18px;
    }

    .service-item-prime{
        padding: 20px;
        gap: 20px;
    }

    .service-item-content-prime h2{
        font-size: 18px;
    }

    .service-item-btn-prime{
        margin-top: 20px;
    }

    .benefit-counter-box-prime{
        width: 200px;
        bottom: 0;
        left: 0px;
        padding: 15px;
    }

    .benefit-counter-box-prime h2{
        font-size: 28px;
    }
    
    .benefit-counter-rating-prime{
        margin-top: 10px;
    }

    .benefit-body-item-list-prime{
        border: none;
        padding: 0;
        margin-bottom: 30px;
    }

    .benefit-body-item-prime{
        width: 100%;
    }

    .benefit-body-item-prime .icon-box{
        margin-bottom: 20px;
    }

    .benefit-body-item-content-prime h3{
        font-size: 18px;
    }

    .benefit-body-item-content-prime p{
        margin-top: 5px;
    }

    .fact-item-prime{
        padding: 20px;
    }

    .fact-item-body-prime h2{
        font-size: 26px;
    }

    .company-supports-content-prime hr{
        width: 0;
    }

    .company-supports-logo-prime img{
        max-width: 160px;
        height: 34px;
    }

    .why-choose-header-content-prime{
        margin-top: 20px;
    }

    .why-choose-header-content-prime h3{
        font-size: 18px;
    }
    
    .why-choose-header-content-prime p{
        margin-top: 15px;
        padding-top: 15px;
    }

    .intro-video-list-prime ul{
        gap: 10px;
    }

    .intro-video-list-prime ul li{
        width: 100%;
    }

    .faq-image-prime img{
        aspect-ratio: 1 / 1.286;
    }

    .faq-cta-box-prime{
        position: initial;
        border: none;
        margin-top: 20px;
    }

    .faq-cta-box-prime::before,
    .faq-cta-box-prime::after{
        display: none;
    }

    .faq-cta-content-box-prime{
        max-width: 100%;
        padding: 15px;
    }

    .faq-cta-content-box-prime .icon-box{
        margin-bottom: 15px;
    }

    .faq-accordion-prime .accordion-header .accordion-button{
        padding: 12px 35px 12px 15px;
    }

    .faq-accordion-prime .accordion-item-prime .accordion-body{
        padding: 12px 15px;
    }

    .faq-accordion-prime .accordion-item-prime .accordion-button::after,
    .faq-accordion-prime .accordion-item-prime .accordion-button.collapsed::after{
        right: 15px;
        font-size: 18px;
    }

    .testimonial-item-prime{
        gap: 20px;
    }

    .testimonial-item-content-prime p{
        font-size: 16px;
    }

    .testimonial-item-footer-prime{
        margin-top: 20px;
        padding-top: 20px;
    }

    .testimonial-author-content-prime h3{
        font-size: 18px;
    }
    
    .footer-newsletter-form-prime h3{
        font-size: 18px;
    }

    .footer-newsletter-form-prime .form-group{
        margin-top: 20px;
        padding: 5px;
    }
    
    .footer-newsletter-form-prime .form-group .form-control{
        width: calc(100% - 40px);
    }

    .footer-newsletter-form-prime .form-group .newsletter-btn{
        width: 40px;
        height: 40px;
    }

    .footer-newsletter-form-prime .form-group .newsletter-btn img{
        max-width: 22px;
    }

    .footer-links-prime{
        max-width: 100%;
    }

    .footer-links-prime h3{
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-social-links-prime h3,
    .footer-social-links-prime ul li a i{
        font-size: 18px;
    }

    .footer-copyright-text-prime{
        padding: 15px 0;
    }
}

/************************************/
/***   35. Home - Version 3 css	  ***/
/************************************/

.hero-metal{
    position: relative;
    background-image: url('../images/hero-bg-image-metal.jpg');
    background-position: center center;
    padding: 250px 0 0;
    margin-top: 20px;
    overflow: hidden;
}

.hero-metal::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, transparent 0%, rgba(4, 6, 24, 0.80) 91.83%), linear-gradient(0deg, rgba(4, 6, 24, 0.60) 0%, rgba(4, 6, 24, 0.60) 100%);
    z-index: 1;
}

.hero-metal .container{
    position: relative;
    z-index: 2;
}

.hero-content-metal{
    padding-right: 5.208vw;
}

.hero-content-footer-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 50px;
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.hero-rating-box-header-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.hero-rating-box-header-metal h2{
    font-size: 20px;
    color: var(--white-color);
}

.hero-rating-box-header-metal p{
    margin-bottom: 0;
}

.hero-rating-box-header-metal p i{
    color: var(--accent-secondary-color);
}

.hero-rating-box-content-metal{
    margin-top: 5px;
}

.hero-rating-box-content-metal p{
    color: var(--white-color);
    margin-bottom: 0;
}

.hero-watch-video-circle-metal{
    text-align: center;
}

.hero-watch-video-circle-metal a{
    display: inline-block;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
	cursor: none;
    border-radius: 50%;
}

.hero-watch-video-circle-metal img{
    width: 100%;
    max-width: 140px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

.hero-watch-video-circle-metal img:hover{
    animation-play-state: paused;
}

.hero-info-box-metal{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    background-color: var(--bg-color);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px 0;
    border-bottom: none;
    margin-top: 140px;
}


.hero-info-box-metal::before,
.hero-info-box-metal::after{
	content: '';
	position: absolute;
	left: -20px;
    bottom: 0;
	width: 20px;
    height: 20px;
	mask: url('../images/image-corner-bg-shape.svg');
	-webkit-mask: url('../images/image-corner-bg-shape.svg');
	background-color: var(--bg-color);
	mask-repeat: no-repeat;
	mask-size: cover;
    transform: rotate(-90deg);
	z-index: 1;
}

.hero-info-box-metal::before{
    right: -20px;
    left: auto;
    transform: rotate(0deg);
}

.hero-info-item-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    background-color: var(--primary-color);
    border-radius: 20px;
    overflow: hidden;
}

.hero-info-item-metal.box-1{
    width: calc(45% - 20px);
    padding: 10px;
}

.hero-info-item-metal.box-1 .hero-info-item-image-metal{
    width: calc(44% - 15px);
}

.hero-info-item-metal.box-1 .hero-info-item-image-metal figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.hero-info-item-metal.box-1 .hero-info-item-image-metal img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1.064;
    object-fit: cover;
    border-radius: 20px;
}

.hero-info-item-metal.box-1 .hero-info-item-content-box-metal{
    width: calc(56% - 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 30px 30px 30px 0;
}

.hero-info-item-content-box-metal .satisfy-client-image img{
    max-width: 42px;
}

.hero-info-item-content-box-metal .satisfy-client-image.add-more{
    width: 44px;
    height: 44px;
}

.hero-info-item-content-metal h3{
    color: var(--white-color);
    font-size: 20px;
}

.hero-info-item-content-metal p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.hero-info-item-metal.box-2{
    width: calc(30% - 20px);
    background-color: var(--white-color);
    text-align: center;
    padding: 40px 30px;
}

.hero-info-item-metal.box-2 .hero-info-item-content-box-metal .satisfy-client-images{
    margin-bottom: 15px;
}

.hero-info-item-metal.box-2 .hero-info-item-content-box-metal .satisfy-client-image img{
    max-width: 34px;
}

.hero-info-item-metal.box-2 .hero-info-item-content-box-metal .satisfy-client-image.add-more{
    width: 36px;
    height: 36px;
}

.hero-info-item-metal.box-2 .hero-info-item-content-metal h3,
.hero-info-item-metal.box-2 .hero-info-item-content-metal p{
    color: var(--primary-color);
}

.trusted-parters-list-metal{
    align-content: center;
    margin: 0 -30px 0;
}

.scrolling-ticker-item-metal{
	--gap: 20px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content-metal{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 20s linear infinite;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.scrolling-content-metal span img{
	width: 100%;
    max-width: 124px;
}

.hero-info-item-metal.box-3{
    width: calc(25% - 20px);
    background-color: var(--accent-secondary-color);
    flex-direction: column;
    padding: 30px;
}

.hero-info-item-header-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-right: 50px;
}

.hero-info-item-header-metal .icon-box{
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 10px;
}

.hero-info-item-header-metal .icon-box img{
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.hero-info-item-metal.box-3 .hero-info-item-content-metal{
    width: calc(100% - 65px);
}

.hero-info-item-metal.box-3 .hero-info-item-content-metal h3,
.hero-info-item-metal.box-3 .hero-info-item-content-metal p{
    color: var(--primary-color);
}

.hero-info-counter-box-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-info-counter-item-metal{
    width: calc(60% - 10px);
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
}

.hero-info-counter-image-metal{
    width: calc(40% - 10px);
}

.hero-info-counter-item-metal h2{
    font-size: 40px;
}

.hero-info-counter-item-metal p{
    color: var(--primary-color);
    margin: 10px 0 0;
}

.hero-info-counter-image-metal figure{
    display: block;
    margin: -70px -90px -70px -20px;
}

.hero-info-counter-image-metal img{
    width: 100%;
    max-width: 230px;
    aspect-ratio: 1 / 1.18;
    object-fit: cover;
    border-radius: 20px;
}

.about-us-metal{
    padding: 100px 0;
}

.about-us-image-box-metal{
    position: relative;
    height: 100%;
}

.about-us-image-metal{
    height: 100%;
}

.about-us-image-metal figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.about-us-image-metal img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.192;
    object-fit: cover;
    border-radius: 20px;
}

.about-cta-box-metal{
    width: 340px;
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: var(--divider-color);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px;
}

.about-cta-header-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 10px;
}

.about-cta-counter-item-metal{
    width: calc(100% - 115px);
}

.about-cta-counter-item-metal h2{
    font-size: 50px;
    font-weight: 500;
    line-height: 1em;
    color: var(--white-color);
}

.about-cta-counter-item-metal p{
    color: var(--white-color);
    margin: 10px 0 0 0;
}

.about-cta-header-metal .satisfy-client-image img{
    max-width: 34px;
}

.about-cta-header-metal .satisfy-client-image.add-more{
    width: 36px;
    height: 36px;
}

.about-cta-header-metal .satisfy-client-image.add-more i{
    font-size: 16px;
}

.about-cta-body-metal{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 20px;
    padding-top: 20px;
}

.about-cta-body-rating-metal i{
    color: var(--accent-secondary-color);
}

.about-cta-body-metal p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.about-us-content-metal{
    height: 100%;
    align-content: center;
    margin-left: 15px;
}

.about-us-body-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.about-body-item-list-metal{
    width: calc(100% - 380px);
}

.about-body-item-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.about-body-item-metal:last-child{
    margin-bottom: 0;
}

.about-body-item-metal .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
    transition: all 0.5s ease-in-out;
	overflow: hidden;
}

.about-body-item-metal:hover .icon-box{
    background-color: transparent;
}

.about-body-item-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-body-item-metal:hover .icon-box:before{
	transform: scale(1);
}

.about-body-item-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-body-item-metal:hover .icon-box img{
    filter: brightness(0) invert(0);
}

.about-body-item-content-metal{
	width: calc(100% - 75px);
}

.about-body-item-content-metal h3{
	font-size: 20px;
}

.about-body-item-content-metal p{
    margin: 10px 0 0;
}

.about-body-counter-box-metal{
    width: 350px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 30px;
    background-color: var(--white-color);
    border-radius: 20px;
    overflow: hidden;
}

.about-body-counter-image-metal,
.about-body-counter-item-metal{
    width: calc(50% - 5px);
}

.about-body-counter-image-metal{
    align-content: end;
}

.about-body-counter-image-metal figure{
    margin: -20px 0px -30px -70px;
}

.about-body-counter-image-metal img{
    width: 100%;
    object-fit: cover;
}

.about-body-counter-item-metal h2{
    font-size: 50px;
    font-weight: 500;
}

.about-body-counter-item-metal p{
    margin: 10px 0 0;
}

.about-us-footer-metal{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
	gap: 20px 30px;
	margin-top: 40px;
}

.about-us-contact-box-metal{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-box-metal .icon-box{
    position: relative;
    background: var(--accent-secondary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.about-us-contact-box-metal .icon-box::before{
    content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-us-contact-box-metal:hover .icon-box::before{
    transform: scale(1);
}

.about-us-contact-box-metal .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-contact-box-metal:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-conatct-content-metal p{
	margin: 0 0 5px;
}

.about-us-conatct-content-metal h3{
	font-size: 20px;
}

.about-us-conatct-content-metal h3 a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-us-conatct-content-metal h3 a:hover{
	color: var(--accent-secondary-color);
}

.our-services-metal{
    padding: 100px 0;
}

.service-item-metal{
    background-color: var(--bg-color);
    border-radius: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
}

.service-item-body-metal{
    border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.service-item-header-metal .icon-box{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

.service-item-metal:hover .service-item-header-metal .icon-box{
    background-color: transparent;
}

.service-item-header-metal .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item-metal:hover .service-item-header-metal .icon-box::before{
    transform: scale(1);
}

.service-item-header-metal .icon-box img{
    position: relative;
    width: 100%;
    max-width: 30px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-metal:hover .service-item-header-metal .icon-box img{
    filter: brightness(1) invert(1);
}

.service-item-content-metal h2{
    font-size: 20px;
}

.service-item-content-metal h2 a{
    color: inherit;
}

.service-item-content-metal p{
    margin: 10px 0 0;
}

.service-item-btn-metal{
    margin-top: 40px;
}

.service-item-btn-metal .readmore-btn{
    padding-right: 35px;
    transition: all 0.4s ease-in-out;
}

.service-item-btn-metal .readmore-btn::before{
    height: 26px;
    width: 26px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    background-size: 16px auto;
}

.why-choose-us-metal{
    padding: 100px 0;
}

.why-choose-video-box-metal{
    position: relative;
    margin-right: 20px;
    height: 100%;
}

.why-choose-video-image-metal{
    height: 100%;
}

.why-choose-video-image-metal figure{
	display: block;
    height: 100%;
	border-radius: 20px;
}

.why-choose-video-image-metal img{
	width: 100%;
    height: 100%;
	aspect-ratio: 1 / 1.2;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-video-box-metal .video-play-button-metal{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1;
}

.video-play-button-metal a{
	position: relative;
	height: 70px;
	width: 70px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button-metal:hover a{
	background: var(--primary-color);
}

.video-play-button-metal a.bg-effect:before,
.video-play-button-metal a.bg-effect:after{
	content: '';
	position: absolute;
	top: -36%;
	left: -36%;
	width: 100%;
	height: 100%;
	border: 60px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button-metal a.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button-metal a i{
	font-size: 24px;
	color: var(--primary-color);
	margin-left: 2px;
	transition: all 0.3s ease-in-out;
}

.video-play-button-metal:hover a i{
	color: var(--white-color);
}

.why-choose-us-content-metal{
    height: 100%;
    align-content: center;
}

.why-choose-body-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.why-choose-body-item-metal{
    width: calc(50% - 15px);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 30px;
}

.why-choose-body-item-metal .icon-box{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

.why-choose-body-item-metal:hover .icon-box{
    background-color: transparent;
}

.why-choose-body-item-metal .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-body-item-metal:hover .icon-box::before{
    transform: scale(1);
}

.why-choose-body-item-metal .icon-box img{
    position: relative;
    width: 100%;
    max-width: 30px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.why-choose-body-item-metal:hover .icon-box img{
    filter: brightness(1) invert(1);
}

.why-choose-body-content-metal{
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
}

.why-choose-body-content-metal h3{
    font-size: 20px;
}

.why-choose-body-content-metal p{
    margin: 10px 0 0;
}

.why-choose-us-content-metal .section-footer-text.section-satisfy-img{
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
    text-align: left;
    justify-content: start;
}

.our-pricing-metal{
    padding: 100px 0;
}

.our-pricing-metal .pricing-item{
    background: var(--bg-color);
}

.our-pricing-metal .pricing-item .pricing-item-header{
    background: var(--white-color);
}

.who-we-are-metal{
    padding: 100px 0;
}

.who-we-are-image-box-metal{
    position: relative;
    padding: 0 90px 90px 0;
    margin-right: 20px;
}

.who-we-are-image-metal figure{
    display: block;
    border-radius: 20px;
}

.who-we-are-image-metal img{
    width: 100%;
    aspect-ratio: 1 / 0.999;
    object-fit: cover;
    border-radius: 20px;
}

.who-we-are-skills-box-metal{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 360px;
    background: var(--white-color);
    border-radius: 20px;
    padding: 30px;
}

.who-we-are-skills-title-metal{
    margin-bottom: 30px;
}

.who-we-are-skills-title-metal h3{
    font-size: 20px;
}

.who-we-are-skills-list-metal .skills-progress-bar{
    width: 100%;
    margin-bottom: 20px;
}

.who-we-are-skills-list-metal .skills-progress-bar:last-child{
    margin-bottom: 0;
}

.who-we-are-skills-list-metal .skills-progress-bar .skill-data .skill-title{
    color: var(--primary-color);
    font-weight: 500;
}

.who-we-are-skills-list-metal .skills-progress-bar .skillbar .skill-progress{
    height: 3px;
}

.who-we-are-body-box-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.who-we-are-body-item-metal{
    width: calc(33.33% - 20px);
    background: var(--white-color);
    border-radius: 20px;
    text-align: center;
    padding: 30px;
}

.who-we-are-body-item-metal .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.who-we-are-body-item-metal:hover .icon-box{
    background: transparent;
}

.who-we-are-body-item-metal .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.who-we-are-body-item-metal:hover .icon-box::before{
    transform: scale(1);
}

.who-we-are-body-item-metal .icon-box img{
    position: relative;
	width: 100%;
	max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.who-we-are-body-item-metal:hover .icon-box img{
    filter: brightness(0) invert(0);
}

.who-we-are-body-content-metal h3{
    font-size: 16px;
    line-height: normal;
}

.who-we-are-footer-box-metal{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
    border-top: 1px solid var(--divider-color);
	margin-top: 40px;
    padding-top: 40px;
}

.our-testimonials-metal{
    padding: 100px 0;
}

.testimonial-content-box-metal{
    position: sticky;
    top: 30px;
}

.testimonial-slider-metal .swiper-wrapper{
    cursor: none;
}

.testimonial-item-metal{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 410px;
}

.testimonial-item-header-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 50px;
}

.testimonial-company-logo-metal img{
    width: 100%;
    max-width: 170px;
}

.testimonial-item-quote-metal img{
    width: 100%;
    max-width: 44px;
}

.testimonial-item-content-metal p{
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.testimonial-author-content-metal{
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
}

.testimonial-author-content-metal h3{
    font-size: 20px;
}

.testimonial-author-content-metal p{
    margin: 5px 0 0 ;
}

.testimonial-btn-metal{
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 15px;
	z-index: 1;
}

.testimonial-slider-metal .testimonial-button-next-metal,
.testimonial-slider-metal .testimonial-button-prev-metal{
	position: relative;
	width: 40px;
	height: 40px;
	background-color: var(--bg-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider-metal .testimonial-button-next-metal:hover,
.testimonial-slider-metal .testimonial-button-prev-metal:hover{
	background: var(--accent-secondary-color);
}

.testimonial-slider-metal .testimonial-button-next-metal::before,
.testimonial-slider-metal .testimonial-button-prev-metal::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
    background-position: center center;
	background-size: 20px auto;
	transform: rotate(225deg);
	transition: all 0.4s ease-in-out;
}

.testimonial-slider-metal .testimonial-button-next-metal::before{
	transform: rotate(45deg);
}

.company-supports-slider-box-metal{
    margin-top: 80px;
}

.company-supports-content-metal{
    display: flex;
    align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content-metal hr{
    height: 1px;
    width: 33%;
    color: var(--divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content-metal p{
    margin-bottom: 0;
}

.company-supports-slider-metal{
	margin: 0 4.167vw;
} 

.company-supports-logo-metal{
	text-align: center;
}

.company-supports-logo-metal img{
	width: 100%;
	max-width: 170px;
    height: 40px;
}

.main-footer-metal{
    padding: 100px 0 0;
    margin-bottom: 20px;
}

.footer-header-metal{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 60px;
    margin-bottom: 60px;
}

.footer-header-metal .section-title{
    max-width: 56%;
    margin-bottom: 0;
}

.footer-body-metal{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 30px;
}

.footer-contact-item-list-metal,
.about-footer-metal{
    max-width: 35%;
}

.footer-contact-item-list-metal h3,
.footer-newsletter-box-metal h3{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-contact-item-metal{
    display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
    border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 30px;
    padding-bottom: 30px;
}

.footer-contact-item-metal:last-child{
    border-bottom: none;
    padding-bottom: 0;
	margin-bottom: 0;
}

.footer-contact-item-metal .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.footer-contact-item-metal:hover .icon-box{
	background: var(--white-color);
}

.footer-contact-item-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.footer-contact-item-content-metal{
	width: calc(100% - 65px);
}

.footer-contact-item-content-metal p{
	color: var(--white-color);
	margin-bottom: 5px;
}

.footer-contact-item-content-metal h4{
	font-size: 20px;
	color: var(--white-color);
}

.footer-contact-item-content-metal h4 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-contact-item-content-metal h4 a:hover{
	color: var(--accent-secondary-color);
}

.about-footer-metal{
    text-align: center;
}

.footer-logo-metal{
    margin-bottom: 30px;
}

.footer-logo-metal img{
    width: 100%;
    max-width: 177px;
}

.about-footer-content-metal{
    margin-bottom: 40px;
}

.about-footer-content-metal p{
    color: var(--white-color);
    margin-bottom: 0;
}

.footer-social-links-metal ul{
	display: inline-flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social-links-metal ul li a{
	width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-secondary-color);
    border: 1px solid var(--accent-secondary-color);
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

.footer-social-links-metal ul li a:hover{
	background-color: var(--accent-secondary-color);
	color: var(--primary-color);
}

.footer-social-links-metal ul li a i{
	font-size: 18px;
	color: inherit;
}

.footer-newsletter-box-metal{
    max-width: 25%;
}

.footer-newsletter-box-metal p{
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-newsletter-form-metal .form-group{
	display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--dark-divider-color);
    border-radius: 100px;
    padding: 5px;
}

.footer-newsletter-form-metal .form-group .form-control{
	width: calc(100% - 50px);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white-color);
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 6px 15px;
}

.footer-newsletter-form-metal .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form-metal .form-group .newsletter-btn-metal{
	width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-secondary-color);
    border: none;
    border-radius: 100px;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-metal .form-group .newsletter-btn-metal:hover{
    background-color: var(--white-color);
}

.footer-newsletter-form-metal .form-group .newsletter-btn-metal i{
	font-size: 24px;
    color: var(--primary-color);
    margin-right: 3px;
    transition: all 0.3s ease-in-out;
}

.footer-copyright-metal{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding: 60px 0;
}

.footer-copyright-box-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px 30px;
}

.footer-menu-metal ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu-metal ul li{
    text-transform: capitalize;
    color: var(--white-color);
    line-height: 1.5em;
}

.footer-menu-metal ul li a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

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

.footer-copyright-text-metal p{
    color: var(--white-color);
    margin: 0;
}

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

    .hero-content-metal{
        padding-right: 0;
    }

    .hero-info-box-metal{
        margin-top: 80px;
    }

    .hero-info-item-metal.box-1 .hero-info-item-content-box-metal{
        padding: 20px 20px 20px 0;
    }

    .hero-info-item-metal.box-2{
        padding: 30px 20px;
    }

    .hero-info-item-metal.box-3{
        padding: 20px;
    }

    .hero-info-item-header-metal{
        margin-right: 20px;
    }

    .hero-info-counter-image-metal figure{
        margin-top: -50px;
    }

    .about-body-item-list-metal{
        width: calc(100% - 350px);
    }

    .about-body-counter-box-metal{
        width: 320px;
    }

    .service-item-metal{
        min-height: 370px;
        padding: 30px 25px;
    }

    .service-item-btn-metal{
        margin-top: 30px;
    }

    .why-choose-body-item-metal{
        padding: 20px;
    }

    .who-we-are-body-item-metal{
        padding: 20px;
    }
}

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

    .hero-metal{
        padding-bottom: 15px;
    }

    .hero-watch-video-circle-metal{
        display: none;
    }

    .hero-info-box-metal{
        border-radius: 20px;
        padding: 20px;
        margin-top: 40px;
    }

    .hero-info-box-metal::before,
    .hero-info-box-metal::after{
        display: none;
    }

    .hero-info-item-metal.box-1{
        width: 100%;
    }

    .hero-info-item-metal.box-1 .hero-info-item-image-metal figure{
        height: auto;
    }

    .hero-info-item-metal.box-1 .hero-info-item-image-metal img{
        height: auto;
        aspect-ratio: 1 / 0.75;
    }

    .hero-info-item-metal.box-2,
    .hero-info-item-metal.box-3{
        width: calc(50% - 15px);
    }

    .about-us-image-box-metal{
        margin-bottom: 30px;
    }

    .about-us-image-box-metal,
    .about-us-image-metal,
    .about-us-image-metal figure,
    .about-us-image-metal img{
        height: auto;
    }

    .about-us-image-metal img{
        aspect-ratio: 1 / 0.7;
    }

    .about-us-content-metal{
        height: auto;
        margin: 0;
    }

    .why-choose-video-box-metal{
        margin: 0 0 30px;
        height: auto;
    }

    .why-choose-video-image-metal,
    .why-choose-video-image-metal figure,
    .why-choose-video-image-metal img,
    .why-choose-us-content-metal{
        height: auto;
    }

    .why-choose-video-image-metal img{
        aspect-ratio: 1 / 0.75;
    }

    .who-we-are-image-box-metal{
        padding: 0 50px 50px 0;
        margin: 0 0 30px;
    }

    .testimonial-content-box-metal{
        position: initial;
        margin: 0 0 30px;
    }

    .testimonial-item-metal{
        min-height: auto;
        gap: 30px;
    }

    .testimonial-item-header-metal{
        margin-bottom: 30px;
    }

    .testimonial-author-content-metal{
        padding-top: 30px;
    }

    .company-supports-slider-metal{
        margin: 0;
    }

    .footer-header-metal .section-title{
        max-width: 75%;
    }

    .about-footer-metal{
        width: 100%;
        max-width: 100%;
        text-align: left;
        order: 1;
    }

    .footer-logo-metal,
    .about-footer-content-metal{
        margin-bottom: 20px;
    }

    .footer-contact-item-list-metal,
    .footer-newsletter-box-metal{
        order: 2;
        max-width: 49%;
    }

    .footer-contact-item-list-metal h3,
    .footer-newsletter-box-metal h3,
    .footer-newsletter-box-metal p{
        margin-bottom: 20px;
    }

    .footer-contact-item-metal{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}

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

    .hero-metal{
        padding: 140px 0 15px;
        margin-top: 0;
    }

    .hero-content-footer-metal{
        margin-top: 30px;
        padding-top: 30px;
    }

    .hero-watch-video-circle-metal img{
        max-width: 120px;
    }

    .hero-info-box-metal{
        margin-top: 30px;
    }

    .hero-info-counter-item-metal h2{
        font-size: 32px;
    }

    .hero-info-counter-image-metal figure{
        margin: -40px -60px -20px -10px;
    }

    .about-us-metal{
        padding: 50px 0;
    }

    .about-cta-box-metal{
        padding: 20px;
        bottom: 20px;
        left: 20px;
    }

    .about-cta-counter-item-metal h2{
        font-size: 38px;
    }

    .about-us-body-metal{
        margin-top: 30px;
        padding-top: 30px;
    }

    .about-body-item-metal .icon-box{
        height: 50px;
        width: 50px;
    }

    .about-body-item-metal .icon-box img{
        max-width: 24px;
    }

    .about-body-item-content-metal{
        width: calc(100% - 65px);
    }

    .about-body-counter-box-metal{
        padding: 20px;
    }

    .about-body-counter-item-metal h2{
        font-size: 38px;
    }

    .about-us-footer-metal{
        margin-top: 30px;
    }

    .our-services-metal{
        padding: 50px 0;
    }

    .service-item-metal{
        min-height: initial;
        gap: 20px;
        padding: 20px;
    }

    .service-item-header-metal .icon-box{
        height: 50px;
        width: 50px;
    }

    .service-item-header-metal .icon-box img{
        max-width: 24px;
    }

    .service-item-body-metal{
       padding-top: 20px;
    }

    .service-item-btn-metal{
        margin-top: 20px;
    }

    .why-choose-us-metal{
        padding: 50px 0;
    }

    .video-play-button-metal a{
        width: 60px;
        height: 60px;
    }

    .video-play-button-metal a i{
        font-size: 20px;
    }

    .video-play-button-metal a.bg-effect:before,
    .video-play-button-metal a.bg-effect:after{
        border-width: 50px;
        top: -33%;
        left: -33%;
    }

    .why-choose-body-item-metal{
        min-height: initial;
        gap: 20px;
    }

    .why-choose-body-item-metal .icon-box{
        height: 50px;
        width: 50px;
    }

    .why-choose-body-item-metal .icon-box img{
        max-width: 24px;
    }

    .why-choose-body-content-metal{
        padding-top: 20px;
    }

    .our-pricing-metal{
        padding: 50px 0;
    }

    .who-we-are-metal{
        padding: 50px 0;
    }

    .who-we-are-skills-box-metal{
        padding: 20px;
    }

    .who-we-are-footer-box-metal{
        margin-top: 30px;
        padding-top: 30px;
    }

    .our-testimonials-metal{
        padding: 50px 0;
    }   

    .testimonial-item-content-metal p{
        font-size: 18px;
    }

    .company-supports-slider-box-metal{
        margin-top: 50px;
    }

    .company-supports-content-metal{
        margin-bottom: 20px;
    }

    .company-supports-content-metal hr{
        width: 26%;
    }

    .main-footer-metal{
        padding: 50px 0 0;
        margin: 0;
    }

    .footer-header-metal{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .footer-copyright-metal{
        padding: 30px 0;
        margin-top: 30px;
    }

    .footer-menu-metal ul{
        gap: 5px 15px;
    }

    .footer-newsletter-form-metal .form-group .form-control{
        width: calc(100% - 44px);
    }

    .footer-newsletter-form-metal .form-group .newsletter-btn-metal{
        width: 44px;
        height: 44px;
    }

    .footer-newsletter-form-metal .form-group .newsletter-btn-metal i{
        font-size: 22px;
    }
}

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

    .hero-watch-video-circle-metal img{
        max-width: 100px;
    }

    .hero-info-box-metal{
        gap: 20px;
        padding: 10px;
    }

    .hero-info-item-metal{
        gap: 20px;
    }

    .hero-info-item-metal.box-1 .hero-info-item-content-box-metal{
        padding: 0 10px 10px;
    }

    .hero-info-item-metal.box-1 .hero-info-item-image-metal,
    .hero-info-item-metal.box-1 .hero-info-item-content-box-metal,
    .hero-info-item-metal.box-2,
    .hero-info-item-metal.box-3{
        width: 100%;
    }

    .hero-info-item-content-metal h3{
        font-size: 18px;
    }

    .hero-info-item-content-metal p,
    .hero-info-counter-item-metal p{
        margin: 5px 0 0;
    }

    .hero-info-counter-item-metal{
        padding-top: 20px;
    }

    .hero-info-counter-item-metal h2{
        font-size: 26px;
    }

    .hero-info-counter-image-metal figure{
        margin: -30px -40px -20px 0px;
    }

    .about-us-image-metal img{
        aspect-ratio: 1 / 1.192;
    }

    .about-cta-box-metal{
        position: initial;
        width: 100%;
        background-color: var(--primary-color);
        margin-top: 20px;
    }

    .about-cta-counter-item-metal h2{
        font-size: 26px;
    }

    .about-body-item-list-metal{
        width: 100%;
    }

    .about-body-item-content-metal h3{
        font-size: 18px;
    }

    .about-body-item-content-metal p{
        margin-top: 5px;
    }

    .about-body-counter-box-metal{
        width: 100%;
    }

    .about-body-counter-item-metal h2{
        font-size: 26px;
    }

    .about-us-footer-metal{
        gap: 20px;
    }

    .about-us-contact-box-metal{
        gap: 10px;
    }

    .about-us-conatct-content-metal h3{
        font-size: 18px;
    }

    .service-item-content-metal h2{
        font-size: 18px;
    }

    .why-choose-video-image-metal img{
        aspect-ratio: 1 / 1.2;
    }

    .why-choose-body-item-metal{
        width: 100%;
    }

    .why-choose-body-content-metal h3{
        font-size: 18px;
    }

    .who-we-are-image-box-metal{
        padding: 0;
    }

    .who-we-are-skills-box-metal{
        position: initial;
        width: 100%;
        margin-top: 20px;
    }

    .who-we-are-skills-title-metal{
        margin-bottom: 20px;
    }

    .who-we-are-skills-title-metal h3{
        font-size: 18px;
    }

    .who-we-are-body-box-metal{
        gap: 20px;
    }

    .who-we-are-body-item-metal{
        width: calc(50% - 10px);
        padding: 15px;
    }

    .who-we-are-body-item-metal .icon-box{
        margin-bottom: 20px;
    }

    .who-we-are-footer-box-metal{
        gap: 20px;
    }

    .testimonial-item-metal{
        gap: 20px;
    }

    .testimonial-item-header-metal{
        margin-bottom: 20px;
    }

    .testimonial-item-content-metal p{
        font-size: 16px;
    }

    .testimonial-author-content-metal{
        padding-top: 20px;
    }

    .testimonial-author-content-metal h3{
        font-size: 18px;
    }

    .testimonial-btn-metal{
        position: initial;
        justify-content: center;
        margin: 20px 0 0;
    }

    .company-supports-slider-box-metal{
        margin-top: 30px;
    }
    
    .company-supports-content-metal hr{
        width: 0;
    }

    .company-supports-logo-metal img{
        max-width: 160px;
        height: 34px;
    }

    .footer-header-metal{
        gap: 20px;
    }

    .footer-header-metal .section-title{
        max-width: 100%;
    }

    .footer-body-metal{
        gap: 30px;
    }

    .footer-contact-item-list-metal,
    .footer-newsletter-box-metal{
        width: 100%;
        max-width: 100%;
    }

    .footer-contact-item-list-metal h3,
    .footer-newsletter-box-metal h3{
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-contact-item-content-metal h4{
        font-size: 18px;
    }

    .footer-copyright-metal{
        padding: 15px 0;
    }

    .footer-copyright-box-metal{
        gap: 10px;
        justify-content: center;
    }

    .footer-menu-metal ul li{
        font-size: 14px;
    }
}
/* ============================================================================
 * 36. Estaton brand overrides
 * ---------------------------------------------------------------------------
 * Skyvilla's accent-secondary was a NEON LIME (#DCFF09) - a light colour that
 * carried dark text and dark icons on top of it. Estaton's accent is MAGENTA
 * (#ED2790), a dark colour. Swapping the variable alone leaves dark-on-magenta
 * everywhere the template assumed dark-on-lime, so every one of those pairings
 * is flipped to white below. Nothing here invents new spacing or type scale -
 * it only re-points colour and reuses radii the template already defines.
 * ========================================================================= */

/* --- 36.1 Contrast flips: dark-on-lime -> white-on-magenta --------------- */

::selection{
	color: var(--white-color);
	background-color: var(--accent-secondary-color);
}

/* .btn-default fills magenta on hover; the template turned the label and the
   arrow dark to read on lime. Both go white. */
.btn-default:hover,
.btn-default.btn-highlighted:hover,
.btn-default.btn-transparent:hover{
	color: var(--white-color);
}

.btn-default:hover:before{
	filter: brightness(0) invert(1);
}

/* Mobile menu trigger: magenta tile, white bars. */
.slicknav_icon .slicknav_icon-bar{
	background-color: var(--white-color);
}

/* Every circular icon-box that is magenta at rest. The icons are flat SVGs
   authored in the template's near-black, so they are forced white. */
.hero-benefit-item-prime .icon-box img,
.about-us-contact-box .icon-box img,
.about-us-contact-box-metal .icon-box img,
.cta-box-item .icon-box img,
.team-contact-item .icon-box img,
.faq-cta-content-box-prime .icon-box img,
.testimonial-item-quote-prime img,
.footer-contact-item-metal .icon-box img,
.pricing-item.highlighted-box .pricing-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

/* ...and the boxes that only turn magenta on hover, where the icon starts on
   white and has to invert at the same moment the fill slides in. */
.fact-item-prime:hover .fact-item-header-prime .icon-box img,
.approach-item:hover .icon-box img,
.testimonial-slider-metal .testimonial-button-prev-metal:hover img,
.testimonial-slider-metal .testimonial-button-next-metal:hover img{
	filter: brightness(0) invert(1);
}

/* .faq-cta-content-box-prime inverts the other way: its box goes white on
   hover, so the icon has to come back to the brand ink. */
.faq-cta-content-box-prime .icon-box:hover img{
	filter: none;
}

/* Newsletter submit + social pills sit on magenta once hovered. */
.footer-newsletter-form .form-group .newsletter-btn,
.footer-newsletter-form-prime .form-group .newsletter-btn,
.footer-newsletter-form-metal .form-group .newsletter-btn-metal,
.footer-social-links ul li a:hover i,
.footer-social-links-prime ul li a:hover i,
.footer-social-links-metal ul li a:hover i,
.team-social-list ul li:hover a,
.post-tags .tag-links a:hover,
.post-social-sharing ul li:hover a{
	color: var(--white-color);
}

/* "+ more" avatar chip: magenta disc, white glyph. */
.satisfy-client-image.add-more h3,
.satisfy-client-image.add-more i{
	color: var(--white-color);
}

/* --- 36.2 Brand shape language: circles and pills ------------------------
 * The Estaton mark is a ring, and the brand deck builds every layout out of
 * discs, pill-shaped labels and outlined ring motifs. The template already
 * ships both radii (border-radius: 50% on 63 elements, 100px pills on 23), so
 * the brand direction is applied by re-pointing existing components at those
 * values rather than by adding a new shape vocabulary.
 * ---------------------------------------------------------------------- */

/* Section eyebrows become the deck's pill label. */
.section-title .section-sub-title{
	display: inline-flex;
	align-items: center;
	background-color: var(--brand-magenta-light);
	color: var(--brand-indigo);
	border-radius: 100px;
	padding: 9px 20px 9px 18px;
}

.dark-section .section-title .section-sub-title,
.dark-section-prime .section-title .section-sub-title{
	background-color: var(--dark-divider-color);
	color: var(--white-color);
}

/* Its leading marker becomes the ring from the logo rather than a bar. */
.section-title .section-sub-title::before{
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent-secondary-color);
	margin-right: 10px;
	flex: 0 0 auto;
}

/* Cards pick up the softer, rounder corner the deck uses for its panels.
   20px is the template's own card radius; 28px keeps the same family while
   reading noticeably rounder next to the circular icon discs. */
.service-item-prime,
.benefit-body-item-prime .icon-box,
.fact-item-prime,
.why-choose-item-prime,
.hero-benefit-item-prime,
.post-item-prime .post-featured-image,
.testimonial-item-prime{
	border-radius: 28px;
}

.hero-benefit-item-prime{
	border-radius: 28px 28px 0 0;
}

/* Photography is masked into the brand's rounded-panel silhouette. */
.about-us-image-1-prime figure img,
.about-us-image-2-prime figure img,
.why-choose-item-image-prime figure img,
.intro-video-image-prime figure img{
	border-radius: 28px;
}

/* --- 36.3 Ring decoration ------------------------------------------------
 * The deck floats outlined concentric rings behind its content. .brand-rings
 * is a decoration-only element: it is aria-hidden in the markup, sits behind
 * everything, and never affects layout.
 * ---------------------------------------------------------------------- */

.brand-rings{
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	pointer-events: none;
	z-index: 0;
}

.brand-rings::before,
.brand-rings::after{
	content: '';
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
}

.brand-rings::before{
	inset: 14%;
}

.brand-rings::after{
	inset: 30%;
}

.dark-section .brand-rings,
.dark-section .brand-rings::before,
.dark-section .brand-rings::after,
.dark-section-prime .brand-rings,
.dark-section-prime .brand-rings::before,
.dark-section-prime .brand-rings::after{
	border-color: var(--dark-divider-color);
}

.brand-rings.rings-lg{ width: 420px; height: 420px; }
.brand-rings.rings-md{ width: 300px; height: 300px; }
.brand-rings.rings-sm{ width: 190px; height: 190px; }

@media only screen and (max-width: 991px){
	.brand-rings{ display: none; }
}

/* --- 36.4 Header: Login link + Schedule Demo button ---------------------- */

/* .header-btn holds a <ul> now (Login + Schedule Demo) rather than the
   template's single loose <a>. That puts both links inside .main-menu, where
   `.main-menu ul li a` sets `padding: 12px 10px !important; background:
   transparent` and flattens the button. Everything below re-asserts the button
   against that rule - the !important on padding is matched deliberately, not
   by habit. */
.main-menu .header-right{
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-menu .header-right li{
	margin: 0;
}

.main-menu .header-right .nav-link{
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	color: var(--primary-color);
	padding: 12px 0 !important;
	transition: all 0.3s ease-in-out;
}

.main-menu .header-right .nav-link:hover{
	color: var(--accent-secondary-color);
}

.dark-section .main-menu .header-right .nav-link,
.header-transparent .main-menu .header-right .nav-link{
	color: var(--white-color);
}

.main-menu .header-right .btn-default{
	background: var(--accent-color);
	border-radius: 100px;
	color: var(--white-color);
	padding: 15px 52px 15px 22px !important;
	text-transform: capitalize;
}

.main-menu .header-right .btn-default::before{
	right: 22px;
}

.main-menu .header-right .btn-default:hover{
	background: transparent;
	color: var(--white-color);
}

/* Menu items that exist only for the mobile drawer. SlickNav clones #menu into
   .responsive-menu, so Login and Schedule Demo have to live inside #menu to
   survive the clone - .header-btn itself is display:none below 991px. */
.main-menu .nav-menu-wrapper .mobile-only{
	display: none;
}

@media only screen and (max-width: 1200px){
	.main-menu .header-right .login-link{ display: none; }
}

/* --- 36.5 Footer: tagline, contact column, ring decoration --------------- */

.main-footer{
	position: relative;
	overflow: hidden;
}

/* The deck's ring motif, bled off the footer's right edge. */
.footer-rings{
	top: -120px;
	right: -140px;
}

.footer-tagline{
	display: block;
	font-size: 18px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--accent-secondary-color);
	margin-top: 20px;
}

/* The contact column reuses .footer-links, but its rows are addresses and an
   e-mail, so the list's capitalize would render "Contact@estaton.africa". */
.footer-contact-links ul li{
	text-transform: none;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.footer-contact-links ul li a{
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.footer-contact-links ul li i{
	font-size: 15px;
	line-height: 1.5em;
	color: var(--accent-secondary-color);
	flex: 0 0 16px;
	margin-top: 2px;
}

/* --- 36.6 Header logo ---------------------------------------------------
 * The Estaton mark is 198x56 against Skyvilla's 177x50 - same 3.54 ratio, so
 * it is capped to the original width and drops straight into the nav bar.
 * ---------------------------------------------------------------------- */

.navbar-brand img{
	width: 100%;
	max-width: 177px;
}

/* --- 36.7 Fixes for components re-pointed at Estaton content ------------- */

/* Ring decoration needs a positioned ancestor on the sections that carry it. */
.about-us-prime,
.why-choose-us-prime{
	position: relative;
	overflow: hidden;
}

.about-rings{
	top: 60px;
	left: -150px;
}

.why-choose-rings{
	top: 40px;
	right: -80px;
}

/* The hero's avatar row is .satisfy-client-images-prime, which the template
   never gave a rule - the discs stack vertically instead of overlapping.
   Mirrors the base .satisfy-client-images so the row reads as one cluster. */
.satisfy-client-images-prime{
	display: inline-flex;
	align-items: center;
}

/* The hero credibility line held "4.9/5", so its h3 was locked to a 75px box
   at 30px. Estaton's line is words, not a score. */
.hero-rating-header-prime h3{
	width: auto;
	font-size: 22px;
	white-space: nowrap;
}

/* Testimonial cards lead with a rating row where the template had a client
   logo. .testimonial-item-rating i is already styled; only the row needs a gap. */
.testimonial-item-rating{
	display: flex;
	gap: 4px;
}

/* --- 36.8 Login page -----------------------------------------------------
 * The template ships no login screen. This is the one page built from
 * scratch, and it is assembled entirely from existing parts - .page-contact-us
 * for the section rhythm, .contact-form for the fields, .btn-default for the
 * submit - so only the card wrapper and the two form-meta rows are new.
 * ---------------------------------------------------------------------- */

.page-login{
	position: relative;
	overflow: hidden;
}

.login-rings{
	top: 40px;
	right: -110px;
}

.login-box{
	position: relative;
	z-index: 1;
	background: var(--white-color);
	border-radius: 28px;
	padding: 50px;
}

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

.login-box .section-title h2{
	font-size: 34px;
}

.login-form-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.login-remember{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 1.5em;
	color: var(--text-color);
	margin: 0;
	cursor: pointer;
}

.login-remember input{
	accent-color: var(--accent-secondary-color);
	width: 16px;
	height: 16px;
}

.login-forgot{
	font-size: 15px;
	line-height: 1.5em;
	color: var(--accent-secondary-color);
	transition: all 0.3s ease-in-out;
}

.login-forgot:hover{
	color: var(--accent-color);
}

.login-box-footer{
	border-top: 1px solid var(--divider-color);
	text-align: center;
	margin-top: 40px;
	padding-top: 30px;
}

.login-box-footer p{
	font-size: 15px;
	line-height: 1.6em;
}

.login-box-footer a{
	color: var(--accent-secondary-color);
	transition: all 0.3s ease-in-out;
}

.login-box-footer a:hover{
	color: var(--accent-color);
}

@media only screen and (max-width: 575px){
	.login-box{
		border-radius: 20px;
		padding: 30px 24px;
	}

	.login-box .section-title h2{
		font-size: 26px;
	}
}

/* --- 36.9 Module discs and monogram avatars ------------------------------
 * The template's .satisfy-client-images rows were stock-photo faces stacked
 * as overlapping discs. Estaton ships no client photography and the brand
 * rules forbid stock faces, so the same overlapping-disc row now carries the
 * five solution line-icons instead. The layout, the -14px overlap and the
 * white separating border all come from the template's own rules; only the
 * fill and the icon sizing are added here.
 * ---------------------------------------------------------------------- */

.satisfy-client-image.solution-disc{
	width: 52px;
	height: 52px;
	background: var(--accent-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Alternate indigo/magenta so a five-disc row reads as the brand pair
   rather than one flat block of indigo. */
.satisfy-client-image.solution-disc:nth-of-type(even){
	background: var(--accent-secondary-color);
}

/* The icons are white-stroke SVGs drawn on a 30px canvas; the base rule
   (width: 100%) would blow them up to the full disc. */
.satisfy-client-image.solution-disc img{
	width: 26px;
	max-width: 26px;
	border-radius: 0;
}

/* .section-footer-text rows are the small variant - the template already
   shrinks .add-more to 32px there, so the disc has to follow. */
.section-footer-text.section-satisfy-img .satisfy-client-image.solution-disc{
	width: 32px;
	height: 32px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.solution-disc img{
	width: 18px;
	max-width: 18px;
}

@media only screen and (max-width: 767px){
	.satisfy-client-image.solution-disc{
		width: 40px;
		height: 40px;
	}

	.satisfy-client-image.solution-disc img{
		width: 21px;
		max-width: 21px;
	}
}

/* Monogram avatars replace the four stock portraits on the About page's
   testimonial cards. Same device as the team pages: initials on the brand
   gradient. The template's .testimonial-author-image already rounds and caps
   the image, so nothing else is needed. */
.testimonial-author-image img{
	background: var(--brand-indigo-deep);
}

/* --- 36.10 Video sections replaced, and the solutions sidebar ------------
 * Estaton has no product footage, so the three sections the template built
 * around a video player were re-pointed at content that exists. The homepage
 * band keeps its dark parallax treatment and its four talking points, but
 * promotes them from a checklist beside a play button into a numbered flow;
 * the About and Knowledge Base bands swap the play circle for the two CTAs
 * those pages were already pushing.
 * ---------------------------------------------------------------------- */

/* Four-step flow. Mirrors .intro-video-list-prime's divider, rhythm and
   four-across grid so the band's proportions are unchanged. */
.how-it-works-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 60px;
	padding-top: 60px;
}

.how-it-works-step{
	width: calc(25% - 22.5px);
}

.how-it-works-step-no{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 20px;
}

/* Second and fourth steps take the magenta half of the brand pair, the same
   alternation the module discs use in section 36.9. */
.how-it-works-step:nth-child(even) .how-it-works-step-no{
	background: var(--accent-secondary-color);
}

.how-it-works-step h3{
	font-size: 20px;
	line-height: 1.3em;
	color: var(--white-color);
	margin-bottom: 10px;
}

.how-it-works-step p{
	color: var(--white-color);
	line-height: 1.5em;
	margin: 0;
	opacity: 0.75;
}

/* The About / Knowledge Base bands: buttons where the play circle was. */
.intro-cta-btn{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: flex-end;
}

/* --- Solutions sidebar: mark the current page ---------------------------
 * The list used to omit whichever solution you were reading, so it showed
 * four of five and gave no sense of place. It now runs complete, with the
 * current entry filled in as a magenta pill. */
.page-category-list ul li.current-solution{
	background: var(--brand-magenta-light);
	border-radius: 100px;
	border-bottom: none;
	padding: 12px 20px;
	margin-bottom: 12px;
}

.page-category-list ul li.current-solution a,
.page-category-list ul li.current-solution a:hover{
	color: var(--brand-magenta-dark);
	font-weight: 600;
	pointer-events: none;
}

/* The trailing arrow is a "go here" affordance; the current page isn't a
   destination, so it becomes the brand's ring marker instead. */
.page-category-list ul li.current-solution a::before{
	background: none;
	border: 2px solid var(--accent-secondary-color);
	border-radius: 50%;
	width: 10px;
	height: 10px;
	top: 7px;
	right: 6px;
}

.page-category-list ul li.current-solution a:hover::before{
	transform: none;
}

/* :last-child strips the padding to close the list; a current entry there
   still needs its pill. */
.page-category-list ul li.current-solution:last-child{
	padding: 12px 20px;
	margin-bottom: 0;
}

@media only screen and (max-width: 991px){
	.how-it-works-step{
		width: calc(50% - 15px);
	}

	.intro-cta-btn{
		justify-content: flex-start;
		margin-top: 30px;
	}
}

@media only screen and (max-width: 575px){
	.how-it-works-step{
		width: 100%;
	}
}

/* The template capitalises every word in this list, which turns the product
   name "Estaton for Estates" into "Estaton For Estates". The labels are
   already cased correctly in solutions-nav.php. */
.page-category-list ul li a{
	text-transform: none;
}

/* The band's overlay is a bottom-weighted gradient (transparent at the top),
   which works while the content sits in the lower third. Once the four steps
   stack at narrow widths the heading rides up into the bright sky and the
   white type stops being legible, so below 991px the wash goes even. */
@media only screen and (max-width: 991px){
	.intro-video-prime::before{
		background: linear-gradient(180deg, rgba(4, 6, 24, 0.82) 0%, rgba(4, 6, 24, 0.95) 60%);
	}
}


/* --- 36.11 Schedule A Demo: booking calendar and slot picker -------------
 * The one page on this build with a component the template has no equivalent
 * for. Rather than import a datepicker library, the calendar is a plain grid
 * of buttons styled from the same vocabulary as the rest of section 36 --
 * 28px panel radius, pill labels, magenta as the selected state, and the
 * indigo/magenta pairing the module discs use.
 *
 * Day states, all driven by one class on the button:
 *   .is-available  bookable            .is-full     every slot taken
 *   .is-closed     weekend             .is-blocked  closed by the team
 *   .is-past       outside the notice period or the 60-day horizon
 * ---------------------------------------------------------------------- */

.page-book-demo{
	position: relative;
	padding: 100px 0;
	overflow: hidden;
}

.book-demo-rings{
	top: 8%;
	right: -160px;
}

/* --- left column: what the demo actually is --- */
.book-demo-content{
	padding-right: 30px;
}

.demo-detail-list{
	margin-top: 40px;
}

.demo-detail-item{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 28px;
}

/* Solid magenta, not the pale tint. These icons are white line art, so on
   --brand-magenta-light (#FCE3F1) they were white-on-almost-white and read as
   a blank disc. Every other place the same SVGs are used puts them on a solid
   fill -- .hero-benefit-item-prime .icon-box and .solution-disc both do. */
.demo-detail-item .icon-box{
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent-secondary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-detail-item .icon-box img{
	width: 26px;
	height: 26px;
}

.demo-detail-item-content h3{
	font-size: 20px;
	margin-bottom: 6px;
}

.demo-detail-item-content p{
	margin: 0;
}

.demo-contact-note{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 28px;
	padding: 26px 30px;
	margin-top: 40px;
}

.demo-contact-note h4{
	font-size: 18px;
	margin-bottom: 8px;
}

.demo-contact-note p{
	margin: 0;
}

.demo-contact-note a{
	color: var(--accent-color);
	font-weight: 500;
}

.demo-contact-note a:hover{
	color: var(--accent-secondary-color);
}

/* --- the form panel --- */
.booking-form{
	background: var(--white-color);
	border-radius: 28px;
	padding: 50px;
}

.booking-step{
	margin-bottom: 42px;
}

.booking-step:last-child{
	margin-bottom: 0;
}

.booking-step-header{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

/* Numbered the same way the How It Works band numbers its steps. */
.booking-step-no{
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.booking-step-header h3{
	font-size: 22px;
	margin: 0;
}

.booking-step-header h3 small{
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--text-color);
	margin-top: 2px;
}

/* --- calendar --- */
.booking-calendar{
	border: 1px solid var(--divider-color);
	border-radius: 28px;
	padding: 24px;
	transition: opacity 0.2s ease;
}

.booking-calendar.is-loading{
	opacity: 0.45;
	pointer-events: none;
}

.booking-calendar-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.booking-calendar-header h4{
	font-size: 18px;
	margin: 0;
}

.booking-cal-nav{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	background: transparent;
	color: var(--primary-color);
	font-size: 13px;
	transition: all 0.3s ease;
}

.booking-cal-nav:hover:not(:disabled){
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
	color: var(--white-color);
}

.booking-cal-nav:disabled{
	opacity: 0.3;
	cursor: not-allowed;
}

.booking-calendar-weekdays,
.booking-calendar-grid{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.booking-calendar-weekdays{
	margin-bottom: 8px;
}

.booking-calendar-weekdays span{
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.booking-day{
	aspect-ratio: 1 / 1;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
}

.booking-day.is-empty{
	pointer-events: none;
}

/* Bookable: outlined, filling magenta on hover -- the same promotion the
   template buttons make on hover. */
.booking-day.is-available{
	border-color: var(--divider-color);
	cursor: pointer;
}

.booking-day.is-available:hover{
	background: var(--brand-magenta-light);
	border-color: var(--accent-secondary-color);
	color: var(--brand-indigo);
}

.booking-day.is-selected{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
	color: var(--white-color);
}

.booking-day.is-selected:hover{
	background: var(--brand-magenta-dark);
	border-color: var(--brand-magenta-dark);
	color: var(--white-color);
}

/* Taken and unavailable days stay legible but clearly inert. A struck-through
   number reads as "gone" faster than colour alone, which also keeps the state
   distinguishable for colour-blind visitors. */
.booking-day.is-full,
.booking-day.is-blocked{
	background: var(--bg-color);
	color: #A9AAC0;
	text-decoration: line-through;
	cursor: not-allowed;
}

.booking-day.is-closed,
.booking-day.is-past{
	color: #C2C3D4;
	cursor: not-allowed;
}

.booking-calendar-legend{
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--divider-color);
}

.booking-calendar-legend span{
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: var(--text-color);
}

.legend-dot{
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin-right: 7px;
}

.legend-dot.is-available{
	border: 1px solid var(--accent-secondary-color);
	background: var(--brand-magenta-light);
}

.legend-dot.is-full{
	background: var(--bg-color);
	border: 1px solid #C2C3D4;
}

.legend-dot.is-closed{
	background: transparent;
	border: 1px dashed #C2C3D4;
}

/* Shown only when JS has not run; booking.js hides it and uses it to carry
   the clicked date instead. */
.booking-date-fallback{
	margin-top: 18px;
}

.booking-date-fallback label{
	display: block;
	margin-bottom: 6px;
}

/* --- slot picker --- */
.booking-slots{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.booking-slot{
	position: relative;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 14px 22px;
	cursor: pointer;
	transition: all 0.25s ease;
	margin: 0;
}

.booking-slot input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.booking-slot-time{
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1.2;
}

.booking-slot-state{
	display: block;
	font-size: 12px;
	color: var(--text-color);
	margin-top: 2px;
}

.booking-slot:hover:not(.is-taken){
	border-color: var(--accent-secondary-color);
	background: var(--brand-magenta-light);
}

.booking-slot:has(input:checked){
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
}

.booking-slot:has(input:checked) .booking-slot-time,
.booking-slot:has(input:checked) .booking-slot-state{
	color: var(--white-color);
}

.booking-slot.is-taken{
	background: var(--bg-color);
	cursor: not-allowed;
	opacity: 0.7;
}

.booking-slot.is-taken .booking-slot-time{
	color: #A9AAC0;
	text-decoration: line-through;
}

.booking-slots-empty{
	grid-column: 1 / -1;
	margin: 0;
	padding: 18px 22px;
	background: var(--bg-color);
	border-radius: 16px;
	font-size: 15px;
}

/* --- messages --- */
.booking-alert{
	background: #FDECEC;
	border: 1px solid var(--error-color);
	color: #A32020;
	border-radius: 16px;
	padding: 14px 20px;
	margin-bottom: 30px;
	font-size: 15px;
}

.booking-field-error{
	color: var(--error-color);
	font-size: 13px;
	margin-top: 7px;
}

/* The failed-submission summary. Every validation failure renders this, so it
 * is the one thing a visitor cannot miss -- the per-email cap used to show
 * nothing but a small inline note in step 3. */
.booking-alert ul{
	margin: 8px 0 0;
	padding-left: 20px;
}

.booking-alert li{
	margin-bottom: 4px;
}

.booking-alert:focus{
	outline: 2px solid var(--error-color);
	outline-offset: 3px;
}

/* The same component saying the opposite thing, used by the contact forms.
 * A separate .contact-success class would have been a second box to keep in
 * step with this one for no gain -- the padding, radius and rhythm are all
 * identical, and only the palette differs.
 *
 * Green rather than the brand magenta: magenta is the accent on every button
 * on the page, so a magenta panel above the form reads as another control
 * rather than as the answer to what was just submitted. */
.booking-alert.is-success{
	background: #E8F6EE;
	border-color: #2E7D53;
	color: #1E5C3B;
}

.booking-alert.is-success:focus{
	outline-color: #2E7D53;
}

.booking-field-hint{
	font-size: 13px;
	color: var(--text-color);
	margin: 7px 0 0;
}

/* --- breathing room in step 3 -------------------------------------------
 * The template never styled labels inside this form, so they sat hard against
 * their inputs and the whole step read as one dense block. */
.booking-form .form-group label{
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--heading-color);
}

.booking-form .form-group{
	margin-bottom: 28px;
}

.booking-form .form-control{
	padding: 14px 20px;
}

.booking-form textarea.form-control{
	padding-top: 16px;
	min-height: 120px;
}

/* The "required" flag next to the address label when a physical demo is
   picked. Inline with the label rather than a separate line. */
.booking-req{
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 100px;
	background: var(--brand-magenta-light);
	color: var(--brand-magenta-dark);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.booking-req[hidden]{ display: none; }

/* --- 36.12 Show/hide password -------------------------------------------
 * .pw-wrap and .pw-toggle are injected by assets/js/password-toggle.js, which
 * is shared with the admin area and deliberately styles nothing itself -- the
 * two have separate design systems. Applies to login.php and signup.php.
 *
 * The button stretches to the input's full height rather than using a fixed
 * one, which is safe here because these inputs carry no margin of their own
 * (the spacing is on the parent .form-group), so the wrap hugs the field.
 * ---------------------------------------------------------------------- */
.pw-wrap{
	position: relative;
	display: block;
}

.pw-wrap .form-control{
	/* Room for the button, so a long password does not run under it. */
	padding-right: 52px;
}

.pw-toggle{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--text-color);
	font-size: 15px;
	line-height: 1;
	transition: color 0.3s ease;
}

.pw-toggle:hover,
.pw-toggle[aria-pressed="true"]{
	color: var(--accent-secondary-color);
}

/* The "please specify" field under "I am a". JS adds and removes .is-hidden;
   with JS off the class is never applied and the field simply stays visible. */
.booking-role-other{
	margin-top: 12px;
}

.booking-role-other.is-hidden{
	display: none;
}

.sr-only-label{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot. Off-screen rather than display:none -- some bots skip anything
   that is not rendered, and this needs to look fillable to them. Never shown
   to a real visitor, and taken out of the tab order in the markup. */
.booking-hp{
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.booking-form-note{
	font-size: 14px;
	color: var(--text-color);
	margin: 16px 0 0;
}

/* --- confirmation --- */
.booking-confirmation{
	background: var(--white-color);
	border-radius: 28px;
	padding: 60px;
	text-align: center;
}

.booking-confirmation-icon{
	width: 84px;
	height: 84px;
	margin: 0 auto 26px;
	border-radius: 50%;
	background: var(--accent-secondary-color);
	color: var(--white-color);
	font-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.booking-confirmation h2{
	font-size: 34px;
	margin: 14px 0 16px;
}

.booking-confirmation-detail{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 36px 0 30px;
	padding: 28px 0;
	border-top: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
}

.booking-confirmation-item h4{
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-color);
	margin-bottom: 8px;
}

.booking-confirmation-item p{
	font-size: 17px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

.booking-confirmation-item p span{
	font-weight: 400;
	font-size: 13px;
	color: var(--text-color);
}

.booking-reference{
	color: var(--accent-secondary-color) !important;
	letter-spacing: 0.06em;
}

.booking-confirmation-note{
	font-size: 15px;
}

.booking-confirmation-note a{
	color: var(--accent-color);
	font-weight: 500;
}

/* --- responsive --- */
@media only screen and (max-width: 1199px){
	.book-demo-content{
		padding-right: 0;
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 991px){
	.page-book-demo{
		padding: 80px 0;
	}

	.booking-form,
	.booking-confirmation{
		padding: 34px 24px;
	}

	.booking-confirmation h2{
		font-size: 28px;
	}

	.booking-confirmation-detail{
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

@media only screen and (max-width: 575px){
	.booking-calendar{
		padding: 16px;
	}

	.booking-calendar-grid,
	.booking-calendar-weekdays{
		gap: 3px;
	}

	.booking-day{
		font-size: 13px;
	}

	.booking-slots{
		grid-template-columns: 1fr 1fr;
	}
}


/* --- 36.14 inline form validation ----------------------------------------
 * Styling for assets/js/form-validate.js. The template already shipped
 * .help-block.with-errors (styled around line 516) for the old bootstrap
 * validator, but only its <li> children were ever given a colour -- the
 * validator wrote a list. This one writes plain text, so the block itself
 * needs the rule.
 *
 * The red is --error-color, the same token the server-rendered
 * .booking-field-error already uses, so a message looks identical whether it
 * came from PHP or from the browser. */
.help-block[data-validate-error],
.field-error{
	color: var(--error-color);
	font-size: 13px;
	margin-top: 7px;
	text-align: left;
}

/* Empty slots must not reserve space, or every field sits on a phantom gap. */
.help-block[data-validate-error]:empty,
.field-error:empty,
.booking-field-error:empty{
	display: none;
}

/* The field itself. Border plus a soft ring: colour alone is not a sufficient
 * signal, and the ring survives a red-green colour deficiency. */
.form-control.is-invalid,
.form-group.has-error .form-control{
	border-color: var(--error-color);
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

.form-control.is-invalid:focus,
.form-group.has-error .form-control:focus{
	border-color: var(--error-color);
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .22);
}

/* The calendar and the slot list have no single input to outline, so the
 * whole group is marked instead. */
.booking-calendar.has-error,
.booking-slots.has-error{
	border: 1px solid var(--error-color);
	border-radius: 14px;
	padding: 12px;
}

.booking-slots.has-error [data-validate-error],
.booking-calendar.has-error [data-validate-error]{
	grid-column: 1 / -1;
}

/* --- 36.15 Footer: app store badges ---------------------------------------
   .footer-social-links ul li a is a fixed 36x36 circle sized for a single
   glyph icon (section 2594 in the template's own CSS). The store badges are
   full logo lockups at native aspect ratio, so this modifier drops the
   circle constraint instead of squashing the badge into it. */
.footer-app-links ul li a{
	width: auto;
	height: auto;
	border: none;
	border-radius: 8px;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.footer-app-links ul li a:hover{
	background-color: transparent;
	transform: translateY(-2px);
	opacity: 0.85;
}

.footer-app-links ul li a img{
	display: block;
	height: 40px;
	width: auto;
}

/* --- 36.16 reCAPTCHA checkbox --------------------------------------------
   Google's widget is a fixed 304px-wide iframe that cannot be restyled, so
   this only handles the space around it -- and stops it overflowing the form
   on a narrow phone, where 304px plus the form's own padding is wider than
   the viewport. Scaled from the left edge so it stays aligned with the
   fields above it rather than drifting into the middle. */
.recaptcha-box{
	margin-bottom: 24px;
}

/* The dark CTA block on about-us.php: Google only offers a light and a dark
   theme, and the light one on that background is the lesser evil -- so give
   it a little breathing room instead of fighting it. */
.cta-contact-form .recaptcha-box{
	margin-bottom: 20px;
}

@media only screen and (max-width: 400px){
	.recaptcha-box{
		transform: scale(0.86);
		transform-origin: 0 0;
		/* scale() does not reflow, so the box still reserves its full
		   height -- claw back what the scale took off. */
		margin-bottom: 12px;
	}
}