/* ==========================================================================
   Shared utilities — buttons + section primitives
   --------------------------------------------------------------------------
   Loaded first (alphabetically) inside /assets/css/blocks/. Provides .btn
   classes that the section CSS files compose on top of.
   ========================================================================== */

:root {
	/* Brand color tokens (extend the base tokens) ----------------------- */
	--clr-white:         #FFFFFF;
	--clr-light-gray:    #DDDDDD;
	--clr-primary:       #078FD6;
	--clr-black:         #000000;
	--clr-dark:          #272727;
	--clr-primary-light: #55AAE0;
	--clr-primary-dark:  #005CAB;

	/* Typography (override base) ------------------------------------- */
	--font-heading: "Marcellus", "Times New Roman", serif;

	/* Type scale ----------------------------------------------------- */
	--fs-sm:   14px;
	--fs-body: 18px;
	--fs-lg:   22px;
	--fs-h3:   28px;
	--fs-h2:   50px;
	--fs-h1:   75px;

	/* Spacing scale -------------------------------------------------- */
	--sp-xs:  10px;
	--sp-sm:  15px;
	--sp-md:  20px;
	--sp-lg:  30px;
	--sp-xl:  50px;
	--sp-2xl: 120px;
	--sp-3xl: 240px;
}

/* Buttons ----------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-xs);
	padding: 23.5px 35px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-white);
	background: var(--clr-primary);
	text-decoration: none;
	transition: all 0.3s ease;
	line-height: 1;
}

.btn:hover,
.btn:focus-visible {
	background: var(--clr-primary-dark);
	color: var(--clr-white);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
	outline: none;
}

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

.btn--dark {
	background: var(--clr-black);
	color: var(--clr-white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
	background: var(--clr-dark);
}

/* Common container — 1470px max with 15px horizontal padding.
   Applied to every section's __inner element and to the header/footer __inner.
   Kept as a single shared rule so every block stays in lock-step.            */
.container,
.sec-hero-banner__inner,
.sec-split-banner__inner,
.sec-doctor-intro__inner,
.sec-services-overview__inner,
.sec-awards-badges__inner,
.sec-services-grid__inner,
.sec-videos-grid__inner,
.sec-before-after__inner,
.sec-testimonials-slider__inner,
.sec-team-members__inner,
.sec-contact-form__inner,
.sec-simple-text__inner,
.site-header__top-inner,
.site-header__nav-inner,
.site-footer__inner,
.site-footer__bottom-inner {
	max-width: 1470px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	box-sizing: border-box;
}

/* Back-compat alias for any legacy markup that still uses .sec-container.   */
.sec-container {
	max-width: 1470px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

/* Headings inside blocks share the display font ----------------------- */
.sec-hero-banner__heading,
.sec-doctor-intro__heading,
.sec-services-overview__heading,
.sec-awards-badges__heading,
.sec-services-grid__heading,
.sec-videos-grid__heading,
.sec-before-after__heading,
.sec-testimonials-slider__heading,
.sec-team-members__heading,
.sec-contact-form__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	margin: 0;
}

/* Eyebrow label (small uppercase tag-line above h2) ------------------ */
.sec-doctor-intro__eyebrow,
.sec-services-grid__eyebrow,
.sec-videos-grid__eyebrow,
.sec-testimonials-slider__eyebrow,
.sec-team-members__eyebrow,
.sec-contact-form__eyebrow,
.sec-hero-banner__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-primary);
}
.eyebrow-image {
    position: relative;
    padding-top: 24px;
    padding-left: 42px;
}

.eyebrow-image:before {
    position: absolute;
    width: 39px;
    height: 43px;
    background-image: url(/wp-content/uploads/2026/05/dental-Vector.png);
    top: 0;
    left: 0;
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
span.sec-services-grid__eyebrow:before,span.sec-team-members__eyebrow:before {
    filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(15%) hue-rotate(246deg) brightness(105%) contrast(105%);
}
.sec-simple-text__inner iframe {
    aspect-ratio: 16/9;
    height: 100%;
}
.pd-top {
	padding-top: 0 !important ;
}
.pd-bottom {
	padding-bottom: 0 !important ;
}
.sec-doctor-intro__inner ul li,.sec-simple-text ul li,.sec-team-details__bio ul li{
    display: flex;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
}
.sec-doctor-intro__inner li,.sec-simple-text ul li,.sec-team-details__bio ul li { 
position: relative;
    padding-left: 28px;
}
.sec-doctor-intro__inner li:before,.sec-simple-text ul li:before,.sec-team-details__bio ul li:before {
    content: '';
    height: 18px;
    width: 18px;
    background-image: url(/wp-content/uploads/2026/05/bullet-list-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
        position: absolute;
    left: 0;
    top: 4px;
}
.sec-doctor-intro__inner ul,.sec-simple-text ul,.sec-team-details__bio ul {
    margin: 0;
    margin-bottom: 15px;
}
@media (max-width: 1800px) { 
:root { 
--fs-h1:   70px;
}
}
@media (max-width: 1600px) { 
	:root {
--fs-h1:   65px;
	}
}
@media (max-width: 1440px) { 

:root {

	/* Type scale ----------------------------------------------------- */
	--fs-sm:   14px;
	--fs-body: 16px;
	--fs-lg:   20px;
	--fs-h3:   26px;
	--fs-h2:   45px;
	--fs-h1:   60px;
}

}
@media (max-width: 1366px) { 

:root {

	/* Type scale ----------------------------------------------------- */
	--fs-sm:   14px;
	--fs-body: 16px;
	--fs-lg:   20px;
	--fs-h3:   24px;
	--fs-h2:   40px;
	--fs-h1:   60px;
}

}
@media (max-width: 1200px) { 

:root {

	/* Type scale ----------------------------------------------------- */
	--fs-sm:   14px;
	--fs-body: 16px;
	--fs-lg:   18px;
	--fs-h3:   22px;
	--fs-h2:   35px;
	--fs-h1:   55px;
}

}
@media (max-width: 1024px) { 

:root {

	/* Type scale ----------------------------------------------------- */
	--fs-sm:   14px;
	--fs-body: 16px;
	--fs-lg:   18px;
	--fs-h3:   20px;
	--fs-h2:   30px;
	--fs-h1:   40px;
}
.btn {
    padding: 18px 25px;
    font-size: 15px;

}
}
@media (max-width: 767px) { 

:root {

	/* Type scale ----------------------------------------------------- */
	--fs-sm:   14px;
	--fs-body: 16px;
	--fs-lg:   18px;
	--fs-h3:   20px;
	--fs-h2:   28px;
	--fs-h1:   35px;
}
.alignleft {
        float: none !important;
		margin: 0 auto !important;
    }
.btn {
    padding: 15px 20px;
    font-size: 14px;

}
}
nav#pojo-a11y-toolbar {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
}
#pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open {
    right: -18px;
}
#pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    right: -163px;
}