* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h2 {
  text-align: center;
  font-size: 1.2em;
}
p {
  overflow: hidden;
}
#socialBox {
  position: fixed;
  z-index: 5;
  top: 105px;
  left: 20px;
  width: 50px;
  padding-top: 5px;
  text-align: center;
}
#socialBox > img {
  width: 24px;
}
.logo {
  position: fixed;
  width: 100px;
  left: 1px;
  z-index: 6;
  top: 10px;
}
#hamburger {
  position: fixed;
  width: 80px;
  height: 60px;
  top: 25px;
  right: 20px;
  z-index: 13;
}
.bar {
  width: 80px;
  height: 10px;
  background-color: rgba(243, 2, 190, 0.76);
  margin: 2px 0px;
  border-radius: 8px;
  cursor: pointer;
}
nav {
  position: fixed;
  z-index: 12;
  width: 120px;
  height: 100dvh;
  top: 0px;
  right: -120px;
  text-align: right;
  transition: all 0.25s ease;
  background-color: rgba(240, 211, 224, 0.357);
  padding-top: 100px;
  padding-left: 10px;
}
nav > a {
  display: block;
  text-decoration: none;
  color: #333;
  margin: 5px 0;
  font-size: 1.3em;
  padding-right: 22px;
  padding-top: 5px;
  transition: all 0.3s ease;
  position: relative;
  font-family: "Quantico", serif;
  text-align: right;
}
.navbar {
  font-weight: 50;
  font-style: normal;
  font-size: 1em;
}
nav > a:hover {
  color: #f702c6;
  transform: scale(1);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 1px #fff;
}
h1 {
  text-align: center;
  font-family: "Quantico", serif;
}
body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.5;
  height: 100%;
}
#lightbox {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #000000be;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 20;
  text-align: center;
  visibility: hidden;
  display: flex; /* added */
  justify-content: center; /* added */
  align-items: center; /* added */
  padding-top: 0; /* remove old padding */
}

/* these 2 lightbox codes work well, it may show 100% size of original image but mobile
 responsive all the way down */

#lightboxImage {
  max-width: 90vw; /* added */
  max-height: 90vh; /* added */
  width: auto; /* added */
  height: auto; /* added */
  border-radius: 8px;
  border: 1px solid #fff;
  object-fit: contain; /* changed from cover → contain */
}
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas:
    "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
    "wel wel wel wel wel wel wel wel wel wel wel wel"
    "hom hom hom hom hom hom hom hom hom hom hom hom"
    "hob hob hob hob hob hob hob hob hob hob hob hob"
    "abt abt abt abt abt abt abt abt abt abt abt abt"
    "teh teh teh teh teh teh teh teh teh teh teh teh"
    "tem tem tem tem tem tem tem tem tem tem tem tem"
    "con con con con con con con con con con con con"
    "ser ser ser ser ser ser ser ser ser ser ser ser";
}
header {
  display: grid;
  grid-area: hdr;
  width: 100%;
  background-image: url("../assets/images/header.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 777px;
  border-bottom: 1px solid #f702c6;
}
#welcomeBox {
  display: grid;
  grid-area: wel;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #f702c6;
  font-size: 1.8em;
  padding: 40px 0;
}
#home {
  display: grid;
  grid-area: hom;
  width: 100%;
  background: #fff;
  padding: 20px 20px;
  text-align: center;
  font-size: 1.1em;
  justify-content: center;
  margin: 0 auto;
  min-height: 100dvh;
  max-width: 1200px;
}
#home > h1 {
  width: 100%;
  background: linear-gradient(to right, #fff, #eee, #fff);
  font-size: 3em;
  padding-bottom: 20px;
}
.welcomeImg {
  width: 49%;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #000;
  object-fit: cover;
  max-width: 100%;
}
#home > p {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  border-radius: 8px;
  background: #acaaaa20;
  box-shadow: 0.5px 0.5px 2px #666;
  padding: 25px 10px;
}
#homeBot {
  width: 100%;
  display: grid;
  grid-area: hob;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
  border-bottom: 1px solid #f702c6;
}
.homeBot-img {
  text-align: center;
  width: 350px;
  height: 350px;
  object-fit: cover;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #000;
  cursor: pointer;
}
.homeBotheading {
  margin-bottom: 20px;
  grid-column: 1 / -1; /* makes the heading stretch across all columns */
}
.homeBotpara {
  margin-bottom: 20px;
  grid-column: 1 / -1;
  font-size: 1.2em;
  border-radius: 8px;
  background: #acaaaa20;
  box-shadow: 0.5px 0.5px 2px #666;
  padding: 25px 10px;
  height: auto;
}
#about {
  display: grid;
  grid-area: abt;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  justify-content: center;
  min-height: 100dvh;
  margin: 0 auto;
  font-size: 1.1em;
  background: #fff;
  text-align: center;
  padding: 40px 60px;
  border-bottom: 1px solid #f702c6;
  row-gap: 55px;
}
.aboutHeading {
  margin-bottom: 20px;
  grid-column: 1 / -1; /* makes the heading stretch across all columns */
}
.aboutImg {
  text-align: center;
  width: 350px;
  height: 350px;
  object-fit: cover;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #000;
  cursor: pointer;
}
.aboutText {
  border-radius: 8px;
  background: #acaaaa20;
  box-shadow: 0.5px 0.5px 2px #666;
  padding: 10px 10px;
}
#tempHeading {
  display: grid;
  grid-area: teh;
  grid-template-columns: repeat(1, 1fr);
  font-size: 1.2em;
  color: #333;
  text-align: left;
  width: 100%;
  padding: 25px 125px;
  margin: 0 auto;
  max-width: 1200px;
}
#tempHeading > p {
  padding: 10px 10px;
  border-radius: 8px;
  background: #acaaaa20;
  box-shadow: 0.5px 0.5px 2px #666;
}
.tempHead {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}
#templates {
  width: 100%;
  display: grid;
  grid-area: tem;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin: 0 auto;
  padding: 40px 60px;
  max-width: 1200px;
  text-align: center;
  border-bottom: 1px solid #f702c6;
}
.tempImg {
  width: 290px;
  height: 290px;
  border-radius: 8px;
  box-shadow: 1px 1px 3px #000;
  object-fit: cover;
  max-width: 100%;
  cursor: pointer;
}
#contact {
  display: grid;
  grid-area: con;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 1200px;
  padding: 40px 10px;
  background: #fff;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 25px;
  border-bottom: 1px solid #f702c6;
}
#contact > p {
  padding: 15px 15px;
  border-radius: 8px;
  background: #acaaaa20;
  box-shadow: 0.5px 0.5px 2px #666;
}
.contact-form {
  width: 100%;
  max-width: 680px;
  margin: 25px auto;
  padding: 55px 25px;
  border-radius: 8px;
  box-shadow: 0.5px 0.5px 2px #666;
  background: #acaaaa20;
}
.contactImg {
  width: 100%;
  height: auto;
  padding: 0.5px 0.5px;
  object-fit: cover;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 1px 1px 2px #000;
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 0.95rem;
}
input,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: none;
  border-radius: 6px;
  background-color: #444;
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
}
input:focus,
textarea:focus {
  outline: 2px solid #ff3366;
}
textarea {
  resize: none;
  height: 120px;
}
button {
  background-color: #ff3366;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
}
button:hover {
  background-color: #ff5588;
}
.success {
  text-align: center;
  color: #8aff8a;
  margin-top: 10px;
  font-size: 0.95rem;
}

#services {
  width: 100%;
  max-width: 1200px;
  padding: 10px 10px;
  background: #fff;
  height: 1000px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 25px;
  border-bottom: 1px solid #f702c6;
  height: 100vh;
}
.serviceLeft {
  float: left;
  width: 50%;
  background: #ddd;
  padding: 50px;
  min-height: 600px;
  border-radius: 8px;
  box-shadow: 0.5px 0.5px 2px #666;
}
.button {
  display: block;
  font-size: 1.1em;
  font-weight: 700;
  background: #bb8;
  margin: 9px auto;
  padding: 3px 13px;
  width: 80%;
  border-radius: 8px;
  box-shadow: 2px 3px 4px #333;
  cursor: pointer;
}
.disabled {
  display: block;
  font-size: 1.3em;
  font-weight: 700;
  background: rgb(109, 109, 79);
  margin: 9px auto;
  padding: 3px 13px;
  width: 80%;
  border-radius: 8px;
  text-decoration: line-through;
}
.reset {
  display: block;
  font-size: 1.3em;
  font-weight: 700;
  background: #f00;
  color: #eee;
  margin: 9px auto;
  padding: 3px 13px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 2px 3px 4px #333;
  cursor: pointer;
}
.serviceRight {
  float: right;
  width: 50%;
  padding: 50px;
  min-height: 600px;
  border-radius: 8px;
  box-shadow: 0.5px 0.5px 2px #666;
  background: #acaaaa20;
}

/* =============> CHAT WITH AI <============== */
#chatWidget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  font-family: Arial, sans-serif;
}
#chatToggle {
  background-color: #ff3366;
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 1px 1px 5px #333;
}
#chatBox {
  width: 300px;
  height: 400px;
  background: #fff;
  border: 2px solid #ff3366;
  border-radius: 8px;
  box-shadow: 2px 2px 8px #666;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
#chatMessages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  font-size: 0.9em;
}

#chatMessages p {
  margin: 5px 0;
}

#chatInput {
  width: 100%;
  padding: 6px;
  margin-bottom: 5px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

#sendChat {
  width: 100%;
  background-color: #ff3366;
  color: #fff;
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.thankyouDiv {
  background-color: #333;
  color: #bb8;
  margin: 100px auto;
  width: 80%;
  font-size: 1.5rem;
}