/*
GLOBAL VARIABLES
*/

:root {
  /* =================================================
   BRAND COLORS
  ================================================= */
  --surface-brand: #def2f4;
  --color-brand-primary: #2a999b;
  --color-brand-secondary: #2a999b;
  --color-brand-soft: #def2f4;
  --color-brand-accent: #3d3d3d;
  --color-text-primary: #000000;
  --color-text-secondary: #1a1a1a;
  --color-text-accent1: #636469;
  --color-text-accent2: #ffffff;
  --color-text-subtle: #151515;
  --color-text-inverse: #ffffff;
  --color-text-base: #4e4e4e;
  --color-text-nav: #ffffff;
  --color-text-nav-interior: #4e4e4e;
  --color-text-nav-overlay: #4e4e4e;
  --color-text-ui: #fbf3f3;
  --color-header-bg: rgb(40 40 40 / 90%);
  --color-bg-page1: #ffffff;
  --color-bg-page2: #ffffff;
  --color-bg-footer1: #fafafa;
  --color-bg-footer2: #232323;
  --color-bg-footer3: #3d3d3d;
  --color-carousel-overlay: linear-gradient(rgb(2 2 2 / 25%) 0%, rgb(0 0 0 / 13%) 40% 40%, rgb(0 0 0 / 14%) 100%);

  /* =================================================
   GRAPHIC DEFAULTS — MOBILE
  ================================================= */
  --bg-pos-x-mobile: right;
  --bg-pos-y-mobile: 0px;
  --bg-size-mobile: 100%;
  --bg-height-mobile: 2400px;
  --bg-opacity-mobile: .1;
  --bg-top-mobile: 0px;
  --bg-transform-mobile: scaleX(1);

  /* =================================================
   GRAPHIC DEFAULTS — DESKTOP
  ================================================= */
  --bg-pos-x-desktop: 0px;
  --bg-pos-y-desktop: 0px;
  --bg-size-desktop: 30%;
  --bg-height-desktop: 1245px;
  --bg-opacity-desktop: .05;
  --bg-top-desktop: 0px;
  --bg-transform-desktop: scaleX(1);

  /* =================================================
   HERO
  ================================================= */
  --carousel-bg-image: url("/img/upload/hero.webp");
}


/*==================================================================================*/
/* Bg Images */
/*==================================================================================*/

.sb-bg-image1-row {
  background-image: none;
}

.sb-bg-image2-row {
  background-image: url(/img/upload/000_custom_image88.jpg);
}

.sb-bg-image3-row {
  background-image: none;
}
     
.sb-bg-graphic1-row.sb-wrap:after {
  background-image: url(/img/upload/clarkdental_bg_img1.png);
}

.sb-bg-graphic2-row.sb-wrap:after {
  background-image: url(/img/upload/clarkdental_bg_img1.png);
}

#page-home .sb-feature-gallery-row,
#page-home .sb-gallery-row  {
  background: rgb(0 0 0 / 0%);
}

#page-home .carousel-inner .item::after {
  background-image: none;
}


/*==================================================================================*/
/* Bg Overlays */
/*==================================================================================*/

.sb-bg-image1-row:before {
  background: rgb(255 255 255 / 0%);
  /* background: linear-gradient(270deg, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 0%) 100%); */
}

@media (min-width: 949px) { 
.sb-bg-image1-row:before {
  background: rgb(255 255 255 / 0%);
  /* background: linear-gradient(346deg, rgb(112 32 102) 8%, rgb(0 0 0 / 0%) 45%); */
  }
}

.sb-bg-image2-row:before {
  background: rgb(255 255 255 / 0%);
  /* background: linear-gradient(270deg, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 0%) 100%); */
}

@media (min-width: 949px) { 
.sb-bg-image2-row:before {
  background: rgb(255 255 255 / 0%);
  /* background: linear-gradient(346deg, rgb(112 32 102) 8%, rgb(0 0 0 / 0%) 45%); */
  }
}

.sb-bg-image3-row:before {
  background: rgb(255 255 255 / 0%);
  /* background: linear-gradient(270deg, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 0%) 100%); */
}

@media (min-width: 949px) { 
.sb-bg-image3-row:before {
  background: rgb(255 255 255 / 0%);
  /* background: linear-gradient(346deg, rgb(112 32 102) 8%, rgb(0 0 0 / 0%) 45%); */
  }
}

/*==================================================================================*/
/* SET FONT FAMILY */
/*==================================================================================*/

/* Headings / Special Elements */
h1, h2, h4, h5, h6,
.content h1,
.content h2,
.content h4,
.content h5,
.content h6,
.logo #logotext,
.gallery-header,
.locations_list,
.header .nav,
.header .nav a,
.toolbar #logotext {
  font-family: "Perfect Harmony", serif;
}

body {
  --header-logo-height-desktop: 115px;
  --header-logo-height: 40px;
}

.site-header .site-nav > .nav-list > .nav-item > a {
font-weight: 600;
letter-spacing: 0px;
font-size: 14px;
padding: 0px 0px;
text-transform: capitalize;
}

a.btn,
.btn,
.carousel a {
border-radius: 50px;
font-weight: 600!important;
text-transform: capitalize!important;
}

/* Default: hide all CTAs */

.site-header .site-header__cta .btn-ph {
display: none!important;
}

.site-header__top::before {
background: rgb(0 0 0 / 75%);
}


/* oneoff carousel graphic */
#page-home .carousel-inner .item::after {
width: 100%;
height: 100%;
}

/* =========================================================
HERO WAVE OVERLAY (BRAND BLUE FLOW)
========================================================= */

#page-home .carousel-inner .item::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;

background-repeat: repeat-x;
background-position: center bottom;
background-size: 120% auto;

opacity: 1;

animation: waveFlow 28s linear infinite;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='none'%3E%3Cpath d='M0 170 C160 145 300 145 465 182 C615 214 770 265 930 247 C1100 228 1230 155 1390 156 C1480 156 1545 166 1600 180 L1600 360 L0 360 Z' fill='%2391dce7' fill-opacity='.15'/%3E%3Cpath d='M0 188 C150 170 310 170 470 204 C640 240 810 280 985 266 C1140 254 1288 197 1450 194 C1510 193 1562 197 1600 202' fill='none' stroke='%235bb7c5' stroke-opacity='.25' stroke-width='2'/%3E%3C/svg%3E");
}

/* =========================================================
WAVE ANIMATION
========================================================= */

@keyframes waveFlow {
0%   { background-position: 0% 100%; }
50%  { background-position: 50% 98%; }
100% { background-position: 100% 100%; }
}

@media (min-width: 949px) {
.carousel .item-content h2 {
font-size: 68px;
line-height: 77px;
}
}


/* =========================================================
H1 ACCENT — LOGO STYLE WAVE (POINTED + GRADIENT)
========================================================= */

.content-intro h1::after,
.content h1::after {
content: "";
display: block;
position: relative;
top: 20px;

width: min(180px, 10%);
height: 15px;

margin: 0 0 40px 0;


/* gradient like logo */
background: linear-gradient(90deg, #5bd6c4 0%, #2bb0c9 100%);

/* SVG mask (pointy ends now) */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C60 0 120 12 180 6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C60 0 120 12 180 6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.accent--lite3 {
background: linear-gradient( 135deg, var(--color-brand-soft) 0%, color-mix(in srgb, var(--color-brand-soft) 60%, white) 50%, #ffffff 100% );
}

@media (min-width: 949px) {
.carousel .item-content h2 {
font-size: 110px;
line-height: 110px;
}
}
 
.sb-footer.default {
background-image: linear-gradient(rgb(43 147 153 / 74%), #2a999b), url(/img/upload/markbabbitt_practice_logo.webp);
background-color: #2a999b;
background-position: 1000px 200px!important;
}