:root {
     --primary-color: #31126b;
     --secondary-color: #832df8;
     --dark-color: #111827;
     --text-color: #6b7280;
     --bg-light: #f9fafb;
     --white-color: #ffffff;
     --border-radius: 24px;
     --transition: 0.3s ease;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: var(--bg-light);
     color: var(--dark-color);
 }

 img {
     max-width: 100%;
     display: block;
 }

 a {
     text-decoration: none;
 }

 /* home page css start */

 .section-padding {
     padding: 50px 0;
 }

 .section-title {
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     font-weight: 900;
     line-height: 1.1;
 }

 .section-text {
     color: var(--text-color);
     line-height: 1.9;
     max-width: 760px;
 }

 .custom-btn {
     background: var(--dark-color);
     color: var(--white-color);
     padding: 14px 32px;
     border-radius: 12px;
     font-weight: 600;
     transition: var(--transition);
     display: inline-block;
 }

 .custom-btn:hover {
     background: #000;
     color: #fff;
 }

 .hero-title span,
 .gradient-text {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .hero-image img,
 .easy-image img,
 .card img {
     border-radius: var(--border-radius);
 }

 .shadow-card {
     border-radius: var(--border-radius);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
 }

 .feature-box h4 {
     font-size: 1.25rem;
     font-weight: 700;
 }

 .feature-box p,
 .user-card p,
 .card p {
     color: var(--text-color);
     line-height: 1.8;
 }

 .user-icon img {
     width: 80px;
     height: 80px;
     object-fit: contain;
 }

 @media(max-width:991px) {

     /* home page css */
     .section-padding {
         padding: 80px 0;
     }
 }

 @media(max-width:576px) {

     /* home page css */
     .section-padding {
         padding: 70px 0;
     }

     .custom-btn {
         width: 100%;
     }
 }