/*
Theme Name: Bella Theme
Theme URI: http://bella.com
Description: A custom WordPress theme
Version: 1.0
Author: Anker Team
Author URI: http://bella.com
rasa dm
*/

:root {
    --primary-dark:#000;
    --secondary-dark:#2d2d2d;
    --accent-gold:#c9a050;
    --accent-gold-hover:#b88f40;
    --text-light:#fff;
    --text-gray:#9a9a9a;
    --overlay-dark:rgba(0,0,0,0.7);
    --font-primary:Arial,sans-serif;
    --font-size-base:16px;
    --line-height-base:1.5;
    --spacing-xs:.25rem;
    --spacing-sm:.5rem;
    --spacing-md:1rem;
    --spacing-lg:1.5rem;
    --spacing-xl:2rem;
    --spacing-2xl:3rem;
    --spacing-3xl:4rem;
    --radius-sm:4px;
    --radius-md:8px;
    --radius-lg:12px;
    --radius-full:9999px;
    --transition-fast:.2s ease;
    --transition-base:.3s ease;
    --transition-slow:.5s ease;
    --shadow-sm:0 2px 4px rgba(0,0,0,0.1);
    --shadow-md:0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg:0 10px 15px rgba(0,0,0,0.1);
    --header-height:80px;
    --header-height-mobile:60px;
    --container-max-width:1400px;
    --container-padding:20px;
    --z-header:1000;
    --z-modal:2000;
    --z-tooltip:3000
}

*,::before,::after {
    margin:0;
    padding:0;
    box-sizing:border-box
}

html {
    font-size:var(--font-size-base);
    scroll-behavior:smooth
}

body {
    font-family:var(--font-primary);
    font-size:1rem;
    line-height:var(--line-height-base);
    color:var(--text-light);
    background-color:var(--primary-dark);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

h1,h2,h3,h4,h5,h6 {
    margin:0;
    font-weight:700;
    line-height:1.2
}

h1 {
    font-size:clamp(2.5rem,5vw,4rem)
}

h2 {
    font-size:clamp(2rem,4vw,3rem)
}

h3 {
    font-size:clamp(1.5rem,3vw,2rem)
}

h4 {
    font-size:clamp(1.25rem,2vw,1.5rem)
}

h5 {
    font-size:clamp(1rem,1.5vw,1.25rem)
}

h6 {
    font-size:1rem
}

p {
    margin-bottom:var(--spacing-md)
}

a {
    color:inherit;
    text-decoration:none;
    transition:color var(--transition-base)
}

.container {
    max-width:var(--container-max-width);
    margin:0 auto;
    padding:0 var(--container-padding)
}

.text-center {
    text-align:center
}

.text-left {
    text-align:left
}

.text-right {
    text-align:right
}

.d-none {
    display:none
}

.d-block {
    display:block
}

.d-flex {
    display:flex
}

.d-grid {
    display:grid
}

.align-items-center {
    align-items:center
}

.justify-content-center {
    justify-content:center
}

.justify-content-between {
    justify-content:space-between
}

.position-relative {
    position:relative
}

.position-absolute {
    position:absolute
}

.position-fixed {
    position:fixed
}

.w-100 {
    width:100%
}

.h-100 {
    height:100%
}

.m-0 {
    margin:0
}

.p-0 {
    padding:0
}

.btn {
    display:inline-block;
    padding:var(--spacing-sm) var(--spacing-lg);
    background-color:var(--accent-gold);
    color:#000;
    text-align:center;
    font-weight:600;
    transition:all var(--transition-base);
    cursor:pointer;
    border:none;
    outline:none
}

.btn:hover {
    background-color:var(--accent-gold-hover);
    transform:translateY(-2px)
}

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

input,textarea,select,button {
    font-family:inherit;
    font-size:inherit;
    line-height:inherit
}

@keyframes fadeIn {
    from {
        opacity:0
    }

    to {
        opacity:1
    }
}

@keyframes fadeInUp {
    from {
        opacity:0;
        transform:translateY(20px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes slideIn {
    from {
        transform:translateX(-100%)
    }

    to {
        transform:translateX(0)
    }
}

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

@media (max-width: 992px) {
    :root {
        --container-max-width:960px
    }
}

@media (max-width: 768px) {
    :root {
        --container-max-width:720px;
        --header-height:var(--header-height-mobile)
    }

    body {
        font-size:.9rem
    }
}

@media (max-width: 576px) {
    :root {
        --container-max-width:540px;
        --container-padding:15px
    }
}

@media print {
    body {
        background:#fff;
        color:#000
    }

    .no-print {
        display:none!important
    }
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

:focus {
    outline:3px solid var(--accent-gold);
    outline-offset:2px
}

:focus:not(:focus-visible) {
    outline:none
}

.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:var(--z-header);
    transition:transform var(--transition-base);
}

.header.scrolled {
    background:rgba(26,26,26,0.95);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-md);
}

.top-bar {
    background:rgba(255,255,255,0.05);
    padding:8px 0;
    font-size:.9rem;
}

.top-bar::before {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
}

.top-bar .container {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.social-links a {
    color:var(--text-light);
    margin-right:var(--spacing-md);
    opacity:.8;
    transition:opacity var(--transition-base)
}

.social-links a:hover {
    opacity:1;
    color:var(--accent-gold)
}

.contact-info {
    display:flex;
    gap:var(--spacing-lg);
    align-items:center
}

.contact-info a {
    display:flex;
    align-items:center;
    gap:var(--spacing-xs)
}

.contact-info .btn {
    padding:6px 12px;
    font-size:.9rem

}

.nav-main {
    padding:var(--spacing-md) 0
}

.nav-container {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.logo {
    width:60px;
    max-height:60px;
    position:relative;
    z-index:1001
}

.logo img {
    width:100%;
    height:auto;
    transition:transform var(--transition-base)
}

.nav-menu {
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    list-style:none
}

.nav-item {
    position:relative;
    margin:0 var(--spacing-md);
    width: fit-content;
}

.nav-link {
    display:flex;
    align-items:center;
    padding:var(--spacing-sm) var(--spacing-md);
    color:var(--text-light);
    font-weight:600;
    transition:color var(--transition-base)
}

.nav-link:hover {
    color:var(--accent-gold)
}

.dropdown {
    position:relative
}

.dropdown-toggle::after {
    content:'▾';
    margin-left:var(--spacing-xs);
    transition:transform var(--transition-base)
}
ul>li>ul .dropdown-item:hover {
    background: rgba(201, 160, 80, 0.1);
    color: var(--accent-gold);
    padding-left: calc(var(--spacing-lg) + 5px);
}

ul>li>ul .nav-link {
    font-weight: 300;
}
ul>li>ul .nav-item {
    width: 100%;
    margin-left: 0px !important;
}
li>ul>li .dropdown-toggle::after {
    content: '▸';
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-base)
}

.dropdown-menu {
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    background:var(--secondary-dark);
    min-width:220px;
    padding:var(--spacing-md) 0;
    border-radius:var(--radius-md);
    opacity:0;
    visibility:hidden;
    transform-origin:top center;
    transition:all var(--transition-base);
    box-shadow:var(--shadow-lg);
    margin-top:var(--spacing-md);
    list-style-type:none;
}

.dropdown-menu::before {
    content:'';
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid var(--secondary-dark)
}

.dropdown:hover .dropdown-menu {
    opacity:1;
    visibility:visible;
    margin-top:0
}

.dropdown-item {
    display:block;
    padding:var(--spacing-sm) var(--spacing-lg);
    color:var(--text-light);
    transition:all var(--transition-base)
}

.dropdown-item:hover {
    background:rgba(201,160,80,0.1);
    color:var(--accent-gold);
    padding-left:calc(var(--spacing-lg) + 5px)
}

.nav-toggle {
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:30px;
    height:24px;
    position:relative;
    cursor:pointer;
    z-index:1001;
    background:transparent;
    border:none;
    padding:0
}

.nav-toggle span {
    display:block;
    width:100%;
    height:2px;
    background-color:var(--text-light);
    border-radius:var(--radius-full);
    transition:all var(--transition-base)
}

.nav-toggle.active span:nth-child(1) {
    transform:translateY(9px) rotate(45deg)
}

.nav-toggle.active span:nth-child(2) {
    opacity:0
}

.nav-toggle.active span:nth-child(3) {
    transform:translateY(-9px) rotate(-45deg)
}

@media (max-width: 1024px) {
    .nav-toggle {
        display:flex
    }

    .nav-menu {
        position:fixed;
        top:0;
        right:-100%;
        width:300px;
        height:100vh;
        background:var(--secondary-dark);
        flex-direction:column;
        align-items:flex-start;
        padding:calc(var(--header-height) + var(--spacing-lg)) var(--spacing-lg);
        transition:right var(--transition-base);
        overflow-y:auto
    }

    .nav-menu.active {
        right:0
    }

    .nav-item {
        width:100%;
        margin:0
    }

    .nav-link {
        padding:var(--spacing-md) 0
    }

    .dropdown-menu {
        position:static;
        background:transparent;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
        padding:0;
        margin:0;
        max-height:0;
        overflow:hidden;
        transition:max-height var(--transition-base)
    }

    .dropdown-menu::before {
        display:none
    }

    .dropdown.active .dropdown-menu {
        max-height:500px
    }

    .dropdown-item {
        padding:var(--spacing-sm) var(--spacing-md);
        color:var(--text-gray)
    }

    .dropdown-toggle::after {
        margin-left:auto
    }

    .dropdown.active .dropdown-toggle::after {
        transform:rotate(90deg)
    }
}

@media (max-width: 768px) {
    .top-bar {
        display:none
    }

    .logo {
        width:60px
    }
}

.hero-slider {
    position:relative;
    height:100vh;
    overflow:hidden
}

.hero-slide {
    position:relative;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 20px;
    height:100vh;
    transition: background-image 1s ease-in-out;
}

.hero-slide::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.2));
    z-index:1
}

.hero-content {
    position:relative;
    z-index:2;
    max-width:800px
}

.hero-content h1 {
    font-size:clamp(2rem,5vw,4rem);
    margin-bottom:20px;
    opacity:0;
    transform:translateY(30px);
    animation:fadeInUp 1s forwards
}

.hero-content p {
    font-size:clamp(1rem,2vw,1.25rem);
    margin-bottom:30px;
    opacity:0;
    transform:translateY(30px);
    animation:fadeInUp 1s .3s forwards
}

.doctor-intro {
    position:relative;
    height:100vh;
    width:100%;
    display:block
}

.doctor-intro__bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-attachment:fixed
}

.doctor-intro__bg::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to right,rgba(0,0,0,0.2),rgba(0,0,0,0.1))
}

.doctor-intro__content {
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    z-index:2
}

.doctor-intro__content2 {
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%;
    z-index:2
}

.doctor-intro__box {
    background:rgba(26,26,26,0.6);
    height:100%;
    padding:50px;
    backdrop-filter:blur(10px);
    display:flex;
    flex-direction:column;
    justify-content:center
}

.doctor-intro__title {
    color:var(--accent-gold);
    font-size:2.5rem;
    margin-bottom:30px;
    font-weight:600
}

.doctor-intro__text {
    color:var(--text-light);
    line-height:1.8
}

@media (max-width: 768px) {
    .doctor-intro__content,.doctor-intro__content2 {
        width:100%
    }

    .doctor-intro__box {
        padding:30px
    }
}

@media (max-width: 768px) {
    .doctor-intro__content {
        max-width:100%
    }

    .doctor-intro__box {
        padding:30px
    }

    .doctor-intro__title {
        font-size:2rem
    }
}

.services {
    position:relative;
    padding:50px 0;
    overflow-x:auto;
    white-space:nowrap;
    scroll-behavior:smooth;
    background-color:#000;
    background: linear-gradient(45deg,
    rgba(26,26,26,0.75),
    rgba(26,26,26,0.65)
    ), url(https://bella-surgery.top/wp-content/uploads/2024/10/Leonardo_Kino_XL_Design_a_banner_for_the_Billy_Heliz_Plastic_S_1-copy.jpg) center/cover;    background-repeat:no-repeat;

}

.services::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:1
}

.services > * {
    position:relative;
    z-index:2
}

.services-grid {
    display:flex;
    margin-top:50px;
    margin-left:50px
}

.service-card {
    background:var(--secondary-dark);
    width:400px;
    height:600px;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    transition:transform .3s ease
}

.service-card:hover {
    transform:translateY(-10px)
}

.service-image {
    width:100%;
    height:100%
}

.service-image img {
    width:100%;
    height:100%;
    object-fit:cover
}

.service-content {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:20px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
    color:#fff;
    text-align:left
}

.service-content h3 {
    margin:0;
    font-size:2.2em
}

.service-content p {
    margin-top:10px;
    font-size:.9em
}

.services {
    overflow:hidden
}

.services-grid {
    cursor:grab;
    overflow-x:scroll;
    -webkit-overflow-scrolling:touch;
    width:100%
}

.gallery-item:hover .gallery-overlay {
    opacity:1
}

.gallery-caption {
    color:#fff;
    font-size:2em;
    text-align:center
}

.section-title {
    font-size:clamp(1.75rem,2.5vw,2.25rem);
    font-weight:600;
    color:var(--accent-gold);
    margin-bottom:1rem;
    text-align:left
}

.section-description {
    font-size:1rem;
    color:var(--text-gray);
    max-width:600px;
    margin:0 auto 3rem;
    text-align:center;
    line-height:1.6
}

.services-container {
    display:flex;
    align-items:flex-start;
    gap:50px;
    position:relative;
    z-index:2;
    padding-right:0
}

.services-info {
    width:350px;
    min-width:350px;
    flex-shrink:0;
    padding:50px 0 0 50px;
    position:sticky;
    top:100px
}

.services-info__content {
    color:var(--text-gray);
    font-size:1.1rem;
    line-height:1.8
}

.services-info__content p {
    margin-bottom:20px;
    text-align:justify;
    white-space:normal;
    word-wrap:break-word;
    overflow-wrap:break-word
}

.section-title {
    color:var(--accent-gold);
    font-size:2.5rem;
    margin-bottom:25px;
    word-wrap:break-word
}

@media (max-width: 992px) {
    .services-container {
        flex-direction:column;
        padding-right:0
    }

    .services-info {
        width:100%;
        min-width:unset;
        padding:0 30px;
        position:static;
        margin-bottom:40px
    }
}

.services-slider-container {
    position:relative;
    flex-grow:1;
    overflow:hidden
}

.slider-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    background:rgba(0,0,0,0.5);
    border:none;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    transition:all .3s ease
}

.slider-nav:hover {
    background:var(--accent-gold)
}

.slider-nav svg {
    width:20px;
    height:20px;
    color:var(--text-light)
}

.slider-prev {
    left:10px
}

.slider-next {
    right:10px
}

.slider-nav {
    opacity:.5
}

.slider-nav:hover {
    opacity:1
}

@media (max-width: 768px) {
    .slider-nav {
        width:30px;
        height:30px
    }

    .slider-nav svg {
        width:16px;
        height:16px
    }

        .services-info__content {
            width: 95%;
        }
}

.gallery-section {
    padding:5rem 0;
    background-color:var(--primary-dark)
}

.gallery-container {
    max-width:var(--container-max-width);
    margin:0 auto;
    padding:0 var(--spacing-md)
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:minmax(200px,auto);
    gap:1rem
}

.gallery-item {
    position:relative;
    overflow:hidden;
    border-radius:0;
    transition:transform .3s ease
}

.gallery-item.wide {
    grid-column:span 6
}

.gallery-item.normal {
    grid-column:span 3
}

.gallery-item.tall {
    grid-row:span 2
}

.gallery-item:nth-child(1) {
    grid-column:1 / 7;
    grid-row:1 / 2
}

.gallery-item:nth-child(2),.gallery-item:nth-child(3) {
    grid-column:span 3
}

.gallery-item:nth-child(4) {
    grid-column:1 / 4
}

.gallery-item:nth-child(5) {
    grid-column:4 / 10
}

.gallery-item:nth-child(6) {
    grid-column:10 / 13
}

.gallery-image {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease
}

.gallery-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.7));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:1.5rem;
    opacity:1;
    transition:opacity .3s ease
}

.gallery-caption {
    color:var(--text-light);
    transform:translateY(20px);
    transition:transform .3s ease
}

.gallery-caption-title {
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:.5rem
}

.gallery-caption-text {
    font-size:.9rem;
    color:rgba(255,255,255,0.8)
}

.gallery-item:hover {
    transform:translateY(-5px)
}

.gallery-item:hover .gallery-image {
    transform:scale(1.1)
}

.gallery-item:hover .gallery-overlay {
    opacity:1
}

.gallery-item:hover .gallery-caption {
    transform:translateY(0)
}

.gallery-filters {
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-bottom:2rem;
    flex-wrap:wrap
}

.filter-button {
    padding:.5rem 1.25rem;
    background:transparent;
    border:1px solid var(--accent-gold);
    color:var(--text-light);
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all .3s ease;
    font-size:.9rem
}

.filter-button:hover,.filter-button.active {
    background:var(--accent-gold);
    color:var(--primary-dark)
}

.load-more {
    display:block;
    margin:3rem auto 0;
    padding:.75rem 2rem;
    background:transparent;
    border:2px solid var(--accent-gold);
    color:var(--accent-gold);
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all .3s ease;
    font-weight:500
}

.load-more:hover {
    background:var(--accent-gold);
    color:var(--primary-dark)
}

@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns:repeat(8,1fr)
    }

    .gallery-item.wide {
        grid-column:span 4
    }

    .gallery-item.normal {
        grid-column:span 2
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns:repeat(4,1fr);
        grid-auto-rows:minmax(150px,auto)
    }

    .gallery-item,.gallery-item.wide,.gallery-item.normal {
        grid-column:span 2
    }

    .gallery-item:nth-child(1) {
        grid-column:1 / 5
    }

    .gallery-caption-title {
        font-size:1rem
    }

    .gallery-caption-text {
        font-size:.8rem
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns:1fr;
        gap:.75rem
    }

    .gallery-item,.gallery-item.wide,.gallery-item.normal,.gallery-item:nth-child(1) {
        grid-column:1 / -1
    }

    .filter-button {
        padding:.4rem 1rem;
        font-size:.8rem
    }
}

.gallery {

    background:var(--primary-dark)
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:0
}

.gallery-item {
    position:relative;
    overflow:hidden
}

.gallery-item.large {
    grid-column:1 / 7;
    grid-row:1 / 2
}

.gallery-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease
}

.gallery-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to bottom,rgba(0,0,0,0.3),rgba(0,0,0,0.9));
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    transition:all .4s ease
}

.gallery-item:hover .gallery-overlay {
    opacity:1
}

.gallery-item:hover img {
    transform:scale(1.1)
}

.content {
    text-align:center;
    padding:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:translateY(20px);
    transition:transform .4s ease
}

.gallery-item:hover .content {
    transform:translateY(0)
}

.content .title {
    font-size:2.5rem;
    color:var(--text-light);
    margin-bottom:15px
}

.content .art {
    color:var(--accent-gold);
    display:inline-block
}

.content .sub {
    font-size:1.2rem;
    color:var(--accent-gold);
    margin-bottom:20px;
    text-transform:uppercase;
    letter-spacing:2px
}

.content .copy {
    color:var(--text-gray);
    font-size:1.1rem;
    line-height:1.6;
    max-width:400px;
    margin-bottom:30px
}

.content .btn {
    display:inline-block;
    padding:12px 30px;
    border:1px solid var(--accent-gold);
    text-transform:uppercase;
    letter-spacing:1px;
    transition:all .3s ease
}

.content .btn:hover {
    background:var(--accent-gold);
    color:var(--text-light)
}

@media (max-width: 1200px) {
    .content .title {
        font-size:2rem
    }

    .content .copy {
        font-size:1rem
    }
}

@media (max-width: 768px) {
    .gallery-item.large {
        grid-column:1 / -1
    }

    .content {
        padding:20px
    }

    .content .title {
        font-size:1.8rem
    }

    .content .sub {
        font-size:1rem
    }

    .content .copy {
        font-size:.9rem
    }
}

.btn-outline {
    display:inline-block;
    padding:12px 30px;
    color:var(--accent-gold);
    border:1px solid var(--accent-gold);
    text-decoration:none;
    transition:all .3s ease;
    position:relative;
    overflow:hidden
}

.btn-outline::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:var(--accent-gold);
    transform:translate(-50%,-50%);
    transition:width .3s ease,height .3s ease;
    z-index:-1;
    border-radius:50%
}

.btn-outline:hover {
    color:var(--text-light)
}

@media (max-width: 992px) {
    .row {
        justify-content:center
    }

    .content {
        width:100%;
        padding:40px
    }
}

@media (max-width: 768px) {
    .procedure-intro {
        padding:60px 0
    }

    .title-main {
        font-size:2rem
    }

    .content {
        padding:30px 20px
    }
}

.procedures-grid {
    padding:0;
    background:var(--primary-dark)
}

.procedures {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0
}

.procedure-item {
    position:relative;
    aspect-ratio:1;
    overflow:hidden
}

.procedure-image {
    width:100%;
    height:100%
}

.procedure-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease
}

.procedure-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    transform:translateY(calc(100% - 200px));
    transition:transform .5s ease
}

.procedure-title {
    font-size:24px;
    color:var(--text-light);
    margin-bottom:20px
}
/*@media (max-width: 992px){
    .procedure-title {
            position: absolute;
            bottom: 85px;
        }
}*/

.procedure-title .art {
    display:block;
    color:var(--accent-gold);
    font-size:32px
}

.procedure-content {
    opacity:0;
    transition:opacity .3s ease
}

.procedure-content .title {
    display:none
}

.procedure-content p {
    color:var(--text-gray);
    margin-bottom:20px;
    line-height:1.6
}

.procedure-content .btn {
    display:inline-block;
    text-decoration:none;
    border-bottom:1px solid var(--accent-gold);
    transition:all .3s ease
}

.procedure-content .btn:hover {
    color:var(--text-light);
    border-color:var(--text-light)
}

.procedure-item:hover .procedure-overlay {
    transform:translateY(0)
}

.procedure-item:hover .procedure-content {
    opacity:1
}

.procedure-item:hover .procedure-image img {
    transform:scale(1.1)
}

@media (max-width: 992px) {
    .procedures {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width: 576px) {
    
    
    .procedures {
        grid-template-columns:1fr;
        padding: 0;
    }
        .procedure-item{
                height: 500px;
                width: 100%;
        }

    .procedure-overlay {
        transform:translateY(0);
        background:rgba(0,0,0,0.5)
    }

    .procedure-content {
        opacity:1
    }
    .procedures-container{
        padding: 0 !important;
    }

}

.testimonials {
    position:relative;
    padding:120px 0;
    background-color:var(--primary-dark);
    overflow:hidden
}

.testimonials__bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    filter:blur(10px);
    transform:scale(1.1)
}

.testimonials__header {
    position:relative;
    text-align:center;
    margin-bottom:80px
}

.testimonials__title {
    font-size:3rem;
    color:var(--text-light);
    margin-bottom:15px
}

.testimonials__subtitle {
    font-size:1.2rem;
    color:var(--accent-gold);
    text-transform:uppercase;
    letter-spacing:2px
}

.testimonials__grid {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    max-width:1400px;
    margin:0 auto;
    padding:0 20px
}

.testimonial-card {
    position:relative
}

.testimonial-card__inner {
    position:relative;
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(10px);
    padding:40px;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px;
    transition:transform .3s ease,box-shadow .3s ease
}

.testimonial-card:hover .testimonial-card__inner {
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.2)
}

.testimonial-card__quote {
    font-size:120px;
    line-height:1;
    color:var(--accent-gold);
    opacity:.3;
    position:absolute;
    top:-20px;
    left:20px;
    font-family:Georgia,serif
}

.testimonial-card__text {
    position:relative;
    color:var(--text-light);
    font-size:1.1rem;
    line-height:1.8;
    margin-bottom:30px;
    font-style:italic
}

.testimonial-card__footer {
    display:flex;
    align-items:center;
    gap:15px
}

.testimonial-card__image {
    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--accent-gold)
}

.testimonial-card__image img {
    width:100%;
    height:100%;
    object-fit:cover
}

.testimonial-card__info {
    flex:1
}

.testimonial-card__name {
    color:var(--accent-gold);
    font-size:1.1rem;
    margin-bottom:5px
}

.testimonial-card__procedure {
    color:var(--text-gray);
    font-size:.9rem
}

@media (max-width: 1200px) {
    .testimonials__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width: 768px) {
    .testimonials {
        padding:80px 0
    }

    .testimonials__grid {
        grid-template-columns:1fr
    }

    .testimonials__title {
        font-size:2.5rem
    }

    .testimonial-card__inner {
        padding:30px
    }
}

.video-gallery {
    padding:100px 5%;
    background-color:var(--secondary-dark);
    position:relative
}

.video-slider-container {
    position:relative;
    overflow:hidden
}

.video-grid {
    display:flex;
    gap:30px;
    padding:20px 0;
    overflow-x:auto;
    scroll-behavior:smooth;
    -ms-overflow-style:none;
    scrollbar-width:none;
    cursor:grab
}

.video-grid::-webkit-scrollbar {
    display:none
}

.video-item {
    position:relative;
    min-width:400px;
    aspect-ratio:16/9;
    border-radius:10px;
    overflow:hidden
}

.video-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease
}

.video-item:hover img {
    transform:scale(1.05)
}

.play-button {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60px;
    height:60px;
    background:var(--accent-gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer
}

.play-button svg {
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))
}

.video-item:hover .play-button {
    transform:translate(-50%,-50%) scale(1.1);
    opacity:1
}

.slider-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    background:rgba(0,0,0,0.5);
    border:none;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    transition:all .3s ease;
    color:#fff
}

.slider-nav:hover {
    background:var(--accent-gold)
}

.slider-prev {
    left:10px
}

.slider-next {
    right:10px
}

@media (max-width: 768px) {
    .video-item {
        min-width:300px
    }

    .slider-nav {
        width:35px;
        height:35px
    }
}

.video-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    display:none;
    opacity:0;
    transition:opacity .3s ease
}

.video-modal.active {
    display:flex;
    opacity:1
}

.video-modal__overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9)
}

.video-modal__container {
    position:relative;
    width:90%;
    max-width:1000px;
    margin:auto;
    z-index:1
}

.video-modal__content {
    position:relative;
    padding-bottom:50%;
    height:0;
    overflow:hidden;
    background:#000;
    border-radius:8px
}

.video-modal__content iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}

.video-modal__close {
    position:absolute;
    top:-40px;
    right:-40px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    color:#fff;
    padding:0;
    transition:transform .2s ease
}

.video-modal__close:hover {
    transform:scale(1.1)
}

@media (max-width: 768px) {
    .video-modal__container {
        width:95%
    }

    .video-modal__close {
        right:0
    }
}

.video-item {
    position:relative;
    cursor:pointer;
    overflow:hidden;
    border-radius:8px;
    transition:transform .2s ease
}

.video-item:hover {
    transform:translateY(-2px)
}

.video-item img {
    width:100%;
    height:100%;
    object-fit:cover
}

.video-item:hover .play-button {
    background:var(--accent-gold-hover)
}

@keyframes fadeInUp {
    from {
        opacity:0;
        transform:translateY(30px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes fadeIn {
    from {
        opacity:0
    }

    to {
        opacity:1
    }
}

.fade-up {
    opacity:0;
    transform:translateY(30px);
    transition:all .6s ease
}

.fade-up.visible {
    opacity:1;
    transform:translateY(0)
}

@media (max-width: 1024px) {
    .doctor-intro {
        grid-template-columns:1fr
    }

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

@media (max-width: 768px) {
    .hero-content {
        padding:0 20px
    }

    .services-container {
    display: flex;
    align-items: normal;
     }
    .services-grid {
        grid-template-columns:1fr;
        display: grid;
        margin: 0;
    }
    .service-card{
        width: 100%;
    }

    .gallery-grid {
        grid-template-columns:1fr;
        display: grid;
    }

    .tabs {
        flex-direction:column
    }
}

.contact {
    position:relative;
    padding:100px 0;
    background-color:var(--primary-dark)
}

.contact__bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:linear-gradient(45deg,rgba(26,26,26,0.95),rgba(26,26,26,0.8)),url(https://picsum.photos/1920/1080);
    background-size:cover;
    background-position:center;
    background-attachment:fixed
}

.contact__wrapper {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:60px
}

.contact__info {
    color:var(--text-light)
}

.contact__title {
    font-size:2.5rem;
    color:var(--accent-gold);
    margin-bottom:20px
}

.contact__description {
    color:var(--text-gray);
    margin-bottom:40px;
    line-height:1.6
}

.contact__details {
    display:grid;
    gap:30px
}

.contact__item {
    display:flex;
    align-items:flex-start;
    gap:15px
}

.contact__icon {
    font-size:24px;
    color:var(--accent-gold)
}

.contact__text h4 {
    color:var(--text-light);
    margin-bottom:5px
}

.contact__text p {
    color:var(--text-gray)
}

.contact {
    position:relative;
    padding:80px 0;
    background:var(--primary-dark)
}

.container {
    max-width:1400px;
    margin:0 auto;
    padding:0 20px
}

.contact__wrapper {
    position:relative;
    display:flex;
    min-height:600px
}

.contact__image {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:40px;
    text-align:center
}

.contact__image-container {
    width:400px;
    height:400px;
    border-radius:50%;
    overflow:hidden;
    margin-bottom:30px;
    border:3px solid var(--accent-gold)
}

.contact__image img {
    width:100%;
    height:100%;
    object-fit:cover
}

.contact__doctor-info {
    max-width:500px
}

.contact__doctor-name {
    color:var(--accent-gold);
    font-size:28px;
    margin-bottom:15px
}

.contact__doctor-title {
    color:var(--text-gray);
    font-size:18px;
    margin-bottom:20px
}

.contact__doctor-description {
    color:var(--text-light);
    line-height:1.8;
    margin-bottom:20px
}

.contact__form {
    flex:1;
    background:rgba(255,255,255,0.03);
    padding:40px;
    backdrop-filter:blur(10px)
}

@media (max-width: 1200px) {
    .contact__image-container {
        width:300px;
        height:300px
    }
}

@media (max-width: 992px) {
    .contact__wrapper {
        flex-direction:column
    }

    .contact__image {
        padding:20px
    }

    .contact__image-container {
        width:250px;
        height:250px
    }
}

.contact__form {
    background:rgba(255,255,255,0.03);
    padding:40px;
    backdrop-filter:blur(10px)
}

.form__group {
    position:relative;
    margin-bottom:25px
}

.form__row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.form__input {
    width:100%;
    padding:12px 20px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:var(--text-light);
    font-size:16px;
    transition:all .3s ease
}

.form__input:focus {
    border-color:var(--accent-gold);
    background:rgba(255,255,255,0.1)
}

.form__input--textarea {
    height:120px;
    resize:none
}

.form__label {
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-gray);
    transition:all .3s ease;
    pointer-events:none
}

.form__input:focus + .form__label,.form__input:not(:placeholder-shown) + .form__label {
    top:-10px;
    left:10px;
    font-size:12px;
    color:var(--accent-gold);
    background:var(--primary-dark);
    padding:0 5px
}

.form__submit {
    width:100%;
    padding:15px;
    background:var(--accent-gold);
    color:#000;
    border:none;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
    transition:all .3s ease
}

.form__submit:hover {
    background:var(--accent-gold-hover)
}

@media (max-width: 992px) {
    .contact__wrapper {
        grid-template-columns:1fr;
        gap:40px
    }
}

@media (max-width: 768px) {
    .form__row {
        grid-template-columns:1fr
    }

    .contact__form {
        padding:30px 20px
    }
}

.fixed-cta {
    display:none;
    justify-content:center;
    gap:1px;
    background-color:var(--primary-dark);
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    transition:bottom .3s ease-in-out;
    z-index:999;
}

.fixed-cta::before {
    content:'';
    position:absolute;
    bottom:53px;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-gold),transparent)
}

.fixed-cta .btn-call,.fixed-cta .tel-btn {
    background-color:var(--primary-dark);
    color:var(--text-light);
    padding:15px;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    transition:background-color .3s ease
}

.fixed-cta .tel-btn {
    background-color:var(--secondary-dark)
}

.fixed-cta a:hover {
    background-color:var(--accent-gold-hover)!important
}

@media (max-width: 768px) {
    .fixed-cta {
        bottom:0;
        display:flex
    }

    .fixed-cta a.btn {
        flex:1;
        text-align:center
    }
}

.visuallyhidden {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0
}

.footer {
    background-color:var(--secondary-dark);
    color:var(--text-light);
    padding-top:var(--spacing-2xl);
    position:relative
}

.footer::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-gold),transparent)
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:var(--spacing-2xl);
    padding-bottom:var(--spacing-2xl);
    border-bottom:1px solid rgba(255,255,255,0.1)
}

.footer-info {
    max-width:400px
}

.footer-logo {
    width:180px;
    margin-bottom:var(--spacing-lg)
}

.footer-description {
    color:var(--text-gray);
    line-height:1.6;
    margin-bottom:var(--spacing-lg)
}

.footer-contact-info {
    display:flex;
    flex-direction:column;
    gap:var(--spacing-md)
}

.contact-item {
    display:flex;
    align-items:center;
    gap:var(--spacing-sm);
    color:var(--text-gray)
}

.contact-item i {
    color:var(--accent-gold);
    font-size:1.2rem
}

.footer-links-column h4 {
    color:var(--accent-gold);
    margin-bottom:var(--spacing-lg);
    font-size:1.2rem
}

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

.footer-link {
    margin-bottom:var(--spacing-sm)
}

.footer-link a {
    color:var(--text-gray);
    text-decoration:none;
    transition:all var(--transition-base);
    display:inline-block;
    position:relative
}

.footer-link a::after {
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:0;
    height:1px;
    background:var(--accent-gold);
    transition:width var(--transition-base)
}

.footer-link a:hover {
    color:var(--accent-gold);
    padding-left:var(--spacing-xs)
}

.footer-link a:hover::after {
    width:100%
}

.footer-newsletter {
    margin-bottom:var(--spacing-xl)
}

.newsletter-form {
    display:flex;
    gap:var(--spacing-sm);
    margin-top:var(--spacing-md)
}

.newsletter-input {
    flex:1;
    padding:var(--spacing-sm) var(--spacing-md);
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:var(--radius-sm);
    color:var(--text-light);
    transition:all var(--transition-base)
}

.newsletter-input:focus {
    background:rgba(255,255,255,0.15);
    border-color:var(--accent-gold)
}

.newsletter-button {
    padding:var(--spacing-sm) var(--spacing-lg);
    background:var(--accent-gold);
    border:none;
    border-radius:var(--radius-sm);
    color:#000;
    cursor:pointer;
    transition:all var(--transition-base)
}

.newsletter-button:hover {
    background:var(--accent-gold-hover);
    transform:translateY(-2px)
}

.social-media {
    display:flex;
    gap:var(--spacing-md);
    margin-top:var(--spacing-lg)
}

.social-link {
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-light);
    transition:all var(--transition-base)
}

.social-link:hover {
    background:var(--accent-gold);
    transform:translateY(-3px)
}

.footer-bottom {
    padding:var(--spacing-lg) 0;
    text-align:center;
    color:var(--text-gray);
    font-size:.9rem
}

.footer-bottom-links {
    display:flex;
    justify-content:center;
    gap:var(--spacing-lg);
    margin-top:var(--spacing-md)
}

.footer-bottom-link {
    color:var(--text-gray);
    text-decoration:none;
    transition:color var(--transition-base)
}

.footer-bottom-link:hover {
    color:var(--accent-gold)
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:var(--spacing-xl)
    }

    .footer-info {
        grid-column:1 / -1;
        max-width:none;
        text-align:center
    }

    .footer-logo {
        margin:0 auto var(--spacing-lg)
    }

    .social-media {
        justify-content:center
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns:1fr;
        text-align:center
    }

    .footer-links-column {
        margin-bottom:var(--spacing-xl)
    }

    .newsletter-form {
        flex-direction:column
    }

    .footer-bottom-links {
        flex-direction:column;
        gap:var(--spacing-md)
    }

    .contact-item {
        justify-content:center
    }
}

.page-banner {
    position:relative;
    height:500px;
    margin-top:0;
    overflow:hidden;
    background-color:var(--primary-dark)
}

.page-banner__image {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform:scale(1.1);
    transition:transform .3s ease-out
}

.page-banner__image::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(45deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.4) 100%);
    opacity:.9;
    transition:opacity .3s ease
}

.page-banner:hover .page-banner__image {
    transform:scale(1.15)
}

.page-banner__image img {
    width:100%;
    height:100%;
    object-fit:cover;
    animation:bannerFade .5s ease-in
}

.page-banner__content {
    position:relative;
    z-index:2;
    max-width:var(--container-max-width);
    margin:0 auto;
    padding:200px var(--container-padding) 0;
    color:var(--text-light);
    opacity:0;
    transform:translateY(20px);
    animation:contentFade .8s ease-out forwards;
    animation-delay:.2s
}

.page-banner__content h1 {
    font-size:clamp(2.5rem,5vw,4.5rem);
    margin-bottom:20px;
    color:var(--text-light);
    font-weight:600;
    line-height:1.2;
    text-shadow:2px 2px 4px rgba(0,0,0,0.3)
}

.breadcrumb {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.1rem;
    color:var(--text-gray);
    margin-top:20px
}

.breadcrumb a {
    color:var(--text-light);
    text-decoration:none;
    transition:all .3s ease;
    position:relative;
    padding-bottom:2px
}

.breadcrumb a::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:1px;
    background:var(--accent-gold);
    transition:width .3s ease
}

.breadcrumb a:hover {
    color:var(--accent-gold)
}

.breadcrumb a:hover::after {
    width:100%
}

.breadcrumb .separator {
    color:var(--text-gray);
    opacity:.7
}

.breadcrumb .current {
    color:var(--accent-gold);
    font-weight:500
}

@keyframes bannerFade {
    from {
        opacity:0;
        transform:scale(1.1)
    }

    to {
        opacity:1;
        transform:scale(1)
    }
}

@keyframes contentFade {
    to {
        opacity:1;
        transform:translateY(0)
    }
}

@media (max-width: 992px) {
    .page-banner {
        height:450px
    }

    .page-banner__content {
        padding-top:180px
    }
}

@media (max-width: 768px) {
    .page-banner {
        height:400px
    }

    .page-banner__content {
        padding-top:150px;
        text-align:center
    }

    .breadcrumb {
        justify-content:center;
        font-size:1rem
    }
}

.page-banner.has-parallax .page-banner__image {
    position:fixed;
    height:140%;
    top:-20%
}

.page-banner__video {
    position:absolute;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    transform:translate(-50%,-50%);
    object-fit:cover
}
.dropdown-menu>li:hover>ul {
    left: 314px;
    top:0px;
    display: block;
}
.dropdown-menu>li>ul:hover {
    display: block;
}
.dropdown-menu>li>ul {
    display: none;
}
.nav-link {
    padding: 6px !important;
}
.nav-item {
    margin: 0 10px !important;
}
.menu-item-has-children.dropdown > ul > li > ul {
  top: -16px;
}
.menu-item-has-children.dropdown > ul > li > ul:before {
  border-bottom:0px;
}
.single-page__content {
  color: var(--text-light);
  background:#080808;
  border:1px solid #222;
  padding: 25px;
}

 .single-page__content a {
     color: var(--accent-gold);
     text-decoration: none;
     transition: color var(--transition-fast);
 }

 .single-page__content a:hover {
     color: var(--accent-gold-hover);
     text-decoration: underline;
 }

 .single-page__content input[type="text"],
 .single-page__content input[type="email"],
 .single-page__content input[type="password"],
 .single-page__content input[type="number"],
 .single-page__content textarea,
 .single-page__content select {
     width: 100%;
     padding: var(--spacing-sm);
     border: 1px solid var(--text-gray);
     border-radius: var(--radius-sm);
     box-sizing: border-box;
     margin-bottom: var(--spacing-md);
     transition: border-color var(--transition-base), box-shadow var(--transition-base);
     font-family: var(--font-primary);
     background-color: #333;
     color: var(--text-light);
 }

 .single-page__content input:focus,
 .single-page__content textarea:focus,
 .single-page__content select:focus {
     border-color: var(--accent-gold);
     box-shadow: 0 0 8px rgba(201, 160, 80, 0.6);
     outline: none;
 }

 .single-page__content .btn {
     display: inline-block;
     font-weight: 400;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     user-select: none;
     border: 1px solid transparent;
     padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-md) + 4px);
     font-size: 1rem;
     line-height: 1.5;
     border-radius: var(--radius-sm);
     transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
     cursor: pointer;
     text-decoration: none;
 }

 .single-page__content .btn-primary {
     color: var(--primary-dark);
     background-color: var(--accent-gold);
     border-color: var(--accent-gold);
 }

 .single-page__content .btn-primary:hover {
     background-color: var(--accent-gold-hover);
     border-color: var(--accent-gold-hover);
 }

 .single-page__content .btn-secondary {
     color: var(--text-light);
     background-color: var(--secondary-dark);
     border-color: var(--secondary-dark);
 }

 .single-page__content .btn-secondary:hover {
     background-color: var(--accent-gold);
     border-color: var(--accent-gold);
 }

 .single-page__content .form-group {
     margin-bottom: var(--spacing-md);
 }

 .single-page__content label {
     display: inline-block;
     margin-bottom: var(--spacing-xs);
 }

 .single-page__content input[type="checkbox"],
 .single-page__content input[type="radio"] {
     margin-right: var(--spacing-xs);
 }

 .single-page__content .custom-control {
     position: relative;
     display: block;
     min-height: 1.5rem;
     padding-left: 1.5rem;
     margin-bottom: var(--spacing-md);
 }

 .single-page__content .custom-control-input {
     position: absolute;
     left: 0;
     top: var(--spacing-xs);
     width: 1rem;
     height: 1rem;
     z-index: 1;
     opacity: 0;
 }

 .single-page__content .custom-control-label {
     margin-bottom: 0;
     vertical-align: middle;
     cursor: pointer;
 }

 .single-page__content .custom-checkbox .custom-control-label::before {
     content: "";
     display: inline-block;
     width: 1rem;
     height: 1rem;
     border: 1px solid var(--text-gray);
     border-radius: var(--radius-sm);
     background-color: #fff;
     margin-right: var(--spacing-xs);
     vertical-align: middle;
     transition: background-color var(--transition-fast), border-color var(--transition-fast);
 }

 .single-page__content .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
     background-color: var(--accent-gold);
     border-color: var(--accent-gold);
 }

 .single-page__content .custom-radio .custom-control-label::before {
     content: "";
     display: inline-block;
     width: 1rem;
     height: 1rem;
     border: 1px solid var(--text-gray);
     border-radius: 50%;
     background-color: #fff;
     margin-right: var(--spacing-xs);
     vertical-align: middle;
     transition: background-color var(--transition-fast), border-color var(--transition-fast);
 }

 .single-page__content .custom-radio .custom-control-input:checked~.custom-control-label::before {
     background-color: var(--accent-gold);
     border-color: var(--accent-gold);
 }
 .single-page__content h2{
    margin-top: 20px;
 }
 .single-page__content img{
   border: none;
   background-color: none;
   border-radius: 8px;
 }
 .menu-item-has-children{
    padding-left: 16px;
 }
@media (max-width: 768px) {
  .menu-item-has-children {
        padding-left: 0;
    }
}