.workflow-compatible-section {
padding: 80px 0;
}
.workflow-compatible-subtitle {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 4px;
}
.workflow-compatible-title {
background: linear-gradient(180deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 18px;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 45px; /* 125% */
}
.workflow-compatible-description {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 30px;
}
.workflow-compatible-card {
display: flex;
align-items: center;
gap: 14px;
border-radius: 16px;
border: 0.998px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1.247px 3.741px 0 rgba(0, 0, 0, 0.10), 0 1.247px 2.494px -1.247px rgba(0, 0, 0, 0.10);
padding: 18px 18px;
height: 100%;
transition: all 0.3s ease;
}
.workflow-compatible-card:hover {
transform: translateY(-4px);
}
.workflow-compatible-card-icon {
flex-shrink: 0;
}
.workflow-compatible-card-icon img {
width: 110px;
height: 110px;
object-fit: contain;
}
.workflow-compatible-card-content h4 {
font-size: 15px;
font-weight: 600;
color: #3d3d3d;
margin-bottom: 5px;
line-height: 1.5;
}
.workflow-compatible-card-content p {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 32px */
margin: 0;
}
.workflow-compatible-note {
border-radius: 32px;
border: 0.8px solid #F3F4F6;
background: linear-gradient(135deg, #F9FAFB 0%, #FFF 100%), #FFF;
/* M3/Elevation Light/1 */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
padding: 24px 28px;
margin-top: 30px;
}
.workflow-compatible-note h5 {
background: var(--frre, linear-gradient(90deg, #141B5D 0%, #9810FA 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 40px */
margin-bottom: 10px;
}
.workflow-compatible-note p {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%;
margin-bottom: 0;
}
.workflow-compatible-image-wrapper {
position: relative;
height: 100%;
}
.workflow-compatible-image {
width: 100%;
border-radius: 26px;
object-fit: cover;
display: block;
}
/* =========================
Responsive Design
========================= */
@media (max-width: 1199px) {
.workflow-compatible-title {
font-size: 38px;
}
}
@media (max-width: 991px) {
.workflow-compatible-section {
text-align: center;
}
.workflow-compatible-content {
max-width: 100%;
}
.workflow-compatible-description {
margin-left: auto;
margin-right: auto;
}
.workflow-compatible-card {
text-align: left;
}
.workflow-compatible-image-wrapper {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.workflow-compatible-subtitle {
font-size: 24px;
}
.workflow-compatible-title {
font-size: 32px;
}
.workflow-compatible-description {
font-size: 15px;
line-height: 1.7;
}
.workflow-compatible-card {
padding: 16px;
}
.workflow-compatible-card-content h4 {
font-size: 14px;
}
.workflow-compatible-card-content p {
font-size: 13px;
}
.workflow-compatible-note {
padding: 20px;
border-radius: 20px;
}
}
@media (max-width: 575px) {
.workflow-compatible-title {
font-size: 28px;
}
.workflow-compatible-subtitle {
font-size: 22px;
}
.workflow-compatible-card {
flex-direction: row;
align-items: center;
}
.workflow-compatible-card-icon img {
width: 52px;
}
}
.sleep-practice-section {
padding: 80px 0;
}
.sleep-practice-header {
margin-bottom: 40px;
}
.sleep-practice-subtitle {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 10px;
}
.sleep-practice-title {
background: linear-gradient(180deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 45px; /* 125% */
margin-bottom: 18px;
}
.sleep-practice-description {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 24px;
}
.sleep-practice-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border-radius: 7.996px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 1.999px 7.996px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 2.999px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(5.997364044189453px);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration: none;
transition: all 0.3s ease;
}
.sleep-practice-btn:hover {
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
color: #ffffff;
}
.sleep-practice-card,
.sleep-practice-image-card {
border-radius: 32px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding: 28px;
height: 100%;
transition: all 0.3s ease;
}
.sleep-practice-card:hover,
.sleep-practice-image-card:hover {
transform: translateY(-5px);
}
.sleep-practice-card-title {
color: #060B13;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 165% */
margin-bottom: 18px;
}
.sleep-practice-card-text {
color: #4A5565;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 32px */
margin-bottom: 0;
}
.sleep-practice-image-card {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 100%;
}
.sleep-practice-image {
width: 100%;
border-radius: 18px;
object-fit: cover;
}
/* ===========================
Responsive Design
=========================== */
@media (max-width: 1199px) {
.sleep-practice-title {
font-size: 42px;
}
}
@media (max-width: 991px) {
.sleep-practice-header {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sleep-practice-description {
margin-left: auto;
margin-right: auto;
}
.sleep-practice-title {
font-size: 38px;
}
}
@media (max-width: 767px) {
.sleep-practice-section {
padding-top: 70px;
padding-bottom: 70px;
}
.sleep-practice-title {
font-size: 32px;
}
.sleep-practice-description {
font-size: 15px;
line-height: 1.8;
}
.sleep-practice-card,
.sleep-practice-image-card {
padding: 24px;
border-radius: 20px;
}
.sleep-practice-card-title {
font-size: 17px;
}
}
@media (max-width: 575px) {
.sleep-practice-title {
font-size: 28px;
}
.sleep-practice-subtitle {
font-size: 16px;
}
.sleep-practice-btn {
width: 100%;
}
.sleep-practice-card,
.sleep-practice-image-card {
padding: 22px;
}
}
.clinical-science-section {
padding: 80px 0;
}
.clinical-science-card {
border-radius: 32px;
border: 0.8px solid #F1F5F9;
background: #FFF;
/* M3/Elevation Light/1 */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
padding: 48px;
height: 100%;
}
.clinical-science-subtitle {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 6px;
}
.clinical-science-title {
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 45px; /* 125% */
background: linear-gradient(180deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 22px;
}
.clinical-science-description {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 42px;
}
.clinical-science-features {
margin-top: 10px;
}
.clinical-science-feature-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
.clinical-science-feature-number {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 16px;
border: 0.8px solid #F1F5F9;
background: #F8FAFC;
color: #141B5D;
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 20px; /* 142.857% */
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
}
.clinical-science-feature-content h4 {
color: #141B5D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 155.556% */
margin-bottom: 12px;
}
.clinical-science-feature-content p {
color: #62748E;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
margin-bottom: 0;
}
.clinical-science-image-card {
border-radius: 28px;
overflow: hidden;
}
.clinical-science-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.clinical-science-recognition-card {
border-radius: 32px;
border: 0.8px solid #F3F4F6;
background: linear-gradient(135deg, #F9FAFB 0%, #FFF 100%), #FFF;
/* M3/Elevation Light/1 */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
padding: 34px 32px;
}
.clinical-science-recognition-card h4 {
color: #141B5D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 155.556% */
margin-bottom: 14px;
}
.clinical-science-recognition-card p {
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
margin-bottom: 0;
}
/* ==========================
Responsive Design
========================== */
@media (max-width: 1199px) {
.clinical-science-title {
font-size: 42px;
}
.clinical-science-card {
padding: 40px;
}
}
@media (max-width: 991px) {
.clinical-science-card {
padding: 36px;
}
.clinical-science-title {
font-size: 38px;
}
.clinical-science-description {
max-width: 100%;
}
}
@media (max-width: 767px) {
.clinical-science-card {
padding: 28px;
border-radius: 22px;
}
.clinical-science-title {
font-size: 32px;
}
.clinical-science-description {
font-size: 15px;
line-height: 1.8;
margin-bottom: 32px;
}
.clinical-science-feature-content h4 {
font-size: 17px;
}
.clinical-science-recognition-card {
padding: 28px 24px;
}
}
@media (max-width: 575px) {
.clinical-science-title {
font-size: 28px;
}
.clinical-science-subtitle {
font-size: 16px;
}
.clinical-science-card {
padding: 24px 20px;
}
.clinical-science-feature-item {
gap: 12px;
}
.clinical-science-feature-content p {
line-height: 1.8;
}
}
.patient-benefits-section {
padding: 80px 0;
}
.patient-benefits-subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 10px;
}
.patient-benefits-title {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
margin-bottom: 22px;
}
.patient-benefits-description {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin: 0 auto 28px;
}
.patient-benefits-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7.996px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 1.999px 7.996px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 2.999px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(5.997364044189453px);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none;
padding: 12px 28px;
transition: all 0.3s ease;
}
.patient-benefits-btn:hover {
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
color: #ffffff;
}
.patient-benefits-item {
display: flex;
align-items: flex-start;
gap: 24px;
height: 100%;
}
.patient-benefits-image {
width: 100%;
object-fit: contain;
display: block;
}
.patient-benefits-content {
flex: 1;
}
.patient-benefits-tag {
display: inline-block;
color: #8F8F8F;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24.375px; /* 203.125% */
margin-bottom: 10px;
}
.patient-benefits-card-title {
color: #060B13;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 247.5% */
margin-bottom: 10px;
}
.patient-benefits-card-text {
color: #4A5565;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24.375px; /* 174.107% */
margin-bottom: 0;
}
/* =========================
Responsive Design
========================= */
@media (max-width: 1199px) {
.patient-benefits-title {
font-size: 42px;
}
}
@media (max-width: 991px) {
.patient-benefits-title {
font-size: 38px;
}
.patient-benefits-item {
gap: 20px;
}
}
@media (max-width: 767px) {
.patient-benefits-section {
padding-top: 70px;
padding-bottom: 70px;
}
.patient-benefits-title {
font-size: 32px;
}
.patient-benefits-description {
font-size: 15px;
line-height: 1.8;
}
.patient-benefits-item {
flex-direction: column;
}
.patient-benefits-image-box {
width: 100%;
min-width: 100%;
}
.patient-benefits-card-title {
font-size: 18px;
}
}
@media (max-width: 575px) {
.patient-benefits-title {
font-size: 28px;
}
.patient-benefits-subtitle {
font-size: 16px;
}
.patient-benefits-btn {
width: 100%;
}
.patient-benefits-card-text {
line-height: 1.8;
}
}
.acoustic-waveform-section {
padding: 80px 0;
}
.acoustic-waveform-info-card,
.acoustic-waveform-image-card,
.acoustic-waveform-specification-card {
border-radius: 40px;
border: 0.8px solid #F3F4F6;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}
.acoustic-waveform-info-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 52px;
}
.acoustic-waveform-title {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
margin-bottom: 24px;
}
.acoustic-waveform-description {
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin-bottom: 0;
}
.acoustic-waveform-image-card {
padding: 18px;
height: 100%;
}
.acoustic-waveform-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 22px;
display: block;
}
.acoustic-waveform-specification-card {
padding: 60px 40px;
}
.acoustic-waveform-spec-item {
position: relative;
padding: 0 28px;
min-height: 82px;
}
.acoustic-waveform-border-right::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 82px;
background: #d7d7d7;
}
.acoustic-waveform-spec-title {
color: #141B5D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 155.556% */
margin-bottom: 16px;
}
.acoustic-waveform-spec-text {
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
margin-bottom: 0;
}
.acoustic-waveform-bottom-space {
margin-top: 18px;
}
/* ==========================
Responsive Design
========================== */
@media (max-width: 1199px) {
.acoustic-waveform-title {
font-size: 40px;
}
.acoustic-waveform-info-card {
padding: 50px 40px;
}
}
@media (max-width: 991px) {
.acoustic-waveform-title {
font-size: 36px;
}
.acoustic-waveform-description {
max-width: 100%;
}
.acoustic-waveform-specification-card {
padding: 50px 28px;
}
.acoustic-waveform-spec-item {
padding: 0 20px;
}
.acoustic-waveform-border-right::after {
display: none;
}
}
@media (max-width: 767px) {
.acoustic-waveform-section {
padding-top: 70px;
padding-bottom: 70px;
}
.acoustic-waveform-info-card {
padding: 42px 28px;
border-radius: 24px;
}
.acoustic-waveform-image-card,
.acoustic-waveform-specification-card {
border-radius: 24px;
}
.acoustic-waveform-title {
font-size: 32px;
}
.acoustic-waveform-description {
font-size: 15px;
line-height: 1.8;
}
.acoustic-waveform-specification-card {
padding: 40px 22px;
}
.acoustic-waveform-spec-item {
padding: 0;
min-height: auto;
}
.acoustic-waveform-bottom-space {
margin-top: 0;
}
}
@media (max-width: 575px) {
.acoustic-waveform-title {
font-size: 28px;
}
.acoustic-waveform-info-card {
padding: 36px 22px;
}
.acoustic-waveform-spec-title {
font-size: 17px;
}
.acoustic-waveform-spec-text {
line-height: 1.8;
}
}
/* ============================= */
/* TESTIMONIAL SECTION STYLES   */
/* ============================= */
.testimonial-section{
padding:80px 0;
}
.testimonial-section .section-title{
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
}
.testimonial-section .section-title span{
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
}
.testimonial-section  .section-text
{
color: var(--Colors-Neutral-900, #4A4A4A);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
.testimonial-section .left-card{
background:#fff;
border-radius: 0 12px 12px 0;
padding:15px;
cursor:pointer;
transition:0.3s;
margin-bottom:15px;
display:flex;
align-items:center;
gap:12px;
border-left: 4px solid #fff;
}
.testimonial-section .left-card.active{
border-radius: 0 12px 12px 0;
border-left: 4px solid #A2A2A2;
background: #141B5D;
color:#fff;
}
.testimonial-section .left-card img{
width:45px;
height:45px;
border-radius:50%;
}
.testimonial-section .right-box{
padding:60px 40px;
border-radius: 24px;
background: #FFF;
box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
text-align:center;
position:relative;
max-width: 500px;
margin: auto;
}
.testimonial-section .quote-icon{
font-size:50px;
color:#7b2cff;
position:absolute;
top: -30px;
left:30px;
}
.testimonial-section .testimonial-item{
display:none;
animation:testimonialFade 0.4s ease;
}
.testimonial-section .testimonial-item.active{
display:block;
}
@keyframes testimonialFade{
from{opacity:0;}
to{opacity:1;}
}
.testimonial-section .card-content{
flex:1;
display:flex;
justify-content:space-between;
align-items:center;
}
.testimonial-section .card-text{
display:flex;
flex-direction:column;
}
.testimonial-section .card-text strong{
color: #141413;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 0.5rem;
}
.testimonial-section .card-text small{
color: #141413;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.testimonial-section .card-rating{
color: #141413;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.testimonial-section .left-card.active strong, .testimonial-section .left-card.active .card-rating, .testimonial-section .left-card.active small{
color:#fff;
}
/* Section Background */
.stats-section {
background: linear-gradient(90deg, #141B5D -18.06%, #9810FA 149.69%);
box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
padding: 80px 0;
}
/* Card Styling */
.stats-section .stat-card {
border-radius: 24px;
border: 0.8px solid #27272A;
background: #18181B;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
color: #ffffff;
padding: 40px 20px;
transition: all 0.3s ease;
height: 100%;
}
.stats-section .stat-card:hover {
transform: translateY(-8px);
}
.stats-section  h2 {
color: var(--Backgrounds-Primary, #FFF);
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 72px */
margin-bottom: 20px;
}
/* Typography */
.stats-section .stat-card h5 {
color: #FFF;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
margin-bottom: 5px;
}
.stats-section .stat-card p {
color: var(--Colors-Neutral-100, #FFF);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 28px */
margin-bottom: 0;
}
/* Responsive */
@media (max-width: 767px) {
.stats-section {
padding: 60px 0;
}
.stats-section .stat-card {
padding: 30px 20px;
}
.stats-section .stat-card h2 {
font-size: 32px;
}
}
/* ==========================================
AI Acoustic Section
========================================== */
.ai-acoustic-section {
padding: 80px 0;
}
.ai-acoustic-section .ai-acoustic-subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
letter-spacing: -1.92px;
margin-bottom: 10px;
}
.ai-acoustic-section .ai-acoustic-title {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1.92px;
margin-bottom: 18px;
}
.ai-acoustic-section .ai-acoustic-description {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
margin: 0 auto;
}
.ai-acoustic-section .ai-acoustic-step {
margin-top: 90px;
position: relative;
}
.ai-acoustic-section .ai-acoustic-content {
max-width: 420px;
margin: 0 auto;
}
.ai-acoustic-section .ai-acoustic-number {
display: block;
color: #99A1AF;
text-align: right;
font-size: 72px;
font-style: normal;
font-weight: 700;
line-height: 72px; /* 100% */
margin-bottom: 20px;
}
.ai-acoustic-section .ai-acoustic-step-title {
color: #060B13;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 39.6px; /* 165% */
margin-bottom: 18px;
text-align: right;
}
.ai-acoustic-section .ai-acoustic-step-description {
color: #4A5565;
text-align: right;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
margin-bottom: 0;
}
.ai-acoustic-section .ai-acoustic-image img {
max-width: 280px;
width: 100%;
height: auto;
object-fit: contain;
transition: all 0.4s ease;
}
.ai-acoustic-section .ai-acoustic-image img:hover {
transform: translateY(-6px);
}
/* ==========================================
Responsive
========================================== */
@media (max-width: 991px) {
.ai-acoustic-section .ai-acoustic-title {
font-size: 34px;
}
.ai-acoustic-section .ai-acoustic-step {
margin-top: 70px;
}
.ai-acoustic-section .ai-acoustic-number {
font-size: 58px;
}
.ai-acoustic-section .ai-acoustic-step-title {
font-size: 22px;
}
.ai-acoustic-section .ai-acoustic-content {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.ai-acoustic-section {
text-align: center;
}
.ai-acoustic-section .ai-acoustic-title {
font-size: 28px;
}
.ai-acoustic-section .ai-acoustic-description {
font-size: 15px;
}
.ai-acoustic-section .ai-acoustic-step {
margin-top: 60px;
}
.ai-acoustic-section .ai-acoustic-number {
font-size: 50px;
}
.ai-acoustic-section .ai-acoustic-step-title {
font-size: 20px;
}
.ai-acoustic-section .ai-acoustic-step-description {
font-size: 14px;
}
.ai-acoustic-section .ai-acoustic-image img {
max-width: 220px;
}
.ai-acoustic-section .ai-acoustic-content {
max-width: 100%;
margin-top: 25px;
}
}