/*
GLOBAL VARIABLES
*/

:root {
  /* =================================================
   BRAND COLORS
  ================================================= */
  --surface-brand: rgb(239 239 239);
  --color-brand-primary: #0c255c;
  --color-brand-secondary: #f7ead5;
  --color-brand-soft: #f1f1f1;
  --color-brand-accent: #faf3e3;
  --color-text-primary: #070707;
  --color-text-secondary: #1a1a1a;
  --color-text-accent1: #2f2f2f;
  --color-text-accent2: #ffffff;
  --color-text-subtle: #484848;
  --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: #0c255d;
  --color-bg-page1: #f8f8f8;
  --color-bg-page2: #ffffff;
  --color-bg-footer1: #f1f1f1;
  --color-bg-footer2: #232323;
  --color-bg-footer3: #f7e9d5;
  --color-carousel-overlay: linear-gradient(
    rgb(0 0 0 / 40%) 0%,
    rgb(0 0 0 / 40%) 40%,
    rgb(0 0 0 / 40%) 100%
);

  /* =================================================
   GRAPHIC DEFAULTS — MOBILE
  ================================================= */
  --bg-pos-x-mobile: right;
  --bg-pos-y-mobile: 0px;
  --bg-size-mobile: 200%;
  --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: 20%;
  --bg-height-desktop: 1200px;
  --bg-opacity-desktop: 1;
  --bg-top-desktop: 60px;
  --bg-transform-desktop: scaleX(1);

  
  /* =================================================
   HERO
  ================================================= */
  --carousel-bg-image: url("/img/upload/japantowndental_image_slider1.jpg");
  }
  
  
  /*==================================================================================*/
  /* Bg Images */
  /*==================================================================================*/
  
  .sb-bg-image1-row {
  background-image: url(/img/upload/module_stock_bg1_6.jpg)!important;
  }
  
  .sb-bg-image2-row {
  background-image: url(/img/upload/japantown-dental-secondary.jpg)!important;
  }
  
  .sb-bg-image3-row {
  background-image: url(/img/upload/japantowndental_image_bg3.jpg);
  }
     
  .sb-bg-graphic1-row.sb-wrap:after {
  background-image: url(/img/upload/japantowndental_custom_image3.png)!important;
  }
  
  .sb-bg-graphic2-row.sb-wrap:after {
  background-image: url(/img/upload/japantowndental_custom_image3.png)!important;
  }
  
  #page-home .sb-feature-gallery-row,
  #page-home .sb-gallery-row  {
  background: #f4faff;
  }
  
  #page-home .carousel-inner .item::after {
  background-image: none;
  }
  
  
  /*==================================================================================*/
  /* Bg Overlays */
  /*==================================================================================*/
  
  .sb-bg-image1-row:before {
   background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(21 42 86) 100%);
  }
  
  @media (min-width: 949px) { 
  .sb-bg-image1-row:before {
  background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(21 42 86) 100%);
  }
  }
  
  .sb-bg-image2-row:before {
  background: rgb(62 43 69 / 15%);
  }
  
  @media (min-width: 949px) { 
  .sb-bg-image2-row:before {
  background: linear-gradient(90deg, rgb(222 183 125 / 62%) 0%, rgb(0 0 0 / 41%) 100%);
  }
  }
  
  .sb-bg-image3-row:before {
  background: rgb(42 28 48 / 10%);
  }
  
  @media (min-width: 949px) { 
  .sb-bg-image3-row:before {
  background: linear-gradient(90deg, rgb(42 28 48 / 35%) 0%, rgb(42 28 48 / 0%) 100%);
  }
  }
  
  /*==================================================================================*/
  /* 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', sans-serif;
  }
  
  body {
  --header-logo-height-desktop: 90px;
  --header-logo-height: 60px;
  }
  
  html.snapped body {
  --header-logo-height-desktop: 75px;
  --header-logo-height: 60px;
  }
  
  .site-header .site-nav > .nav-list > .nav-item > a {
  font-weight: 600;
  letter-spacing: 0px;
  font-size: 11px;
  padding: 0px 0px;
  }
   
  
  /* =========================================================
    header custom
    ========================================================= */
    
    /* Default: hide all CTAs */
     .site-header .site-header__cta .btn-cta,
     .site-header .site-header__cta .tool-link--address {
     display: none!important;
     }
    
    .site-header__top::before {
         background: #122d6b;
     }
     
     @media (min-width: 949px) {
     .site-header.has-topbar .site-header__top {
       padding: 10px 20px;
     }
     }
     
  /* =========================================================
    H1 ACCENT LINE — RAINBOW (CURVED)
   ========================================================= */
   
   .carousel h2::after,
   .content h1::after {   
   content: "";
   display: block; 
   position: relative;
   top: 10px;
   width: min(180px, 80%);
   height: 20px;
   margin-bottom: 20px;
   
   background: no-repeat center / 100% 100%
   url("data:image/svg+xml,%3Csvg viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%232a1c30'/%3E%3Cstop offset='25%25' stop-color='%233e2b45'/%3E%3Cstop offset='50%25' stop-color='%236a5273'/%3E%3Cstop offset='75%25' stop-color='%23eceaed'/%3E%3Cstop offset='100%25' stop-color='%232a1c30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10 Q100 5 200 10' stroke='url(%23g)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
   }
   
   /* HOME OVERRIDE */
   #page-home .carousel h2::after,  
   #page-home .content h1::after { 
   margin-bottom: 40px;
   }
   
   /* DESKTOP */
   @media (min-width: 949px) { 
   .carousel h2::after,  
   .content h1::after {   
     margin-bottom: 0px;
   }	 
   }
     
  .text-center h1::after {
  margin-left: auto;
  margin-right: auto;
  }
  
  @media (min-width: 949px) {
  #page-home .content h3, 
  #page-home .sb-embed h3 {
    font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  }
  }