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

body {
    background-color: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
}

/* Header and Navigation Styles */
.header {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 30px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Crect width='400' height='200' fill='%23000000' fill-opacity='0.3'/%3E%3Ccircle cx='100' cy='100' r='50' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='300' cy='50' r='40' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='200' cy='150' r='60' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

.nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.menu-icon {
    color: #d4af37; /* Gold color */
    font-size: 24px;
    cursor: pointer;
}

.nav-links {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 1;
}

.nav-links a.active {
    opacity: 1;
}

.book-btn {
    border: 1px solid #d4af37;
    padding: 8px 18px;
    color: #d4af37;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.book-btn:hover {
    background-color: #d4af37;
    color: #000000;
}

/* Banner Section Styles */
.banner {
    text-align: center;
    padding: 60px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Crect width='400' height='200' fill='%23000000' fill-opacity='0.7'/%3E%3Ccircle cx='100' cy='100' r='50' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='300' cy='50' r='40' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='200' cy='150' r='60' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

.banner h1 {
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Services Grid Styles */
.services-container {
    background-color: #121212;
    padding: 20px;
}

.services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    border: 1px solid #d4af37;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    min-height: 200px;
    transition: transform 0.3s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Crect width='200' height='200' fill='%23000000' fill-opacity='0.5'/%3E%3Ccircle cx='100' cy='100' r='50' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    margin-bottom: 15px;
    color: #d4af37;
    height: 40px;
}

.service-title {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Icons */
.scissors-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M8,3C6.3,3,5,4.3,5,6c0,1.7,1.3,3,3,3c0.8,0,1.5-0.4,2-0.9L14,12l-4,3.9C9.5,15.4,8.8,15,8,15c-1.7,0-3,1.3-3,3 s1.3,3,3,3s3-1.3,3-3c0-0.8-0.4-1.5-0.9-2L14,12l4,3.9c-0.5,0.5-0.9,1.2-0.9,2c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3 c-0.8,0-1.5,0.4-2,0.9L14,12l4-3.9c0.5,0.5,1.2,0.9,2,0.9c1.7,0,3-1.3,3-3s-1.3-3-3-3s-3,1.3-3,3c0,0.8,0.4,1.5,0.9,2L14,12 l-4-3.9C10.5,7.6,11,6.8,11,6C11,4.3,9.7,3,8,3z'/%3E%3C/svg%3E");
}

.razor-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M21,3c0,0-2,0-3,0c-1,0-1.6,0.5-2,1L5,15c-0.4,0.4-0.6,1-0.6,1.6C4.4,17.1,5,18,6,18c0.5,0,1-0.2,1.4-0.6l11-11 c0.5-0.4,1-1,1-2C19.4,3.4,21,3,21,3z M6.5,16.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5S6.8,16.5,6.5,16.5z'/%3E%3C/svg%3E");
}

.beard-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M12,2c-2.2,0-4,1.8-4,4v4c0,1.1-0.9,2-2,2H4v2h2c1.1,0,2,0.9,2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4 c0-1.1,0.9-2,2-2h2v-2h-2c-1.1,0-2-0.9-2-2V6C16,3.8,14.2,2,12,2z'/%3E%3C/svg%3E");
}

.face-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,8c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2 S10.9,8,12,8z M18,14c0,1.1-0.9,2-2,2H8c-1.1,0-2-0.9-2-2v-0.5C6,12.1,7.1,11,8.5,11h7c1.4,0,2.5,1.1,2.5,2.5V14z'/%3E%3C/svg%3E");
}

.mustache-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M12,14c2.5,0,4.5-1.5,5.5-2.5c1,1,2,1.5,3.5,1.5c0,0,1,0,1-1s-1-3-3-3c-1.5,0-2.5,0.5-3,1c-1-1-2.5-2-4-2 s-3,1-4,2c-0.5-0.5-1.5-1-3-1C3,9,2,11,2,12s1,1,1,1c1.5,0,2.5-0.5,3.5-1.5C7.5,12.5,9.5,14,12,14z'/%3E%3C/svg%3E");
}

.hair-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d4af37' d='M12,2C9.8,2,8,3.8,8,6v3H7c-1.1,0-2,0.9-2,2v7c0,2.2,1.8,4,4,4h6c2.2,0,4-1.8,4-4v-7c0-1.1-0.9-2-2-2h-1V6 C16,3.8,14.2,2,12,2z M12,4c1.1,0,2,0.9,2,2v3h-4V6C10,4.9,10.9,4,12,4z'/%3E%3C/svg%3E");
}

/* Responsive styles */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-links {
        display: none;
    }

    .nav-links a:hover,.nav-links a:focus{
        color:#d4af37;
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Icon for hamburger menu */
.hamburger {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #d4af37;
}


        /* Container styles */
        .container {
           
            padding: 0 15px;
            background-color: #222222;
            color: #ffffff;
            line-height: 1.6;
        }

        /* Price list section */
        .price-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 30px;
            padding: 30px 15px;
            max-width: 800px;
            margin: 0 auto;
        }

        .price-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .price-name {
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            flex-grow: 1;
        }

        .price-line {
            flex-grow: 2;
            height: 1px;
            background-color: #e9c46a; /* Gold color */
            margin: 0 10px;
        }

        .price-amount {
            font-size: 16px;
            font-weight: normal;
        }

        /* Promotion section */
        .promotion-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            margin-top: 10px;
            max-width: 1000px;
            margin: 30px auto 0;
        }

        .promotion-content {
            background-color: #e9c46a; /* Gold background */
            color: #000000;
            padding: 60px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .promotion-image {
            background-color: #333333;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Crect width='400' height='400' fill='%23333' /%3E%3Ccircle cx='200' cy='200' r='150' fill='%23555' fill-opacity='0.5'/%3E%3Ccircle cx='200' cy='200' r='100' fill='%23777' fill-opacity='0.3'/%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
        }

        .promotion-label {
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .promotion-title {
            font-size: 32px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .promotion-description {
            font-size: 14px;
            margin-bottom: 25px;
        }

        .cta-button {
            background-color: #000000;
            color: #ffffff;
            border: none;
            padding: 12px 24px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            display: inline-block;
            width: fit-content;
            text-decoration: none;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .price-list {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .promotion-container {
                grid-template-columns: 1fr;
            }

            .promotion-content {
                padding: 40px 20px;
            }

            .promotion-image {
                height: 300px;
            }
        }