w4rriorG/fixitfast-pro-wrench-wizards

1* {2    margin: 0;3    padding: 0;4    box-sizing: border-box;5}6 7body {8    font-family: 'Poppins', sans-serif;9    color: #333;10    line-height: 1.6;11    background-color: #f8fafc;12}13 14.container {15    width: 90%;16    max-width: 1200px;17    margin: 0 auto;18    padding: 0 15px;19}20 21/* Navbar */22.navbar {23    background: white;24    box-shadow: 0 2px 10px rgba(0,0,0,0.1);25    position: fixed;26    width: 100%;27    z-index: 100;28    padding: 15px 0;29}30 31.navbar .container {32    display: flex;33    justify-content: space-between;34    align-items: center;35}36 37.logo {38    font-size: 1.5rem;39    font-weight: 700;40    color: #2c3e50;41    text-decoration: none;42}43 44.nav-links {45    display: flex;46    gap: 20px;47    align-items: center;48}49 50.nav-links a {51    text-decoration: none;52    color: #333;53    transition: color 0.3s;54}55 56.nav-links a:hover {57    color: #3498db;58}59 60.menu-btn {61    display: none;62    background: none;63    border: none;64    font-size: 1.5rem;65    cursor: pointer;66}67 68/* Hero */69.hero {70    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/technology/1200x630/3');71    background-size: cover;72    background-position: center;73    color: white;74    text-align: center;75    padding: 180px 0 120px;76}77.hero h1 {78    font-size: 2.5rem;79    margin-bottom: 20px;80}81 82.hero p {83    font-size: 1.2rem;84    margin-bottom: 30px;85    max-width: 600px;86    margin-left: auto;87    margin-right: auto;88}89 90/* Buttons */91.btn {92    display: inline-block;93    padding: 12px 30px;94    background: #3498db;95    color: white;96    border-radius: 5px;97    text-decoration: none;98    font-weight: 600;99    transition: background 0.3s;100}101 102.btn:hover {103    background: #2980b9;104}105 106.btn-outline {107    background: transparent;108    border: 2px solid white;109}110 111.btn-outline:hover {112    background: rgba(255,255,255,0.1);113}114 115.btn-light {116    background: white;117    color: #3498db;118}119 120.btn-light:hover {121    background: #f8f9fa;122}123 124.btn-group {125    display: flex;126    gap: 15px;127    justify-content: center;128}129 130/* Services */131.services {132    padding: 80px 0;133    background: white;134}135 136/* New styles for about page */137.about-header {138    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('http://static.photos/office/1200x630/2');139    background-size: cover;140    background-position: center;141    color: white;142}143 144/* Contact page styles */145.contact-header {146    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('http://static.photos/workspace/1200x630/4');147    background-size: cover;148    background-position: center;149    color: white;150}151 152@media (max-width: 768px) {153    .hero {154        padding: 120px 0 80px;155    }156.services h2 {157    text-align: center;158    margin-bottom: 50px;159    font-size: 2rem;160}161 162.services-grid {163    display: grid;164    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));165    gap: 30px;166}167 168.service-card {169    background: #f8f9fa;170    padding: 30px;171    border-radius: 10px;172    text-align: center;173    transition: transform 0.3s, box-shadow 0.3s;174}175 176.service-card:hover {177    transform: translateY(-5px);178    box-shadow: 0 10px 20px rgba(0,0,0,0.1);179}180 181.service-card .icon {182    font-size: 2.5rem;183    margin-bottom: 20px;184}185 186/* Testimonials */187.testimonials {188    padding: 80px 0;189    background: #f8f9fa;190}191 192.testimonials h2 {193    text-align: center;194    margin-bottom: 50px;195    font-size: 2rem;196}197 198.testimonial-grid {199    display: grid;200    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));201    gap: 30px;202}203 204.testimonial-card {205    background: white;206    padding: 30px;207    border-radius: 10px;208    text-align: center;209    box-shadow: 0 5px 15px rgba(0,0,0,0.05);210}211 212.testimonial-card img {213    width: 80px;214    height: 80px;215    border-radius: 50%;216    object-fit: cover;217    margin-bottom: 15px;218}219 220.testimonial-card .rating {221    color: #f1c40f;222    margin-bottom: 15px;223    font-size: 1.2rem;224}225 226/* CTA */227.cta {228    padding: 60px 0;229    background: #3498db;230    color: white;231    text-align: center;232}233 234.cta h2 {235    margin-bottom: 30px;236    font-size: 2rem;237}238 239/* Footer */240footer {241    background: #2c3e50;242    color: white;243    padding: 60px 0 20px;244}245 246.footer-grid {247    display: grid;248    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));249    gap: 40px;250    margin-bottom: 40px;251}252 253footer h3, footer h4 {254    margin-bottom: 20px;255}256 257footer p {258    margin-bottom: 10px;259    color: #ecf0f1;260}261 262.copyright {263    text-align: center;264    padding-top: 20px;265    border-top: 1px solid #34495e;266    color: #bdc3c7;267}268 269/* Responsive */270@media (max-width: 768px) {271    .nav-links {272        display: none;273    }274    275    .menu-btn {276        display: block;277    }278    279    .hero {280        padding: 120px 0 80px;281    }282    283    .hero h1 {284        font-size: 2rem;285    }286    287    .btn-group {288        flex-direction: column;289    }290}