* {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 200;
    font-style: normal;
}
header {
    background: linear-gradient(180deg, gray, rgb(50,50,50), gray);
    width: 100%;
    height: 450px;
    border: 10px solid rgb(50,50,50);
}
.get-quote {
    display: flex;
    background-color: black;
    width: 100%;
    height: 25px;
    justify-content: center;
    align-items: center;

}

.get-quote a {
    color: white;
    text-decoration: none;
    
}
.get-quote a:hover {
    color: red;
}
nav {
    display: flex;
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: gray;
    border-bottom: 10px solid rgb(50,50,50);
    border-left: 10px solid rgb(50,50,50);
    border-right: 10px solid rgb(50,50,50);
}

/* Glowing MENU button */
#menu-button {
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: rgb(50,50,50);
  text-shadow: 0 0 10px white, 0 0 20px white;
  animation: glow 1.5s infinite alternate;
  user-select: none;
  text-align: center;
}

@keyframes glow {
  from { text-shadow: 0 0 5px white; }
  to   { text-shadow: 0 0 20px white; }
}

#menu-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;               /* stays flex, but invisible */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);

  opacity: 0;                  /* invisible */
  pointer-events: none;        /* can't click it when hidden */
  transition: opacity 0.5s ease;
}

/* When active, fade in */
#menu-popup.active {
  opacity: 1;
  pointer-events: auto;
}

/* Popup box */
.popup-content {
  background: #222;
  padding: 50px;
  border-radius: 10px;
  color: white;
  text-align: center;
  box-shadow: 0 0 20px black;
}





.popup-links {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;

  display: flex;
  flex-direction: column;   /* makes it vertical */
text-align: center;
  align-items: center;      /* centers each link */
  gap: 17px;                /* clean spacing between items */
}

.popup-links a {
  color: white;

  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s ease;
}
.popup-links li {
  width: 100%;
  display: flex;
  justify-content: center;  /* centers the link inside each li */
}

.popup-links a:hover {
  color: gray;
}
.services {
    text-align: center;}

    .services h3 {
        margin: 10px;
}
.introduction, .passion, .services{
    display: block;
    height: auto;
    width: 100%;
    background: linear-gradient(90deg, gray, rgb(50,50,50), gray);
    border: 10px solid rgb(50,50,50);
}
hr {
margin: 30px;
}
 h2 {
    margin: 15px 0;
}
.introduction h2, .services h2 {
color: white;
align-self: center;
text-align: center;

}
.introduction h3, .passion h3, .services h3 {
    color: white;
    align-self: center;
    text-align: center;
    margin: 15px;
}
.introduction p, .passion p, .services p {
    color: white;
    align-self: center;
    text-align: center;
    margin: 10px;
}
 p {
    margin: 15px;
}
.call {
    display: flex;
    background-color: black;
    width: 100%;
    height: 25px;
    justify-content: center;
    align-items: center;

}

.call a {
    color: white;
    text-decoration: none;
    
}

.passion img {
    display: block;
    width: 300px;
    height: 398px;
    border: 10px solid rgb(50,50,50);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.services img {
    display: block;
    width: 300px;
    height: 225;
    border: 10px solid rgb(50,50,50);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.services a {
    display: block;
    width: fit-content;   /* prevents full-width background */
    margin: 0 auto 20px auto; /* centers + bottom margin */
    padding: 5px;
    text-decoration: none;
    color: white;
    background-color: brown;
    border-radius: 5px;
    font-size: 40px;
}
.services a:hover {
    background-color: red;
}


.logo img {
    display: block;
    width: 320px;
    height: 320px;
    border: 10px solid rgb(50,50,50);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.logo {
    display: flex;
    width: 100%;
    height: 520px;
    justify-content: center;
    margin-top: 20px;

}
footer {
    display: block;
    text-align: center;
    background: linear-gradient(180deg, gray, rgb(50,50,50), gray);
    width: 100%;
    border: 10px solid rgb(50,50,50);
    color: white;
}
/* services page */

.remodel, .new-construction, .insurance, .texture, .repairs {
    display: block;
    text-align: center;
    background: linear-gradient(90deg, gray, rgb(50,50,50), gray);
    border: 10px solid rgb(50,50,50);
    color: white;
}
.services {
      display: block;
    text-align: center;
    background: linear-gradient(180deg, gray, rgb(50,50,50), gray);
    border: 10px solid rgb(50,50,50);
    color: white;
}
.remodel img {
    height:194px;
    width: 300px;
    display: block;
    margin: 15px auto;
    border: 10px solid rgb(50,50,50);
}
.new-construction img {
    height: 400px;
    width: 300px;
    display: block;
    margin: 15px auto;
    border: 10px solid rgb(50,50,50);
}
.texture img {
    display: block;
    height:224px;
    width: 300px;
    margin: 15px auto;
    border: 10px solid rgb(50,50,50);
}
.repairs img {
    display: block;
    height: 194px;
    width: 300px;
    margin: 15px auto;
    border: 10px solid rgb(50,50,50);
}
footer a{
    display: block;
    text-decoration: none;
    color: white;
}
.contact-info {
       display: block;
    text-align: center;
    background: linear-gradient(90deg, gray, rgb(50,50,50), gray);
    border: 10px solid rgb(50,50,50);
    color: white;
}
.contact {
      display: block;
    text-align: center;
    background: linear-gradient(180deg, gray, rgb(50,50,50), gray);
    border: 10px solid rgb(50,50,50);
    color: white;
}
.phone, .email {
    font-size: 30px;
    display: block;
    color: white;
    text-decoration: none;
    background-color: brown;
    padding: 10px;
    border-radius: 5px;
    width: fit-content;   /* prevents full-width background */
    margin: 0 auto 20px auto; /* centers + bottom margin */


}
.phone:hover, .email:hover {
    background-color: red;
}