h1 {
   font-family: "Inter", sans-serif;
   font-size: 40px;
   font-weight: 500;
 }



 .Looking-section {
   display: flex;
   align-items: center;
   justify-content: center;
   height: auto;
   background-color: rgb(245, 250, 255);
   position: relative;
   top: 80px;

 }

 .Looking-content h1 {
   color: #1976d2;
   line-height: 52px;
   margin-bottom: 20px;
   font-size: 45px;
   font-weight: bold;
 }



 .Looking-content p {
   font-size: 17px;
   margin-bottom: 30px;
   line-height: 24px;
   font-family: "Arial", sans-serif;
   max-width: 600px;
 }

 .Looking-image {
   text-align: start;
 }

 .Looking-image img {
   width: 100%;
   height: auto;
 }





 .UG-1 {
   width: 40%
 }


 @media screen and (max-width:1060px) {
   .UG-1 {
     width: 95%
   }
 }








 @media screen and (max-width:1350px) {}

 @media (max-width: 1024px) {
   .Looking-section {
     flex-direction: row;
     padding: 20px;
   }



   .Looking-content h1 {
     font-size: 30px;
     text-align: start;
   }
 }

 @media (max-width: 768px) {
   .Looking-section {
     flex-direction: column;
     text-align: start;
     top: 100px;
     line-height: 24px;
     padding: 0;

   }



   .Looking-content p {
     font-size: 15px;
   }
 }

 @media (max-width: 480px) {

   .Looking-content p {
     font-size: 14px;
   }

   .Looking-section {
     top: 80px;


   }

   .Looking-content h1 {
     margin-top: 20px;
     line-height: 38px;
   }
 }

 /* section 2 */



 .outcome-section {
   margin-top: 120px;
   padding: 15px;
 }

 .container-outcome {
   max-width: 900px;
   margin: 0 auto;
 }

 /* Header */
 .outcome-header h2 {
   text-align: center;
   font-size: 2rem;
   color: #2c3e50;
   margin-bottom: 2rem;
 }

 /* Two-column grid */
 .outcome-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
 }

 @media screen and (max-width: 768px) {
   .outcome-content {
     grid-template-columns: 1fr;
   }

   .outcome-header h2 {
     text-align: start;
   }
 }

 @media screen and (max-width:480px) {
   .outcome-header h2 {
     font-size: 22px;
   }
 }

 /* Benefit text */
 .outcome-text p {
   font-size: 1rem;
   line-height: 1.6;
   color: #444;
   margin-bottom: 1.5rem;
 }

 /* Callout box */
 .callout {
   display: flex;
   align-items: flex-start;
background-color: rgb(245, 250, 255);   border-left: 4px solid #007bff;
   padding: 1rem;
   margin: 1.5rem 0;
   border-radius: 4px;
 }

 .callout i {
   font-size: 1.5rem;
   color: #007bff;
   margin-right: 0.75rem;
 }

 .callout p {
   margin: 0;
   font-size: 0.95rem;
   color: #333;
 }

 /* Challenge box */
 .outcome-challenge {
   background: #fff4e5;
   border-left: 4px solid #ffae42;
   padding: 1.5rem;
   border-radius: 4px;
 }

 .outcome-challenge h3 {
   font-size: 1.25rem;
   color: #d35400;
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
 }

 .outcome-challenge h3 i {
   margin-right: 0.5rem;
 }

 .outcome-challenge p {
   font-size: 0.97rem;
   line-height: 1.6;
   color: #5a3e1b;
 }

 /* section 3 */

 .Approach {
   width: 100%;
   margin: 50px auto;

 }

 .Approach h2 {
   text-align: center;
   font-size: 32px;
   line-height: 38px;
   color: #272727;
   padding-bottom: 50px;
 }

 .Approach p {
   margin: auto;
 }


 .Approach-card {
   display: flex;
   justify-content: center;
   gap: 80px;
   margin: 40px auto;
   flex-wrap: wrap;
 }

 .app-card1 {
   background: #ffffff;
   padding: 20px;
   border-radius: 10px;
   text-align: center;
   max-width: 400px;
   min-height: 350px;
   box-shadow: 0 12px 25px 12px rgba(0, 0, 0, 0.1);
 }

 .app-card1 h3 {
   font-size: 24px;
   font-weight: bold;
   margin-top: 20px;
 }

 .app-card1 p {
   font-size: 18px;
   color: #555;
   max-width: 300px;
   margin-top: 20px;
   line-height: 24px;
 }

 .bottom-gd {
   display: flex;
   justify-content: center;
   gap: 80px;
   margin-top: 20px;
   flex-wrap: wrap;
 }

 @media (max-width: 1024px) {

   .app-card1 {
     min-height: auto;
   }
 }

 @media (max-width: 768px) {
   .Approach h2 {
     font-size: 28px;
   }

   .app-card1 h3 {
     font-size: 22px;
   }

   .app-card1 p {
     font-size: 16px;
     max-width: 280px;
   }
 }

 @media (max-width: 480px) {
   .Approach h2 {
     font-size: 24px;
     line-height: 30px;
   }

   .bottom-gd {
     align-items: center;
   }

   .Approach-card {
     align-items: center;
   }

   .app-card1 {
     /* width: 100%;
        max-width: 90%; */
     padding: 15px;
   }

   .app-card1 img {
     width: 70px;
     height: 70px;
   }

   .app-card1 h3 {
     font-size: 20px;
   }

   .app-card1 p {
     font-size: 14px;
     line-height: 22px;
   }
 }





 /* section-3 new*/

 .harsh {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 100px;
   flex-wrap: wrap;
   margin-top: 40px;
background-color: rgb(245, 250, 255);
   padding-top: 100px;
   padding-bottom: 100px;
 }

 .harsh h1 {
   font-weight: 400;
   font-style: normal;
   margin-top: 40px;
 }

 .harsh-text ul {
   margin-top: 30px;
   padding-left: 20px;

 }

 .harsh-text li {
   margin-top: 20px;
   line-height: 24px;
   font-size: 18px;
 }

 .harsh-img img {
   width: 100%;
   max-width: 550px;
 }



 .harsh-text {
   width: 40%
 }


 @media screen and (max-width:805px) {
   .harsh-text {
     width: 95%
   }
 }

 @media screen and (max-width:768px) {
   .harsh {
     padding-inline-start: 20px;
     padding-inline-end: 20px;
   }
 }

 /* section 4 */
 .Value {
   width: 100%;
   padding-top: 100px;
   padding-bottom: 50px;
 }

 .Value-text {
   text-align: center;
   padding: 40px;
 }

 .Value-text h2 {
   font-size: 32px;
   line-height: 38px;
   color: #272727;
 }

 .Value-text p {
   font-size: 17px;
   line-height: 24px;
   margin-top: 20px;
 }

 .Value-gd {
   display: flex;
   justify-content: center;
   gap: 40px;
   margin-top: 30px;
 }

 .Value-card1 {
   padding: 20px;
   border-radius: 10px;
   text-align: center;
   max-width: 400px;
   min-height: 350px;
 }

 .Value-card1 img {
   max-width: 350px;
   height: 150px;
   margin-bottom: 10px;
   width: 100%;
 }

 .Value-card1 h3 {
   font-size: 24px;
   font-weight: bold;
   margin-top: 20px;
 }

 .Value-card1 p {
   font-size: 18px;
   color: #555;
   margin-top: 20px;
   line-height: 24px;
 }

 @media (max-width: 1024px) {
   .Value-text h2 {
     font-size: 28px;
   }

   .Value-gd {
     gap: 30px;
   }

   .Value-card1 {
     min-height: auto;
   }

   .Value-card1 img {
     height: auto;
   }
 }

 @media (max-width: 768px) {
   .Value-text h2 {
     font-size: 26px;
   }

   .Value-text p {
     font-size: 16px;
   }

   .Value-card1 h3 {
     font-size: 22px;
   }

   .Value-card1 p {
     font-size: 16px;
   }
 }

 @media (max-width: 480px) {
   .Value {
     padding: 60px 15px 40px;
   }

   .Value-text {
     padding: 30px;
   }

   .Value-text h2 {
     font-size: 24px;
     line-height: 30px;
   }

   .Value-text p {
     font-size: 15px;
   }

   .Value-gd {
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   .Value-card1 {
     width: 100%;
     max-width: 90%;
     padding: 15px;
   }

   .Value-card1 img {
     max-width: 100%;
     height: auto;
   }

   .Value-card1 h3 {
     font-size: 20px;
   }

   .Value-card1 p {
     font-size: 14px;
     line-height: 22px;
   }
 }

 /* section 5 */

 .ensure {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 100px;
   flex-wrap: wrap;
   margin-top: 40px;
   padding-top: 100px;
   padding-bottom: 100px;

 }

 .ensure h1 {
   font-weight: 400;
   font-style: normal;
   margin-top: 40px;
 }

 .ensure-text ul {
   margin-top: 30px;
   padding-left: 20px;

 }

 .ensure-text li {
   margin-top: 20px;
   line-height: 24px;
   font-size: 18px;
 }

 .ensure-img img {
   width: 100%;
   max-width: 550px;
 }



 .ensure-text {
   width: 40%
 }




 @media screen and (max-width:1026px) {
   .ensure {
     flex-direction: column-reverse;
     padding-top: 20px;
   }

   .ensure-text {
     width: 95%
   }
 }

 @media screen and (max-width:768px) {
   .ensure {
     padding-inline-start: 20px;
     padding-inline-end: 20px;
   }
 }

 /* section 5 */

 .real-story {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 100px;
   flex-wrap: wrap;
   margin-top: 40px;
   padding-top: 100px;
   padding-bottom: 100px;
  background-color: rgb(245, 250, 255);
 }


 .story-text h1 {
   font-weight: 400;
   font-style: normal;
   margin-top: 40px;
 }

 .story-text p {
   font-size: 18px;
   margin-top: 30px;
   line-height: 25px;
   padding: 10px;
 }


 .story-img img {
   width: 100%;
   padding: 20px;
 }

 .story-text {
   width: 35%
 }

 @media screen and (max-width:950px) {
   .story-text {
     width: 95%
   }

   .real-story {
     padding-top: 10px;
   }
 }


 /* section-6 */

 .ensure-text p {
   font-size: 18px;
   margin-top: 30px;
   line-height: 25px;
 }















 /* section-7 */


 .sn-support-section {
   max-width: 1200px;
   margin: 40px auto;
   padding: 20px;
   background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .sn-support-heading {
   text-align: center;
   margin-bottom: 40px;
   position: relative;
 }

 .sn-support-heading h1 {
   font-size: 36px;
   font-weight: 700;
   color: #2c3e50;
   display: inline-block;
   position: relative;
 }

 .sn-support-heading h1:after {
   content: '';
   position: absolute;
   width: 60%;
   height: 4px;
   background: linear-gradient(90deg, #b2f5d2, #b8fad9);
   bottom: -10px;
   left: 20%;
   border-radius: 2px;
 }

 /* Features Grid */
 .sn-feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
 }

 .sn-feature-card {
   background: white;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .sn-feature-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .sn-feature-icon {
   height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
   padding: 20px;
 }

 .sn-feature-icon img {
   max-height: 80px;
   width: auto;
   transition: transform 0.3s ease;
 }

 .sn-feature-card:hover .sn-feature-icon img {
   transform: scale(1.1);
 }

 .sn-feature-content {
   padding: 20px;
   text-align: center;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .sn-feature-content h3 {
   font-size: 20px;
   margin-bottom: 10px;
   color: #1b2d38;
 }

 .sn-feature-content p {
   font-size: 16px;
   color: #666;
 }

 /* Stats Section */
 .sn-stats-section {
   background: linear-gradient(135deg, #1976d2, #1976d2);
   padding: 30px;
   border-radius: 15px;
   text-align: center;
   margin-bottom: 30px;
   color: white;
 }

 .sn-stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
   margin-top: 20px;
 }

 .sn-stat-block {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   padding: 20px;
   transition: all 0.3s ease;
 }

 .sn-stat-block:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: scale(1.05);
 }

 .sn-stat-number {
   font-size: 36px;
   font-weight: 700;
   color: #1976d2;
   margin-top: 20px;
 }

 .sn-stat-label {
   font-size: 16px;
   opacity: 0.9;
 }

 /* CTA Section */
 .sn-cta-section {
   background: #fff;
   padding: 30px;
   border-radius: 15px;
   text-align: center;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .sn-cta-text {
   font-size: 18px;
   margin-bottom: 20px;
   color: #555;
   max-width: 800px;
   margin: 0 auto 20px;
 }

 .sn-cta-btn {
   display: inline-block;
   padding: 15px 30px;
   background-color: #1976d2;
   color: white;
   text-decoration: none;
   border-radius: 50px;
   font-weight: 600;
   font-size: 18px;
   transition: 0.5s;
   box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
 }

 .sn-cta-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
   background-color: transparent;
   color:#1976d2;
    border: 2px solid #1976d2;
 }

 /* Counter Animation */
 @keyframes sn-countUp {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .sn-animated {
   animation: sn-countUp 1s ease forwards;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .sn-support-heading h1 {
     font-size: 28px;
   }

   .sn-stats-grid {
     grid-template-columns: 1fr;
   }
 }

 /* section 7 */

 .Budget-0 {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 40px 20px;
 }

 .Budget-1 {
   max-width: 1200px;
   width: 100%;
   text-align: center;
 }

 .Budget-1 h2 {
   font-size: 32px;
   margin-bottom: 30px;
   line-height: 1.2;
   color: #272727;
 }

 .Budget-1 img {
   max-width: 100%;
   height: auto;
   margin: 40px 0;
   object-fit: contain;
   border-radius: 10px;
 }

 @media screen and (max-width: 1024px) {
   .Budget-1 h2 {
     font-size: 28px;
   }

   .Budget-1 img {
     margin: 30px 0;
   }
 }

 @media screen and (max-width: 768px) {
   .Budget-0 {
     padding: 20px 10px;
   }

   .Budget-1 h2 {
     font-size: 24px;
     margin-bottom: 20px;
   }

   .Budget-1 img {
     margin: 20px 0;
     width: 90%;
   }
 }

 @media screen and (max-width: 480px) {
   .Budget-1 h2 {
     font-size: 20px;
   }

   .Budget-1 img {
     margin: 15px 0;
   }
 }

 /* section 8 */

 .hire {
   width: 100%;
   padding: 40px;
   background-color: #f1f9f5;

 }

 .hire-txt {
   text-align: center;
   font-size: 45px;
   line-height: 24px;
   color: #272727;
 }

 .hire-card {
   display: grid;
   grid-template-columns: auto auto;
   gap: 20px;
   max-width: 1200px;
   margin: auto;
 }

 .cards {
   padding: 20px;
   border-radius: 10px;
   text-align: center;
 }

 .cards img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
 }

 .cards p {
   font-size: 18px;
   color: #6f6b80;
   margin-top: 15px;
   padding: 20px;
 }

 @media (max-width: 1024px) {
   .hire-txt {
     font-size: 28px;
   }

   .hire-card {
     grid-template-columns: auto auto;
     gap: 15px;
   }

   .cards {
     max-width: 600px;
     margin: auto;
   }
 }

 @media (max-width: 768px) {
   .hire {
     padding: 30px 15px;
   }

   .hire-txt {
     font-size: 26px;
   }

   .hire-card {
     grid-template-columns: auto auto;
   }

   .cards {
     max-width: 90%;
     margin: auto;
     padding: 15px;
   }

   .cards p {
     font-size: 16px;
     padding: 15px;
   }
 }

 @media (max-width: 480px) {
   .hire {
     padding: 20px;
   }

   .hire-txt {
     font-size: 24px;
     line-height: 34px;
   }

   .hire-card {
     grid-template-columns: auto;
     gap: 10px;
   }

   .cards {
     width: 100%;
     max-width: 95%;
     padding: 12px;
   }

   .cards p {
     font-size: 14px;
     padding: 10px;
   }
 }















 @media screen and (max-width:1550px) {
   h1 {
     font-size: 35px;
   }
 }


 @media screen and (max-width:768px) {
   h1 {
     font-size: 30px;
   }
 }

 @media screen and (max-width:425px) {
   h1 {
     font-size: 25px;
   }
 }

 .custom-list {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .custom-list li {
   display: grid;
   /* three columns: icon | label | description */
   grid-template-columns: min-content min-content 1fr;
   column-gap: .5rem;
   row-gap: .25rem;
   align-items: flex-start;
   margin-bottom: .75rem;
 }

 .custom-list .icon {
   /* keeps your checkmark nicely centered vertically */
   font-size: 1.1em;
 }

 .custom-list strong {
   /* never break the label itself */
   white-space: nowrap;
 }

 .custom-list .desc {
   /* this one will wrap only inside its column */
   /* no special rules needed */
 }


 .package-container {
   font-family: 'Arial', sans-serif;
   max-width: 1200px;
   margin: 40px auto;
   padding: 0 20px;
 }

 .package-header {
   text-align: center;
   margin-bottom: 40px;
 }

 .package-header h1 {
   color: #0066cc;
   font-size: 36px;
   margin-bottom: 10px;
   font-weight: 700;
 }

 .package-header p {
   color: #666;
   font-size: 18px;
 }

 .package-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 30px;
   margin-bottom: 40px;
 }

 .main-package {
   background: linear-gradient(135deg, #f8fbff 0%, #f0f6ff 100%);
   border-radius: 20px;
   padding: 40px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   border: 1px solid #e0eeff;
   position: relative;
   overflow: hidden;
 }

 .main-package::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   background: #0066cc;
 }

 .package-badge {
   display: inline-block;
   background: #0066cc;
   color: white;
   padding: 8px 20px;
   border-radius: 25px;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 20px;
 }

 .package-title {
   color: #0066cc;
   font-size: 32px;
   font-weight: 700;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .package-price {
   color: #0066cc;
   font-size: 28px;
   font-weight: 600;
 }

 .package-subtitle {
   font-size: 18px;
   color: #555;
   margin-bottom: 25px;
   font-weight: 500;
 }

 .features-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .feature-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 15px;
   padding-left: 35px;
   position: relative;
   color: #444;
   font-size: 16px;
   line-height: 1.6;
 }

 .feature-item::before {
   content: '✓';
   position: absolute;
   left: 0;
   top: 0;
   width: 24px;
   height: 24px;
   background: #0066cc;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: bold;
 }

 .highlight-section {
   background: white;
   border-radius: 15px;
   padding: 20px;
   margin: 25px 0;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .highlight-title {
   color: #0066cc;
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 15px;
   text-align: center;
 }

 .add-ons-section {
   background: white;
   border-radius: 20px;
   padding: 40px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   border: 1px solid #e8e8e8;
 }

 .add-ons-title {
   color: #0066cc;
   font-size: 28px;
   font-weight: 700;
   margin-bottom: 30px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .add-on-item {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 15px 0;
   border-bottom: 1px solid #eee;
   transition: all 0.3s ease;
 }

 .add-on-item:last-child {
   border-bottom: none;
 }

 .add-on-item:hover {
   background: #f8fbff;
   margin: 0 -20px;
   padding: 15px 20px;
   border-radius: 10px;
 }

 .add-on-text {
   flex: 1;
   font-size: 16px;
   color: #444;
   line-height: 1.5;
 }

 .add-on-price {
   font-weight: 600;
   color: #0066cc;
   font-size: 16px;
   white-space: nowrap;
   margin-left: 20px;
 }

 .terms-section {
   background: #f8fbff;
   border-radius: 20px;
   padding: 40px;
   margin-top: 40px;
   border: 1px solid #e0eeff;
 }

 .terms-title {
   color: #0066cc;
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .terms-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .term-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 15px;
   font-size: 15px;
   color: #555;
   line-height: 1.6;
   text-align: start;
 }

 .term-number {
   background: #0066cc;
   color: white;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
   margin-right: 15px;
   flex-shrink: 0;
 }

 /* Icons (optional - you can use actual icons if available) */
 .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 /* Animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .main-package,
 .add-ons-section,
 .terms-section {
   animation: fadeIn 0.6s ease-out;
 }

 .add-ons-section {
   animation-delay: 0.2s;
 }

 .terms-section {
   animation-delay: 0.4s;
 }

 /* Responsive Design */
 @media screen and (max-width: 768px) {
   .package-grid {
     grid-template-columns: 1fr;
     gap: 20px;
   }

   .package-header h1 {
     font-size: 28px;
   }

   .package-title {
     font-size: 24px;
   }

   .package-price {
     font-size: 22px;
   }

   .add-on-item:hover {
     margin: 0 -15px;
     padding: 15px 15px;
   }

   .main-package,
   .add-ons-section,
   .terms-section {
     padding: 25px;
   }

   .add-on-text {
     font-size: 14px;
   }

   .add-on-price {
     font-size: 14px;
   }
 }

 .container {
   max-width: 1200px;
   margin: 0 auto;
   overflow-x: auto;
 }

 h1 {
   text-align: center;
   font-size: 2.2rem;
   margin-bottom: 30px;
   color: #000;
 }

 .table-responsive {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }

 table {
   width: 100%;
   border-collapse: collapse;
   background-color: white;
   min-width: 800px;
 }

 th,
 td {
   border: 1px solid #ddd;
   padding: 12px 8px;
   text-align: center;
   vertical-align: middle;
 }

 thead th {
   background-color: #0066cc;
   color: white;
   font-weight: bold;
 }

 .header-row {
   background-color: #0066cc;
 }

 .header-row th {
   padding: 15px;
   font-size: 1rem;
 }

 .sub-header {
   background-color: #0066cc;
   color: white;
   font-weight: bold;
 }

 .service-feature {
   text-align: left;
   padding-left: 15px;
   font-size: 0.9rem;
 }

 .check {
   color: #0066cc;
   font-size: 1.2rem;
 }

 .cross {
   color: #000;
   font-size: 1.2rem;
 }

 .fees-row {
   background-color: #0066cc;
   color: white;
   font-weight: bold;
 }

 .fees-amount {
   color: #0066cc;
   font-weight: bold;
 }

 .additional-fees-row {
   background-color: #f0f0f0;
 }

 .additional-fees-label {
   text-align: left;
   padding-left: 15px;
   font-weight: bold;
 }

 @media screen and (max-width: 768px) {
   h1 {
     font-size: 1.8rem;
   }

   th,
   td {
     padding: 8px 4px;
     font-size: 0.9rem;
   }

   .service-feature {
     font-size: 0.85rem;
   }

   .header-row th {
     font-size: 0.9rem;
     padding: 10px 5px;
   }
 }

 @media screen and (max-width: 480px) {
   h1 {
     font-size: 1.5rem;
   }

   th,
   td {
     padding: 6px 2px;
     font-size: 0.8rem;
   }

   .service-feature {
     font-size: 0.8rem;
   }
 }