/* Reset and Universal styles */
body, h1, h2, h3, p, ul {
  margin: 0;
  padding: 0;
}
body {
  background: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* Logo and Name */
#logo-and-name {
  display: flex;
  align-items: center;
}
#company-logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
#company-name {
  font-size: 24px;
  font-weight: bold;
}

/* Desktop Specific Styles */
.dynamic-header {
  background: #1a1a2e;
  padding: 1rem;
  text-align: right;
  color: white;
}
.dynamic-header nav ul li {
  float: left;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}


/* Updated Header styles with vibrant yellow background and black text */
.dynamic-header {
  background: #003366;
  padding: 1rem;
  text-align: center;
  color: white;
}

.dynamic-header .logo {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.dynamic-header nav {
  background: #FFD700;  /* Vibrant Yellow */
  border-radius: 25px;
  display: inline-block;
}

.dynamic-header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 25px;
}

.dynamic-header nav ul li {
  float: left;
}

.dynamic-header nav ul li a {
  display: block;
  color: black;  /* Black Text */
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  border-right: 1px solid #555555;  /* Border to separate items */
}

.dynamic-header nav ul li:last-child a {
  border-right: none;  /* Remove right border for the last item */
}

.dynamic-header nav ul li a:hover {
  background-color: #FFC700;  /* Slightly darker yellow for hover */
}

/* Slideshow styles */
.slideshow {
    position: relative;
    width: 100%; /* Set the width to match the page */
    height: 600px; /* Adjust the desired height */
    overflow: hidden;
}

.slide {
    display: block; /* Display the first slide by default */
    width: 100%; /* Set the width to match the page */
    height: 100%; /* Match the height of the slideshow container */
    position: absolute; /* Position the slides absolutely within the container */
    opacity: 0; /* Start with a transparent slide */
    transition: opacity 1s ease-in-out; /* Add transition for opacity change */
}

.slide.active {
    opacity: 1; /* Display the active slide with full opacity */
}

.slide img {
    width: 100%; /* Set a fixed width for all images */
    height: 100%; /* Set a fixed height for all images */
    object-fit: cover; /* Maintain aspect ratio and cover the slide */
}


.center-content {
    display: flex;
    justify-content: right;
    align-items: right;
    margin-bottom: 10px; /* Add a margin to separate from icons */
}

.social-media {
    display: flex;
    justify-content: right;
    align-items: right;
    margin-bottom: 20px; /* Add a margin to separate from links */
}

/*proucts *//* Product & Services Section */
#products {
  background-color: #1a1a1a; /* Dark Gray */
  color: white;
  padding: 40px;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  background-color: #FFD700; /* Vibrant Yellow */
  color: #000000; /* Black Text */
  border-radius: 15px;
  padding: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s, background-color 0.4s;
}

.product-card h3 {
  margin-top: 0;
}

.product-card p {
  opacity: 1;
  transition: opacity 0.4s;
}

.product-card:hover {
  transform: scale(1.05);
  background-color: #32CD32; /* Lime Green on Hover */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle Box Shadow */
}

.product-card:hover p {
  opacity: 1; /* Text Appears on Hover */
}




/* Universal Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #FFFFFF; /* White Background */
  color: #1a1a2e; /* Dark Grey Text */
}

/* Header Section */
/* Universal Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #FFFFFF; /* White Background */
  color: #1a1a2e; /* Space Grey Text */
}

/* Header Section */
.dynamic-header {
  background: #1a1a2e;  /* Space Grey */
  padding: 1rem;
  text-align: right;
  color: #FFFFFF;  /* White Text */
}

.dynamic-header .logo {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Seamless Menu Styles */
.dynamic-header nav {
  background: #FFD700;  /* Vibrant Yellow */
  border-radius: 25px;
  display: inline-block;
}

.dynamic-header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 25px;
}

.dynamic-header nav ul li {
  float: left;
}

.dynamic-header nav ul li a {
  display: block;
  color: #1a1a2e;  /* Space Grey Text */
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  border-right: 1px solid #666666;
}

.dynamic-header nav ul li:last-child a {
  border-right: none;  /* Remove right border for the last item */
}

.dynamic-header nav ul li a:hover {
  background-color: #FFC700;  /* Slightly darker yellow for hover */
}

/* Buttons */
.button {
  background-color: #FFD700; /* Vibrant Yellow */
  color: #1a1a2e; /* Space Grey Text */
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* Footer */
.footer {
  background: #1a1a2e; /* Space Grey */
  padding: 1rem;
  text-align: center;
  color: #FFFFFF;  /* White Text */
}


/* Main Content */
.dynamic-section {
  background: #336699;
  margin: 1rem;
  padding: 1rem;
  color: white;
  border-radius: 8px;
}

.blob {
  background: radial-gradient(circle, #336699, #003366);
}

/* Footer */
.dynamic-footer {
  background: #FFD700;  /* Vibrant Yellow */
  padding: 1rem;
  text-align: center;
  color: #1a1a2e; /* Space Grey Text */
}

/* Welcome Section Styles */
#welcome-section {
  padding: 2rem;
  background-color: #FFFFFF;
  color: #1a1a2e;
}

#welcome-section h1, #welcome-section h2 {
  color: #1a1a2e; /* Space Grey Text */
}

#welcome-section p {
  font-size: 1.2rem;
  line-height: 1.6;
}

#welcome-section ul {
  list-style-type: disc;
  margin-left: 2rem;
}

#welcome-section .button {
  margin-top: 1rem;
}


/* Mobile Specific Styles */
@media only screen and (max-width: 768px) {
  /* Header */
  .dynamic-header {
    text-align: center;
  }
  .dynamic-header nav ul {
    text-align: center;
  }
  .dynamic-header nav ul li {
    float: none;
  }
  
  /* Product Grid */
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  /* Button Size */
  .button {
    padding: 15px 30px;
    font-size: 18px;
  }
  
  /* Social Media */
  .social-media {
    flex-direction: column;
    align-items: center;
  }
}