/* RESET */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  background: url(Screenshot\ 2026-04-05\ 184301.png);
  color:rgb(66, 3, 3);
  font-style: italic;
}
nav a.active {
  border-bottom: 2px solid #ff4d6d;
  padding-bottom: 3px;
}

.logo {
  margin: 0;
  font-size: 20px;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: rgb(31, 2, 2);
}

/* HERO */
.hero {
  text-align: center;
  padding: 120px 20px;
  background:url(Gemini_Generated_Image_utns9putns9putns.png);
}

.hero h2 {
  font-size: 38px;
  margin-bottom: 10px;
  color: rgb(255, 255, 255);
  
}

.hero p {
  font-size: 18px;
  color: #fff0f3;
 
}

.hero button {
  margin-top: 15px;
  padding: 10px 25px;
  background: #ff4d6d;
  color: white;
  border: none;
  cursor: pointer;
}

/* SERVICES */
.services {
  padding: 60px 20px;
  font-style: italic;
  text-align: center;
  background: url(servic.png);
  color: rgb(255, 255, 255);
  
}


/* General card styling */
.card {
  margin: 10px;
  padding: 35px;
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  transition: 0.3s;
  
  /* These properties fix the image scaling */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Text styling for better visibility on images */
  color: rgb(255, 255, 255); 
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
  vertical-align: top;
}

/* Individual backgrounds */
.card-hair { background-image: url('color.jpg'); }
.card-skin { background-image: url('face.jpg'); }
.card-makeup { background-image: url('normalmp.jpg'); }
.card-bridal { background-image: url('makeup.jpg'); }
.card-nails { background-image: url('pedi\ and\ mani.jpg'); }
.card-piercing { background-image: url('pr.jpg'); }
.card-academy { background-image: url('traning.jpg'); }

/* About */
.about {
  background: 
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url("Gemini_Generated_Image_vpaiirvpaiirvpai.png");

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

  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 40px 20px;
  color: white;
}
.map {
  position: relative;
  max-width: 900px;
  margin: 30px auto;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

/* map  */
.map-image {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.map-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.social-links {
  margin-top: 20px;
}

.social-links a {
  display: inline-block;
  margin: 8px;
  padding: 8px 15px;
  background: #e22d39;
  color: white;
  text-decoration: none;
  border-radius: 20px;
  font-size: 14px;
  transition: 0.3s;
}

.social-links a:hover {
  background: #ff4d6d;
}

/* Address Box */
.address-box {
  margin-top: 25px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-left: 4px solid #e22d39;
  border-radius: 8px;
}  

.address-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #ffdede;
}

.address-box p {
  font-size: 14px;
  line-height: 1.5;
}

/* Hover effect */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}


/* GALLERY */
.gallery {
  padding: 60px 20px;
  text-align: center;
  background-color: #f9f9f9; /* Light background to separate sections */
}

.gallery h2 {
  margin-bottom: 30px;
  font-size: 2.5rem;
  font-style: normal; /* Headings usually look better non-italic */
}

.gallery-grid {
  display: grid;
  /* This creates the responsive columns automatically */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px; /* Space between images */
  max-width: 1200px; /* Keeps the gallery from getting too wide on huge screens */
  margin: 0 auto; /* Centers the gallery container */
}

.gallery img {
  width: 100%; /* Makes image fill the grid cell */
  height: 250px; /* Fixed height for uniformity */
  object-fit: cover; /* IMPORTANT: Crops image to fit height without stretching */
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover Effect for a professional feel */
.gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
/* CONTACT */
.contact {
  padding: 60px 20px;
  background: #fff0f3;
  text-align: center;
}

.contact button {
  padding: 10px 25px;
  background: #08e201;
  color: white;
  border: none;
  cursor: pointer;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 15px;
  background: #2c0101;
  color: white;
}