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

body{
font-family:Arial, Helvetica, sans-serif;
background:#ffffff18;
}
/* .hero {
  position: relative;
  height: 450px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 1;
} */

/* HERO (so nav sits on top nicely) */
.hero{
position: relative;
background: url("images/tailor\ shop\ men\ suite\ blue.png") center/cover no-repeat;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}


.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(166, 166, 166, 0);
}

.hero-content{
position: relative;
z-index: 2;
max-width:850px;
padding:20px;
}

.hero h2{
font-size:36px;
margin-bottom:10px;
color: #111;
}

.hero p{
font-size:25px;
color: #f3f3f3;
}

.section{
    padding:80px 10%;
    background:#f7f7f7;
}

.services{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
    gap:30px;
}

.card{
    display:block;
    text-decoration:none;
    color:#333;
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    transition:all 0.3s ease;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
    transition:transform 0.3s ease;
}

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

.card h3{
    font-size:1.2rem;
    margin-bottom:8px;
}

.section h2{
    text-align:center;
    font-size:2rem;
    margin-bottom:50px;
    color:#222;
}

.card p{
    font-size:0.95rem;
    color:#666;
    line-height:1.5;
}

.about{
background:#00a2b476;
}
.about p{
    font-size: 1.3rem;
}

/* CTA */

.cta{
text-align:center;
margin-top: 2rem;
padding:80px 20px;
background:#181818f6;
color:white;
}

.cta h2{
font-family:'Playfair Display', serif;
font-size:2rem;
margin-bottom:15px;
}

.cta p{
margin-bottom:25px;
}

.btn{
display:inline-block;
padding:12px 30px;
background:#c7a26a;
color:white;
text-decoration:none;
border-radius:4px;
transition:0.3s;
}

.btn:hover{
background:#a8834e;
}

/* MOBILE MENU */

@media (max-width:750px){
    body{
    background:#ffffff;
    }

    .hero::before{
    background:rgba(0,0,0,0.45);
    }

    .hero h2,
    .hero p{
    color:#fff;
    }

    /* .hero{
        height: 300px;
        padding: 20px;
    }

    .hero h2{
        font-size:24px;
    }

    .hero p{
        font-size:18px;
    } */

    .section{
        padding:50px 20px;
    }

    .card img{
        height:150px;
    }

    .services{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:30px;
    }

}