/* --- CUSTOM OVERRIDES FOR SERVICES SPOTLIGHT SECTION --- */

/* Adjust spotlight layout spacing + rebalance columns */
.spotlight .image {
    flex: 0 0 45% !important;        /* slightly smaller image */
    max-width: 45% !important;
    margin: 0 2.5rem 0 0 !important; /* reduce big gap left/right */
}

/* Keep text more centered vertically */
.spotlight .content {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Add modern clean polish to images */
.spotlight .image img {
    border-radius: 12px;             /* modern soft-rounded corners */
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);  /* soft clean shadow */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Optional: professional-feel hover lift */
.spotlight:hover .image img {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.16);
}

/* Make sure spacing looks good on tablets/laptops too */
@media screen and (max-width: 980px) {
    .spotlight .image,
    .spotlight .content {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 2rem 0 !important;
    }
}
/* --- ABOUT SECTION IMAGE POLISH (B-1 Subtle Featured) --- */
#two.wrapper.style2 img {
    border-radius: 14px;                 /* slightly softer than services */
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);  /* gentle soft highlight */
    max-width: 280px !important;         /* slightly more refined sizing */
    display: block;
    margin: 1.5em auto 2em auto !important;  /* nicely centered spacing */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#two.wrapper.style2 img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* Services spacing & width tuning (SP2 + W2 + S-A) */
#two.wrapper.alt.style2 .spotlight {
    margin-bottom: 3.25rem;   /* extra breathing room between blocks */
}

#two.wrapper.alt.style2 .spotlight .content {
    max-width: 620px;         /* gentle width expansion */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

#two .tagline.center,
#two .closing.center {
    text-align: center;
}

#two .soft-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.25);
    width: 40%;
    margin: 3rem auto 2rem auto;
}

#two .closing {
    font-size: 1.05em;
    opacity: 0.95;
    margin-top: 1.5rem;
    max-width: 700px;
}
/* Spotlight image + content refinements (C2 + IMG-S2 + RS1) */
#two.wrapper.alt.style2 .spotlight .image img {
    max-width: 340px;      /* medium size */
    height: auto;
}

#two.wrapper.alt.style2 .spotlight .image {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
}

#two.wrapper.alt.style2 .spotlight .content {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

#two.wrapper.alt.style2 .spotlight {
    align-items: center;
}
/* Center the About heading only */
.wrapper.style2 > .inner > header h2 {
    text-align: center;
    width: 100%;
}
/* Center + resize closing statement with higher specificity */
.wrapper.alt.style2 .closing {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 65%;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
/* Reduce height of the entire Services section wrapper */
#one.wrapper.style1.special {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
/* ==========================
   CONSULTATION SECTION STYLES
   ========================== */

/* White background for Calendly section */
#consultation {
    background: #ffffff;
    padding: 3rem 0 3rem 0;
}

/* Center alignment for heading */
#consultation .inner header.major {
    text-align: center;
    margin-bottom: 2rem;
}

/* Supporting sentence styling */
#consultation .supporting {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

/* Thin elegant divider (D2) */
#consultation .divider {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.15);
    margin: 0 0 2rem 0;
}

/* Mobile-safe Calendly container */
#consultation .calendly-inline-widget {
    max-width: 900px;
    margin: 0 auto;
    display: block;
}
#consultation .supporting {
    color: #444 !important;
    opacity: 0.9 !important;
}
#consultation header.major h2 {
    color: #333 !important;
    opacity: 1 !important;
}
#consultation header.major {
    text-align: center !important;
    margin-bottom: 2rem !important;
}
#consultation .calendly-inline-widget {
    max-width: 900px;
    margin: 0 auto !important;
    border-radius: 8px;
}
/* Adjust spacing for consultation section */
#consultation {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
}

/* Reduce excessive top gap from header */
#consultation header.major {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#consultation .divider {
    margin-bottom: 1.5rem !important;
}

/* Force footer icons to match home page style everywhere */
#footer .icons li a {
	border: none !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
	font-size: 1.25em !important;
}

#footer .icons li {
	padding: 0 0.75em;
}

/* Make ProAdvisor badge behave like other footer icons */
#footer .icons li.proadvisor img {
	height: 32px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -2px;
}

/* About page photo row */
.about-photos {
	display: flex;
	gap: 1.5em;
	justify-content: center;
	margin-top: 3em;
	flex-wrap: wrap;
}

.about-photos img {
	width: 100%;
	max-width: 320px;
	border-radius: 12px;
}

/* Fix mobile header overlapping page titles */
@media screen and (max-width: 736px) {
	#main {
		padding-top: 4.5em;
	}
}