/* EDITING GUIDE
 * This is the single source for the site's custom UI and animation styles.
 * Edit here, save and refresh. No CSS build is needed.
 * Find the numbered section from the INDEX below (for example "35. Premium Footer").
 * Loader appearance/spinner: section 02, .preloader / rotate-loading.
 * Hero floating/hover effects: section 04, .hero-icon-list.
 * Typing appearance: section 42. JavaScript timing: public/js/dia-text-reveal.js.
 * Loader fade timing: public/js/function.js, Preloader Effect.
 * Bootstrap, SlickNav, Swiper, Font Awesome and Magnific Popup remain vendor
 * foundations. Put any visual overrides in the matching section here.
 * Section order preserves the existing cascade; component styles follow base styles.
 */

/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. CTA Box css
06. About Us css
07. Our Services css
08. Why Choose Us css
09. How It Work Css
10. Our Team Css
11. Our Testiminial css
12. Our Blog Css
13. Our Contact Us css
14. Footer css
15. About us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Team Page css
21. Team Single css
22. Gallery Page css
23. Technology Page css
24. Testimonial Page css 
25. Contact us Page css
26. FAQs css
27. Make Appointment Page css
28. 404 Page css
29. Responsive css
30. Local Poppins Fonts
31. Scroll Entrance Animations (WOW / Animate.css)
32. Mouse Cursor Effects
33. Inner Page Logo
34. Shared Inner Page Components
35. Premium Footer and Responsive Footer
36. Dental and Skin Concern Explorer
37. Patient Stories Carousel and Video Dialog
38. About Us Journey
39. About Us Expertise
40. Dental and Aesthetic Consultation
41. Services Mega Menu (Desktop and Mobile)
42. Homepage Typing, Cursor, Glow and Shimmer
43. Accessibility, Forms and Reduced Motion
44. Concern Marker Positions and Map Borders
45. JavaScript-disabled Fallback
46. Standalone Not Found Page
-------------------------------------------------------------------------------------- */

@media screen {
  /************************************/
  /*** 	 01. Global Variables	  ***/
  /************************************/
  /*
:root{
	--primary-color			: #0E384C;
	--secondary-color		: #EFF8FF;
	--text-color			: #527282;
	--accent-color			: #1E84B5;
	--white-color			: #FFFFFF;
	--divider-color			: #FFFFFF1F;
	--dark-divider-color	: #0E384C1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "Poppins", sans-serif;
}
*/

  :root {
    --primary-color: #4e4c3b; /* deep olive — replaces navy, used for headings/dark UI */
    --secondary-color: #f7f5ec; /* warm ivory tint — replaces light blue backgrounds */
    --text-color: #6e6c58; /* soft olive-grey — body text */
    --accent-color: #a3966b; /* muted gold/khaki — buttons, links, highlights */
    --white-color: #fffdf8; /* warm off-white instead of pure white, feels "ivory" */
    --divider-color: #ffffff1f;
    --dark-divider-color: #4e4c3b1a; /* was #0E384C1A — now derived from new primary */
    --error-color: rgb(
      230,
      87,
      87
    ); /* keep as-is, errors should stay red regardless of theme */
    --default-font: "Poppins", sans-serif;
    --section-space: 40px; /* Shared vertical spacing between page sections. */
    --footer-ink: var(--white-color);
    --footer-muted: color-mix(
      in srgb,
      var(--white-color) 84%,
      var(--primary-color)
    );
    --footer-highlight: color-mix(
      in srgb,
      var(--accent-color) 75%,
      var(--white-color)
    );
    --footer-rule: var(--divider-color);
  }

  /* Section spacing shared by components defined later in this file. */
  body
    :is(
      .ig-section,
      .ig-page-header,
      .ig-stories,
      .ig-concerns,
      .ig-journey,
      .ig-expertise
    ) {
    padding-block: var(--section-space);
  }

  body .ig-cta-section {
    padding-top: 0;
  }

  body .dental-consultation {
    padding-bottom: var(--section-space);
  }

  /* Services already provide the outer spacing below their nested counters. */
  .our-services > .our-counter {
    padding-bottom: 0;
  }

  /************************************/
  /*** 	   02. General css		  ***/
  /************************************/

  body {
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-color);
    background-color: var(--white-color);
  }

  p {
    line-height: 1.8em;
    margin-bottom: 1.6em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary-color);
  }

  figure {
    margin: 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
    outline: 0;
  }

  a:focus {
    text-decoration: none;
    outline: 0;
  }

  /* Contact links follow each section's colors instead of Bootstrap's blue. */
  a:where([href^="tel:"], [href^="mailto:"]),
  a:where([href^="tel:"], [href^="mailto:"]):hover,
  a:where([href^="tel:"], [href^="mailto:"]):focus {
    color: inherit;
    cursor: pointer;
  }

  a:where([href^="tel:"], [href^="mailto:"]):hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  a:where([href^="tel:"], [href^="mailto:"]):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  a:where([href^="mailto:"]) {
    overflow-wrap: anywhere;
  }

  html,
  body {
    width: 100%;
    overflow-x: clip;
  }

  .container {
    max-width: 1300px;
  }

  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    padding-right: 15px;
    padding-left: 15px;
  }

  .image-anime {
    position: relative;
    overflow: hidden;
  }

  .image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
  }

  .image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
  }

  .reveal {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
  }

  .reveal img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }

  .row > * {
    padding-right: 15px;
    padding-left: 15px;
  }

  .row.no-gutters {
    margin-right: 0px;
    margin-left: 0px;
  }

  .row.no-gutters > * {
    padding-right: 0px;
    padding-left: 0px;
  }

  .btn-default {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5em;
    color: var(--white-color);
    background: var(--accent-color);
    text-transform: capitalize;
    padding: 14px 50px 14px 20px;
    border-radius: 99px;
    border: none;
    transition: all 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .btn-default:hover {
    background-color: transparent;
  }

  .btn-default::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--white-color);
    background-image: url("/assets/images/home/arrow-blue.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px auto;
    transform: translate(-10px, -50%);
    transition: all 0.4s ease-in-out;
  }

  .btn-default:hover:before {
    transform: translate(-10px, -50%) rotate(45deg);
    background-size: 10px auto;
  }

  .btn-default::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
    z-index: -1;
  }

  .btn-default:hover::after {
    width: 100%;
  }

  .btn-default.btn-highlighted:hover {
    color: var(--primary-color);
  }

  .btn-default.btn-highlighted:hover:before {
    background-image: url("/assets/images/home/arrow-white.svg");
    background-color: var(--primary-color);
  }

  .btn-default.btn-highlighted::after {
    background-color: var(--white-color);
  }

  #magic-cursor {
    position: absolute;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
    z-index: 1000000;
  }

  #ball {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 8px !important;
    height: 8px !important;
    background: var(--accent-color);
    margin: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1 !important;
  }

  .logo {
    margin: 0;
    width: auto;
    height: 60px;
    object-fit: contain;
  }

  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loading-container,
  .loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
  }

  .loading-container {
    margin: 40px auto;
  }

  .loading {
    border: 1px solid transparent;
    border-color: transparent var(--white-color) transparent var(--white-color);
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
  }

  .loading-container:hover .loading,
  .loading-container .loading {
    transition: all 0.5s ease-in-out;
  }

  #loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 66px;
    transform: translate(-50%, -50%);
  }

  @keyframes rotate-loading {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .section-row {
    margin-bottom: 60px;
  }

  .section-row .section-title {
    text-align: center;
    margin-bottom: 0;
  }

  .section-btn {
    text-align: end;
  }

  .section-title {
    margin-bottom: 40px;
  }

  .section-title :is(h3, .section-eyebrow) {
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-color);
    padding-left: 20px;
    margin-bottom: 10px;
  }

  .section-title :is(h3, .section-eyebrow)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url("/assets/images/home/icon-sub-heading.svg") no-repeat;
    background-position: left center;
    background-size: cover;
    width: 12px;
    height: 12px;
  }

  .section-title h1 {
    font-size: 54px;
    font-weight: 700;
    margin-bottom: 0;
  }

  .section-title h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 0;
  }

  .section-title h1 span,
  .section-title h2 span {
    color: var(--accent-color);
  }

  .section-title p {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .has-error .form-control,
  .has-danger .form-control {
    border-color: var(--error-color) !important;
  }

  .has-error .form-control:focus,
  .has-danger .form-control:focus {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(230, 87, 87, 0.2) !important;
  }

  .help-block.with-errors {
    margin-top: 6px;
    min-height: 20px;
  }

  .help-block.with-errors ul {
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .help-block.with-errors ul li {
    color: var(--error-color);
    font-weight: 500;
    font-size: 14px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Browser / Device Autofill styling so autofill matches Ivory theme */
  .contact-form .form-control:-webkit-autofill,
  .contact-form .form-control:-webkit-autofill:hover,
  .contact-form .form-control:-webkit-autofill:focus,
  .appointment-form .form-control:-webkit-autofill,
  .appointment-form .form-control:-webkit-autofill:hover,
  .appointment-form .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--primary-color) !important;
    -webkit-box-shadow: 0 0 0px 1000px #fffdf8 inset !important;
    box-shadow: 0 0 0px 1000px #fffdf8 inset !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  /************************************/
  /**** 	   03. Header css		 ****/
  /************************************/

  header.main-header {
    background-color: var(--secondary-color);
    border-bottom: 1px solid var(--dark-divider-color);
    position: relative;
    z-index: 100;
  }

  header.main-header .header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition:
      background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  header.main-header .header-sticky.hide {
    transform: none;
    border-radius: 0;
  }

  header.main-header .header-sticky.active {
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(29, 42, 53, 0.12);
    border-bottom-color: rgba(29, 42, 53, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  header.main-header .header-sticky.active .navbar {
    padding-top: 20px;
    padding-bottom: 20px;
    transition: padding 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar {
    padding: 30px 0;
    align-items: center;
    transition: padding 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar-brand {
    padding: 0;
    margin: 0;
  }

  .main-menu .nav-menu-wrapper {
    flex: 1;
    text-align: center;
  }

  .main-menu .nav-menu-wrapper > ul {
    align-items: center;
    display: inline-flex;
  }

  .main-menu ul li {
    margin: 0 9px;
    position: relative;
  }

  .main-menu ul li a {
    font-size: 16px;
    font-weight: 500;
    padding: 14px 15px !important;
    color: var(--primary-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
  }

  .main-menu ul li.submenu > a:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 14px;
    margin-left: 8px;
  }

  .main-menu ul li a:hover,
  .main-menu ul li a:focus {
    color: var(--accent-color);
  }

  .main-menu ul ul {
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: top;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 220px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 100%;
    overflow: hidden;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
    text-align: left;
  }

  .main-menu ul li.submenu:first-child ul {
    width: 250px;
  }

  .main-menu ul ul ul {
    left: 100%;
    top: 0;
    text-align: left;
  }

  .main-menu ul ul li {
    margin: 0;
    padding: 0;
  }

  .main-menu ul ul li a {
    color: var(--white-color);
    padding: 8px 20px !important;
    transition: all 0.3s ease-in-out;
  }

  .main-menu ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    padding: 5px 0;
  }

  .main-menu ul ul li a:hover,
  .main-menu ul ul li a:focus {
    color: var(--accent-color);
    background-color: transparent;
    padding: 8px 20px 8px 23px !important;
  }

  .main-menu ul li.highlighted-menu {
    display: none;
  }

  .responsive-menu,
  .navbar-toggle {
    display: none;
  }

  .responsive-menu {
    top: 0;
    position: relative;
  }

  .slicknav_btn {
    background: var(--primary-color);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 8px;
  }

  .slicknav_icon .slicknav_icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    width: 22px;
    background-color: var(--white-color);
    border-radius: 6px;
    margin: 4px auto !important;
    transition: all 0.1s ease-in-out;
  }

  .slicknav_icon .slicknav_icon-bar:first-child {
    margin-top: 0 !important;
  }

  .slicknav_icon .slicknav_icon-bar:last-child {
    margin-bottom: 0 !important;
  }

  .navbar-toggle
    a.slicknav_btn.slicknav_open
    .slicknav_icon
    span.slicknav_icon-bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
  }

  .navbar-toggle
    a.slicknav_btn.slicknav_open
    .slicknav_icon
    span.slicknav_icon-bar:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggle
    a.slicknav_btn.slicknav_open
    .slicknav_icon
    span.slicknav_icon-bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px);
  }

  .slicknav_menu {
    position: absolute;
    width: 100%;
    padding: 0;
    background: var(--primary-color);
  }

  .slicknav_menu ul {
    margin: 5px 0;
  }

  .slicknav_menu ul ul {
    margin: 0;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav li a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 10px 20px;
    color: var(--white-color);
    line-height: normal;
    margin: 0;
    border-radius: 0 !important;
    transition: all 0.3s ease-in-out;
  }

  .slicknav_nav a:hover,
  .slicknav_nav .slicknav_row:hover {
    background-color: transparent;
    color: var(--accent-color);
    padding: 10px 20px 10px 23px;
  }

  .slicknav_menu ul ul li a {
    padding: 10px 20px 10px 30px;
  }

  .slicknav_menu ul ul li a:hover {
    padding: 10px 20px 10px 33px;
  }

  .slicknav_arrow {
    font-size: 0 !important;
  }

  .slicknav_arrow:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 12px;
    margin-left: 8px;
    color: var(--white-color);
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 0.3s ease-out;
  }

  .slicknav_open > a .slicknav_arrow:after {
    transform: rotate(-180deg);
    color: var(--accent-color);
  }

  /************************************/
  /***        04. Hero css	      ***/
  /************************************/

  .hero {
    background: var(
      --secondary-color
    ); /*url("/assets/images/home/hero-bg.svg") no-repeat;*/
    background-position: center center;
    background-size: auto;
    padding: 10px 0 0;
  }

  .hero-content {
    padding-right: 100px;
  }

  .hero-content-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .hero-content-body .btn-default,
  .hero-content-body .btn-default:hover,
  .hero-content-body .btn-default:focus-visible {
    color: var(--white-color);
    text-decoration: none;
  }

  .hero-content .google-rating + .google-rating {
    margin-top: 12px;
  }

  .google-rating ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .google-rating ul li {
    display: inline-block;
    text-transform: capitalize;
    color: var(--primary-color);
    margin-right: 10px;
  }

  .google-rating ul li:last-child {
    margin-right: 0;
  }

  .google-rating ul li span {
    color: #ffa800;
    margin-left: 5px;
  }

  .google-rating ul li i {
    font-size: 14px;
    color: #ffa800;
  }

  .google-rating a,
  .google-rating a:hover,
  .google-rating a:focus,
  .google-rating a:focus-visible {
    color: var(--accent-color);
    text-decoration: none;
  }

  .hero-image {
    position: relative;
  }

  .hero-img {
    position: relative;
    z-index: 1;
  }

  .hero-icon-list .hero-icon-box-1 {
    position: absolute;
    top: 0px;
    right: 0;
    transform: translate(-50%, 150px);
    background-color: var(--white-color);
    border-radius: 100%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 40px 0px #0e384c1a;
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .hero-icon-list .hero-icon-box-2 {
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    transform: translate(50%, -50%);
    background-color: var(--white-color);
    border-radius: 100%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 40px 0px #0e384c1a;
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .hero-icon-list .hero-icon-box-3 {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-120px, -90%);
    background-color: var(--white-color);
    border-radius: 100%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 40px 0px #0e384c1a;
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .hero-icon-list .hero-icon-box-1:hover,
  .hero-icon-list .hero-icon-box-2:hover,
  .hero-icon-list .hero-icon-box-3:hover {
    background-color: transparent;
  }

  .hero-icon-list .hero-icon-box-1:before,
  .hero-icon-list .hero-icon-box-2:before,
  .hero-icon-list .hero-icon-box-3:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 100px;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    height: 100%;
  }

  .hero-icon-list .hero-icon-box-1:hover:before,
  .hero-icon-list .hero-icon-box-2:hover:before,
  .hero-icon-list .hero-icon-box-3:hover:before {
    transform: scale(1);
  }

  .hero-icon-list .hero-icon-box-1 img,
  .hero-icon-list .hero-icon-box-2 img,
  .hero-icon-list .hero-icon-box-3 img {
    position: relative;
    z-index: 1;
    max-width: 56px;
    transition: all 0.3s ease-in-out;
  }

  .hero-icon-list .hero-icon-box-1:hover img,
  .hero-icon-list .hero-icon-box-2:hover img,
  .hero-icon-list .hero-icon-box-3:hover img {
    filter: brightness(0) invert(1);
  }

  .icon-star-image {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50%, 50%);
  }

  .icon-star-image img {
    max-width: 112px;
    animation: zoom 1s linear 1s infinite;
  }

  @keyframes zoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Floating animation for all hero icons */
  .hero-icon-list .hero-icon-box-1,
  .hero-icon-list .hero-icon-box-2,
  .hero-icon-list .hero-icon-box-3 {
    animation: floatingIcon 3s ease-in-out infinite;
  }

  /* Different delays */
  .hero-icon-list .hero-icon-box-1 {
    animation-delay: 0s;
  }

  .hero-icon-list .hero-icon-box-2 {
    animation-delay: 0.8s;
  }

  .hero-icon-list .hero-icon-box-3 {
    animation-delay: 1.5s;
  }

  @keyframes floatingIcon {
    0%,
    100% {
      translate: 0 0;
    }

    50% {
      translate: 0 -15px;
    }
  }

  .export-dantist-box {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-100px);
    background-color: var(--white-color);
    box-shadow: 0px 0px 40px 0px #00000021;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 10px;
    animation: exportmoveobject 3s infinite linear alternate;
    z-index: 2;
  }

  @keyframes exportmoveobject {
    50% {
      left: 50px;
    }
  }

  .export-dantist-box .icon-box {
    margin-right: 10px;
  }

  .export-dantist-box .icon-box img {
    max-width: 78px;
    border-radius: 14px;
  }

  .export-dantist-content {
    width: calc(100% - 88px);
  }

  .export-dantist-content h3 {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
  }

  .export-dantist-content p {
    font-size: 14px;
    color: var(--primary-color);
    text-transform: capitalize;
    margin: 0;
  }

  .hero.hero-book-appointment {
    padding: 100px 0;
  }

  .hero-book-appointment .appointment-form {
    box-shadow: 0px 4px 40px 0px #0000000f;
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    text-align: center;
    padding: 40px;
    margin-left: 100px;
  }

  .hero-appointment-form-title {
    margin-bottom: 30px;
  }

  .hero-appointment-form-title h2 {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .hero-appointment-form-title h2 span {
    color: var(--accent-color);
  }

  .hero-appointment-form-title p {
    margin: 0;
  }

  .hero.bg-image {
    position: relative;
    background: none no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 150px 0;
  }

  .hero.bg-image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    opacity: 70%;
    width: 100%;
    height: 100%;
  }

  .hero.bg-image .hero-content {
    position: relative;
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-right: 0;
    z-index: 1;
  }

  .hero.bg-image .hero-content .section-title p,
  .hero.bg-image .hero-content .section-title :is(h3, .section-eyebrow),
  .hero.bg-image .hero-content .section-title h1 span,
  .hero.bg-image .hero-content .section-title h1 {
    color: var(--white-color);
  }

  .hero.bg-image .hero-content .section-title h1 {
    font-size: 80px;
  }

  .hero.bg-image
    .hero-content
    .section-title
    :is(h3, .section-eyebrow)::before {
    filter: brightness(0) invert(1);
  }

  .hero.bg-image .hero-content .hero-content-body {
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .hero.bg-image .hero-content .google-rating ul li {
    color: var(--white-color);
  }

  .hero.bg-image.hero-slider {
    background: none;
    padding: 0;
  }

  .hero-slider-layout .hero-slide {
    position: relative;
    padding: 150px 0;
  }

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

  .hero-slider-layout .hero-slide::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--primary-color);
    opacity: 70%;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .hero-slider-layout .swiper-pagination {
    bottom: 80px;
  }

  .hero-slider-layout .swiper-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
  }

  .hero-slider-layout .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
  }

  .hero.bg-image.hero-video {
    position: relative;
    overflow: hidden;
  }

  .hero.bg-image.hero-video::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    opacity: 70%;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .hero-video .hero-bg-video {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .hero-video .hero-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /************************************/
  /***        05. CTA Box css	      ***/
  /************************************/
  .cta-box {
    background-color: var(--primary-color);
    padding: 20px 0;
  }

  .cta-box-item {
    display: flex;
    align-items: center;
    border-right: 1px solid var(--divider-color);
    margin-right: 25px;
    padding-right: 25px;
    min-height: 90px;
  }

  .cta-box .col-lg-4:nth-child(2) .cta-box-item {
    border: none;
    padding-right: 0;
    margin-right: 0;
  }

  .cta-box-item .icon-box {
    margin-right: 22px;
    flex-shrink: 0;
  }

  .cta-box-item .icon-box img {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  .cta-box-content {
    width: calc(100% - 65px);
  }

  .cta-box-content :is(h2, h3) {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--white-color);
    margin-bottom: 12px;
  }

  .cta-box-content:has(.ig-footer-timings) h3 {
    margin-bottom: 6px;
  }

  .cta-box-content .ig-footer-timings {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .cta-box-content p {
    color: var(--white-color);
    margin: 0;
    line-height: 1.8;
    font-size: 16px;
  }

  .cta-box-btn {
    text-align: right;
  }

  /* Better mobile view */
  @media (max-width: 991px) {
    .cta-box-item {
      border-right: none;
      margin-right: 0;
      padding-right: 0;
      margin-bottom: 25px;
    }

    .cta-box-btn {
      text-align: left;
    }
  }

  /************************************/
  /***       06. About Us css	      ***/
  /************************************/

  .about-us {
    padding: var(--section-space) 0;
  }

  .about-image {
    /* background: url("/assets/images/home/about-bg-image.svg") no-repeat; */
    background-position: center center;
    background-size: auto;
    position: relative;
    margin-right: 50px;
    padding-bottom: 200px;
  }

  .about-img-1 {
    width: 410px;
  }

  .about-img-2 figure,
  .about-img-1 figure {
    display: block;
  }

  .about-img-1 img {
    aspect-ratio: 1 /0.96;
    object-fit: cover;
    border-radius: 40px;
  }

  .about-img-2 {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .about-img-2 img {
    aspect-ratio: 1 /0.85;
    object-fit: cover;
    border: 7px solid var(--white-color);
    border-radius: 40px;
  }

  .about-experience {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-50%, 50%);
  }

  .about-experience img {
    animation: rotate 30s infinite linear;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .about-us-body {
    margin-bottom: 40px;
  }

  .about-us-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .about-us-body ul li {
    position: relative;
    width: calc(50% - 10px);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
    padding-left: 30px;
  }

  .about-us-body ul li:before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 3px;
    left: 0;
  }

  /************************************/
  /***     07. Our Services css	  ***/
  /************************************/

  .intro-clinic-video {
    padding: var(--section-space) 0 0;
  }

  .visit-clinic {
    position: relative;
    background: url("/assets/images/home/visit-clinic-bg.webp") no-repeat;
    background-position: center center;
    background-size: auto;
    border-radius: 40px;
    padding: 150px 0;
  }

  .visit-clinic::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    border-radius: 40px;
    opacity: 60%;
    width: 100%;
    height: 100%;
  }

  .visit-clinic-content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }

  .visit-clinic-content .section-title :is(h3, .section-eyebrow),
  .visit-clinic-content .section-title h2 {
    color: var(--white-color);
  }

  .visit-clinic-content .section-title :is(h3, .section-eyebrow)::before {
    filter: brightness(0) invert(1);
  }

  .visit-clinic-btn .play-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5em;
    color: var(--accent-color);
    background: var(--white-color);
    text-transform: capitalize;
    padding: 14px 50px 14px 20px;
    border-radius: 99px;
    border: none;
    transition: all 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: none;
    z-index: 1;
  }

  .visit-clinic-btn .play-btn:hover {
    background-color: transparent;
    color: var(--white-color);
  }

  .visit-clinic-btn .play-btn::before {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    transform: translate(-10px, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
  }

  .visit-clinic-btn .play-btn:hover:before {
    background-color: var(--white-color);
    color: var(--primary-color);
  }

  .visit-clinic-btn .play-btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
    z-index: -1;
  }

  .visit-clinic-btn .play-btn:hover::after {
    width: 106%;
  }

  .our-counter {
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
  }

  .counter-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
  }

  .counter-title {
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .counter-title h2 {
    font-size: 44px;
    margin-bottom: 5px;
  }

  .counter-title h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
  }

  .counter-content p {
    margin: 0;
  }

  /************************************/
  /***     06. Our Services css     ***/
  /************************************/

  .our-services {
    position: relative;
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
    overflow: hidden;
  }

  .our-services::before,
  .our-services::after {
    content: "";
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
  }

  .our-services::before {
    background-image: none;
    top: -20px;
    right: -20px;
    width: 155px;
    height: 180px;
  }

  .our-services::after {
    background-image: none;
    bottom: -20px;
    left: -20px;
    width: 206px;
    height: 270px;
  }

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

  .service-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }

  .service-item {
    position: relative;
    width: calc(50% - 9px);
    background-color: #f7f5ec;
    border-radius: 18px;
    padding: 24px 24px 28px;
    overflow: hidden;
  }

  .service-item::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--accent-color);
    border-radius: 999px 999px 0 0;
    transition: all 0.4s ease-in-out;
  }

  .service-item:hover:before {
    height: 100%;
    border-radius: 0;
  }

  .service-item .icon-box {
    position: relative;
    margin-bottom: 20px;
    z-index: 1;
  }

  .service-item .icon-box img {
    width: 100%;
    max-width: 60px;
    transition: all 0.4s ease-in-out;
  }

  .service-item:hover .icon-box img {
    filter: brightness(0) invert(1);
  }

  .service-item-content {
    position: relative;
    z-index: 1;
  }

  .service-item-content h2 {
    font-size: 18px;
    line-height: 1.35;
    transition: all 0.4s ease-in-out;
  }

  .service-item-content h2 a {
    color: inherit;
  }

  .service-item-content p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    transition: all 0.4s ease-in-out;
  }

  .service-item:hover .service-item-content h2,
  .service-item:hover .service-item-content p {
    color: var(--white-color);
  }

  .service-cta-box {
    position: relative;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
  }

  .service-cta-box-image {
    height: 100%;
  }

  .service-cta-box-image figure {
    position: relative;
    display: block;
    height: 100%;
  }

  .service-cta-box-image figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      180deg,
      transparent 50%,
      var(--primary-color) 100%
    );
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .service-cta-box-image figure img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.21;
    object-fit: cover;
  }

  .service-cta-box-content {
    position: absolute;
    bottom: 28px;
    left: 24px;
    right: 24px;
    z-index: 1;
  }

  .service-cta-content-title {
    margin-bottom: 22px;
  }

  .service-cta-content-title h3 {
    font-size: 18px;
    color: var(--white-color);
    line-height: 1.4em;
  }

  .section-footer-text {
    margin-top: 30px;
    text-align: center;
  }

  .our-services .section-footer-text {
    margin-top: 60px;
  }

  .section-footer-text p {
    color: var(--primary-color);
    margin-bottom: 0;
  }

  .section-footer-text p span {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    background: var(--accent-color);
    color: var(--white-color);
    line-height: 1em;
    padding: 5px 12px;
    border-radius: 100px;
    margin-right: 10px;
  }

  .section-footer-text p a {
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
  }

  .section-footer-text p a:hover {
    color: var(--primary-color);
  }

  .section-footer-text ul {
    width: 100%;
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
  }

  .section-footer-text ul li {
    display: inline-block;
    color: var(--primary-color);
    line-height: normal;
    margin-right: 10px;
  }

  .section-footer-text ul li:last-child {
    margin-right: 0;
  }

  .section-footer-text ul.section-footer-border-list li {
    border-right: 1px solid var(--divider-color);
    padding-right: 15px;
  }

  .section-footer-text ul.section-footer-border-list li:last-child {
    padding-right: 0;
    border-right: none;
  }

  .section-footer-text ul li b {
    font-weight: 600;
  }

  .section-footer-text ul li i {
    color: var(--accent-color);
  }

  .dark-section .section-footer-text p,
  .dark-section .section-footer-text p a,
  .dark-section .section-footer-text ul li {
    color: var(--white-color);
  }

  .dark-section .section-footer-text p a:hover {
    color: var(--accent-color);
  }

  .section-footer-text.section-footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
  }

  .section-footer-text.section-footer-contact span {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }

  .section-footer-text.section-footer-contact span img {
    width: 100%;
    max-width: 16px;
  }

  .satisfy-client-images {
    display: inline-flex;
    align-items: center;
  }

  .satisfy-client-image {
    position: relative;
    display: inline-block;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    margin-left: -14px;
    overflow: hidden;
    z-index: 1;
  }

  .satisfy-client-image:first-child {
    margin-left: 0;
  }

  .satisfy-client-image figure {
    display: block;
  }

  .satisfy-client-image img {
    width: 100%;
    max-width: 48px;
  }

  .satisfy-client-image.add-more {
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .satisfy-client-image.add-more h3 {
    font-size: 18px;
    color: var(--white-color);
  }

  .satisfy-client-image.add-more i {
    font-size: 20px;
    color: var(--white-color);
  }

  .satisfy-client-image.add-more img {
    max-width: 24px;
  }

  .section-footer-text.section-satisfy-img {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .dark-section .section-footer-text.section-satisfy-img .satisfy-client-image {
    border-color: var(--primary-color);
  }

  .section-footer-text.section-satisfy-img .satisfy-client-image figure img {
    max-width: 28px;
  }

  .section-footer-text.section-satisfy-img .satisfy-client-image.add-more {
    width: 30px;
    height: 30px;
    margin-left: -10px;
  }

  .section-footer-text.section-satisfy-img .satisfy-client-image.add-more img {
    max-width: 18px;
  }

  .section-footer-text.section-satisfy-img ul {
    margin: 5px 0 0;
  }

  /************************************/
  /***     08. Why Choose Us css	  ***/
  /************************************/

  .why-choose-us {
    position: relative;
    background: var(
      --secondary-color
    ); /*url("/assets/images/home/hero-bg.svg") no-repeat;*/
    background-position: top center;
    background-size: auto;
    padding: var(--section-space) 0;
  }

  .why-choose-body-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
  }

  .why-choose-body-list ul li {
    position: relative;
    width: calc(50% - 10px);
    padding-left: 25px;
    line-height: 1.5em;
  }

  .why-choose-body-list ul li::before {
    content: "\f058";
    position: absolute;
    font-family: "Font Awesome 7 Free";
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
  }

  .why-choose-highlighted-box {
    background: linear-gradient(
      90deg,
      var(--secondary-color) 0%,
      rgba(255, 255, 255, 0) 110.24%
    );
    border-left: 4px solid var(--accent-color);
    border-radius: 14px;
    padding: 30px;
    margin-top: 40px;
  }

  .why-choose-highlighted-box p {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0;
  }

  .why-choose-us-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
    margin-top: 40px;
  }

  .why-choose-us-contact-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
  }

  .why-choose-us-contact-box .icon-box {
    position: relative;
    background: var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .why-choose-us-contact-box .icon-box::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
  }

  .why-choose-us-contact-box:hover .icon-box::before {
    transform: scale(1);
  }

  .why-choose-us-contact-box .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
  }

  .why-choose-contact-box-content {
    width: calc(100% - 65px);
  }

  .why-choose-contact-box-content p {
    line-height: normal;
    margin: 0 0 5px 0;
  }

  .why-choose-contact-box-content h3 {
    font-size: 20px;
    line-height: 1.4em;
    color: var(--primary-color);
  }

  .why-choose-contact-box-content h3 a {
    color: inherit;
    transition: all 0.4s ease-in-out;
  }

  .why-choose-contact-box-content h3 a:hover {
    color: var(--accent-color);
  }

  .why-choose-image-box {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 30px;
    margin-left: 15px;
  }

  .why-choose-image-box-1 {
    width: calc(62% - 15px);
    position: sticky;
    top: 30px;
  }

  .why-choose-image-1 figure {
    display: block;
    border-radius: 200px 14px 14px;
  }

  .why-choose-image-1 figure img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.345;
    border-radius: 200px 14px 14px;
  }

  .why-choose-image-2 {
    position: relative;
    margin: -80px 65px 0;
    z-index: 1;
  }

  .why-choose-image-2 figure {
    display: block;
    border: 5px solid var(--white-color);
    border-radius: 18px;
  }

  .why-choose-image-2 figure img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 0.66;
    border-radius: 14px;
  }

  .why-choose-image-box-2 {
    width: calc(38% - 15px);
    background-color: var(--white-color);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 10px;
  }

  .why-choose-counter-list {
    padding: 20px;
  }

  .why-choose-counter-item {
    text-align: center;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .why-choose-counter-item:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .why-choose-counter-item h2 {
    font-size: 50px;
    line-height: 1em;
  }

  .why-choose-counter-item p {
    margin: 10px 0 0;
  }

  .why-choose-image-3 figure {
    display: block;
    border-radius: 14px;
  }

  .why-choose-image-3 figure img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.25;
    border-radius: 14px;
  }

  /************************************/
  /***     09. How It Work Css	  ***/
  /************************************/

  .how-it-work {
    padding: var(--section-space) 0;
  }

  .how-it-work-img figure {
    display: block;
  }

  .how-it-work-img img {
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
    border-radius: 40px;
  }

  .how-it-work-content {
    margin-left: 25px;
  }

  .faq-accordion.how-work-accordion .accordion-item {
    position: relative;
    background: none;
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 25px;
    margin-bottom: 25px;
  }

  .faq-accordion.how-work-accordion .accordion-item:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .faq-accordion.how-work-accordion .accordion-header {
    position: relative;
  }

  .faq-accordion.how-work-accordion .accordion-item .icon-box {
    position: absolute;
    left: 0;
    top: 4px;
  }

  .faq-accordion.how-work-accordion .accordion-item .icon-box img {
    max-width: 40px;
  }

  .faq-accordion.how-work-accordion .accordion-item .accordion-button {
    position: relative;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    border: none;
    box-shadow: none;
    padding: 5px 35px 5px 60px;
  }

  .faq-accordion.how-work-accordion .accordion-header .accordion-button::after,
  .faq-accordion.how-work-accordion
    .accordion-header
    .accordion-button.collapsed::after {
    content: "\f077";
    position: absolute;
    top: 50%;
    right: 0;
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    font-weight: 900;
    color: var(--primary-color);
    transform: translate(0px, -50%);
    transition: all 0.3s ease-in-out;
  }

  .faq-accordion.how-work-accordion
    .accordion-header
    .accordion-button.collapsed::after {
    transform: rotate(-180deg) translate(0px, 50%);
  }

  .faq-accordion.how-work-accordion .accordion-item .accordion-body {
    padding: 10px 35px 0px 60px;
  }

  .faq-accordion.how-work-accordion .accordion-item .accordion-body p {
    margin: 0;
  }

  /************************************/
  /***      10. Our Team Css	      ***/
  /************************************/

  .our-team {
    position: relative;
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
    background: var(--secondary-color)
      url("/assets/images/home/our-team-bg.svg") no-repeat;
    background-position: top center;
    background-size: auto;
  }

  .our-team .icon-star-image {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    transform: translate(-30px, -50%);
  }

  .team-member-item {
    position: relative;
    height: calc(100% - 30px);
    margin: 0 auto 30px;
    max-width: 420px;
    z-index: 1;
  }

  .team-image {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    margin-bottom: 18px;
  }

  .team-image img {
    width: 100%;
    aspect-ratio: 1 / 1.14;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
  }

  .team-member-item:hover .team-image img {
    transform: scale(1.1);
  }

  .team-content {
    text-align: center;
  }

  .team-content h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
  }

  .team-content p {
    text-transform: capitalize;
    margin: 0;
  }

  .team-social-icon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    transform: translateY(101%);
    text-align: center;
    z-index: 1;
    transition: all 0.5s ease-in-out;
  }

  .team-member-item:hover .team-social-icon {
    transform: translateY(-20px);
  }

  .team-social-icon ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .team-social-icon ul li {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
  }

  .team-social-icon ul li:last-child {
    margin-right: 0;
  }

  .team-social-icon ul li a {
    height: 38px;
    width: 38px;
    background-color: var(--primary-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
  }

  .team-social-icon ul li a i {
    color: var(--white-color);
    font-size: 18px;
    transition: all 0.3s ease-in-out;
  }

  .team-social-icon ul li a:hover {
    background: var(--accent-color);
  }

  /************************************/
  /***   11. Our Testimonials Css   ***/
  /************************************/

  .our-testimonials {
    padding: var(--section-space) 0;
  }

  .our-testimonials .section-title {
    text-align: center;
  }

  .testimonial-image {
    position: relative;
    padding-bottom: 90px;
    margin-right: 20px;
  }

  .testimonial-img img {
    aspect-ratio: 1 / 1.1;
    border-radius: 40px;
    object-fit: cover;
  }

  .testimonial-rating-box {
    position: absolute;
    background: var(--accent-color);
    border: 6px solid var(--white-color);
    border-radius: 30px;
    right: 0;
    bottom: 0;
    padding: 30px;
    max-width: 450px;
  }

  .rating-counter-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--divider-color);
  }

  .rating-counter-item .rating-counter-number {
    min-width: 125px;
    margin-right: 20px;
  }

  .rating-counter-item .rating-counter-number h3 {
    color: var(--white-color);
    font-size: 44px;
  }

  .rating-counter-item .rating-counter-content {
    width: calc(100% - 145px);
  }

  .rating-counter-item .rating-counter-content p {
    color: var(--white-color);
    margin: 0;
  }

  .service-rating ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .service-rating ul li {
    color: var(--white-color);
    text-transform: capitalize;
    margin-right: 20px;
  }

  .service-rating ul li:last-child {
    margin-right: 0;
  }

  .service-rating ul li i {
    font-size: 14px;
    color: #ffa800;
  }

  .author-content li i {
    font-size: 14px;
    color: #ffa800;
  }

  .our-testimonials .swiper-wrapper {
    cursor: none;
  }

  .testimonial-item .testimonial-quote-image {
    margin-bottom: 30px;
  }

  .testimonial-item .testimonial-quote-image img {
    max-width: 50px;
  }

  .testimonial-item .testimonial-content {
    margin-bottom: 30px;
  }

  .testimonial-content p {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
  }

  .testimonial-item .testimonial-body {
    display: flex;
    align-items: center;
  }

  .testimonial-body .author-image {
    margin-right: 10px;
  }

  .testimonial-body .author-image img {
    max-width: 64px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }

  .testimonial-body .author-content {
    width: calc(100% - 74px);
  }

  .testimonial-body .author-content h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
  }

  .testimonial-body .author-content p {
    text-transform: capitalize;
    margin: 0;
  }

  .testimonial-btn {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 40px;
  }

  .testimonial-slider .testimonial-button-next,
  .testimonial-slider .testimonial-button-prev {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    border-radius: 6px;
    transition: all 0.4s ease-in-out;
  }

  .testimonial-slider .testimonial-button-next {
    margin-left: 20px;
  }

  .testimonial-slider .testimonial-button-next:hover,
  .testimonial-slider .testimonial-button-prev:hover {
    background-color: var(--primary-color);
  }

  .testimonial-slider .testimonial-button-next::before,
  .testimonial-slider .testimonial-button-prev::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("/assets/images/home/arrow-white.svg") no-repeat center
      center;
    background-size: 12px auto;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
  }

  .testimonial-slider .testimonial-button-prev::before {
    transform: rotate(225deg);
  }

  /************************************/
  /***       12. Our Blog  Css	  ***/
  /************************************/

  .our-blog {
    position: relative;
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
    background: var(--secondary-color)
      url("/assets/images/home/our-blog-bg.svg") no-repeat;
    background-position: top 60px center;
    background-size: auto;
  }

  .our-blog .icon-star-image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
    z-index: 0;
  }

  .blog-item {
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    z-index: 1;
  }

  .blog-item .post-featured-image {
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 30px;
  }

  .blog-item .post-featured-image a {
    cursor: none;
    display: block;
  }

  .blog-item .post-featured-image img {
    border-radius: 30px;
    aspect-ratio: 1 / 0.66;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
  }

  .blog-item:hover .post-featured-image img {
    transform: scale(1.1);
  }

  .post-item-body {
    margin-bottom: 15px;
  }

  .post-item-body h2 {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5em;
    text-transform: capitalize;
    margin-bottom: 20px;
  }

  .post-item-body h2 a {
    color: inherit;
  }

  .post-item-body p {
    margin: 0;
  }

  .post-item-footer a.read-more-btn {
    position: relative;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    padding-right: 35px;
    transition: 0.5s ease-in-out;
  }

  .post-item-footer a.read-more-btn::after {
    content: "";
    position: absolute;
    top: -2px;
    right: 0;
    bottom: 0;
    background-image: url("/assets/images/home/arrow-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px auto;
    background-color: var(--accent-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    transition: 0.4s ease-in-out;
  }

  .post-item-footer a.read-more-btn:hover::after {
    transform: rotate(45deg);
    background-color: var(--primary-color);
  }

  .post-item-footer a.read-more-btn:hover {
    color: var(--primary-color);
  }

  /************************************/
  /***    13. Our Contact Us css	  ***/
  /************************************/

  .contact-now {
    padding: var(--section-space) 0;
  }

  .contact-google-map .google-map-iframe,
  .contact-google-map .google-map-iframe iframe {
    width: 100%;
    height: 600px;
    border-radius: 30px;
  }

  .contact-google-map .google-map-iframe iframe {
    filter: grayscale(1);
    transition: all 0.3s ease-in-out;
  }

  .contact-google-map .google-map-iframe iframe:hover {
    filter: grayscale(0);
  }

  .contact-now-content {
    margin-left: 30px;
  }

  .contact-now-info {
    margin-bottom: 40px;
  }

  .contact-info-list {
    position: relative;
    padding-left: 38px;
    margin-bottom: 30px;
  }

  .contact-info-list:last-child {
    margin-bottom: 0;
  }

  .contact-info-list .icon-box {
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .contact-info-list .icon-box img {
    width: 100%;
    max-width: 28px;
  }

  .contact-info-list .contact-info-content p {
    margin: 0;
  }

  /************************************/
  /***        14. Footer css  	  ***/
  /************************************/

  footer.main-footer {
    padding: 100px 0 0;
    background: var(
      --primary-color
    ); /*url("/assets/images/home/footer-bg.svg") no-repeat;*/
    background-position: center center;
    background-size: auto;
  }

  .footer-logo {
    margin-bottom: 35px;
  }

  .footer-logo img {
    background: var(--white-color);
    border-radius: 12px;
    padding: 12px 18px;
    width: 100%;
    max-width: 220px;
  }

  .about-footer-content p {
    color: var(--white-color);
    margin-bottom: 0;
  }

  .footer-links h3 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 20px;
  }

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

  .footer-links ul li {
    margin-bottom: 10px;
  }

  .footer-links ul li:last-child {
    margin-bottom: 0;
  }

  .footer-links ul li a {
    color: var(--white-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
  }

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

  .footer-quick-links,
  .footer-social-links {
    margin-left: 50px;
  }

  .footer-copyright {
    border-top: 1px solid var(--divider-color);
    padding: 30px 0;
    text-align: center;
    margin-top: 60px;
  }

  .footer-copyright-text p {
    color: var(--white-color);
    margin: 0;
  }

  /************************************/
  /***     15. About us Page css	  ***/
  /************************************/

  .page-header {
    background: var(--secondary-color)
      url("/assets/images/home/page-header-bg.svg") no-repeat;
    background-position: center center;
    background-size: auto;
    padding: var(--section-space) 0;
  }

  .page-header-box h1 {
    font-size: 54px;
    font-weight: 700;
    text-align: center;
    color: var(--accent-color);
    margin-bottom: 20px;
  }

  .page-header-box h1 span {
    color: var(--primary-color);
  }

  .page-header-box ol {
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .page-header-box ol li.breadcrumb-item {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: capitalize;
  }

  .page-header-box ol li.breadcrumb-item a {
    color: inherit;
  }

  .page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
    color: var(--accent-color);
  }

  .page-about-us .about-us-body {
    margin-bottom: 0px;
  }

  .insurance-company-carousel {
    display: none;
    background: var(--secondary-color);
    padding: var(--section-space) 0;
  }

  .insurance-carousel-title h3 {
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
  }

  .company-carousel .swiper-wrapper .swiper-slide {
    text-align: center;
  }

  .company-carousel .swiper-wrapper .swiper-slide .company-logo img {
    max-width: 200px;
  }

  .about-how-it-work .how-it-work-content {
    margin: 0 25px 0 0;
  }

  .dental-process {
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
  }

  .dental-process .section-title {
    max-width: 560px;
    margin: 0 auto;
  }

  .dental-process-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
  }

  .dental-process-image {
    position: relative;
    margin-bottom: 30px;
    border-radius: 40px;
    overflow: hidden;
  }

  .dental-process-image .dental-process-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: brightness(80%);
    border-radius: 40px;
    transition: all 0.4s ease-in-out;
  }

  .dental-process-item:hover .dental-process-img img {
    transform: scale(1.1);
  }

  .dental-process-image .dental-process-number {
    position: absolute;
    background: var(--white-color);
    border-radius: 16px;
    left: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: all 0.5s ease-in-out;
  }

  .dental-process-item:hover .dental-process-image .dental-process-number {
    background-color: transparent;
  }

  .dental-process-image .dental-process-number::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 16px;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    height: 100%;
  }

  .dental-process-item:hover
    .dental-process-image
    .dental-process-number::before {
    transform: scale(1);
  }

  .dental-process-image .dental-process-number h3 {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.4s ease-in-out;
  }

  .dental-process-item:hover .dental-process-number h3 {
    color: var(--white-color);
  }

  .dental-process-item .dental-process-content h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 15px;
  }

  .dental-process-item .dental-process-content p {
    margin: 0;
  }

  .expertise-experience-content {
    margin-right: 30px;
  }

  .expertise-experience-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .expertise-experience-body ul li {
    position: relative;
    width: calc(50% - 10px);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
    padding-left: 30px;
  }

  .expertise-experience-body ul li:before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 3px;
    left: 0;
  }

  .expertise-experience-img figure {
    display: block;
  }

  .expertise-experience-img img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 40px;
  }

  /************************************/
  /***     16. Services Page css	  ***/
  /************************************/

  .page-services {
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
  }

  .page-services .service-item {
    border: 1px solid var(--dark-divider-color);
  }

  /************************************/
  /***    17. Service Single css	  ***/
  /************************************/

  .page-service-single {
    padding: var(--section-space) 0;
  }

  .service-sidebar {
    margin-right: 25px;
    position: sticky;
    top: 20px;
  }

  .service-catagery-list {
    background-color: var(--secondary-color);
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 40px;
  }

  .service-catagery-list h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 30px;
  }

  .service-catagery-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .service-catagery-list ul li {
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  .service-catagery-list ul li:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .service-catagery-list ul li a {
    display: block;
    position: relative;
    color: var(--primary-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
  }

  .service-catagery-list ul li:hover a {
    color: var(--accent-color);
  }

  .service-catagery-list ul li a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(0px, -50%);
    background-image: url("/assets/images/home/arrow-blue.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px auto;
    width: 12px;
    height: 12px;
    transition: all 0.3s ease-in-out;
  }

  .service-catagery-list ul li:hover a::after {
    transform: translate(0px, -50%) rotate(45deg);
  }

  .sidebar-cta-box {
    background: var(--accent-color);
    border-radius: 30px;
    padding: 40px;
    text-align: center;
  }

  .sidebar-cta-box .icon-box {
    margin-bottom: 30px;
  }

  .sidebar-cta-box .icon-box img {
    max-width: 64px;
  }

  .sidebar-cta-box .cta-content {
    margin-bottom: 20px;
  }

  .sidebar-cta-box .cta-content h3 {
    color: var(--white-color);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .sidebar-cta-box .cta-content p {
    color: var(--white-color);
    margin: 0;
  }

  .cta-contact-btn .btn-default {
    background: var(--white-color);
    color: var(--accent-color);
  }

  .cta-contact-btn .btn-default::before {
    background-color: var(--accent-color);
    background-image: url("/assets/images/home/arrow-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px auto;
  }

  .cta-contact-btn .btn-default:hover {
    background-color: transparent;
    color: var(--white-color);
  }

  .service-single-content {
    padding-bottom: 100px;
  }

  .service-featured-image {
    margin-bottom: 30px;
  }

  .service-featured-image figure {
    display: block;
  }

  .service-featured-image img {
    aspect-ratio: 1 / 0.61;
    object-fit: cover;
    border-radius: 40px;
  }

  .service-entry h2 {
    font-size: 44px;
    margin-bottom: 30px;
  }

  .service-entry h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 30px;
  }

  .service-entry p {
    margin-bottom: 30px;
  }

  .service-entry p:last-child {
    margin-bottom: 0px;
  }

  .service-entry ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }

  .service-entry ul li {
    position: relative;
    width: calc(50% - 10px);
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    padding-left: 30px;
    text-transform: capitalize;
  }

  .service-entry ul li:before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 2px;
    left: 0;
  }

  .service-entry-image {
    margin-bottom: 30px;
  }

  .service-entry-img-1 figure,
  .service-entry-img-2 figure {
    display: block;
  }

  .service-entry-img-1 img,
  .service-entry-img-2 img {
    aspect-ratio: 1 / 0.8;
    object-fit: cover;
    border-radius: 40px;
  }

  .faqs-section-title {
    margin-bottom: 60px;
  }

  .faqs-section-title h2 {
    font-size: 44px;
  }

  .service-faqs .faq-accordion .accordion-item {
    border: 2px solid var(--dark-divider-color);
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .service-faqs .faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
  }

  .service-faqs .faq-accordion .accordion-item .accordion-button::after,
  .service-faqs
    .faq-accordion
    .accordion-item
    .accordion-button.collapsed::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    bottom: auto;
    transform: translate(-20px, -50%) rotate(135deg);
    background-image: url("/assets/images/home/arrow-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8px auto;
    border-radius: 50%;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    transition: all 0.3s ease-in-out;
  }

  .service-faqs
    .faq-accordion
    .accordion-item
    .accordion-button.collapsed::after {
    transform: translate(-20px, -50%) rotate(45deg);
  }

  .service-faqs .accordion-header .accordion-button {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    text-transform: capitalize;
    padding: 15px 50px 15px 20px;
  }

  .service-faqs .accordion-body {
    padding: 0 20px 20px 20px;
  }

  .service-faqs .accordion-body p {
    margin: 0;
  }

  /************************************/
  /***    18. Blog Archive css	  ***/
  /************************************/

  .page-blog {
    padding: var(--section-space) 0;
  }

  .page-blog .blog-item {
    height: calc(100% - 40px);
    margin-bottom: 40px;
  }

  .post-pagination {
    margin-top: 30px;
    text-align: center;
  }

  .post-pagination ul {
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .post-pagination ul li a,
  .post-pagination ul li span {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
    border-radius: 6px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
  }

  .post-pagination ul li.active a,
  .post-pagination ul li a:hover {
    background: var(--accent-color);
    color: var(--white-color);
  }

  /************************************/
  /***     19. Blog Single css	  ***/
  /************************************/

  .page-single-post {
    padding: var(--section-space) 0;
  }

  .post-single-meta ol li.breadcrumb-item {
    font-size: 18px;
  }

  .post-single-meta ol li i {
    font-size: 18px;
    color: var(--accent-color);
    margin-right: 5px;
  }

  .post-image {
    position: relative;
    margin-bottom: 30px;
  }

  .post-image figure {
    display: block;
  }

  .post-image figure,
  .post-image img {
    aspect-ratio: 1 / 0.5;
    object-fit: cover;
    border-radius: 40px;
  }

  .post-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }

  .post-entry {
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .post-entry:after {
    content: "";
    display: block;
    clear: both;
  }

  .post-entry a {
    color: var(--accent-color);
  }

  .post-entry h1,
  .post-entry h2,
  .post-entry h3,
  .post-entry h4,
  .post-entry h5,
  .post-entry h6 {
    margin: 0 0 0.6em;
  }

  .post-entry h1 {
    font-size: 54px;
  }

  .post-entry h2 {
    font-size: 44px;
  }

  .post-entry h3 {
    font-size: 40px;
  }

  .post-entry h4 {
    font-size: 30px;
  }

  .post-entry h5 {
    font-size: 24px;
  }

  .post-entry h6 {
    font-size: 18px;
  }

  .post-entry p {
    margin-bottom: 20px;
  }

  .post-entry p:last-child {
    margin-bottom: 0;
  }

  .post-entry p strong {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
  }

  .post-entry ol {
    margin: 0 0 30px;
  }

  .post-entry ol li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
  }

  .post-entry ul {
    padding: 0;
    margin: 20px 0 20px;
    padding-left: 20px;
  }

  .post-entry ul li {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    margin-bottom: 18px;
  }

  .post-entry ul li:last-child {
    margin-bottom: 0;
  }

  .post-entry ul ul,
  .post-entry ul ol,
  .post-entry ol ol,
  .post-entry ol ul {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .post-entry ul ul li:last-child,
  .post-entry ul ol li:last-child,
  .post-entry ol ol li:last-child,
  .post-entry ol ul li:last-child {
    margin-bottom: 0;
  }

  .post-entry blockquote {
    background: var(--secondary-color)
      url(/assets/images/home/icon-blockquote.svg) no-repeat 35px 40px;
    background-size: 45px;
    border-radius: 40px;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
  }

  .post-entry blockquote p {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 600;
  }

  .post-entry blockquote p:last-child {
    margin-bottom: 0;
  }

  .tag-links {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-block;
  }

  .post-tags .tag-links a {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 6px;
    padding: 8px 20px;
    margin-left: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
  }

  .post-tags .tag-links a:hover {
    background: var(--primary-color);
  }

  .post-social-sharing {
    text-align: right;
  }

  .post-social-sharing ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .post-social-sharing ul li {
    display: inline-block;
    margin-right: 10px;
  }

  .post-social-sharing ul li:last-child {
    margin-right: 0;
  }

  .post-social-sharing ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 6px;
    width: 38px;
    height: 38px;
    transition: all 0.3s ease-in-out;
  }

  .post-social-sharing ul li:hover a {
    background-color: var(--primary-color);
  }

  .post-social-sharing ul li a i {
    font-size: 18px;
    color: inherit;
    transition: all 0.3s ease-in-out;
  }

  .post-social-sharing ul li:hover a i {
    color: var(--secondry-color);
  }

  /************************************/
  /***      20. Team Page css  	  ***/
  /************************************/

  .page-team {
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
  }

  /************************************/
  /***   21. Team Single Page css	  ***/
  /************************************/

  .page-team-single {
    padding: 100px 0 25px;
  }

  .page-team-single .row {
    background-color: var(--primary-color);
    border-radius: 35px 30px 30px 35px;
  }

  .team-member-image {
    height: 100%;
  }

  .team-member-image figure {
    height: 100%;
  }

  .team-member-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 30px 0 0 30px;
  }

  .team-member-details {
    margin-left: 30px;
    height: 100%;
    padding: 50px 30px;
  }

  .member-detail-header {
    margin-bottom: 40px;
  }

  .member-detail-header h2 {
    font-size: 32px;
    color: var(--white-color);
    margin-bottom: 10px;
  }

  .member-detail-header p {
    font-size: 18px;
    text-transform: capitalize;
    color: var(--white-color);
    margin: 0;
  }

  .member-detail-content {
    margin-bottom: 40px;
  }

  .member-detail-content p {
    font-size: 18px;
    text-transform: capitalize;
    color: var(--white-color);
  }

  .member-detail-content p:last-child {
    margin-bottom: 0;
  }

  .member-detail-body {
    margin-bottom: 40px;
  }

  .member-detail-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .member-detail-body ul li {
    font-size: 18px;
    color: var(--white-color);
    display: flex;
    margin-bottom: 15px;
  }

  .member-detail-body ul li:last-child {
    margin-bottom: 0;
  }

  .member-detail-body ul li span {
    width: 30%;
    font-weight: 500;
  }

  .member-social-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .member-social-list ul li {
    display: inline-block;
    margin-right: 20px;
  }

  .member-social-list ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    transition: all 0.2s ease-in-out;
  }

  .member-social-list ul li:hover a {
    color: var(--accent-color);
  }

  .member-social-list ul li a i {
    font-size: 20px;
    color: inherit;
    transition: all 0.3s ease-in-out;
  }

  .about-member-details {
    padding: 25px 0 100px;
  }

  .about-member-info {
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 30px;
  }

  .member-info-title {
    margin-bottom: 30px;
  }

  .member-info-title h2 {
    font-size: 32px;
    text-transform: capitalize;
  }

  .member-info-content p:last-child {
    margin-bottom: 0;
  }

  .member-winning-awards {
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    padding: 40px;
  }

  .winning-awards-content {
    margin-bottom: 30px;
  }

  .winning-awards-content h2 {
    font-size: 32px;
    text-transform: capitalize;
    margin-bottom: 30px;
  }

  .winning-awards-content p:last-child {
    margin-bottom: 0;
  }

  .winning-awards-box .row .col-6 {
    padding: 0;
  }

  .winning-awards-box {
    text-align: center;
  }

  .winning-award-img img {
    max-height: 135px;
  }

  .winning-award-img.img-box-1 {
    border-right: 1px solid var(--dark-divider-color);
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 35px;
  }

  .winning-award-img.img-box-2 {
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 35px;
  }

  .winning-award-img.img-box-3 {
    padding-top: 35px;
    border-right: 1px solid var(--dark-divider-color);
  }

  .winning-award-img.img-box-4 {
    padding-top: 35px;
  }

  .team-member-skills {
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 30px;
  }

  .member-skills-title {
    margin-bottom: 30px;
  }

  .member-skills-title h2 {
    font-size: 32px;
    text-transform: capitalize;
  }

  .team-member-skills .skills-progress-bar {
    margin-bottom: 35px;
  }

  .team-member-skills .skills-progress-bar:last-child {
    margin-bottom: 0;
  }

  .skillbar .skill-data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .skillbar .skill-data .skill-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: capitalize;
  }

  .skillbar .skill-data .skill-no {
    font-size: 22px;
    font-weight: 500;
    color: var(--primary-color);
    margin-left: 20px;
  }

  .skillbar .skill-progress {
    width: 100%;
    height: 10px;
    background: var(--secondary-color);
    border-radius: 99px;
    position: relative;
  }

  .skillbar .skill-progress .count-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--accent-color);
    border-radius: 99px;
  }

  .team-sidebar-cta {
    position: relative;
    background: var(--white-color);
    padding: 40px;
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    z-index: 1;
  }

  .cta-info-content {
    display: flex;
  }

  .cta-info-content .icon-box {
    position: relative;
    background: var(--accent-color);
    border-radius: 10px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    overflow: hidden;
  }

  .cta-info-content .icon-box:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background-color: var(--primary-color);
    transition: all 0.4s ease-in-out;
    height: 100%;
  }

  .cta-info-content:hover .icon-box:before {
    top: 0;
  }

  .cta-info-content .icon-box img {
    position: relative;
    z-index: 1;
    max-width: 35px;
  }

  .cta-info-content .cta-content {
    width: calc(100% - 80px);
  }

  .cta-info-content .cta-content h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 20px;
  }

  .cta-info-content .cta-content p {
    margin-bottom: 30px;
  }

  /************************************/
  /***     22. Gallery Page css	  ***/
  /************************************/

  .our-gallery-page {
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
  }

  .photo-gallery {
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
  }

  .photo-gallery a {
    cursor: none;
  }

  .photo-gallery figure {
    position: relative;
  }

  .photo-gallery figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
  }

  .photo-gallery:hover figure::before {
    opacity: 80%;
    visibility: visible;
    transform: scale(1);
  }

  .photo-gallery figure::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(-50%);
    width: 65px;
    height: 65px;
    margin: 0 auto;
    background: var(--accent-color) url("/assets/images/home/icon-eye.svg")
      no-repeat;
    background-position: center center;
    background-size: 40px auto;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
  }

  .photo-gallery:hover figure::after {
    opacity: 1;
    visibility: visible;
  }

  .photo-gallery img {
    position: relative;
    aspect-ratio: 1 / 0.95;
    object-fit: cover;
    border-radius: 20px;
  }

  .mfp-arrow-left:before,
  .mfp-arrow-right:before {
    border: none;
  }

  .mfp-arrow-left:after {
    border-right: 13px solid var(--accent-color);
    opacity: 1;
  }

  .mfp-arrow-right:after {
    border-left: 13px solid var(--accent-color);
    opacity: 1;
  }

  /************************************/
  /***    23. Technology Page css	  ***/
  /************************************/

  .page-techonology {
    padding: var(--section-space) 0;
  }

  .page-techonology .row.techonology-item {
    margin-bottom: var(--section-space);
    scroll-margin-top: calc(50vh - 200px);
  }

  @media (max-width: 991px) {
    .page-techonology .row.techonology-item {
      scroll-margin-top: 110px;
    }
  }

  .page-techonology .row.techonology-item:last-child {
    margin-bottom: 0;
  }

  .page-techonology .row.techonology-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  .techonology-image-box {
    display: flex;
    gap: 20px;
  }

  .techonology-image-1,
  .techonology-image-2 {
    width: 100%;
  }

  .techonology-image-box figure {
    display: block;
  }

  .techonology-image-box img {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
    border-radius: 40px;
  }

  .techonology-content .section-title {
    margin-bottom: 0;
  }

  .techonology-content .section-title h2 {
    width: 100%;
    max-width: 500px;
  }

  /************************************/
  /***   24. Testimonial Page css	  ***/
  /************************************/

  .page-testimonials {
    padding: var(--section-space) 0 max(0px, calc(var(--section-space) - 30px));
  }

  .testimonial-box-item {
    background: var(--white-color);
    box-shadow: 0px 4px 40px 0px #0000000f;
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
  }

  .testimonial-box-item .testimonial-box-header {
    margin-bottom: 20px;
  }

  .testimonial-quote-img {
    margin-bottom: 20px;
  }

  .testimonial-quote-img img {
    max-width: 32px;
  }

  .testimonial-box-header .testimonial-rating {
    margin-bottom: 20px;
  }

  .testimonial-box-header .testimonial-rating i {
    font-size: 16px;
    color: #f5a200;
    margin-right: 5px;
  }

  .testimonial-box-header .testimonial-box-content p {
    margin: 0;
  }

  .testimonial-box-body {
    display: flex;
    align-items: center;
  }

  .testimonial-box-body .author-box-image {
    width: 56px;
    height: 56px;
    margin-right: 10px;
  }

  .testimonial-box-body .author-box-image img {
    width: 56px;
    height: 56px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
  }

  .testimonial-box-body .author-box-content h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
  }

  .testimonial-box-body .author-box-content {
    width: calc(100% - 66px);
  }

  .testimonial-box-body .author-box-content p {
    text-transform: capitalize;
    margin: 0;
  }

  /************************************/
  /***   25. Contact us Page css	  ***/
  /************************************/

  .page-contact {
    padding: var(--section-space) 0;
  }

  .contact-us-content {
    margin-right: 30px;
  }

  .contact-us-item {
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0px 4px 40px 0px #0000000f;
    height: calc(100% - 30px);
    margin-bottom: 30px;
  }

  /* .contact-us-content .col-md-6:nth-last-child(-n + 2) .contact-us-item{
	height: auto;
	margin-bottom: 0;
} */

  .contact-us-item .icon-box {
    background: var(--secondary-color);
    border-radius: 100px;
    height: 52px;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .contact-us-item .icon-box img {
    max-width: 30px;
  }

  .contact-us-item .contact-info-content h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 20px;
  }

  .contact-us-item .contact-info-content p {
    width: 100%;
    max-width: 220px;
    margin: 0;
  }

  .contact-us-item .contact-info-content a {
    color: inherit;
    text-decoration: none;
  }

  .contact-us-item .contact-info-content a:hover {
    color: var(--accent-color);
  }

  /* Contact Us Working Hours schedule styling */
  .contact-schedule {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .contact-schedule .schedule-days-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--secondary-color);
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid var(--dark-divider-color);
  }

  .contact-schedule .schedule-slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .contact-schedule .schedule-slot-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .contact-schedule .slot-badge {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-color);
    background: rgba(163, 150, 107, 0.12);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    padding: 3px 9px;
    border-radius: 6px;
    min-width: 66px;
    text-align: center;
    line-height: 1.4;
  }

  .contact-schedule .slot-hours {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--primary-color);
    letter-spacing: -0.01em;
    line-height: 1.4;
  }

  .google-map-iframe,
  .google-map-iframe iframe {
    width: 100%;
    height: 735px;
    border-radius: 30px;
  }

  .contact-us-form {
    padding: var(--section-space) 0;
  }

  .contact-us-img figure {
    display: block;
  }

  .contact-us-img img {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
    border-radius: 40px;
  }

  .contact-form {
    margin-left: 30px;
  }

  .contact-form .form-control {
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid var(--dark-divider-color);
    border-radius: 10px;
    color: var(--primary-color);
    box-shadow: none;
  }

  /************************************/
  /***        26. FAQs css        ***/
  /************************************/

  .our-faqs {
    padding: var(--section-space) 0;
  }

  .faq-image-box {
    position: relative;
    height: 100%;
    margin-right: 15px;
  }

  .faq-image {
    height: 100%;
  }

  .faq-image figure {
    display: block;
    height: 100%;
    border-radius: 14px;
  }

  .faq-image img {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1.23;
    object-fit: cover;
    border-radius: 14px;
  }

  .faq-cta-box {
    position: absolute;
    bottom: 30px;
    left: auto;
    right: 30px;
    width: calc(100% - 60px);
    max-width: 350px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;
    padding: 30px;
    box-shadow:
      0 20px 45px rgba(49, 47, 35, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    overflow: hidden;
    z-index: 1;
  }

  .faq-cta-box::before {
    content: "";
    position: absolute;
    top: -75px;
    right: -55px;
    width: 180px;
    height: 180px;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
  }

  .faq-cta-box-title,
  .faq-cta-contact-list {
    position: relative;
    z-index: 1;
  }

  .faq-cta-box-title h2 {
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 0;
  }

  .faq-cta-contact-list {
    border-top: 1px solid rgba(78, 76, 59, 0.18);
    margin-top: 25px;
    padding-top: 25px;
  }

  .faq-cta-contact-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .faq-cta-contact-list ul li {
    margin-bottom: 10px;
  }

  .faq-cta-contact-list ul li:last-child {
    margin-bottom: 0;
  }

  .faq-cta-contact-list ul li a {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    gap: 12px;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    line-height: 1.5em;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  .faq-cta-contact-list ul li a:hover {
    color: var(--accent-color);
    background-color: rgba(255, 255, 255, 0.42);
    transform: translateX(4px);
  }

  .faq-cta-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: var(--primary-color);
    background: rgba(163, 150, 107, 0.2);
    border: 1px solid rgba(163, 150, 107, 0.32);
    border-radius: 50%;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  .faq-cta-contact-list ul li a:hover .faq-cta-contact-icon {
    color: var(--white-color);
    background-color: var(--accent-color);
    transform: scale(1.06);
  }

  .faq-content-box {
    height: 100%;
    align-content: center;
  }

  .faq-accordion .accordion-item {
    position: relative;
    background: var(--white-color);
    border: 1px solid rgba(78, 76, 59, 0.1);
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 6px 20px rgba(78, 76, 59, 0.06);
    overflow: hidden;
    transition:
      border-color 0.28s ease,
      box-shadow 0.28s ease;
  }

  .faq-accordion .accordion-item:hover {
    border-color: rgba(163, 150, 107, 0.25);
    box-shadow: 0 10px 28px rgba(78, 76, 59, 0.1);
  }

  .faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
  }

  .faq-accordion .accordion-header .accordion-button {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 21px 68px 21px 22px;
    box-shadow: none;
    transition:
      color 0.28s ease,
      background-color 0.28s ease;
  }

  .faq-accordion .accordion-header .accordion-button.collapsed:hover {
    color: var(--accent-color);
  }

  .faq-accordion .accordion-header .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
  }

  .faq-accordion .accordion-header .accordion-button:focus-visible {
    outline: 3px solid rgba(163, 150, 107, 0.3);
    outline-offset: -4px;
  }

  .faq-accordion .accordion-item .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #998d67 0%, var(--accent-color) 100%);
    color: var(--white-color);
    box-shadow: none;
  }

  .faq-accordion .accordion-item .accordion-button::after,
  .faq-accordion .accordion-item .accordion-button.collapsed::after {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 34px;
    height: 34px;
    font-size: 15px;
    font-weight: 900;
    line-height: 34px;
    text-align: center;
    background-image: none;
    background-color: rgba(163, 150, 107, 0.14);
    border: 1px solid rgba(163, 150, 107, 0.28);
    border-radius: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: var(--primary-color);
    transition:
      color 0.28s ease,
      background-color 0.28s ease,
      border-color 0.28s ease,
      transform 0.32s ease;
  }

  .faq-accordion .accordion-item .accordion-button.collapsed:hover::after {
    background-color: rgba(163, 150, 107, 0.24);
  }

  .faq-accordion .accordion-button:not(.collapsed)::after {
    content: "\f068";
    color: var(--white-color);
    background-color: rgba(255, 253, 248, 0.16);
    border-color: rgba(255, 253, 248, 0.36);
    transform: translateY(-50%) rotate(180deg);
  }

  .faq-accordion .accordion-item .accordion-body {
    background: rgba(247, 245, 236, 0.45);
    color: var(--text-color);
    border-top: 1px solid rgba(163, 150, 107, 0.16);
    padding: 20px 22px 22px;
  }

  .faq-accordion .accordion-collapse.collapsing {
    transition: height 0.32s ease;
  }

  .faq-accordion .accordion-item .accordion-body p:last-child {
    margin: 0;
  }

  @supports not (
    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
  ) {
    .faq-cta-box {
      background: rgba(255, 255, 255, 0.9);
    }
  }

  .page-faqs {
    padding: var(--section-space) 0;
  }

  .faq-sidebar {
    position: sticky;
    top: 20px;
    margin-right: 20px;
  }

  .faq-catagery-list {
    background-color: var(--secondary-color);
    border-radius: 30px;
    padding: 30px;
  }

  .faq-catagery-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .faq-catagery-list ul li {
    position: relative;
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-right: 25px;
  }

  .faq-catagery-list ul li:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .faq-catagery-list ul li:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateY(6px);
    background: url("/assets/images/home/arrow-blue.svg") no-repeat center
      center;
    background-size: 12px auto;
    width: 14px;
    height: 14px;
    transition: all 0.3s ease-in-out;
  }

  .faq-catagery-list ul li:hover:before {
    transform: translateY(6px) rotate(45deg);
  }

  .faq-catagery-list ul li a {
    color: var(--primary-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
  }

  .faq-catagery-list ul li:hover a {
    color: var(--accent-color);
  }

  .page-faqs .faqs-section {
    margin-bottom: 60px;
  }

  .page-faqs .faqs-section:last-child {
    margin-bottom: 0;
  }

  .page-faqs .faqs-section-title {
    margin-bottom: 30px;
  }

  .page-faqs .faq-accordion .accordion-item {
    border: 2px solid var(--dark-divider-color);
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .page-faqs .faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
  }

  .page-faqs .faq-accordion .accordion-item .accordion-button::after,
  .page-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    bottom: auto;
    transform: translate(-20px, -50%) rotate(135deg);
    background-image: url("/assets/images/home/arrow-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8px auto;
    border-radius: 50%;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    transition: all 0.3s ease-in-out;
  }

  .page-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after {
    transform: translate(-20px, -50%) rotate(45deg);
  }

  .page-faqs .accordion-header .accordion-button {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    text-transform: capitalize;
    padding: 15px 50px 15px 20px;
  }

  .page-faqs .accordion-body {
    padding: 0 20px 20px 20px;
  }

  .page-faqs .accordion-body p {
    margin: 0;
  }

  /***************************************/
  /***  27. Make Appointment Page css  ***/
  /***************************************/

  .page-book-appointment {
    padding: var(--section-space) 0;
  }

  .page-book-appointment .book-appointment-form {
    max-width: 1050px;
    margin: 0 auto;
    box-shadow: 0px 4px 40px 0px #0000000f;
    border: 1px solid var(--dark-divider-color);
    border-radius: 30px;
    padding: 40px;
  }

  .book-appointment-form .section-title {
    text-align: center;
  }

  .book-appointment-form .appointment-form {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }

  .appointment-form .form-control {
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid var(--dark-divider-color);
    border-radius: 10px;
    color: var(--primary-color);
    box-shadow: none;
  }

  .appointment-form .appointment-status,
  .contact-form .appointment-status,
  .appointment-status {
    max-width: 520px;
    margin: 16px auto 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .appointment-form .appointment-status-success,
  .contact-form .appointment-status-success,
  .appointment-status-success {
    color: #218653;
  }

  .appointment-form .appointment-status-error,
  .contact-form .appointment-status-error,
  .appointment-status-error {
    color: #b42318;
  }

  /************************************/
  /*** 	   28. 404 Page css       ***/
  /************************************/

  .error-page {
    padding: var(--section-space) 0;
  }

  .error-page-image {
    text-align: center;
    margin-bottom: 30px;
  }

  .error-page .error-page-content {
    text-align: center;
  }

  .error-page-content-heading {
    margin-bottom: 30px;
  }

  .error-page-content-heading h2 {
    font-size: 44px;
  }

  .error-page-content-heading h2 span {
    color: var(--accent-color);
  }

  .error-page-content-body p {
    margin-bottom: 30px;
  }

  /************************************/
  /***     29. responsive css       ***/
  /************************************/

  @media only screen and (max-width: 1199px) {
    .our-services .row:not(.section-row) {
      row-gap: 24px;
    }

    .service-item-list {
      width: 100%;
    }

    .service-item {
      min-width: 0;
    }

    .service-item-content {
      min-width: 0;
    }

    .service-item-content h2,
    .service-item-content p,
    .service-cta-content-title h3 {
      overflow-wrap: anywhere;
    }

    .service-cta-box {
      height: auto;
    }

    .service-cta-box-image,
    .service-cta-box-image figure {
      height: auto;
    }

    .service-cta-box-image figure img {
      display: block;
      height: auto;
      max-width: 100%;
      aspect-ratio: auto;
      object-fit: contain;
    }

    .service-cta-box-content {
      bottom: 24px;
      left: 20px;
      right: 20px;
    }

    .service-cta-content-btn .btn-default {
      min-height: 44px;
      white-space: normal;
    }
  }

  @media only screen and (max-width: 1024px) {
    .navbar {
      padding: 20px 0px;
    }

    .main-menu ul li {
      margin: 0;
    }
  }

  @media only screen and (max-width: 991px) {
    :root {
      --section-space: 30px;
    }

    #magic-cursor {
      display: none !important;
    }

    .slicknav_nav li,
    .slicknav_nav ul {
      display: block;
    }

    .responsive-menu,
    .navbar-toggle {
      display: block;
    }

    .section-row {
      margin-bottom: 40px;
    }

    .section-title {
      margin-bottom: 30px;
    }

    .section-title h1 {
      font-size: 44px;
    }

    .section-title h2 {
      font-size: 36px;
    }

    .section-title p {
      margin-top: 15px;
    }

    .section-btn {
      text-align: left;
      margin-top: 20px;
    }

    .hero-image-column {
      order: -1;
      margin-bottom: 30px;
    }

    .hero-content {
      padding-right: 0px;
      margin-bottom: 30px;
    }

    .hero-content-body {
      padding-bottom: 20px;
      margin-bottom: 20px;
    }

    .hero-image {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .hero-img {
      text-align: center;
    }

    .hero-img img {
      max-width: 60%;
    }

    .export-dantist-box {
      transform: translateY(-50px);
    }

    .export-dantist-box .icon-box img {
      max-width: 58px;
    }

    .export-dantist-content {
      width: calc(100% - 68px);
    }

    .hero-icon-list .hero-icon-box-1 {
      top: 60px;
      right: 60px;
      transform: translate(-50%, 50%);
      width: 70px;
      height: 70px;
    }

    .hero-icon-list .hero-icon-box-2 {
      top: 50%;
      bottom: 0;
      left: 100px;
      transform: translate(50%, -50%);
      width: 70px;
      height: 70px;
    }

    .hero-icon-list .hero-icon-box-2 {
      top: 50%;
      bottom: 0;
      left: 100px;
      transform: translate(50%, -50%);
      width: 70px;
      height: 70px;
    }

    .hero-icon-list .hero-icon-box-3 {
      right: 0;
      bottom: 0;
      transform: translate(-100px, -50%);
      width: 70px;
      height: 70px;
    }
    .hero-icon-list .hero-icon-box-1 img,
    .hero-icon-list .hero-icon-box-2 img,
    .hero-icon-list .hero-icon-box-3 img {
      max-width: 40px;
    }

    .hero.hero-book-appointment {
      padding: 50px 0;
    }

    .hero-book-appointment .appointment-form {
      padding: 30px;
      margin-left: 0px;
    }

    .hero-appointment-form-title h2 {
      font-size: 32px;
    }

    .hero.bg-image {
      padding: 100px 0;
    }

    .hero.bg-image .hero-content .section-title h1 {
      font-size: 60px;
    }

    .hero-slider-layout .hero-slide {
      padding: 100px 0;
    }

    .hero-slider-layout .swiper-pagination {
      bottom: 40px;
    }

    .cta-box {
      padding: 14px 0;
    }

    .cta-box-btn {
      text-align: center;
      margin-top: 30px;
    }

    .cta-box-content :is(h2, h3) {
      font-size: 18px;
    }

    .about-image {
      max-width: 560px;
      margin-right: 0px;
      margin: 0 auto;
      margin-bottom: 30px;
      padding-bottom: 150px;
    }

    .about-us-body {
      margin-bottom: 30px;
    }

    .service-item {
      padding: 20px;
    }

    .service-item .icon-box {
      margin-bottom: 15px;
    }

    .service-body {
      margin-bottom: 15px;
    }

    .service-body h3 {
      margin-bottom: 15px;
    }

    .services-box-footer {
      margin-top: 10px;
      text-align: center;
    }

    .visit-clinic {
      padding: 100px 0;
    }

    .visit-clinic-content {
      max-width: 550px;
    }

    .counter-title h2 {
      font-size: 36px;
    }

    .counter-title {
      margin-bottom: 15px;
      padding-bottom: 15px;
    }

    .why-choose-us-content {
      margin-bottom: 30px;
    }

    .why-choose-image-box {
      max-width: 740px;
      margin: 0 auto 0 15px;
    }

    .how-it-work-img {
      margin-bottom: 30px;
    }

    .how-it-work-img img {
      aspect-ratio: 1 / 0.85;
    }

    .how-it-work-content {
      margin-left: 0px;
    }

    .faq-accordion.how-work-accordion .accordion-item {
      padding-bottom: 20px;
      margin-bottom: 20px;
    }

    .faq-accordion.how-work-accordion .accordion-item .icon-box {
      top: 0px;
    }

    .testimonial-image {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      margin-bottom: 30px;
    }

    .testimonial-img {
      text-align: center;
    }

    .testimonial-rating-box {
      max-width: 420px;
      padding: 20px;
    }

    .rating-counter-item {
      margin-bottom: 15px;
    }

    .rating-counter-item .rating-counter-number {
      min-width: 100px;
    }

    .rating-counter-item .rating-counter-number h3 {
      font-size: 34px;
    }

    .rating-counter-item .rating-counter-content {
      width: calc(100% - 120px);
    }

    .service-rating ul li {
      margin-right: 15px;
    }

    .testimonial-item .testimonial-quote-image {
      margin-bottom: 20px;
    }

    .testimonial-item .testimonial-content {
      margin-bottom: 20px;
    }

    .testimonial-content p {
      font-size: 16px;
    }

    .testimonial-btn {
      margin-top: 30px;
    }

    .our-blog .icon-star-image {
      top: 40%;
      transform: translate(0%, -50%);
    }

    .blog-item .post-featured-image {
      margin-bottom: 20px;
    }

    .post-item-body h2 {
      margin-bottom: 15px;
    }

    .post-item-footer a.read-more-btn {
      padding-right: 30px;
    }

    .post-item-footer a.read-more-btn::after {
      top: 0;
      background-size: 8px auto;
      width: 20px;
      height: 20px;
    }

    .contact-google-map .google-map-iframe {
      margin-bottom: 30px;
    }

    .contact-google-map .google-map-iframe,
    .contact-google-map .google-map-iframe iframe {
      height: 450px;
    }

    .contact-now-content {
      margin-left: 0px;
    }

    .contact-now-info {
      margin-bottom: 30px;
    }

    .contact-info-list {
      margin-bottom: 20px;
    }

    footer.main-footer {
      padding: 50px 0 0;
    }

    .about-footer {
      margin-bottom: 40px;
    }

    .footer-logo {
      margin-bottom: 20px;
    }

    .footer-quick-links,
    .footer-social-links {
      margin-left: 0;
    }

    .footer-copyright {
      margin-top: 40px;
      padding: 20px 0;
    }

    .page-header {
      background-size: contain;
    }

    .page-header-box h1 {
      font-size: 44px;
      margin-bottom: 10px;
    }

    .insurance-carousel-title {
      margin-bottom: 30px;
    }

    .insurance-carousel-title h3 {
      font-size: 22px;
    }

    .company-carousel .swiper-wrapper .swiper-slide .company-logo img {
      max-width: 180px;
    }

    .about-how-it-work .how-it-work-img {
      margin-bottom: 0px;
    }

    .about-how-it-work .how-it-work-content {
      margin-right: 0;
      margin-bottom: 30px;
    }

    .dental-process-image {
      margin-bottom: 20px;
    }

    .expertise-experience-content {
      margin-right: 0;
      margin-bottom: 30px;
    }

    .expertise-experience-img img {
      aspect-ratio: 1 / 0.7;
    }

    .service-sidebar {
      margin-right: 0;
      margin-bottom: 30px;
    }

    .service-catagery-list {
      padding: 20px;
      margin-bottom: 30px;
    }

    .service-catagery-list h3 {
      margin-bottom: 20px;
    }

    .sidebar-cta-box {
      padding: 30px;
    }

    .sidebar-cta-box .icon-box {
      margin-bottom: 20px;
    }

    .sidebar-cta-box .cta-content h3 {
      font-size: 30px;
    }

    .service-single-content {
      padding-bottom: 50px;
    }

    .service-entry h2 {
      font-size: 36px;
    }

    .service-entry h3 {
      margin-bottom: 20px;
    }

    .service-entry p {
      margin-bottom: 20px;
    }

    .service-entry ul {
      margin-bottom: 20px;
    }

    .service-entry-image {
      margin-bottom: 20px;
    }

    .faqs-section-title {
      margin-bottom: 40px;
    }

    .faqs-section-title h2 {
      font-size: 36px;
    }

    .service-faqs .accordion-header .accordion-button {
      font-size: 18px;
    }

    .page-blog .blog-item {
      height: calc(100% - 30px);
      margin-bottom: 30px;
    }

    .post-pagination {
      margin-top: 10px;
    }

    .post-single-meta ol li i {
      font-size: 20px;
    }

    .post-image {
      margin-bottom: 20px;
    }

    .post-entry blockquote {
      background: var(--secondary-color)
        url("/assets/images/home/icon-blockquote.svg") no-repeat 30px 35px;
      background-size: 45px;
      padding: 25px 25px 25px 90px;
      margin-bottom: 20px;
    }

    .post-entry blockquote p {
      font-size: 18px;
    }

    .post-entry h2 {
      font-size: 36px;
    }

    .post-entry ul li {
      font-size: 16px;
    }

    .post-tag-links {
      padding: 0 0px;
    }

    .post-tags {
      margin-bottom: 10px;
    }

    .post-social-sharing ul {
      text-align: left;
    }

    .post-tags .tag-links a {
      font-size: 16px;
      padding: 8px 15px;
    }

    .page-team-single {
      padding: 50px 0 25px;
    }

    .page-team-single .row {
      border-radius: 40px 40px 30px 30px;
    }

    .team-member-image img {
      border-radius: 30px 30px 0 0px;
    }

    .team-member-details {
      margin-left: 0px;
      padding: 30px;
    }

    .member-detail-header {
      margin-bottom: 30px;
    }

    .member-detail-header h2 {
      font-size: 28px;
    }

    .member-detail-content {
      margin-bottom: 30px;
    }

    .member-detail-body {
      margin-bottom: 30px;
    }

    .about-member-details {
      padding: 25px 0 50px;
    }

    .about-member-info {
      padding: 30px;
    }

    .member-info-title {
      margin-bottom: 20px;
    }

    .member-info-title h2 {
      font-size: 28px;
    }

    .member-winning-awards {
      padding: 30px;
      margin-bottom: 30px;
    }

    .winning-award-img.img-box-1,
    .winning-award-img.img-box-2 {
      padding-bottom: 25px;
    }

    .winning-award-img.img-box-4,
    .winning-award-img.img-box-3 {
      padding-top: 25px;
    }

    .winning-awards-content h2 {
      font-size: 28px;
      margin-bottom: 20px;
    }

    .team-member-skills {
      padding: 30px;
    }

    .member-skills-title {
      margin-bottom: 20px;
    }

    .member-skills-title h2 {
      font-size: 28px;
    }

    .skillbar .skill-data {
      margin-bottom: 10px;
    }

    .skillbar .skill-data .skill-title {
      font-size: 18px;
    }

    .skillbar .skill-data .skill-no {
      font-size: 20px;
    }

    .team-sidebar-cta {
      padding: 30px;
    }

    .cta-info-content {
      display: block;
    }

    .cta-info-content .icon-box {
      margin-right: 0;
      margin-bottom: 20px;
    }

    .cta-info-content .cta-content {
      width: 100%;
    }

    .cta-info-content .cta-content p {
      margin-bottom: 20px;
    }

    .techonology-image-box {
      margin-bottom: 30px;
    }

    .techonology-content .section-title h2 {
      max-width: 100%;
    }

    .testimonial-box-item {
      padding: 20px;
    }

    .testimonial-box-item .testimonial-box-header {
      margin-bottom: 15px;
    }

    .testimonial-quote-img {
      margin-bottom: 15px;
    }

    .testimonial-box-header .testimonial-rating {
      margin-bottom: 15px;
    }

    .contact-us-content {
      margin-right: 0px;
    }

    .contact-us-item {
      padding: 20px;
    }

    .google-map-iframe,
    .google-map-iframe iframe {
      height: 500px;
    }

    .contact-us-img {
      margin-bottom: 30px;
    }

    .contact-us-img img {
      aspect-ratio: 1 / 0.9;
    }

    .contact-form {
      margin-left: 0;
    }

    .contact-form .form-control {
      padding: 12px 20px;
    }

    .faq-sidebar {
      margin-right: 0px;
      margin-bottom: 30px;
    }

    .faq-catagery-list {
      padding: 20px;
    }

    .faq-catagery-list ul li {
      margin-bottom: 15px;
      padding-bottom: 15px;
    }

    .page-faqs .faqs-section {
      margin-bottom: 40px;
    }

    .page-faqs .accordion-header .accordion-button {
      font-size: 18px;
    }

    .page-book-appointment .book-appointment-form {
      padding: 30px;
    }

    .appointment-form .form-control {
      padding: 12px 20px;
    }

    .error-page-image {
      margin-bottom: 20px;
    }

    .error-page-content-heading {
      margin-bottom: 20px;
    }

    .error-page-content-heading h2 {
      font-size: 36px;
    }

    .error-page-content-body p {
      margin-bottom: 20px;
    }
  }

  @media only screen and (max-width: 767px) {
    .section-row {
      margin-bottom: 30px;
    }

    .section-title {
      margin-bottom: 20px;
    }

    .section-title h1 {
      font-size: 34px;
    }

    .section-title h2 {
      font-size: 28px;
    }

    .google-rating ul {
      text-align: center;
    }

    .google-rating ul li {
      margin-right: 5px;
    }

    .google-rating ul li:last-child {
      width: 100%;
    }

    .hero-img img {
      max-width: 80%;
    }

    .export-dantist-box {
      transform: translateY(-20px);
    }

    .export-dantist-box .icon-box img {
      max-width: 48px;
    }

    .export-dantist-content {
      width: calc(100% - 58px);
    }

    .export-dantist-content h3 {
      font-size: 16px;
      margin-bottom: 0;
    }

    .hero-icon-list .hero-icon-box-1 {
      top: 30px;
      right: 0px;
      width: 60px;
      height: 60px;
    }

    .hero-icon-list .hero-icon-box-2 {
      left: 10px;
      width: 60px;
      height: 60px;
    }

    .hero-icon-list .hero-icon-box-3 {
      transform: translate(-10px, -50%);
      width: 60px;
      height: 60px;
    }

    .hero-icon-list .hero-icon-box-1 img,
    .hero-icon-list .hero-icon-box-2 img,
    .hero-icon-list .hero-icon-box-3 img {
      max-width: 30px;
    }

    .icon-star-image img {
      max-width: 50px;
    }

    .hero-book-appointment .appointment-form {
      padding: 30px 20px;
    }

    .hero-appointment-form-title h2 {
      font-size: 28px;
    }

    .hero.bg-image {
      padding: 50px 0;
    }

    .hero.bg-image .hero-content .section-title h1 {
      font-size: 36px;
    }

    .hero-slider-layout .hero-slide {
      padding: 50px 0 80px;
    }

    .hero-slider-layout .swiper-pagination {
      bottom: 30px;
    }

    .cta-box {
      padding: 16px 0;
    }

    .cta-box-item {
      margin-right: 0px;
      padding-right: 0px;
      border: none;
      margin-bottom: 12px;
      min-height: auto;
    }

    .cta-box .col-lg-4:nth-child(2) .cta-box-item {
      margin-bottom: 0;
    }

    .cta-box-content :is(h2, h3) {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .cta-box-btn {
      display: none;
      text-align: left;
    }

    .about-image {
      max-width: 100%;
      background-size: contain;
      padding-bottom: 80px;
    }

    .about-img-1 {
      width: 100%;
    }

    .about-img-2 {
      width: 250px;
    }

    .about-experience {
      position: absolute;
      top: auto;
      right: auto;
      bottom: 0;
      transform: translate(50px, -30px);
    }

    .about-experience img {
      max-width: 100px;
    }

    .about-us-body ul {
      display: block;
    }

    .about-us-body ul li {
      width: 100%;
      margin-bottom: 15px;
    }

    .about-us-body ul li:last-child {
      margin-bottom: 0;
    }

    .service-body h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .visit-clinic {
      padding: 50px 15px;
    }

    .counter-title h2 {
      font-size: 28px;
    }

    .counter-title h3 {
      font-size: 18px;
    }

    .counter-title {
      margin-bottom: 10px;
      padding-bottom: 10px;
    }

    .why-choose-image-box {
      margin: 0 auto;
    }

    .why-choose-image-box-1 {
      position: static;
      width: 100%;
    }

    .why-choose-image-1 figure img {
      aspect-ratio: 1 / 1.17;
    }

    .why-choose-image-2 {
      margin: -80px 18% 0;
    }

    .why-choose-image-box-2 {
      width: 100%;
      flex-direction: row;
    }

    .why-choose-counter-list {
      width: calc(50% - 10px);
      min-width: 0;
      align-content: center;
      padding: 10px 0 10px 5px;
    }

    .why-choose-counter-item {
      border-bottom-color: var(--dark-divider-color);
      margin-bottom: 20px;
      padding-bottom: 20px;
    }

    .why-choose-counter-item h2 {
      font-size: 26px;
    }

    .why-choose-counter-item p {
      margin-top: 5px;
    }

    .why-choose-image-3 {
      width: calc(50% - 10px);
      min-width: 0;
    }

    .why-choose-image-3 figure,
    .why-choose-image-3 figure img {
      height: 100%;
    }

    .faq-accordion.how-work-accordion .accordion-item .icon-box img {
      max-width: 35px;
    }

    .faq-accordion.how-work-accordion .accordion-item .accordion-button {
      font-size: 18px;
      padding: 5px 30px 5px 50px;
    }

    .faq-accordion.how-work-accordion
      .accordion-header
      .accordion-button::after {
      font-size: 18px;
    }

    .faq-accordion.how-work-accordion .accordion-item .accordion-body {
      padding: 10px 30px 0px 0px;
    }

    .our-team .icon-star-image {
      transform: translate(-10px, -50%);
    }

    .team-content h3 {
      font-size: 18px;
    }

    .testimonial-img {
      margin-bottom: 20px;
    }

    .testimonial-rating-box {
      max-width: 300px;
      padding: 15px;
      left: 0;
      margin: 0 auto;
    }

    .rating-counter-item .rating-counter-number {
      min-width: 70px;
      margin-right: 10px;
    }

    .rating-counter-item .rating-counter-content {
      width: calc(100% - 80px);
    }

    .rating-counter-item .rating-counter-content p {
      font-size: 14px;
    }

    .rating-counter-item .rating-counter-number h3 {
      font-size: 24px;
    }

    .service-rating ul li {
      font-size: 14px;
      margin-right: 10px;
    }

    .service-rating ul li i {
      font-size: 12px;
    }

    .testimonial-item .testimonial-quote-image img {
      max-width: 40px;
    }

    .testimonial-body .author-content h3 {
      font-size: 18px;
    }

    .our-blog .icon-star-image {
      top: 43%;
    }

    .post-item-body {
      margin-bottom: 10px;
    }

    .post-item-body h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .contact-google-map .google-map-iframe,
    .contact-google-map .google-map-iframe iframe {
      height: 350px;
    }

    .footer-quick-links,
    .footer-social-links {
      margin-bottom: 40px;
    }

    .footer-links h3 {
      margin-bottom: 15px;
    }

    .footer-copyright {
      padding: 10px 0;
    }

    .page-header-box h1 {
      font-size: 34px;
    }

    .insurance-carousel-title {
      margin-bottom: 20px;
    }

    .insurance-carousel-title h3 {
      font-size: 20px;
    }

    .company-carousel .swiper-wrapper .swiper-slide .company-logo img {
      max-width: 150px;
    }

    .dental-process-image .dental-process-number h3 {
      font-size: 18px;
    }

    .dental-process-item .dental-process-content h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .expertise-experience-body ul li {
      width: 100%;
    }

    .service-catagery-list h3 {
      font-size: 18px;
    }

    .sidebar-cta-box {
      padding: 20px;
    }

    .sidebar-cta-box .cta-content h3 {
      font-size: 24px;
    }

    .service-entry ul {
      display: block;
    }

    .service-entry ul li {
      width: 100%;
      margin-bottom: 15px;
    }

    .service-entry ul li:last-child {
      margin-bottom: 0px;
    }

    .service-entry-img-1 {
      margin-bottom: 20px;
    }

    .faqs-section-title {
      margin-bottom: 20px;
    }

    .faqs-section-title h2 {
      font-size: 28px;
    }

    .service-faqs .accordion-header .accordion-button {
      font-size: 16px;
      padding: 10px 40px 10px 10px;
    }

    .service-faqs .faq-accordion .accordion-item .accordion-button::after,
    .service-faqs
      .faq-accordion
      .accordion-item
      .accordion-button.collapsed::after {
      height: 20px;
      width: 20px;
      transform: translate(-10px, -50%) rotate(135deg);
    }

    .service-faqs
      .faq-accordion
      .accordion-item
      .accordion-button.collapsed::after {
      transform: translate(-10px, -50%) rotate(45deg);
    }

    .service-faqs .accordion-body {
      padding: 0 10px 10px 10px;
    }

    .post-single-meta ol li i {
      font-size: 18px;
    }

    .post-image figure,
    .post-image img {
      aspect-ratio: 1 / 0.7;
    }

    .post-entry blockquote {
      background: var(--secondary-color)
        url(/assets/images/home/icon-blockquote.svg) no-repeat 20px 20px;
      background-size: 35px;
      padding: 55px 20px 20px 20px;
    }

    .post-entry h2 {
      font-size: 28px;
    }

    .tag-links {
      font-size: 20px;
    }

    .team-member-details {
      padding: 20px;
    }

    .member-detail-header {
      margin-bottom: 20px;
    }

    .member-detail-header h2 {
      font-size: 24px;
    }

    .member-detail-content p {
      font-size: 16px;
    }

    .member-detail-body {
      margin-bottom: 20px;
    }

    .member-detail-body ul li {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .member-detail-body ul li span {
      width: 45%;
      font-weight: 500;
    }

    .about-member-info {
      padding: 20px;
    }

    .member-info-title h2 {
      font-size: 24px;
    }

    .member-winning-awards {
      padding: 20px;
    }

    .winning-awards-content h2 {
      font-size: 24px;
    }

    .winning-award-img.img-box-2,
    .winning-award-img.img-box-1 {
      padding-bottom: 20px;
    }

    .winning-award-img.img-box-4,
    .winning-award-img.img-box-3 {
      padding-top: 20px;
    }

    .winning-award-img img {
      max-height: 120px;
    }

    .team-member-skills {
      padding: 20px;
    }

    .member-skills-title h2 {
      font-size: 24px;
    }

    .team-member-skills .skills-progress-bar {
      margin-bottom: 25px;
    }

    .skillbar .skill-data .skill-title {
      font-size: 16px;
    }

    .skillbar .skill-data .skill-no {
      font-size: 18px;
    }

    .team-sidebar-cta {
      padding: 20px;
    }

    .cta-info-content .icon-box {
      width: 50px;
      height: 50px;
    }

    .cta-info-content .icon-box img {
      max-width: 30px;
    }

    .techonology-image-box {
      gap: 10px;
      margin-bottom: 20px;
    }

    .testimonial-box-body .author-box-content h3 {
      font-size: 18px;
    }

    .contact-us-content {
      margin-bottom: 30px;
    }

    .contact-us-info .col-lg-6:last-child .contact-us-item {
      margin-bottom: 0;
      height: auto;
    }

    .contact-us-item .icon-box {
      margin-bottom: 15px;
    }

    .contact-us-item .contact-info-content h3 {
      font-size: 18px;
      margin-bottom: 15px;
    }

    .google-map-iframe,
    .google-map-iframe iframe {
      height: 350px;
    }

    .page-faqs .faqs-section {
      margin-bottom: 30px;
    }

    .page-faqs .faqs-section-title {
      margin-bottom: 20px;
    }

    .page-faqs .accordion-header .accordion-button {
      font-size: 16px;
      padding: 10px 40px 10px 10px;
    }

    .page-faqs .faq-accordion .accordion-item .accordion-button::after,
    .page-faqs
      .faq-accordion
      .accordion-item
      .accordion-button.collapsed::after {
      height: 20px;
      width: 20px;
      transform: translate(-10px, -50%) rotate(135deg);
    }

    .page-faqs
      .faq-accordion
      .accordion-item
      .accordion-button.collapsed::after {
      transform: translate(-10px, -50%) rotate(45deg);
    }

    .page-faqs .accordion-body {
      padding: 0 10px 10px 10px;
    }

    .page-book-appointment .book-appointment-form {
      padding: 20px;
    }

    .error-page-content-heading h2 {
      font-size: 28px;
    }
  }

  @media only screen and (max-width: 575px) {
    :root {
      --section-space: 24px;
    }

    .faq-content-box .section-title :is(h3, .section-eyebrow) {
      margin-top: 20px;
    }
    .our-services .container {
      padding-left: 15px;
      padding-right: 15px;
    }

    .service-item-list {
      gap: 14px;
    }

    .service-item {
      width: 100%;
      padding: 18px;
    }

    .service-item .icon-box {
      margin-bottom: 12px;
    }

    .service-item .icon-box img {
      max-width: 52px;
    }

    .service-item-content h2 {
      font-size: 17px;
    }

    .service-item-content p {
      font-size: 14px;
      line-height: 1.55;
    }

    .service-cta-box-content {
      bottom: 18px;
      left: 18px;
      right: 18px;
    }

    .service-cta-content-title {
      margin-bottom: 16px;
    }

    .service-cta-content-title h3 {
      font-size: 17px;
    }

    .intro-clinic-video {
      padding-left: 15px;
      padding-right: 15px;
    }

    .visit-clinic {
      border-radius: 24px;
      padding: 64px 15px;
    }

    .visit-clinic::before {
      border-radius: 24px;
    }

    .visit-clinic-btn .play-btn {
      min-height: 44px;
    }

    .faq-cta-box {
      bottom: 15px;
      left: auto;
      right: 15px;
      width: calc(100% - 30px);
      padding: 22px;
      border-radius: 16px;
    }

    .faq-cta-box-title h2 {
      font-size: 18px;
    }

    .faq-cta-contact-list {
      margin-top: 18px;
      padding-top: 18px;
    }

    .faq-accordion .accordion-item {
      border-radius: 15px;
      margin-bottom: 14px;
    }

    .faq-accordion .accordion-header .accordion-button {
      font-size: 16px;
      padding: 19px 62px 19px 18px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
      right: 16px;
      width: 32px;
      height: 32px;
      line-height: 32px;
    }

    .faq-accordion .accordion-item .accordion-body {
      padding: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-accordion .accordion-item,
    .faq-accordion .accordion-button,
    .faq-accordion .accordion-button::after,
    .faq-accordion .accordion-collapse,
    .faq-accordion .accordion-body {
      animation: none !important;
      transition: none !important;
    }
  }
} /* End original screen styles (sections 01-29). */

/******************************************************************************
 * 30. Local Poppins Fonts
 * Consolidated from fonts.css; edit this section directly.
 ******************************************************************************/

/* Poppins, SIL Open Font License; see /fonts/Poppins-OFL.txt. */
/* devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-pxiEyp8kv8JHgFVrJJbecmNE.woff2) format("woff2");
  unicode-range:
    U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-pxiEyp8kv8JHgFVrJJnecmNE.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-pxiEyp8kv8JHgFVrJJfecg.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format("woff2");
  unicode-range:
    U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format("woff2");
  unicode-range:
    U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format("woff2");
  unicode-range:
    U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/******************************************************************************
 * 31. Scroll Entrance Animations (WOW / Animate.css)
 * Consolidated from animate.css; edit this section directly.
 ******************************************************************************/

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

@-webkit-keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }

  25% {
    height: 0%;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

/******************************************************************************
 * 32. Mouse Cursor Effects
 * Consolidated from mousecursor.css; edit this section directly.
 ******************************************************************************/

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
.cb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  contain: layout style size;
  pointer-events: none;
  will-change: transform;
  -webkit-transition:
    opacity 0.3s,
    color 0.4s;
  -o-transition:
    opacity 0.3s,
    color 0.4s;
  -moz-transition:
    opacity 0.3s,
    color 0.4s;
  transition:
    opacity 0.3s,
    color 0.4s;
}

.cb-cursor:before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  display: block;
  width: 48px;
  height: 48px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  background: var(--accent-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition:
    opacity 0.1s,
    -webkit-transform 0.3s ease-in-out;
  transition:
    opacity 0.1s,
    -webkit-transform 0.3s ease-in-out;
  -o-transition:
    opacity 0.1s,
    -o-transform 0.3s ease-in-out;
  -moz-transition:
    transform 0.3s ease-in-out,
    opacity 0.1s,
    -moz-transform 0.3s ease-in-out;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.1s;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.1s,
    -webkit-transform 0.3s ease-in-out,
    -moz-transform 0.3s ease-in-out,
    -o-transform 0.3s ease-in-out;
}

.cb-cursor-text {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: scale(0) rotate(10deg);
  -moz-transform: scale(0) rotate(10deg);
  -ms-transform: scale(0) rotate(10deg);
  -o-transform: scale(0) rotate(10deg);
  transform: scale(0) rotate(10deg);
  opacity: 0;
  color: var(--white-color);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.01em;
  -webkit-transition:
    opacity 0.4s,
    -webkit-transform 0.3s;
  transition:
    opacity 0.4s,
    -webkit-transform 0.3s;
  -o-transition:
    opacity 0.4s,
    -o-transform 0.3s;
  -moz-transition:
    opacity 0.4s,
    transform 0.3s,
    -moz-transform 0.3s;
  transition:
    opacity 0.4s,
    transform 0.3s;
  transition:
    opacity 0.4s,
    transform 0.3s,
    -webkit-transform 0.3s,
    -moz-transform 0.3s,
    -o-transform 0.3s;
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion,
  .cb-cursor.-opaque {
    mix-blend-mode: exclusion;
  }
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion:before,
  .cb-cursor.-opaque:before {
    background: var(--white-color);
  }
}

.cb-cursor.-normal,
.cb-cursor.-text {
  mix-blend-mode: normal;
}

.cb-cursor.-normal:before,
.cb-cursor.-text:before {
  background: currentColor;
}

.cb-cursor.-inverse {
  color: var(--white-color);
}

.cb-cursor.-visible:before {
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}

.cb-cursor.-visible.-active:before {
  -webkit-transform: scale(0.23);
  -moz-transform: scale(0.23);
  -ms-transform: scale(0.23);
  -o-transform: scale(0.23);
  transform: scale(0.23);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.cb-cursor.-pointer:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.cb-cursor.-text:before {
  background: var(--primary-color);
  opacity: 0.8;
  backdrop-filter: blur(10px);
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
}

.cb-cursor.-text .cb-cursor-text {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.cb-cursor.-text.-active:before {
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -ms-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.cb-cursor.-opaque:before {
  -webkit-transform: scale(1.32);
  -moz-transform: scale(1.32);
  -ms-transform: scale(1.32);
  -o-transform: scale(1.32);
  transform: scale(1.32);
}

.cb-cursor.-opaque.-active:before {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.cb-cursor.-lg:before {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

.cb-cursor.-hidden:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

@media (max-width: 991px), (hover: none), (pointer: coarse) {
  .cb-cursor {
    display: none !important;
  }
}

.-color-red {
  color: red;
}

.-color-green {
  color: #51c67d;
}

.cb-demo {
  background: var(--white-color);
}

.cb-demo-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.cb-demo-container {
  padding: 0 20px;
}

@media (min-width: 1600px) {
  .cb-demo-container {
    padding: 0 120px;
  }
}

.cb-demo-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: 30px 0;
}

@media (min-width: 1600px) {
  .cb-demo-row {
    margin: 60px 0;
  }
}

.cb-demo-item {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 50px 30px;
  margin: 0 20px;
  color: #000;
}

@media (min-width: 1600px) {
  .cb-demo-item {
    padding: 90px 30px;
    margin: 0 30px;
  }
}

.cb-demo-item-title {
  position: relative;
  margin: 0 0 25px 0;
  font-size: 30px;
  font-weight: bold;
}

.cb-demo-item-text {
  position: relative;
  max-width: 70%;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
}

.cb-demo-item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: #f8f8f8;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  -moz-transition:
    box-shadow 0.2s,
    -moz-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition:
    box-shadow 0.2s,
    -webkit-box-shadow 0.2s,
    -moz-box-shadow 0.2s;
}

/******************************************************************************
 * 33. Inner Page Logo
 * Consolidated from demo.css; edit this section directly.
 ******************************************************************************/

@media screen {
  :where(.ig-inner-template) .logo {
    margin: 0;
    width: auto;
    height: 60px;
    object-fit: contain;
  }
}

/******************************************************************************
 * 34. Shared Inner Page Components
 * Consolidated from inner-pages.css; edit this section directly.
 ******************************************************************************/

/* Ivory Glow content pages. Shared brand tokens live in custom.css. */
.main-menu a[aria-current="page"] {
  color: var(--accent-color);
}
.ig-inner-page {
  --ig-link-color: var(--accent-color);
}
.ig-inner-page a:focus-visible,
.ig-inner-page summary:focus-visible,
.ig-footer a:focus-visible,
.main-header a:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 5px;
  border-radius: 4px;
}
.ig-skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  padding: 12px 20px;
  z-index: 1000;
  color: var(--white-color);
  background: var(--primary-color);
}
.ig-skip-link:focus {
  top: 12px;
}
.ig-inner-page .btn-default {
  background: var(--ig-link-color);
}
.ig-inner-page .btn-default:hover {
  background: var(--primary-color);
}
.ig-inner-page main [id] {
  scroll-margin-top: 140px;
}
.ig-page-header {
  padding: 74px 0 66px;
}
.ig-page-header h1 {
  max-width: 970px;
  margin: 0 auto 22px;
  font-size: clamp(36px, 4.2vw, 58px);
  letter-spacing: -1.8px;
}
.ig-page-intro {
  max-width: 700px;
  margin: 0 auto 24px;
  text-align: center;
}
.ig-eyebrow {
  color: var(--ig-link-color, var(--accent-color));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ig-page-header .ig-eyebrow {
  text-align: center;
}
.ig-section {
  padding: 88px 0;
}
.ig-tinted {
  background: var(--secondary-color);
}
.ig-inner-page h2 {
  font-size: clamp(30px, 3.1vw, 43px);
  letter-spacing: -1.2px;
  margin-bottom: 24px;
}
.ig-inner-page h2 span {
  color: var(--ig-link-color);
}
.ig-inner-page h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.35px;
}
.ig-section-heading {
  max-width: 730px;
  margin-bottom: 42px;
}
.ig-section-heading p:last-child {
  margin-bottom: 0;
}
.ig-story-image {
  position: relative;
  padding: 0 25px 24px 0;
}
.ig-story-image > img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: 100px 28px 28px 28px;
}
.ig-image-note {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: calc(100% - 24px);
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--white-color);
  padding: 22px 28px;
  border: 1px solid var(--dark-divider-color);
  border-radius: 16px;
  box-shadow: 0 12px 35px #4e4c3b12;
  font-size: 13px;
}
.ig-image-note img {
  flex: 0 0 28px;
}
.ig-image-note strong {
  display: block;
  color: var(--primary-color);
  font-size: 16px;
  margin-top: 3px;
}
.ig-story-copy {
  padding-left: 30px;
}
.ig-check-list {
  padding: 0;
  margin: 24px 0 32px;
  list-style: none;
  display: grid;
  gap: 14px;
}
.ig-check-list li {
  padding-left: 28px;
  position: relative;
  color: var(--primary-color);
  font-size: 15px;
}
.ig-check-list li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--ig-link-color);
}
.ig-value {
  border-top: 1px solid #a3966b66;
  padding: 30px 20px 0 0;
  height: 100%;
}
.ig-number {
  display: block;
  color: var(--ig-link-color);
  font-size: 14px;
  margin-bottom: 25px;
}
.ig-value p {
  margin-bottom: 0;
}
.ig-doctor {
  max-width: 1040px;
  margin: auto;
}
.ig-doctor-image {
  padding-right: 35px;
}
.ig-doctor-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 32px;
  background: var(--secondary-color);
}
.ig-role {
  font-weight: 500;
  color: var(--ig-link-color);
  margin-top: -10px;
}
.ig-doctor-copy > p:not(.ig-role):not(.ig-eyebrow) {
  max-width: 540px;
}
.ig-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}
.ig-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ig-link-color);
  padding: 8px 0;
  text-underline-offset: 5px;
}
.ig-text-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.ig-text-link span {
  font-size: 20px;
}
.ig-cta-section {
  padding-top: 0;
}
.ig-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 48px;
  background: var(--secondary-color);
  border: 1px solid var(--dark-divider-color);
  border-radius: 28px;
}
.ig-cta > div:first-child {
  max-width: 670px;
}
.ig-cta h2 {
  font-size: clamp(28px, 2.8vw, 36px);
  margin-bottom: 14px;
}
.ig-cta p:last-child {
  margin-bottom: 0;
}
.ig-cta .ig-actions {
  flex: 0 0 225px;
  justify-content: center;
  gap: 12px;
}
.ig-category-nav {
  border-bottom: 1px solid var(--dark-divider-color);
}
.ig-category-nav .container {
  display: flex;
  justify-content: center;
  gap: 80px;
}
.ig-category-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  color: var(--primary-color);
  font-weight: 500;
}
.ig-category-nav a:hover {
  color: var(--ig-link-color);
}
.ig-category-nav span {
  margin-left: 16px;
}
.ig-treatment {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  border: 1px solid var(--dark-divider-color);
  border-radius: 22px;
  background: var(--white-color);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.ig-treatment:hover,
.ig-treatment:target {
  border-color: var(--accent-color);
  box-shadow: 0 10px 28px #4e4c3b0a;
}
.ig-treatment-icon {
  object-fit: contain;
  margin-bottom: 25px;
}
.ig-treatment p {
  font-size: 15px;
  margin-bottom: 20px;
}
.ig-treatment .ig-text-link {
  margin-top: auto;
}
.ig-consultation {
  max-width: 1100px;
  margin: auto;
}
.ig-consultation-image {
  width: 100%;
  height: 370px;
  object-fit: cover;
  border-radius: 28px 100px 28px 28px;
}
.ig-consultation-copy {
  padding-left: 45px;
}
.ig-contact-intro {
  max-width: 480px;
  margin-bottom: 36px;
}
.ig-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--dark-divider-color);
}
.ig-contact-line h3 {
  margin-bottom: 12px;
}
.ig-contact-line p {
  font-size: 14px;
  margin: 7px 0 0;
}
.ig-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: var(--secondary-color);
  color: var(--ig-link-color);
  border-radius: 50%;
}
.ig-contact-line address {
  margin-bottom: 8px;
  font-style: normal;
  line-height: 1.9;
}
.ig-phone {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  color: var(--primary-color);
}
.ig-phone:hover {
  color: var(--ig-link-color);
}
.ig-hours-panel {
  padding: 42px;
  background: var(--secondary-color);
  border-radius: 28px;
  border: 1px solid var(--dark-divider-color);
}
.ig-hours-panel > img {
  margin-bottom: 25px;
}
.ig-hours-panel h2 {
  font-size: 32px;
}
.ig-hours {
  margin: 0 0 26px;
}
.ig-hours > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  border-bottom: 1px solid var(--dark-divider-color);
}
.ig-hours dt {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;
}
.ig-hours dt span {
  display: block;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 400;
}
.ig-hours dd {
  font-size: 14px;
  margin: 0;
  text-align: right;
}
.ig-hours-panel > p:not(.ig-eyebrow) {
  font-size: 14px;
}
.ig-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.ig-map-heading h2 {
  margin-bottom: 0;
}
.ig-contact-map {
  overflow: hidden;
  border: 1px solid var(--dark-divider-color);
  border-radius: 24px;
  background: var(--white-color);
}
.ig-contact-map iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 460px;
}
.ig-map-caption {
  font-size: 14px;
  margin: 18px 0 0;
}
.ig-map-caption i {
  margin-right: 8px;
}
.ig-faq-list details {
  border-bottom: 1px solid var(--dark-divider-color);
  padding: 0 0 20px;
  margin-bottom: 22px;
}
.ig-faq-list summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  color: var(--primary-color);
  padding: 8px 0;
}
.ig-faq-list details p {
  margin: 16px 0 0;
  padding-right: 25px;
  font-size: 15px;
}
.ig-faq-list a {
  color: var(--ig-link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ig-footer address,
.ig-footer-hours {
  color: var(--white-color);
  font-size: 13px;
  line-height: 1.9;
  font-style: normal;
}
.ig-footer .footer-logo {
  margin-bottom: 24px;
}
.ig-footer .footer-logo img {
  background: var(--white-color);
  border-radius: 12px;
  padding: 12px 18px;
}
.ig-footer .about-footer-content {
  max-width: 320px;
  font-size: 14px;
}
.ig-footer-link {
  font-size: 14px;
  color: var(--white-color);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.ig-footer-link:hover {
  color: var(--accent-color);
}
.ig-footer-hours {
  margin-top: 20px;
  margin-bottom: 0;
}
.ig-footer .footer-copyright-text p {
  font-size: 13px;
}
@media (max-width: 991px) {
  .ig-section {
    padding: 64px 0;
  }
  .ig-page-header {
    padding: 60px 0;
  }
  .ig-story-image {
    max-width: 580px;
    margin: auto;
  }
  .ig-story-copy,
  .ig-consultation-copy {
    padding-left: 0;
  }
  .ig-cta-section {
    padding-top: 0;
  }
  .ig-cta {
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
  }
  .ig-cta .ig-actions {
    flex-basis: auto;
    justify-content: flex-start;
    gap: 20px;
  }
  .ig-consultation-image {
    max-width: 560px;
  }
  .ig-map-heading {
    flex-wrap: wrap;
  }
}
@media (max-width: 575px) {
  .ig-section {
    padding: 48px 0;
  }
  .ig-page-header {
    padding: 45px 0;
  }
  .ig-page-header h1 {
    letter-spacing: -1px;
  }
  .ig-page-intro {
    font-size: 14px;
  }
  .ig-eyebrow {
    font-size: 11px;
    letter-spacing: 1.4px;
  }
  .ig-inner-page h2 {
    letter-spacing: -0.8px;
  }
  .ig-story-image > img {
    height: 390px;
    border-top-left-radius: 65px;
  }
  .ig-image-note {
    padding: 16px;
    gap: 12px;
  }
  .ig-image-note span {
    font-size: 11px;
  }
  .ig-image-note strong {
    font-size: 14px;
  }
  .ig-doctor-image {
    padding: 0;
    max-width: 340px;
    margin: auto;
  }
  .ig-category-nav .container {
    gap: 24px;
    justify-content: space-around;
  }
  .ig-category-nav a {
    gap: 8px;
    font-size: 13px;
    padding: 20px 0;
  }
  .ig-category-nav a img {
    width: 24px;
    height: 24px;
  }
  .ig-category-nav span {
    display: none;
  }
  .ig-treatment {
    padding: 26px;
  }
  .ig-consultation-image {
    height: 300px;
  }
  .ig-hours-panel {
    padding: 28px 22px;
  }
  .ig-hours > div {
    gap: 10px;
  }
  .ig-hours dt,
  .ig-hours dd {
    font-size: 12px;
  }
  .ig-contact-line {
    gap: 15px;
  }
  .ig-contact-map iframe {
    height: 350px;
  }
  .ig-cta-section {
    padding-top: 0;
  }
  .ig-cta {
    padding: 28px 22px;
    border-radius: 22px;
  }
  .ig-inner-page .ig-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ig-inner-page *,
  .ig-inner-page *::before,
  .ig-inner-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/******************************************************************************
 * 35. Premium Footer and Responsive Footer
 * Consolidated from footer.css; edit this section directly.
 ******************************************************************************/

/* Shared footer, using the site's existing brand tokens and button styling. */
footer.main-footer.ig-premium-footer {
  --footer-ink: var(--white-color);
  --footer-muted: color-mix(
    in srgb,
    var(--white-color) 84%,
    var(--primary-color)
  );
  --footer-highlight: color-mix(
    in srgb,
    var(--accent-color) 75%,
    var(--white-color)
  );
  --footer-rule: var(--divider-color);
  padding: 0;
  color: var(--footer-muted);
  /* background: var(--primary-color) url("/assets/images/home/footer-bg.svg") no-repeat center; */
  background-size: auto;
  font-family: var(--default-font);
  font-size: 14px;
  line-height: 1.8;
}

.ig-premium-footer a {
  color: inherit;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.ig-premium-footer a:hover {
  color: var(--footer-ink);
}

.ig-premium-footer a:focus-visible {
  outline: 2px solid var(--footer-ink);
  outline-offset: 5px;
}

.ig-premium-footer .ig-footer-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--footer-rule);
}

.ig-premium-footer .ig-footer-eyebrow {
  position: relative;
  margin: 0 0 10px;
  padding-left: 20px;
  color: var(--footer-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.ig-premium-footer .ig-footer-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  background: url("/assets/images/home/icon-sub-heading.svg") no-repeat center /
    contain;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
}

.ig-premium-footer .ig-footer-title {
  margin: 0;
  color: var(--footer-ink);
  font-family: var(--default-font);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.8px;
}

.ig-premium-footer .ig-footer-title span {
  color: var(--footer-highlight);
}

.ig-premium-footer .ig-footer-book {
  flex-shrink: 0;
  color: var(--primary-color);
  background: var(--footer-ink);
}

.ig-premium-footer .ig-footer-book:hover {
  color: var(--primary-color);
  background: var(--footer-ink);
}

.ig-premium-footer .ig-footer-book::before {
  background-color: var(--primary-color);
  background-image: url("/assets/images/home/arrow-white.svg");
}

.ig-premium-footer .ig-footer-book::after {
  background: var(--secondary-color);
}

.ig-premium-footer .ig-footer-directions svg {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  color: var(--white-color);
  background: var(--primary-color);
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.ig-premium-footer .ig-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 1.05fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
  padding: 48px 0 42px;
}

.ig-premium-footer .ig-footer-grid > * {
  min-width: 0;
}

.ig-premium-footer .ig-footer-brand-link {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--white-color);
  border-radius: 14px;
}

.ig-premium-footer .ig-footer-brand-link img {
  display: block;
  width: 244px;
  max-width: 100%;
  height: auto;
}

.ig-premium-footer .ig-footer-description {
  max-width: 280px;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

.ig-premium-footer .ig-footer-socials {
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ig-premium-footer .ig-footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--footer-rule);
  border-radius: 50%;
  color: var(--footer-ink);
}

.ig-premium-footer .ig-footer-socials a:hover {
  color: var(--primary-color);
  background: var(--white-color);
  border-color: var(--white-color);
}

.ig-premium-footer .ig-footer-socials svg {
  width: 18px;
  height: 18px;
}

.ig-premium-footer .ig-footer-heading {
  margin: 4px 0 20px;
  color: var(--footer-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
}

.ig-premium-footer .ig-footer-nav-list {
  margin: -7px 0 0;
  padding: 0;
  list-style: none;
}

.ig-premium-footer .ig-footer-nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 0;
}

.ig-premium-footer .ig-footer-nav-list a:hover,
.ig-premium-footer .ig-footer-email:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-color);
  text-underline-offset: 5px;
}

.ig-premium-footer .ig-footer-address {
  margin: 0 0 14px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.9;
}

.ig-premium-footer .ig-footer-directions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 5px 10px 5px 18px;
  color: var(--primary-color);
  background: var(--footer-ink);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.ig-premium-footer .ig-footer-directions:hover {
  color: var(--primary-color);
  background: var(--secondary-color);
}

.ig-premium-footer .ig-footer-directions:hover svg {
  transform: rotate(45deg);
}

.ig-premium-footer .ig-footer-phone {
  display: block;
  width: fit-content;
  padding: 3px 0;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.8;
}

.ig-premium-footer .ig-footer-email {
  display: inline-block;
  max-width: 100%;
  padding: 6px 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ig-footer-timings {
  font-size: 13.5px;
}

.ig-premium-footer .ig-footer-timings {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--footer-rule);
}

.cta-box .ig-footer-timings {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ig-footer-timing-day {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-highlight);
  margin-bottom: 8px;
}

.ig-footer-timing-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ig-footer-timing-slot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ig-footer-slot-tag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--footer-highlight);
  background: color-mix(in srgb, var(--accent-color) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
  min-width: 58px;
  text-align: center;
  line-height: 1.4;
}

.ig-footer-slot-time {
  color: var(--footer-ink);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.ig-footer-timings p {
  margin: 0;
  line-height: inherit;
}

.ig-footer-timings p + p {
  margin-top: 6px;
}

.ig-footer-timings strong {
  color: var(--footer-ink);
  font-weight: 500;
}

.ig-premium-footer .ig-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 22px 0;
  border-top: 1px solid var(--footer-rule);
  font-size: 12px;
}

.ig-premium-footer .ig-footer-bottom p {
  margin: 0;
}

.ig-premium-footer .ig-footer-location {
  color: var(--footer-muted);
}

@media (max-width: 1199px) {
  .ig-premium-footer .ig-footer-grid {
    grid-template-columns: 1.15fr 0.65fr 1fr 1.2fr;
    gap: 26px;
  }
}

@media (max-width: 991px) {
  .ig-premium-footer .ig-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 56px;
    padding: 38px 0;
  }

  .ig-premium-footer .ig-footer-invitation {
    gap: 24px;
    padding: 34px 0;
  }

  .ig-premium-footer .ig-footer-title {
    max-width: 340px;
  }

  .ig-premium-footer .ig-footer-phone {
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .ig-premium-footer > .container {
    padding-right: 24px;
    padding-left: 24px;
  }

  .ig-premium-footer .ig-footer-invitation {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .ig-premium-footer .ig-footer-title {
    max-width: 300px;
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .ig-premium-footer .ig-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 34px 0;
  }

  .ig-premium-footer .ig-footer-description {
    max-width: 340px;
  }

  .ig-premium-footer .ig-footer-heading {
    margin-top: 0;
    margin-bottom: 14px;
  }

  .ig-premium-footer .ig-footer-nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }

  .ig-premium-footer .ig-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0 26px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-premium-footer a,
  .ig-premium-footer a::before,
  .ig-premium-footer a::after,
  .ig-premium-footer .ig-footer-directions svg {
    transition: none;
  }
}

/******************************************************************************
 * 36. Dental and Skin Concern Explorer
 * Consolidated from ivory-concerns.css; edit this section directly.
 ******************************************************************************/

/* Ivory Glow dental concern explorer. */

.ig-concerns {
  padding: 90px 0;
  background: var(--white-color);
  scroll-margin-top: 110px;
}

.ig-concerns-heading {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.ig-concerns-heading p {
  max-width: 680px;
  margin: 20px auto 0;
}

.ig-concern-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.ig-concern-figure {
  overflow: hidden;
  background: var(--secondary-color);
  border: 1px solid var(--dark-divider-color);
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(78, 76, 59, 0.06);
}

.ig-concern-figure-heading,
.ig-concern-figure figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 22px 26px;
}

.ig-concern-eyebrow {
  margin: 0 0 12px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-transform: uppercase;
}

.ig-concern-figure-heading .ig-concern-eyebrow {
  margin: 0;
}

.ig-concern-count {
  padding: 5px 10px;
  border: 1px solid var(--dark-divider-color);
  border-radius: 99px;
  font-size: 11px;
  line-height: 1.5;
}

.ig-concern-image-map {
  position: relative;
  isolation: isolate;
}

.ig-concern-image-link,
.ig-concern-image-link img {
  display: block;
  width: 100%;
}

.ig-concern-image-link img {
  height: auto;
  aspect-ratio: 4 / 3;
}

.ig-concern-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ig-concern-guides g {
  stroke: var(--concern-color, var(--primary-color));
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ig-concern-guides path,
.ig-concern-guides circle {
  vector-effect: non-scaling-stroke;
}

.ig-concern-guides circle {
  fill: rgba(255, 253, 248, 0.18);
}

.ig-concern-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--white-color);
  border-radius: 50%;
  background: var(--concern-color, var(--primary-color));
  box-shadow:
    0 0 0 5px rgba(163, 150, 107, 0.18),
    0 4px 14px rgba(78, 76, 59, 0.16);
  color: var(--white-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  touch-action: manipulation;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.ig-concern-marker:hover,
.ig-concern-marker:focus-visible {
  color: var(--white-color);
  box-shadow:
    0 0 0 8px rgba(163, 150, 107, 0.25),
    0 4px 14px rgba(78, 76, 59, 0.16);
}

.ig-concern-figure figcaption {
  border-top: 1px solid var(--dark-divider-color);
  font-size: 11px;
  line-height: 1.6;
}

.ig-concern-tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 500;
}

.ig-concern-panel {
  padding: 32px;
  border: 1px solid rgba(163, 150, 107, 0.24);
  border-radius: 32px;
  background: linear-gradient(145deg, var(--white-color) 30%, #f8f5eb 100%);
  box-shadow: 0 18px 48px rgba(78, 76, 59, 0.045);
}

.ig-concern-panel > .ig-concern-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--accent-color);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.ig-concern-panel h3 {
  margin-bottom: 14px;
  font-size: clamp(25px, 2.3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.ig-concern-panel h3 span {
  color: var(--accent-color);
}

.ig-concern-panel > p:not(.ig-concern-eyebrow) {
  margin-bottom: 26px;
  font-size: 14px;
}

.ig-concern-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(163, 150, 107, 0.22);
  list-style: none;
}

.ig-concern-list > li {
  border-bottom: 1px solid rgba(163, 150, 107, 0.22);
}

.ig-concern-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 20px 2px;
  background: transparent;
  color: var(--text-color);
}

.ig-concern-card:hover,
.ig-concern-card:focus-visible {
  color: var(--text-color);
}

.ig-concern-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--concern-color, rgba(163, 150, 107, 0.24));
  border-radius: 50%;
  background: var(--white-color);
  color: var(--concern-color, var(--accent-color));
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.ig-concern-card-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  font-size: 13px;
  line-height: 1.6;
}

.ig-concern-card-copy strong {
  color: var(--concern-color, var(--primary-color));
  font-size: 16px;
  font-weight: 600;
  transition: color 0.25s ease;
}

.ig-concern-service {
  margin-top: 5px;
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.ig-concern-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid rgba(163, 150, 107, 0.22);
  border-radius: 50%;
  background: var(--concern-arrow-background, var(--white-color));
  transition: background 0.25s ease;
}

.ig-concern-arrow::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(
      --concern-arrow-image,
      url("/assets/images/home/arrow-blue.svg")
    )
    center / contain no-repeat;
  transform: rotate(var(--concern-arrow-turn, 0deg));
  transition: transform 0.25s ease;
}

.ig-concern-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
}

.ig-concern-panel-footer p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.ig-concern-consultation.btn-default {
  flex-shrink: 0;
  padding: 15px 54px 15px 22px;
  font-size: 13px;
  color: var(--white-color);
  text-decoration: none;
}

/* Link the illustration and legend on hover or keyboard focus, without JS. */
.ig-concern-layout:has([data-concern="decay"]:is(:hover, :focus-visible))
  [data-concern="decay"],
.ig-concern-layout:has([data-concern="chip"]:is(:hover, :focus-visible))
  [data-concern="chip"],
.ig-concern-layout:has([data-concern="crowding"]:is(:hover, :focus-visible))
  [data-concern="crowding"],
.ig-concern-layout:has([data-concern="missing"]:is(:hover, :focus-visible))
  [data-concern="missing"] {
  --concern-color: var(--accent-color);
  --concern-arrow-background: var(--accent-color);
  --concern-arrow-image: url("/assets/images/home/arrow-white.svg");
  --concern-arrow-turn: 45deg;
}

.ig-concerns a:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 5px;
}

.ig-concern-image-link:focus-visible {
  outline-offset: -5px;
}

@media screen and (max-width: 991px) {
  .ig-concerns {
    padding: 60px 0;
  }

  .ig-concerns-heading {
    margin-bottom: 32px;
  }

  .ig-concern-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    max-width: 720px;
    margin-inline: auto;
  }

  .ig-concern-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .ig-concern-card {
    height: 100%;
  }
}

@media screen and (max-width: 575px) {
  .ig-concern-figure {
    border-radius: 24px;
  }

  .ig-concern-figure-heading,
  .ig-concern-figure figcaption {
    padding: 18px;
  }

  .ig-concern-figure-heading .ig-concern-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .ig-concern-count {
    font-size: 10px;
  }

  .ig-concern-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ig-concern-panel {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .ig-concern-card {
    gap: 10px;
    padding-block: 18px;
  }

  .ig-concern-card-copy {
    font-size: 12px;
  }

  .ig-concern-card-copy strong {
    font-size: 15px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px),
  screen and (max-width: 575px) {
  .ig-concern-panel-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .ig-concern-footer-break {
    display: none;
  }

  .ig-concern-consultation.btn-default {
    text-align: center;
    padding-left: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-concern-marker,
  .ig-concern-card,
  .ig-concern-number,
  .ig-concern-card-copy strong,
  .ig-concern-arrow,
  .ig-concern-arrow::before,
  .ig-concern-consultation,
  .ig-concern-consultation::before,
  .ig-concern-consultation::after {
    transition: none;
  }
}

/* Three-angle dental illustration controls. */
.ig-concern-figure.is-rotatable .ig-concern-image-map {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.ig-concern-figure.is-rotatable .ig-concern-image-link {
  position: relative;
  cursor: grab;
}
.ig-concern-figure.is-rotatable .ig-concern-image-link img {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ig-concern-figure.is-rotatable .ig-concern-image-link img.is-current {
  opacity: 1;
}
.ig-concern-angle-image {
  position: absolute;
  inset: 0;
}
.ig-concern-figure .ig-concern-image-map.is-dragging,
.ig-concern-figure .ig-concern-image-map.is-dragging a {
  cursor: grabbing;
}
.ig-concern-image-map[aria-busy="true"] {
  cursor: progress;
}
.ig-concern-view-controls:not([hidden]) {
  display: grid;
  grid-template-columns: 44px minmax(0, 200px) 44px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px 20px;
}
.ig-concern-view-controls button {
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--dark-divider-color);
  background: var(--white-color);
  color: var(--primary-color);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.ig-concern-view-controls .ig-concern-turn {
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ig-concern-turn::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url("/assets/images/home/arrow-blue.svg") center / contain
    no-repeat;
  transform: rotate(45deg);
}
.ig-concern-turn[data-view-step="-1"]::before {
  transform: rotate(225deg);
}
.ig-concern-turn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ig-concern-view-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  border: 1px solid var(--dark-divider-color);
  border-radius: 99px;
  background: var(--white-color);
}
.ig-concern-view-options button {
  border: 0;
  border-radius: 99px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}
.ig-concern-view-controls button:hover:not(:disabled) {
  background: #e9e3d2;
}
.ig-concern-view-options button[aria-pressed="true"],
.ig-concern-view-options button[aria-pressed="true"]:hover {
  background: var(--primary-color);
  color: var(--white-color);
}
.ig-concern-view-controls button:focus-visible,
.ig-concern-image-map:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 5px;
}
.ig-concern-image-map:focus-visible {
  outline-offset: -5px;
}
@media (prefers-reduced-motion: reduce) {
  .ig-concern-view-controls button,
  .ig-concern-figure.is-rotatable .ig-concern-image-link img {
    transition: none;
  }
}

/* Skin concern explorer: concern list left, illustration right. */
.ig-skin-concerns .ig-concern-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.ig-skin-concerns .ig-concern-figure {
  margin: 0;
}
.ig-skin-concerns .ig-concern-image-link img {
  aspect-ratio: 10 / 9;
}
.ig-skin-concerns .ig-concern-card {
  padding-block: 16px;
}
.ig-skin-concerns
  .ig-concern-layout:has([data-concern="hair"]:is(:hover, :focus-visible))
  [data-concern="hair"],
.ig-skin-concerns
  .ig-concern-layout:has(
    [data-concern="pigmentation"]:is(:hover, :focus-visible)
  )
  [data-concern="pigmentation"],
.ig-skin-concerns
  .ig-concern-layout:has([data-concern="lines"]:is(:hover, :focus-visible))
  [data-concern="lines"],
.ig-skin-concerns
  .ig-concern-layout:has([data-concern="pores"]:is(:hover, :focus-visible))
  [data-concern="pores"],
.ig-skin-concerns
  .ig-concern-layout:has([data-concern="dryness"]:is(:hover, :focus-visible))
  [data-concern="dryness"] {
  --concern-color: var(--accent-color);
  --concern-arrow-background: var(--accent-color);
  --concern-arrow-image: url("/assets/images/home/arrow-white.svg");
  --concern-arrow-turn: 45deg;
}
@media screen and (max-width: 991px) {
  .ig-skin-concerns .ig-concern-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ig-skin-concerns .ig-concern-figure {
    grid-row: 1;
  }
}

/******************************************************************************
 * 37. Patient Stories Carousel and Video Dialog
 * Consolidated from patient-stories.css; edit this section directly.
 ******************************************************************************/

/* Patient reels: scoped styles, using the site's ivory / olive / gold palette. */
.ig-stories {
  padding: 96px 0 64px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 60%, #e9e2cd66, transparent 64%),
    var(--white-color);
}

.ig-stories-heading {
  max-width: 800px;
  margin: 0 auto 44px;
  text-align: center;
}
.ig-stories-heading p {
  max-width: 590px;
  margin: 20px auto 0;
}
/* These are slideshow controls, not selectable or editable text. */
.ig-stories-carousel,
.ig-story-dialog {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.ig-stories-carousel a,
.ig-stories-carousel button,
.ig-story-dialog a,
.ig-story-dialog button {
  cursor: pointer;
}
.ig-stories-stage {
  --story-width: 292px;
  --story-step: 214px;
  position: relative;
  height: 554px;
  isolation: isolate;
  touch-action: pan-y;
}
.ig-story {
  position: absolute;
  top: 10px;
  left: 50%;
  width: var(--story-width);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 4px solid var(--white-color);
  border-radius: 24px;
  background: var(--primary-color);
  color: #fffdf8;
  box-shadow: 0 22px 42px -16px #4e4c3b66;
  transform: translateX(-50%);
  transition:
    transform 450ms cubic-bezier(0.22, 0.68, 0.2, 1),
    filter 450ms,
    opacity 450ms,
    box-shadow 300ms;
  -webkit-tap-highlight-color: transparent;
}
.ig-story::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #181a1666 0%,
    transparent 25%,
    transparent 48%,
    #151812e6 100%
  );
}
.ig-story img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig-story[data-position="0"] {
  z-index: 3;
}
.ig-story[data-position="-1"] {
  z-index: 2;
  transform: translateX(calc(-50% - var(--story-step))) scale(0.88);
  filter: blur(0.7px) brightness(0.86);
}
.ig-story[data-position="1"] {
  z-index: 2;
  transform: translateX(calc(-50% + var(--story-step))) scale(0.88);
  filter: blur(0.7px) brightness(0.86);
}
.ig-story[data-position="-2"] {
  z-index: 1;
  transform: translateX(calc(-50% - var(--story-step) * 1.82)) scale(0.75);
  filter: blur(1.6px) brightness(0.78);
}
.ig-story[data-position="2"] {
  z-index: 1;
  transform: translateX(calc(-50% + var(--story-step) * 1.82)) scale(0.75);
  filter: blur(1.6px) brightness(0.78);
}
.ig-story[data-position="3"] {
  z-index: 0;
  transform: translateX(-50%) scale(0.65);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ig-story-badge,
.ig-story-duration,
.ig-story-caption {
  position: absolute;
  z-index: 1;
}
.ig-story-badge {
  top: 17px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #fffdf850;
  border-radius: 30px;
  background: #24251b55;
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.ig-story-badge i {
  font-size: 13px;
}
.ig-story-duration {
  top: 23px;
  right: 17px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ig-story-caption {
  bottom: 25px;
  left: 23px;
  right: 23px;
  display: grid;
  gap: 11px;
}
.ig-story-caption > span:first-child {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #eee4c7;
}
.ig-story-caption strong {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
/* A simple text button echoes the site's rounded appointment buttons. */
.ig-story-watch {
  justify-self: start;
  margin-top: 5px;
  padding: 10px 20px;
  border: 1px solid #fffdf855;
  border-radius: 99px;
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  transition:
    background 200ms,
    color 200ms;
}
.ig-story[data-position="0"]:hover .ig-story-watch,
.ig-story[data-position="0"]:focus-visible .ig-story-watch {
  background: var(--accent-color);
  color: var(--white-color);
}
.ig-story:not([data-position="0"]) .ig-story-watch {
  opacity: 0;
}
.ig-story:hover {
  color: #fffdf8;
}
.ig-stories-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}
.ig-stories-controls[hidden],
.ig-story-error[hidden] {
  display: none;
}
.ig-stories-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #a3966b66;
  border-radius: 50%;
  background: transparent;
  color: var(--primary-color);
  transition:
    background 180ms,
    color 180ms;
}
.ig-stories-arrow svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.ig-stories-arrow:hover {
  background: var(--primary-color);
  color: var(--white-color);
}
.ig-stories-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ig-stories-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
.ig-stories-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 8px;
  background: #a3966b55;
  transition:
    width 200ms,
    background 200ms;
}
.ig-stories-dot[aria-current="true"]::after {
  width: 22px;
  background: var(--accent-color);
}
.ig-stories-rotation {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--dark-divider-color);
  background: transparent;
  color: var(--text-color);
}
.ig-stories-rotation:hover {
  color: var(--accent-color);
}
.ig-stories-rotation svg {
  grid-area: 1 / 1;
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ig-stories-rotation .ig-stories-resume-icon,
.ig-stories-rotation[data-paused="true"] .ig-stories-pause-icon {
  display: none;
}
.ig-stories-rotation[data-paused="true"] .ig-stories-resume-icon {
  display: block;
}
.ig-stories a:focus-visible,
.ig-stories button:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 5px;
}
.ig-story-dialog {
  position: fixed;
  inset: 0;
  width: min(430px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #a3966b88;
  border-radius: 20px;
  background: #191c17;
  color: #fffdf8;
  box-shadow: 0 28px 100px #0006;
}
.ig-story-dialog::backdrop {
  background: #161b16d9;
  backdrop-filter: blur(9px);
}
.ig-story-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px 8px 20px;
}
.ig-story-dialog-header h2 {
  color: #fffdf8;
  font-size: 14px;
  font-weight: 500;
}
.ig-story-close {
  width: 44px;
  height: 44px;
  border: 1px solid #fffdf833;
  border-radius: 50%;
  background: transparent;
  color: #fffdf8;
  font-size: 27px;
  line-height: 1;
}
.ig-story-close:hover {
  background: #fffdf81a;
}
.ig-story-dialog video {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 110px);
  aspect-ratio: 9 / 16;
  background: #000;
}
.ig-story-error {
  margin: 0;
  padding: 16px;
  font-size: 13px;
}
.ig-story-error a {
  color: #eee4c7;
  text-decoration: underline;
}
html.ig-story-open {
  overflow: hidden;
}
@media (max-width: 991px) {
  .ig-stories-stage {
    --story-step: 172px;
    --story-width: 270px;
    height: 516px;
  }
}
@media (max-width: 575px) {
  .ig-stories {
    padding: 64px 0 44px;
  }
  .ig-stories-heading {
    margin-bottom: 30px;
  }
  .ig-stories-heading h3 {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .ig-stories-heading h2 {
    font-size: 32px;
    line-height: 1.2;
  }
  .ig-stories-heading p {
    font-size: 14px;
    margin-top: 16px;
  }
  .ig-stories-stage {
    --story-width: min(66vw, 270px);
    --story-step: 47vw;
    height: min(122vw, 511px);
  }
  .ig-story {
    border-width: 3px;
    border-radius: 20px;
  }
  .ig-story-caption {
    left: 17px;
    right: 17px;
    bottom: 20px;
  }
  .ig-story-caption strong {
    font-size: 21px;
  }
  .ig-story-badge {
    left: 10px;
    top: 12px;
    font-size: 9px;
    gap: 5px;
    padding: 5px 8px;
  }
  .ig-story-duration {
    right: 12px;
    top: 16px;
    font-size: 10px;
  }
  .ig-stories-controls {
    margin-top: 8px;
    gap: 12px;
  }
  .ig-stories-arrow {
    width: 40px;
    height: 40px;
  }
  .ig-stories-dot {
    width: 18px;
  }
  .ig-stories-dot[aria-current="true"]::after {
    width: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ig-stories *,
  .ig-stories *::after {
    transition: none !important;
  }
}

/******************************************************************************
 * 38. About Us Journey
 * Consolidated from about-journey.css; edit this section directly.
 ******************************************************************************/

/* About Us: use the home page's type, colours, button and clinic photography. */
.ig-journey {
  padding: 100px 0;
  background: transparent;
  scroll-margin-top: 110px;
}

.ig-journey-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "heading visual" "steps visual" "actions visual";
  column-gap: clamp(60px, 7vw, 110px);
  align-items: start;
}

.ig-journey .ig-journey-heading {
  grid-area: heading;
  margin-bottom: 32px;
}

.ig-journey .section-title :is(h3, .section-eyebrow) {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.ig-journey .section-title h2 {
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
}

.ig-journey .section-title h2 span {
  color: var(--accent-color);
}
.ig-journey .section-title p {
  max-width: 510px;
  margin: 20px 0 0;
}

.ig-journey-visual {
  grid-area: visual;
  position: relative;
  align-self: center;
  min-width: 0;
  margin: 0 0 24px 28px;
  padding-bottom: 66px;
}

.ig-journey-room {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 180px 24px 24px 24px;
}

.ig-journey-room::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #fffdf89c;
  border-radius: 168px 14px 14px 14px;
  pointer-events: none;
}

.ig-journey-room img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center;
}

.ig-journey-lounge {
  position: absolute;
  width: 48%;
  left: -54px;
  bottom: 0;
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--white-color);
  border-radius: 24px 24px 78px 24px;
}

.ig-journey-lounge img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.ig-journey .ig-journey-photo-note {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 58%;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--accent-color);
  color: var(--primary-color);
  font-size: 12px;
  line-height: 1.7;
}

.ig-journey-photo-note span {
  display: block;
  color: var(--text-color);
  font-size: 11px;
}

.ig-journey-steps {
  grid-area: steps;
  display: grid;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig-journey-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 22px;
}

.ig-journey-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: -13px;
  left: 12px;
  width: 1px;
  background: var(--dark-divider-color);
}

.ig-journey-number {
  padding-top: 1px;
  color: var(--accent-color);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.ig-journey .ig-journey-steps h3 {
  margin: 0 0 7px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
}

.ig-journey-steps p {
  max-width: 450px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.ig-journey-actions {
  grid-area: actions;
  margin-top: 32px;
  padding-left: 52px;
}
.ig-journey .btn-default {
  background: var(--accent-color);
}
.ig-journey .btn-default:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 5px;
}

@media (max-width: 1199px) {
  .ig-journey-layout {
    column-gap: 55px;
  }
  .ig-journey-visual {
    margin-left: 10px;
  }
  .ig-journey-room {
    border-top-left-radius: 140px;
  }
  .ig-journey-room::after {
    border-top-left-radius: 128px;
  }
  .ig-journey-room img {
    height: 530px;
  }
  .ig-journey-lounge {
    left: -30px;
    width: 53%;
  }
  .ig-journey .ig-journey-photo-note {
    width: 53%;
    font-size: 11px;
    padding-left: 12px;
  }
}

@media (max-width: 991px) {
  .ig-journey {
    padding: 70px 0;
  }
  .ig-journey-layout {
    column-gap: 36px;
  }
  .ig-journey .section-title h2 {
    font-size: 36px;
  }
  .ig-journey .section-title p {
    font-size: 14px;
  }
  .ig-journey .ig-journey-steps h3 {
    font-size: 18px;
  }
  .ig-journey-steps li {
    gap: 14px;
  }
  .ig-journey-steps p {
    font-size: 13px;
  }
  .ig-journey-room img {
    height: 490px;
  }
  .ig-journey-room {
    border-top-left-radius: 110px;
  }
  .ig-journey-room::after {
    border-top-left-radius: 98px;
  }
  .ig-journey-actions {
    padding-left: 44px;
  }
  .ig-journey .ig-journey-photo-note {
    bottom: -1px;
    font-size: 10px;
  }
  .ig-journey-photo-note span {
    font-size: 10px;
  }
}

@media (max-width: 767px) {
  .ig-journey {
    padding: 50px 0;
  }
  .ig-journey-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "visual" "steps" "actions";
  }
  .ig-journey .ig-journey-heading {
    margin-bottom: 30px;
  }
  .ig-journey .section-title h2 {
    font-size: 30px;
  }
  .ig-journey-visual {
    width: calc(100% - 25px);
    max-width: 480px;
    margin: 0 0 36px 25px;
    padding-bottom: 48px;
  }
  .ig-journey-room img {
    height: auto;
    aspect-ratio: 1.05;
    object-position: center 58%;
  }
  .ig-journey-room {
    border-radius: 110px 20px 20px 20px;
  }
  .ig-journey-room::after {
    inset: 9px;
    border-radius: 101px 11px 11px 11px;
  }
  .ig-journey-lounge {
    width: 45%;
    left: -30px;
    border-width: 6px;
    border-radius: 18px 18px 52px 18px;
  }
  .ig-journey .ig-journey-photo-note {
    width: 60%;
    bottom: 0;
    font-size: 11px;
  }
  .ig-journey-steps {
    gap: 24px;
  }
  .ig-journey .ig-journey-steps h3 {
    font-size: 18px;
  }
  .ig-journey-steps p {
    max-width: none;
    font-size: 14px;
  }
  .ig-journey-actions {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-journey *,
  .ig-journey *::before,
  .ig-journey *::after {
    transition: none !important;
  }
}

/******************************************************************************
 * 39. About Us Expertise
 * Consolidated from about-expertise.css; edit this section directly.
 ******************************************************************************/

/* Team expertise: shared home page typography and a real clinic photograph. */
.ig-expertise {
  padding: 90px 0 30px;
  background: transparent;
  scroll-margin-top: 110px;
}

.ig-expertise-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}

.ig-expertise-image {
  margin: 0;
  min-width: 0;
}

.ig-expertise-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px 140px 24px 24px;
}

.ig-expertise-image-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #fffdf8a6;
  border-radius: 14px 128px 14px 14px;
  pointer-events: none;
}

.ig-expertise-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.ig-expertise-image figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding-top: 19px;
  font-size: 12px;
  line-height: 1.8;
}

.ig-expertise-image figcaption span:first-child {
  color: var(--primary-color);
}
.ig-expertise-image figcaption span:last-child {
  font-size: 11px;
}
.ig-expertise-content {
  min-width: 0;
}
.ig-expertise .section-title {
  margin-bottom: 28px;
}
.ig-expertise .section-title p {
  max-width: 510px;
}
.ig-expertise-disciplines {
  border-top: 1px solid var(--dark-divider-color);
}

.ig-expertise-discipline {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: baseline;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dark-divider-color);
}

.ig-expertise-discipline h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.ig-expertise-discipline p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}
.ig-expertise-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 30px;
}
.ig-expertise-team-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;
}
.ig-expertise-team-link span {
  font-size: 20px;
}
.ig-expertise-team-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.ig-expertise a:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 5px;
}
#our-team {
  scroll-margin-top: 110px;
}

@media (max-width: 1199px) {
  .ig-expertise-layout {
    gap: 48px;
  }
  .ig-expertise-discipline {
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 15px;
  }
  .ig-expertise-discipline h3 {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  .ig-expertise {
    padding: 60px 0 10px;
  }
  .ig-expertise-layout {
    gap: 35px;
  }
  .ig-expertise-image-frame {
    border-top-right-radius: 100px;
  }
  .ig-expertise-image-frame::after {
    border-top-right-radius: 88px;
  }
  .ig-expertise-discipline {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
  .ig-expertise .section-title p {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .ig-expertise {
    padding: 50px 0 0;
  }
  .ig-expertise-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .ig-expertise-image {
    max-width: 540px;
    width: 100%;
  }
  .ig-expertise-image-frame {
    border-radius: 20px 100px 20px 20px;
  }
  .ig-expertise-image-frame::after {
    inset: 9px;
    border-radius: 11px 91px 11px 11px;
  }
  .ig-expertise-image figcaption {
    font-size: 11px;
    padding-top: 14px;
  }
  .ig-expertise .section-title {
    margin-bottom: 24px;
  }
  .ig-expertise-actions {
    margin-top: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-expertise *,
  .ig-expertise *::before,
  .ig-expertise *::after {
    transition: none !important;
  }
}

/******************************************************************************
 * 40. Dental and Aesthetic Consultation
 * Consolidated from dental-consultation.css; edit this section directly.
 ******************************************************************************/

/* Use the site's shared colours, section headings, and button styles. */
.dental-consultation {
  padding: 20px 0 100px;
  background-color: var(--white-color);
}

.dental-consultation__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(48px, 6vw, 90px);
  max-width: 1200px;
  margin: 0 auto;
}

.dental-consultation__photo {
  --photo-corner: 28px;
  --photo-sweep: clamp(120px, 14vw, 190px);
  --photo-return: clamp(72px, 8vw, 110px);
  --photo-inset: 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--photo-corner) var(--photo-sweep) var(--photo-corner)
    var(--photo-return);
}

.dental-consultation__photo::before {
  content: "";
  position: absolute;
  inset: var(--photo-inset);
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--white-color) 65%, transparent);
  border-radius: calc(var(--photo-corner) - var(--photo-inset))
    calc(var(--photo-sweep) - var(--photo-inset))
    calc(var(--photo-corner) - var(--photo-inset))
    calc(var(--photo-return) - var(--photo-inset));
  pointer-events: none;
}

.dental-consultation__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.dental-consultation__copy .section-title {
  margin-bottom: 30px;
}

.dental-consultation__copy h2 {
  max-width: 520px;
}

.dental-consultation__copy h2 span {
  display: block;
}

.dental-consultation__copy p {
  max-width: 510px;
}

@media (max-width: 991px) {
  .dental-consultation {
    padding: 10px 0 64px;
  }
  .dental-consultation__layout {
    gap: 36px;
  }
  .dental-consultation__photo img {
    aspect-ratio: 0.9;
  }
}

@media (max-width: 767px) {
  .dental-consultation {
    padding: 0 0 50px;
  }
  .dental-consultation__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .dental-consultation__photo {
    --photo-corner: 20px;
    --photo-sweep: clamp(110px, 30vw, 160px);
    --photo-return: clamp(64px, 18vw, 96px);
    --photo-inset: 9px;
  }
  .dental-consultation__photo img {
    aspect-ratio: 1.05;
  }
  .dental-consultation__copy .section-title {
    margin-bottom: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dental-consultation *,
  .dental-consultation *::before,
  .dental-consultation *::after {
    transition: none !important;
  }
}

/******************************************************************************
 * 41. Services Mega Menu (Desktop and Mobile)
 * Consolidated from mega-menu-test.css; edit this section directly.
 ******************************************************************************/

/* Shared full-width Services dropdown, desktop and mobile. */
.ig-services-panel {
  display: none;
}
@media (min-width: 992px) {
  header.main-header .header-sticky.ig-services-host {
    background-color: var(--secondary-color);
  }
  header.main-header .header-sticky.ig-services-host.active {
    background-color: rgba(255, 255, 255, 0.96);
  }
  header.main-header .header-sticky.ig-services-host.ig-services-open {
    box-shadow: none;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  header.main-header .header-sticky.ig-services-host.active.ig-services-open {
    background-color: #fff;
  }
  .ig-services-host.active .ig-services-panel {
    background-color: #fff;
  }
  #menu > .ig-services-effect > .nav-link {
    cursor: pointer;
    position: relative;
  }
  #menu > .ig-services-effect > .nav-link::before {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #menu > .ig-services-effect.is-open > .nav-link::before {
    transform: scaleX(1);
  }
  #menu > .ig-services-effect > .nav-link::after {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #menu > .ig-services-effect.is-open > .nav-link::after {
    transform: rotate(180deg);
  }
  #menu > .ig-services-effect > .sub-menu {
    display: none !important;
  }
  #menu > .ig-services-effect > .nav-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }
  .ig-services-panel {
    display: block;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    background: var(--secondary-color);
    color: var(--primary-color);
    box-shadow: 0 24px 38px rgba(40, 39, 28, 0.12);
    text-align: left;
    font-family: var(--default-font, "Poppins", sans-serif);
    transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ig-services-panel.is-open {
    pointer-events: auto;
  }
  .ig-services-inner {
    max-height: calc(100dvh - var(--ig-services-header-height, 130px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--dark-divider-color);
  }
  .ig-services-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 280px);
    gap: clamp(40px, 6vw, 100px);
    align-items: center;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .ig-services-eyebrow {
    margin: 0 0 10px;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .ig-services-links {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 380px;
  }
  .ig-services-links li + li {
    border-top: 1px solid var(--dark-divider-color);
  }
  .ig-services-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    transition:
      color 0.25s,
      padding 0.3s;
  }
  .ig-services-link:hover,
  .ig-services-link:focus-visible,
  .ig-services-link.is-preview-active {
    color: var(--accent-color);
  }
  .ig-services-link:hover,
  .ig-services-link:focus-visible {
    padding-left: 8px;
  }
  .ig-services-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
  }
  .ig-services-preview {
    margin: 0;
    min-width: 0;
  }
  .ig-services-images {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--secondary-color);
  }
  .ig-services-images img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.035);
    transition:
      opacity 0.4s ease,
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ig-services-images img.is-active {
    opacity: 1;
    transform: scale(1);
  }
  .ig-services-preview figcaption {
    margin-top: 8px;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.6;
  }
}
.ig-services-backdrop {
  position: fixed;
  inset: var(--ig-services-backdrop-top, 0px) 0 0;
  z-index: 99;
  touch-action: none;
  background: rgba(40, 39, 28, 0.06);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s,
    visibility 0.35s;
}
.ig-services-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 991px) {
  .ig-services-backdrop,
  .ig-services-panel {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #menu > .ig-services-effect > .nav-link::before,
  #menu > .ig-services-effect > .nav-link::after,
  .ig-services-panel *,
  .ig-services-backdrop {
    transition: none;
  }
}

/* Mobile Services links use the same cream/white surfaces as the header. */
@media (max-width: 991px) {
  header.main-header .header-sticky.ig-services-host {
    background-color: var(--secondary-color);
  }
  header.main-header .header-sticky.ig-services-host.active {
    background-color: rgba(255, 255, 255, 0.96);
  }
  header.main-header .header-sticky.ig-services-host.ig-mobile-nav-open {
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  header.main-header .header-sticky.ig-services-host.active.ig-mobile-nav-open {
    background-color: #fff;
  }
  .ig-services-host .slicknav_menu {
    background: var(--secondary-color);
    border-top: 1px solid var(--dark-divider-color);
    box-shadow: 0 18px 30px rgba(40, 39, 28, 0.08);
    font-family: var(--default-font, "Poppins", sans-serif);
  }
  .ig-services-host.active .slicknav_menu {
    background: #fff;
  }
  .ig-services-host .slicknav_nav {
    max-height: calc(100dvh - var(--ig-mobile-header-height, 100px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .ig-services-host .slicknav_nav li a,
  .ig-services-host .slicknav_nav .slicknav_row {
    color: var(--primary-color);
  }
  .ig-services-host .slicknav_nav li a:hover {
    color: var(--accent-color);
  }
  .ig-services-host .ig-mobile-services-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
  }
  .ig-mobile-services-trigger > span {
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s;
  }
  .ig-services-host .ig-mobile-services-trigger[aria-expanded="true"] {
    color: var(--accent-color);
  }
  .ig-mobile-services-trigger[aria-expanded="true"] > span {
    transform: rotate(225deg);
  }
  .ig-mobile-services-panel {
    overflow: hidden;
    height: 0;
  }
  .ig-mobile-services-panel[hidden] {
    display: none !important;
  }
  .ig-mobile-services-content {
    padding: 2px 20px 12px 30px;
  }
  .ig-services-host .slicknav_nav a.ig-mobile-services-link,
  .ig-services-host .slicknav_nav a.ig-mobile-services-link:hover {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
  }
  .ig-services-host .slicknav_nav a.ig-mobile-services-link + a {
    border-top: 1px solid var(--dark-divider-color);
  }
  .ig-services-host .slicknav_nav a.ig-mobile-services-link:hover,
  .ig-services-host .slicknav_nav a.ig-mobile-services-link:focus-visible {
    color: var(--accent-color);
  }
  .ig-services-host .ig-mobile-services-item button:focus-visible,
  .ig-services-host .ig-mobile-services-item a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }
  .ig-services-backdrop {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ig-mobile-services-trigger > span,
  .ig-mobile-services-content * {
    transition: none;
  }
}

/******************************************************************************
 * 42. Homepage Typing, Cursor, Glow and Shimmer
 * Consolidated from dia-text-reveal.css; edit this section directly.
 ******************************************************************************/

/* ==========================================================================
   Dia Typing & Text Reveal Animation - Ivory Glow Theme Palette
   Dark, deep olive form derived directly from --primary-color (#4e4c3b)
   with subtle olive-gold luster for crisp, elegant contrast
   ========================================================================== */

.dia-text-reveal {
  position: relative;
  display: block;
  margin-bottom: 0;
  will-change: transform, opacity;
}

/* Ensure child accent spans keep their brand gold accent */
.section-title h1.dia-text-reveal span,
.dia-text-reveal span.accent-gold,
.dia-text-reveal span.gold {
  color: var(--accent-color);
}

/* Character currently being typed: dark, high-contrast, based on --primary-color (#4e4c3b) */
.dia-char-active {
  display: inline;
  background: linear-gradient(
    135deg,
    #2c2b21 0%,
    #4e4c3b 35%,
    #7a7458 65%,
    #3b3a2d 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(78, 76, 59, 0.4));
  animation: dia-char-birth 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* For characters typed inside the gold accent span */
.section-title h1.dia-text-reveal span .dia-char-active,
.dia-text-reveal span .dia-char-active {
  background: linear-gradient(
    135deg,
    #4a3f23 0%,
    #7c6838 35%,
    #bda260 65%,
    #5a4a24 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(92, 78, 43, 0.4));
}

@keyframes dia-char-birth {
  0% {
    opacity: 0.4;
    background: linear-gradient(
      135deg,
      #24231b 0%,
      #4e4c3b 40%,
      #6e684e 75%,
      #353428 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(78, 76, 59, 0.35));
  }
  35% {
    opacity: 1;
    background: linear-gradient(
      135deg,
      #201f17 0%,
      #4e4c3b 30%,
      #867f5e 65%,
      #363529 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 3px rgba(78, 76, 59, 0.5));
  }
  75% {
    background: linear-gradient(135deg, #302f24 0%, #4e4c3b 50%, #615c44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(78, 76, 59, 0.25));
  }
  100% {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: inherit;
    filter: none;
  }
}

/* Blinking typing cursor styled in theme gold */
.dia-typing-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background-color: var(--accent-color);
  margin-left: 4px;
  vertical-align: baseline;
  position: relative;
  top: 2px;
  border-radius: 1.5px;
  animation: dia-cursor-blink 0.8s infinite ease-in-out;
}

@keyframes dia-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Full subtle shimmer pass when typing completes */
.dia-full-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dia-full-shimmer.is-active {
  opacity: 1;
}

.dia-full-shimmer span {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: none !important;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .dia-char-active {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
    filter: none !important;
  }
  .dia-typing-cursor,
  .dia-full-shimmer {
    display: none !important;
  }
}

/******************************************************************************
 * 43. Accessibility, Forms and Reduced Motion
 * Consolidated from seo-accessibility.css; edit this section directly.
 ******************************************************************************/

/* Additive accessibility fixes shared by the existing templates. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 12px 20px;
  background: #fffdf8;
  color: #4e4c3b;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-color) !important;
  outline-offset: 4px;
}
#main-content {
  outline: none;
}
/* Reserve the fixed header's space before JavaScript measures it. */
header.main-header {
  min-height: 121px;
}
@media (max-width: 991px) {
  header.main-header {
    min-height: 101px;
  }
}
.hero-doctor-name {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 5px;
}
@media (max-width: 767px) {
  .hero-doctor-name {
    font-size: 16px;
  }
}
.ig-stories-dot {
  min-width: 28px;
  min-height: 44px;
}
.section-title :is(h3, .section-eyebrow),
.section-title h2 span,
.section-title h1 span,
.ig-concerns .section-title :is(h3, .section-eyebrow),
.ig-concerns .section-title h2 span {
  color: var(--accent-color);
}

.main-footer.ig-premium-footer .ig-footer-timing-day,
.main-footer.ig-premium-footer .ig-footer-slot-tag {
  color: #eee5cc;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .wow,
  .reveal,
  .text-anime-style-2,
  .text-anime-style-3 {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/******************************************************************************
 * 44. Concern Marker Positions and Map Borders
 ******************************************************************************/

.ig-concern-marker[data-concern="decay"] {
  --x: 11.05%;
  --y: 7.83%;
}
.ig-concern-marker[data-concern="chip"] {
  --x: 35.91%;
  --y: 32.69%;
}
.ig-concern-marker[data-concern="crowding"] {
  --x: 61.46%;
  --y: 30.57%;
}
.ig-concern-marker[data-concern="missing"] {
  --x: 91.16%;
  --y: 65.93%;
}
.ig-concern-marker[data-concern="hair"] {
  --x: 12%;
  --y: 72%;
}
.ig-concern-marker[data-concern="pigmentation"] {
  --x: 88%;
  --y: 45%;
}
.ig-concern-marker[data-concern="lines"] {
  --x: 15%;
  --y: 25%;
}
.ig-concern-marker[data-concern="pores"] {
  --x: 88%;
  --y: 64%;
}
.ig-concern-marker[data-concern="dryness"] {
  --x: 12%;
  --y: 49%;
}
.clinic-map-frame {
  border: 0;
}

/******************************************************************************
 * 45. JavaScript-disabled Fallback
 * The small head script removes .no-js when JavaScript is available.
 ******************************************************************************/

.no-js .preloader {
  display: none !important;
}
.no-js .wow,
.no-js .reveal {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.no-js .collapse.navbar-collapse {
  display: block !important;
}

/******************************************************************************
 * 46. Standalone Not Found Page
 * Reset the template styling here to preserve the minimal original 404 layout.
 ******************************************************************************/

html.ig-not-found,
.ig-not-found body,
.ig-not-found body * {
  all: revert;
}
.ig-not-found body {
  margin: 0;
  background: #f7f5ec;
  color: #4e4c3b;
  font:
    18px/1.6 system-ui,
    sans-serif;
}
.ig-not-found main {
  max-width: 650px;
  margin: 12vh auto;
  padding: 32px;
}
.ig-not-found h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.2;
}
.ig-not-found a {
  color: #62542e;
  text-underline-offset: 4px;
}
.ig-not-found a:focus-visible {
  outline: 3px solid #62542e !important;
  outline-offset: 5px;
}
.ig-not-found nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}