/* Shared color palette for the home page. */
 :root {
     --blue: #0000FF;
     /* Pure blue */
     --navy-blue: #000080;
     /* Navy blue */
     --white: #FFFFFF;
     /* White */
     --black: #000000;
     /* Black */
     --deep-dark-blue: #001F3F;
     /* Very dark blue */
     --cyan: #00FFFF;
     /* Cyan */
     --cream-warm: #fff8e7;
     --cream-dark: #f0e6d2;
     --cream-warm-dark: #e8d9b5;
 }

 html.home-page {
     font-size: 90%;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'poppins', sans-serif;
 }

 a {
     text-decoration: none;
     list-style: none;
 }

 body {
     background-color: var(--deep-dark-blue);
     justify-content: center;
     align-items: center;
     overflow-x: hidden;
 }

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

 /* Reusable call-to-action button styles. */
 .btn {
     display: inline-block;
     margin: 0 0 1rem;
     padding: 0.75rem 1.25rem;
     font-size: 1.2rem;
     font-weight: 700;
     line-height: 1.2;
     min-width: 150px;
     color: var(--white);
     background-color: var(--blue);
     border-radius: 8px;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }

 .btn:hover {
     background-color: var(--cyan);
     color: var(--black);
     border-color: var(--cyan);
     transform: translateY(-3px);
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
 }

 .about-left .btn {
     margin: 5px 10px 0;
     min-width: 160px;
     color: var(--white);
     background-color: var(--deep-dark-blue);
     border-color: var(--deep-dark-blue);
 }

 .about-left .btn:hover {
     color: var(--cyan);
     background-color: var(--black);
     border-color: var(--black);
 }

 .ready {
     margin-top: 0;
     padding: 10px 15px 20px 10px;
     color: var(--white);
     background-color: var(--deep-dark-blue);
     text-align: center;
 }

 .ready h3 {
     font-size: 2.5rem;
     font-weight: 500;
     margin-top: 30px;
 }

 .ready p {
     font-size: 1rem;
     margin-top: 10px;
     margin-bottom: 30px;
 }

 .ready .btn {
     margin: 30px auto 0;
     min-width: 190px;
     background-color: var(--deep-dark-blue);
 }

 .ready .btn:hover {
     color: var(--cyan);
     background-color: var(--black);
     border-color: var(--black);
 }

 /* Services introduction and responsive service-card grid. */

 .service-section {
     margin-top: 0;
     padding-top: 0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 248, 231, 0.9)), url('../IMG/bg img.jpg');
     background-position: center;
     background-size: cover;
     background-attachment: fixed;

 }

 .service-title {
     display: flex;
     margin: 10px 15px 20px;
     align-items: center;
     justify-content: center;
     position: relative;
     color: var(--deep-dark-blue);
     font-size: 3rem;
     font-weight: 500;

 }

 .service-title::before {
     content: "";
     display: block;
     width: 60px;
     height: 4px;
     background: linear-gradient(to right, var(--deep-dark-blue), var(--cyan));
     margin: auto 15px;

 }

 .service-content .bi {
     color: var(--deep-dark-blue);
     font-size: 2rem;
 }

 .service-content p {
     margin: 0 15px;
     padding: 0 15px;
     font-size: 1rem;
     font-weight: 400;
     position: relative;
     text-align: center;
 }

 .service-content .service-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
     padding: 40px 20px;
 }

 .service-content .service-card {
     height: 390px;
     padding: 20px;
     text-align: center;
     background-color: var(--white);
     border: 0;
     border-radius: 12px;
     box-shadow: 0 10px var(--cream-warm-dark);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .service-content .service-card img {
     display: block;
     width: 100%;
     height: 150px;
     margin: 12px auto;
     object-fit: cover;
     border: 0;
     border-radius: 8px;
 }

 .service-content .service-card:hover {
     transform: translateY(-20px);
 }

 /* About content uses two columns beneath a full-width heading. */
 .about-section {
     margin-top: 0;
     color: var(--deep-dark-blue);
     background-image: linear-gradient(rgba(255, 248, 231, 0.86), rgba(255, 255, 255, 0.9)), url('../IMG/circlebg.jpg');
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 60px;
     padding: 60px 40px;

 }

 .about-title {
     grid-column: 1 / -1;
     margin: 0;
     font-size: 3rem;
     font-weight: 500;
     text-align: center;
     color: var(--deep-dark-blue);

 }

 .about-title::before {

     content: "";
     display: inline-block;
     width: 60px;
     height: 5px;
     background: linear-gradient(to right, var(--deep-dark-blue), var(--cyan));
     margin: 0 auto 15px;
     vertical-align: middle;
 }

 .about-left {
     min-width: 0;
 }

 .about-left h3 {
     font-size: 2.5rem;
     color: var(--deep-dark-blue);
     margin: 15px 0 25px;
 }

 .about-left p {
     line-height: 1.7;
     margin-bottom: 20px;
     color: var(--deep-dark-blue);
 }

 .about-right {
     display: flex;
     flex-direction: column;
     padding: 30px;
     gap: 20px;
 }

 .about-right h3 {
     color: var(--deep-dark-blue);
     margin-bottom: 10px;
 }

 .values-box,
 .vision-box {
     background-color: var(--cream-warm);
     padding: 25px;
     border-radius: 12px;
 }

 .values-box ul {
     list-style: none;
     padding: 0;
 }

 .values-box li {
     margin-bottom: 10px;
 }

 /* Fixed back-to-top control, shown by the main page script. */
 .back-to-top {
     position: fixed;
     right: 25px;
     bottom: 25px;
     z-index: 1000;
     display: none;
     width: 45px;
     height: 45px;
     border: 0;
     border-radius: 50%;
     background-color: var(--deep-dark-blue);
     color: var(--cyan);
     font-size: 1.4rem;
     cursor: pointer;
 }

 .back-to-top:hover {
     background-color: var(--white);
 }

 .back-to-top.show {
     display: block;
 }

 @media (max-width: 480px) {
     .back-to-top {
         right: 15px;
         bottom: 15px;
     }
 }

 /* back to top ends here  */

 /* Stack home-page content for tablet and phone widths. */

 @media (max-width: 768px) {
     .about-section {
         grid-template-columns: 1fr;
         gap: 25px;
         padding: 35px 20px;
     }

     .about-left h3 {
         font-size: 2rem;
     }

     .about-right {
         padding: 10px 0;
     }

     .service-title,
     .about-title {
         font-size: 2rem;
     }

     .service-content > p {
         text-align: justify;
     }

     .service-grid {
         grid-template-columns: 1fr;
         padding: 25px 15px;
     }

     .service-card {
         height: auto;
         min-height: 300px;
     }

 }

 @media (max-width: 480px) {

     .about-left h3 {
         font-size: 1.6rem;
     }

     .service-title,
     .about-title {
         font-size: 1.7rem;
     }

 }

 /* media query */