.colourmetrix{
    --who-for-margin-top: 1rem;
    --who-for-padding: 40px 0px 70px;
    --who-for-height: 35em;
    --who-for-scroll-margin-top: 40px;
    --section-description-font-size: 20px;
    --section-description-font-weight: 400;
    --section-title-margin-top:  24px;
    --scroll-cards-container-padding: 30px 0px;
    --scroll-cards-container-display: flex;
    --scroll-cards-container-width: max-content;
    --scroll-cards-container-animation: scroll-left 15s linear infinite;
    --scroll-cards-container-gap: 2.5em;
    --scroll-feature-description-color: #373636;
    --scroll-feature-card-width: 19em;
    --scroll-feature-card-height: 18em;
    --scroll-feature-card-transition: all 0.3s ease;
    --scroll-feature-card-flex: 0 0 300px;
    --scroll-feature-card-background: linear-gradient(0deg, #c7a3ff61 0%, #f4a89666 100%);
    --scroll-feature-description-color: #7f7f7f;
    --scroll-feature-card-box-shadow: inset 0px 1px 4px 0px #00000040;
    --scroll-feature-card-icon-fony-size: 26px;
    --scroll-feature-card-hover-color: transparent;
    --scroll-feature-card-hover-border: 1px solid lightgray;
    --scroll-feature-card-hover-background-color: #f2f2f2;
    --scroll-feature-card-hover-transform: translateY(-10px) scale(1.02);
    --scroll-feature-card-hover-box-shadow: inset 0px 1px 4px 0px #00000040;
    --scroll-feature-card-icon-padding: 16px;
    --scroll-feature-card-icon-color: #a30c5ead;
    --scroll-feature-card-icon-border: 2px solid #a30c5ead;
    --scroll-feature-title-color: #a30c5e;
    --scroll-feature-title-font-size: 1.1rem;
    --scroll-feature-description-font-size: 16px;
    --scroll-feature-title-font-weight: 500;
    --mobile-who-for-height: auto;
    --mobile-who-for-padding: 30px 10px 50px;
    --mobile-scroll-wrapper-padding-bottom: 10px;
    --mobile-scroll-feature-card-width: 85%;
    --mobile-scroll-feature-card-max-width: 240px;
    --mobile-scroll-feature-card-height: auto;
    --mobile-scroll-feature-card-padding: 20px 15px;
    --mobile-scroll-feature-card-margin-right: 12px;
    --mobile-scroll-feature-title-font-size: 1rem;
    --mobile-scroll-feature-description-font-size: 0.95rem;
    --mobile-scroll-cards-container-gap: 1.2em;
    --mobile-scroll-cards-container-padding: 20px 10px;
    --mobile-scroll-cards-container-animation: scroll-left 15s linear infinite; 
    --mobile-scroll-feature-title-font-size: 1rem;
    --mobile-font-size-scroll-feature-description: 0.95rem;
    --mobile-scroll-feature-card-icon-font-size: 24px;
    --mobile-scroll-feature-card-icon-padding: 12px;
    --mobile-scroll-feature-card-icon-margin-bottom: 8px;
    --mobile-scroll-feature-card-hover-transform: none;
    --mobile-scroll-feature-card-hover-background-color: #f8f8f8;
    --mobile-scroll-feature-card-center-highlight-transform: none;
    --mobile-scroll-feature-card-center-highlight-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    --mobile-scroll-cards-container-display: flex;
}

.flavandfrag,
.tredapi,
.keyintermediates,
.phormulations,
.spicemetrix,
.tradenutra,
.xipients{
    --who-for-padding: 10px 0px 40px;
    --who-for-height: 35em;
    --who-for-scroll-margin-top: 20px;
    --section-title-margin-top:  24px;
    --section-description-font-size: 20px;
    --section-description-font-weight: 400;
    --scroll-cards-container-padding: 40px 0px;
    --scroll-cards-container-display: flex;
    --scroll-cards-container-width: max-content;
    --scroll-cards-container-gap: 2.5em;
    --scroll-cards-container-animation: scroll-left 15s linear infinite;
    --scroll-feature-card-width: 19em;
    --scroll-feature-card-height: 18em;
    --scroll-feature-card-flex: 0 0 300px;
    --scroll-feature-card-transition: all 0.3s ease;
    --scroll-feature-card-background: white;
    --scroll-feature-description-color: #373636;
    --scroll-feature-card-box-shadow: 0px 1px 4px 0px #00000040;
    --scroll-feature-card-hover-color: white;
    --scroll-feature-card-hover-border: 1px solid #053763;
    --scroll-feature-card-hover-border-color: #053763;
    --scroll-feature-card-hover-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
    --scroll-feature-card-icon-padding: 15px;
    --scroll-feature-card-icon-color: #053763;
    --scroll-feature-card-icon-border: 2px solid #053763;
    --scroll-feature-card-icon-fony-size: 26px;
    --scroll-feature-title-color: #053763;
    --scroll-feature-title-font-size: 24px;
    --scroll-feature-description-font-size: 22px;
    --scroll-feature-title-font-weight: 600;
    --mobile-who-for-padding: 26px 40px;
    --mobile-who-for-height: auto;
    --mobile-section-description-font-size: 1rem;
    --mobile-section-description-margin: 0 auto 20px;
    --mobile-scroll-wrapper-padding: 0 1em;
    --mobile-scroll-feature-card-padding: 0.5em;
    --mobile-scroll-feature-card-scroll-snap-align: start;
    --mobile-scroll-feature-card-flex: 0 0 auto;
    --mobile-scroll-feature-card-width: 19em;
    --mobile-scroll-feature-card-height: 18em;
    --mobile-scroll-feature-card-margin-right: 16px;
    --mobile-scroll-feature-card-text-align: center;
    --mobile-scroll-feature-title-font-size: 1.2em;
    --mobile-scroll-feature-description-font-size: 1em;
    --mobile-scroll-cards-container-gap: 2.5em;
    --mobile-scroll-cards-container-padding: 40px 0px;
    --mobile-scroll-cards-container-animation: scroll-left 15s linear infinite;
    --mobile-scroll-feature-card-icon-font-size: 26px;
    --mobile-scroll-feature-card-icon-padding: 15px;
    --mobile-scroll-feature-card-icon-margin-bottom: 5px;
    --mobile-scroll-cards-container-display: flex;
}

.cosmitrade{
    --who-for-padding: 60px;
    --who-for-bg: #FFF2FA;
    --section-title-margin-top:  0px;
    --section-title-font-size: 2rem;
    --title-font-weight: 600;
    --title-background: #D30982;
    --section-description-font-size: 16px;
    --section-description-font-weight: 0;
    --section-description-margin: 20px auto 60px;
    --action-buttons-margin-top: 3rem;
    --free-trial-btn-background-color: #FFE8F6;
    --free-trial-btn-color: #D30982;
    --free-trial-btn-box-shadow: 0px 4px 4px 0px #00000040;
    --freetrail-demo-border-color: #D30982;
    --request-demo-btn-background-color: #D30982;
    --request-demo-btn-color: white;
    --request-demo-btn-box-shadow: 0px 4px 4px 0px #00000040;
    --request-demo-border-color: #D30982;
    --btn-gap: 15px;
    --mobile-who-for-padding: 30px;
    --mobile-title-font-size: 22px;
    --mobile-title-margin-top: 0px;
    --mobile-description-margin: 0 auto 20px;
   --mobile-action-btn-padding: 0px;
   --mobile-btn-gap: 15px;
   --mobile-freetrial-btn-padding: 10px 36px;
   --mobile-req-btn-padding: 10px 20px;
   --btn-margin: 0 10px 10px 0;
   --mobile-btn-justify-content: center;
}

.keyintermediates{
    --who-for-padding: 40px 0px 70px;
    --scroll-feature-card-background: #e1f1fd;
    --scroll-feature-title-font-size: 1.1rem;
    --scroll-feature-title-font-weight: 500;
    --scroll-feature-description-font-size: 16px;
    --scroll-feature-card-hover-background-color: #e1f1fd;
    --scroll-feature-card-icon-fony-size: 20px;
    --mobile-scroll-feature-card-icon-font-size: 20px;
    
}

.phormulations{
    --scroll-feature-card-background: #e1f1fd;
    --scroll-feature-card-hover-background-color: #e1f1fd;
    --scroll-feature-card-icon-fony-size: 20px;
    --mobile-scroll-feature-card-icon-font-size: 20px;
}

.spicemetrix{
    --scroll-feature-title-color: #0f4386;
    --scroll-feature-description-color: rgb(55, 54, 54);
    --action-buttons-section-three-margin: 0 6rem 3rem;
    --mobile-action-buttons-section-three-margin: 0px 1rem 1rem !important;
    --mobile-action-buttons-section-three-display: flex;
    --mobile-action-buttons-section-three-flex-wrap: wrap;
    --action-text-color: #024296;
    --action-text-font-size: 1.75rem;
}

.tradenutra{
    --who-for-height: 56em;
    --who-for-padding: 20px 0px 50px;
    --who-for-scroll-margin-top: 40px;
    --who-for-bg: linear-gradient(135deg,#edf7ed, #e4f5eb);
    --scroll-cards-container-display: grid;
    --scroll-cards-container-padding: 40px 0;
    --scroll-cards-container-width: auto;
    --scroll-cards-container-max-width: 1250px;
    --scroll-cards-container-gap: 3em;
    --scroll-cards-container-animation: none;
    --scroll-cards-container-grid-template-columns: repeat(2, 1fr);
    --scroll-cards-container-margin: 0 auto; 
    --scroll-cards-container-justify-items: center; 
    --scroll-feature-card-width: 32em;
    --scroll-feature-card-height: 14em;
    --scroll-feature-card-transition: transform 0.3s ease, box-shadow 0.3s ease;
    --scroll-feature-card-box-shadow: inset 0px 1px 4px 0px #00000040;
    --scroll-feature-card-icon-color: #2C6E49;
    --scroll-feature-card-icon-border: 1px solid #2C6E49;
    --scroll-feature-title-color: #2C6E49;
    --scroll-feature-description-font-size: 20px;
    --scroll-feature-card-hover-border-color: #2C6E49;
    --scroll-feature-card-hover-transform: translateY(-10px);
    --scroll-feature-card-hover-background-color: white;
    --action-buttons-section-three-margin: 0px;
    --mobile-scroll-cards-container-gap: 1em;
    --mobile-scroll-cards-container-padding: 20px 0;
    --mobile-scroll-cards-container-animation: none;
    --mobile-scroll-cards-container-display: flex;
    --mobile-scroll-cards-container-flex-direction: column;
    --mobile-scroll-feature-card-width: 80%;
    --mobile-scroll-feature-card-height: auto;
    --mobile-scroll-feature-card-padding: 1em;
    --mobile-scroll-feature-card-margin-right: 0px;
    --mobile-action-buttons-section-three-margin: 2rem 0 ;
    --mobile-action-buttons-section-three-display: flex;
    --mobile-action-buttons-section-three-flex-wrap: wrap;
    --mobile-title-margin-top: 30px;
    --action-text-color: #1d1d1d;
    --action-text-font-size: 1.4rem;
}

.xipients{
    --who-for-margin-top: 1rem;
    --who-for-padding: 40px 0px 20px;
    --scroll-cards-container-padding: 30px 0px;
    --scroll-feature-card-height: 16em;
    --scroll-feature-card-flex: 0 0 250px;
    --scroll-feature-card-background: linear-gradient(135deg, #1c64c654 0%, #63dbc638 100%);
    --scroll-feature-card-icon-padding: 16px;
    --scroll-feature-title-font-size: 1.1rem;
    --scroll-feature-title-font-weight: 500;
    --scroll-feature-description-font-size: 16px;
    --mobile-who-for-padding: 30px 10px 50px;
    --mobile-scroll-wrapper-padding: 0 0 10px 0;
    --mobile-scroll-cards-container-padding: 20px 10px;
    --mobile-scroll-cards-container-gap: 1.2em;
    --mobile-scroll-feature-card-width: 85%;
    --mobile-scroll-feature-card-max-width: 240px;
    --mobile-scroll-feature-card-height: auto;
    --mobile-scroll-feature-card-padding: 20px 15px;
    --mobile-scroll-feature-card-margin-right: 12px;
    --mobile-scroll-feature-card-width: auto;
    --mobile-scroll-feature-card-flex: 0 0 250px;
    --mobile-scroll-feature-card-icon-font-size: 24px;
    --mobile-scroll-feature-card-icon-padding: 12px;
    --mobile-scroll-feature-card-icon-margin-bottom: 8px;
    --mobile-scroll-feature-title-font-size: 1em;
    --mobile-scroll-feature-description-font-size: 0.95em;
    --scroll-feature-card-box-shadow: inset 0px 1px 4px 0px #00000040;
}

.who-for {
    font-family: Afacad;
    height: var(--who-for-height);
    margin-top: var(--who-for-margin-top);
    padding: var(--who-for-padding);
    border-radius: 8px;
    text-align: center;
    scroll-margin-top: var(--who-for-scroll-margin-top);
    background: var(--who-for-bg);
}
.who-for-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.who-for-image {
    flex: 1 1 100px;
    text-align: center;
}
.who-for-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    background: #FEF4F5;
    box-shadow: 0px 4px 4px 0px #00000040;
}
.why-cosmitrade-text {
    flex: 1 1 100px;
    text-align: left;
}
.why-cosmitrade-text p {
    font-size: 16px;
}
.features-list {
    list-style-type: disc;
    padding-left: 30px;
    margin: 20px 0;
}
.features-list li {
    color: #373636;
    line-height: 1.8;
    margin: 10px 0;
    font-size: 16px;
}
.scroll-wrapper {
    position: relative;
    width: 100%;
    scroll-behavior: smooth;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}
.scroll-cards-container {
    display: var(--scroll-cards-container-display);
    gap: var(--scroll-cards-container-gap);
    animation: var(--scroll-cards-container-animation);
    width: var(--scroll-cards-container-width);
    max-width:var(--scroll-cards-container-max-width) ;
    padding: var(--scroll-cards-container-padding);
    grid-template-columns: var(--scroll-cards-container-grid-template-columns);
    margin: var(--scroll-cards-container-margin); 
    justify-items: var(--scroll-cards-container-justify-items);
}
.scroll-feature-card {
    width: var(--scroll-feature-card-width);
    height: var(--scroll-feature-card-height);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    flex: var(--scroll-feature-card-flex);
    justify-content: center;
    text-align: center;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background: var(--scroll-feature-card-background);
    transition: var(--scroll-feature-card-transition);
    box-shadow:var(--scroll-feature-card-box-shadow);
    cursor: pointer;
    margin-right: 16px;
    scroll-snap-align: start;
}  
.scroll-feature-card:hover {
    color: var(--scroll-feature-card-hover-color);
    border: var(--scroll-feature-card-hover-border);
    background-color: var(--scroll-feature-card-hover-background-color);
    transform: var(--scroll-feature-card-hover-transform);
    box-shadow: var(--scroll-feature-card-hover-box-shadow);
    border-color: var(--scroll-feature-card-hover-border-color);
}  
.scroll-feature-card .icon {
    font-size: var(--scroll-feature-card-icon-fony-size);
    padding: var(--scroll-feature-card-icon-padding);
    border-radius: 8px;
    color: var(--scroll-feature-card-icon-color);
    border: var(--scroll-feature-card-icon-border);
    margin-bottom: 5px;
}  
.scroll-feature-card:hover .feature-title,
.scroll-feature-card:hover .feature-description {
    color: #fff;
}  
.scroll-feature-title {
    color: var(--scroll-feature-title-color);
    font-size: var(--scroll-feature-title-font-size);
    font-weight: var(--scroll-feature-title-font-weight);
    margin-top: 5px;
    margin-bottom: 2px;
}  
.scroll-feature-description {
    margin: 0px;
    color: var(--scroll-feature-description-color);
    font-size: var(--scroll-feature-description-font-size);
}
.scroll-wrapper:hover .scroll-cards-container {
    animation-play-state: paused;
}
.scroll-feature-card.center-highlight {
    background: #fff;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
    transform: scale(1.07);
    z-index: 2;
    transition: all 0.3s ease;
}
.who-for .section-title  {
    font-family: Afacad;
    margin-top: var(--section-title-margin-top) !important;
    margin-bottom: 0px;
    font-size: var(--section-title-font-size);
    font-weight: var(--title-font-weight);
    text-align: center;
    background: var(--title-background);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
}
.who-for .section-subtitle {
    font-family: Afacad;
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: var(--subtitle-font-size);
    font-weight: var(--subtitle-font-weight);
    color: var(--subtitle-color);
    text-align: center;
}
.who-for .section-description {
    color: var(--description-color);
    font-size: var(--section-description-font-size) ;
    font-weight: var(--section-description-font-weight) ;
    margin: var(--section-description-margin);
}     
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}
.action-buttons.section-three {
    display: flex;
    margin: var(--action-buttons-section-three-margin);
    justify-content: center;
    gap: 15px;
}
.who-for .btn, .action-buttons.section-three .btn {
  display: inline-block;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  margin: var(--btn-margin);
}
.who-for .action-buttons, .action-buttons.section-three .action-buttons  {
    gap: var(--btn-gap);
    padding: var(--action-btn-padding);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: var(--action-buttons-margin-top)!important;
}
.action-buttons.section-three .action-text {
    margin: 5px 10px 10px 0;
    color: var(--action-text-color);
    font-size: var(--action-text-font-size);
}
.who-for .free-trial-btn, .action-buttons.section-three .free-trial-btn {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 10px 60px;
    background-color: var(--free-trial-btn-background-color);
    color: var(--free-trial-btn-color);
    box-shadow:var(--free-trial-btn-box-shadow) ;
    border: 1px solid var(--freetrail-demo-border-color);
}
.who-for .request-demo-btn, .action-buttons.section-three .request-demo-btn {
    font-size: 1.1rem !important;
    font-weight: 500;
    padding: 10px 45px;
    background-color: var(--request-demo-btn-background-color);
    color: var(--request-demo-btn-color);
    border: 1px solid var(--request-demo-border-color);
    box-shadow: var(--request-demo-btn-box-shadow);
}
@media (max-width: 768px) {
    .who-for {
    height: var(--mobile-who-for-height);
    padding: var(--mobile-who-for-padding);
    }
    /* .who-for > .section-description{
        font-size: var(--mobile-section-description-font-size);
        margin: var(--mobile-section-description-margin);
    } */
    .scroll-wrapper {
    overflow-x: auto;
    padding-bottom: var(--mobile-scroll-wrapper-padding-bottom);
    padding: var(--mobile-scroll-wrapper-padding);
    }
    .scroll-cards-container {
        gap: var(--mobile-scroll-cards-container-gap);
        padding: var(--mobile-scroll-cards-container-padding);
        animation: var(--mobile-scroll-cards-container-animation); 
        display: var(--mobile-scroll-cards-container-display);
        flex-direction: var(--mobile-scroll-cards-container-flex-direction);
    }
    .scroll-feature-card {
        width: var(--mobile-scroll-feature-card-width);
        max-width: var(--mobile-scroll-feature-card-max-width);
        height: var(--mobile-scroll-feature-card-height);
        padding: var(--mobile-scroll-feature-card-padding) !important;
        margin-right: var(--mobile-scroll-feature-card-margin-right);
        scroll-snap-align: var(--mobile-scroll-feature-card-scroll-snap-align);
        flex: var(--mobile-scroll-feature-card-flex);
        text-align: var(--mobile-scroll-feature-card-text-align);
    }
    .scroll-feature-title {
        font-size: var(--mobile-scroll-feature-title-font-size);
    }
    .scroll-feature-description {
        font-size: var(--mobile-scroll-feature-description-font-size);
    }
    .scroll-feature-card .icon {
        font-size: var(--mobile-scroll-feature-card-icon-font-size);
        padding: var(--mobile-scroll-feature-card-icon-padding);
        margin-bottom: var(--mobile-scroll-feature-card-icon-margin-bottom);
    }
    .scroll-feature-card:hover {
        transform: var(--mobile-scroll-feature-card-hover-transform);
        background-color: var(--mobile-scroll-feature-card-hover-background-color);
    }
    .scroll-feature-card.center-highlight {
        transform: var(--mobile-scroll-feature-card-center-highlight-transform);
        box-shadow: var(--mobile-scroll-feature-card-center-highlight-box-shadow);
    }
    .action-buttons.section-three {
    margin: var(--mobile-action-buttons-section-three-margin);
    justify-content: center;
    padding: 0px;
    display: var(--mobile-action-buttons-section-three-display);
    flex-wrap: var(--mobile-action-buttons-section-three-flex-wrap);
    }
    .who-for .section-title {
        font-size: var(--mobile-title-font-size);
        margin-top: var(--mobile-title-margin-top) !important;
    }
    .who-for .section-subtitle {
        font-size: var(--mobile-sub-title-font-size);
        margin-bottom: var(--mobile-sub-title-margin-bottom);
        font-weight: var(--mobile-sub-title-font-weight);
    }
    .who-for .section-description{
        font-size: var(--mobile-description-font-size);
        padding: var(--mobile-description-padding);
        margin: var(--mobile-description-margin) !important;
    }
    .who-for  .btn,.action-buttons.section-three .btn{
      width: var(--mobile-btn-width);
      text-align: center;
      font-size: var(--mobile-btn-font-size);
    }
    .who-for .free-trial-btn, .action-buttons.section-three .free-trial-btn{
      padding: var(--mobile-freetrial-btn-padding);
    }
    .who-for .request-demo-btn, .action-buttons.section-three .request-demo-btn{
      padding: var(--mobile-req-btn-padding);
    }
    .who-for .action-buttons, .action-buttons.section-three .action-buttons {
        padding: var(--mobile-action-btn-padding);
        font-size: var(--mobile-btn-font-size);
        margin: var(--mobile-btn-margin);
        justify-content: var(--mobile-btn-justify-content);
        gap: var(--mobile-btn-gap);
    }
    .action-buttons.section-three .action-text {
        font-size: 18px;
        margin: 10px;
        text-align: center;
    }
    .who-for-content{
        display: block;
        padding: 0px;
    }
    .who-for-image img{
        max-width: 350px;
    }
}