body {

    background-color: #f1e4ff;

    font-family: 'Segoe UI', sans-serif;

    color: #333;

    overflow-x: hidden;

}

.home-carousel .carousel-inner {

    height: 90vh;

}



.carousel-items {

    height: 100%;

    background-color: #f1e4ff;

    /* need to change the carousel image*/

}



.scrolling-container {

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    box-sizing: border-box;

    user-select: none;

    padding: 1rem 0;

}



.scrolling-text {

    display: inline-block;

    font-weight: 700;

    font-size: 2rem;

    color: #5137FF;

    letter-spacing: 0.15em;

    /* Repeat text multiple times */

    white-space: nowrap;

    animation: scroll-left 40s linear infinite;

}



/* Keyframes to scroll from 0 to full width negative (approximate) */

@keyframes scroll-left {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



/* diamond css  */

.diamond-box .section-title {

    background-color: #dfe6ff;

    color: #5b5bd6;

    display: inline-block;

    padding: 6px 18px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 12px;

}



.main-title {

    font-size: 1.5rem;

    font-weight: bold;

}



.highlight {

    color: #5137FF;

}



.flip-card {

    perspective: 1000px;

    height: 250px;

}



.flip-card-inner {

    transition: transform 0.6s ease;

    transform-style: preserve-3d;

    position: relative;

    height: 100%;

}



.flip-card:hover .flip-card-inner {

    transform: rotateY(180deg);

}



.flip-card-front,

.flip-card-back {

    position: absolute;

    width: 100%;

    height: 100%;

    border-top: 3px solid #5137FF;

    border-bottom: 3px solid #5137FF;

    border-left: none;

    border-right: none;

    border-radius: 16px;

    backface-visibility: hidden;

    background: #fff;

    padding: 1rem;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);

}



.flip-card-back {

    transform: rotateY(180deg);

    background-color: #5137FF;

    color: white;

}



.icon-box {

    width: 50px;

    height: 50px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    font-size: 1.5rem;

    color: white;

}



.green {

    background-color: #3ccf91;

}



.purple {

    background-color: #b298dc;

}



.yellow {

    background-color: #f7c948;

}



.pink {

    background-color: #f48fb1;

}



.feature-text {

    font-weight: 600;

    font-size: 1rem;

    color: #1f1f1f;

}



.flip-card-back p {

    font-size: 0.9rem;

    line-height: 1.4;

}



/* about box  */

.feature-image {

    border-radius: 10px;

    width: 90%;

    height: auto;

    object-fit: cover;

}



.badge-custom {

    background: white;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    transform: rotate(-10deg);

    font-weight: bold;

    color: #e63946;

}



.section-title {

    font-weight: 700;

    font-size: 2.5rem;

}



.feature-box {

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

    padding: 1.5rem;

    margin-bottom: 1rem;

}



/* product-showcase  */

.gradient-header {

    background: linear-gradient(90deg, #5137FF, #3CD3FF);

    color: #fff;

    padding: 60px 20px;

    text-align: center;

}



.gradient-header h2 {

    font-weight: 700;

    font-size: 2rem;

}



.email-form {

    max-width: 400px;

    margin: 20px auto 0;

}



.email-form input {

    border: none;

    border-bottom: 1px solid #fff;

    background: transparent;

    color: #fff;

    width: 75%;

    padding: 6px;

}



.email-form input::placeholder {

    color: #ddd;

}



.email-form button {

    background: transparent;

    border: none;

    color: #fff;

    font-weight: 600;

}



.showcase-section {

    overflow: hidden;

    padding: 40px 0;

    background: #f9f9f9;

}



.scroll-wrapper {

    width: 100%;

    overflow: hidden;

    position: relative;

}



.scroll-container {

    display: inline-block;

    white-space: nowrap;

    animation: scrollX 60s linear infinite;

}



.scroll-container.reverse {

    animation: scrollXReverse 60s linear infinite;

}



.scroll-img {

    width: 300px;

    height: 300px;

    margin-right: 20px;

    object-fit: cover;

    border-radius: 12px;

    display: inline-block;

}



@keyframes scrollX {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



@keyframes scrollXReverse {

    0% {

        transform: translateX(-50%);

    }



    100% {

        transform: translateX(0);

    }

}





/* product section  */

.products,

.diamond-box {

    /* height: 100vh; */

    margin: 0;

    /* Radial gradient background */

    background: radial-gradient(circle 300px at right, #e4c8ff, #f0faff);

}



.feature-badge {

    background-color: #e9edff;

    color: #5137FF;

    font-weight: bold;

    padding: 0.5rem 1.5rem;

    border-radius: 2rem;

    display: inline-block;

}



.filter-btn {

    border: none;

    padding: 0.5rem 1.2rem;

    margin-right: 1rem;

    border-radius: 0.75rem;

    background-color: transparent;

    color: black;

}



.filter-btn.active {

    background-color: #5137FF;

    color: white;

}



.product-card {

    /* background-color: #edf3ff; */

    border: none;

    border-radius: 15px;

    transition: all 0.3s ease-in-out;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.product-card:hover {

    background-color: #fff;

    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);

    transform: translateY(-5px);

}



.product-image {

    height: 200px;

    background-color: #e8f0fe;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.cart-btn {

    position: absolute;

    bottom: 10px;

    right: 10px;

    background-color: #b38bfa;

    color: white;

    border: none;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

    font-size: 18px;

}



.product-card:hover .cart-btn {

    opacity: 1;

}



.product-name {

    font-weight: 600;

    margin-top: 15px;

    margin-bottom: 5px;

}



.product-price {

    color: #5137FF;

    font-weight: 500;

}



.stars {

    color: #5137FF;

    margin-top: 10px;

}



/* steps */

.steps {

    min-height: 70vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



.step-number {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: linear-gradient(45deg, #6d8af0, #9564d4, #d15ea8);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: bold;

    font-size: 1.1rem;

    margin-bottom: 10px;

}



.step-number.hoverable {

    background: #fff;

    color: #000;

    border: 2px solid #ddd;

    transition: all 0.4s ease;

}



.step-number.hoverable:hover {

    background: linear-gradient(45deg, #6d8af0, #9564d4, #d15ea8);

    color: white;

    border: none;

}



.step-line {

    border-left: 2px solid #ddd;

    margin: 0 auto;

}



.step-label {

    transform: rotate(-10deg);

    background-color: white;

    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);

    font-weight: bold;

    color: #fc4a1a;

    padding: 5px 10px;

}



.custom-img-wrapper {

    position: relative;

    text-align: center;

}



.custom-img-wrapper img {

    border-radius: 100%;

    max-width: 100%;

}



.step-text h5 {

    font-weight: 700;

    color: #121063;

}



.step-text p {

    color: #555;

    font-size: 0.9rem;

}



/* testimonals */

.testimonial-section {

    background: url('assets/maptestimonalbg.png') no-repeat center center;

    text-align: center;

    padding: 60px 20px;

    position: relative;

}



.testimonial-tag {

    background-color: #e0dfff;

    color: #5137FF;

    font-size: 0.8rem;

    font-weight: 600;

    border-radius: 20px;

    padding: 4px 12px;

    display: inline-block;

    margin-bottom: 15px;

}



.testimonial-title {

    font-weight: 700;

    font-size: 2rem;

}



.testimonial-title span {

    color: #5137FF;

}



.carousel-item {

    min-height: 200px;

}



.testimonial-quote {

    font-size: 1.2rem;

    max-width: 800px;

    margin: 20px auto;

}



.testimonial-profile img {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    margin-bottom: 10px;

}



.testimonial-profile h5 {

    font-weight: 600;

    margin-bottom: 0;

}



.testimonial-profile p {

    font-size: 0.9rem;

    color: gray;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

    background-color: #5137FF;

    border-radius: 50%;

    padding: 5px;

}



.product-image {

    position: relative;

    height: 200px;

    overflow: hidden;

    border-radius: 8px;

    background-color: #f6f6f6;

    display: flex;

    align-items: center;

    justify-content: center;

}



.product-img {

    max-height: 100%;

    max-width: 100%;

    object-fit: cover;

    /* or 'contain' depending on your need */

}



.cart-btn {

    position: absolute;

    bottom: 10px;

    right: 10px;

    background-color: #5137FF;

    color: white;

    border: none;

    border-radius: 50%;

    padding: 6px 8px;

    font-size: 16px;

    cursor: pointer;

}



#mainCarousel img {

    height: 100vh;

    object-fit: cover;

}



/* about page css  */

    .intro,

    .hero {

      background: radial-gradient(circle 300px at right, #e4c8ff, #f0faff);

    }



    .feature-badge {

      background-color: #dcdcff;

      color: #6c63ff;

      font-size: 12px;

      font-weight: 600;

      padding: 5px 12px;

      border-radius: 20px;

      display: inline-block;

      margin-bottom: 10px;

    }



    .highlight-text {

      color: #5b4dff;

    }



    .exp-number {

      font-size: 48px;

      font-weight: 800;

      color: #5b4dff;

    }



    .img-rounded {

      border-radius: 15px;

    }



    /* image layout fix */

    .image-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 15px;

      align-items: start;

    }



    .image-grid img {

      border-radius: 15px;

      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    }



    .image-grid .right-img {

      margin-top: 60px;

      /* shifts the second image down */

    }



    .icon {

      font-size: 22px;

      color: #5b4dff;

    }



    .experience {

      margin-top: -70px;

    }



    .hero {

      padding: 80px 20px;

      text-align: center;

    }



    .hero h1 {

      font-size: 3rem;

      font-weight: bold;

      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

    }





    .intro {

      opacity: 0;

      transform: translateX(220px);

      transition: opacity 1s ease-out, transform 1s ease-out;

    }



    .active {

      opacity: 1;

      transform: translateY(0);

    }



    .advantage {

      opacity: 0;

      transform: translateY(220px);

      transition: opacity 1s ease-out, transform 1s ease-out;

    }



    .active {

      opacity: 1;

      transform: translateY(0);

    }



    .img-fluid {

      border: 5px solid #7c4dff;

      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    }



    .hero p {

      font-size: 1.2rem;

      max-width: 700px;

      margin: 20px auto;

    }



    .section-title {

      font-size: 2rem;

      font-weight: 600;

      margin-bottom: 40px;

      text-align: center;

    }



    .value .card {

      border: none;

      border-radius: 16px;

      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);

      transition: transform 0.3s, box-shadow 0.3s;

    }



    .value .card:hover {

      transform: scale(1.05);

      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

    }



    .value .card-body {

      background: radial-gradient(circle 900px at right, #f0faff, #e4c8ff);

      padding: 2rem;

    }



    .value .core-icon {

      font-size: 2rem;

      margin-bottom: 10px;

      color: #7c4dff;

    }



    /* product showcase  */

    .product-showcase {

      background-color: #ECF2FF;

    }



    .product-showcase .nextprev {

      background-color: #5137FF;

      color: white;

    }



    .product-showcase span,

    h2 {

      color: #5137FF;

    }



    .product-showcase .product-cards {

      opacity: 0;

      transform: translateY(220px);

      transition: opacity 1s ease-out, transform 1s ease-out;

    }



    .product-showcase .active {

      opacity: 1;

      transform: translateY(0);

    }



    .product-showcase .view-products-btn {

      background: #fff;

      border: 1px solid #ddd;

      padding: 10px 28px;

      font-size: 1rem;

      font-weight: 600;

      border-radius: 50px;

      color: #000;

      transition: all 0.3s ease;

      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    }



    .product-showcase .view-products-btn:hover {

      background: #5137FF;

      /* same purple as heading */

      color: #fff;

      border-color: #5137FF;

    }



    /* testimonals */

    .testimonial-section {

      background: url('assets/maptestimonalbg.png') no-repeat center center;

      text-align: center;

      padding: 60px 20px;

      position: relative;

    }



    .testimonial-tag {

      background-color: #e0dfff;

      color: #5137FF;

      font-size: 0.8rem;

      font-weight: 600;

      border-radius: 20px;

      padding: 4px 12px;

      display: inline-block;

      margin-bottom: 15px;

    }



    .testimonial-title {

      font-weight: 700;

      font-size: 2rem;

    }



    .testimonial-title span {

      color: #5137FF;

    }



    .carousel-item {

      min-height: 200px;

    }



    .testimonial-quote {

      font-size: 1.2rem;

      max-width: 800px;

      margin: 20px auto;

    }



    .testimonial-profile img {

      width: 60px;

      height: 60px;

      border-radius: 50%;

      margin-bottom: 10px;

    }



    .testimonial-profile h5 {

      font-weight: 600;

      margin-bottom: 0;

    }



    .testimonial-profile p {

      font-size: 0.9rem;

      color: gray;

    }



    .carousel-control-prev-icon,

    .carousel-control-next-icon {

      background-color: #5137FF;

      border-radius: 50%;

      padding: 5px;

    }



    .animate-stat {

      opacity: 0;

      transform: translateY(30px);

      transition: all 0.6s ease-out;

    }



    .animate-stat.visible {

      opacity: 1;

      transform: translateY(0);

    }



    .advantage .section-title {

      font-size: 2rem;

      font-weight: bold;

      text-align: center;

      margin: 30px 0;

      color: #5137FF;

    }



    .advantage .feature-text h5 {

      font-weight: bold;

    }



    .advantage .img-box {

      display: flex;

      justify-content: center;

      gap: 15px;

    }



    .advantage .img-box img {

      max-width: 100%;

      border-radius: 8px;

    }



    .advantage .cta-btn {

      display: flex;

      justify-content: center;

      margin-top: 30px;

    }



    .advantage .cta-btn a {

      background-color: black;

      color: white;

      padding: 10px 20px;

      text-decoration: none;

      border-radius: 20px;

      font-weight: bold;

    }



    .advantage .cta-btn :hover {

      background: #5137FF;

      /* same purple as heading */

      color: #fff;

      border-color: #5137FF;

    }