body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 1.25rem;
     line-height: 1.6;
     font-weight: 400;
     color: #000;
 }

 h1 {
     font-size: 3rem;
     line-height: 1.2;
     font-weight: 700;
     margin-bottom: 0.5rem;
     letter-spacing: -1px;
 }

 h2 {
     font-size: 2.25rem;
     line-height: 1.3;
     font-weight: 700;
     margin-bottom: 0.5rem;
 }

 .btn {
     display: inline-block;
     border: none;
     border-radius: 8px;
     padding: 10px 20px;
     font-size: 0.875rem;
     line-height: 1.4;
     font-weight: 500;
 }

 .btn-primary:hover {
     background-color: rgba(108, 87, 234, 1);
     color: #fff;
 }

 .btn-primary {
     background-color: rgba(108, 87, 234, 1);
     color: #fff;
     padding: 15px 28px;
     font-size: 1.125rem;
     font-weight: 700;
 }

 .btn-secondary:hover {
     background-color: rgba(5, 26, 48, 1);
     color: #fff;
 }

 .btn-secondary {
     background-color: rgba(5, 26, 48, 1);
     color: #fff;
 }

 .hero-sec {
     background-color: rgba(5, 26, 48, 1);
     background-image: url('../images/optimized/Splashy-hero-background.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: #fff;
     padding: 60px 0;
     min-height: 630px;
     display: flex;
     align-items: center;
 }

 .about-sec {
     padding: 120px 0;
     ;
 }

 .footer-sec {
     background-image: url('../images/optimized/Splashy-footer-background.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-color: rgba(5, 26, 48, 1);
     color: #fff;
     padding: 60px 0;
     font-size: 1.125rem;
 }

 @media (min-width: 1400px) {
     .footer-sec .container {
         max-width: 1020px;
     }
 }

 .footer-title {
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 0.5rem;
     text-transform: uppercase;
 }

 .footer-divider {
     background-color: rgba(255, 255, 255, 0.25);
     height: 1px;
     margin: 30px 0;
 }

 .footer-copyright-sec {
     background-color: #0C2846;
     color: #fff;
     font-size: 14px;
     padding: 20px 0;
 }

 @media screen and (max-width: 1280px) {
     .hero-sec {
         padding: 50px 0;
         min-height: 500px;
     }

     .about-sec {
         padding: 80px 0;
     }

     .footer-sec {
         padding: 50px 0;
         font-size: 1rem;
     }

     .btn-primary {
         padding: 12px 24px;
         font-size: 1rem;
     }
 }

 @media screen and (max-width: 768px) {
     body {
         font-size: 1rem;
         line-height: 1.5;
     }

     h1 {
         font-size: 2rem;
         line-height: 1.3;
     }

     h2 {
         font-size: 1.575rem;
         line-height: 1.4;
     }

     .hero-sec {
         padding: 40px 0;
         min-height: 400px;
     }

     .about-sec {
         padding: 60px 0;
     }

     .footer-sec {
         padding: 40px 0;
         font-size: 1rem;
     }

     .btn-primary {
         padding: 12px 24px;
         font-size: 1rem;
     }

     .btn-secondary {
         padding: 10px 20px;
         font-size: 0.75rem;
     }

 }