:root {
    --theme-rose: #c99a9b;
    --theme-rose-deep: #95616b;
    --theme-blush: #f7efec;
    --theme-plum: #382633;
    --theme-ink: #493b42;
    --theme-champagne: #e7d4b8;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #fff;
    color: var(--theme-ink);
    font-family: "Rubik", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-plum);
    font-family: "Poppins", Arial, sans-serif;
}

a {
    color: var(--theme-rose-deep);
}

a:hover,
a:focus {
    color: var(--theme-plum);
}

.trans-navigation {
    z-index: 1000;
    padding: 12px 0;
    background: rgba(56, 38, 51, 0.96);
    border-bottom: 1px solid rgba(231, 212, 184, 0.2);
    box-shadow: 0 8px 24px rgba(56, 38, 51, 0.12);
    backdrop-filter: blur(14px);
}

.trans-navigation.header-white {
    background: rgba(56, 38, 51, 0.96);
}

.trans-navigation .navbar-brand,
.trans-navigation .navbar-brand > div,
.trans-navigation .navbar-brand > span {
    color: #fff !important;
    font-family: "Bodoni Moda", Georgia, serif !important;
    font-size: clamp(1.8rem, 2.4vw, 2.3rem) !important;
    font-weight: 400;
}

.navbar-expand-lg.trans-navigation .navbar-nav .nav-link {
    padding: 0.7rem 0.65rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 0.2s ease, background 0.2s ease;
}

.navbar-expand-lg.trans-navigation .navbar-nav .nav-link:hover,
.navbar-expand-lg.trans-navigation .navbar-nav .nav-link:focus,
.navbar-expand-lg.trans-navigation .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(231, 212, 184, 0.14);
    border-radius: 999px;
}

.trans-navigation .navbar-toggler {
    border-color: rgba(231, 212, 184, 0.5);
    background: transparent !important;
    color: #fff !important;
}

.trans-navigation .navbar-toggler-icon {
    background-image: linear-gradient(
        to bottom,
        #fff 0 2px,
        transparent 2px 7px,
        #fff 7px 9px,
        transparent 9px 14px,
        #fff 14px 16px
    );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 16px;
    color: #fff;
}

#page-banner {
    min-height: 400px;
    padding: 100px 0 80px;
}

.page-banner-area {
    background: #fff;
}

.page-banner-area .overlay {
    display: none;
}

.page-banner-area .banner-content,
.page-banner-area .banner-content p,
.page-banner-area .banner-content .tm-text,
.page-banner-area .banner-content [style*="color"] {
    color: var(--theme-ink) !important;
}

.page-banner-area .banner-content h1,
.page-banner-area .banner-content h1 span,
.page-banner-area .banner-content h2,
.page-banner-area .banner-content h3,
.page-banner-area .banner-content h4,
.page-banner-area .banner-content .tm-white {
    color: var(--theme-plum) !important;
}

.page-banner-area .banner-content h1 {
    font-family: "Bodoni Moda", Georgia, serif !important;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
}

.page-banner-area .banner-content h2 {
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.prom-dresses-page #page-banner .tm-text-title {
    color: var(--theme-plum) !important;
}

.prom-dresses-page #page-banner .tm-text {
    color: var(--theme-ink) !important;
}

.page-banner-area .banner-content a {
    color: var(--theme-rose-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-banner-area .banner-content a:hover,
.page-banner-area .banner-content a:focus {
    color: var(--theme-plum);
}

.page-banner-area .tm-img-gallery-info-container {
    padding: 22px 18px;
    border: 1px solid rgba(149, 97, 107, 0.14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(56, 38, 51, 0.06);
}

.page-banner-area .tm-img {
    border-radius: 12px;
}

.mother-bride-page .gallery-two .tm-figure-description,
.flowergirl-page .gallery-two .tm-figure-description,
.communion-page .gallery-two figcaption p,
.bridesmaid-page #page-banner .grid-item figure figcaption p,
.prom-dresses-page #page-banner .grid-item figure figcaption p,
.wedding-page #page-banner .grid-item figure figcaption p {
    max-width: 90%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    background: rgba(56, 38, 51, 0.94);
    color: #fff !important;
    font-size: 0.95rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.communion-page #page-banner .gallery-two .grid-item figure figcaption .img-title {
    color: #fff !important;
    background: transparent !important;
    border: 0;
    padding: 0;
    font-size: 2rem !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8);
}

@media (max-width: 640px) {
    .communion-page #page-banner .gallery-two .grid-item figure figcaption .img-title {
        font-size: 1.5rem !important;
    }
}

.communion-page #page-banner .gallery-two .grid-item figure figcaption p {
    color: #fff !important;
    background: rgba(56, 38, 51, 0.94) !important;
    opacity: 1 !important;
    transform: none !important;
}

.section-padding {
    padding: 72px 0;
}

#footer {
    padding-top: 64px;
    background: linear-gradient(135deg, #382633, #2d202b);
    border-top: 1px solid rgba(231, 212, 184, 0.2);
    color: rgba(255, 255, 255, 0.78);
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
    color: #fff;
}

#footer a,
#footer p,
#footer li {
    color: rgba(255, 255, 255, 0.76);
}

#footer .footer-text p span {
    color: rgba(255, 255, 255, 0.76);
}

#footer a:hover,
#footer a:focus {
    color: var(--theme-champagne);
}

.footer-copy {
    border-color: rgba(255, 255, 255, 0.16);
}

#footer .footer-copy > div:first-child {
    font-family: "Bodoni Moda", Georgia, serif !important;
}

#footer .footer-copy > div:last-child {
    color: rgba(255, 255, 255, 0.76) !important;
}

@media (max-width: 991.98px) {
    .trans-navigation > .container {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding-right: 16px;
        padding-left: 16px;
    }

    .trans-navigation .navbar-brand,
    .trans-navigation .navbar-brand > div {
        flex: 0 1 auto;
        margin-right: 0;
        white-space: nowrap !important;
    }

    .trans-navigation .navbar-brand {
        display: flex;
        align-items: center;
        height: 44px;
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    .trans-navigation .navbar-toggler {
        display: block;
        flex: 0 0 44px;
        margin-left: auto;
    }

    .trans-navigation .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        z-index: 1001;
        display: none;
        width: auto;
        margin: 8px 0 0;
        padding: 0.75rem 1rem;
        border: 1px solid rgba(231, 212, 184, 0.18);
        border-radius: 14px;
        background: var(--theme-plum);
        box-shadow: 0 16px 32px rgba(38, 25, 35, 0.24);
    }

    .trans-navigation .navbar-collapse.is-open {
        display: block !important;
    }

    .trans-navigation .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .navbar-expand-lg.trans-navigation .navbar-nav .nav-link {
        padding: 0.35rem 0.65rem;
        line-height: 1.2;
    }

    .trans-navigation .navbar-collapse.is-open {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    .mother-bride-page .gallery-two .tm-figure-description,
    .flowergirl-page .gallery-two .tm-figure-description,
    .communion-page .gallery-two figcaption p:not(.img-title),
    .bridesmaid-page #page-banner .grid-item figure figcaption p,
    .prom-dresses-page #page-banner .grid-item figure figcaption p,
    .wedding-page #page-banner .grid-item figure figcaption p {
        max-width: 82%;
        padding: 7px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .trans-navigation > .container {
        flex-wrap: nowrap;
    }

    .trans-navigation .navbar-brand {
        min-width: 0;
        margin-right: 0.5rem;
        white-space: nowrap;
    }

    .trans-navigation .navbar-brand,
    .trans-navigation .navbar-brand > div,
    .trans-navigation .navbar-brand > span {
        font-size: clamp(1.05rem, 5vw, 1.4rem) !important;
        white-space: nowrap !important;
    }

    .trans-navigation .navbar-toggler {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    #page-banner {
        padding: 55px 0 56px;
    }

    .contact-page #page-banner,
    .dressmaker-page #page-banner,
    .evening-page #page-banner {
        padding-top: 80px;
    }

    #page-banner .banner-content > br {
        display: none;
    }

    .section-padding {
        padding: 52px 0;
    }
}