/* ==========================================================================
THEME.CSS
Financial services site — built on Bootstrap 5 grid/utilities.
Design tokens live at the top as CSS custom properties so palette/type
can be swapped per-client without touching markup.
========================================================================== */
:root {
	/* ---- Color tokens ------------------------------------------------- */
	--ink: #10181A;
	/* near-black, header/footer/testimonials */
	--ink-soft: #1B2A2C;
	/* lighter panel on ink */
	--bg: #F6F5F0;
	/* warm paper, section background */
	--surface: #FFFFFF;
	/* cards */
	--brand: #0E4D44;
	/* deep teal — primary brand color */
	--brand-dark: #0A3830;
	--accent: #B8873B;
	/* brass/gold — CTA + highlight */
	--accent-dark: #9A6F2E;
	--text: #212927;
	--text-muted: #5C6B66;
	--line: rgba(16, 24, 26, 0.10);
	--line-on-ink: rgba(255, 255, 255, 0.14);
	/* ---- Type ----------------------------------------------------------*/
	--font-display: "Fraunces", "Plus Jakarta Sans", serif;
	--font-body: "Plus Jakarta Sans", -apple-system, Segoe UI, sans-serif;
	/* ---- Misc ------------------------------------------------------------*/
	--radius: 6px;
	--shadow-soft: 0 12px 30px -14px rgba(16, 24, 26, 0.25);
	--container-pad: clamp(1.25rem, 4vw, 3rem);
}

/* ==========================================================================
BASE
========================================================================== */
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	color: var(--text);
	background: var(--bg);
	font-size: 16px;
	line-height: 1.65;
}

h1,
h2,
h3,
h4,
.font-display {
	font-family: var(--font-display);
	color: var(--ink);
	font-weight: 600;
	letter-spacing: -0.01em;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-dark);
}

.eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--accent);
	display: inline-block;
}

/* Ledger-stitch divider — the site's one signature motif: a dashed
register line with a dot, echoing a receipt tear / ledger rule. */
.ledger-rule {
	position: relative;
	width: 64px;
	height: 10px;
	margin: .85rem 0 1.5rem;
}

.ledger-rule::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 100%;
	border-top: 2px dashed var(--accent);
}

.ledger-rule::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

.text-center .ledger-rule {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
BUTTONS
========================================================================== */
.btn-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	padding: .85rem 1.75rem;
	border-radius: var(--radius);
	border: 1px solid var(--accent);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-brand:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

.btn-brand i {
	transition: transform .2s ease;
}

.btn-brand:hover i {
	transform: translateX(3px);
}

.btn-outline-ink {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.6rem;
	border: 1.5px solid var(--line-on-ink);
	color: #fff;
	border-radius: var(--radius);
	font-weight: 600;
	transition: all .2s ease;
}

.btn-outline-ink:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

/* ==========================================================================
    HEADER
========================================================================== */

.site-topbar {
    background: var(--surface);
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
}

.site-topbar .custom-logo-link img {
    max-height: 46px;
    width: auto;
}

.site-topbar .topbar-phone {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.site-topbar .topbar-phone i {
    color: var(--accent);
    margin-right: .45rem;
}

/* ==========================================================================
    NAVIGATION
========================================================================== */

.site-nav {
    background: var(--ink);
    position: relative;
    z-index: 999;
}

.site-nav .navbar-nav {
    gap: .25rem;
}

.site-nav .navbar-nav > li {
    position: relative;
}

.site-nav .navbar-nav > li > a {

    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;

    padding: 1rem 1.15rem !important;

    color: rgba(255,255,255,.82);
    font-size: .94rem;
    font-weight: 600;

    text-decoration: none;

    transition: .25s ease;
}

.site-nav .navbar-nav > li > a:hover,
.site-nav .navbar-nav > li.current-menu-item > a,
.site-nav .navbar-nav > li.current-menu-parent > a,
.site-nav .navbar-nav > li.current-menu-ancestor > a {

    color: #fff;

}

/* ==========================================================================
    Underline Animation
========================================================================== */

.site-nav .navbar-nav > li > a::after {

    content: "";

    position: absolute;

    left: 1.1rem;
    right: 1.1rem;
    bottom: .65rem;

    height: 2px;

    background: var(--accent);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .25s ease;

}

.site-nav .navbar-nav > li > a:hover::after,
.site-nav .navbar-nav > li.current-menu-item > a::after,
.site-nav .navbar-nav > li.current-menu-parent > a::after,
.site-nav .navbar-nav > li.current-menu-ancestor > a::after {

    transform: scaleX(1);

}

/* ==========================================================================
    Dropdown Arrow
========================================================================== */

.site-nav .menu-item-has-children > a::before {

    content: "\f107";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    font-size: .7rem;

    order: 2;

    transition: .3s;

}

.site-nav .menu-item-has-children:hover > a::before {

    transform: rotate(180deg);

}

/* ==========================================================================
    Dropdown Menu
========================================================================== */

.site-nav .sub-menu {

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 260px;

    padding: .65rem 0;

    margin: 0;

    list-style: none;

    background: #fff;

    border-radius: 14px;

    border: 1px solid rgba(0,0,0,.05);

    box-shadow:
        0 15px 45px rgba(0,0,0,.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: .25s ease;

    z-index: 999;

}

/* Desktop Hover */

@media (min-width:992px){

.site-nav .menu-item-has-children:hover > .sub-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

}

/* ==========================================================================
    Dropdown Items
========================================================================== */

.site-nav .sub-menu li{

    width:100%;

}

.site-nav .sub-menu a{

    display:block;

    padding:.8rem 1.35rem;

    color:var(--ink);

    font-size:.92rem;

    font-weight:500;

    text-decoration:none;

    transition:.25s;

}

.site-nav .sub-menu a::after{

    display:none;

}

.site-nav .sub-menu a:hover{

    background:rgba(198,160,92,.08);

    color:var(--accent);

    padding-left:1.6rem;

}

/* ==========================================================================
    Social Icons
========================================================================== */

.site-nav .social-icons{

    display:flex;

    align-items:center;

    gap:.6rem;

}

.site-nav .social-icons a{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.18);

    color:#fff;

    transition:.25s;

}

.site-nav .social-icons a:hover{

    background:var(--accent);

    border-color:var(--accent);

    transform:translateY(-2px);

}

/* ==========================================================================
    Navbar Toggler
========================================================================== */

.navbar-toggler{

    border:1px solid rgba(255,255,255,.25);

    padding:.55rem .8rem;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

    filter:invert(1);

}

/* ==========================================================================
    Mobile Navigation
========================================================================== */

@media (max-width:991.98px){

.site-nav .navbar-collapse{

    padding:1rem 0;

}

.site-nav .navbar-nav{

    gap:0;

}

.site-nav .navbar-nav > li > a{

    padding:.9rem 0 !important;

}

.site-nav .sub-menu{

    position:static;

    opacity:1;

    visibility:visible;

    transform:none;

    display:none;

    background:rgba(255,255,255,.03);

    border:none;

    border-radius:10px;

    box-shadow:none;

    padding:.5rem 0 .5rem 1rem;

    margin-bottom:.5rem;

}

.site-nav .menu-item-has-children.show > .sub-menu{

    display:block;

}

.site-nav .sub-menu a{

    color:rgba(255,255,255,.8);

    padding:.6rem 1rem;

}

.site-nav .sub-menu a:hover{

    color:#fff;

    background:none;

    padding-left:1.25rem;

}

.site-nav .social-icons{

    margin-top:1rem;

}

}
/* ==========================================================================
HERO
========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(16, 24, 26, 0.82) 0%, rgba(16, 24, 26, 0.55) 45%, rgba(16, 24, 26, 0.25) 75%);
}

.hero .hero-video-bg {
    min-width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3;
}

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

.hero-eyebrow {
	color: var(--accent);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .78rem;
}

.hero h1 {
	color: #fff;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.05;
	margin: .9rem 0 1.1rem;
}

.hero p {
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	max-width: 34rem;
	font-family: var(--font-body);
}

.hero .hero-cta {
	margin-top: 2rem;
}

/* ==========================================================================
SERVICES
========================================================================== */
.section {
    overflow-x: hidden;
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.section-head {
	margin-bottom: 3rem;
}

.section-head h2 {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.service-card {
    display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 2.2rem 1.6rem;
	height: 100%;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-soft);
	border-color: transparent;
}

.service-icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	margin: 0 auto 1.25rem;
	transition: background .25s ease, transform .25s ease;
}

.service-card:hover .service-icon {
	background: var(--accent);
	transform: rotate(-6deg);
}

.service-card h3 {
	font-size: 1.15rem;
	margin-bottom: .7rem;
}

.service-card p {
	color: var(--text-muted);
	font-size: .93rem;
	margin: 0;
}

.service-overview-image {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 1rem;
}

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

/* ==========================================================================
ABOUT
========================================================================== */
.about-portrait {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
}

.about-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--line-on-ink);
	outline: 10px solid var(--bg);
	outline-offset: -10px;
	pointer-events: none;
}

.about-copy p {
	color: var(--text-muted);
	margin-bottom: 1.1rem;
}

.about-copy h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* ==========================================================================
TESTIMONIALS
========================================================================== */
.testimonials {
	background: var(--ink);
	color: #fff;
	position: relative;
}

.testimonials .section-head h2 {
	color: #fff;
}

.testimonial-card {
	background: var(--ink-soft);
	border: 1px solid var(--line-on-ink);
	border-radius: var(--radius);
	padding: 2.4rem 2rem 2rem;
	height: 100%;
}

.testimonial-quote {
	color: rgba(255, 255, 255, 0.85);
	font-style: italic;
	font-size: .98rem;
	min-height: 9.5rem;
}

.testimonial-person {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--line-on-ink);
}

.testimonial-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--accent);
}

.testimonial-person strong {
	display: block;
	font-size: .95rem;
}

.testimonial-person span {
	display: block;
	font-size: .8rem;
	color: rgba(255, 255, 255, 0.6);
}

.swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

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

/* ==========================================================================
AREAS OF EXPERTISE
========================================================================== */
.expertise-item {
	text-align: center;
	padding: 1.5rem 1rem;
}

.expertise-icon {
	width: 78px;
	height: 78px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: var(--brand);
	transition: all .25s ease;
}

.expertise-item:hover .expertise-icon {
	border-color: var(--accent);
	color: var(--accent);
	transform: scale(1.06);
}

.expertise-item span {
	display: block;
	margin-top: .4rem;
	font-weight: 700;
	font-size: .92rem;
	color: var(--accent-dark);
}

/* ==========================================================================
SERVICE AREA / MAP
========================================================================== */
.service-area-list {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	color: var(--ink);
}

.service-area-list span:not(:last-child)::after {
	content: "|";
	color: var(--accent);
	margin: 0 .9rem;
	font-family: var(--font-body);
}

.map-frame {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	filter: grayscale(.15);
}

.map-frame iframe {
	width: 100%;
	height: 420px;
	border: 0;
	display: block;
}

/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.75);
}

.footer-links {
	padding: 1rem 0;
	border-bottom: 1px solid var(--line-on-ink);
}

.footer-links ul {
	display: flex;
	gap: 2rem;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links a {
	font-weight: 600;
	color: #fff;
	font-size: .9rem;
}

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

.footer-main {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.footer-main h4 {
	color: var(--accent);
	font-family: var(--font-body);
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.footer-main p,
.footer-main li {
	font-size: .92rem;
	color: rgba(255, 255, 255, 0.72);
}

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

.footer-main li {
	margin-bottom: .4rem;
}

.footer-logo {
	max-height: 60px;
	margin-bottom: 1rem;
}

.footer-social p a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: rgba(255, 255, 255, 0.06);
	margin-right: .5rem;
	transition: background .2s ease;
}

.footer-social > a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	margin-right: .5rem;
	transition: background .2s ease;
}

.footer-social > a:hover {
	background: var(--accent);
}

.footer-map iframe {
	width: 100%;
	height: 150px;
	border-radius: var(--radius);
	border: 0;
}

.site-footer .copyright {
	border-top: 1px solid var(--line-on-ink);
	padding: 1.1rem 0;
	font-size: .82rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer .copyright a {
	color: var(--accent);
}

/* Back-to-top */
.back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .25s ease;
	z-index: 999;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--accent-dark);
}

/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 991.98px) {
	.hero {
		min-height: 60vh;
		text-align: center;
	}

	.hero .lead {
		margin-left: auto;
		margin-right: auto;
	}

	.site-nav .navbar-collapse {
		background: var(--ink);
		padding: 1rem 0;
	}

	.footer-links ul {
		justify-content: flex-start;
	}
}

@media (max-width: 575.98px) {
	.site-topbar .topbar-cta {
		display: none;
	}

	.service-area-list span::after {
		display: block;
		height: 0;
		margin: .35rem 0;
		content: "";
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}




/*=========================================================
    ABOUT SECTION
=========================================================*/

#about{

    position: relative;

    overflow: hidden;

}

#about::before{

    content: "";

    position: absolute;

    top: -120px;

    right: -120px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: rgba(var(--accent-rgb), .05);

    pointer-events: none;

}

.about-portrait{

    position: relative;

    max-width: 440px;

    margin: 0 auto;

}

.about-portrait::before{

    content: "";

    position: absolute;

    inset: 18px;

    border: 2px solid rgba(var(--accent-rgb), .18);

    border-radius: 24px;

    z-index: 0;

}

.about-portrait img{

    position: relative;

    z-index: 2;

    width: 100%;

    display: block;

    border-radius: 24px;

    background: #fff;

    box-shadow: 0 25px 60px rgba(0,0,0,.12);

    transition: all .45s ease;

}

.about-portrait:hover img{

    transform: translateY(-8px);

    box-shadow: 0 35px 70px rgba(0,0,0,.18);

}

.about-copy{

    padding-left: 1.5rem;

}

.about-copy .eyebrow{

    display: inline-flex;

    align-items: center;

    gap: .65rem;

    margin-bottom: 1rem;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--accent);

}

.about-copy .eyebrow::before{

    content: "";

    width: 42px;

    height: 2px;

    background: var(--accent);

}

.about-copy h2{

    margin-bottom: 1rem;

    font-size: clamp(2rem,3vw,3rem);

    font-weight: 800;

    line-height: 1.15;

    color: var(--heading);

}

.about-copy .ledger-rule{

    margin: 0 0 2rem;

}

.about-copy p{

    margin-bottom: 1.25rem;

    color: var(--text);

    font-size: 1.05rem;

    line-height: 1.9;

}

.about-copy p:last-of-type{

    margin-bottom: 2.2rem;

}

.about-copy .btn-brand{

    display: inline-flex;

    align-items: center;

    gap: .75rem;

}

.about-copy .btn-brand i{

    transition: transform .3s ease;

}

.about-copy .btn-brand:hover i{

    transform: translateX(6px);

}

/*=========================================================
    ABOUT FEATURES
=========================================================*/

.about-highlights{

    margin-top: 2rem;

}

.about-feature{

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.25rem;

}

.about-feature-icon{

    width: 58px;

    height: 58px;

    border-radius: 16px;

    background: rgba(var(--accent-rgb), .10);

    color: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}

.about-feature-content h5{

    margin-bottom: .35rem;

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--heading);

}

.about-feature-content p{

    margin: 0;

    font-size: .96rem;

    line-height: 1.7;

}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:991px){

    .about-copy{

        padding-left: 0;

        margin-top: 2rem;

        text-align: center;

    }

    .about-copy .eyebrow{

        justify-content: center;

    }

    .about-copy .ledger-rule{

        margin-left: auto;

        margin-right: auto;

    }

    .about-portrait{

        max-width: 360px;

    }

}

@media (max-width:767px){

    .about-copy h2{

        font-size: 2rem;

    }

    .about-copy p{

        font-size: 1rem;

        line-height: 1.8;

    }

    .about-portrait{

        max-width: 300px;

    }

}

/*=========================================================
    WHY CHOOSE US
=========================================================*/

.why-choose{

    position: relative;

    overflow: hidden;

    background: linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);

}

.why-choose::before{

    content: "";

    position: absolute;

    top: -180px;

    left: -140px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(var(--accent-rgb),.04);

    pointer-events: none;

}

.why-choose::after{

    content: "";

    position: absolute;

    bottom: -180px;

    right: -140px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(var(--accent-rgb),.03);

    pointer-events: none;

}

.why-choose .container{

    position: relative;

    z-index: 2;

}

/*=========================================================
    LEFT CONTENT
=========================================================*/

.why-choose .eyebrow{

    display: inline-flex;

    align-items: center;

    gap: .75rem;

    margin-bottom: 1rem;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--accent);

}

.why-choose .eyebrow::before{

    content: "";

    width: 42px;

    height: 2px;

    background: var(--accent);

}

.why-choose h2{

    margin-bottom: 1rem;

    font-size: clamp(2rem,3vw,3rem);

    font-weight: 800;

    line-height: 1.15;

    color: var(--heading);

}

.why-choose .ledger-rule{

    margin-bottom: 2rem;

}

.why-choose p{

    margin-bottom: 1.35rem;

    color: var(--text);

    line-height: 1.9;

    font-size: 1.05rem;

}

.why-choose .btn-brand{

    margin-top: .75rem;

}

/*=========================================================
    CARDS
=========================================================*/

.why-card{

    position: relative;

    height: 100%;

    padding: 2.2rem;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid rgba(0,0,0,.06);

    box-shadow: 0 10px 35px rgba(15,23,42,.06);

    transition: all .35s ease;

    overflow: hidden;

}

.why-card::before{

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 0;

    background: var(--accent);

    transition: .35s;

}

.why-card:hover{

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(15,23,42,.12);

}

.why-card:hover::before{

    height: 100%;

}

.why-icon{

    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-dark);
    color: var(--surface);
    font-size: 1.75rem;
    transition: .35s;

}

.why-card:hover .why-icon{

    background: var(--accent);

    color: #ffffff;

    transform: rotate(-8deg) scale(1.08);

}

.why-card h4{

    margin-bottom: .85rem;

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--heading);

    transition: color .3s;

}

.why-card p{

    margin: 0;

    font-size: .97rem;

    line-height: 1.8;

    color: var(--text);

}

/*=========================================================
    STAGGER EFFECT
=========================================================*/

.why-choose .col-md-6:nth-child(even){

    margin-top: 35px;

}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:991px){

    .why-choose{

        text-align: center;

    }

    .why-choose .eyebrow{

        justify-content: center;

    }

    .why-choose .ledger-rule{

        margin-left: auto;

        margin-right: auto;

    }

    .why-choose .btn-brand{

        margin-bottom: 2rem;

    }

    .why-choose .col-md-6:nth-child(even){

        margin-top: 0;

    }

}

@media (max-width:767px){

    .why-card{

        padding: 1.8rem;

    }

    .why-icon{

        width: 64px;

        height: 64px;

        font-size: 1.5rem;

        margin-bottom: 1.2rem;

    }

    .why-card h4{

        font-size: 1.15rem;

    }

    .why-choose h2{

        font-size: 2rem;

    }

}


/*=========================================================
    OUR PROCESS
=========================================================*/

.process{

    position: relative;

    overflow: hidden;

    background: linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);

}

.process::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.04);

    pointer-events:none;

}

.process .container{

    position:relative;

    z-index:2;

}


/*=========================================================
    SECTION HEADING
=========================================================*/

.process .section-description{

    max-width:700px;

    margin:1.5rem auto 0;

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text);

}


/*=========================================================
    PROCESS WRAPPER
=========================================================*/

.process-wrapper{

    position:relative;

    margin-top:4rem;

}

/* Connector Line */

.process-wrapper::before{

    content:"";

    position:absolute;

    top:72px;

    left:12%;

    width:76%;

    height:2px;

    background:linear-gradient(
        90deg,
        rgba(var(--accent-rgb),.15),
        rgba(var(--accent-rgb),.35),
        rgba(var(--accent-rgb),.15)
    );

    z-index:0;

}


/*=========================================================
    PROCESS CARD
=========================================================*/

.process-card{

    position:relative;

    z-index:2;

    height:100%;

    padding:2.5rem 2rem;

    background:#ffffff;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 15px 40px rgba(15,23,42,.06);

    text-align:center;

    transition:all .4s ease;

    overflow:hidden;

}

.process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 60px rgba(15,23,42,.12);

}

.process-card:hover::before{

    transform:scaleX(1);

}


/*=========================================================
    STEP NUMBER
=========================================================*/

.process-number{

    position:absolute;

    top:20px;

    right:24px;

    font-size:3rem;

    font-weight:800;

    color:rgba(0,0,0,.05);

    line-height:1;

    user-select:none;

}


/*=========================================================
    ICON
=========================================================*/

.process-icon{

       width: 90px;
    height: 90px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-dark);
    color: var(--surface);
    font-size: 2rem;
    transition: all .35s ease;
    position: relative;

}

.process-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px dashed rgba(var(--accent-rgb),.20);

    transition:.35s;

}

.process-card:hover .process-icon{

    background:var(--accent);

    color:#ffffff;

    transform:rotate(-10deg) scale(1.08);

}

.process-card:hover .process-icon::before{

    transform:rotate(180deg);

}


/*=========================================================
    TITLE
=========================================================*/

.process-card h4{

    margin-bottom:1rem;

    font-size:1.3rem;

    font-weight:700;

    color:var(--heading);

}


/*=========================================================
    DESCRIPTION
=========================================================*/

.process-card p{

    margin:0;

    color:var(--text);

    line-height:1.8;

    font-size:.97rem;

}


/*=========================================================
    STAGGER EFFECT
=========================================================*/

.process-wrapper .col-lg-3:nth-child(even){

    margin-top:45px;

}


/*=========================================================
    BUTTON
=========================================================*/

.process .btn-brand{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

}

.process .btn-brand i{

    transition:.3s;

}

.process .btn-brand:hover i{

    transform:translateX(6px);

}


/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:991px){

    .process-wrapper::before{

        display:none;

    }

    .process-wrapper .col-lg-3:nth-child(even){

        margin-top:0;

    }

}

@media (max-width:767px){

    .process-card{

        padding:2rem 1.5rem;

    }

    .process-icon{

        width:72px;

        height:72px;

        font-size:1.6rem;

    }

    .process-number{

        font-size:2.3rem;

    }

    .process-card h4{

        font-size:1.15rem;

    }

}


/*=========================================================
    CONTACT SECTION
=========================================================*/

.contact-section{

    position:relative;

    overflow:hidden;

    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);

}

.contact-section::before{

    content:"";

    position:absolute;

    top:-200px;

    right:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.04);

    pointer-events:none;

}

.contact-section::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.03);

    pointer-events:none;

}

.contact-section .container{

    position:relative;

    z-index:2;

}


/*=========================================================
    INFO CARD
=========================================================*/

.contact-info-card{

    height:100%;

    padding:2.5rem;

    background:#ffffff;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 20px 50px rgba(15,23,42,.08);

    transition:.35s;

}

.contact-info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(15,23,42,.12);

}

.contact-info-card h3{

    margin-bottom:1rem;

    font-size:1.75rem;

    font-weight:700;

    color:var(--heading);

}

.contact-info-card>p{

    margin-bottom:2rem;

    line-height:1.8;

    color:var(--text);

}


/*=========================================================
    CONTACT ITEMS
=========================================================*/

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    padding:1.25rem 0;

    border-bottom:1px solid rgba(0,0,0,.06);

}

.contact-info-item:last-child{

    border:none;

    padding-bottom:0;

}

.contact-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(var(--accent-rgb),.10);

    color:var(--accent);

    font-size:1.25rem;

    transition:.35s;

}

.contact-info-item:hover .contact-icon{

    background:var(--accent);

    color:#fff;

    transform:rotate(-8deg);

}

.contact-info-item span{

    display:block;

    margin-bottom:.35rem;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:var(--accent);

}

.contact-info-item a{

    color:var(--heading);

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.contact-info-item a:hover{

    color:var(--accent);

}

.contact-info-item p{

    margin:0;

    line-height:1.7;

}


/*=========================================================
    SOCIAL
=========================================================*/

.contact-social{

    display:flex;

    gap:1rem;

    margin-top:2rem;

}

.contact-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#f6f8fb;

    color:var(--heading);

    transition:.35s;

}

.contact-social a:hover{

    background:var(--accent);

    color:#fff;

    transform:translateY(-4px);

}


/*=========================================================
    FORM CARD
=========================================================*/

.contact-form-card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 2.75rem;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.contact-form-card h3{

    margin-bottom:.75rem;

    font-size:1.75rem;

    font-weight:700;

    color:var(--heading);

}

.contact-form-card>p{

    margin-bottom:2rem;

    color:var(--text);

    line-height:1.8;

}


/*=========================================================
    FORM
=========================================================*/

.contact-form-card label{

    display:block;

    margin-bottom:.6rem;

    font-size:.88rem;

    font-weight:600;

    color:var(--heading);

}

.contact-form-card .form-control{

    min-height:58px;

    border:1px solid #dbe3ea;

    border-radius:16px;

    padding:0 1.25rem;

    font-size:1rem;

    background:#fff;

    transition:.3s;

    box-shadow:none;

}

.contact-form-card textarea.form-control{

    min-height:170px;

    padding:1rem 1.25rem;

    resize:none;

}

.contact-form-card .form-control:focus{

    border-color:var(--accent);

    box-shadow:0 0 0 5px rgba(var(--accent-rgb),.10);

}

.contact-form-card .form-control::placeholder{

    color:#9aa5b1;

}


/*=========================================================
    BUTTON
=========================================================*/

.contact-form-card .btn-brand{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

}

.contact-form-card .btn-brand i{

    transition:.3s;

}

.contact-form-card .btn-brand:hover i{

    transform:translateX(6px);

}


/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:991px){

    .contact-info-card{

        margin-bottom:2rem;

    }

}

@media(max-width:767px){

    .contact-info-card,

    .contact-form-card{

        padding:2rem;

        border-radius:20px;

    }

    .contact-info-item{

        gap:.85rem;

    }

    .contact-icon{

        width:50px;

        height:50px;

        font-size:1.1rem;

    }

    .contact-form-card .form-control{

        min-height:54px;

    }

}

/*=========================================================
    BUSINESS HOURS
=========================================================*/

.business-hours{

    position:relative;

    overflow:hidden;

    background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);

}

.business-hours::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-150px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.04);

    pointer-events:none;

}

.business-hours::after{

    content:"";

    position:absolute;

    bottom:-180px;

    right:-150px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(var(--accent-rgb),.03);

    pointer-events:none;

}

.business-hours .container{

    position:relative;

    z-index:2;

}


/*=========================================================
    LEFT CONTENT
=========================================================*/

.business-hours .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    margin-bottom:1rem;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.85rem;

    font-weight:700;

}

.business-hours .eyebrow::before{

    content:"";

    width:42px;

    height:2px;

    background:var(--accent);

}

.business-hours h2{

    margin-bottom:1rem;

    font-size:clamp(2rem,3vw,3rem);

    font-weight:800;

    line-height:1.15;

    color:var(--heading);

}

.business-hours p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:1.5rem;

}

.business-hours .btn-brand{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

}

.business-hours .btn-brand i{

    transition:.3s;

}

.business-hours .btn-brand:hover i{

    transform:translateX(6px);

}


/*=========================================================
    HOURS CARD
=========================================================*/

.business-hours-card{

    padding:2.75rem;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 20px 60px rgba(15,23,42,.08);

    transition:.35s;

}

.business-hours-card:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 80px rgba(15,23,42,.12);

}


/*=========================================================
    HEADER
=========================================================*/

.hours-header{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:2rem;

}

.hours-header i{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    color:#fff;

    background:var(--accent);

    box-shadow:0 12px 25px rgba(var(--accent-rgb),.25);

}

.hours-header h3{

    margin:0;

    font-size:1.8rem;

    font-weight:700;

    color:var(--heading);

}


/*=========================================================
    HOURS LIST
=========================================================*/

.hours-list{

    margin-bottom:2rem;

}

.hours-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 0;

    border-bottom:1px solid rgba(0,0,0,.06);

    transition:.3s;

}

.hours-row:last-child{

    border-bottom:none;

}

.hours-row:hover{

    padding-left:.75rem;

}

.hours-row span{

    font-weight:600;

    color:var(--heading);

}

.hours-row strong{

    font-weight:700;

    color:var(--accent);

}

.hours-row strong.text-danger{

    color:#dc3545 !important;

}


/*=========================================================
    NOTE
=========================================================*/

.hours-note{

    display:flex;

    align-items:flex-start;

    gap:1.2rem;

    padding:1.5rem;

    border-radius:20px;

    background:rgba(var(--accent-rgb),.06);

    border-left:5px solid var(--accent);

}

.hours-note-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--accent);

    color:#fff;

    font-size:1.4rem;

}

.hours-note h5{

    margin-bottom:.5rem;

    font-size:1.15rem;

    font-weight:700;

    color:var(--heading);

}

.hours-note p{

    margin:0;

    line-height:1.8;

}


/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:991px){

    .business-hours{

        text-align:center;

    }

    .business-hours .eyebrow{

        justify-content:center;

    }

    .business-hours .ledger-rule{

        margin-left:auto;

        margin-right:auto;

    }

    .business-hours .btn-brand{

        margin-bottom:2rem;

    }

    .hours-header{

        justify-content:center;

    }

}

@media(max-width:767px){

    .business-hours-card{

        padding:2rem;

        border-radius:22px;

    }

    .hours-header{

        flex-direction:column;

        text-align:center;

    }

    .hours-header i{

        width:60px;

        height:60px;

        font-size:1.5rem;

    }

    .hours-row{

        flex-direction:column;

        gap:.4rem;

        text-align:center;

    }

    .hours-note{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

}


/*=========================================================
SERVICE BENEFITS
=========================================================*/

.service-benefits{
    position:relative;
    background:#faf9f6;
    overflow:hidden;
}

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

/*=========================================================
SECTION HEADER
=========================================================*/

.service-benefits .section-head{
    max-width:850px;
    margin:0 auto 80px;
}

.service-benefits .section-head h2{
    margin:18px 0 20px;
}

.service-benefits .section-description{
    max-width:760px;
    margin:auto;
    color:#6f6f6f;
    font-size:17px;
    line-height:1.9;
}

/*=========================================================
GRID
=========================================================*/

.service-benefits .row{
    row-gap:30px;
}

/*=========================================================
CARD
=========================================================*/

.benefit-card{

    position:relative;

    background:#fff;

    height:100%;

    padding:42px;

    border-radius:16px;

    border:1px solid #ece8df;

    transition:all .35s ease;

    overflow:hidden;

}

.benefit-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:var(--primary-color);

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:rgba(198,150,74,.35);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.benefit-card:hover::before{

    transform:scaleY(1);

}

/*=========================================================
ICON
=========================================================*/

.benefit-icon{

    width:70px;

    height:70px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(198,150,74,.08);

    margin-bottom:28px;

    transition:.35s;

}

.benefit-icon i{

    color:var(--primary-color);

    font-size:28px;

    transition:.35s;

}

.benefit-card:hover .benefit-icon{

    background:var(--primary-color);

}

.benefit-card:hover .benefit-icon i{

    color:#fff;

}

/*=========================================================
TITLE
=========================================================*/

.benefit-card h4{

    font-size:22px;

    font-weight:700;

    line-height:1.35;

    color:var(--heading-color);

    margin-bottom:16px;

    transition:.3s;

}

.benefit-card:hover h4{

    color:var(--primary-color);

}

/*=========================================================
TEXT
=========================================================*/

.benefit-card p{

    margin:0;

    color:#6c6c6c;

    line-height:1.8;

    font-size:15.8px;

}

/*=========================================================
BUTTON
=========================================================*/

.service-benefits .text-center{

    margin-top:70px !important;

}

.service-benefits .btn-brand{

    min-width:260px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:991px){

.service-benefits .section-head{

    margin-bottom:55px;

}

.benefit-card{

    padding:34px;

}

}

@media (max-width:767px){

.service-benefits .section-head{

    margin-bottom:45px;

}

.benefit-card{

    padding:28px;

}

.benefit-icon{

    width:60px;

    height:60px;

    margin-bottom:22px;

}

.benefit-icon i{

    font-size:24px;

}

.benefit-card h4{

    font-size:20px;

}

}



/*=========================================================
SERVICE OVERVIEW
=========================================================*/

.service-overview{

    position:relative;

    background:#fff;

    overflow:hidden;

}

.service-overview .row{

    align-items:center;

}

/*=========================================================
IMAGE
=========================================================*/

.service-overview-image{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    background:#f7f7f7;

    min-height:560px;

    box-shadow:0 18px 50px rgba(0,0,0,.08);

}

.service-overview-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.service-overview-image:hover img{

    transform:scale(1.05);

}

/*=========================================================
CONTENT
=========================================================*/

.service-overview h2{

    margin:18px 0 20px;

    max-width:700px;

}

.service-overview p{

    color:#6a6a6a;

    font-size:16px;

    line-height:1.9;

    margin-bottom:22px;

}

.service-overview p:last-child{

    margin-bottom:0;

}

/*=========================================================
FEATURES
=========================================================*/

.service-features{

    margin-top:45px !important;

}

.service-feature{

    display:flex;

    align-items:flex-start;

    gap:16px;

    height:100%;

    padding:18px 22px;

    background:#faf9f6;

    border:1px solid #ebe6dc;

    border-radius:14px;

    transition:.35s ease;

}

.service-feature:hover{

    border-color:rgba(198,150,74,.35);

    background:#fff;

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.service-feature i{

    flex-shrink:0;

    font-size:18px;

    color:var(--primary-color);

    margin-top:3px;

}

.service-feature span{

    color:var(--heading-color);

    font-size:15px;

    font-weight:600;

    line-height:1.6;

}

/*=========================================================
CTA
=========================================================*/

.service-overview-action{

    margin-top:50px !important;

}

.service-overview-action .btn-brand{

    min-width:260px;

}

/*=========================================================
DECORATIVE ACCENT
=========================================================*/

.service-overview-image::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,.15);

    border-radius:20px;

    pointer-events:none;

}

.service-overview-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-60px;

    bottom:-60px;

    background:rgba(198,150,74,.08);

    border-radius:50%;

    z-index:2;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:991px){

.service-overview-image{

    min-height:420px;

    margin-bottom:45px;

}

.service-overview h2{

    max-width:100%;

}

}

@media (max-width:767px){

.service-overview-image{

    min-height:320px;

    border-radius:16px;

}

.service-feature{

    padding:16px 18px;

}

.service-feature span{

    font-size:14px;

}

.service-overview-action{

    text-align:center;

}

.service-overview-action .btn-brand{

    width:100%;

}

}


/*=========================================================
FAQ SECTION
=========================================================*/

.faq-section{

    position:relative;

    background:#faf9f6;

    overflow:hidden;

}

.faq-section .container{

    position:relative;

    z-index:2;

}

/*=========================================================
LEFT CONTENT
=========================================================*/

.faq-section h2{

    margin:18px 0 20px;

}

.faq-section p{

    color:#6b6b6b;

    font-size:16px;

    line-height:1.9;

    margin-bottom:0;

}

.faq-section .hero-cta{

    margin-top:40px;

}

/*=========================================================
ACCORDION
=========================================================*/

.custom-accordion{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.custom-accordion .accordion-item{

    border:none;

    border-radius:16px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.35s ease;

}

.custom-accordion .accordion-item:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

/*=========================================================
HEADER
=========================================================*/

.custom-accordion .accordion-header{

    margin:0;

}

.custom-accordion .accordion-button{

    background:#fff;

    color:var(--heading-color);

    font-size:17px;

    font-weight:700;

    line-height:1.6;

    padding:24px 70px 24px 28px;

    box-shadow:none;

    border:none;

    position:relative;

    transition:.3s;

}

.custom-accordion .accordion-button:hover{

    color:var(--primary-color);

}

.custom-accordion .accordion-button:not(.collapsed){

    background:#fff;

    color:var(--primary-color);

    box-shadow:none;

}

/*=========================================================
PLUS / MINUS ICON
=========================================================*/

.custom-accordion .accordion-button::after{

    width:42px;

    height:42px;

    border-radius:50%;

    background:none;

    display:flex;

    align-items:center;

    justify-content:center;

    content:"+";

    font-size:26px;

    font-weight:300;

    color:var(--primary-color);

    border:1px solid rgba(198,150,74,.25);

    position:absolute;

    right:22px;

    transition:.35s ease;

    transform:none;

}

.custom-accordion .accordion-button:not(.collapsed)::after{

    content:"−";

    background:var(--primary-color);

    color:#fff;

    border-color:var(--primary-color);

}

/*=========================================================
BODY
=========================================================*/

.custom-accordion .accordion-body{

    padding:0 28px 28px;

    color:#666;

    font-size:15.8px;

    line-height:1.9;

    border-top:1px solid #f1ede5;

}

/*=========================================================
ACTIVE ITEM
=========================================================*/

.custom-accordion .accordion-item:has(.accordion-button:not(.collapsed)){

    border-left:4px solid var(--primary-color);

}

/*=========================================================
CTA BUTTON
=========================================================*/

.faq-section .btn-brand{

    min-width:250px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:991px){

.faq-section .col-lg-5{

    margin-bottom:20px;

}

.custom-accordion .accordion-button{

    padding:20px 60px 20px 22px;

    font-size:16px;

}

.custom-accordion .accordion-body{

    padding:0 22px 22px;

}

}

@media (max-width:767px){

.custom-accordion{

    gap:14px;

}

.custom-accordion .accordion-button{

    font-size:15px;

    padding:18px 55px 18px 18px;

}

.custom-accordion .accordion-body{

    padding:0 18px 18px;

    font-size:15px;

}

.custom-accordion .accordion-button::after{

    width:36px;

    height:36px;

    right:15px;

    font-size:22px;

}

.faq-section .hero-cta{

    text-align:center;

}

.faq-section .btn-brand{

    width:100%;

}

}