/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Fintech - Business Consulting HTML Template
* Adapted for  : KDFinvest Services (see section 16b for KDFinvest additions)
* File          : Css File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General Css
03. Header Css
04. Hero Css
05. About Us Css
06. Our Services Css
07. Why Choose Us Css
08. Our Feature Css
09. Fact Counter Css
10. What We Do Css
11. How It Work Css
12. Our Pricing Css
13. Our FAQs Css
14. Our Testimonial Css
15. Our Blog Css
16. Footer Css
17. About Us Page Css
18. Services Page Css
19. Service Single Css
20. Blog Archive Css
21. Blog Single Css
22. Team Page Css
23. Team Single Css
24. Pricing Page Css
25. Client Page Css
26. Testimonial Page Css
27. Image Gallery Css
28. Video Gallery Css
29. FAQs Page Css
30. Contact Page Css
31. 404 Error Page Css
32. Responsive Css
16b. KDFinvest Additions (custom)
16b-4. Inner Pages Pass (nav dropdowns, calculators, forms)
16b-5. Homepage Flow Rebuild (who we serve, pillars, partners, products)
16b-6. Product Expansion Pass (NRI, GIFT City, LAS, PMS/AIF compare, support)
16b-7. Calculator Workbench (tabbed chooser, range sliders, result panel)
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color			: #040303;
	--secondary-color		: #F4F4F4;
	/* Was #808080, which measures 3.95:1 on white and 3.59:1 on --secondary-color
	   - under the 4.5:1 minimum for body text. #6B6B6B is the same neutral grey,
	   four steps darker, and clears it at 5.33:1 / 4.85:1. */
	--text-color			: #6B6B6B;
	--accent-color			: #00CC61;
	/* Same brand green, darkened for TEXT ON LIGHT SURFACES only. #00CC61 is a
	   bright display green: it measures 2.14:1 on white, so it fails even the 3:1
	   large-text threshold when used for headline spans or small labels. Fills,
	   icons, borders and anything on a dark ground still use --accent-color. */
	--accent-deep			: #00803F;
	--dark-color			: #004050;
	/* One step lighter than --dark-color, for the soft depth gradients on the
	   dark bands. Not a new brand colour - it is --dark-color lifted. */
	--dark-color-lift		: #00566B;
	--white-color			: #FFFFFF;
	--divider-color			: #F3F3F3;
	--dark-divider-color	: #FFFFFF1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "DM Sans", sans-serif;
}


/************************************/
/*** 	   02. General Css		  ***/
/************************************/

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

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

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

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

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

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

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

.container{
	max-width: 1300px;
}

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

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

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

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

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

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

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

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

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

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

.btn-default{
	position: relative;
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	background: var(--accent-color);
	color: var(--white-color);
	border-radius: 100px;
	padding: 18px 70px 18px 30px;
	border: none;
	overflow: hidden;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.btn-default:hover{
	background-color: transparent;
}

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

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

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

.btn-default.btn-highlighted{
	padding: 18px 30px;
}

.btn-default.btn-highlighted::after{
	display: none;
}

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

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--dark-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);
	}
}

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

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

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

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

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

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 16px;
    font-weight: 700;
	line-height: 1.3em;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
	padding-left: 34px;
    margin-bottom: 15px;
}

.section-title h3::before{
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 24px;
    height: 24px;
}

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

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

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

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

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

.section-title.dark-section h3::before{
	filter: brightness(0) invert(1);
}

.section-title.dark-section p{
	color: var(--white-color);
	opacity: 80%;
}

.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: relative;
	background: var(--dark-color);
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
}

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

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

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

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

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

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

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

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3em;
	padding: 15px 20px !important;
	color: var(--white-color);
	opacity: 80%;
	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(--primary-color);
	opacity: 100%;
}

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

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

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}
.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(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{
	opacity: 100%;
	padding: 6px 20px !important;
	transition: all 0.3s ease-in-out;
}

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

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--primary-color);
	background-color: transparent;
	padding: 6px 20px 6px 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-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-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(--accent-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: 8px 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(--primary-color);
}

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

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

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	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(--primary-color);
}

/************************************/
/***        04. Hero Css	      ***/
/************************************/

.hero{
	position: relative;
	background-color: var(--dark-color);
	background-image: url('../images/hero-bg.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 50px 0 0;
}

.hero.hero-bg-image{
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 240px 0;
}

.hero.hero-bg-image::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    opacity: 60%;
    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.hero-bg-image.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide{
	position: relative;
    padding: 240px 0;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
	opacity: 60%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-bg-image.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 50px;
	text-align: center;
	z-index: 2;
}

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

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

.hero-content{
	position: relative;
	margin-right: 30px;
	z-index: 2;
}

.hero.hero-bg-image .hero-content{
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

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

.hero.hero-bg-image .hero-content .hero-content-body{
	justify-content: center;
}

.hero-btn{
	display: flex;
	margin-right: 40px;
}

.video-play-button{
	display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-button a{
	height: 50px;
	width: 50px;
	border: 2px solid var(--white-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a{
	border-color: var(--primary-color);
}

.video-play-button img{
	max-width: 20px;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a img{
	filter: brightness(0) invert(0);
}

.video-play-button p{
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--white-color);
	margin: 0;
}

.hero-content-footer{
	margin-top: 40px;
}

.hero-content-footer h2{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 30px;
}

.hero-client-slider .client-logo{
	text-align: center;
}

.hero-client-slider .client-logo img{
	width: 100%;
	max-height: 30px;
	opacity: 50%;
	transition: all 0.4s ease-in-out;
}

.hero-client-slider .client-logo img:hover{
	opacity: 100%;
}

.hero-image{
	position: relative;
	padding-left: 80px;
}

.hero-img figure{
	display: block;
}

.hero-img img{
	width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.352;
}

.company-experience{
	position: absolute;
	bottom: 25%;
	left: 0;
	background-color: var(--accent-color);
	border-radius: 10px;
	padding: 16px;
	display: flex;
	align-items: center;
	width: 280px;
	animation: experienceobject 3s infinite linear alternate;
	overflow: hidden;
}

@keyframes experienceobject{
	50%{
		left: 40px;
	}
}

.company-experience::before{
	content: '';
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    z-index: 0;
    transition: all 0.4s ease-in-out;
}

.company-experience:hover::before{
    top: 0;
}

.company-experience h3{
	position: relative;
	width: 35%;
	color: var(--white-color);
	font-size: 46px;
	margin-right: 15px;
	z-index: 1;
}

.company-experience p{
	position: relative;
	width: 65%;
	color: var(--white-color);
	text-align: left;
	margin: 0;
	z-index: 1;
}

/************************************/
/***        05. About Us Css	  ***/
/************************************/

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

.about-us-images{
	position: relative;
	padding: 0 250px 210px 0;
}

.about-img-1{
	position: relative;
}

.about-img-1:before{
	content: '';
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translate(-50%, 70px);
	width: 130px;
	height: 40px;
	background: url('../images/about-img-bg.svg') no-repeat;
	background-position: bottom center;
	background-size: cover;
}

.about-img-1 figure,
.about-img-2 figure{
	display: block;
	border-radius: 20px;
}

.about-img-1 img,
.about-img-2 img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.about-img-1 img{
	aspect-ratio: 1 / 1.18;
}

.about-img-2{
	width: 300px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.about-img-2 img{
	aspect-ratio: 1 / 1.334;
}

.contact-circle{
	position: absolute;
	top: 30px;
	right: 50px;
	animation: infiniterotate 30s infinite linear;
}

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

.contact-circle img{
	max-width: 150px;
}

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

.about-goal-box{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.about-goal-box .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

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

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

.about-goal-box .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.about-goal-box-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.about-goal-box-content p{
	margin: 0;
}

.about-contact-box{
	display: flex;
	align-items: center;
}

.about-contact-box .icon-box{
	position: relative;
	width: 40px;
	height: 40px;
	background: var(--accent-color);
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
}

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

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

.about-contact-box .icon-box img{
	position: relative;
	max-width: 24px;
	z-index: 1;
}

.about-contact-box .about-contact-content{
	width: calc(100% - 60px);
}

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

.about-contact-content p a{
	color: inherit;
}

.about-author-box{
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
}

.about-info-box{
	display: flex;
	align-items: center;
	margin-bottom: 50px;
}

.about-info-box figure,
.about-info-box img{
	max-width: 50px;
	border-radius: 5px;
	margin-right: 10px;
}

.about-author-content{
	width: calc(100% - 60px);
}

.about-author-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 2px;
}

.about-author-content p{
	text-transform: capitalize;
	margin: 0;
}

.about-info-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-info-list ul li{
	position: relative;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.about-info-list ul li:last-child{
	margin-bottom: 0;
}

/************************************/
/***    06. Our Services Css      ***/
/************************************/

.our-services{
	background: var(--secondary-color);
	padding: 100px 0;
}

.our-service-content{
	position: sticky;
	top: 20px;
}

.our-service-list{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
}

.service-item{
	position: relative;
	width: 50%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	padding: 40px;
	overflow: hidden;
}

.service-item:nth-child(odd){
	border-bottom: none;
}

.service-item:nth-child(even){
	border-left: none;
	border-bottom: none;
}

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

.service-item:hover::before,
.service-item.active::before{
	top: auto;
    height: 100%;
}

.service-content-box{
	display: flex;
}

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

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

.service-item:hover .icon-box:before,
.service-item.active .icon-box::before{
	top: auto;
	height: 100%;
}

.service-item .icon-box img{
	position: relative;
	z-index: 1;
	max-width: 30px;
}

.service-item-content{
	position: relative;
    width: calc(100% - 70px);
    z-index: 1;
}

.service-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	transition: all 0.4s ease-in-out;
}

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

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

.service-btn{
	position: relative;
	width: 56px;
	height: 32px;
	background: var(--accent-color);
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-btn::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--primary-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.service-item:hover .service-btn::before,
.service-item.active .service-btn::before{
	top: auto;
	bottom: 0;
    height: 100%;
}

.service-btn img{
	position: relative;
	max-width: 20px;
	z-index: 1;
}

.service-no{
	position: absolute;
	right: 40px;
	bottom: -40px;
	z-index: 1;
}

.service-no h2{
	font-size: 100px;
	letter-spacing: 0.03em;
	color: transparent;
    -webkit-text-stroke-width: 1px;
    stroke-width: 10px;
    -webkit-text-stroke-color: var(--divider-color);
    stroke: var(--divider-color);
	transition: all 0.4s ease-in-out;
}

.service-item:hover .service-no h2,
.service-item.active .service-no h2{
	-webkit-text-stroke-color: var(--white-color);
    stroke: var(--white-color);
}

.service-footer{
	margin-top: 40px;
}

.service-footer p{
	margin-bottom: 0;
}

.service-footer p a{
	font-weight: 700;
	text-decoration: underline;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.service-footer p a:hover{
	color: var(--primary-color);
}

/************************************/
/***      07. Why Choose Us Css   ***/
/************************************/

.why-choose-us{
	padding: 100px 0;
}

.why-choose-content{
	margin-right: 30px;
}

.why-choose-box-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.why-choose-box{
	width: calc(50% - 15px);
}

.why-choose-box .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

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

.why-choose-box:hover .icon-box:before{
	transform: scale(1);
}

.why-choose-box .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.why-choose-box-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.why-choose-box-content p{
	margin: 0;
}

.why-choose-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
}

.why-choose-list ul li{
	width: calc(50% - 15px);
	position: relative;
	color: var(--primary-color);
	text-transform: capitalize;
}

.why-choose-image{
	position: relative;
	padding: 0 0 165px 235px;
}

.why-choose-img-2{
	max-width: 375px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.why-choose-img-1 figure,
.why-choose-img-2 figure{
	display: block;
	border-radius: 20px;
}

.why-choose-img-1 img,
.why-choose-img-2 img{
	width: 100%;
	aspect-ratio: 1 / 1.09;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-contact-circle{
	position: absolute;
	right: 50px;
	bottom: 0;
	animation: infiniterotate 30s infinite linear;
}

.why-choose-contact-circle img{
	max-width: 130px;
}

/************************************/
/***      08. Our Feature Css     ***/
/************************************/

.our-feature{
	padding: 100px 0;
	background-color: var(--dark-color);
	background-image: url('../images/our-feature-bg.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.our-feature-list{
	display: flex;
	flex-wrap: wrap;
}

.our-feature-item{
	width: 33.33%;
	padding: 40px;
	border-radius: 20px;
}

.our-feature-item:nth-child(odd){
	background: var(--dark-divider-color);
}

.our-feature-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--dark-divider-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	overflow: hidden;
}

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

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

.our-feature-item:nth-child(odd) .icon-box{
	background: var(--dark-color);
}

.our-feature-item .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.feature-item-content h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.feature-item-content p{
	color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

.our-feature-footer{
	text-align: center;
	margin-top: 60px;
}

.our-feature-footer p{
	color: var(--white-color);
	margin: 0;
}

.our-feature-footer p span{
	background-color: var(--accent-color);
	color: var(--white-color);
	border-radius: 100px;
	line-height: 1.1em;
	padding: 2px 10px;
	margin-right: 5px;
}

.our-feature-footer a{
	font-weight: 700;
	text-decoration: underline;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.our-feature-footer a:hover{
	color: var(--primary-color);
}

/************************************/
/***     09. Fact Counter Css     ***/
/************************************/

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

.fact-counter-image{
	position: relative;
	padding: 0 45px 55px 0;
}

.fact-counter-img figure{
	display: block;
	border-radius: 20px;
}

.fact-counter-img img{
	width: 100%;
	aspect-ratio: 1 / 0.945;
	object-fit: cover;
	border-radius: 20px;
}

.fact-counter-skillbar{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	max-width: 350px;
	border-radius: 20px;
	animation: moveskillbar 3s infinite linear alternate;
}

@keyframes moveskillbar{
	50%{
		right: 40px;
	}
}

.fact-counter-skillbar img{
	border-radius: 20px;
}

.fact-counter-content{
	margin-left: 20px;
}

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

.fact-counter-box{
	width: calc(33.33% - 20px);
}

.fact-counter-box .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;
	display: flex;
	background-color: var(--accent-color);
	border-radius: 5px;
	margin-bottom: 20px;
	overflow: hidden;
}

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

.fact-counter-box:hover .icon-box::before{
	transform: scale(1);
}

.fact-counter-box .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.fact-counter-box-content h2{
	font-size: 46px;
	color: var(--dark-color);
	margin-bottom: 10px;
}

.fact-counter-box-content p{
	text-transform: capitalize;
	margin-bottom: 0;
}

.fact-counter-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
}

.fact-counter-list ul li{
	width: calc(50% - 15px);
	position: relative;
	color: var(--primary-color);
	text-transform: capitalize;
}

/************************************/
/***      10. What We Do Css      ***/
/************************************/

.what-we-do{
	background-color: var(--secondary-color);
	padding: 100px 0;
}

.what-we-do-content{
	margin-right: 30px;
}

.what-we-do-list{
	margin-bottom: 40px;
}

.what-we-do-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
}

.what-we-do-list ul li{
	width: calc(50% - 15px);
	position: relative;
	color: var(--primary-color);
	text-transform: capitalize;
}

.what-we-do-images{
	position: relative;
	padding: 0 80px 100px 15px;
}

.what-do-we-img-1 figure,
.what-do-we-img-2 figure{
	display: block;
	border-radius: 20px;
}

.what-do-we-img-1 img{
	width: 100%;
	aspect-ratio: 1 / 0.831;
	object-fit: cover;
	border-radius: 20px;
}

.what-do-we-img-2{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	max-width: 280px;
}

.what-do-we-img-2 img{
	width: 100%;
	aspect-ratio: 1 / 0.723;
	object-fit: cover;
	border: 9px solid var(--secondary-color);
	border-radius: 20px;
}

.experience-counter-box{
	position: absolute;
	bottom: 45px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 275px;
	background-color: var(--white-color);
	border-left: 2px solid var(--accent-color);
	border-radius: 5px;
	padding: 15px;
	overflow: hidden;
	animation: yearbox 3s infinite linear alternate;
}

@keyframes yearbox{
	50%{
		left: 30px;
	}
}

.experience-counter-box::before{
	content: '';
    position: absolute;
    top: 0;
	left: 0;
    width: 0;
    height: 100%;
    background: var(--accent-color);
    z-index: 0;
    transition: all 0.4s ease-in-out;
}

.experience-counter-box:hover::before{
    width: 100%;
}

.experience-counter-no{
	margin-right: 15px;
}

.experience-counter-no h2{
	position: relative;
	font-size: 46px;
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.experience-counter-content{
	width: 60%;
}

.experience-counter-content p{
	position: relative;
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.experience-counter-box:hover .experience-counter-no h2,
.experience-counter-box:hover .experience-counter-content p{
	color: var(--white-color);
}

/************************************/
/***      11. How It Work Css     ***/
/************************************/

.how-it-work{
	padding: 100px 0;
}

.how-it-work-content{
	position: sticky;
	top: 30px;
}

.work-step-item{
	position: relative;
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px 40px 0 40px;
	margin-bottom: 40px;
	overflow: hidden;
}

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

.work-step-item::before{
    content: '';
    display: block;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dark-color);
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

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

.work-step-item-content{
	position: relative;
	margin-bottom: 15px;
	z-index: 1;
}

.work-step-item-content h3{
	font-size: 16px;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.work-step-item-content h2{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.work-step-item:hover .work-step-item-content h3,
.work-step-item:hover .work-step-item-content h2{
	color: var(--white-color);
}

.work-step-item-content p{
	margin-bottom: 0;
	transition: all 0.3s ease-in-out;
}

.work-step-item:hover .work-step-item-content p{
	color: var(--white-color);
	opacity: 80%;
}

.work-step-item-no{
	position: relative;
	margin-bottom: -35px;
	z-index: 1;
}

.work-step-item-no h2{
    font-size: 100px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: transparent;
    stroke-width: 10px;
    -webkit-text-stroke-width: 1px;
	stroke: var(--text-color);
    -webkit-text-stroke-color: var(--text-color);
	opacity: 15%;
    transition: all 0.4s ease-in-out;
}

.work-step-item:hover .work-step-item-no h2{
	stroke: var(--white-color);
	-webkit-text-stroke-color: var(--white-color);
}

/************************************/
/***      12. Our Pricing Css     ***/
/************************************/

.our-pricing{
	background-color: var(--secondary-color);
	padding: 100px 0;
}

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

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

.pricing-header h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.pricing-header h2{
	font-size: 46px;
	color: var(--accent-color);
}

.pricing-header sup{
	font-size: 30px;
	top: -6px;
}

.pricing-header sub{
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	color: var(--text-color);
	bottom: 0;
}

.pricing-body{
	margin-bottom: 30px;
}

.pricing-list-title{
	margin-bottom: 20px;
}

.pricing-list-title h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

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

.pricing-list ul li{
	position: relative;
	text-transform: capitalize;
	margin-bottom: 10px;
}

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

.pricing-btn .btn-default{
	width: 100%;
	text-align: center;
}

.pricing-box.highlighted-box{
	position: relative;
	background-color: var(--dark-color);
	overflow: hidden;
}

.highlighted-box::before{
	content: 'featured';
	position: absolute;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--dark-color);
	top: 35px;
    right: -45px;
	width: 190px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--white-color);
	transform: rotate(45deg);
}

.pricing-box.highlighted-box .pricing-header{
	border-color: var(--dark-divider-color);
    padding: 0 60px 30px 0;
}

.pricing-box.highlighted-box .pricing-header h3,
.pricing-box.highlighted-box .pricing-header h2,
.pricing-box.highlighted-box .pricing-header h2 sub,
.pricing-box.highlighted-box .pricing-list-title h3,
.pricing-box.highlighted-box .pricing-list ul li{
	color: var(--white-color);
}

.pricing-box.highlighted-box .pricing-btn .btn-default{
	background: var(--white-color);
	color: var(--dark-color);
}

.pricing-box.highlighted-box .pricing-btn .btn-default:hover{
	color: var(--white-color);
}

.pricing-box.highlighted-box .pricing-btn .btn-default:hover::before{
	background: var(--accent-color);
}

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

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

.pricing-benefit-list ul li{
	color: var(--primary-color);
    display: inline-flex;
    align-items: center;
}

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

/************************************/
/***       13. Our FAQs Css       ***/
/************************************/

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

.our-faqs-image{
	position: relative;
	padding-right: 70px;
}

.our-faqs-img figure{
	display: block;
	border-radius: 20px;
}

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

.client-review-box{
	position: absolute;
	bottom: 40px;
	right: 0;
	width: 100%;
	max-width: 210px;
	text-align: center;
	background-color: var(--dark-color);
	border-radius: 10px;
	padding: 20px;
	animation: reviewbox 3s infinite linear alternate;
}

@keyframes reviewbox{
	50%{
		right: 50px;
	}
}

.client-review-box-content{
	margin-bottom: 15px;
}

.client-review-box-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	margin-bottom: 0;
}

.client-review-box-content p span{
	font-size: 16px;
	font-weight: 400;
	display: block;
}

.client-review-images{
	display: inline-flex;
}

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

.client-review-images .client-image:first-child{
    margin: 0;
}

.client-review-images .client-image figure{
	display: block;
}

.client-review-images .client-image img{
    max-width: 50px;
}

.client-image.add-more{
	width: 32px;
	height: 32px;
	background-color: var(--white-color);
	text-align: center;
	display: inline-flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s ease-in-out;
}

.client-image.add-more:hover{
	background-color: var(--accent-color);
}

.client-image.add-more p{
	font-size: 12px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.client-image.add-more:hover p{
	color: var(--white-color);
}

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

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2em;
	padding: 16px 45px 16px 20px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed){
   background-color: var(--dark-color);
   color: var(--white-color);
   border-bottom: 1px solid var(--dark-divider-color);
}

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

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "Font Awesome 6 Free";
	font-size: 20px;
	font-weight: 900;
	color: var(--white-color);
	position: absolute;
	right: 16px;
	top: 50%;
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	transform: translate(0px, -10px);
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f067';
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-body{
	background-color: var(--dark-color);
	padding: 16px 45px 16px 20px;
}

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

/************************************/
/***   14. Our Testimonial Css    ***/
/************************************/

.our-testimonial{
	padding: 100px 0;
	background: url(../images/testimonial-bg-img.svg) no-repeat;
	background-color: var(--dark-color);
	background-position: center center;
	background-size: auto;
}

.testimonial-content{
	margin-right: 40px;
}

.testimonial-slider-box{
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(20px);
	padding: 50px 40px;
	border-radius: 20px;
}

.testimonial-slider{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 50px;
	padding-bottom: 50px;
}

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

.testimonial-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}

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

.testimonial-quotes{
	margin-left: 20px;
}

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

.testimonial-body{
	margin-bottom: 40px;
}

.testimonial-body p{
	color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

.testimonial-author{
	width: 75%;
	display: flex;
	align-items: center;
}

.testimonial-author .author-image{
	margin-right: 20px;
}

.testimonial-author .author-image figure{
	display: block;
	border-radius: 5px;
}

.testimonial-author .author-image img{
	max-width: 40px;
	border-radius: 5px;
}

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

.testimonial-author .author-content h3{
	position: relative;
	display: inline-block;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: capitalize;
	color: var(--white-color);
	padding-right: 20px;
}

.testimonial-author .author-content h3 span{
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

.testimonial-slider .testimonial-pagination{
	position: absolute;
	bottom: 0;
	right: 0;
    text-align: right;
	z-index: 1;
}

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet{
	position: relative;
    height: 12px;
    width: 12px;
    background: var(--white-color);
    margin: 0 8px;
	transition: all 0.3s ease-in-out;
}

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 0;
    width: 0;
    border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

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

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet-active:before{
	height: 24px;
	width: 24px;
	border: 1px solid var(--accent-color);
}

.customer-rating-boxes{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
}

.customer-rating-box{
	width: calc(33.33% - 26.67px);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	border: 1px solid var(--dark-divider-color);
	border-radius: 10px;
	padding: 10px;
}

.customer-rating-image{
	margin-right: 10px;
}

.customer-rating-image img{
	width: 100%;
	max-width: 40px;
}

.customer-rating-content p{
	color: var(--white-color);
	text-transform: capitalize;
	display: block;
	margin-bottom: 5px;
}

.customer-rating-counter{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.customer-rating-counter h3{
	font-size: 20px;
	font-weight: 500;
	color: var(--white-color);
}

.customer-rating-star-box{
	text-align: center;
}

.customer-rating-star i{
	font-size: 12px;
	color: var(--white-color);
}

.customer-rating-counter p{
	text-transform: capitalize;
	text-align: center;
	color: var(--white-color);
	margin-right: 10px;
	margin-bottom: 0;
}

.customer-rating-counter p span{
	display: block;
	font-size: 20px;
	font-weight: 500;
}

.star-rating-img img{
	width: 100%;
	max-width: 85px;
}

.customer-rating-box.customer-rating-content p{
	margin: 0;
}

/************************************/
/***       15. Our Blog Css       ***/
/************************************/

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

.post-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image,
.post-item-body{
	width: calc(50% - 15px);
}

.post-featured-image a{
    cursor: none;
}

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

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

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

.post-item-meta{
    margin-bottom: 20px;
}

.post-item-meta ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-item-meta ul li{
    color: var(--text-color);
    text-transform: capitalize;
    display: inline-block;
    margin-right: 15px;
}

.post-item-meta ul li:last-child{
    margin-right: 0;
}

.post-item-meta ul li i{
	color: var(--text-color);
	font-size: 16px;
	margin-right: 5px;
}

.post-item-content{
	margin-bottom: 20px;
}

.post-item-content h2{
    font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	line-height: 1.4em;
}

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

.readmore-btn{
	position: relative;
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color);
	padding-right: 35px;
	transition: all 0.3s ease-in-out;
}

.readmore-btn:hover{
	color: var(--primary-color);
}

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

.readmore-btn:hover:before{
	filter: brightness(0) invert(0);
}

/************************************/
/***        16. Footer Css        ***/
/************************************/

footer.main-footer{
	background: url('../images/footer-bg.svg'), var(--dark-color);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 100px 0 0 0;
}

.footer-newsletter-box{
    margin-right: 120px;
}

.footer-newsletter-title{
	margin-bottom: 40px;
}

.footer-newsletter-title h3{
	font-size: 34px;
	color: var(--white-color);
}

.newsletter-form .form-group{
	display: flex;
}

.newsletter-form .form-group .form-control{
	width: 85%;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--white-color);
	background: transparent;
	border: 1px solid var(--dark-divider-color);
	border-right: none;
	border-radius: 10px 0 0 10px;
	outline: none;
	box-shadow: none;
	padding: 15px;
	opacity: 80%;
}

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

.newsletter-form .form-group .newsletter-btn{
	background-color: var(--accent-color);
	width: 15%;
	border: none;
	border-radius: 0 10px 10px 0;
	padding: 15px;
	transition: all 0.3s ease-in-out;
}

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

.newsletter-form .form-group .newsletter-btn img{
	max-width: 28px;
}

.footer-links h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 25px;
}

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

.footer-links ul li{
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 10px;
	opacity: 80%;
	transition: all 0.3s ease-in-out;
}

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

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

.footer-links ul li a{
	color: inherit;
}

.footer-cta-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	background-color: var(--dark-divider-color);
	border-radius: 20px;
	margin-top: 60px;
	padding: 40px;
}

.footer-logo{
	width: calc(20% - 10px);
}

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

.footer-contact-box{
	width: calc(80% - 10px);
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: 30px 80px;
}

.footer-contact-item{
	position: relative;
}

.footer-contact-item::before{
	content: '';
	position: absolute;
	right: -40px;
	bottom: 0;
	background-color: var(--dark-divider-color);
	height: 100%;
	width: 1px;
}

.footer-contact-item:last-child::before{
	display: none;
}

.footer-contact-item p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 10px;
}

.footer-contact-item h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);	
}

.footer-copyright{
	padding: 60px 0;	
}

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

.footer-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.footer-menu ul li{
	position: relative;
	display: inline-block;
	text-transform: capitalize;
	line-height: normal;
	color: var(--white-color);
	margin-right: 40px;
	opacity: 80%;
	transition: all 0.3s ease-in-out;
}

.footer-menu ul li:last-child{
	margin-right: 0;
}

.footer-menu ul li::before{
	content: '';
	position: absolute;
	top: 50%;
	right: -23px;
	background-color: var(--dark-divider-color);
	border-radius: 50%;
	height: 6px;
	width: 6px;
	transform: translateY(-50%);
}

.footer-menu ul li:last-child:before{
	display: none;
}

.footer-menu ul li:hover{
	color: var(--accent-color);
}

.footer-menu ul li a{
	color: inherit;
}

/*********************************************/
/***   16b. KDFinvest Additions (custom)   ***/
/*********************************************/
/* Added for the KDFinvest homepage rebuild. Keep KDFinvest-specific rules here
   so they stay separable from the original Fintech template stylesheet. */

/* Email in the Problem section's contact box.
   The template sizes .about-contact-content p at 20px/600 for a 15-character
   phone number ("+(658) 456-975"). info@kdfinvestservices.com is 26 characters
   and overflows that narrow column at 20px, so the email gets its own size.
   The base rule is left untouched for when the real phone number is added. */
.about-contact-box.about-contact-email .about-contact-content p{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5em;
	overflow-wrap: break-word;
}

.about-contact-box.about-contact-email .about-contact-content p a{
	transition: color 0.3s ease-in-out;
}

.about-contact-box.about-contact-email .about-contact-content p a:hover{
	color: var(--accent-color);
}

/* Secondary "ghost" button - pairs with .btn-default in the hero.
   Geometry is matched to .btn-default deliberately so the two sit level:
   .btn-default  = 18px padding + 18px line-height + 18px padding + 0 border = 54px
   .btn-outline  = 16px padding + 18px line-height + 16px padding + 2x2px border = 54px */
.btn-outline{
	position: relative;
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	background: transparent;
	color: var(--white-color);
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 100px;
	padding: 16px 68px 16px 28px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

/* Fill sweeps in from the right, mirroring .btn-default's hover */
.btn-outline::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: auto;
	right: 0;
	width: 0;
	height: 100%;
	background: var(--white-color);
	border-radius: 100px;
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-outline:hover::before{
	width: 100%;
	left: 0;
	right: auto;
}

.btn-outline:hover{
	border-color: var(--white-color);
	color: var(--primary-color);
}

/* Arrow matches .btn-default; inverts to dark as the white fill arrives */
.btn-outline::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 30px;
	height: 30px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	transform: translate(-28px, -50%);
	transition: all 0.4s ease-in-out;
}

.btn-outline:hover::after{
	filter: brightness(0);
}

/* Hero secondary button wrapper. The vertical margin only shows once
   .hero-content-body wraps on narrow screens, giving the two buttons a gap. */
.hero-btn-secondary{
	display: flex;
	margin: 8px 0;
}

/* Risk note inside each investment solution card */
.solution-risk-note{
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
	border-top: 1px solid var(--divider-color);
	margin: 20px 0 0;
	padding-top: 15px;
}

.solution-risk-note strong{
	color: var(--primary-color);
	font-weight: 600;
}

/* Educational disclosure under the investment solutions grid */
.solutions-disclosure{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 25px 30px;
	margin-top: 10px;
}

.solutions-disclosure p{
	font-size: 14px;
	line-height: 1.7em;
	margin-bottom: 0;
}

/* Final CTA band (replaces the testimonial section) */
.final-cta-content .section-title{
	margin-bottom: 30px;
}

.final-cta-content .section-title h2{
	margin-bottom: 20px;
}

.final-cta-btn{
	display: flex;
	justify-content: center;
}

/* Site-wide risk disclosure in the footer */
.footer-disclosure{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 20px;
	padding-top: 25px;
}

.footer-disclosure p{
	font-size: 13px;
	line-height: 1.7em;
	opacity: 0.7;
	margin-bottom: 0;
}

/* Footer brand block. Replaces the template's newsletter form — KDFinvest has no
   newsletter to sign up to and the form posted nowhere. The template never styled
   a paragraph in this slot, so it would inherit --text-color (#808080), which is
   only about 2.9:1 against the deep-teal footer. */
.footer-brand-box p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

/* Closing CTA band. .hero-btn brings its own 40px right margin over from the
   hero, so the pair only needs centring, a tighter gap and a wrap for narrow
   screens. */
.final-cta-btn{
	flex-wrap: wrap;
	align-items: center;
}

.final-cta-btn .hero-btn{
	margin-right: 20px;
}

/* The footer email is a link inside a heading the template styled as plain text. */
.footer-contact-item h3 a{
	color: inherit;
	transition: color 0.3s ease-in-out;
}

.footer-contact-item h3 a:hover{
	color: var(--accent-color);
}

/* Header fit between 992px and the widest container.
   The template's demo menu is five short words ("Home / About Us / Services /
   Blog / Our Team"). The KDFinvest menu carries "Investment Solutions" and
   "Our Approach", which at the template's 16px/20px-padding runs the logo, menu
   and header button past the container below 1400px. These two steps step the
   menu down instead of letting it wrap or overflow. */
@media only screen and (min-width: 992px) and (max-width: 1399px){

	.main-menu .nav-menu-wrapper{
		margin: 0 10px;
	}

	.main-menu ul li a{
		font-size: 15px;
		padding: 12px 12px !important;
	}

	.header-btn .btn-default{
		font-size: 15px;
		padding: 15px 50px 15px 20px;
	}

	.header-btn .btn-default::after{
		width: 24px;
		height: 24px;
		transform: translate(-20px, -50%);
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px){

	.main-menu ul li a{
		font-size: 14px;
		padding: 12px 9px !important;
	}

	.header-btn .btn-default{
		font-size: 14px;
		padding: 14px 44px 14px 16px;
	}

	.header-btn .btn-default::after{
		width: 22px;
		height: 22px;
		transform: translate(-16px, -50%);
	}
}

/* Process intro column. */
@media only screen and (min-width: 992px){

	/* The vendor pins this column (position:sticky, top:30px). That made sense
	   against three tall cards. Now that the cards have lost their dead space
	   the section is about one viewport tall, so pinning only parks the intro
	   against the top edge with several hundred pixels of empty column beneath
	   it. Centred against the five steps, the pair balances. */
	.how-it-work-content{
		position: static;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-right: 40px;
	}
}

/* Risk disclosure under the investment solutions grid. .our-services already
   sits on --secondary-color, so the disclosure needs the inverse surface to
   read as its own block instead of disappearing into the section. */
.our-services .solutions-disclosure{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	margin-top: 30px;
}

/* The template's checklists carry two- or three-word phrases, so it sets
   text-transform: capitalize on all of them. The KDFinvest lists carry whole
   sentences, and Title Case renders those as "Decisions Here Are Grounded In
   Real Experience, Not Theory." */
.fact-counter-list ul li,
.why-choose-list ul li,
.about-info-list ul li{
	text-transform: none;
}

/* ============================================================
   16b-2. HOMEPAGE ENHANCEMENT PASS
   Contrast, polish and accessibility refinements over the Fintech template.
   Nothing here changes the brand colours: --accent-color (#00CC61),
   --dark-color (#004050) and --primary-color (#040303) are all still the same
   values, still used in all the same places. What changed is which of them is
   used for TEXT, because several of the template's pairings were unreadable.
   Every ratio below was measured on the rendered page, not estimated.
   ============================================================ */


/* --- Buttons -------------------------------------------------
   .btn-default shipped white text on the #00CC61 fill: 2.14:1, which fails AA
   for every primary CTA on the site. The hover state already swaps the fill to
   near-black, so inverting only the rest state fixes it without touching the
   green:
       rest   #040303 on #00CC61  =  9.6:1
       hover  #FFFFFF on #040303  = 18.9:1                                   */

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

.btn-default:hover,
.btn-default:focus-visible{
	color: var(--white-color);
}

/* The arrow glyph ships white. Darken it at rest, restore it on hover so it
   tracks the label. */
.btn-default::after{
	filter: brightness(0);
}

.btn-default:hover::after,
.btn-default:focus-visible::after{
	filter: none;
}

/* Buttons are the page's primary affordance - give them a little lift. */
.btn-default,
.btn-outline{
	will-change: transform;
}

.btn-default:hover,
.btn-outline:hover{
	transform: translateY(-2px);
}

.btn-default:active,
.btn-outline:active{
	transform: translateY(0);
}

/* Same white-on-green problem in the small round arrow button on each
   solution card. */
.service-btn img{
	filter: brightness(0);
	transition: filter 0.4s ease-in-out;
}

.service-item:hover .service-btn img,
.service-item.active .service-btn img{
	filter: none;
}


/* --- Accent text on light surfaces ---------------------------
   #00CC61 is a display green. On white it measures 2.14:1, so it fails even
   the relaxed 3:1 large-text threshold when used as a headline highlight, and
   badly fails 4.5:1 as a small label. --accent-deep is the same hue at 5.05:1
   on white. Anything sitting on a dark ground keeps the bright green.       */

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-deep);
}

.section-title.dark-section h1 span,
.section-title.dark-section h2 span{
	color: var(--accent-color);
}

/* "STEP" eyebrow measured 1.95:1 on the --secondary-color card. */
.work-step-item-content h3{
	color: var(--accent-deep);
}

/* The badge in the feature strip: white on green again. */
.our-feature-footer p span{
	color: var(--primary-color);
	font-weight: 700;
}

/* Solution cards fill with green on hover and set their text to white - 2.14:1
   at exactly the moment the user is reading them. */
.service-item:hover .service-item-content h3,
.service-item.active .service-item-content h3,
.service-item:hover .service-item-content p,
.service-item.active .service-item-content p{
	color: var(--primary-color);
}

.service-item:hover .service-no h2,
.service-item.active .service-no h2{
	-webkit-text-stroke-color: var(--primary-color);
	stroke: var(--primary-color);
	opacity: 0.25;
}


/* --- Header --------------------------------------------------- */

/* Nav hover was --primary-color on the --dark-color bar: 1.8:1, effectively
   invisible. The brand green reads at 5.3:1 there. */
.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
	opacity: 100%;
}

/* Mark where you are. The template highlights nothing, so every page looks
   like every other page. */
.main-menu ul li a[aria-current="page"]{
	color: var(--white-color);
	opacity: 100%;
	font-weight: 700;
}

.main-menu ul li a[aria-current="page"]::after{
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent-color);
}

.slicknav_nav li a[aria-current="page"]{
	font-weight: 700;
	background-color: rgba(4, 3, 3, 0.09);
}

/* A wealth site's primary action should stay reachable down a long page.
   Pure CSS - the vendor's JS sticky sets .hide and .active together, which
   leaves the bar translated off-screen, so it is deliberately not used. */
header.main-header{
	position: sticky;
	top: 0;
	transition: box-shadow 0.3s ease-in-out;
}

/* Anchor targets clear the sticky bar instead of hiding beneath it
   (WCAG 2.2 "focus not obscured"). */
html{
	scroll-padding-top: 110px;
}

/* Mobile drawer: white on the green panel is 2.14:1. Near-black is 9.6:1 and
   keeps the panel green. */
.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	color: var(--primary-color);
	font-weight: 500;
	padding: 13px 20px;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: rgba(4, 3, 3, 0.09);
	color: var(--primary-color);
}

.slicknav_arrow:after{
	color: var(--primary-color);
}

/* 38px was under the 44px minimum touch target. */
.slicknav_btn{
	width: 46px;
	height: 46px;
	border-radius: 12px;
}

.slicknav_icon .slicknav_icon-bar{
	background-color: var(--primary-color);
}


/* --- Hero ------------------------------------------------------
   The flat 60% black scrim left the sub-headline at roughly 3:1 over the
   brighter parts of the photograph. A vertical gradient - lighter at the top
   where there is no text, deepening through brand teal to near-black at the
   bottom where the paragraph and buttons sit - measures 6.3:1 or better across
   the whole slide and reads far more considered than a flat wash.          */

.hero.hero-bg-image.hero-slider-layout .hero-slide::before{
	background: linear-gradient(180deg,
		rgba(4, 3, 3, 0.52) 0%,
		rgba(0, 64, 80, 0.80) 52%,
		rgba(4, 3, 3, 0.82) 100%);
	opacity: 1;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide,
.hero-slider-layout .hero-slider-image{
	overflow: hidden;
}

/* Slow drift on the slide image. Reads as depth rather than as a slideshow,
   and is disabled entirely under reduced motion further down. */
.hero-slider-layout .hero-slider-image img{
	transform: scale(1.06);
	transition: transform 7s ease-out;
}

.hero-slider-layout .swiper-slide-active .hero-slider-image img{
	transform: scale(1);
}

.hero.hero-bg-image .hero-content .section-title p{
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* Carousel controls. Bullets were 12px spans - not keyboard reachable and far
   under the 24px minimum pointer target. They are given a real hit area via a
   transparent ::before, and the script promotes them to real buttons. */
.hero.hero-bg-image.hero-slider-layout .hero-pagination{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	left: 0;
	right: 0;
}

.hero.hero-bg-image.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
	position: relative;
	width: 10px;
	height: 10px;
	margin: 0 6px;
	opacity: 0.55;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.hero.hero-bg-image.hero-slider-layout .hero-pagination .swiper-pagination-bullet::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
}

.hero.hero-bg-image.hero-slider-layout .hero-pagination .swiper-pagination-bullet:hover{
	opacity: 1;
}

.hero.hero-bg-image.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
	background-color: var(--accent-color);
	opacity: 1;
	width: 30px;
	border-radius: 6px;
}

/* Slide 2's headline is an <h2> so the page has a single level-one heading,
   but it is still the hero statement and must read at hero scale. Sizes track
   .section-title h1 at each of the template's breakpoints. */
.hero .section-title h2.hero-heading{
	font-size: 70px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

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

	.hero .section-title h2.hero-heading{
		font-size: 55px;
	}
}

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

	.hero .section-title h2.hero-heading{
		font-size: 36px;
	}
}

/* The dots and the stop control are one group, centred together. */
.hero.hero-bg-image.hero-slider-layout .hero-controls{
	position: absolute;
	bottom: 44px;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero.hero-bg-image.hero-slider-layout .hero-controls .hero-pagination{
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	bottom: auto;
}

/* Announced, never shown. */
.visually-hidden{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Auto-advancing content needs a stop control (WCAG 2.2.2). This sits inline
   with the dots so it reads as part of the same control group. */
.hero-motion-toggle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: 10px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	color: var(--white-color);
	cursor: pointer;
	vertical-align: middle;
	transition: all 0.3s ease-in-out;
}

.hero-motion-toggle:hover{
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--white-color);
}

.hero-motion-toggle svg{
	width: 12px;
	height: 12px;
	display: block;
}

.hero-motion-toggle .icon-play{ display: none; }
.hero-motion-toggle[aria-pressed="true"] .icon-play{ display: block; }
.hero-motion-toggle[aria-pressed="true"] .icon-pause{ display: none; }


/* --- Depth on the dark bands ----------------------------------
   A single flat --dark-color fill across three full-width bands reads cheap at
   scale. These are the same colour lifted and dropped a step, so the bands
   gain a light source without introducing a new hue.                       */

.our-feature{
	background-image:
		radial-gradient(120% 80% at 50% 0%, rgba(0, 86, 107, 0.75) 0%, rgba(0, 64, 80, 0) 62%),
		url('../images/our-feature-bg.svg');
}

.our-testimonial{
	background-image:
		radial-gradient(90% 70% at 50% 12%, rgba(0, 86, 107, 0.85) 0%, rgba(0, 64, 80, 0) 68%),
		url(../images/testimonial-bg-img.svg);
}

footer.main-footer{
	background-image:
		linear-gradient(180deg, rgba(0, 86, 107, 0.55) 0%, rgba(0, 64, 80, 0) 42%),
		url('../images/footer-bg.svg');
}


/* --- Card polish ---------------------------------------------- */

.our-feature-item{
	transition: transform 0.35s ease-in-out, background-color 0.35s ease-in-out;
}

.our-feature-item:hover{
	transform: translateY(-6px);
}

.why-choose-box,
.about-goal-box,
.fact-counter-box{
	transition: transform 0.35s ease-in-out;
}

.why-choose-box:hover,
.about-goal-box:hover,
.fact-counter-box:hover{
	transform: translateY(-4px);
}

/* The FAQ accordion is the densest interactive block on the page; give the
   open panel a clear edge instead of relying on colour alone. */
.faq-accordion .accordion-item{
	transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
	box-shadow: 0 18px 40px -30px rgba(4, 3, 3, 0.55);
}

/* Solutions disclosure: quiet, but not invisible. */
.our-services .solutions-disclosure p{
	color: var(--text-color);
}


/* --- Footer ----------------------------------------------------
   The risk disclosure measured 2.08:1 - grey at 70% opacity on deep teal. It
   is the one block on the page a regulator would read first. */

.footer-disclosure p{
	color: var(--white-color);
	opacity: 0.78;
	font-size: 13.5px;
}

.footer-links ul li a{
	display: inline-block;
	padding: 3px 0;
}

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


/* --- Focus visibility ------------------------------------------
   The template shipped no focus indicator. A 2px ring is easy to lose against
   the green and teal grounds, so this uses a ring plus an offset halo that
   works on both light and dark surfaces. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
	outline: 3px solid var(--accent-color);
	outline-offset: 3px;
	border-radius: 4px;
}

.hero :focus-visible,
.our-feature :focus-visible,
.our-testimonial :focus-visible,
.main-footer :focus-visible,
.main-header :focus-visible{
	outline-color: var(--white-color);
}

/* Keyboard users get to the content without tabbing the whole menu. */
.skip-to-content{
	position: absolute;
	top: -100px;
	left: 20px;
	z-index: 9999;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 700;
	padding: 14px 24px;
	border-radius: 0 0 10px 10px;
	transition: top 0.25s ease-in-out;
}

.skip-to-content:focus{
	top: 0;
	color: var(--primary-color);
}


/* --- Reduced motion --------------------------------------------
   The template runs WOW, GSAP SplitText, an image reveal and an autoplaying
   carousel with no guard at all. index.html strips the animation classes
   before function.js runs; this covers everything else, site-wide. */

@media (prefers-reduced-motion: reduce){

	*,
	*::before,
	*::after{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.wow,
	.reveal,
	.reveal img,
	.text-anime-style-1,
	.text-anime-style-2,
	.text-anime-style-2 *,
	.split-line,
	.split-line *{
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.hero-slider-layout .hero-slider-image img,
	.hero-slider-layout .swiper-slide-active .hero-slider-image img{
		transform: none !important;
	}

	.btn-default:hover,
	.btn-outline:hover,
	.our-feature-item:hover,
	.why-choose-box:hover,
	.about-goal-box:hover,
	.fact-counter-box:hover{
		transform: none;
	}
}


/* --- Responsive refinements ------------------------------------ */

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

	html{
		scroll-padding-top: 96px;
	}
}

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

	html{
		scroll-padding-top: 88px;
	}

	/* The sticky bar costs too much of a short viewport once the drawer opens. */
	header.main-header{
		position: relative;
	}

	.hero.hero-bg-image .hero-content .section-title p{
		max-width: 100%;
	}
}

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

	/* Stack them, but size each to its own label. Edge-to-edge pills read as
	   form fields rather than calls to action. The earlier justification for
	   stretching them - the 44px touch target - did not hold: .btn-default is
	   already 15px + 18px + 15px = 48px tall on mobile, so the minimum is met
	   without touching the width. */
	.hero-content-body,
	.final-cta-btn{
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.hero-content-body .hero-btn,
	.hero-content-body .hero-btn-secondary,
	.final-cta-btn .hero-btn,
	.final-cta-btn .hero-btn-secondary{
		width: auto;
		max-width: 100%;
		margin: 0;
	}

	.hero-content-body .btn-default,
	.hero-content-body .btn-outline,
	.final-cta-btn .btn-default,
	.final-cta-btn .btn-outline{
		width: auto;
		text-align: center;
	}

	/* Nothing sets width:100% on these - the label is simply too long for a
	   phone. "start an investment conversation" is 32 characters, and at the
	   template's mobile size (16px type inside 80px of horizontal padding) its
	   natural width is ~346px. The content column of a 390px phone is 345px, so
	   the button fills it edge to edge and reads as a stretched bar.
	   Trimming the type and the arrow gutter brings it back inside the column.
	   Height stays at 16 + 14 + 16 = 46px, still over the 44px touch minimum. */
	.hero-content-body .btn-default,
	.final-cta-btn .btn-default{
		font-size: 14px;
		padding: 16px 44px 16px 18px;
	}

	.hero-content-body .btn-outline,
	.final-cta-btn .btn-outline{
		font-size: 14px;
		padding: 14px 42px 14px 16px;
	}

	.hero-content-body .btn-default::after,
	.final-cta-btn .btn-default::after,
	.hero-content-body .btn-outline::after,
	.final-cta-btn .btn-outline::after{
		width: 20px;
		height: 20px;
		transform: translate(-16px, -50%);
	}

	.our-feature-footer p{
		line-height: 1.9em;
	}
}


/* ============================================================
   16b-3. SECTION-LEVEL LAYOUT PASS
   The contrast pass fixed what was unreadable. This fixes what was badly
   composed - measured off the rendered page, section by section.

   SPECIFICITY NOTE: these rules are section-scoped (.how-it-work .work-step-item
   rather than .work-step-item). The vendor's responsive blocks live ~3000 lines
   further down the file, so a bare single-class selector here loses to them at
   every breakpoint below 992px - which is exactly how the founder figures ended
   up three-across on a 390px screen. Scoping wins on specificity instead of
   order. Where the vendor's mobile rule is already correct, this file leaves it
   alone and guards its own change behind min-width: 992px.
   ============================================================ */


/* --- Process: the five step cards were 60% empty ---------------
   .work-step-item-no is a 100px numeral in normal flow with -35px of pull-up,
   so every card carried roughly 95px of blank space beneath its text. Five of
   them made the section 1512px tall to hold five short sentences.
   Setting the numeral beside the text - a large muted figure at the right edge,
   as it would be set in print - costs no vertical space at all. */

.how-it-work .work-step-item{
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 32px 40px;
	margin-bottom: 20px;
}

.how-it-work .work-step-item-content{
	flex: 1 1 auto;
	margin-bottom: 0;
}

.how-it-work .work-step-item-content h3{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 6px;
}

.how-it-work .work-step-item-content h2{
	margin-bottom: 8px;
}

.how-it-work .work-step-item-no{
	flex: 0 0 auto;
	order: 2;
	margin-bottom: 0;
	line-height: 1;
}

.how-it-work .work-step-item-no h2{
	font-size: 72px;
	line-height: 1;
	letter-spacing: 0.01em;
	opacity: 20%;
	margin: 0;
}


/* --- Founder: 200px of dead space above the photo -------------
   The bottom padding here reserved room for the skillbar widget, which was
   removed (it showed fabricated dollar figures), so it had nothing left to
   hold. With the row stretched the photo fills its column instead. */

.fact-counter .fact-counter-image{
	padding: 0 45px 0 0;
	height: 100%;
	display: flex;
	margin-bottom: 0;
}

.fact-counter .fact-counter-img,
.fact-counter .fact-counter-img figure{
	width: 100%;
	height: 100%;
	display: block;
}

.fact-counter .fact-counter-img img{
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	min-height: 540px;
	object-fit: cover;
}

/* The three figures floated as loose icon-number-label stacks. As cards they
   read as one set. */
.fact-counter .fact-counter-box-list{
	gap: 16px;
	align-items: stretch;
}

.fact-counter .fact-counter-box{
	width: calc(33.33% - 11px);
	display: flex;
	flex-direction: column;
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 24px 22px;
	transition: border-color 0.35s ease-in-out, transform 0.35s ease-in-out;
}

.fact-counter .fact-counter-box:hover{
	border-color: rgba(0, 128, 63, 0.35);
}

.fact-counter .fact-counter-box .icon-box{
	margin-bottom: 16px;
}

/* Not margin-top:auto - bottom-aligning the block drops a one-line label's
   number lower than a two-line one, and the three figures stop lining up. */
.fact-counter .fact-counter-box-content{
	margin-top: 0;
}

.fact-counter .fact-counter-box-content h2{
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}


/* --- FAQ: the photo floated mid-column ------------------------ */

.our-faqs .our-faqs-image{
	height: 100%;
	display: flex;
	padding-right: 30px;
	margin-bottom: 0;
}

.our-faqs .our-faqs-img,
.our-faqs .our-faqs-img figure{
	width: 100%;
	height: 100%;
	display: block;
}

.our-faqs .our-faqs-img img{
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	min-height: 540px;
	object-fit: cover;
	border-radius: 20px;
}


/* --- About: the goal box and the email sat in a two-column row beside the
   checklist card. The checklist is gone, so the column runs full width under
   the paragraph and the equal-height plumbing the pair needed goes with it. */

.about-us .about-content-info{
	display: flex;
	flex-direction: column;
}


/* --- 3. Tick-list removal ---------------------------------------
   The template ended several content columns with a short checklist marked by
   Font Awesome's check-circle glyph (.about-info-list, .why-choose-list,
   .fact-counter-list, and the vendor-only .what-we-do-list, .pricing-list,
   .service-entry-list, .team-expertise). The points restated what the prose
   above them already said and the repeated green tick read as decoration, so
   both the markup and the markers are gone. The rules below repair the two
   layout dependencies those lists were holding up.

   3a. .why-choose-box-list and .fact-counter-box-list carry a bottom rule that
   separated the card grid from the checklist under it. With nothing under it,
   that rule and its 30-40px of padding hang off the end of the column. */

.why-choose-box-list:last-child,
.fact-counter-box-list:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* 3b. Those prose columns ended with the checklist, so the trailing paragraph
   never had to sit flush against the bottom of the column. It does now. */

.why-choose-content > p:last-child,
.about-us-content > p:last-child{
	margin-bottom: 0;
}

/* 3c. .why-choose-image is padded 235px left and 165px bottom to clear the
   second, absolutely-positioned photo of the two-image hero composition. The
   prose sections on About, the service pages and the product pages reuse the
   same block with a single photo, so that padding was reserving space for an
   image that is not there - a 235px empty gutter and 165px of dead height
   beside a column that the checklist removal has already shortened. Those
   sections all sit inside .what-we-do, and every one of them carries exactly
   one image, so the padding can go there and the photo fills its column. */

.what-we-do .why-choose-image{
	padding: 0;
}


/* --- 4. "Here's what we actually help you do" ------------------
   Two problems, both structural rather than a colour value.
   1. The template backs only :nth-child(odd) - so See and Revisit sat on a
      panel and Consider sat on nothing, which read as a missing card.
   2. The icon tiles were --dark-color on the odd cards and white-at-10% on
      the even ones, i.e. near-invisible against the band behind them.
   All three cards now share one surface and a visible edge, and the tiles are
   the brand green so the icons actually register. */

/* The template's .our-feature-list is a plain flex row with no gap and items
   at a flat 33.33%, so the three cards butt straight into each other and read
   as one banded block rather than three points. The width is reduced by the
   gap it now has to share. */
.our-feature .our-feature-list{
	gap: 24px;
}

.our-feature .our-feature-item{
	width: calc(33.33% - 16px);
}

.our-feature .our-feature-item,
.our-feature .our-feature-item:nth-child(odd){
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.17);
}

.our-feature .our-feature-item:hover{
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(0, 204, 97, 0.55);
}

.our-feature .our-feature-item .icon-box,
.our-feature .our-feature-item:nth-child(odd) .icon-box{
	background: var(--accent-color);
	width: 56px;
	height: 56px;
	border-radius: 12px;
}

.our-feature .feature-item-content h3{
	font-size: 22px;
	margin-bottom: 12px;
}

/* 80% white on this band measures 6.7:1 - passing, but visibly grey next to
   the headings. 92% brings the two into the same family. */
.our-feature .feature-item-content p{
	opacity: 92%;
	line-height: 1.7em;
}

/* Three cards plus two gaps get tight on a tablet, and the scoped width above
   outranks the vendor's own .our-feature-item{width:100%} at 767, so the stack
   has to be restored explicitly. */
@media only screen and (max-width: 991px){

	.our-feature .our-feature-list{
		gap: 16px;
	}

	.our-feature .our-feature-item{
		width: calc(33.33% - 10.67px);
	}
}

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

	.our-feature .our-feature-list{
		gap: 14px;
	}

	.our-feature .our-feature-item{
		width: 100%;
	}
}




/* --- Icons -----------------------------------------------------
   The template's icon set is decorative stock: a money bag for mutual funds,
   a globe for bonds, a heartbeat line for NCDs and a Bitcoin symbol for PMS.
   On a page about Indian investment categories that reads as filler at best
   and wrong at worst. The kd-icon-* set is drawn for this content in the
   template's own style - 32px box, white stroke, round caps - so it drops into
   the existing .icon-box treatments unchanged.
   The section eyebrow was a dollar-in-a-circle; it is now an abstract mark,
   which survives the brightness(0) invert(1) silhouette the dark sections
   apply to it. */
.section-title h3::before{
	background-image: url('../images/kd-icon-eyebrow.svg');
}

/* Slightly heavier than the template's hairline: these sit white-on-green at
   30px, where a 1px stroke greys out. */
.our-feature-item .icon-box img,
.service-item .icon-box img,
.why-choose-box .icon-box img,
.fact-counter-box .icon-box img,
.about-goal-box .icon-box img{
	max-width: 28px;
}


/* --- Image / content balance ------------------------------------
   Every image-plus-content pair in the template is a 50/50 split, and the
   composed image stacks (a large photo plus an overlapping second one plus a
   rotating badge) fill their half completely. The result is that the imagery
   outweighs the words on a page whose entire job is the words.
   The columns are now 5/7 in favour of content. These paddings are the
   template's own values rescaled to the narrower image column - without this
   the reserved gutters would eat most of it and the main photo would collapse
   to about 280px. */

.about-us .about-us-images{
	padding: 0 170px 180px 0;
}

.about-us .about-img-2{
	width: 260px;
}

.about-us .contact-circle img{
	max-width: 118px;
}

.why-choose-us .why-choose-image{
	padding: 0 0 150px 160px;
}

.why-choose-us .why-choose-img-2{
	max-width: 265px;
}

.why-choose-us .why-choose-contact-circle img{
	max-width: 108px;
}

/* The single photos just narrow with their column; the min-height that stops
   them floating mid-column comes down to match. */
.fact-counter .fact-counter-img img,
.our-faqs .our-faqs-img img{
	min-height: 500px;
}

/* The extra column width goes straight into reading measure. */
.fact-counter .fact-counter-content,
.our-faqs .our-faq-section{
	margin-left: 10px;
}


/* --- Footer: the pending value shouted louder than the real one */

.footer-contact-item h3 .value-pending{
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2em;
	color: var(--white-color);
	opacity: 0.72;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid var(--dark-divider-color);
	border-radius: 6px;
	padding: 6px 10px;
	vertical-align: middle;
}

.footer-brand-box{
	margin-right: 80px;
}


/* --- Desktop-only rhythm --------------------------------------
   Guarded behind min-width so the vendor's own mobile section padding (50px)
   still applies untouched below 992px. */

@media only screen and (min-width: 992px){

	.our-feature,
	.our-testimonial{
		padding: 110px 0;
	}

	/* The reserved space under the image pair was sized for a taller pair than
	   this content uses, leaving ~100px of empty section beneath it. */
	.why-choose-us .why-choose-image{
		padding-bottom: 130px;
	}
}


/* --- Responsive ------------------------------------------------ */

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

	.fact-counter .fact-counter-img img,
	.our-faqs .our-faqs-img img{
		min-height: 470px;
	}

	.how-it-work .work-step-item-no h2{
		font-size: 62px;
	}
}

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

	/* Columns stack here, so the stretched photos must go back to their own
	   aspect ratio rather than matching a full accordion's height. */
	.fact-counter .fact-counter-image,
	.our-faqs .our-faqs-image{
		height: auto;
		display: block;
		padding: 0;
		margin-bottom: 30px;
	}

	.fact-counter .fact-counter-img,
	.fact-counter .fact-counter-img figure,
	.our-faqs .our-faqs-img,
	.our-faqs .our-faqs-img figure{
		height: auto;
	}

	.fact-counter .fact-counter-img img,
	.our-faqs .our-faqs-img img{
		height: auto;
		min-height: 0;
		aspect-ratio: 3 / 2;
	}

	.how-it-work .work-step-item{
		padding: 28px 30px;
		gap: 24px;
		margin-bottom: 18px;
	}

	.how-it-work .work-step-item-no h2{
		font-size: 58px;
	}

	.footer-brand-box{
		margin-right: 0;
		margin-bottom: 40px;
	}
}

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

	/* Three 33% cards on a phone is the template's own bug - it sets
	   width: calc(33.33% - 13.33px) all the way down. One per row. */
	.fact-counter .fact-counter-box-list{
		flex-wrap: wrap;
		gap: 12px;
	}

	.fact-counter .fact-counter-box{
		width: 100%;
		flex-direction: row;
		align-items: center;
		gap: 18px;
		padding: 16px 18px;
	}

	.fact-counter .fact-counter-box .icon-box{
		margin-bottom: 0;
		flex: 0 0 auto;
	}

	.fact-counter .fact-counter-img img,
	.our-faqs .our-faqs-img img{
		aspect-ratio: 4 / 3;
	}

	.how-it-work .work-step-item{
		padding: 22px 22px;
		gap: 16px;
		margin-bottom: 14px;
	}

	.how-it-work .work-step-item-no h2{
		font-size: 44px;
	}

	.about-us .about-content-info{
		height: auto;
		display: block;
		margin-bottom: 24px;
	}

	.about-us .about-contact-box{
		margin-top: 24px;
	}
}


/* ============================================================
   16b-4. INNER PAGES PASS
   Added for the Services / Products / Calculators / Newsletter build.
   Two things only: making the nav dropdowns usable by keyboard and touch,
   and the calculator + form components, which have no template equivalent.
   Everything else on those pages reuses existing homepage components.
   ============================================================ */


/* --- Nav dropdowns: keyboard and touch ------------------------
   The template revealed submenus with `.main-menu ul li:hover > ul` alone, so
   they were unreachable without a mouse. These two selectors add the same
   reveal for keyboard focus and for the explicit open state that
   js/nav-dropdowns.js sets, without altering the hover behaviour.          */

.main-menu ul li.submenu:focus-within > ul,
.main-menu ul li.submenu.submenu-open > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
	padding: 5px 0;
}

/* The caret should reflect the open state. */
.main-menu ul li.submenu.submenu-open > a:after,
.main-menu ul li.submenu:focus-within > a:after{
	transform: rotate(180deg);
}

.main-menu ul li.submenu > a:after{
	display: inline-block;
	transition: transform 0.3s ease-in-out;
}

/* The dropdown sits on --accent-color, so its links need to be measured
   against that rather than against the header. White on #415FA7 is 6.14:1;
   the template's 80% opacity would drop that to roughly 4.6:1, so full
   opacity is used on hover and focus to keep clear of the AA floor.        */
.main-menu ul ul li a{
	opacity: 100%;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus-visible{
	color: var(--white-color);
	text-decoration: underline;
	opacity: 100%;
}

/* A submenu item for the current page. */
.main-menu ul ul li a[aria-current="page"]{
	font-weight: 700;
	text-decoration: underline;
}


/* --- Calculators ---------------------------------------------
   No template component resembles these, so they are built from the same
   tokens the rest of the site uses: --secondary-color surface, --divider-color
   border, the 16px radius used by .fact-counter-box.                       */

.kd-calc{
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 24px;
}

.kd-calc-head h3{
	font-size: 24px;
	line-height: 1.3em;
	margin-bottom: 10px;
}

.kd-calc-head p{
	margin-bottom: 22px;
}

.kd-calc-form{
	margin-bottom: 4px;
}

.kd-field{
	margin-bottom: 18px;
}

.kd-field label{
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--primary-color);
	margin-bottom: 6px;
}

.kd-input-wrap{
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	transition: border-color 0.3s ease-in-out;
}

.kd-input-wrap:focus-within{
	border-color: var(--accent-color);
}

.kd-unit{
	padding-left: 18px;
	font-weight: 700;
	color: var(--accent-deep);
	flex: 0 0 auto;
}

.kd-input-wrap input{
	width: 100%;
	border: none;
	background: transparent;
	padding: 13px 18px;
	font-family: var(--default-font);
	font-size: 16px;
	color: var(--primary-color);
	border-radius: 100px;
}

.kd-unit + input{
	padding-left: 8px;
}

.kd-input-wrap input:focus{
	outline: none;
}

/* Number spinners add clutter at these widths and are awkward on touch. The
   fields stay type="number" for the mobile numeric keypad. */
.kd-input-wrap input::-webkit-outer-spin-button,
.kd-input-wrap input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

.kd-input-wrap input[type=number]{
	-moz-appearance: textfield;
	appearance: textfield;
}

.kd-hint{
	font-size: 14px;
	line-height: 1.5em;
	margin: 6px 0 0;
}

.kd-calc-results{
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--divider-color);
}

.kd-result-row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 9px 0;
}

.kd-result-label{
	font-size: 15px;
	color: var(--text-color);
}

.kd-result-value{
	font-weight: 700;
	font-size: 17px;
	color: var(--primary-color);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.kd-result-strong{
	border-top: 1px solid var(--divider-color);
	margin-top: 6px;
	padding-top: 15px;
}

.kd-result-strong .kd-result-label{
	font-weight: 700;
	color: var(--primary-color);
}

.kd-result-strong .kd-result-value{
	font-size: 22px;
	color: var(--accent-deep);
}

.kd-calc-note{
	font-size: 13px;
	line-height: 1.6em;
	color: var(--text-color);
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--divider-color);
}


/* --- Forms (newsletter) --------------------------------------- */

.kd-form-card{
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 40px;
}

.kd-form-card h2{
	font-size: 32px;
	margin-bottom: 12px;
}

.kd-form-card > p{
	margin-bottom: 26px;
}

.kd-form-card .kd-field input[type="text"],
.kd-form-card .kd-field input[type="email"]{
	width: 100%;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 13px 20px;
	font-family: var(--default-font);
	font-size: 16px;
	color: var(--primary-color);
	transition: border-color 0.3s ease-in-out;
}

.kd-form-card .kd-field input:focus{
	outline: none;
	border-color: var(--accent-color);
}

.kd-field-check{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
}

.kd-field-check input[type="checkbox"]{
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--accent-color);
	flex: 0 0 auto;
}

.kd-field-check label{
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6em;
	color: var(--text-color);
	margin-bottom: 0;
}

.kd-field-check .help-block{
	grid-column: 1 / -1;
}

.kd-form-card button.btn-default{
	cursor: pointer;
}

.kd-form-note{
	font-size: 14px;
	line-height: 1.6em;
	margin: 16px 0 0;
}

/* The disclosure block gained an optional heading for the inner pages. */
.solutions-disclosure h3{
	font-size: 18px;
	line-height: 1.4em;
	margin-bottom: 10px;
	color: var(--primary-color);
}


/* --- Inner page responsive ----------------------------------- */

@media only screen and (max-width: 991px){
	/* SlickNav owns the mobile menu, so the desktop dropdown reveal must not
	   fire there - it would render an absolutely-positioned panel over the
	   page with nothing to anchor it to. */
	.main-menu ul li.submenu:focus-within > ul,
	.main-menu ul li.submenu.submenu-open > ul{
		visibility: hidden;
		opacity: 0;
	}

	.kd-form-card{
		padding: 28px 22px;
	}

	.kd-form-card h2{
		font-size: 26px;
	}
}

@media only screen and (max-width: 767px){
	.kd-calc{
		padding: 24px 20px;
	}

	.kd-calc-head h3{
		font-size: 21px;
	}

	.kd-result-row{
		gap: 12px;
	}

	.kd-result-strong .kd-result-value{
		font-size: 19px;
	}
}


/* ============================================================
   16b-5. HOMEPAGE FLOW REBUILD
   The homepage was re-sequenced to: hero > who we serve > why kd finvest >
   partners > services > founder > process > products > faqs > cta.

   Two sections were retired in the process and their content folded in rather
   than thrown away:
     .about-us     - "your wealth does not exist in separate boxes" is now
                     pillar two of .why-choose-pillars.
     .our-feature  - See / Consider / Revisit is now .framework-list, in the
                     left column of .how-it-work beside the five steps.
   Both components still ship in the stylesheet and are still used by other
   pages, so nothing above this point was deleted.

   Three genuinely new components live here - .audience-card, .trust-pillar and
   .product-card. All three are assembled from parts the template already uses
   (the accent .icon-box with its scale-in dark fill, an outlined numeral, the
   round .service-btn arrow) so they read as the same system rather than as
   bolt-ons. .our-partners is the vendor's own band, which shipped in this
   stylesheet but was never used on any page.

   Section background rhythm, top to bottom:
     hero dark / white / grey / dark teal / white / grey / white / grey /
     white / dark teal
   ============================================================ */


/* --- Hero: equal slide heights ---------------------------------
   Slide three's supporting line runs to three lines where slides one and two
   run to two, so it stood 27px taller. Swiper sizes the wrapper to the tallest
   slide but leaves the shorter ones at their own content height, and swiper's
   own rule sets .swiper-slide { height: auto }, which opts them out of the
   flex stretch. The result was a 27px band of bare .hero background under the
   photograph on slides one and two - the "cut off at the bottom" effect.

   Stretching the slide and letting .hero-slide fill it fixes every slide at the
   height of the tallest, whatever the copy does later.                      */

.hero.hero-bg-image.hero-slider-layout .swiper-wrapper{
	align-items: stretch;
}

.hero.hero-bg-image.hero-slider-layout .swiper-slide{
	height: auto;
	display: flex;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	width: 100%;
}

.hero.hero-bg-image.hero-slider-layout .hero-slide > .container{
	width: 100%;
}


/* --- Centred section title -------------------------------------
   .section-title h3 is an inline-block with 34px of left padding holding the
   eyebrow icon. Centring the block alone would push the words 17px right of
   true centre, so the padding is mirrored: the box grows symmetrically, the
   words sit on the axis, and the icon still hangs off the left.            */

.section-title-center{
	text-align: center;
}

.section-title-center h3{
	padding-right: 34px;
}

.section-title-center p{
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* A centred title has no column beside it to borrow height from, so the
   vendor's 40px reads tight against the grid below. The two-column sections on
   this page use .section-row's 80px; 64px sits between the two. */
.section-title-center{
	margin-bottom: 64px;
}


/* --- Shared card furniture -------------------------------------
   One accent square, three components. Copied from .why-choose-box rather than
   re-invented, including its scale-in fill, so every icon on the page behaves
   the same way on hover.                                                   */

.audience-card .icon-box,
.trust-pillar .icon-box,
.product-card .icon-box{
	position: relative;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	background: var(--accent-color);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 26px;
}

.audience-card .icon-box::before,
.trust-pillar .icon-box::before,
.product-card .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	border-radius: 8px;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.audience-card:hover .icon-box::before,
.trust-pillar:hover .icon-box::before,
.product-card:hover .icon-box::before{
	transform: scale(1);
}

.audience-card .icon-box img,
.trust-pillar .icon-box img,
.product-card .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}


/* --- 2. Who We Serve -------------------------------------------
   Second section on the page. Six audiences, three across. The cards are not
   links: the per-audience pages are Phase 2 and do not exist yet.          */

.who-we-serve{
	padding: 100px 0;
	background-color: var(--white-color);
}

.who-we-serve .audience-row{
	--bs-gutter-y: 24px;
}

.audience-card{
	position: relative;
	height: 100%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 32px 30px;
	transition: transform 0.35s ease-in-out, border-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}

.audience-card:hover{
	transform: translateY(-5px);
	border-color: var(--accent-color);
	box-shadow: 0 20px 44px -28px rgba(4, 3, 3, 0.35);
}

.audience-card-content h3{
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35em;
	text-transform: capitalize;
	margin-bottom: 14px;
}

.audience-card-content p{
	margin-bottom: 0;
}

/* The signature audience is marked, not enlarged - a differently sized card in
   a six-up grid breaks the row. #040303 on #00CC61 measures 9.6:1. */
.audience-card-signature{
	border-color: var(--accent-color);
}

.audience-tag{
	position: absolute;
	top: 22px;
	right: 22px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 6px 12px;
}


/* --- 3. Why KD Finvest: the three trust pillars -----------------
   Replaces the vendor's 7/5 content-plus-photo-pair layout for this section.
   Three pillars need the full width, and the photo pair was carrying the same
   two stock interiors that appear on four other pages.                     */

.why-choose-pillars{
	background-color: var(--secondary-color);
}

.why-choose-pillars .pillar-row{
	--bs-gutter-y: 24px;
}

.trust-pillar{
	position: relative;
	height: 100%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 34px 32px;
	transition: transform 0.35s ease-in-out, border-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}

.trust-pillar:hover{
	transform: translateY(-5px);
	border-color: var(--accent-color);
	box-shadow: 0 20px 44px -28px rgba(4, 3, 3, 0.35);
}

/* Outlined numeral, same device as .service-no and .work-step-item-no. */
.pillar-no{
	position: absolute;
	top: 28px;
	right: 30px;
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1px #E0E0E0;
	transition: all 0.4s ease-in-out;
}

.trust-pillar:hover .pillar-no{
	-webkit-text-stroke-color: var(--accent-color);
}

.trust-pillar-content h3{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35em;
	text-transform: capitalize;
	max-width: 88%;
	margin-bottom: 14px;
}

.trust-pillar-content p{
	margin-bottom: 0;
}

/* The plainest sentence on the page, and deliberately so. Every clause is a
   statement about how this business operates, so it carries no performance
   claim and needs no verification. */
.pillar-footnote{
	border-top: 1px solid #E3E3E3;
	margin-top: 44px;
	padding-top: 34px;
	text-align: center;
}

.pillar-footnote p{
	max-width: 860px;
	margin: 0 auto;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7em;
	color: var(--primary-color);
}


/* --- 4. Partners ------------------------------------------------
   Set typographically, not with logo files: no partner marks exist in this
   repo, and displaying a company's logo needs their written permission. The
   cards therefore carry the name only - what each partner does is not stated
   because it has not been confirmed (CLAUDE.md rule 1).                    */

.our-partners{
	background-image:
		radial-gradient(100% 80% at 50% 0%, rgba(0, 86, 107, 0.8) 0%, rgba(0, 64, 80, 0) 65%),
		url('../images/our-partners-bg.svg');
}

.our-partners .our-partners-content .section-title{
	margin-bottom: 0;
}

/* The vendor's 80px gutter left the heading about 300px wide, which broke
   "The platforms behind your portfolio" over three lines. */
.our-partners .our-partners-content{
	margin-right: 40px;
}

.our-partners .our-partners-list{
	justify-content: flex-start;
}

/* Four equal cards spanning the column. At their natural width they left ~160px
   of empty band to the right of the last one, which read as a missing fifth
   partner rather than as deliberate space. */
/* The vendor sets margin-left: 1px on the first item. Harmless when the items
   size to their content, but with flex-basis percentages that single pixel
   pushes row one past 100% and kicks the second card onto its own line - which
   is what produced a 1 / 2 / 1 stack on a phone instead of 2 / 2. */
.our-partners .our-partner-item:first-child{
	margin-left: 0;
}

.our-partners .our-partner-item{
	flex: 1 1 140px;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 84px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 22px 28px;
	transition: transform 0.35s ease-in-out, background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
}

.our-partners .our-partner-item:hover{
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--accent-color);
}

.partner-name{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2em;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--white-color);
}

/* rgba(255,255,255,.82) over the darkest part of the band composites to
   #D1DCDF on #004050 = 8.1:1, so the note stays quiet without going grey. */
.partners-note{
	margin-top: 30px;
}

.partners-note p{
	max-width: 660px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.75em;
	color: rgba(255, 255, 255, 0.82);
}


/* --- 5. Services -----------------------------------------------
   White rather than the component's default grey, so it alternates with the
   grey founder band below it. Five cards in a two-across grid would leave a
   half-row of empty white, so the fifth spans the row.                     */

.our-services-plain{
	background: var(--white-color);
}

/* .service-item is width: 50%, so any odd-numbered list leaves the last card
   beside half a row of empty white with the wrapper's border cut off across it.
   Five services on the homepage and nine entries on products.html both hit it.
   Not scoped to a count - it is a property of the two-across grid itself. */
.our-service-list .service-item:last-child:nth-child(odd){
	width: 100%;
}

/* Fills the lower two thirds of the sticky column, which was empty. Ruled off
   rather than boxed: a second card in the column would compete with the five
   it is sitting beside. */
.service-aside{
	max-width: 340px;
	border-top: 1px solid var(--divider-color);
	margin-top: 44px;
	padding-top: 32px;
}

.service-aside-line{
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	margin-bottom: 14px;
}

.service-aside p{
	font-size: 15px;
	line-height: 1.7em;
	margin-bottom: 20px;
}

.service-aside-link{
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
	color: var(--accent-deep);
	transition: color 0.3s ease-in-out;
}

.service-aside-link:hover,
.service-aside-link:focus-visible{
	color: var(--primary-color);
}


/* --- 6. Founder ------------------------------------------------
   Grey band. The meta row underneath the counters states only confirmed
   values - founder name, brand name, city - and carries no invented quote.  */

.fact-counter-founder{
	background-color: var(--secondary-color);
}

/* .fact-counter-box is filled with --secondary-color by the 16b-3 pass, which
   is this band's own background - the three figure cards had no visible edge
   at all. On the grey band they invert to white. */
.fact-counter-founder .fact-counter-box{
	background-color: var(--white-color);
}

.founder-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	border-top: 1px solid #E3E3E3;
	margin-top: 38px;
	padding-top: 30px;
}

.founder-meta-name{
	margin-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
}

.founder-meta-name span{
	display: block;
	margin-top: 5px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--text-color);
}

.founder-meta-link{
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
	color: var(--accent-deep);
	transition: color 0.3s ease-in-out;
}

.founder-meta-link:hover,
.founder-meta-link:focus-visible{
	color: var(--primary-color);
}


/* --- 7. Process: the See / Consider / Revisit framework ---------
   This was a full dark section of its own, two sections away from the five
   steps, so the page explained its process twice with unrelated material in
   between. It is the short form of the steps, so it now sits beside them.
   The kd-icon SVGs ship with stroke="white" for the accent squares; on this
   white column they are inverted to black, the same trick .btn-default::after
   already uses.                                                            */

.how-it-work .framework-list{
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.how-it-work .framework-list li{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	border-top: 1px solid var(--divider-color);
	padding: 20px 0;
}

.how-it-work .framework-list li:last-child{
	border-bottom: 1px solid var(--divider-color);
}

.how-it-work .framework-list img{
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	margin-top: 3px;
	filter: brightness(0);
}

.how-it-work .framework-list h3{
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3em;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	margin-bottom: 5px;
	color: var(--primary-color);
}

.how-it-work .framework-list p{
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.7em;
}


/* --- 8. Products -----------------------------------------------
   Three across, not the vendor's two-across .service-item strip: six
   categories fill 3x2 exactly, and a second two-across grid four sections
   after the services one read as the same section twice.                   */

.our-products{
	padding: 100px 0;
	background-color: var(--secondary-color);
}

.our-products .product-row{
	--bs-gutter-y: 24px;
}

.product-card{
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
	transition: transform 0.35s ease-in-out, border-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}

.product-card:hover{
	transform: translateY(-5px);
	border-color: var(--accent-color);
	box-shadow: 0 20px 44px -28px rgba(4, 3, 3, 0.35);
}

.product-card-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.product-card .icon-box{
	margin-bottom: 0;
}

.product-no{
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1px #E0E0E0;
	transition: all 0.4s ease-in-out;
}

.product-card:hover .product-no{
	-webkit-text-stroke-color: var(--accent-color);
}

.product-card-content{
	flex: 1 1 auto;
	margin: 24px 0 26px;
}

.product-card-content h3{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3em;
	text-transform: capitalize;
	margin-bottom: 12px;
}

.product-card-content p{
	margin-bottom: 0;
}

/* Reuses .service-btn, so it inherits the same green pill, the same dark
   fill-from-bottom and the same darkened-at-rest arrow. In a column flex the
   default stretch would make the pill full width. */
.product-card .service-btn{
	align-self: flex-start;
	margin-top: auto;
}

.product-card:hover .service-btn::before{
	top: auto;
	bottom: 0;
	height: 100%;
}

.product-card:hover .service-btn img{
	filter: none;
}

/* .solutions-disclosure fills with --secondary-color, which is this section's
   own background - it would have been an invisible panel. */
.our-products .solutions-disclosure{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	margin-top: 30px;
}

.our-products .solutions-disclosure p{
	color: var(--text-color);
}


/* --- Desktop-only rhythm for the new sections ------------------
   Guarded behind min-width so the vendor's 50px mobile padding still applies
   below 992px, exactly as the 16b-3 pass does.                             */

@media only screen and (min-width: 992px){

	.our-partners{
		padding: 110px 0;
	}
}


/* --- Responsive ------------------------------------------------ */

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

	.trust-pillar,
	.product-card{
		padding: 28px 26px;
	}

	.audience-card{
		padding: 28px 26px;
	}

	.pillar-no{
		top: 24px;
		right: 26px;
		font-size: 38px;
	}

	.trust-pillar-content h3{
		max-width: 84%;
		font-size: 19px;
	}

	.our-partners .our-partner-item{
		min-width: 148px;
		min-height: 76px;
		padding: 18px 22px;
	}

	.partner-name{
		font-size: 18px;
	}
}

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

	.who-we-serve,
	.our-products{
		padding: 50px 0;
	}

	/* Two-across at tablet width (col-md-6), so the tallest card in each pair
	   sets the height - height: 100% keeps them level. */
	.who-we-serve .audience-row,
	.why-choose-pillars .pillar-row,
	.our-products .product-row{
		--bs-gutter-y: 20px;
	}

	.section-title-center p{
		max-width: 100%;
	}

	/* The arrow pill is the only tap target on a product card. At the vendor's
	   56x32 it clears the 24px web minimum but not the 44px touch guidance, and
	   most of this traffic arrives on a phone from WhatsApp. Widened only below
	   992px so the desktop grid still matches the services strip above it. */
	.product-card .service-btn{
		width: 64px;
		min-height: 44px;
	}

	/* The vendor caps this list at 620px and centres it, which was sized for
	   four small logo images. Four name cards at 140px plus three 25px gaps
	   need 635px, so the fourth wrapped and then grew to the full band width.
	   The column is already full width once it stacks - let the list use it. */
	.our-partners .our-partners-list{
		justify-content: center;
		max-width: 100%;
	}

	.partners-note p{
		max-width: 100%;
	}

	.pillar-footnote{
		margin-top: 34px;
		padding-top: 28px;
	}

	.pillar-footnote p{
		font-size: 17px;
	}

	.founder-meta{
		margin-top: 30px;
		padding-top: 24px;
	}

	/* The vendor's own mobile rule already pulls .our-service-content out of
	   sticky; the last-odd override has to go with it or the final card
	   stretches across a single-column grid for no reason. */
	.our-service-list .service-item:last-child:nth-child(odd){
		width: 100%;
	}

	/* Stacked, the aside now sits between the section title and the cards, so
	   it has to stay short - it is supporting copy, not a section of its own. */
	.service-aside{
		max-width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
		padding-top: 26px;
	}

	.service-aside-line{
		font-size: 18px;
	}
}

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

	.audience-card,
	.trust-pillar,
	.product-card{
		padding: 26px 22px;
	}

	/* The tag and the icon square share the top line of the card. Below 768px
	   the column is narrow enough that a two-word tag can reach the icon, so it
	   drops to its own line above it. */
	.audience-tag{
		position: static;
		display: inline-block;
		margin-bottom: 18px;
	}

	.audience-card-content h3,
	.trust-pillar-content h3,
	.product-card-content h3{
		font-size: 18px;
	}

	.trust-pillar-content h3{
		max-width: 100%;
	}

	.pillar-no{
		font-size: 32px;
		top: 22px;
		right: 22px;
	}

	.trust-pillar .icon-box,
	.audience-card .icon-box,
	.product-card .icon-box{
		width: 46px;
		height: 46px;
		margin-bottom: 20px;
	}

	.product-card .icon-box{
		margin-bottom: 0;
	}

	.audience-card .icon-box img,
	.trust-pillar .icon-box img,
	.product-card .icon-box img{
		max-width: 26px;
	}

	.pillar-footnote p{
		font-size: 16px;
	}

	.our-partners .our-partners-list{
		gap: 12px;
	}

	/* 0 0, not 1 1: with grow enabled a card left alone on the last row
	   stretched to the full band width and broke the 2 x 2 block. */
	.our-partners .our-partner-item{
		min-width: 0;
		min-height: 68px;
		flex: 0 0 calc(50% - 6px);
		padding: 16px 14px;
	}

	.partner-name{
		font-size: 16px;
		white-space: normal;
	}

	.founder-meta{
		justify-content: flex-start;
		gap: 14px;
	}

	.founder-meta-name{
		font-size: 17px;
	}

	.how-it-work .framework-list{
		margin-bottom: 30px;
	}

	.how-it-work .framework-list li{
		gap: 14px;
		padding: 16px 0;
	}

	.how-it-work .framework-list img{
		width: 22px;
		height: 22px;
	}

	.product-card-content{
		margin: 20px 0 22px;
	}
}


/* --- Reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce){

	.audience-card,
	.trust-pillar,
	.product-card,
	.our-partners .our-partner-item{
		transition: none;
	}

	.audience-card:hover,
	.trust-pillar:hover,
	.product-card:hover,
	.our-partners .our-partner-item:hover{
		transform: none;
	}
}


/* ============================================================
   16b-6. PRODUCT EXPANSION PASS
   Added for: NRI investing, GIFT City, loan against securities, the PMS/AIF
   comparison block, and the investor-services (backend support) page and its
   homepage strip.

   Only two genuinely new pieces live here - .compare-table and .fee-terms.
   Everything else reuses what already exists: the new product pages are the
   standard product template, the support grid on investor-services.html reuses
   .audience-card from the homepage, and the homepage support cards are the
   vendor's .work-step-item with two colour overrides.
   ============================================================ */


/* --- PMS / AIF comparison --------------------------------------
   A real <table>, because this is tabular data and a grid of divs would lose
   the row and column relationships for a screen reader. The wrapper scrolls
   horizontally rather than letting the page scroll, and carries tabindex="0"
   so the scroll region is reachable by keyboard.

   Sits between .what-we-do (grey) and .our-feature (dark), so it is white.  */

.compare-section{
	padding: 100px 0;
	background-color: var(--white-color);
}

.compare-table-wrap{
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	background: var(--white-color);
}

/* Hidden on desktop, where the whole table fits. Shown only at the widths where
   the wrapper actually scrolls - otherwise the AIF column is off-screen with
   nothing on the page to say it can be reached. */
.compare-scroll-hint{
	display: none;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent-deep);
}

.compare-table{
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	margin-bottom: 0;
}

.compare-table th,
.compare-table td{
	text-align: left;
	vertical-align: top;
	padding: 20px 24px;
	border-bottom: 1px solid var(--divider-color);
}

.compare-table thead th{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary-color);
	background: var(--secondary-color);
	border-bottom: 1px solid #E2E2E2;
}

.compare-table tbody th[scope="row"]{
	width: 22%;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5em;
	color: var(--primary-color);
	background: #FAFAFA;
}

.compare-table tbody td{
	font-size: 15px;
	line-height: 1.7em;
	color: var(--text-color);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{
	border-bottom: none;
}

.compare-note{
	margin: 22px 0 0;
	font-size: 14px;
	line-height: 1.75em;
}

.compare-note a{
	font-weight: 700;
	text-decoration: underline;
	color: var(--accent-deep);
	transition: color 0.3s ease-in-out;
}

.compare-note a:hover,
.compare-note a:focus-visible{
	color: var(--primary-color);
}


/* --- Fee terms glossary ----------------------------------------
   A definition list, because that is what it is. The accent rule under each
   term is the only new decorative device in this pass - it keeps the block
   from reading as a third card grid on a page that already has two.        */

.fee-terms{
	border-top: 1px solid var(--divider-color);
	margin-top: 60px;
	padding-top: 46px;
}

.fee-terms > h3{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35em;
	letter-spacing: -0.01em;
	margin-bottom: 32px;
	color: var(--primary-color);
}

.fee-terms-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 36px;
	margin-bottom: 0;
}

.fee-terms-list dt{
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
	border-bottom: 2px solid var(--accent-color);
	margin-bottom: 12px;
	padding-bottom: 8px;
}

.fee-terms-list dd{
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.75em;
	color: var(--text-color);
}

.fee-terms-note{
	margin: 36px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.75em;
	color: var(--primary-color);
}


/* --- Homepage: investor support strip ---------------------------
   Between the FAQs and the closing CTA. Grey, so the band rhythm runs
   products (grey) > faqs (white) > support (grey) > cta (dark teal).

   The cards are the vendor's own .work-step-item - literally the same component
   as the five process cards further up the page, so the teal fill-sweep on
   hover, the outlined numeral and the text colour changes all come for free.
   Two things have to be overridden and nothing else:

     1. The component fills itself with --secondary-color, which is this band's
        own background. On grey it would have no visible edge at all, so the
        card inverts to white (the same problem the founder counters had).
     2. The process card titles the step with an h2. Here the section already
        owns the h2, so the card title is an h3 and is restyled to match.     */

.investor-support{
	padding: 100px 0;
	background-color: var(--secondary-color);
}

.investor-support .support-row{
	--bs-gutter-y: 24px;
}

.investor-support .work-step-item{
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	padding: 32px 32px 0;
	margin-bottom: 0;
}

.investor-support .work-step-item-content{
	flex: 1 1 auto;
	margin-bottom: 8px;
}

.investor-support .work-step-item-content h3{
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35em;
	letter-spacing: 0;
	text-transform: capitalize;
	color: var(--primary-color);
	margin-bottom: 12px;
}

.investor-support .work-step-item:hover .work-step-item-content h3{
	color: var(--white-color);
}

/* Same outlined figure as the process cards, set as a span rather than a
   heading - "01" is not a section title. */
.investor-support .work-step-item-no{
	margin-bottom: -16px;
	text-align: end;
}

.investor-support .work-step-item-no span{
	display: inline-block;
	font-size: 80px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	color: transparent;
	-webkit-text-stroke: 1px var(--text-color);
	opacity: 15%;
	transition: all 0.4s ease-in-out;
}

.investor-support .work-step-item:hover .work-step-item-no span{
	-webkit-text-stroke-color: var(--white-color);
	opacity: 45%;
}


/* --- Investor services page: support grid ----------------------
   Reuses .who-we-serve and .audience-card. The -alt modifier only changes the
   band colour, so it alternates against the white intro section above it. */

.who-we-serve-alt{
	background-color: var(--secondary-color);
}


/* --- Responsive ------------------------------------------------ */

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

	.fee-terms-list{
		grid-template-columns: repeat(2, 1fr);
	}

	.compare-table th,
	.compare-table td{
		padding: 18px 20px;
	}
}

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

	.compare-section,
	.investor-support{
		padding: 50px 0;
	}

	.fee-terms{
		margin-top: 44px;
		padding-top: 34px;
	}

	.fee-terms > h3{
		font-size: 22px;
		margin-bottom: 26px;
	}

	/* 760px of table in a viewport narrower than that - the wrapper is now
	   genuinely scrollable, so say so. */
	.compare-scroll-hint{
		display: block;
	}
}

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

	.fee-terms-list{
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fee-terms-list dt{
		font-size: 16px;
	}

	/* The table keeps its min-width and scrolls inside its own wrapper - the
	   page itself must never scroll sideways. */
	.compare-table th,
	.compare-table td{
		padding: 15px 16px;
	}

	.compare-table thead th{
		font-size: 12px;
	}

	.compare-table tbody th[scope="row"],
	.compare-table tbody td{
		font-size: 14px;
	}

	.compare-note,
	.fee-terms-note{
		font-size: 14px;
	}
}





/* --- Services index: the question router -------------------------
   Rows on the dark band, each starting from the question a visitor actually
   arrives with rather than from the service name. Replaces a second copy of
   the See / Consider / Revisit cards, which already run on the homepage and
   on the about page - three identical bands across three pages was most of
   why the inner pages read as one template.                                */

.router-list{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.router-list li{
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.router-list a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 8px;
	transition: padding 0.35s ease-in-out, background-color 0.35s ease-in-out;
}

.router-list a:hover,
.router-list a:focus-visible{
	background-color: rgba(255, 255, 255, 0.06);
	padding-left: 20px;
	padding-right: 20px;
}

.router-q{
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--white-color);
	transition: color 0.3s ease-in-out;
}

/* Reads as the destination, so it gets the arrow and the accent. */
.router-a{
	position: relative;
	flex: 0 0 auto;
	padding-right: 26px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--accent-color);
}

.router-a::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 14px;
	height: 2px;
	background: var(--accent-color);
	transform: translateY(-50%);
	transition: width 0.35s ease-in-out;
}

.router-list a:hover .router-a::after,
.router-list a:focus-visible .router-a::after{
	width: 20px;
}


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

	.router-q{
		font-size: 17px;
	}
}

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

	/* The question and its destination stop fitting on one line well before
	   this, so the label drops under the question it answers. */
	.router-list a{
		display: block;
		padding: 20px 4px;
	}

	.router-list a:hover,
	.router-list a:focus-visible{
		padding-left: 10px;
		padding-right: 10px;
	}

	.router-q{
		display: block;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.router-a{
		display: inline-block;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce){

	.router-list a,
	.router-a::after{
		transition: none;
	}
}


/* --- Service pages: the fit block -------------------------------
   Two columns, one of which says no. Set as prose lists with a ruled marker
   rather than ticks and crosses: the brief on this project was explicitly that
   tick-marked lists were to go, and a green tick against "probably not" would
   read as approval anyway. The two cards are told apart by their heading and
   their rule colour, never by colour alone.                                 */

.fit-section{
	padding: 100px 0;
	background-color: var(--secondary-color);
}

.fit-section .fit-row{
	--bs-gutter-y: 24px;
}

.fit-card{
	height: 100%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 34px 34px 30px;
}

.fit-card h3{
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	padding-bottom: 14px;
	margin-bottom: 22px;
	border-bottom: 2px solid var(--divider-color);
}

.fit-card-yes h3{
	border-bottom-color: var(--accent-color);
}

.fit-card-no h3{
	border-bottom-color: var(--dark-color);
}

.fit-card ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.fit-card li{
	position: relative;
	padding-left: 20px;
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.7em;
	color: var(--text-color);
}

.fit-card li:last-child{
	margin-bottom: 0;
}

/* A short rule rather than a tick or a cross. */
.fit-card li::before{
	content: '';
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 10px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent-color);
}

.fit-card-no li::before{
	background: var(--dark-color);
}


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

	.fit-section{
		padding: 50px 0;
	}

	.fit-card{
		padding: 28px 26px 26px;
	}
}

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

	.fit-card{
		padding: 24px 20px 22px;
	}

	.fit-card h3{
		font-size: 18px;
	}
}


/* --- Product pages: "at a glance" profile -----------------------
   Every product page ran intro > prose > dark risk band > FAQs, so nine pages
   with genuinely different characteristics all read as the same page. This
   strip sits directly under the intro and is the one block whose content is
   visibly different on each of them.

   The meters are descriptive - ease of exit, horizon, entry level - and are
   deliberately not a risk score: a numbered risk rating published by a
   distributor reads as advice. Risk stays in the prose and the dark band.
   Each meter carries its own words as well as its bar, so nothing depends on
   reading a bar length.                                                     */

.product-profile{
	padding: 100px 0;
	background-color: var(--white-color);
}

.profile-panel{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 34px 36px;
}

.profile-meters{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	padding-bottom: 30px;
	margin-bottom: 28px;
	border-bottom: 1px solid #E3E3E3;
}

/* The three tracks must line up even when one meter's words wrap to two lines
   and its neighbours' do not. */
.spec-meter{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.spec-meter-head{
	flex: 1 1 auto;
	margin-bottom: 12px;
}

.spec-meter-label{
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin-bottom: 6px;
}

.spec-meter-words{
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
}

.spec-meter-track{
	height: 6px;
	border-radius: 100px;
	background: #DDE2E3;
	overflow: hidden;
}

.spec-meter-track span{
	display: block;
	height: 100%;
	border-radius: 100px;
	background: var(--dark-color);
}

.profile-specs{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 34px;
	margin-bottom: 0;
}

.profile-specs dt{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-color);
	margin-bottom: 6px;
}

.profile-specs dd{
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6em;
	color: var(--primary-color);
}


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

	.profile-panel{
		padding: 28px 26px;
	}

	.profile-meters{
		gap: 20px;
	}

	.spec-meter-words{
		font-size: 14px;
	}
}

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

	.product-profile{
		padding: 50px 0;
	}
}

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

	/* Three meters side by side put two words per line at this width. */
	.profile-meters,
	.profile-specs{
		grid-template-columns: 1fr;
	}

	.profile-meters{
		gap: 22px;
		padding-bottom: 24px;
		margin-bottom: 24px;
	}

	.profile-specs{
		gap: 20px;
	}

	.profile-panel{
		padding: 24px 20px;
	}
}


/* ============================================================
   16b-7. CALCULATOR WORKBENCH
   The calculators page previously rendered all four at once: a 2,800px column
   of four near-identical forms in which nothing was findable and no single
   calculator could be linked to. It is now a tablist with one panel visible,
   and every amount is a number input paired with a draggable range.

   Builds on the field, input and result-row styling already in 16b-4 rather
   than replacing it. What is new here is the chooser, the range, the dark
   result panel and the proportion bar.
   ============================================================ */

.kd-workbench{
	padding: 100px 0;
	background-color: var(--secondary-color);
}


/* --- The chooser ------------------------------------------------
   Four cards, not a strip of text tabs: each one states the question the
   calculator actually answers, which is how people pick. The selected card
   inverts to the dark band colour so the choice is unmistakable at a glance
   and does not rely on an underline a few pixels tall.                     */

.kd-tabs{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.kd-tab{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: start;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 20px 22px;
	cursor: pointer;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, transform 0.35s ease-in-out;
}

.kd-tab:hover{
	border-color: var(--accent-color);
	transform: translateY(-3px);
}

.kd-tab.is-active{
	background: var(--dark-color);
	border-color: var(--dark-color);
	transform: none;
}

.kd-tab-no{
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.12em;
	color: var(--accent-deep);
	transition: color 0.35s ease-in-out;
}

/* #00CC61 on #004050 measures 5.3:1 - the same pairing the header already
   uses for nav hover. --accent-deep is for light grounds only. */
.kd-tab.is-active .kd-tab-no{
	color: var(--accent-color);
}

.kd-tab-body{
	min-width: 0;
}

.kd-tab-name{
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--primary-color);
	transition: color 0.35s ease-in-out;
}

.kd-tab.is-active .kd-tab-name{
	color: var(--white-color);
}

.kd-tab-q{
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.5em;
	color: var(--text-color);
	transition: color 0.35s ease-in-out;
}

.kd-tab.is-active .kd-tab-q{
	color: rgba(255, 255, 255, 0.82);
}


/* --- The panel ---------------------------------------------------
   The result column bleeds to the card edge, so the card carries no padding
   of its own and each side pads itself.                                    */

.kd-panel[hidden]{
	display: none;
}

.kd-workbench .kd-calc{
	display: block;
	height: auto;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 0;
	overflow: hidden;
}

.kd-calc-inputs{
	padding: 36px 40px 40px;
}

.kd-panel-head{
	margin-bottom: 30px;
}

.kd-panel-head h3{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3em;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
	color: var(--primary-color);
}

.kd-panel-head p{
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.7em;
}

.kd-workbench .kd-calc-note{
	margin: 0;
	padding: 0 40px 34px;
}


/* --- Field: label and value on one line, slider beneath --------- */

.kd-workbench .kd-field{
	margin-bottom: 26px;
}

.kd-workbench .kd-field:last-child{
	margin-bottom: 0;
}

.kd-field-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.kd-field-head label{
	margin-bottom: 0;
}

.kd-field-head .kd-input-wrap{
	flex: 0 0 auto;
	width: 178px;
}

.kd-field-head .kd-input-wrap input{
	text-align: end;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	padding: 11px 16px;
}

/* Unit sitting after the figure rather than before it - "15 yrs", "10 %". */
.kd-unit-end{
	padding-left: 0;
	padding-right: 16px;
}

.kd-unit-end + input,
.kd-input-wrap input + .kd-unit-end{
	padding-left: 16px;
}


/* --- The range ---------------------------------------------------
   28px tall so the drag target clears the 24px web minimum comfortably,
   with a 6px visual track inside it. The filled portion is a gradient driven
   by --kd-fill from JS, because ::-moz-range-progress has no WebKit
   equivalent and the two engines cannot be styled the same way otherwise. */

.kd-range{
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.kd-range::-webkit-slider-runnable-track{
	height: 6px;
	border-radius: 100px;
	background: linear-gradient(to right,
		var(--accent-color) 0 var(--kd-fill, 0%),
		#DDE2E3 var(--kd-fill, 0%) 100%);
}

.kd-range::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border-radius: 50%;
	background: var(--white-color);
	border: 3px solid var(--dark-color);
	box-shadow: 0 2px 8px rgba(4, 3, 3, 0.28);
	transition: transform 0.15s ease-in-out;
}

.kd-range:active::-webkit-slider-thumb{
	transform: scale(1.1);
}

.kd-range::-moz-range-track{
	height: 6px;
	border-radius: 100px;
	background: #DDE2E3;
}

.kd-range::-moz-range-progress{
	height: 6px;
	border-radius: 100px;
	background: var(--accent-color);
}

.kd-range::-moz-range-thumb{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--white-color);
	border: 3px solid var(--dark-color);
	box-shadow: 0 2px 8px rgba(4, 3, 3, 0.28);
}

.kd-scale{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4em;
	color: var(--text-color);
}

.kd-workbench .kd-hint{
	margin-top: 10px;
	font-size: 13px;
}


/* --- The answer --------------------------------------------------
   Dark teal, so the figure the visitor came for is the loudest thing in the
   card. Same depth gradient as the other dark bands on the site.           */

.kd-result-panel{
	display: flex;
	flex-direction: column;
	/* Centred, not top-aligned. The input column is much taller than the answer
	   - seven fields on the retirement panel - and pinning the figure to the top
	   left a 270px hole above the breakdown rows. */
	justify-content: center;
	height: 100%;
	padding: 36px 36px 38px;
	background-color: var(--dark-color);
	background-image: radial-gradient(120% 90% at 50% 0%, rgba(0, 86, 107, 0.85) 0%, rgba(0, 64, 80, 0) 62%);
}

.kd-result-cap{
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.kd-result-hero{
	margin-bottom: 4px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.02em;
	color: var(--white-color);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.kd-result-sub{
	margin-bottom: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
}


/* --- Proportion bar ----------------------------------------------
   A second reading of two figures that are also written out underneath it,
   so nothing here depends on telling the two colours apart.                */

.kd-split{
	display: flex;
	height: 10px;
	border-radius: 100px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.14);
	margin: 26px 0 12px;
}

.kd-split span{
	display: block;
	height: 100%;
	width: 0;
	transition: width 0.35s ease-in-out;
}

.kd-split-a{ background: rgba(255, 255, 255, 0.55); }
.kd-split-b{ background: var(--accent-color); }

.kd-split-key{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.82);
}

.kd-dot{
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 7px;
}

.kd-dot-a{ background: rgba(255, 255, 255, 0.55); }
.kd-dot-b{ background: var(--accent-color); }


/* --- Result rows, inverted for the dark panel ------------------- */

.kd-result-panel .kd-result-rows{
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.kd-result-panel .kd-result-row{
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.kd-result-panel .kd-result-row:last-child{
	border-bottom: none;
	padding-bottom: 0;
}

.kd-result-panel .kd-result-label{
	color: rgba(255, 255, 255, 0.78);
}

.kd-result-panel .kd-result-value{
	color: var(--white-color);
	font-variant-numeric: tabular-nums;
}

.kd-result-panel .kd-result-strong{
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.kd-result-panel .kd-result-strong .kd-result-label{
	color: rgba(255, 255, 255, 0.9);
}

.kd-result-panel .kd-result-strong .kd-result-value{
	color: var(--accent-color);
}


/* --- Retirement: seven fields, two columns ---------------------- */

.kd-calc-form-two{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 32px;
}

/* Label beside figure needs room the half-width column does not have -
   "Monthly expenses today" wrapped to three lines and threw its row out of
   alignment with the field next to it. Stacked, every field is the same
   height and the two columns stay level. */
.kd-calc-form-two .kd-field-head{
	display: block;
	margin-bottom: 8px;
}

.kd-calc-form-two .kd-field-head label{
	margin-bottom: 8px;
}

.kd-calc-form-two .kd-field-head .kd-input-wrap{
	width: 100%;
}

.kd-calc-form-two .kd-field-head .kd-input-wrap input{
	text-align: start;
}

.kd-calc-form-two .kd-field:last-child{
	grid-column: 1 / -1;
}


/* --- Responsive ------------------------------------------------- */

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

	.kd-field-head .kd-input-wrap{
		width: 156px;
	}

	.kd-result-hero{
		font-size: 34px;
	}
}

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

	/* Four question cards need more width than a 1199px container gives them
	   before the questions start wrapping to three lines. */
	.kd-tabs{
		grid-template-columns: repeat(2, 1fr);
	}

	.kd-calc-inputs{
		padding: 30px 28px 34px;
	}

	.kd-result-panel{
		padding: 30px 28px 32px;
	}

	.kd-workbench .kd-calc-note{
		padding: 0 28px 28px;
	}

	.kd-calc-form-two{
		gap: 0 24px;
	}
}

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

	.kd-workbench{
		padding: 50px 0;
	}

	/* Columns stack, so the answer would otherwise sit below a long form.
	   It stays second in the DOM - reading order is inputs then result - but
	   the card corners have to be squared off where they now meet. */
	.kd-result-panel{
		height: auto;
	}

	.kd-calc-form-two{
		grid-template-columns: 1fr;
	}

	.kd-calc-form-two .kd-field:last-child{
		grid-column: auto;
	}
}

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

	.kd-tabs{
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 22px;
	}

	.kd-tab{
		padding: 16px 18px;
		gap: 12px;
	}

	.kd-tab-name{
		font-size: 17px;
	}

	.kd-calc-inputs{
		padding: 26px 20px 30px;
	}

	.kd-result-panel{
		padding: 26px 20px 28px;
	}

	.kd-workbench .kd-calc-note{
		padding: 0 20px 24px;
		font-size: 13px;
	}

	.kd-panel-head h3{
		font-size: 21px;
	}

	/* Label and figure on one line stops working once the label wraps, so
	   below 768px the figure moves under its own label and takes the width. */
	.kd-field-head{
		display: block;
		margin-bottom: 8px;
	}

	.kd-field-head label{
		margin-bottom: 8px;
	}

	.kd-field-head .kd-input-wrap{
		width: 100%;
	}

	.kd-field-head .kd-input-wrap input{
		text-align: start;
	}

	.kd-result-hero{
		font-size: 32px;
	}
}


/* --- Reduced motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce){

	.kd-tab,
	.kd-split span,
	.kd-range::-webkit-slider-thumb{
		transition: none;
	}

	.kd-tab:hover{
		transform: none;
	}
}


/************************************/
/***     17. About Us Page Css    ***/
/************************************/

.page-header{
	background-color: var(--dark-color);
	background-image: url('../images/page-header-bg.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 100px 0;
}

.page-header-box{
	text-align: center;
}

.page-header-box h1{
	display: inline-block;
    font-size: 70px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.02em;
    color: var(--white-color);
	text-align: center;
    margin-bottom: 10px;
    cursor: none;
}

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

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 500;
	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{
	font-size: 18px;
    color: var(--white-color);
}

.breadcrumb-item+.breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "/") !important;
}

.our-approach{
	background: var(--secondary-color);
	padding: 100px 0 70px;
}

.mission-vission-item{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.mission-vission-header{
	position: relative;
	padding: 40px;
}

.mission-vission-header:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--accent-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.mission-vission-item:hover .mission-vission-header::after{
	top: auto;
	bottom: 0;
    height: 100%;
}

.mission-vission-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	z-index: 1;
	overflow: hidden;
}

.mission-vission-item .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--primary-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.mission-vission-item:hover .icon-box:before{
	top: auto;
    height: 100%;
}

.mission-vission-item .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.mission-vission-content{
	position: relative;
	z-index: 1;
}

.mission-vission-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	transition: all 0.4s ease-in-out;
}

.mission-vission-content p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.mission-vission-item:hover .mission-vission-content h3,
.mission-vission-item:hover .mission-vission-content p{
	color: var(--white-color);
}

.mission-vission-image img{
	width: 100%;
	aspect-ratio: 1 / 0.59;
	object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.mission-vission-item:hover .mission-vission-image img{
	transform: scale(1.1);
}

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

.our-benefit-content{
	margin-right: 30px;
}

.our-benefit-img{
	margin-top: 30px;
}

.our-benefit-img figure{
	display: block;
	border-radius: 20px;
}

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

.our-benefit-box{
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
}

.our-benefit-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 50px;
}

.our-benefit-item{
	position: relative;
	width: calc(50% - 15px);
	background: var(--white-color);
	border-radius: 20px;
	padding: 20px;
	overflow: hidden;
}

.our-benefit-item:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--accent-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.our-benefit-item:hover::after{
	top: auto;
	bottom: 0;
    height: 100%;
}

.our-benefit-item .icon-box{
	margin-bottom: 40px;
}

.our-benefit-item .icon-box img{
	position: relative;
	z-index: 1;
	max-width: 40px;
	transition: all 0.4s ease-in-out;
}

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

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

.benefit-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	transition: all 0.4s ease-in-out;
}

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

.our-benefit-item:hover .benefit-item-content h3,
.our-benefit-item:hover .benefit-item-content p{
	color: var(--white-color);
}

.our-benefit-get-quote{
	text-align: center;
}

.our-benefit-get-quote p{
	margin-bottom: 0;
}

.our-benefit-get-quote p a{
	font-weight: 600;
	color: var(--accent-color);
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}

.our-benefit-get-quote p a:hover{
	color: var(--primary-color);
}

.our-partners{
	padding: 100px 0;
	background-color: var(--dark-color);
	background-image: url('../images/our-partners-bg.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.our-partners-content{
	margin-right: 80px;
}

.our-partners-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 25px;
	text-align: center;
}

.our-partner-item{
	width: auto;
	display: inline-flex;
	background: var(--dark-divider-color);
	border-radius: 20px;
	padding: 25px;
	text-align: center;
}

.our-partner-item:first-child{
	margin-left: 1px;
}

.our-partner-item img{
	width: 100%;
	max-height: 35px;
}

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

.team-member-item{
	border: 1px solid var(--divider-color);
    border-radius: 20px;
	padding: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.team-image{
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
}

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

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

.team-member-item:hover .team-image img{
    transform: scale(1.1);
}

.team-body{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	justify-content: space-between;
	gap: 15px 10px;
}

.team-content h3{
    color: var(--primary-color);
	font-size: 20px;
	font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.team-content h3 a{
    color: inherit;
}

.team-content p{
    text-transform: capitalize;
    margin: 0;
}

.team-social-icon ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.team-social-icon ul li{
    display: inline-block;
    margin-right: 15px;
}

.team-social-icon ul li:last-child{
    margin-right: 0;
}

.team-social-icon ul li a i{
	color: var(--accent-color);
    font-size: 20px;
	transition: all 0.4s ease-in-out;
}

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

/************************************/
/***    18. Services Page Css     ***/
/************************************/

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

.page-services .service-item{
	width: 100%;
	box-shadow: 0px 0px 50px 2px #04030308;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

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

.page-services .service-item .icon-box{
	margin-right: 0;
	margin-bottom: 40px;
}

.page-services .service-item-content{
	width: 100%;
}

.page-services .service-footer{
	text-align: center;
	margin-top: 10px;
}

/************************************/
/***    19. Service Single Css    ***/
/************************************/

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

.service-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 20px;
}

.service-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 60px;
}

.service-catagery-list h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--accent-color);
	margin-bottom: 30px;
}

.service-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-catagery-list ul li{
    margin-bottom: 20px;
}

.service-catagery-list ul li:last-child{
	margin-bottom: 0;
}

.service-catagery-list ul li a{
	position: relative;
    display: block;
    color: var(--text-color);
    background-color: var(--white-color);
    border-radius: 10px;
    text-transform: capitalize;
    padding: 16px 50px 16px 20px;
    transition: all 0.4s ease-in-out;
}

.service-catagery-list ul li:hover a{
	color: var(--white-color);
    background-color: var(--dark-color);
}

.service-catagery-list ul li a::after{
	content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('../images/arrow-text.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    transition: all 0.4s ease-in-out;
}

.service-catagery-list ul li:hover a::after{
    filter: brightness(0) invert(1);
}

.sidebar-cta-box{
	position: relative;
	background: url('../images/cta-box-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;
	padding: 40px;
}

.sidebar-cta-box:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--primary-color);
	opacity: 60%;
	border-radius: 20px;
	z-index: 0;
}

.cta-box-content{
	margin-bottom: 40px;
}

.cta-box-content,
.cta-contact-info{
	position: relative;
	z-index: 1;
}

.cta-box-content img{
	max-width: 160px;
	margin-bottom: 20px;
}

.cta-box-content h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.cta-contact-info{
	position: relative;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0px 0px 10px 0px #04030380;
}

.cta-contact-info:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--white-color);
	opacity: 20%;
	border-radius: 10px;
	z-index: 0;
}

.cta-info-item{
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 1;
}

.cta-info-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.cta-info-item p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 5px;
}

.cta-info-item h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
}

.service-featured-image{
	margin-bottom: 40px;
}

.service-featured-image figure{
	display: block;
	border-radius: 20px;
}

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

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

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

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

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

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

.service-entry-list ul li{
	width: calc(33.33% - 13.33px);
	position: relative;
	text-transform: capitalize;
}

.service-list-video{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	margin: 40px 0;
}

.service-list-video .service-entry-list{
	width: calc(52% - 15px);
}

.service-list-video .service-entry-list ul li{
	width: 100%;
}

.service-image-video{
    position: relative;
	width: calc(48% - 15px);
}

.service-image-video .video-image a{
	display: block;
    cursor: none;
}

.service-image-video .video-image figure{
	display: block;
	border-radius: 20px;
}

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

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

.service-image-video .video-play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 1;
}

.service-image-video .video-play-button a{
	border: none;
	background-color: var(--accent-color);
	width: 50px;
	height: 50px;
	margin: 0;
}

.service-image-video .video-play-button a:before{
	content: '';
	position: absolute;
	top: -50%;
    left: -50%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.service-image-video .video-play-button a:after{
	content: '';
	position: absolute;
	top: -50%;
    left: -50%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.service-image-video .video-play-button a i{
	font-size: 20px;
	color: var(--white-color);
}

.service-guidance,
.services-steps{
	margin-bottom: 40px;
}

.service-guidance-box{
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
}

.service-guidance-item{
	width: calc(33.33% - 20px);
}

.service-guidance-content{
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.service-guidance-content .icon-box{
	position: relative;
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    overflow: hidden;
}

.service-guidance-content .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    border-radius: 5px;
    height: 0;
    width: 100%;
    transition: all 0.4s ease-in-out;
}

.service-guidance-item:hover .service-guidance-content .icon-box::before{
	top: auto;
	height: 100%;
}

.service-guidance-content .icon-box img{
	position: relative;
	max-width: 24px;
	z-index: 1;
}

.service-guidance-title{
	width: calc(100% - 60px);
}

.service-guidance-title h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.service-guidance-img figure{
	display: block;
	border-radius: 20px;
}

.service-guidance-img img{
	width: 100%;
	aspect-ratio: 1 / 0.89;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.4s ease-in-out;
}

.service-guidance-item:hover .service-guidance-img img{
	transform: scale(1.1);
}

.service-steps-box{
	background-color: var(--dark-color);
	border-radius: 20px;
	padding: 60px;
	margin-top: 40px;
}

.service-step-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.service-step-item{
	width: calc(33.33% - 20px);
}

.service-step-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--dark-divider-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	overflow: hidden;
}

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

.service-step-item:hover .icon-box:before{
	top: auto;
	height: 100%;
}

.service-step-item .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.service-step-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 15px;
}

.service-step-item-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 30px;
}

.service-steps-box .service-entry-list ul li{
	color: var(--white-color);
}

/************************************/
/***     20. Blog Archive Css     ***/
/************************************/

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

.page-blog .post-item{
	gap: 20px;
}

.page-blog .post-featured-image,
.page-blog .post-item-body{
	width: 100%;
}

.page-blog .post-featured-image img{
	aspect-ratio: 1 / 0.75;
}

.page-blog .post-item-meta{
	margin-bottom: 15px;
}

.page-pagination{
    margin-top: 20px;
    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: 10px;
    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{
	background-color: var(--white-color);
	padding: 100px 0;
}

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

.post-image figure{
	display: block;	
	overflow: hidden;
}

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

.post-content{
	width: 100%;
	max-width: 1100px;
	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: 700;
	line-height: 1.2em;
	margin: 0 0 0.6em;
}

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

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

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

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

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

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

.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 ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

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

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    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: url('../images/icon-blockquote.svg'), var(--dark-color);
	background-repeat: no-repeat;
	background-position: 35px 30px;
    background-size: 58px;
    border-radius: 20px;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

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

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

.tag-links{
	font-size: 22px;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 5px;
    padding: 6px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: 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: 5px;
    width: 38px;
    height: 38px;
    transition: all 0.3s ease-in-out;
}

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

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

/************************************/
/***      22. Team Page Css       ***/
/************************************/

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

/************************************/
/***      23. Team Single Css     ***/
/************************************/

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

.team-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 20px;
}

.team-single-img{
	margin-bottom: 60px;
}

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

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

.team-contact-form{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
}

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

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

.team-single-content h3{
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
	margin-bottom: 5px;
}

.team-single-content h2{
	display: inline-block;
	font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
	cursor: none;
}

.team-single-content p{
	margin-bottom: 20px;
}

.team-single-content p:last-child{
	margin-bottom: 0;
}

.team-member-content,
.team-personal-info,
.team-expertise{
	margin-bottom: 40px;
}

.team-member-header{
	margin-bottom: 40px;
}

.team-member-body{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.team-contact-box{
	position: relative;
	width: calc(50% - 15px);
	background: var(--secondary-color);
	border-radius: 20px;
	display: flex;
	align-items: center;
	padding: 20px;
	overflow: hidden;
}

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

.team-contact-box:hover::before{
	top: auto;
	height: 100%;
}

.team-contact-box .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	overflow: hidden;
}

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

.team-contact-box:hover .icon-box:before{
	top: auto;
	height: 100%;
}

.team-contact-box .icon-box img{
	position: relative;
	max-width: 30px;
	z-index: 1;
}

.team-contact-content{
	position: relative;
	width: calc(100% - 65px);
	z-index: 1;
}

.team-contact-content p{
	margin-bottom: 5px;
	transition: all 0.4s ease-in-out;
}

.team-contact-box:hover .team-contact-content p{
	color: var(--white-color);
	opacity: 80%;
}

.team-contact-content h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 0;
	transition: all 0.3s ease-in-out;
}

.team-contact-box:hover .team-contact-content h3{
	color: var(--white-color);
}

.team-member-footer{
    display: flex;
    align-items: center;
    gap: 20px;
}

.team-member-footer span{
    font-size: 20px;
	font-weight: 600;
    text-transform: capitalize;
    color: var(--primary-color);
}

.team-member-footer ul{
	display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-member-footer ul li{
    display: inline-block;
    border-radius: 50%;
    margin-right: 15px;
}

.team-member-footer ul li:last-child{
	margin: 0;
}

.team-member-footer ul li a{
	color: var(--accent-color);
}

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

.team-member-footer ul li a i{
    color: inherit;
    font-size: 20px;
    transition: all 0.3s ease-in-out;
}

.team-expertise ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.team-expertise ul li{
	width: calc(50% - 10px);
	position: relative;
	text-transform: capitalize;
}

.skills-progress-bar{
    margin-bottom: 20px;
}

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

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

.skills-progress-bar .skill-data .skill-title{
    font-size: 16px;
    font-weight: 400;
	text-transform: capitalize;
    color: var(--text-color);
}

.skills-progress-bar .skill-data .skill-no{
    font-size: 16px;
    font-weight: 400;
	color: var(--primary-color);
}

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

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

/************************************/
/***     24. Pricing Page Css     ***/
/************************************/

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

/************************************/
/***     25. Client Page Css      ***/
/************************************/

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

.company-logo{
	background-color: var(--secondary-color);
    border-radius: 30px;
	text-align: center;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 70px 60px;
}

.company-logo img{
    width: 100%;
    height: 60px;
}

/************************************/
/***   26. Testimonial Page Css   ***/
/************************************/

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

.client-testimonial-item{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: 0px 0px 50px 2px #04030308;
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.client-testimonial-header{
	position: relative;
	padding: 30px 30px 60px;
	text-align: center;
	overflow: hidden;
}

.client-testimonial-header:before{
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--dark-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.client-testimonial-item:hover .client-testimonial-header::before{
	top: 0;
}

.client-testimonial-quote{
	margin-bottom: 20px;
}

.client-testimonial-quote img{
	position: relative;
	max-width: 44px;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}

.client-testimonial-item:hover .client-testimonial-quote img{
	filter: brightness(0) invert(1);
}

.client-testimonial-header p{
	position: relative;
	margin: 0;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.client-testimonial-item:hover .client-testimonial-header p{
	color: var(--white-color);
}

.client-testimonial-body{
	background: var(--dark-color);
	text-align: center;
	padding: 0 30px 30px 30px;
}

.client-author-image{
	position: relative;
	top: -30px;
}

.client-author-image figure,
.client-author-image img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin: 0 auto;
}

.client-author-image img{
	border: 2px solid var(--divider-color);
}

.client-author-content h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.client-author-content p{
	color: var(--white-color);
	opacity: 80%;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***     27. 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{
	aspect-ratio: 1 / 0.79;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***     28. 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: 40%;
    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-color);
	color: var(--white-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{
	aspect-ratio: 1 / 0.85;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***       29. FAQs Page Css      ***/
/************************************/

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

.faq-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 20px;
}

.faq-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 60px;
}

.faq-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-catagery-list ul li{
    margin-bottom: 20px;
}

.faq-catagery-list ul li:last-child{
	margin-bottom: 0;
}

.faq-catagery-list ul li a{
	position: relative;
    display: block;
    color: var(--text-color);
    background-color: var(--white-color);
    border-radius: 15px;
    text-transform: capitalize;
    padding: 15px 50px 15px 20px;
    transition: all 0.4s ease-in-out;
}

.faq-catagery-list ul li:hover a{
	color: var(--white-color);
    background-color: var(--dark-color);
}

.faq-catagery-list ul li a::after{
	content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('../images/arrow-text.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    transition: all 0.4s ease-in-out;
}

.faq-catagery-list ul li:hover a::after{
    filter: brightness(0) invert(1);
}

.page-faq-accordion{
	margin-bottom: 40px;
}

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

/************************************/
/***     30. Contact Page Css     ***/
/************************************/

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

.contact-info-item{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	margin-bottom: 30px;
	overflow: hidden;
}

.contact-info-img img{
	width: 100%;
	aspect-ratio: 1 / 0.61;
	object-fit: cover;
}

.contact-info-body{
	position: relative;
	padding: 0 80px 40px;
	text-align: center;
}

.contact-info-body:after{
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--accent-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .contact-info-body:after{
	top: 0;
}

.contact-info-body .icon-box{
	position: relative;
	top: -30px;
	width: 60px;
	height: 60px;
	background: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	z-index: 1;
	overflow: hidden;
}

.contact-info-body .icon-box:after{
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--dark-color);
	border-radius: 5px;
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .icon-box:after{
	top: 0;
}

.contact-info-body .icon-box img{
	position: relative;
	width: 100%;
	max-width: 34px;
	z-index: 1;
}

.contact-info-content{
	position: relative;
	z-index: 1;
}

.contact-info-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	transition: all 0.4s ease-in-out;
}

.contact-info-content p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .contact-info-content h3,
.contact-info-item:hover .contact-info-content p{
	color: var(--white-color);
}

.contact-form-section{
	background: var(--secondary-color);
	padding: 100px 0;
}

.contact-form-img{
	margin-right: 45px;
}

.contact-form-img figure{
	display: block;
	border-radius: 20px;
}

.contact-form-img img{
	width: 100%;
	aspect-ratio: 1 / 1.25;
	object-fit: cover;
	border-radius: 20px;
}

.google-map{
	overflow: hidden;
}

.google-map .container-fluid{
	padding: 0;
}

.google-map-iframe,
.google-map-iframe iframe{
    height: 600px;
    width: 100%;
}

/************************************/
/***    31 . 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: 50%;
}

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

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

/************************************/
/***      32. Responsive Css      ***/
/************************************/

@media only screen and (max-width: 1024px){
	
	.main-menu ul li{
		margin: 0;
	}

	.our-appointment-box{
		padding: 50px;
	}
}

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

	.navbar{
		padding: 20px 0;
	}

	.main-menu ul li.highlighted-menu{
		display: block;
	}
	
	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

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

	.header-btn{
		display: none;
	}

	.btn-default{
		font-size: 16px;
		padding: 15px 60px 15px 20px;
	}

	.btn-default::after{
		height: 24px;
		width: 24px;
		transform: translate(-20px, -50%);
	}

	/* KDFinvest: keep .btn-outline level with the shrunk .btn-default */
	.btn-outline{
		font-size: 16px;
		padding: 13px 58px 13px 18px;
	}

	.btn-outline::after{
		height: 24px;
		width: 24px;
		transform: translate(-18px, -50%);
	}

	.btn-default.btn-highlighted{
		padding: 15px 20px;
	}

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

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

	.section-title h3{
		margin-bottom: 10px;
		padding-left: 30px;
	}

	.section-title h3::before{
		width: 20px;
		height: 20px;
	}

	.section-title h1{
		font-size: 55px;
	}

	.section-title h2{
		font-size: 38px;
	}

	.section-title p{
		margin-top: 15px;
	}

	.section-title-content{
		margin-top: 15px;
	}

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

	.hero{
		padding: 50px 0 0;
	}

	.hero.hero-bg-image{
		padding: 205px 0;
	}

	.hero.hero-bg-image.hero-slider-layout .hero-slide{
		padding: 205px 0;
	}

	.hero.hero-bg-image.hero-slider-layout .hero-pagination{
		bottom: 30px;
	}

	.hero-content{
		margin-right: 0px;
		margin-bottom: 30px;
	}

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

	.hero-content-footer h2{
		margin-bottom: 20px;
	}

	.hero-image{
		width: 100%;
		max-width: 60%;
		margin: 0 auto;
		text-align: center;
	}

	.company-experience{
		width: 250px;
		padding: 10px;
	}

	.company-experience h3{
		font-size: 36px;
	}

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

	.about-us-images{
		max-width: 620px;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.about-us-content{
		margin-left: 0px;
	}

	.about-goal-box{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.about-goal-box .icon-box{
		margin-bottom: 20px;
	}

	.about-info-box{
		margin-bottom: 30px;
	}

	.our-services{
		padding: 50px 0;
	}

	.our-service-content{
		margin-bottom: 30px;
	}

	.service-item{
		padding: 30px;
	}

	.service-no{
		bottom: -30px;
	}

	.service-item .icon-box{
		width: 45px;
		height: 45px;
		margin-right: 15px;
	}

	.service-item .icon-box img{
		max-width: 26px;
	}

	.service-item-content{
		width: calc(100% - 60px);
	}

	.service-item-content h3{
		margin-bottom: 10px;
	}

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

	.service-no h2{
		font-size: 80px;
	}

	.service-footer{
		margin-top: 30px;
	}

	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.why-choose-box .icon-box{
		margin-bottom: 20px;
	}

	.why-choose-box-content h3{
		margin-bottom: 10px;
	}

	.why-choose-image{
		max-width: 620px;
		margin: 0 auto;
	}

	.our-feature{
		padding: 50px 0;
	}

	.our-feature-item{
		padding: 20px;
	}

	.our-feature-item .icon-box{
		margin-bottom: 20px;
	}

	.feature-item-content h3{
		margin-bottom: 10px;
	}

	.our-feature-footer{
		margin-top: 30px;
	}

	.fact-counter{
		padding: 50px 0;
	}

	.fact-counter-image{
		margin-bottom: 30px;
	}

	.fact-counter-img img{
		aspect-ratio: 1 / 0.7;
	}

	.fact-counter-skillbar{
		max-width: 300px;
	}

	.fact-counter-content{
		margin-left: 0;
	}

	.fact-counter-box-list{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.fact-counter-box-content h2{
		font-size: 36px;
		margin-bottom: 5px;
	}

	.what-we-do{
		padding: 50px 0;
	}

	.what-we-do-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.what-we-do-list{
		margin-bottom: 30px;
	}

	.what-we-do-images{
		padding: 0 60px 80px 15px;
	}

	.what-do-we-img-1 img{
		aspect-ratio: 1 / 0.7;
	}

	.experience-counter-box{
		max-width: 245px;
		padding: 10px;
	}

	.experience-counter-no{
		margin-right: 10px;
	}

	.experience-counter-no h2{
		font-size: 36px;
	}

	.experience-counter-content{
		width: 66%;
	}

	.how-it-work{
		padding: 50px 0;
	}

	.how-it-work-content{
		position: initial;
		margin-bottom: 30px;
	}

	.work-step-item{
		padding: 30px 30px 0 30px;
		margin-bottom: 30px;
	}

	.work-step-item-content{
		margin-bottom: 10px;
	}

	.work-step-item-no{
		margin-bottom: -30px;
	}

	.work-step-item-no h2{
		font-size: 80px;
	}

	.our-pricing{
		padding: 50px 0;
	}

	.pricing-box{
		padding: 20px;
	}

	.pricing-header{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.pricing-header h3{
		margin-bottom: 15px;
	}

	.pricing-header h2{
		font-size: 36px;
	}

	.pricing-header sup{
		font-size: 22px;
	}

	.pricing-list-title{
		margin-bottom: 15px;
	}

	.pricing-body{
		margin-bottom: 20px;
	}

	.pricing-box.highlighted-box .pricing-header{
		padding: 0 60px 20px 0;
	}

	.highlighted-box::before{
		font-size: 12px;
		top: 22px;
		right: -65px;
		height: 26px;;
	}

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

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

	.our-faqs-image{
		margin-bottom: 30px;
	}

	.our-faqs-img img{
		aspect-ratio: 1 / 0.8;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion .accordion-header .accordion-button,
	.faq-accordion .accordion-item .accordion-body{
		padding: 12px 40px 12px 15px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 12px;
	}

	.our-testimonial{
		padding: 50px 0;
	}

	.testimonial-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.testimonial-slider{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.testimonial-slider-box{
		padding: 30px;
	}

	.testimonial-header{
		margin-bottom: 20px;
	}

	.testimonial-body{
		margin-bottom: 20px;
	}

	.testimonial-slider .testimonial-pagination .swiper-pagination-bullet{
		height: 8px;
		width: 8px;
		margin: 0 6px;
	}

	.testimonial-slider .testimonial-pagination .swiper-pagination-bullet-active:before{
		height: 20px;
		width: 20px;
	}

	.customer-rating-boxes{
		gap: 20px;
	}

	.customer-rating-box{
		width: calc(33.33% - 13.33px);
	}

	.our-blog{
		padding: 50px 0 20px;
	}

	.post-item{
		gap: 20px;
	}

	.post-featured-image,
	.post-item-body{
		width: 100%;
	}

	.post-featured-image img{
		aspect-ratio: 1 / 0.79;
	}

	.post-item-meta{
		margin-bottom: 10px;
	}

	.post-item-content{
		margin-bottom: 15px;
	}
	
	.readmore-btn{
		font-size: 16px;
		padding-right: 30px;
	}

	.readmore-btn::before{
		height: 20px;
		width: 20px;
	}

	footer.main-footer{
		padding: 50px 0 0 0;
	}

	.footer-newsletter-box{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.footer-newsletter-title{
		margin-bottom: 20px;
	}

	.footer-newsletter-title h3{
		font-size: 28px;
	}

	.newsletter-form .form-group .form-control,
	.newsletter-form .form-group .newsletter-btn{
		padding: 10px;
	}

	.footer-links h3{
		margin-bottom: 20px;
	}

	.footer-cta-box{
		margin-top: 30px;
		padding: 30px;
	}

	.footer-logo{
		width: calc(25% - 10px);
	}

	.footer-contact-box{
		width: calc(75% - 10px);
		gap: 20px 30px;
	}

	.footer-contact-item::before{
		right: -15px;
	}

	.footer-contact-item h3{
		font-size: 18px;
	}

	.footer-copyright{
		padding: 30px 0;
	}

	.footer-menu ul li{
		margin-right: 20px;
	}

	.footer-menu ul li::before{
		right: -14px;
	}
	
	.page-header{
		background-size: contain;
        padding: 80px 0;
    }

	.page-header-box h1{
        font-size: 55px;
    }

	.our-approach{
		padding: 50px 0 20px;
	}

	.mission-vission-header{
		padding: 30px;
	}

	.mission-vission-item .icon-box{
		margin-bottom: 20px;
	}

	.mission-vission-content h3{
		margin-bottom: 10px;
	}

	.our-benefit{
		padding: 50px 0;
	}

	.our-benefit-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.our-benefit-img{
		margin-top: 30px;
	}
	
	.our-benefit-list{
		margin-bottom: 30px;
	}

	.our-benefit-box{
		padding: 30px;
	}

	.our-benefit-item .icon-box{
		margin-bottom: 30px;
	}

	.benefit-item-content h3{
		margin-bottom: 10px;
	}

	.our-partners{
		padding: 50px 0 ;
	}

	.our-partners-content{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.our-partners-list{
		max-width: 620px;
		margin: 0 auto;
	}

	.our-partner-item{
		padding: 20px 25px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.team-member-item{
		padding: 15px;
	}

	.team-image{
		margin-bottom: 20px;
	}

	.page-services{
		padding: 50px 0;
	}

	.page-services .service-item .icon-box{
		margin-bottom: 20px;
	}

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

	.service-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.service-catagery-list{
		padding: 20px;
		margin-bottom: 30px;
	}

	.service-catagery-list h3{
		margin-bottom: 20px;
	}

	.service-catagery-list ul li a{
		padding: 10px 45px 10px 15px;
	}

	.service-catagery-list ul li a::after{
		right: 15px;
	}

	.sidebar-cta-box{
		padding: 30px;
	}

	.cta-box-content{
		margin-bottom: 30px;
	}

	.cta-info-item{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.service-featured-image{
		margin-bottom: 30px;
	}

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

	.service-entry h2{
		font-size: 36px;
	}

	.service-entry-list ul{
		gap: 10px;
	}

	.service-entry-list ul li{
		width: calc(33.33% - 6.67px);
	}

	.service-list-video{
		gap: 20px;
		margin: 30px 0;
	}

	.service-list-video .service-entry-list{
		width: calc(54% - 10px);
	}

	.service-image-video{
		width: calc(46% - 10px);
	}

	.service-guidance,
	.services-steps{
		margin-bottom: 30px;
	}

	.service-guidance-box{
		margin-top: 30px;
		gap: 20px;
	}

	.service-guidance-item{
		width: calc(33.33% - 13.33px);
	}

	.service-guidance-content{
		margin-bottom: 20px;
	}

	.service-steps-box{
		padding: 30px;
		margin-top: 30px;
	}

	.service-step-item-list{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.service-step-item .icon-box{
		width: 40px;
		height: 40px;
		margin-bottom: 20px;
	}

	.service-step-item .icon-box img{
		max-width: 25px;
	}

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

	.page-blog .post-item-meta{
		margin-bottom: 10px;
	}

	.page-pagination{
		margin-top: 10px;
	}

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

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

	.post-entry blockquote{
		background-position: 25px 25px;
		background-size: 45px;
		padding: 25px 25px 25px 85px;
		margin-bottom: 20px;
	}

	.post-entry blockquote p{
		font-size: 18px;
	}

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

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

	.post-entry ul li{
		font-size: 16px;
		margin-bottom: 10px;
	}

	.post-tags{
		margin-bottom: 20px;
	}

	.post-social-sharing ul{
		text-align: left;
	}

	.post-tags .tag-links a{
		padding: 6px 15px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

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

	.team-single-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.team-single-img{
		margin-bottom: 30px;
	}

	.team-single-img img{
		aspect-ratio: 1 / 0.65;
		object-position: top center;
	}

	.team-contact-form{
		padding: 30px;
	}

	.contact-form .form-control{
		padding: 14px 16px;
	}

	.team-single-content h2{
		font-size: 36px;
	}

	.team-member-content,
	.team-personal-info,
	.team-expertise{
		margin-bottom: 30px;
	}

	.team-member-header{
		margin-bottom: 30px;
	}

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

	.page-client{
		padding: 50px 0 20px;
	}

	.company-logo{
		border-radius: 20px;
		padding: 20px 30px;
	}

	.company-logo img{
		width: 100%;
		height: 60px;
	}

	.page-testimonial{
		padding: 50px 0 20px;
	}

	.client-testimonial-header{
		padding: 20px 20px 50px;
	}

	.client-testimonial-body{
		padding: 0 20px 20px 20px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-video-gallery{
		padding: 50px 0 20px;
	}

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

	.faq-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.faq-catagery-list{
		margin-bottom: 30px;
	}

	.faq-catagery-list ul li a{
		padding: 10px 50px 10px 20px;
	}

	.page-faq-accordion{
		margin-bottom: 30px;
	}

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

	.contact-info-body{
		padding: 0 60px 30px;
	}

	.contact-info-body .icon-box{
		top: -25px;
		width: 50px;
		height: 50px;
	}

	.contact-info-body .icon-box img{
		max-width: 28px;
	}

	.contact-form-section{
		padding: 50px 0;
	}

	.contact-form-img{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.contact-form-img img{
		aspect-ratio: 1 / 0.8;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 450px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-image img{
		max-width: 80%;
	}
}

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

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

	.section-title h3{
		font-size: 14px;
		padding-left: 25px;
	}

	.section-title h3:before{
		height: 18px;
		width: 18px;
	}

	.section-title h1{
		font-size: 36px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-btn{
		margin-right: 20px;
	}

	/* KDFinvest: hero buttons wrap at this width - space them vertically */
	.hero-btn-secondary{
		margin: 12px 0 0;
	}

	.video-play-button a{
		width: 45px;
		height: 45px;
		margin-right: 10px;
	}

	.video-play-button img{
		max-width: 14px;
	}

	.video-play-button p{
		font-size: 16px;
	}

	.hero-content-footer h2{
		font-size: 18px;
		margin-bottom: 20px;
	}

	.hero-image{
        max-width: 100%;
		padding-left: 50px;
    }

	.company-experience{
		width: 230px;
		bottom: 10%;
	}

	.company-experience h3{
		width: 25%;
		font-size: 26px;
	}

	.company-experience p{
		width: 75%;
	}

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

	.about-img-1:before{
		transform: translate(-50%, 40px);
		width: 80px;
		height: 25px;
	}

	.about-img-2{
		width: 180px;
	}

	.contact-circle{
        top: 10px;
        right: 20px;
    }

	.contact-circle img{
		max-width: 90px;
	}

	.about-content-info{
		margin-bottom: 30px;
	}

	.about-goal-box-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.about-contact-content p{
		font-size: 18px;
	}

	/* KDFinvest: keep the long email contained at mobile widths */
	.about-contact-box.about-contact-email .about-contact-content p{
		font-size: 16px;
	}

	.about-author-box{
		padding: 20px;
	}

	.about-author-content h3{
		font-size: 18px;
		margin-bottom: 0;
	}
	
	.about-info-box{
		margin-bottom: 20px;
	}

	.service-item{
		width: 100%;
		padding: 20px;
		border-right: none;
		border-left: none;
	}

	.service-item-content h3{
		font-size: 18px;
	}

	.service-no{
        bottom: -25px;
    }

	.service-no h2{
        font-size: 60px;
    }

	.service-footer{
		text-align: center;
	}

	.service-footer p{
		font-size: 12px;
	}

	.why-choose-box{
		width: 100%;
	}

	.why-choose-box-content h3{
		font-size: 18px;
	}

	.why-choose-list ul{
		gap: 10px;
	}

	.why-choose-list ul li{
		width: 100%;
	}

	.why-choose-image{
		max-width: 100%;
		padding: 0 0 100px 125px;
	}

	.why-choose-img-2{
		max-width: 220px;
	}

	.why-choose-contact-circle{
		right: 10px;
	}

	.why-choose-contact-circle img{
		max-width: 90px;
	}

	.our-feature-item{
		width: 100%;
	}

	.feature-item-content h3{
		font-size: 18px;
	}

	.fact-counter-image{
		padding: 0 25px 30px 0;
	}

	.fact-counter-img img{
		aspect-ratio: 1 / 0.9;
	}

	.fact-counter-skillbar{
		max-width: 250px;
	}

	.fact-counter-box-list{
		gap: 20px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.fact-counter-box{
		width: calc(33.33% - 13.33px);
	}

	.fact-counter-box .icon-box{
		width: 40px;
		height: 40px;
		margin-bottom: 15px;
	}

	.fact-counter-box .icon-box img{
		max-width: 25px;
	}

	.fact-counter-box-content h2{
        font-size: 26px;
		margin-bottom: 5px;
    }

	.fact-counter-list ul{
		gap: 10px;
	}

	.fact-counter-list ul li{
		width: 100%;
	}

	.what-we-do-list ul li{
		width: 100%;
	}

	.what-we-do-images{
        padding: 40px 25px 40px 15px;
    }

	.what-do-we-img-1 img{
		aspect-ratio: 1 / 0.75;
	}

	.what-do-we-img-2{
		max-width: 200px;
	}

	.what-do-we-img-2 img{
		border-width: 5px;
		aspect-ratio: 1 / 0.68;
	}

	.experience-counter-box{
		top: 0;
		bottom: auto;
        max-width: 210px;
        padding: 5px;
    }

	.experience-counter-no h2{
        font-size: 26px;
    }

	.experience-counter-content{
        width: 68%;
    }

	.experience-counter-content p{
		font-size: 14px;
	}

	.work-step-item{
        padding: 20px 20px 0 20px;
        margin-bottom: 20px;
    }

	.work-step-item-content h2{
		font-size: 18px;
	}

	.work-step-item-no{
        margin-bottom: -25px;
    }

	.work-step-item-no h2{
        font-size: 60px;
    }

	.pricing-header{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.pricing-header h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.pricing-header h2{
        font-size: 26px;
    }
	
    .pricing-header sup{
        font-size: 18px;
		top: -3px;
    }

	.pricing-header sub{
		font-size: 14px;
	}

	.pricing-list-title h3{
		font-size: 18px;
	}

	.pricing-benefit-list ul{
        gap: 10px;
    }

    .pricing-benefit-list ul li{
        width: calc(50% - 7.5px);
        font-size: 12px;
		line-height: normal;
    }

    .pricing-benefit-list ul li img{
        max-width: 16px;
        margin-right: 5px;
    }

	.our-faqs-image{
		padding-right: 30px;
	}

	.our-faqs-img img{
        aspect-ratio: 1 / 0.98;
    }

	.client-review-box{
		bottom: 20px;
		max-width: 180px;
		padding: 10px;
	}

	.client-review-box-content{
		margin-bottom: 10px;
	}

	.client-review-box-content p{
		font-size: 16px;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 18px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
    	width: 18px;
		height: 18px;
    }

	.faq-accordion .accordion-item .accordion-body{
		padding: 12px 15px;
	}

	.testimonial-slider-box{
        padding: 20px;
    }

	.testimonial-header,
	.testimonial-body{
        margin-bottom: 20px;
    }

	.customer-logo img{
		max-width: 150px;
	}

	.testimonial-quotes img{
		max-width: 30px;
	}

	.testimonial-author .author-image{
		margin-right: 10px;
	}

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

	.testimonial-author .author-content h3{
		font-size: 16px;
		padding-right: 15px;
	}

	.testimonial-author .author-content h3::before{
		right: 5px;
		font-size: 16px;
	}

	.customer-rating-box{
		justify-content: left;
		width: 100%;
	}

	.customer-rating-counter h3{
		font-size: 18px;
		margin-right: 5px;
	}

	.customer-rating-counter p span{
		font-size: 18px;
	}

	.post-item-content h2{
		font-size: 18px;
	}

	.footer-newsletter-title h3{
        font-size: 22px;
    }

	.newsletter-form .form-group .newsletter-btn img{
		max-width: 22px;
	}

	.footer-links{
		margin-bottom: 30px;
	}

	.footer-links h3{
		font-size: 18px;
        margin-bottom: 15px;
    }

	.footer-links ul li{
		margin-bottom: 5px;
	}

	.footer-cta-box{
		margin-top: 0;
		padding: 20px;
	}

	.footer-logo,
	.footer-contact-box{
		width: 100%;
	}

	.footer-logo img{
		max-width: 150px;
	}

	.footer-contact-box{
		justify-content: left;
		gap: 20px;
	}

	.footer-contact-item{
		width: calc(50% - 10px);
	}

	.footer-contact-item::before{
		right: -10px;
	}

	.footer-contact-item:nth-of-type(2n + 2)::before{
		display: none;
	}

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

	.footer-contact-item h3{
		font-size: 16px;
	}

	.footer-copyright{
		padding: 15px 0;
	}

	.footer-copyright-text{
		margin-bottom: 5px;
		text-align: center;
	}

	.footer-menu ul{
		text-align: center;
	}

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

	.page-header-box h1{
		font-size: 40px;
	}

	.mission-vission-header{
        padding: 20px;
    }

	.mission-vission-content h3{
		font-size: 18px;
	}

	.our-benefit-box{
		padding: 20px;
	}

	.our-benefit-item{
		width: 100%;
	}

	.our-benefit-item .icon-box{
		margin-bottom: 20px;
	}

	.benefit-item-content h3{
		font-size: 18px;
	}

	.our-partners-list{
		width: 100%;
		gap: 15px;
	}

	.our-partner-item{
		padding: 10px;
	}

	.our-partner-item img{
		max-height: 20px;
	}

	.team-content h3{
		font-size: 18px;
	}

	.team-social-icon ul li{
		margin-right: 10px;
	}

	.team-social-icon ul li i{
		font-size: 18px;
	}

	.service-catagery-list h3{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.service-catagery-list ul li{
		margin-bottom: 15px;
	}

	.sidebar-cta-box{
        padding: 20px;
    }

	.cta-box-content{
        margin-bottom: 20px;
    }

	.cta-box-content img{
		margin-bottom: 15px;
	}

	.cta-box-content h3{
		font-size: 18px;
	}

	.cta-info-item h3{
		font-size: 18px;
	}

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

	.service-featured-image img{
        aspect-ratio: 1 / 0.7;
    }
	
	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
        font-size: 26px;
    }

	.service-entry-list ul{
        gap: 5px;
    }

	.service-entry-list ul li{
		width: 100%;
    }

	.service-list-video .service-entry-list,
	.service-image-video{
		width: 100%;
	}

	.service-list-video{
        margin: 20px 0;
    }

	.service-guidance-item{
		width: 100%;
	}

	.service-guidance-img img{
		aspect-ratio: 1 / 0.6;
	}

	.service-guidance-content{
        margin-bottom: 15px;
    }

	.service-guidance-title h3{
		font-size: 18px;
	}

	.service-steps-box{
        padding: 20px;
    }

	.service-step-item-list{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.service-step-item{
        width: 100%;
    }

	.service-step-item-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.post-image figure,
	.post-image img{
		aspect-ratio: 1 / 0.70;
	}

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

	.team-single-img img{
        aspect-ratio: 1 / 1.01;
        object-position: center center;
    }

	.team-contact-form{
        padding: 20px;
    }
	
	.team-single-content h2{
		font-size: 26px;
		margin-bottom: 15px;
    }

	.team-single-content p{
		margin-bottom: 15px;
	}

	.team-member-body{
		gap: 20px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.team-contact-box{
		width: 100%;
		padding: 10px 15px;
	}

	.team-contact-box .icon-box{
		width: 40px;
		height: 40px;
	}

	.team-contact-box .icon-box img{
		max-width: 25px;
	}

	.team-contact-content{
		position: relative;
		width: calc(100% - 55px);
		z-index: 1;
	}

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

	.team-contact-content h3{
		font-size: 18px;
	}

	.team-member-footer span,
	.team-member-footer ul li a i{
		font-size: 18px;
	}

	.team-member-footer ul li{
		margin-right: 10px;
	}

	.team-expertise ul{
		gap: 10px;
	}

	.team-expertise ul li{
		width: 100%;
	}

	.skills-progress-bar{
		margin-bottom: 15px;
	}

	.company-logo{
		border-radius: 15px;
		padding: 15px 20px;
	}

	.company-logo img{
		height: 30px;
	}

	.client-testimonial-header{
        padding: 20px 15px 50px;
    }

	.client-testimonial-quote{
		margin-bottom: 15px;
	}

	.client-testimonial-quote img{
		max-width: 36px;
	}

	.client-testimonial-body{
        padding: 0 15px 20px 15px;
    }

	.client-author-content h3{
		font-size: 18px;
	}

	.faq-catagery-list{
		padding: 20px;
	}

	.contact-info-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
        height: 350px;
    }
}