
.transform-btn{
    padding: 15px 30px !important;
    border-radius: 10px;
}


.module-card {
  /* background-color:#f9fafb; */
  border-radius: 0px;
}
.module-card :hover {
  background-color: rgba(229, 231, 235, 1);
}

.module-card-title-text {
  font-weight: bold;
}

.transform {
    background: #f8f9fa;
    padding: 80px 0;
}

.transform .transform-description {
    font-size: 1.25rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 2rem;
}


.transform .benefit-item {
    display: flex
;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    font-size: 1rem;
    color: #333;
    /* background-color: rgba(103, 165, 200, 0.5); */
}

.transform .benefit-icon {
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #438eb9;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
}

.transform .transform-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
}

.transform-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.transform-content {
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
}

.transform .benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(67, 142, 185, 0.1);
}

/* Modules */

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}



.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}


.bg-\[\#438eb9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(67 142 185 / var(--tw-bg-opacity, 1));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
