* 
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html
{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body 
{
  background: linear-gradient(to right, #02001b, #1c1c1c);
  overflow-x: hidden;
  color: #fff;
  width: 100dvw;
  padding: 0;
  margin: 0;
}

header 
{
  top: 0;
  left: 0;
  margin: 0;
  padding: 5px;
  height: 70px;
  z-index: 500;
  width: 100dvw;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
}
header nav
{
  width: 80%;
  height: 90%;
  display: flex;
  padding: 0px 10px;
  border-radius: 50px;
  align-items: center;
  backdrop-filter: blur(5px);
  justify-content: space-around;
  background-color: #aaaaaa0e;
}

header h1 
{
  font-size: 2.5dvw;
  font-weight: 700;
  color: #e0b973;
}

nav a 
{
  width: 20%;
  font-size: 2dvw;
  font-weight: bold;
  color: white;
  text-decoration: none;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav a:hover 
{
  color: #e0b973;
}
.bg
{
  position: fixed;
  height: 100dvh;
  z-index: -500;
  width: 100dvw;
}
.bg img
{
  height: 100%;
  width: stretch;
}
section
{
  scroll-snap-align: start;
  overflow-y: scroll;
  padding-top: 60px;
  height: 100dvh;
  width: 100dvw;
}
section h3 
{
  color: #e0b973;
  text-align: center;
  font-size: max(2.5dvw, 2rem);
  padding: 0;
  margin: 0;
}
.hero 
{
  z-index: -100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(products/ChatGPT\ Image\ Jul\ 22\,\ 2025\,\ 12_31_24\ PM.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-text
{
  bottom: 0%;
  z-index: 10;
  height: 100%;
  display: flex;
  width: 100dvw;
  padding-bottom: 2%;
  position: absolute;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.hero-text h2 
{
  color: #fff;
  display: flex;
  font-size: 5dvw;
  font-weight: 700;
  line-height: 1.2;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.hero-text p 
{
  padding: 3px;
  color: #ccc;
  font-size: 3dvw;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(5px);
  background-color: #02001ba5;
}

.hero-text button 
{
  border: none;
  cursor: pointer;
  color: #0f0f0f;
  margin-top: 2rem;
  font-weight: 600;
  width: fit-content;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  background-color: #e0b973;
  transition: 0.3s;
}

.hero-text button:hover 
{
  background-color: #f3c991;
}

.hero-image
{
  height: 90%;
  width: 90dvw;
  z-index: 0;
  bottom: 10px;
  display: flex;
  overflow: hidden;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
}
.hero-image img 
{
  width: auto;
  height: 100%;
  border-radius: 1rem;
}

.about
{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(4, 0, 47, 0.5);
}
.about p
{
  width: 90%;
  padding: 2rem;
  display: flex;
  height: fit-content;
  align-items: center;
  font-size: min-max(1.2rem, 2vw);
}

.services 
{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
.service-grid 
{
  gap: 2%;
  width: 97%;
  padding: 2%;
  display: grid;
  text-align: center;
  overflow-y: scroll;
  height: fit-content;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.services h3
{
  width: 90%;
  text-align: center;
}
.service 
{
  padding: 2rem;
  height: 50dvh;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  flex-direction: column;
  justify-content: center;
  background: #1f1f1fdf;
  transition: transform 0.3s;
}

.service:hover
{
  justify-content: space-evenly;
  transform: translateY(-1px);
  background-image: none;
  transition: 0.5s;
  
  span
  {
    width: 50%;
    opacity: 1;
    border: none;
    transition: 1s;
    border-bottom: solid #e0b973 5px;
  }
  p
  {
    transition: 0.5s;
    display: contents;
  }
}

.service h4
{
  color: #fff;
}

.service p 
{
  margin-top: 0.5rem;
  color: #aaa;
  display: none;
}

.products
{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: rgba(5, 0, 37, 0.5);
}
.products h2, .testimonials h2 
{
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2.5rem;
  color: #e0b973;
  width: 100dvw;
}
.products h3 
{
  position: inherit;
  color: #e0b973;
  font-size: 2rem;
  z-index: 1000;
  top: 60px;
}
.products-list 
{
  gap: 2%;
  width: 97%;
  padding: 1%;
  display: grid;
  overflow-y: scroll;
  text-align: center;
  height: fit-content;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.product 
{
  padding: 1%;
  display: flex;
  height: 50dvh;
  transition: 0.3s;
  align-items: center;
  border-radius: 1rem;
  flex-direction: column;
  background: #8b8b8bc7;
  justify-content: center;
}

.product:hover 
{
  justify-content: space-evenly;
  transform: translateY(-1px);
  background-image: none;
  transition: 0.5s;
  
  span
  {
    width: 50%;
    opacity: 1;
    border: none;
    transition: 1s;
    border-bottom: solid #e0b973 5px;
  }
  p
  {
    opacity: 1;
    transition: 0.5s;
    color: #000000;
  }
}

.product h4 
{
  color: #fff;
  font-size: x-large;
}
span
{
  width: 10%;
  border: none;
  transition: 1s;
  border-bottom: solid white 2px;
}
.product p 
{
  margin-top: 0.5rem;
  opacity: 0;
}

.prod-one
{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(products/raw-removebg-preview.png);
}
.prod-two
{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(products/ChatGPT\ Image\ Jun\ 30\,\ 2025\,\ 03_00_21\ PM.png);
}
.prod-three
{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(products/ChatGPT_Image_Jun_30__2025__02_47_06_PM-removebg-preview.png);
}

.testimonials
{
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  height: 100dvh;
  display: flex;
}
.testimonials-list
{
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  height: fit-content;
  text-align: center;
  overflow-y: scroll;
  padding: 0 5%;
  display: grid;
  width: 97%;
}

.testimonials h3 
{
  font-size: 2rem;
  color: #e0b973;
}

.testimonial 
{
  color: #ccc;
  height: 40dvh;
  display: flex;
  max-width: 600px;
  margin: 1rem 1rem;
  align-items: center;
  border-radius: 1rem;
  padding: 0.5rem 2rem;
  flex-direction: column;
  background: #1f1f1fca;
  justify-content: space-evenly;
}

#contact 
{
  height: 90dvh;
  padding: 4rem 4rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(products/ChatGPT\ Image\ Jul\ 3\,\ 2025\,\ 02_27_27\ PM.png);
}

#contact h3 
{
  font-size: 2rem;
  color: #e0b973;
  text-align: center;
  margin-bottom: 2rem;
}

form 
{
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
}

form input,
form textarea 
{
  border: none;
  padding: 1rem;
  color: #fff;
  border-radius: 10px;
  background: #2a2a2a;
}

form button 
{
  border: none;
  padding: 1rem;
  cursor: pointer;
  color: #0f0f0f;
  font-weight: 600;
  border-radius: 30px;
  background-color: #e0b973;
}

footer 
{
  color: #f5f5f5;
  scroll-snap-align: end;
  padding: 60px 20px 30px;
  background-color: black;
  font-family: 'Open Sans', sans-serif;
}

.footer-container 
{
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.footer-brand h2 
{
  font-family: 'Playfair Display', serif;
  margin-bottom: 10px;
  font-size: 28px;
  color: #a884f3;
}

.footer-brand p 
{
  line-height: 1.6;
  font-size: 14px;
  color: #ccc;
}

.footer-links ul,
.footer-services ul 
{
  list-style: none;
  padding: 0;
}

.footer-links h4,
.footer-services h4,
.footer-contact h4 
{
  margin-bottom: 15px;
  font-size: 16px;
  color: #ffffff;
}

.footer-links a 
{
  text-decoration: none;
  color: #ccc;
  display: block;
  margin-bottom: 10px;
  transition: color 0.3s;
}

.footer-links a:hover 
{
  color: #a884f3;
}

.footer-services li 
{
  margin-bottom: 10px;
  color: #ccc;
}

.footer-contact p 
{
  font-size: 14px;
  margin-bottom: 10px;
  color: #ccc;
}

.footer-socials a 
{
  color: #a884f3;
  margin-right: 12px;
  font-size: 18px;
  transition: transform 0.3s;
}

.footer-socials a:hover 
{
  transform: scale(1.2);
  color: #ffffff;
}

.footer-bottom 
{
  border-top: 1px solid #444;
  text-align: center;
  padding-top: 20px;
  margin-top: 40px;
  font-size: 13px;
  color: #888;
}