/* --------------------------------------------------------  header style starts here --------------------------------------------------- */
/* General header styling */
/* styles.css */




/* --------------------------------------------------------  header style ends here --------------------------------------------------- */

/*-------------------------- footer code ----------------------------------- */
.footer {
    background-color: #2C3E50;
    color: white;
    padding: 20px;
    text-align: center;
  }
  
  .footer-logo-image {
    width: 150px;
    margin-bottom: 15px;
  }
  
  .footer-social-icons {
    margin: 15px 0;
  }
  
  .footer-icon {
    margin: 0 10px;
  }
  
  .social-icon {
    width: 30px;
    height: 30px;
  }
  
  /* Responsive Design */
  @media only screen and (max-width: 768px) {
    .header .nav-links ul {
        flex-direction: column;
        gap: 10px;
    }
  
    .button-container {
        flex-direction: column;
    }
  
    .card-section {
        flex-direction: column;
    }
  
    .impression-section {
        flex-direction: column;
        text-align: center;
    }
  
    .impression-image img {
        width: 80%;
        margin: 0 auto;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .text-content {
        padding: 15px;
    }
  
    .Precision-in-Print-Perfection-on-Paper {
        font-size: 1.5rem;
    }
  
    .Saraswathi-Offset-Printers-description {
        font-size: 0.9rem;
    }
  
    .service-button {
        padding: 8px 16px;
    }
  
    .contact-us-button {
        padding: 8px 16px;
    }
  
    .card {
        width: 100%;
    }
  
    .card-title {
        font-size: 1rem;
    }
  
    .card-content {
        font-size: 0.9rem;
    }
  }

  .footer {
    background-color: white; /* White background */
    color: #606060; /* Text color */
    padding: 5px 10px; /* Padding for spacing */
    text-align: center; /* Center text */
    border-top: 1px solid #e0e0e0; /* Optional top border */
  }
  
  .footer-container {
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Space between elements */
    align-items: center; /* Vertical alignment */
    max-width: 1200px; /* Max width of the footer */
    margin: 0 auto; /* Center the footer container */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
  }
  
  /* Logo on the left */
  .footer-logo {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* Align logo to the left */
  }
  
  .footer-logo img {
    width: 100px; /* Adjust logo size */
  }
  
  /* Social icons on the right */
  .footer-social-icons {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Align social icons to the right */
    gap: 15px; /* Space between social icons */
  }
  
  .footer-social-icons a img {
    width: 25px;
    height: 25px; /* Adjust icon size */
  }
  
  /* Copyright text in the center */
  .footer-content {
    flex: 2;
    text-align: center;
    font-size: 14px;
    color: #606060; /* Optional color adjustment */
  }
  
  /* Media query for smaller devices */
  @media only screen and (max-width: 768px) {
    .footer-container {
      flex-direction: column; /* Stack footer elements vertically */
      align-items: center; /* Center align all content */
      text-align: center;
    }
  
    .footer-logo,
    .footer-content,
    .footer-social-icons {
      justify-content: center; /* Center everything on mobile */
      margin: 10px 0; /* Add margin for spacing */
    }
  
    .footer-logo img {
      width: 80px; /* Smaller logo for mobile */
    }
  
    .footer-social-icons a img {
      width: 20px; /* Smaller icons for mobile */
      height: 20px;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .footer-container {
      padding: 10px; /* Smaller padding for very small screens */
    }
  
    .footer-logo img {
      width: 70px; /* Further reduce logo size */
    }
  
    .footer-content {
      font-size: 12px; /* Reduce font size for copyright text */
    }
  
    .footer-social-icons a img {
      width: 18px; /* Further reduce icon size */
      height: 18px;
    }
  }
  /*----------------------------------------------------- section css ---------------------------------------------------------------*/
 
  body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Product Section Styles */
.products {
    padding: 40px 20px; /* Adjusted padding for section */
    background-color: #fff;
}

/* Product Section Header */
.products-header {
    text-align: center;
    margin-bottom: 40px;
}

.products-header h1 {
    font-size: 32px;
    font-weight: 600;
}

/* Products List - 3 Products in a Row */
.products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
}

.product-card {
  width: 200px; /* Set a fixed width for each product card */
  text-align: center;
}

.product-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Maintain square aspect ratio */
  overflow: hidden;
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fits within the container without distortion */
}
.product-title {
  margin-top: 8px;
  font-size: 0.7em; /* Smaller font size */
  font-weight: 300; /* Thinner font */
  font-family: 'Helvetica Neue', Arial, sans-serif; /* Elegant font */
  color: #333; /* Elegant gray color */
  letter-spacing: 0.5px; /* Slight spacing for elegance */
}
.default-image {
  transition: opacity 0.3s ease;
}

.hover-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .default-image {
  opacity: 0;
}

.product-card:hover .hover-image {
  opacity: 1;
}


/* Responsive design */
@media (max-width: 768px) {
    .products-list {
        grid-template-columns: repeat(2, 1fr); /* 2 products per row on tablets */
        gap: 20px; /* Adjust space for smaller screens */
    }
}

@media (max-width: 480px) {
    .products-list {
        grid-template-columns: 1fr; /* 1 product per row on mobile */
        gap: 15px; /* Reduce gap on very small screens */
    }
}
/* Call to Action Section Styles */
/* Apply the Poppins font globally or just to the CTA section */
body {
  font-family: 'Poppins', sans-serif; /* Global font change */
}

/* Call to Action Section Styles */
.cta-section {
  background-color: #fff8cc; /* Light yellow background */
  padding: 40px 20px;
  text-align: center;
  width: 100%; /* Full width on all screens */
  margin: 40px 0; /* Vertical margins */
  border-radius: 0; /* Remove rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  font-family: 'Poppins', sans-serif; /* Specific to CTA */
}

.cta-content h2 {
  font-size: 1.5rem; /* Adjusted font size */
  color: #333;
  margin-bottom: 15px;
  font-weight: 600; /* Semi-bold */
}

.cta-content p {
  font-size: 1rem; /* Smaller paragraph font size */
  color: #666;
  margin-bottom: 20px;
  font-weight: 300; /* Thin font for the paragraph */
}

.cta-button {
  background-color: #ffcc00; /* Bright yellow button */
  color: #fff;
  padding: 10px 20px; /* Reduced padding */
  font-size: 1rem; /* Slightly smaller font for button */
  font-weight: 600; /* Medium-bold button font */
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  display: inline-block;
  font-family: 'Poppins', sans-serif; /* Ensure the button has the same font */
}

.cta-button:hover {
  background-color: #e6b800; /* Darker yellow on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
  .cta-content h2 {
      font-size: 1.3rem; /* Slightly smaller on tablets */
  }

  .cta-content p {
      font-size: 0.9rem;
  }

  .cta-button {
      padding: 8px 18px;
      font-size: 0.9rem;
  }

  .cta-section {
      padding: 30px 10px; /* Slightly reduce padding on tablets */
  }
}

@media (max-width: 480px) {
  .cta-section {
      padding: 20px 10px; /* Smaller padding on mobile */
      margin: 20px 0; /* Reduce margin on mobile */
  }

  .cta-content h2 {
      font-size: 1.1rem; /* Smaller heading for mobile */
  }

  .cta-content p {
      font-size: 0.8rem; /* Smaller paragraph font for mobile */
  }

  .cta-button {
      padding: 8px 16px;
      font-size: 0.85rem; /* Smaller button on mobile */
      width: 100%; /* Full-width button for mobile */
  }
}
/* Initially hide the nav menu on mobile */
.nav-links {
  display: none;
}

/* Show the menu when the 'active' class is added */
.nav-links.active {
  display: block;
}

/* For desktop, show the nav menu by default */
@media (min-width: 768px) {
  .nav-links {
      display: flex;
  }
}