/* HERO SECTION */
 
 .hero-services {
     background: url('assets/images/legal-hero.jpg') center/cover no-repeat;
     padding: 120px 20px;
     text-align: center;
     color: rgb(12, 12, 12);
 }
 
 .hero-services h1 {
     font-size: 48px;
     font-weight: 600;
     margin-bottom: 10px;
 }
 
 .hero-services p {
     font-size: 18px;
     max-width: 700px;
     margin: auto;
     opacity: 0.9;
 }
 /* SECTION HEADER */
 
 .section-header {
     text-align: center;
     margin: 60px auto 40px;
     max-width: 700px;
 }
 
 .section-header .section-tag {
     font-size: 14px;
     color: #cc0000;
     text-transform: uppercase;
     font-weight: 600;
 }
 
 .section-header h2 {
     font-size: 34px;
     margin-bottom: 10px;
 }
 
 .section-header p {
     color: #444;
 }
 /* ============================
   SERVICES GRID — DESKTOP
============================ */
 
 .services-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     padding: 40px 60px;
 }
 
 .service-card {
     background: #ffffff;
     border-radius: 12px;
     padding: 25px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     border: 1px solid #e5e5e5;
     transition: 0.3s ease;
     text-align: center;
 }
 
 .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
 }
 /* Icon styling */
 
 .icon-box {
     font-size: 40px;
     color: #C62828;
     /* Red accent */
     margin-bottom: 15px;
 }
 
 .service-card h3 {
     font-size: 20px;
     margin-bottom: 10px;
     color: #1a1a1a;
 }
 
 .service-card p {
     font-size: 15px;
     color: #555;
     margin-bottom: 18px;
 }
 /* Card button */
 
 .card-btn {
     padding: 10px 22px;
     background: #0A1A2F;
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 15px;
     font-weight: 600;
     transition: 0.25s ease-in-out;
 }
 
 .card-btn:hover {
     background: #C62828;
 }
 /* ============================
   TABLET — 2 Columns
============================ */
 
 @media (max-width: 900px) {
     .services-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
         padding: 30px 25px;
     }
     .service-card {
         padding: 20px;
     }
     .icon-box {
         font-size: 36px;
     }
     .service-card h3 {
         font-size: 18px;
     }
     .service-card p {
         font-size: 14px;
     }
     .card-btn {
         width: 100%;
         font-size: 15px;
         padding: 12px 0;
     }
 }
 /* ============================
   MOBILE — 1 Column
============================ */
 
 @media (max-width: 600px) {
     .services-grid {
         grid-template-columns: 1fr;
         gap: 18px;
         padding: 25px 20px;
     }
     .service-card {
         padding: 22px;
         text-align: center;
         /* Centers text + button */
     }
     .icon-box {
         font-size: 34px;
     }
     .service-card h3 {
         font-size: 17px;
     }
     .service-card p {
         font-size: 14px;
         margin-bottom: 15px;
     }
     /* Centered CTA Button */
     .card-btn {
         width: 100%;
         padding: 12px 0;
         /* FIXED: added missing value */
         font-size: 14.5px;
         display: block;
         margin: 0 auto;
         /* centers the button */
     }
 }
 /* MISSION BOX */
 
 .mission-box {
     background: #ffffff;
     padding: 50px 30px;
     margin: 60px auto;
     max-width: 900px;
     border-radius: 14px;
     text-align: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .mission-box h3 {
     margin-bottom: 10px;
     font-size: 26px;
 }
 
 .mission-box p {
     color: #555;
     font-size: 16px;
 }
 /* CTA */
 
 .cta-section {
     padding: 70px 20px;
     background: #002b5c;
     color: white;
     text-align: center;
 }
 
 .cta-section h2 {
     font-size: 32px;
     margin-bottom: 10px;
 }
 
 .cta-section a {
     display: inline-block;
     margin-top: 20px;
     background: #cc0000;
     padding: 14px 28px;
     border-radius: 8px;
     color: white;
     font-weight: 600;
     text-decoration: none;
     transition: 0.3s;
 }
 
 .cta-section a:hover {
     background: #aa0000;
 }
 /* FOOTER PLACEHOLDER */