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

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



nav ul{
display:flex;
gap:30px;
list-style:none;
}

.hero{
    height:90vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/images/waverbarber.jpg");

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

.hero h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 72px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}
.hero p{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 4px;
    font-size: 20px;
    color: #d9d9d9;
}

button{
padding:15px 40px;
border:none;
border-radius:30px;
font-size:20px;
cursor:pointer;
background:#D4AF37;
color:white;
}




.barber-img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
}
#googleLogin{
    width:100%;
    padding:12px;
    background:#fff;
    color:#000;
    border:1px solid #ddd;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
    margin-bottom:10px;
}

#googleLogin:hover{
    background:#f5f5f5;
}
.nav-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.profile-icon{

    width:45px;
    height:45px;

    border-radius:50%;

    background:white;

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:22px;

    font-weight:bold;

    transition:.3s;

}

.profile-icon:hover{

    transform:scale(1.08);

}
.profile-panel{

    position:fixed;

    top:0;

    right:-320px;

    width:300px;

    height:100vh;

    background:#111;

    border-left:1px solid #333;

    transition:.35s;

    z-index:99999;

    padding:25px;

    box-sizing:border-box;

}

.profile-panel.active{

    right:0;

}

.profile-header{

    text-align:center;

}

.profile-avatar{

    width:80px;

    height:80px;

    border-radius:50%;

    background:white;

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:35px;

    margin:auto;

    margin-bottom:15px;

}

.profile-panel a{

    display:block;

    color:white;

    text-decoration:none;

    padding:14px 0;

    border-bottom:1px solid #222;

    font-size:16px;

}

.profile-panel a:hover{

    color:#ddd;

}
.profile-avatar-img{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    margin:auto;

    margin-bottom:15px;

}
.close-profile{

    position:absolute;
    top:15px;
    left:15px;

    width:35px;
    height:35px;

    border-radius:50%;
    border:none;

    background:white;
    color:black;

    font-size:22px;
    cursor:pointer;

}


.close-profile:hover{

    transform:scale(1.1);

}
.ad-video {
    width: 55%;
    max-width: 650px;
}

.ad-video video {
    height: 220px;
}
nav {
    width: 100%;
    height: 250px;
    background: #000;

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

    padding: 0 55px;
    box-sizing: border-box;

    border-bottom: 1px solid #222;

    position: relative;
}

/* LEFT LOGO */

.nav-left {
    width: 180px;
    display: flex;
    align-items: center;
}

.logo {
    width: 160px;
    height: auto;
}


/* CENTER VIDEO */

.nav-ad {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 52%;
    max-width: 800px;
    height: 210px;

    overflow: hidden;
    background: #080808;
}

.nav-ad video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* RIGHT MENU */

.nav-menu {
    width: 180px;

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

    gap: 32px;

    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li,
.nav-menu a {
    color: white;
    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 17px;

    cursor: pointer;
}

.nav-menu a:hover,
.nav-menu li:hover {
    color: #c9a84c;
}

/* =========================================
   WAVER PREMIUM FOOTER
========================================= */

.waver-footer {
    background: #080707;
    color: #f0ead6;
    border-top: 1px solid rgba(201, 168, 76, 0.18);
    margin-top: 80px;
}


/* MAIN FOOTER */

.footer-container {
    width: 90%;
    max-width: 1250px;
    margin: auto;

    padding: 70px 0 55px;

    display: grid;
    grid-template-columns:
        1.4fr
        1fr
        1.2fr
        1.1fr;

    gap: 60px;
}


/* BRAND */

.footer-brand img {
    width: 105px;
    height: auto;
    margin-bottom: 15px;
}

.footer-brand h2 {
    margin: 0 0 15px;

    font-size: 25px;
    letter-spacing: 5px;

    color: #c9a84c;
}

.footer-brand p {
    max-width: 280px;

    color: #8a7f6e;
    line-height: 1.8;
    font-size: 14px;
}


/* COLUMNS */

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-column h3 {
    margin: 0 0 15px;

    font-size: 17px;
    color: #f5e27e;

    letter-spacing: 1px;
}

.footer-column a {
    color: #aaa;
    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;
}

.footer-column a:hover {
    color: #c9a84c;
    transform: translateX(4px);
}

.footer-column p {
    margin: 0;

    color: #aaa;
    font-size: 14px;
    line-height: 1.6;
}


/* GOLD LINE */

.footer-bottom {
    width: 90%;
    max-width: 1250px;

    margin: auto;

    padding: 25px 0;

    border-top: 1px solid rgba(201, 168, 76, 0.15);

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

.footer-bottom p {
    margin: 0;

    color: #6f685c;
    font-size: 13px;
}

.footer-bottom-links {
    display: flex;
    gap: 25px;
}

.footer-bottom-links a {
    color: #8a7f6e;
    text-decoration: none;

    font-size: 13px;

    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: #c9a84c;
}

/* =========================================
   BARBER PROFILE ICON
========================================= */

.barber-profile-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:white;
    color:black;

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

    font-size:21px;
    cursor:pointer;

    transition:0.3s;

    margin-left:auto;
}

.barber-profile-icon:hover{
    transform:scale(1.08);
}


/* =========================================
   BARBER PROFILE SIDEBAR
========================================= */

.barber-profile-panel{
    position:fixed;

    top:0;
    right:-330px;

    width:320px;
    height:100vh;

    background:#111;

    border-left:1px solid #333;

    padding:30px 25px;

    z-index:99999;

    transition:0.35s ease;

    box-shadow:-10px 0 30px rgba(0,0,0,0.5);
}


/* OPEN */

.barber-profile-panel.active{
    right:0;
}


/* PROFILE HEADER */

.barber-profile-header{
    text-align:center;
    margin-top:30px;
}


/* AVATAR */

.barber-avatar{
    width:80px;
    height:80px;

    margin:0 auto 15px;

    border-radius:50%;

    background:white;
    color:black;

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

    font-size:35px;
}


/* NAME */

.barber-profile-header h2{
    margin:10px 0;
}

.barber-profile-header p{
    color:#999;
}


/* CLOSE BUTTON */

.barber-close-btn{
    position:absolute;

    top:20px;
    left:20px;

    width:35px;
    height:35px;

    border:none;
    border-radius:50%;

    background:white;
    color:black;

    padding:0;

    font-size:22px;

    cursor:pointer;
}


/* SIDEBAR LINKS */

.barber-profile-panel a{
    display:block;

    padding:16px 5px;

    border-bottom:1px solid #252525;

    color:white;

    text-decoration:none;

    font-size:15px;

    transition:0.25s;
}


.barber-profile-panel a:hover{
    color:#c9a84c;
    padding-left:10px;
}