body { margin: 0; background-color: rgb(224, 225, 220); font-family: "Roboto", sans-serif; color: white; } /* Header Styles */ @media (max-width:768px){ header{ flex-direction:column; align-items:flex-start; gap:10px; } nav ul{ gap:20px; flex-wrap:wrap; } } .HomeLogoImage { height: 4rem; /* Matches typical nav text height (~24px) */ object-fit: contain; /* Ensures the image scales without distortion */ vertical-align: middle; /* Aligns it nicely with text */ } header { background-color: rgb(224, 225, 220); display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; flex-wrap: wrap; } header h1 { font-size: 1.5rem; } nav ul { list-style: none; display: flex; gap: 50px; margin: 0; padding: 0; flex-wrap: wrap; } nav ul li a { color: rgb(0, 68, 90); text-decoration: none; font-weight: bold; transition: 0.3s ease; } a:hover { color: rgb(167, 193, 167); } /* Services section */ @media (max-width:768px){ .ServicesTitle h1{ font-size:2.5rem; margin-left:1rem; } .ServicesTitle p{ margin-left:1rem; margin-right:1rem; font-size:0.95rem; } } .ServicesTitle h1{ color: rgb(0, 68, 90); margin-left: 2rem; font-size:4rem; } .ServicesTitle p{ max-width: 700px; margin-left: 2rem; margin-right: 2rem; color:#333; } @media (max-width:768px){ .service-block h1, .service-block h2, .service-block p{ margin-left:1rem; margin-right:1rem; } } .service-block h1 { color: rgb(0, 68, 90); margin-left: 2rem; text-align: left; } .service-block h2 { color: #3333337e; font-size: 12px; margin-left: 2rem; margin-top: 5px; } .service-block p { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.6s ease-out, max-height 0.6s ease-out; margin-left: 2rem; max-width: 600px; color: black; } @media (max-width:768px){ .service-block p{ opacity:1; max-height:none; } } .service-block:hover p { opacity: 1; max-height: 200px; /* enough space to reveal */ } .service-block:hover{ background-color:rgb(167, 193, 167); } .service-block h3{ margin-left:2rem; color:rgb(0, 68, 90); } .service-block .title-row { display: flex; align-items: center; /* vertically align */ } /*.Payroll:hover p{ margin-left:50%; color: black; transition: width 2s, height 4s, background-color 3s; }*/ /*Testimonial*/ /* Grid container */ /* MAIN GRID LAYOUT */ @media (max-width:900px){ .MainGrid{ grid-template-columns:1fr; grid-template-rows:auto; } .LeftBox, .RightTop, .FullBottom{ grid-column:1; grid-row:auto; } .RightMiniGrid{ grid-column:1; grid-row:auto; grid-template-columns:1fr; } } #Testimonial h1{ color: rgb(0, 68, 90); margin-left: 20px; margin-top: 50px; } .MainGrid { display: grid; grid-template-columns: 1fr 1fr; /* Left + Right main columns */ grid-template-rows: auto auto auto; /* 3 main rows */ gap: 2rem; width: 90%; margin: 0 auto; margin-top: 3rem; } @media (max-width:768px){ .MainGrid{ width:95%; gap:1.2rem; } } /* Base styling */ .box { background: white; color: rgb(0, 68, 90); border-radius: 20px; padding: 1.5rem; border: 2px solid #ddd; font-size: 15px; } /* LEFT tall box — spans 2 rows */ .LeftBox { grid-column: 1; grid-row: 1; /* covers row 1 + 2 */ } /* RIGHT top box */ .RightTop { grid-column: 2; grid-row: 1; background-color: rgb(167, 193, 167); } /* RIGHT mini-grid for the 2 boxes */ .RightMiniGrid { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; /* 2 side-by-side boxes */ gap: 1.5rem; } /* Bottom full-width box */ .FullBottom { grid-column: 1 ; /* full width */ grid-row: 2; background-color: #00c1cb57; } /* Font Awesome CDN (Add in ) */ /* */ .site-footer { background-color: #002c3e; color: #ffffff; padding: 20px 20px 20px; font-family: Arial, sans-serif; } .footer-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; max-width: 1200px; margin: 0 auto; } .site-footer h3 { font-size: 18px; margin-bottom: 20px; color: #00c2cb; } .footer-about, .footer-links, .footer-contact, .footer-social { flex: 1 1 220px; } .footer-links ul, .footer-contact ul { list-style: none; padding: 0; } .footer-links ul li, .footer-contact ul li { margin-bottom: 10px; } .footer-links ul li a { color: #ffffff; text-decoration: none; transition: color 0.3s; } .footer-links ul li a:hover { color: #00c2cb; } .footer-social .social-icons a { color: #ffffff; font-size: 18px; margin-right: 15px; transition: color 0.3s; } .footer-social .social-icons a:hover { color: #00c2cb; } .footer-bottom { border-top: 1px solid #004a64; text-align: center; margin-top: 40px; padding-top: 20px; font-size: 14px; } .footer-bottom a { color: #00c2cb; text-decoration: none; margin: 0 8px; } .footer-bottom a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 768px) { .footer-container { flex-direction: column; align-items: flex-start; } .footer-about, .footer-links, .footer-contact, .footer-social { width: 100%; } .footer-social .social-icons a { margin-right: 10px; } } /*Mobile*/ @media (max-width:768px){ section{ padding-left:15px; padding-right:15px; } }