/*!
Theme Name: Dental Deluxe
Theme URI: http://underscores.me/
Author: Andrei Hatmanu
Author URI: http://underscores.me/
Description: A custom WordPress theme for Dental Deluxe, with a deluxe feel.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dentaldeluxe-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Dental Deluxe is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/* Import Montserrat from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap");

/*--------------------------------------------------------------
# Brand Colors & Fonts: Dental Deluxe Modern
--------------------------------------------------------------*/
:root {
    /* Dental Deluxe new palette */
    --gold: #b5924a;
    --gold-dark: #8b6a28;
    --offwhite: #f6f6f8;
    --gray-dark: #545454;
    --gray-bg: #e3ecef;

    --color-title: #545454; /* updated for modern look */
    --color-text: #545454; /* darker for better contrast */
    --color-link: #b5924a; /* gold for links */
    --color-link-visited: #8b6a28;
    --color-neutral-white: #ffffff;
    --color-neutral-light-background: #f6f6f8;
    --color-neutral-border: #e3ecef;
    --gray-bg: #e3ecef;

    --font-main: "Montserrat", Arial, sans-serif;
}

/*--------------------------------------------------------------
# Base Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
    font-family: var(--font-main) !important;
    color: var(--color-text);
    background: var(--offwhite);
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
    padding: 0;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main) !important;
    color: var(--color-title);
    margin-top: 0;
    margin-bottom: 0.7em;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.15;
}
h1 {
    font-size: 2.8rem;
    color: var(--gold-dark);
}
h2 {
    font-size: 2.1rem;
    color: var(--gold);
}
h3 {
    font-size: 1.4rem;
    color: var(--gray-dark);
}
h4,
h5,
h6 {
    color: var(--gray-dark);
}

/* Paragraph & Emphasis */
p {
    margin-bottom: 1.3em;
    color: var(--gray-dark);
}
p,
div,
span,
li,
ul,
ol,
blockquote,
td,
th {
    font-weight: 300;
}

strong,
b {
    font-weight: 500;
    color: var(--gold-dark);
}
em,
i {
    color: var(--gold);
}
small {
    font-size: 0.95em;
    color: var(--gray-dark);
}

/*--------------------------------------------------------------
# Links & Buttons
--------------------------------------------------------------*/
a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}
a:hover,
a:focus {
    color: var(--gold-dark);
    text-decoration: none;
    cursor: pointer;
}

/* Buttons */
.btn,
button,
input[type="submit"] {
    font-family: var(--font-main) !important;
    background: var(--gold);
    color: #fff;
    border: none;
    padding: 0.8em 2.4em;
    border-radius: 2em;
    font-weight: 500;
    font-size: 1em;
    box-shadow: 0 2px 10px rgba(181, 146, 74, 0.08);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    margin-top: 1em;
    letter-spacing: 1px;
}
.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--gold-dark);
    color: var(--offwhite);
}
.btn-outline {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
}
.btn-outline:hover {
    background: var(--gold);
    color: #fff;
}

/*--------------------------------------------------------------
# Cards & Sections
--------------------------------------------------------------*/
.section-bg {
    background: var(--gray-bg);
    padding: 3em 1em;
    border-radius: 1.7em;
    margin-bottom: 2.5em;
}
.card {
    background: #fff;
    border-radius: 1.2em;
    box-shadow: 0 6px 32px rgba(181, 146, 74, 0.05);
    padding: 2em 1.5em;
    margin-bottom: 1.5em;
    transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
    box-shadow: 0 10px 36px rgba(181, 146, 74, 0.12);
    transform: translateY(-4px) scale(1.01);
}
.card h3 {
    font-size: 1.2em;
    color: var(--gold);
    margin-bottom: 0.5em;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
nav {
    font-family: var(--font-main) !important;
    background: #fff;
    padding: 1em 0;
    box-shadow: 0 1px 8px rgba(84, 84, 84, 0.06);
}
nav a {
    color: var(--gray-dark);
    font-weight: 500;
    padding: 0.6em 1em;
    border-radius: 1.2em;
    transition: background 0.2s, color 0.2s;
}
nav a:hover,
nav a.active {
    /*background: var(--gold);*/
    color: #fff;
}

/*--------------------------------------------------------------
# Lists & Utilities
--------------------------------------------------------------*/
ul,
ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

hr {
    border: 0;
    border-top: 2px solid var(--gold);
    margin: 2em 0;
    opacity: 0.1;
}
/*FOOTER MENU */
.footer-menu-list,
.footer-menu-list ul {
  list-style: none !important;
  padding-left: 0;
}

/*--------------------------------------------------------------
# Responsive Typography & Layout
--------------------------------------------------------------*/
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.4rem;
    }
    .section-bg,
    .card {
        padding: 1.2em 0.8em;
    }
    nav {
        padding: 0.7em 0;
    }
}
@media (max-width: 480px) {
    body {
        font-size: 15px;
    }
    .btn,
    button,
    input[type="submit"] {
        padding: 0.6em 1.2em;
        font-size: 0.97em;
    }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: var(--font-main) !important;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: 500;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: var(--font-main) !important;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
    color: var(--color-text);
    font-family: var(--font-main) !important;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: var(--font-main) !important;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: var(--font-main) !important;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

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

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: var(--color-link);
    text-decoration: none;
}

/*a:visited {
    color: var(--color-link-visited);
}*/

a:hover,
a:focus,
a:active {
    color: var(--gold-dark);
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.main-title {
    color: var(--gold);
}
.main-background {
    background-color: var(--gold);
}
.border-gold {
    border-color: var(--gold) !important;
}

.normal-text {
    font-size: 0.85rem;
    text-align: justify;
}
div.normal-text, p.normal-text {
    font-weight: 300;
}

.medium-text {
    font-size: 0.85rem;
    text-align: justify;
}

.small-text {
    font-size: 0.675rem;
    text-align: justify;
}

.background-grey {
    background-color: var(--gray-bg);
}

.dental-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f6f6f8;
    overflow: hidden;
}

.treatment-img-wrapper {
    flex: 0 0 45%;
    min-height: 0;
    position: relative;
    width: 100%;
}

.treatment-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Make card-body fill the rest of the card */
.dental-card .card-body {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.25rem 0 0 0;
    background: #fff;
}

/* Navigation
--------------------------------------------- */
/* COLORS ========================================== */
/* FONTS ========================================== */
/* MIXINS ========================================== */
/* RESET ========================================== */
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100%;
    height: 100%;
}
body.overflow {
    overflow: hidden;
}
header {
    margin-top: 1px !important;
}
.navbar-inverse {
    background-color: #ffffff52 !important;
    border-color: #bebdbd !important;
}
.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
}
.navbar-fixed-bottom,
.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}
/* element.style - This is usually inline CSS, cannot be modified here */
.hero-image {
    background-image: url('https://i.ibb.co/ZXbmK31/photo-1485797532868-c4401a435f08.jpg" alt="photo-1485797532868-c4401a435f08');
    background-size: cover;
    min-height: 400px;
    /* background: radial-gradient(black, transparent); */
    background-repeat: no-repeat;
}
.scrolled {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 1px 10px var(--gold);
}
.first_image {
    height: 100vh;
    min-height: 400px;
    background-size: cover;
}
body > header > div > div > div > div.burger > p {
    margin: 11px 16px 15px -114px;
    font-weight: 600;
}
#bar {
    background: white;
    font-family: var(--font-main) !important;
    position: absolute;
    left: 0;
    right: 0;
    padding: 15px;
    height: 60px;
    background-size: 100%;
}
.first {
    height: 100vh;
    min-height: 400px;
    background-size: contain;
    background-image: url("https://i.ibb.co/z4yV47M/Banner-01.jpg");
}
.affix {
    -webkit-transition: padding 0.2s ease-out;
    -moz-transition: padding 0.2s ease-out;
    -o-transition: padding 0.2s ease-out;
    transition: padding 0.2s ease-out;
}
.affix-top .nav > li > a {
    color: var(--color-link);
}
.affix-top.navbar .nav > li > a:hover,
.affix-top.navbar .navbar-brand {
    color: var(--gold-dark);
}
section {
    height: calc(90% - 50px);
    height: 90vh;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 0px !important;
}
/***********************************************/
/******************CUSTOME DESIGN****************** **********************************************/
/* BURGER ========================================== */
.burger {
    width: 50px;
    height: 50px;
    position: fixed;
    border-radius: 4px;
    z-index: 999;
}
.burger span {
    position: relative;
    margin-top: 9px;
    margin-bottom: 9px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -1.5px;
}
.burger span,
.burger span::before,
.burger span::after {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--gold);
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.burger span::before,
.burger span::after {
    position: absolute;
    content: "";
}
.burger span::before {
    top: -9px;
}
.burger span::after {
    top: 9px;
}
.burger.clicked span {
    background-color: transparent;
}
.burger.clicked span::before {
    -webkit-transform: translateY(9px) rotate(45deg);
    -moz-transform: translateY(9px) rotate(45deg);
    -ms-transform: translateY(9px) rotate(45deg);
    -o-transform: translateY(9px) rotate(45deg);
    transform: translateY(9px) rotate(45deg);
}
.burger.clicked span::after {
    -webkit-transform: translateY(-9px) rotate(-45deg);
    -moz-transform: translateY(-9px) rotate(-45deg);
    -ms-transform: translateY(-9px) rotate(-45deg);
    -o-transform: translateY(-9px) rotate(-45deg);
    transform: translateY(-9px) rotate(-45deg);
}
.burger.clicked span:before,
.burger.clicked span:after {
    background-color: var(--gold);
}
.burger:hover {
    cursor: pointer;
}
/* NAV ========================================== */
nav {
    background-color: #fff;
    position: fixed;
    z-index: 9;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 515px;
    width: 100%;
    padding: 150px 20px 65px 40px;
    overflow-y: auto;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
nav.show {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}
nav.show ul.main li {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}
nav.show ul.main li:nth-child(1) {
    transition-delay: 0.15s;
}
nav.show ul.main li:nth-child(2) {
    transition-delay: 0.3s;
}
nav.show ul.main li:nth-child(3) {
    transition-delay: 0.45s;
}
nav.show ul.main li:nth-child(4) {
    transition-delay: 0.6s;
}
nav.show ul.main li:nth-child(5) {
    transition-delay: 0.75s;
}
nav.show ul.main li:nth-child(6) {
    transition-delay: 0.9s;
}
nav.show ul.main li:nth-child(7) {
    transition-delay: 1.05s;
}
nav.show ul.main li:nth-child(8) {
    transition-delay: 1.2s;
}
nav.show ul.main li:nth-child(9) {
    transition-delay: 1.35s;
}
nav.show .about,
nav.show .social,
nav.show ul.sub {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
    transition-delay: 0.85s;
}
nav ul.main {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}
nav ul.main li {
    margin-bottom: 20px;
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    -o-transform: translateX(40px);
    transform: translateX(40px);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative; /* Needed for positioning the arrow */
}
nav ul.main li:last-of-type {
    margin-bottom: 0px;
}
nav ul.main li a {
    color: var(--color-link);
    font-family: var(--font-main) !important;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.15rem;
    display: block;
    letter-spacing: 5px;
    font-weight: 500;
    padding: 10px 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
nav ul.main li a span {
    color: var(--gold);
}
nav ul.main li a:hover {
    color: var(--gold-dark);
}

/* New CSS for dropdown arrow and submenu behavior */

/* Arrow for parent menu items */
nav ul.main li.menu-item-has-children > a::after {
    content: "\25BE"; /* Unicode for a small downward black triangle */
    font-size: 0.8em; /* Make it a bit smaller than the text */
    margin-left: 10px; /* Space between text and arrow */
    vertical-align: middle;
    display: inline-block; /* Ensure it respects transform */
    transition: transform 0.3s ease; /* Smooth rotation */
    color: var(--color-link); /* Inherit or set color */
}

/* Rotate arrow when submenu is active/open */
/* You will need to add a class like 'open' to the parent li
   or the 'a' tag using JavaScript when the submenu is toggled. */
nav ul.main li.menu-item-has-children.open > a::after {
    transform: rotate(180deg); /* Rotate the arrow up */
}

/* Sub-menu styling - initially hidden in desktop, revealed on click/hover in mobile/off-canvas */
nav ul.main li .sub-menu {
    list-style-type: none;
    margin-top: 10px; /* Space between parent link and submenu */
    padding-left: 20px; /* Indent submenu items */
    display: none; /* Hidden by default */
    opacity: 0; /* Hidden for transition */
    max-height: 0; /* For smooth slide-down effect */
    overflow: hidden; /* Hide content that goes beyond max-height */
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out; /* Smooth transition */
}

/* Show sub-menu when parent li has 'open' class */
nav ul.main li.menu-item-has-children.open > .sub-menu {
    display: block; /* Make it visible */
    opacity: 1; /* Fade in */
    max-height: max-content; /* Adjust based on expected max height of sub-menu. Needs to be large enough */
}

/* Sub-menu link styling */
nav ul.main li .sub-menu li a {
    color: var(--color-text); /* Use a consistent text color for sub-menu links */
    font-size: 0.85rem; /* Slightly smaller than main links */
    letter-spacing: 2px; /* Reduce letter spacing for sub-menu */
    padding: 8px 0; /* Adjust padding */
}

nav ul.main li .sub-menu li a:hover {
    color: var(--gold); /* Hover effect for sub-menu links */
}

/* Original nav ul.sub styles - consolidate or remove if sub-menu takes over */
/* The styles below for `nav ul.sub` are generally applied to any `ul.sub` within `nav`.
   If your sub-menu is *always* `ul.sub` inside `ul.main li`, then the above `nav ul.main li .sub-menu`
   rules are more specific. You might need to adjust or combine. */
/*
nav ul.sub {
    list-style-type: none;
    margin-top: 40px;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
nav ul.sub li {
    margin-bottom: 10px;
}
nav ul.sub li:last-of-type {
    margin-bottom: 0px;
}
nav ul.sub li a {
    color: #ffffff; // <-- This is different from the suggested --color-text
    font-family: "Raleway", sans-serif;
    letter-spacing: 1px;
    font-size: 0.9rem;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
nav ul.sub li a:hover {
    color: var(--gold);
}
*/

/* OVERLAY ========================================== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #f7f7f7;
    opacity: 0;
    visibility: hidden;
}
.overlay.show {
    opacity: 0.8;
    visibility: visible;
}
/***************************************** ********* Responsive start*************** * ***************************************/
@media (min-width: 1024px) {
    .burger {
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 4px;
        z-index: 10;
    }
    .cover {
        position: relative;
        left: -90.5px;
        box-sizing: border-box;
        width: 1351px;
        padding-left: 90.5px;
        padding-right: 90.5px;
        max-height: 420px;
        object-fit: cover;
    }
    body > header > nav {
        z-index: 999;
    }
    .hero-image {
        min-height: 700px;
    }
}
@media (min-width: 667px) {
    nav {
        padding: 120px 25px 70px 90px;
    }
    body > header > nav {
        z-index: 10;
    }
}
@media (min-width: 768px) {
    .affix-top {
        /* navbar style at top */
        background: transparent;
        border-color: transparent;
        padding: 15px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .burger {
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 4px;
        z-index: 999;
    }
    .cover {
        position: relative;
        left: -90.5px;
        box-sizing: border-box;
        width: 1351px;
        padding-left: 90.5px;
        padding-right: 90.5px;
        max-height: 420px;
        object-fit: cover;
    }
    body > header > nav {
        z-index: 9;
    }
    .hero-image {
        min-height: 500px;
    }
}
@media (max-width: 425px) {
    .burger {
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 4px;
        z-index: 999;
    }
    .cover {
        position: relative;
        left: -90.5px;
        box-sizing: border-box;
        width: 1351px;
        padding-left: 90.5px;
        padding-right: 90.5px;
        max-height: 200px;
        object-fit: cover;
    }
    body > header > nav {
        z-index: 9;
    }
    .hero-image {
        min-height: 400px;
    }
}
@media (max-width: 375px) {
    .burger {
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 4px;
        z-index: 999;
    }
    .mobile_number {
        visibility: hidden;
    }
    body > header > nav {
        z-index: 1;
    }
    .hero-image {
        min-height: 400px;
    }
}

/* Posts and pages
--------------------------------------------- */
.sticky {
    display: block;
}

.post,
.page {
    margin: 0 0 1.5em;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
    margin: 0 0 1.5em;
}

.widget select {
    max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# HOME Banner overlay cards
--------------------------------------------------------------*/
/* No offset by default */
.banner-cards-row {
    position: static;
    top: 0;
    z-index: 0;
}

/* Apply only from md screens up */
@media (min-width: 768px) {
    .banner-cards-row {
        position: relative;
        top: -65px;
        z-index: 0;
    }
}
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-6px);
    }
    30% {
        transform: translateX(6px);
    }
    45% {
        transform: translateX(-4px);
    }
    60% {
        transform: translateX(4px);
    }
    75% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.7s infinite;
}
@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.07);
    }
}
.pulse {
    animation: pulse 1.2s infinite;
}
@keyframes wobble {
    0%,
    100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-8px);
    }
    30% {
        transform: translateX(8px);
    }
    45% {
        transform: translateX(-8px);
    }
    60% {
        transform: translateX(8px);
    }
    75% {
        transform: translateX(0);
    }
}
.wobble {
    animation: wobble 0.8s infinite;
}

@keyframes tada {
    0% {
        transform: scale(1);
    }
    10%,
    20% {
        transform: scale(0.9) rotate(-4deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(4deg);
    }
    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-4deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
.tada {
    animation: tada 1s infinite;
}
@keyframes rubberBand {
    0% {
        transform: scaleX(1);
    }
    30% {
        transform: scaleX(1.25);
    }
    40% {
        transform: scaleX(0.75);
    }
    50% {
        transform: scaleX(1.15);
    }
    65% {
        transform: scaleX(0.95);
    }
    75% {
        transform: scaleX(1.05);
    }
    100% {
        transform: scaleX(1);
    }
}
.rubber-band {
    animation: rubberBand 1s infinite;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
.swing {
    animation: swing 1s infinite;
}

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Block: Image and Text Block
--------------------------------------------------------------*/
.image-text-block {
    padding: 40px 0; /* Adjust spacing as needed */
    overflow: hidden; /* Clear floats if not using flex/grid for older compatibility */
}

/* If you're using a .container class from Underscores or your theme for width and centering */
/* .image-text-block .container { ... } \*/

.image-text-block__inner {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if desired */
    align-items: center; /* Vertically align items in the center */
    gap: 30px; /* Space between columns \*/
}

.image-text-block__col {
    flex: 1; /* Each column takes up equal space by default */
    min-width: 280px; /* Minimum width before wrapping, adjust as needed \*/
}

.image-text-block__image-col img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Optional: rounded corners for the image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow \*/
}

.image-text-block__title {
    font-size: 2.5em; /* Example size */
    color: \#333; /* Adjust to your theme */
    margin-bottom: 0.5em;
    /* Corresponds to "Tecnología dental avanzada con trato humano" in your image \*/
}

.image-text-block__subtitle {
    font-size: 1.2em; /* Example size */
    color: \#555; /* Adjust to your theme */
    margin-bottom: 1em;
    font-weight: normal;
    /* Corresponds to "Innovación al servicio de tu sonrisa" in your image \*/
}

.image-text-block__description {
    font-size: 1em;
    line-height: 1.7;
    color: #666; /* Adjust to your theme \*/
}

.image-text-block__description p:last-child {
    margin-bottom: 0;
}

/* Text Left, Image Right */
.image-text-block--text\_left\_image\_right .image-text-block__inner {
    flex-direction: row-reverse; /* This will flip the order of the columns \*/
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .image-text-block__inner {
        flex-direction: column; /* Stack columns vertically \*/
    }
}
@media (min-width: 768px) {
    .sticky-image-col {
        position: sticky !important;
        top: 100px !important;
    }
}