* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}

html {
    scroll-behavior:smooth;
}

body {
    background:#050505;
    color:white;
}


/* HEADER */

header {

    position:fixed;
    top:0;
    width:100%;
    z-index:1000;

    background:rgba(0,0,0,.85);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(157,78,221,.4);

}


nav {

    max-width:1200px;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;

}


nav h1 {

    letter-spacing:4px;
    font-size:24px;

}


.nav-links a {

    color:white;
    text-decoration:none;

    margin-left:25px;

    transition:.3s;

}


.nav-links a:hover {

    color:#b983ff;

}





/* HERO */


.hero {

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;


    background:

    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.95)
    ),

    radial-gradient(
    circle at top,
    #7b2cbf,
    #000 60%
    );

}



.hero-content {

    max-width:850px;
    padding:30px;

}



.hero h2 {

    font-size:clamp(50px,8vw,90px);

    text-transform:uppercase;

    letter-spacing:6px;

}



.hero span {

    color:#b983ff;

}



.hero p {

    margin:30px auto;

    color:#ccc;

    font-size:21px;

    line-height:1.6;

}



.buttons {

    margin-top:30px;

}



.btn {

    display:inline-block;

    padding:16px 40px;

    margin:10px;

    border-radius:50px;

    background:#9d4edd;

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.btn:hover {

    transform:translateY(-5px);

    box-shadow:0 0 30px #9d4edd;

}



.secondary {

    background:transparent;

    border:1px solid white;

}





/* SECTIONS */


section {

    padding:100px 8%;

}



.section-title {

    text-align:center;

    font-size:42px;

    letter-spacing:3px;

    margin-bottom:50px;

}





/* SERVICES */


.service-container {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.card {


    background:

    linear-gradient(
    145deg,
    #151515,
    #070707
    );


    padding:40px;


    border-radius:25px;


    border:1px solid #333;


    transition:.4s;


}



.card:hover {


    transform:translateY(-12px);


    border-color:#9d4edd;


    box-shadow:
    0 0 35px rgba(157,78,221,.35);


}



.card h3 {

    font-size:30px;

    margin-bottom:20px;

}



.price {

    color:#b983ff;

    font-size:23px;

    margin-bottom:20px;

}



.card li {

    list-style:none;

    color:#ccc;

    padding:8px 0;

}






/* ABOUT */


.about {

    text-align:center;

    background:#080808;

}



.about p {

    max-width:850px;

    margin:auto;

    color:#ccc;

    font-size:20px;

    line-height:1.8;

}







/* GALLERY */


.gallery {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}



.photo {


    height:260px;


    border-radius:25px;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
    135deg,
    #222,
    #050505
    );


    border:1px solid #333;


    color:#aaa;


    font-size:22px;


}





/* BOOKING */


form {

    max-width:600px;

    margin:auto;

    display:grid;

    gap:18px;

}



input,
select,
button {


    padding:17px;

    border-radius:12px;

    font-size:16px;

}



input,
select {

    background:#111;

    color:white;

    border:1px solid #333;

}



button {

    background:#9d4edd;

    color:white;

    border:none;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



button:hover {

    box-shadow:
    0 0 25px #9d4edd;

}







/* CONTACT */


#contact {

    text-align:center;

}



#contact p {

    color:#ccc;

    line-height:1.8;

}



footer {

    background:#000;

    padding:30px;

    text-align:center;

    color:#777;

}





/* MOBILE */


@media(max-width:700px){


nav {

    flex-direction:column;

    gap:20px;

}



.nav-links a {

    margin:8px;

}



.hero h2 {

    font-size:45px;

}



}
.photo {
    overflow: hidden;
    position: relative;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 25px;
}