@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
    --pink-main:#f472b6;
    --pink-soft:#fbcfe8;
    --pink-deep:#ec4899;

    --milk:#fffaf4;
    --milk-dark:#f5ede3;

    --gold:#f4c97b;

    --text-light:rgba(255,255,255,0.82);

    --shadow-soft:0 10px 40px rgba(244,114,182,0.12);
    --shadow-hover:0 20px 60px rgba(244,114,182,0.25);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;

    background:
    radial-gradient(circle at top left,
    rgba(244,114,182,0.15),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(244,201,123,0.12),
    transparent 30%),

    #120d11;

    color:white;
    overflow-x:hidden;
}

.heading{
    font-family:'Playfair Display',serif;
    color:var(--milk);
}

nav{
    background:rgba(20,12,18,0.72);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav-link{
    position:relative;
    color:rgba(255,255,255,0.82);
    transition:0.3s ease;
}

.nav-link:hover{
    color:var(--pink-soft);
}

.nav-link::after{
    content:'';
    position:absolute;
    width:0;
    height:2px;
    left:0;
    bottom:-6px;

    background:linear-gradient(
        to right,
        var(--pink-main),
        var(--gold)
    );

    transition:0.4s ease;
}

.nav-link:hover::after{
    width:100%;
}

.hero-overlay{
    background:
    linear-gradient(
        to bottom,
        rgba(18,13,17,0.35),
        rgba(18,13,17,0.72),
        rgba(18,13,17,0.95)
    );
}

.hero-badge{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    color:var(--milk);
    box-shadow:var(--shadow-soft);
}

.primary-btn{
    background:linear-gradient(
        135deg,
        var(--pink-main),
        var(--pink-deep)
    );

    box-shadow:0 12px 30px rgba(244,114,182,0.35);

    transition:all .35s ease;
}

.primary-btn:hover{
    transform:translateY(-3px);

    box-shadow:0 18px 50px rgba(244,114,182,0.5);
}

.secondary-btn{
    border:1px solid rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(8px);

    transition:all .35s ease;
}

.secondary-btn:hover{
    border-color:var(--gold);
    background:rgba(255,255,255,0.08);
}

#about{
    background:
    linear-gradient(
        to bottom,
        rgba(255,250,244,0.04),
        rgba(255,250,244,0.01)
    );
}

#services{
    background:
    linear-gradient(
        to bottom,
        #140d12,
        #1d1318
    );
}

#stylists{
    background:
    linear-gradient(
        to bottom,
        #1d1318,
        #140d12
    );
}

#gallery{
    background:#120d11;
}

.section-tag{
    color:var(--gold);
    letter-spacing:0.2em;
    text-transform:uppercase;
    font-size:0.8rem;
    font-weight:600;
}

.service-card{
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(16px);

    transition:all .45s ease;

    box-shadow:var(--shadow-soft);
}

.service-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(244,114,182,0.35);
}

.service-card img{
    transition:transform .7s ease;
}

.service-card:hover img{
    transform:scale(1.06);
}

.variant-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.06);

    transition:all .35s ease;
}

.variant-box:hover{
    background:
    linear-gradient(
        135deg,
        rgba(244,114,182,0.9),
        rgba(236,72,153,0.95)
    );

    transform:translateX(5px);

    box-shadow:0 10px 30px rgba(244,114,182,0.3);
}

.stylist-card{
    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    overflow:hidden;

    transition:all .4s ease;
}

.stylist-card:hover{
    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);
}

.stylist-card img{
    transition:transform .7s ease;
}

.stylist-card:hover img{
    transform:scale(1.05);
}

.gallery-item{
    overflow:hidden;
    border-radius:24px;
}

.gallery-item img{
    transition:all .7s ease;
}

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

#booking-modal{
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(18px);
}

#booking-modal > div{
    background:
    linear-gradient(
        180deg,
        rgba(35,20,28,0.98),
        rgba(20,13,17,0.98)
    );

    border:1px solid rgba(255,255,255,0.08);
}

input,
textarea,
select{
    background:rgba(255,255,255,0.06) !important;

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    transition:0.3s ease;
}

input:focus,
textarea:focus,
select:focus{
    outline:none;

    border-color:var(--pink-main);

    box-shadow:0 0 0 4px rgba(244,114,182,0.15);
}

select option{
    background:#1b1116;
    color:white;
}

.appointment-option{
    display:block;
    cursor:pointer;
}

.appointment-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.appointment-option span{
    display:block;
    height:100%;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.05);
    border-radius:1rem;
    padding:1rem;
    transition:all .3s ease;
}

.appointment-option input:checked + span{
    border-color:var(--pink-main);
    background:linear-gradient(
        135deg,
        rgba(244,114,182,0.26),
        rgba(244,201,123,0.12)
    );
    box-shadow:0 0 0 4px rgba(244,114,182,0.12);
}

.booking-summary{
    border:1px solid rgba(244,201,123,0.28);
    background:rgba(244,201,123,0.08);
}

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#1b1116;
}

::-webkit-scrollbar-thumb{
    background:
    linear-gradient(
        to bottom,
        var(--pink-main),
        var(--gold)
    );

    border-radius:20px;
}

@media(max-width:768px){

    h1{
        font-size:4rem !important;
        line-height:0.95;
    }

    h2{
        font-size:2.5rem !important;
    }

}
.service-slider img {
    filter: contrast(1.05) saturate(1.1);
    transform: scale(1.05);
}
.service-card {
    position: relative;
    overflow: hidden;
}