@font-face {
    font-display: swap;
    font-family: 'Radio Canada Big';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/radio-canada-big-400-normal.woff') format('woff'),
        url('../fonts/radio-canada-big-400-normal.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Radio Canada Big';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/radio-canada-big-500-normal.woff') format('woff'),
        url('../fonts/radio-canada-big-500-normal.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Radio Canada Big';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/radio-canada-big-600-normal.woff') format('woff'),
        url('../fonts/radio-canada-big-600-normal.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Radio Canada Big';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/radio-canada-big-700-normal.woff') format('woff'),
        url('../fonts/radio-canada-big-700-normal.woff2') format('woff2');
}




:root {
    --font-radio-canada: "Radio Canada Big", sans-serif;
    --border-radius--xl: 40px;
    --border-radius--l: 32px;
    --border-radius--m: 20px;
    --border-radius--s: 12px;
    --color--primary-100: #FFFFFF;
    --color--primary-200: #B0AEB5;
    --color--primary-400: #4821AA;
    --color--primary-300: #5426C5;
    --color--primary-500:#3F11AF;
    --color--primary-800: #686868;
    --color--secondry: #121212;
    --color--title-bg-primary: #F3EEFF;
    --color--title-bg-secondry: #293037;
    --color--label-title: #5828CF;
    --border-title-color:#ddd0ff;
    --color-text-primary: #666666;
}

body {
    overflow-x: hidden;
    font-family: var(--font-radio-canada); 
}


.whyus-label {
    display: inline-block;
    margin-bottom: 30px;
    padding: 8px 12px;
    background: var(--color--title-bg-secondry);
    color: var(--color--primary-100);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
}
.whyus-subtitle{
  color: #ADB1B4;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}







/* =========================================
   SECURITY SECTION
========================================= */

.security-section {
    background: #333C44;
    padding: 80px 0;
    /* overflow: hidden; */
}
.security-row {
    /* --bs-gutter-x: 80px; */
    --bs-gutter-y: 50px;
    align-items: stretch !important;
}
.security-content {
    max-width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.security-button{
    margin-top: auto;
}
.security-label {
    display: inline-block;
    padding: 8px 12px;
    margin-bottom: 20px;
    background: #293037;
    color: var(--color--primary-100);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}
.security-title {
    margin: 0 0 12px;
    color: #ffffff;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -2%;
}
.security-title span{
    font-weight: 600;
}
.security-description {
    /* max-width: 450px; */
    /* margin: 0 0 70px; */
    margin: 0;
    color: #F1F1F1;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}
.security-features {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.security-feature {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.security-feature-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}
.security-feature-content {
    padding-top: 2px;
}
.security-feature-content h3 {
    margin: 0 0 8px;
    color: #F1F1F1;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -2%;
}
.security-feature-content p {
    margin: 0;
    color: #A5A9AC;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -2%;
}

/* =========================================
   COMPETITIVE ADVANTAGES Section
========================================= */
/* 
.competitive-section {
    padding: 80px 0;
    overflow: hidden;
}
.competitive-header {
    margin-bottom: 40px;
}
.competitive-label {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 12px;
    background: var(--color--title-bg-primary);
    border: 1px solid var(--border-title-color);
    color: var(--color--label-title);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
}

.competitive-title {
    margin: 0 0 8px;
    color: var(--color--secondry);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -2%;
}

.competitive-subtitle {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -2%;
}
.competitive-list {
    width: 100%;
}
.competitive-item {
    padding: 20px 112px 40px 20px;
}
.competitive-item.active {
    background: #5426C5;
}
.competitive-item h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 32px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -2%;
}
.competitive-item.active h3 {
    color: var(--color--primary-100);
}
.competitive-item p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -2%;
    padding-top: 8px;
}
.competitive-item.active p {
    color: #CCBEEE;
} */







.competitive-section {
    padding: 80px 0;
    overflow: hidden;
}

.competitive-header {
    margin-bottom: 40px;
}

.competitive-label {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 12px;
    background: var(--color--title-bg-primary);
    border: 1px solid var(--border-title-color);
    color: var(--color--label-title);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
}

.competitive-title {
    margin: 0 0 8px;
    color: var(--color--secondry);
    line-height: 1.2;
    font-weight: 400;
}

.competitive-subtitle {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.5;
}

/* ================================
   COMPETITIVE LIST
================================ */

.competitive-list {
    width: 100%;
}

.competitive-item {
    padding: 20px 112px 40px 20px;
    transition: all 0.35s ease;
}

/* Number */
.competitive-number {
    display: flex;
    align-items: center;
}

.competitive-number img {
    width: 43px;
    height: 43px;
    object-fit: contain;
}

/* Title */
.competitive-item h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 32px;
    line-height: 1.3;
    font-weight: 400;
    transition: color 0.35s ease;
}

/* Description */
.competitive-item p {
    margin: 0;
    padding-top: 8px;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    transition: color 0.35s ease;
}

/* =================================
   HOVER EFFECT
================================= */
.competitive-item:first-child {
    background: #5426C5;
}

.competitive-item:first-child h3 {
    color: #fff;
}

.competitive-item:first-child p {
    color: #CCBEEE;
}



.competitive-list:has(.competitive-item:not(:first-child):hover)
.competitive-item:first-child {
    background: transparent;
}

.competitive-list:has(.competitive-item:not(:first-child):hover)
.competitive-item:first-child h3 {
    color: var(--color-text-primary);
}

.competitive-list:has(.competitive-item:not(:first-child):hover)
.competitive-item:first-child p {
    color: var(--color-text-primary);
}




.competitive-item:hover {
    background: #5426C5;
}

.competitive-item:hover h3 {
    color: #ffffff;
}

.competitive-item:hover p {
    color: #CCBEEE;
}


/* =================================
   NUMBER ICON
================================= */

.competitive-item:hover .competitive-number img {
    /* only use this if your hover number SVG supports white */
    transform: scale(1.03);
}



.competitive-item {
    transition: background-color 0.35s ease;
}

.competitive-item h3,
.competitive-item p {
    transition: color 0.35s ease;
}
















/* =========================================
   QUALITY STANDARDS
========================================= */

.quality-section {
    padding: 80px 0 80px;
    overflow: hidden;
}
.quality-intro {
    max-width: 300px;
}
.quality-title {
    margin: 0 0 8px;
    color: var(--color--secondry);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -2%;
}
.quality-title span {
    font-weight: 600;
}
.quality-description {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -2%;
}
.quality-certifications {
    /* --bs-gutter-x: 20px; */
    height: 100%;
    align-items: end;
}

.quality-certification {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quality-certification-icon img {
    width: 116px;
    height: 116px;
    /* width: 100%; */
    object-fit: contain;
}
.quality-certification h3 {
    margin: 0 0 8px;
    color:var(--color--secondry);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -2%;
}
.quality-certification p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
}


/* =========================================
   STATISTICS
========================================= */

.quality-stats {
    margin-top: 48px;

    --bs-gutter-x: 50px;
    --bs-gutter-y: 40px;
}

.quality-stat {
    min-height: 90px;
}

.quality-stat-number {
    margin-bottom: 8px;
    color: #5426C5;
    font-size: 56px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -2%;
}
.quality-stat-title {
    color: #333C44;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -2%;
}






@media (max-width: 1195px) {
.quality-certification-icon img {
    width: 100%;
    height: 100%;
}
}


@media (max-width: 991px) {
    .security-feature-content h3 {
        font-size: 22px;
    }
    .security-feature {
        gap: 24px;
    }
    .security-content {
       max-width: 90%;
    }
    .competitive-item {
        padding: 20px 40px 40px 20px;
    }
    .competitive-item h3 {
        font-size: 26px;
    }
    .quality-top {
    --bs-gutter-y: 40px;
    }
    .quality-stat-number {
        font-size: 50px;
    }
    .quality-stat-title {
      font-size: 20px;
    }
}
@media (max-width:767px){
.whyus-label {
    margin-bottom: 20px;
}
.security-button {
    margin-top: 40px;
}
.security-feature-content h3 {
        font-size: 20px;
 }
 .security-feature-content {
    padding-top: 0;
}
.security-content {
       max-width: 100%;
}
.quality-intro {
    max-width: 90%;
}
.quality-section {
    padding: 80px 0 50px;
}
.competitive-item h3 {
    margin-top: 20px;
}
.quality-stat-number {
        font-size: 44px;
}
.quality-stat-title {
        font-size: 18px;
}
.quality-certification h3 {
    margin: 0 0 4px;
    font-size: 20px;
}
}
@media (max-width: 576px) {
 .security-feature {
        gap: 18px;
 }   
.security-section {
    padding: 60px 0;
}
.competitive-section {
    padding: 60px 0;
}
.quality-section {
    padding: 60px 0 20px;
}
.competitive-item {
        padding: 20px 20px 40px 20px;
}
.competitive-item h3 {
        font-size: 20px;
}
.quality-stat-number {
        font-size: 40px;
}
.quality-certification-icon img{
        width: 100px;
        height: 100px;
}
.quality-intro {
    max-width: 100%;
}
.quality-stats {
    margin-top: 30px;
    --bs-gutter-x: 20px;
    --bs-gutter-y: 25px;
}
}
@media (max-width: 390px) {
.competitive-item {
        padding: 14px 14px 30px 14px;
}
}