/*
Theme Name: FBM Products
Theme URI: https://example.com/fbmproducts
Author: ChatGPT
Description: A clean and modern WordPress theme inspired by the FBM Products design. This theme provides a multi‑section home page with product highlights, team members, services, blog posts and a contact form. Dedicated page templates for About, Contact, Dealers, Services and Blog are included. Colors, typography and layout follow the look shown in the provided mock‑ups, using deep blues, soft greys and crisp whites throughout. Replace the placeholder images with your own assets for a customised experience.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fbmproducts
Tags: custom theme, responsive, dark blue, corporate
*/

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background-color: #f5f7fc;
}

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

img {
  max-width: 100%;
  height: auto;
}

/* Global containers */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Header */
header.site-header {
  background-color: #0a1850;
  color: #fff;
  padding: 20px 0;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-branding h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

.main-navigation a {
  color: #fff;
  font-weight: 500;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
  color: #fdd835;
}

/* Hero Section */
.hero {
  background: linear-gradient(90deg, #f5f7fc 0%, #eaf1ff 50%, #f5f7fc 100%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.hero .hero-content {
  flex: 1 1 480px;
}

.hero h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0a1850;
  margin-bottom: 20px;
}

.hero p {
  max-width: 600px;
  margin-bottom: 30px;
  color: #333;
}

.hero .hero-image {
  flex: 1 1 480px;
  text-align: center;
}

/* Feature Circles */
.features {
  background-color: #0a1850;
  color: #fff;
  text-align: center;
}

.features h3 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 50px;
  font-weight: 600;
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.feature-item {
  flex: 1 1 calc(25% - 30px);
  min-width: 200px;
}

.feature-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #0e2a7b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 3px solid #fdd835;
}

.feature-item h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.feature-item p {
  font-size: 0.9rem;
  color: #dcdcdc;
}

/* Brands Section */
.brands {
  background-color: #0e2a7b;
  color: #fff;
  text-align: center;
}

.brands h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}

.brands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.brand-card {
  background-color: #fff;
  color: #0a1850;
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.brand-card .brand-image {
  background-color: #e2e8f6;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #7b88a5;
  font-size: 1.2rem;
}

.brand-card .brand-content {
  padding: 20px;
}

.brand-card h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.brand-card p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

.brand-card a {
  display: inline-block;
  margin-top: auto;
  color: #0a1850;
  font-weight: 600;
}

/* Stats Section */
.stats {
  background-color: #f5f7fc;
  text-align: center;
  color: #0a1850;
}

.stats .stats-content {
  max-width: 600px;
  margin: 0 auto 40px;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.stat-item {
  flex: 1 1 200px;
  max-width: 250px;
  text-align: center;
}

.stat-item span {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #0e2a7b;
  margin-bottom: 10px;
}

.stat-item label {
  font-size: 0.9rem;
  color: #555;
}

/* Team Section */
.team {
  background-color: #f5f7fc;
  color: #0a1850;
  text-align: center;
}

.team h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.team-member {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  width: 260px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.team-member .member-photo {
  height: 220px;
  background-color: #e2e8f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #7b88a5;
}

.team-member .member-info {
  padding: 20px;
}

.team-member h4 {
  margin-bottom: 5px;
  font-size: 1.2rem;
  font-weight: 600;
}

.team-member span {
  font-size: 0.9rem;
  color: #7b88a5;
}

/* Services Section */
.services {
  background-color: #f5f7fc;
  color: #0a1850;
  text-align: center;
}

.services h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}

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

.service-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-card.featured {
  background-color: #0a1850;
  color: #fff;
}

.service-card .service-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.service-card h4 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: 600;
}

.service-card p {
  font-size: 0.9rem;
  color: inherit;
}

.service-card a {
  margin-top: 15px;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: underline;
}

/* Blog Section */
.blog {
  background-color: #f5f7fc;
  color: #0a1850;
}

.blog h3 {
  font-size: 2rem;
  margin-bottom: 40px;
  text-align: center;
}

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

.blog-post {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.blog-post .post-thumbnail {
  background-color: #e2e8f6;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b88a5;
  font-size: 1.2rem;
}

.blog-post .post-content {
  padding: 20px;
  flex-grow: 1;
}

.blog-post h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.blog-post p {
  font-size: 0.9rem;
  color: #555;
}

.blog-post .read-more {
  margin-top: auto;
  text-align: right;
  padding: 15px 20px;
  font-size: 0.9rem;
  color: #0a1850;
  font-weight: 600;
  background-color: #e2e8f6;
  border-top: 1px solid #d8e0f2;
}

/* Contact Section */
.contact {
  background-color: #f5f7fc;
  color: #0a1850;
  text-align: center;
}

.contact h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}

.contact-form {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #d1d7e6;
  border-radius: 5px;
  background-color: #fff;
  font-size: 0.9rem;
}

.contact-form textarea {
  grid-column: span 2;
  min-height: 150px;
  resize: vertical;
}

.contact-form button {
  grid-column: span 2;
  padding: 15px;
  background-color: #0a1850;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: #0e2a7b;
}

.map-placeholder {
  width: 100%;
  height: 300px;
  background-color: #e2e8f6;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b88a5;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Footer */
footer.site-footer {
  background-color: #0a1850;
  color: #fff;
  padding: 60px 0;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-column ul {
  list-style: none;
}

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

.footer-column a {
  color: #fff;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: #fdd835;
}

.site-footer .copyright {
  text-align: center;
  margin-top: 20px;
  font-size: 0.8rem;
  color: #b3b3c6;
}

/* Utilities */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0a1850;
  color: #fff;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: #0e2a7b;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .main-navigation ul {
    flex-direction: column;
    background-color: #0a1850;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 20px;
  }
  .main-navigation.toggled ul {
    display: flex;
  }
  .menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    color: #fff;
  }
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero .hero-content,
  .hero .hero-image {
    flex: 1 1 100%;
  }
  .contact-form {
    grid-template-columns: 1fr;
  }
  .contact-form textarea,
  .contact-form button {
    grid-column: 1;
  }
}
.btn {
    background-color: #0e2a7b !important;
    color: #ffffff !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: 0.3s ease;
}

.btn:hover {
    background-color: #0a1850 !important;
    color: #ffffff !important;
}