/* Global Styling */
body {
    font-family: 'Poppins', sans-serif;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0;
  }
  
  /* Fixed Header */
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 8px 0; /* Adjusted padding for proper spacing */
  }
  
  /* Fix Logo Size */
  .logo {
    width: 77px; /* Reduced for better alignment */
    height: 77px;
    border-radius: 50%;
    margin-left: 10px;
    margin-right: 0px; /* Adjusted to reduce space */
  }
  
  /* Header Layout */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center; /* Center alignment */
    justify-content: space-between;
  }
  
  /* Logo */
  .logo {
    width: 77px;
    height: 77px;
    border-radius: 50%;
    margin-left: 10px;
  }
  
  /* Site Title */
  .site-title {
    font-size: 40px;
    text-decoration: none;
    font-weight: 600;
    margin: 10;
    margin-right: 150px; /* Adjusted to reduce space */
    margin-left: -15px; /* Adjusted to reduce space */
  }
  
  .red {
    color: red;
  }
  .white {
    color: white;
  }
  
  /* Navigation */
  .nav-links {
    list-style: none;
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  
  /* Alternating Colors */
  .nav-links li:nth-child(odd) a {
      color: white; /* Buy Bike & About Us - White */
  }
  
  .nav-links li:nth-child(even) a {
      color: red; /* Sell Your Bike & Contact Us - Red */
  }
  
  /* Link Styling */
  .nav-links a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    background-color: black;
    padding: 5px 10px;
    transition: text-shadow 0.3s;
  }
  
  /* Hover Effect */
  .nav-links a:hover {
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
  }
  
  /* Remove Unwanted Spacing */
  .nav-links li {
    margin: 0;
    padding: 0;
  }
  
  /* Mobile Fixes */
  @media screen and (max-width: 768px) {
      .container {
          flex-direction: row;
          align-items: flex-start;
          justify-content: space-between;
          padding: 0 10px;
      }
  
      .logo {
          width: 50px; /* Adjusted for mobile */
          height: 50px;
      }
  
      .site-title {
          font-size: 25px; /* Adjusted for mobile */
          margin-right: 10px;
      }
  
      .nav-links {
          display: none;
          flex-direction: column;
          position: absolute;
          top: 70px;
          right: 0;
          background: black;
          width: 100%;
          text-align: right;
          padding: 15px 20px;
      }
  
      .nav-links li {
          margin: 10px 0;
      }
  
      .nav-links a {
          display: block;
          width: 100%;
      }
  
      .nav-active {
          display: flex;
      }
  
      /* Hamburger Menu */
      .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
        padding: 10px;
        z-index: 1100;;
      }
  
      .hamburger span {
          background: white;
          height: 3px;
          width: 30px;
          margin: 5px;
          display: block;
          transition: 0.3s ease-in-out;
      }
  } 
  /* Responsive Navigation */
  @media screen and (max-width: 768px) {
    .hamburger {
        display: flex;
    }
  
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0; /* ✅ Right-aligned */
        background: black;
        width: 100%; /* ✅ Auto width for a compact menu */
        text-align: right; /* ✅ Ensures text is aligned right */
        padding: 15px 20px;
        box-shadow: -2px 2px 10px rgba(255, 0, 0, 0.4); /* ✅ Light shadow effect */
        z-index: 1000; /* ✅ Ensures it's above other elements */
    }
  
    .nav-links li {
        margin: 10px 0;
    }
  
    .nav-links a {
        display: block;
        padding: 10px 15px;
    }
  
    .nav-active {
        display: flex;
    }
  
    /* Hamburger Animation */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
  }
  
/* ======== Hero Section ======== */
.contact-hero {
    background: url('images/Bikefactory.jpg') no-repeat center -230px/cover;
    background-position: grid-row-end;
    padding: 120px 10px;
    color: black;
    text-align: center;
}

.contact-hero h1 {
    font-size: 30px;
    background-color: white;
    opacity: 60%;
    width: 60%;
    margin-left: 200px;
}

.contact-hero span {
    color: red;
    background-color: rgba(255, 255, 255, 0.072)
}

/* ======== Contact Info ======== */
.contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px;
}

.info-card {
    background: black;
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.4);
}

.info-card i {
    font-size: 35px;
    color: red;
    margin-bottom: 10px;
}

.info-card a {
    color: white;
    text-decoration: none;
}

.info-card a:hover {
    text-decoration: underline;
}
.social-logo {
    height: 4rem;
    width: 4rem;
  }

/* ======== Contact Form ======== */
.contact-form {
    padding: 50px;
}

.contact-form h2 {
    font-size: 30px;
    color: red;
}

.contact-form input, .contact-form textarea {
    width: 50%; /* Adjusted width to 100% */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid white;
    border-radius: 5px;
    background: #222;
    color: white;
}

.contact-form textarea {
    resize: none;
}

.submit-btn {
    background: red;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    display: block; /* Added display block */
    width: 50%; /* Adjusted width to 100% */
    margin-top: 10px; /* Added margin-top for spacing */
    margin-left: auto; /* Center align the button */
    margin-right: auto; /* Center align the button */
    
}

.submit-btn:hover {
    background: white;
    color: red;
}


/* ======== Google Map Section ======== */
.map-container {
    padding: 50px;
}

.map-container h2 {
    font-size: 30px;
    color: red;
}

.map-box {
    width: 80%;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.4);
}

/* ======= Mobile Responsive Fixes ======= */
@media (max-width: 768px) {
    .contact-hero {
        padding: 80px 15px; /* ✅ Adjusted for Mobile */
        background-position: center 65px;
    }

    .contact-hero h1 {
        font-size: 24px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        justify-content: flex-end;
    }

    .contact-info {
        padding: 30px 10px;
    }

    .info-card {
        width: 100%; /* ✅ Full Width Cards */
        max-width: 350px;
    }

    .contact-form {
        padding: 30px 10px;
        width: 100%;
    }

    .map-box {
        width: 100%;
    }
}
  
  /* Footer */
  .footer {
    padding: 20px;
    background: black;
    text-align: center;
    margin-top: 50px;
  }