/* GENERAL STYLING */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222; /* default text color for light mode */
  background: url('https://github.com/gtechpcworks/solutions/blob/main/background.jpg?raw=true') no-repeat center center;
  background-size: cover;
  position: relative;
  min-height: 100vh;
}

/* HEADINGS */
h1, h2, h3 {
  text-align: center;
  color: #ffd700; /* gold-like yellow */
}

/* PARAGRAPHS */
p {
  max-width: 800px;
  margin: 0 auto 1rem auto;
  text-align: center;
}

/* HERO SECTION */
.hero {
  background: url('https://source.unsplash.com/1600x600/?technology,computer') no-repeat center center/cover;
  height: 80vh; /* This height ensures that the image takes up 80% of the viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  background-size: cover;  /* Ensures the background image covers the entire section */
  background-position: center center;  /* Keeps the center of the image in view */
}

/* For smaller devices like phones */
@media (max-width: 768px) {
  .hero {
    background-size: cover;  /* Ensures the background still covers the whole section */
    background-position: center center;  /* Keeps the image centered even on small screens */
    height: 50vh; /* Reduces the height for smaller screens to improve visibility */
  }
}

@media (max-width: 400px) {
  .hero {
    background-size: cover;  /* Ensures the image still covers the section */
    background-position: center center;  /* Ensures the image is centered */
    height: 40vh; /* Adjust the height further for very small screens */
  }
}

/* SERVICES */
#services {
  position: relative;
  background: url('https://github.com/gtechpcworks/solutions/blob/main/services.jpg?raw=true') no-repeat center center/cover;
  padding: 3rem 1rem;
  text-align: center;
  color: #fff;
}

/* Dark overlay */
#services::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(215, 215, 231, 0);
  z-index: 0;
}

#services * {
  position: relative;
  z-index: 1;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.card {
  background: #3ca0a9;
  padding: 1.5rem;
  text-align: center;
  border-radius: 10px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  background: #0f294b;
}

/* Service descriptions */
.service-description {
  display: none;
  padding: 1rem;
  margin-top: 1rem;
  background: rgba(16, 3, 4, 0.331);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  transition: all 0.3s ease;
}

/* BOOKING SECTION */
#booking {
  background: rgba(0, 0, 0, 0.6);
  padding: 3rem 1rem;
  margin-top: 2rem;
  border-radius: 10px;
  text-align: center;
}

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

#booking label {
  text-align: left;
  font-weight: bold;
  color: #ffd700;
}

#booking input,
#booking select {
  padding: 10px;
  border-radius: 6px;
  border: none;
  outline: none;
  font-size: 1rem;
  background: #222;      /* dark but visible input box */
  color: #fff;           /* text color inside input */
}

#booking button {
  background: #ffcc00;
  color: #000;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

#booking button:hover {
  background: #e6b800;
}

/* RESPONSIVE FOR SMALL SCREENS */
@media (max-width: 768px) {
  #booking form {
    flex-direction: column;
    gap: 0.5rem;
  }

  #booking button {
    width: 100%;
  }
}

/* CONTACT */
#contact {
  padding: 3rem 1rem;
  background: #43454700;
  text-align: left; /* Align text to the left */
  max-width: 600px; /* Optional: control the width */
  margin: 0 auto; /* Centers the section */
}

#contact p {
  margin-bottom: 10px; /* Space between the lines */
  font-size: 1.1rem; /* Slightly larger text */
}

#contact p span {
  display: inline-block;
  width: 120px; /* Adjust width for label spacing */
  font-weight: bold; /* Label should stand out */
}

#contact a {
  color: #ffcc00;
  text-decoration: none;
}

#contact a:hover {
  text-decoration: underline; /* Underline the link on hover */
}

/* FOUNDER SECTION */
#founder {
  background: url('https://source.unsplash.com/1600x600/?technology,circuit') no-repeat center center/cover;
  padding: 4rem 1rem;
  position: relative;
  text-align: center;
}

.founder-overlay {
  background: rgba(36, 36, 59, 0);
  padding: 2rem;
  border-radius: 15px;
  display: inline-block;
}

.founder-pic {
  width: 200px;        /* Fixed width */
  height: 200px;       /* Fixed height to maintain the circle */
  object-fit: cover;   /* Ensures the image covers the entire space without distortion */
  border-radius: 50%;  /* Makes the image round */
  border: 3px solid #3edbf0;
  margin-bottom: 1rem;
  display: block;      /* Ensures it always renders as a block element */
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .founder-pic {
    width: 150px;    /* Adjust the width for smaller screens */
    height: 150px;   /* Adjust the height to maintain the circular shape */
  }
}

@media (max-width: 400px) {
  .founder-pic {
    width: 120px;    /* Further adjust the size for very small screens */
    height: 120px;   /* Keep the height the same for a perfect circle */
  }
}

#founder h2 {
  color: #ffd700;
  margin-bottom: 1rem;
}

#founder h3 {
  color: #ffcc00;
  margin-top: 0.5rem;
}

#founder p {
  max-width: 600px;
  margin: 0 auto;
  color: #f4f4f4;
}

/* DARK MODE */
.dark-mode {
  background-color: #121212; /* dark overlay behind everything */
  color: #eee;               /* text color */
}

.dark-mode header.hero,
.dark-mode footer {
  background: rgba(30,30,30,0.95); /* dark overlay */
}

.dark-mode .card {
  background: #222;
  color: #eee;
  border: 1px solid #444;
}

.dark-mode #booking {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
  color: #ffd700; /* golden headings */
}

/* Scroll-to-Top Button */
#scrollToTop {
  position: fixed;
  bottom: 100px;  /* Adjusted to provide space above the other buttons */
  left: 20px;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#scrollToTop:hover {
  background: #0056b3;
}

/* Remove Footer Navigation Section */
#footer-nav {
  display: none;  /* Hides the Quick Links */
}

/* WHATSAPP CHAT BUTTON (Updated Styling) */
a {
  position: fixed;
  bottom: 100px;  /* Adjusted to provide space above the other buttons */
  right: 20px;
  background: #25D366;
  color: white;
  padding: 12px 18px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

a:hover {
  background: #128C7E;
}

/* DARK MODE - WhatsApp button */
.dark-mode a {
  background: #128C7E; /* Darker WhatsApp green in dark mode */
  color: white;
}

.dark-mode a:hover {
  background: #075E54;
}

/* Dark Mode Transition */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* BOOKING FORM - Background and Button (Dark Mode) */
.dark-mode #booking {
  background: rgba(255, 255, 255, 0.1); /* Slightly visible background */
}

.dark-mode #booking button {
  background: #f1c40f;
  color: #000;
}

.dark-mode #booking button:hover {
  background: #e6b800;
}

/* General Dark Mode Adjustments */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background: #222;
  color: #fff;
  border: none;
  outline: none;
}

.dark-mode label {
  color: #ffd700;
}

/* Hero Section - Dark Mode */
.dark-mode .hero {
  background: url('https://source.unsplash.com/1600x600/?technology,computer') no-repeat center center/cover;
  filter: none; /* No darkening effect */
}

/* Service Cards in Dark Mode */
.dark-mode .card {
  background: #222;
  color: #eee;
  border: 1px solid #444;
}

/* Footer Section - Dark Mode */
.dark-mode footer {
  background: #00000000;
  color: #eee;
}

@keyframes blink-text {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Apply the blinking animation to h1 (website title) */
h1 {
  animation: blink-text 1s infinite;
}
@keyframes blink-services-title {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Apply the blinking animation to the h2 (Our Services) */
#services h2 {
  animation: blink-services-title 1s infinite; /* 1s duration, infinite loop */
}