/*
  The Smartest Solution – Custom Stylesheet

  This file defines the global styles for the Smartest Solution website. It
  introduces a cohesive color palette, typography rules and responsive
  layouts tailored specifically for IT‑service pages. Cards, banners,
  navigation and contact elements all derive their appearance from the
  variables declared below. Feel free to extend these rules as the
  website grows.
*/

/* Root colour definitions. Adjust these values to tweak the look and feel
   across the entire site. */
:root {
  --primary: #3b82f6;       /* Bright blue used for buttons and call to action */
  --secondary: #f43f5e;     /* Coral red used for emphasis */
  --tertiary: #22c55e;      /* Green accent for success and support */
  --quaternary: #6366f1;   /* Purple accent for IP camera installation */
  --dark-bg: #111827;       /* Dark background for footer */
  --light-bg: #f3f4f6;      /* Light grey background for alternating sections */
  --text-dark: #1f2937;     /* Primary text colour */
  --text-muted: #4b5563;    /* Secondary text colour */
}

/* Basic resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: #fff;
}

/* Navigation bar */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* Slightly transparent dark overlay for readability on top of hero */
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(8px);
}

.navbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar a.logo {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
}

/* When an image is placed inside the logo anchor it should scale to a reasonable height */
.navbar a.logo img {
  height: 40px;
  width: auto;
  display: block;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.navbar ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.navbar ul li a:hover {
  color: #dbeafe;
}

/* Language switch button in the navigation bar */
.lang-switch {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.lang-switch:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Make service cards clickable by styling anchor tags similarly to div.card */
.services-section a.card {
  display: block;
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.services-section a.card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.services-section a.card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.services-section a.card p {
  font-size: 1rem;
  line-height: 1.5;
}
.services-section a.card:nth-child(1) {
  background-color: var(--primary);
}
.services-section a.card:nth-child(2) {
  background-color: var(--secondary);
}
.services-section a.card:nth-child(3) {
  background-color: var(--tertiary);
}
.services-section a.card:nth-child(4) {
  background-color: var(--quaternary);
}
.services-section a.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Contact form section */
.contact-form-section {
  padding: 4rem 2rem;
  background-color: var(--light-bg);
  display: flex;
  justify-content: center;
}
.contact-form-section form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
}
.contact-form-section .form-group {
  margin-bottom: 1rem;
}
.contact-form-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contact-form-section input,
.contact-form-section textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  font-size: 1rem;
}
.contact-form-section input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
}
.contact-form-section button {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

/* Simple fade-in animation for page load */
@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.fade-in-page {
  opacity: 0;
  animation: fadeInPage 0.8s ease forwards;
}

/* Hero Section */
/*
 * Hero height adjustments
 *
 * The hero section originally occupied the full viewport height (100vh), which
 * created a very tall banner on the home page. Users requested a slightly
 * shorter hero so that more of the site content is visible without scrolling.
 * To achieve this we reduce the height to 80vh while retaining the same
 * centred layout, gradient overlay and background image. All other styling
 * remains unchanged.
 */
.hero {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
  color: #fff;
  background: linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    ),
    url('../images/images/pic02.png') center/cover no-repeat;
}

.hero .hero-content {
  max-width: 800px;
}

.hero h1 {
  font-family: 'Merriweather', serif;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #f9fafb;
}

.btn-primary {
  display: inline-block;
  background-color: var(--primary);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: var(--secondary);
}

/* Services Section */
.services-section {
  padding: 4rem 2rem;
  background-color: var(--light-bg);
  text-align: center;
}

.services-section h2 {
  font-family: 'Merriweather', serif;
  font-size: 2.25rem;
  margin-bottom: 2rem;
}

.services-section .cards {
  /*
   * Arrange the four service cards in a symmetrical grid. Originally the
   * auto‑fit setting allowed three cards on the first row and one on the
   * second when the viewport was wide enough to accommodate three 250px
   * columns. This created an unbalanced 3+1 layout. To guarantee a
   * balanced presentation we explicitly define two equal columns on
   * larger screens (creating a two‑by‑two grid) while still letting the
   * cards stack on smaller viewports via media queries below.
   */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.services-section .card {
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-section .card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.services-section .card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.services-section .card p {
  font-size: 1rem;
  line-height: 1.5;
}

.services-section .card:nth-child(1) {
  background-color: var(--primary);
}
.services-section .card:nth-child(2) {
  background-color: var(--secondary);
}
.services-section .card:nth-child(3) {
  background-color: var(--tertiary);
}

.services-section .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* About Section */
.about-section {
  padding: 4rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.about-section h2 {
  text-align: center;
  font-family: 'Merriweather', serif;
  font-size: 2.25rem;
  margin-bottom: 1.5rem;
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-image {
  flex: 1;
  min-width: 280px;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.about-text {
  flex: 1;
  min-width: 280px;
}

.about-text p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.about-text strong {
  font-family: 'Merriweather', serif;
}

/* Contact Section */
.contact-section {
  padding: 4rem 2rem;
  text-align: center;
  background-color: var(--light-bg);
}

.contact-section h2 {
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-section p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.contact-info {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.contact-info li {
  font-size: 1rem;
  color: var(--text-dark);
}

.contact-info li i {
  margin-right: 0.5rem;
  color: var(--primary);
}

/* Footer */
footer {
  padding: 1.5rem 2rem;
  background-color: var(--dark-bg);
  color: #f9fafb;
  text-align: center;
  font-size: 0.9rem;
}

/* Utility classes */
.inner-banner {
  padding: 6rem 2rem 2rem;
  background: linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    ),
    url('../images/images/bg.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
}

.inner-banner h1 {
  font-family: 'Merriweather', serif;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.inner-banner p {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto;
}

.service-list {
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.service-item {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.service-item:nth-child(odd) {
  flex-direction: row;
}

.service-item:nth-child(even) {
  flex-direction: row-reverse;
}

.service-item img {
  flex: 1;
  min-width: 280px;
  border-radius: 0.75rem;
  width: 100%;
  height: auto;
}

.service-item .service-text {
  flex: 1;
  min-width: 280px;
}

.service-item .service-text h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  font-family: 'Merriweather', serif;
}

.service-item .service-text p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/*
 * Services page grid layout
 *
 * On the services page there are four service items. Previously the
 * `.service-list` container stacked these items vertically, resulting in an
 * asymmetrical 3‑plus‑1 arrangement on wider screens. By applying the
 * `.grid` modifier class to the `.service-list` element we switch to a CSS
 * grid layout that places items in two columns (or more on larger
 * viewports) with consistent spacing. Each `.service-item` within a grid
 * becomes a column‑oriented card so the alternating row direction rules are
 * overridden. For non‑grid service lists (e.g. on detail pages) the
 * original flex styles continue to apply.
 */
.service-list.grid {
  display: grid;
  /*
   * Force the services list on the dedicated services page into a
   * consistent two‑column grid. Using auto‑fit previously resulted in a
   * three‑column layout on large screens, leaving the fourth item
   * misaligned on its own row. A repeat(2, 1fr) rule ensures two items
   * per row, giving a balanced 2x2 presentation for four services. The
   * list still collapses gracefully on smaller screens via the media
   * queries below.
   */
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.service-list.grid .service-item {
  flex-direction: column;
  text-align: left;
}

.service-list.grid .service-item:nth-child(even),
.service-list.grid .service-item:nth-child(odd) {
  flex-direction: column;
}

/* Responsiveness */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.25rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .navbar ul {
    gap: 1rem;
  }
  .about-content {
    flex-direction: column;
  }
  .service-item {
    flex-direction: column !important;
  }
  .service-item img, .service-item .service-text {
    max-width: 100%;
  }
}

/* Warranty section styles */
.warranty-section {
  padding: 3rem 2rem;
  text-align: center;
  background-color: var(--light-bg);
}
.warranty-section h2 {
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-dark);
}
.warranty-section p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  text-decoration: none;
}
.whatsapp-float:hover {
  background-color: #1ebe57;
}