/* Global Styles */
/* Import a more modern, clean font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Use the imported Lato font for a more contemporary feel */
  font-family: "Lato", Arial, Helvetica, sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #ffffff;
  text-align: center;
}

/* Slightly enlarge paragraph text and improve readability */
p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header and Navigation */
header {
  background-color: #2082b3; /* light blue */
  color: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Layout the navigation bar horizontally with the logo on the left,
   the primary navigation centred and social icons pushed to the right. */
.navbar {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: 70px;
  /* Prevent line breaks inside the company name */
  white-space: nowrap;
}

.navbar .logo img {
  height: 70px;
  width: auto;
  display: block;
}

.navbar .logo a {
  color: #ffffff;
}

.navbar ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.navbar li {
  margin: 0 0.5rem;
}

.navbar li a {
  color: #ffffff;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.navbar li a:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2);
}

/* Social media icons container in the header navigation.  This sits to the
   right of the primary nav links and displays the WhatsApp and Facebook
   logos.  We constrain the icon sizes and add spacing so they align
   nicely with the menu items. */
.navbar .nav-icons {
  /* Push the social icons to the far right */
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar .nav-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .nav-icons img {
  width: 22px;
  height: 22px;
  /* Ensure icons sit on a coloured header: tweak contrast if necessary */
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease;
}

.navbar .nav-icons img:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  /* Hide the separate social icons on very small screens to avoid
     overcrowding; users can still access the social links via the footer
     or contact page. */
  .navbar .nav-icons {
    display: none;
  }
}

/* Mobile menu toggle */
.navbar .menu-toggle {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #ffffff;
}

/* Hero Section */
.hero {
  position: relative;
  height: 85vh;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
background-size: 100% auto;
  /* stretch full width, scale height */
  background-repeat: no-repeat;
  background-position: center top;
  /* or 'center center' */
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.7),
    rgba(32, 130, 179, 0.7)
  );
  z-index: -1;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* Buttons */
.btn {
  display: block;
  background-color: #3498db;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin: 0 auto;
  text-align: center;
  max-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: scale(1.05);
  background-color: #2082b3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.btn:hover:before {
  left: 100%;
}

/* Sections */
section {
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #1a1a1a;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #2082b3;
  border-radius: 2px;
}

.section-title p {
  /* Slightly larger subtitle text for section introductions */
  font-size: 1.2rem;
  color: #555;
  max-width: 600px;
  margin: 15px auto 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #ffffff 0%, #f9fcff 100%);
  box-shadow: 0 1px 3px rgba(32, 130, 179, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.container::before,
.service-card::before,
.price-item::before,
.contact-form::before,
.contact-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, rgba(32, 130, 179, 0.03) 0%, transparent 150%),
    linear-gradient(45deg, transparent -50%, rgba(32, 130, 179, 0.02) 100%);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

/* About section and general text */
.about {
  background: linear-gradient(150deg, #ffffff 0%, #f9fbfd 100%);
  position: relative;
}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(#2082b3 0.5px, transparent 0.5px),
    radial-gradient(#2082b3 0.5px, #f8f9fa 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.03;
  pointer-events: none;
}

.about p,
section p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Services Section */
.services {
  background: linear-gradient(150deg, #f9fbfd 0%, #ffffff 100%);
  position: relative;
}

.services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(45deg, #2082b3 25%, transparent 25%),
    linear-gradient(-45deg, #2082b3 25%, transparent 25%);
  background-size: 60px 60px;
  opacity: 0.015;
  pointer-events: none;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  text-align: center;
}

.service-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 130, 179, 0.08);
  box-shadow: 
    0 2px 4px rgba(32, 130, 179, 0.03),
    0 8px 16px rgba(32, 130, 179, 0.03);
  padding: 20px;
  padding-bottom: 60px; /* Add space for button at bottom */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 450px; /* Set minimum height to keep cards consistent */
  backdrop-filter: blur(10px);
}

.service-card:hover {
  background: linear-gradient(135deg, #fafcff 0%, #ffffff 100%);
  box-shadow: 
    0 4px 8px rgba(32, 130, 179, 0.05),
    0 16px 24px rgba(32, 130, 179, 0.05);
  transform: translateY(-2px);
}

.service-card > a {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.service-card .content {
  flex: 1;
}

.service-card .btn-container {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eeeeee;
}

.service-card > a:hover {
  text-decoration: none;
}

.service-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 15px;
  transition: transform 0.5s ease;
}

.service-card:hover img {
  transform: scale(1.05);
}

.service-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #2082b3;
}

.service-card p {
  /* Increase the font size of service descriptions for better legibility */
  font-size: 1rem;
  margin-bottom: 0;
  color: #555;
}

.service-card .quote-btn {
  display: inline-block;
  background-color: #3498db;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-top: 15px;
  font-weight: bold;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.service-card:hover .quote-btn {
  background-color: #2082b3;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.service-card .btn-quote {
  display: inline-block;
  background-color: #3498db;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: auto;
  min-width: 150px;
}

.service-card .btn-quote:hover {
  transform: scale(1.05);
  background-color: #2082b3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Testimonials */
.testimonials {
  background: linear-gradient(150deg, #ffffff 0%, #f7fafc 100%);
  position: relative;
}

.testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(45deg, #2082b3 50%, transparent 50%);
  background-size: 4px 4px;
  opacity: 0.02;
  pointer-events: none;
}

.testimonial-item {
  margin-bottom: 20px;
  text-align: center;
}

.testimonial-item p {
  font-style: italic;
  margin-bottom: 5px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-item h4 {
  margin: 0;
  font-size: 1rem;
  color: #2082b3;
}

/* Partners */
.partners {
  background: linear-gradient(150deg, #f9fbfd 0%, #ffffff 100%);
  position: relative;
}

.partners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(0deg, #2082b3, #2082b3 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, #2082b3, #2082b3 1px, transparent 1px, transparent 20px);
  opacity: 0.02;
  pointer-events: none;
}

.partners img {
  width: 120px;
  margin: 10px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.partners img:hover {
  opacity: 1;
}

/* Footer */
footer {
  background-color: #2082b3;
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
}

footer .container {
  background: transparent;
  box-shadow: none;
}

footer .container::before {
  display: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
  background: transparent;
}

.footer-grid h4 {
  margin-top: 0;
  color: #ffffff;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 8px;
}

.footer-grid a {
  color: #cccccc;
  font-size: 0.9rem;
}

.footer-grid a:hover {
  color: #ffffff;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #bbbbbb;
}

/* Form styles */
.form-group {
  margin-bottom: 15px;
  text-align: center;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333333;
  text-align: center;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
  height: 120px;
}

.form-group button {
  background-color: #3498db;
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  display: block;
  margin: 0 auto;
  min-width: 200px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.form-group button:hover {
  transform: scale(1.05);
  background-color: #2082b3;
}

/* Price guide */
.prices {
  background: linear-gradient(150deg, #f9fbfd 0%, #ffffff 100%);
  position: relative;
}

.prices::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(30deg, #2082b3 12%, transparent 12.5%, transparent 87%, #2082b3 87.5%, #2082b3),
    linear-gradient(150deg, #2082b3 12%, transparent 12.5%, transparent 87%, #2082b3 87.5%, #2082b3),
    linear-gradient(30deg, #2082b3 12%, transparent 12.5%, transparent 87%, #2082b3 87.5%, #2082b3),
    linear-gradient(150deg, #2082b3 12%, transparent 12.5%, transparent 87%, #2082b3 87.5%, #2082b3);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
  opacity: 0.03;
  pointer-events: none;
}

.price-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.price-item {
  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 130, 179, 0.08);
  box-shadow: 
    0 2px 4px rgba(32, 130, 179, 0.03),
    0 8px 16px rgba(32, 130, 179, 0.03);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
}

.price-item:hover {
  background: linear-gradient(135deg, #fafcff 0%, #ffffff 100%);
  box-shadow: 
    0 4px 8px rgba(32, 130, 179, 0.05),
    0 16px 24px rgba(32, 130, 179, 0.05);
  transform: translateY(-2px);
}

/* Responsive navigation */
@keyframes shine {
  0% { opacity: 0.7; }
  50% { opacity: 0.5; }
  100% { opacity: 0.7; }
}

@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
    background-color: #2082b3;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    opacity: 0;
    visibility: hidden;
  }

  .navbar:hover ul,
  .navbar ul.open {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
  }

  .navbar li {
    margin: 0;
    padding: 10px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .navbar li:first-child {
    border-top: none;
  }

  .navbar .menu-toggle {
    display: block;
    padding: 10px;
  }
}

/* Centered Buttons and Contact Sections */
.contact {
  background: linear-gradient(150deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(#2082b3 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.03;
  pointer-events: none;
}

.contact .container {
  text-align: center;
}

.contact-form {
  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 130, 179, 0.08);
  box-shadow: 
    0 2px 4px rgba(32, 130, 179, 0.03),
    0 8px 16px rgba(32, 130, 179, 0.03);
  max-width: 600px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  padding: 30px;
}

.contact-info {
  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 130, 179, 0.08);
  box-shadow: 
    0 2px 4px rgba(32, 130, 179, 0.03),
    0 8px 16px rgba(32, 130, 179, 0.03);
  text-align: left;
  padding: 30px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.contact-info h3 {
  color: #2082b3;
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.contact-info-item {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
}

.contact-info-item i {
  font-size: 1.5rem;
  color: #2082b3;
  margin-right: 15px;
  min-width: 24px;
}

.contact-form .form-group {
  margin-bottom: 20px;
  text-align: left;
}

.contact-form .form-group label {
  text-align: left;
  font-weight: 500;
  margin-bottom: 8px;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
  border: 1px solid #dee2e6;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
  border-color: #2082b3;
  box-shadow: 0 0 0 3px rgba(32, 130, 179, 0.1);
  outline: none;
}

.form-message {
  text-align: center;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    order: 2;
  }
  
  .contact-form {
    order: 1;
  }
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Contact Page Styles */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}