/* ===========================
   first
=========================== */

.boudoir-section-title{
    position:relative;
    background-color: var(--Black);
    top: 30px;
    margin:0 auto 100px;

    text-align:center;

    padding:0px 20px;

    overflow:hidden;
}
.boudoir-section-title p{
    font-size: 17px;
}

/* HUGE WATERMARK */

.boudoir-section-watermark{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    font-size:clamp(4rem,13vw,9rem);

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#ffffff;

    opacity:0.12;

    white-space:nowrap;

    user-select:none;

    pointer-events:none;

    z-index:1;
}

/* SMALL EYEBROW */

.boudoir-section-kicker{

    position:relative;
    z-index:2;

    display:block;

    margin-bottom:20px;

    color:var(--Rose);

    text-transform:uppercase;

    letter-spacing:.35em;

    font-size:.75rem;

    font-weight:500;
}

/* MAIN HEADING */

.boudoir-section-title h3{

    position:relative;
    z-index:2;
    max-width: 1000px;
    font-size:clamp(2.2rem,4vw,4rem);

    font-weight:300;

    line-height:1.15;

    letter-spacing:-.02em;

    color:#F7F4F1;

    margin:auto;
}

/* Optional supporting text */

.boudoir-section-title p{

    position:relative;
    z-index:2;

    margin:30px auto 0;

    max-width:1000px;

    color:#A8A8A8;

    line-height:1.8;
}


/* ===========================
   second
=========================== */

.boudoir-lux-split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
}

/* ===========================
   PANELS (BASE)
=========================== */

.boudoir-lux-panel{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: #fff;

    overflow: hidden;

    padding: 80px 40px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===========================
   BACKGROUND IMAGES
=========================== */

.boudoir-lux-panel.studio{
    background-image: url("../img/erinH.jpg");
}

.boudoir-lux-panel.portfolio{
    background-image: url("../img/maryW.jpg");
}

/* ===========================
   LUXURY OVERLAY
=========================== */

.overlay{
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at center,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0.55) 60%,
        rgba(0,0,0,0.85) 100%
    );

    transition: 0.5s ease;
    z-index: 1;
}

/* ===========================
   CONTENT
=========================== */

.boudoir-content{
    position: relative;
    z-index: 2;

    max-width: 420px;
    text-align: center;
}

/* EYEBROW */
.boudoir-eyebrow{
    display: block;
    margin-bottom: 15px;

    font-size: 12px;
    letter-spacing: 0.35em;
    text-transform: uppercase;

    color: var(--Rose);
}

/* HEADING */
.boudoir-content h2{
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.2;

    margin-bottom: 15px;
}

/* TEXT */
.boudoir-content p{
    font-size: 20px;
    line-height: 1.7;

    color: rgba(255,255,255,0.75);

    margin-bottom: 25px;
}

/* CTA */
.boudoir-cta{
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* UNDERLINE ANIMATION */
.boudoir-cta::after{
    content: "";
    display: block;

    width: 0%;
    height: 1px;

    background: #C9A46A;

    margin-top: 8px;

    transition: 0.4s ease;
}

/* ===========================
   HOVER EFFECT (LUXURY FEEL)
=========================== */

.boudoir-lux-panel:hover .overlay{
    background: radial-gradient(
        circle at center,
        rgba(0,0,0,0.10) 0%,
        rgba(0,0,0,0.45) 60%,
        rgba(0,0,0,0.75) 100%
    );
}

.boudoir-lux-panel:hover .boudoir-cta::after{
    width: 100%;
}

/* ===========================
   MOBILE STACK
=========================== */

@media (max-width: 768px){
    .boudoir-lux-split{
        grid-template-columns: 1fr;
    }

    .boudoir-lux-panel{
        min-height: 60vh;
    }
}


/* ===========================
   third
=========================== */


.boudoir-featured-gallery{

    max-width:1300px;

    margin: 30px auto 30px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.boudoir-cover{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background: var(--Black);

    box-shadow:0 25px 70px rgba(0,0,0,.45);

    transition:.45s;
}

.boudoir-cover img{

    width:100%;

    display:block;

    transition:1s;
    border-radius: 5px;
    margin: 5px 0;
}
.cover-feature img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;  
}
.boudoir-cover:hover{

    transform:translateY(-10px);
}

.boudoir-cover:hover img{

    transform:scale(1.05);
}

/* gold outline */

.boudoir-cover::after{

    content:"";

    position:absolute;

    inset:0;


    border-radius:18px;

    pointer-events:none;
}

@media (max-width:992px){

    .boudoir-featured-gallery{

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

}

@media (max-width:600px){

    .boudoir-featured{

        padding:80px 20px;
    }

    .boudoir-featured-gallery{

        grid-template-columns:1fr;
    }

}

/* ===========================
   fourth
=========================== */

.boudoir-experience-features{

    display:grid;

    gap:18px;
    display: grid;
    gap: 18px;
    text-align: left;
    max-width: 1000px;
    margin: 30px auto;
}

.boudoir-experience-features div{

    color:#fff;

    font-size:15px;

    letter-spacing:.04em;
}


@media (max-width:992px){

    .boudoir-experience-features{

        justify-content:center;
    }

}

/* BUTTON */
.lux-btn {
  display: inline-block;
    text-align: center;
  padding: 14px 28px;
margin-top:20px;
margin-bottom:20px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;

  color: #0b0b0d;
  background: var(--Rose);
  border-radius:5px;

  text-decoration: none;

  transition: 0.3s ease;
}

.lux-btn:hover {
  background: var(--White);
  color: var(--Black);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
    .hero-image img {
        filter: contrast(1.05) brightness(0.5) !important;
    }
}