/* ==========================================================================
  01. SPECIFIC STYLES
  =========================================================================== */
.clear { clear: both; height: 0px; }
.clear_5 { clear: both; height: 5px; }
.clear_10 { clear: both; height: 10px; }
.clear_20 { clear: both; height: 20px; }
.clear_30 { clear: both; height: 30px; }
.clear_40 { clear: both; height: 40px; }
.clear_50 { clear: both; height: 50px; }
.clear_60 { clear: both; height: 60px; }
.clear_70 { clear: both; height: 70px; }
.clear_80 { clear: both; height: 80px; }
.clear_90 { clear: both; height: 90px; }
.clear_100 { clear: both; height: 100px; }



.pricing-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.pricing-col {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    border-radius: 8px;
    width: calc(25% - 16px);
}

@media (max-width: 1200px) { 
    .pricing-container {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .pricing-col {
        width: calc(50% - 10px);
    }
}


.cartouche {
    height: 18px;
    background: #7c3aed;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.pricing-title-desc {
    padding: 18px;
}

.pricing-col h3 {
    font-size: 20px;
    font-weight: 400;
    color: #2C3E50;
    line-height: 1;
    margin-bottom: 10px;
}

.most-popular {
    position: absolute;
    top: 36px;
    right: 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    padding: 2px 8px;
    background-color: #3b82f6;
}
    

.pricing-col h4 {
    font-size: 14px;
    font-weight: 500;
    color: #2C3E50;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: .2px;
}

.pricing-col p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #2C3E50;
    font-weight: 400;
    line-height: 1.6;
}

.plan-price {
    float: left;
    font-size: 30px;
    font-weight: 500;
    color: #2C3E50;
    line-height: 1.6;
}

.plan-mo {
    float: left;
    font-size: 14px;
    color: #2C3E50;
    font-weight: 400;
    margin-left: 6px;
    margin-top: 10px;
    line-height: 20px;
}

.contact-us {
    float: left;
    font-size: 30px;
    font-weight: 500;
    color: #2C3E50;
    line-height: 1.6;
    width: 100%;
    text-align: center;
    display: none;
}

.plan-first-three {
    display: flex;
    justify-content: flex-start;
    gap:16px;
}

.plan-first-three i {
    color: #6b7280;
}

.plan-first-three div, .plan-second-three div {
    color: #6b7280;
    line-height: 24px;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    font-size: 14px;
}

.pricing-sep {
    width: 100%;
    height: 1px;
    background:#e5e7eb;
    
}

.plan-second-three {
    display: flex;
    justify-content: flex-start;
    gap:16px;
}

.plan-second-three i {
    font-size: 14px;
    width: 20px;
    height: 20px;
    padding: 3px;
    color: #fff;
    background: #7c3aed;
    border-radius: 100%;
}

.subscribe-btn {
    background-color:#fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #2C3E50;
    font-size: 16px;
    font-weight: 500;
    min-width: 0 !important;
    padding: 12px 12px;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
}

.subscribe-btn:hover {
    background-color:#CCCCCC20;
}

.start-btn {
    border-radius: 6px;
    color: #fff !important;
    background-color: #306aff !important;
    border-color: #306aff !important;
    transition: all .3s ease;
}

.start-btn:hover {
  background-color: #083dc4!important;
  border-color: #083dc4!important;
}





.container-switch {
  display: flex;
  justify-content: center;
  align-items: center;
    margin-top: 60px;
}

.switch-home {
    float: right;
    margin-bottom: 40px;
}

.buttons-container-switch {
    width: 300.36px; /* Largeur ajustée comme spécifié */
    background-color: #fff;
    height: 44px;
    border-radius: 8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; /* Espace entre les boutons */
}

.button-switch {
    width: 144px; /* Largeur du bouton 'Topic' */
    height: 36px; /* Hauteur commune des boutons */
    background-color: #F7F7F7;
    border: none;
    padding: 8px 26px; /* Padding interne des boutons */
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    font-size: 15px;
    font-weight: 500;
}

  
.button-switch.selected {
    background-color: #3c83f6;
    color: #fff;
    width: 144px; /* Largeur ajustée pour le bouton 'Link' */
    /* height: 46px; Retiré pour uniformiser la hauteur des boutons */
    position: relative;
    border-radius: 8px;
}


.buttons-container-toggle { 
    width: 47px; /* Largeur ajustée comme spécifié */
    background-color: #ccc;
    height: 24px;
    border-radius: 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px; /* Espace entre les boutons */
    padding: 2px;
}

.button-toggle {
    width: 20px; /* Largeur du bouton 'Topic' */
    height: 20px; /* Hauteur commune des boutons */
    background-color: #ccc;
    border: none;
    padding: 0; /* Padding interne des boutons */
    border-radius: 100%;
    cursor: pointer;
    outline: none;
}

.button-toggle.selected {
    background-color: #fff;
}

.toggle-text {
    line-height: 34px;
    font-size: 20px;
    font-weight: 500;
    margin-left: 20px;
}

.toggle-text span {
    color: #3c83f6;
}




.slider {
    height: 8px;
    background: #e1e9f8;
    border-radius: 6px;
    position: relative;
    width: calc(100% - 30px);
    margin-left: 15px;
    border: 1px solid #c5c5c5;
}
            
.ui-slider-range {
    border-radius: 6px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    
    background: #e1e9f8;
}
            
.ui-slider-handle {
    cursor: move;
    cursor: pointer;
    cursor: -moz-pointer;
    cursor: -webkit-pointer;
    width: 24px;
    height: 24px;
    border: 1px solid #c5c5c5;
    position: absolute;
    outline: none;
    top: 0;
    z-index: 1;
    border-radius: 100%;
    background: #ccc;
    margin: 3px 0 0 0;
    transform: translate(-50%, -50%);
}   

.pricing__slider__range {
    display: flex;
    align-items: Center;
    justify-content: space-between;
    font-weight: 700;
    font-size: .85rem;
    color: #2f353e;
    margin-top: 20px;
    margin-bottom: 10px;
    width: calc(100% - 30px);
    margin-left: 15px;
}

.step i {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.step0 {
    left: 0%;
}

.step1 {
    left: calc(33% - 9px);
}

.step2 {
    left: calc(66% - 9px);
}

.step3 {
    left: calc(100% - 12px);
}



.title-table {
    display: table-cell;
    text-align: left;
}

.space-table {
    display: table-cell;
}

.line-table-mobile {
    display: none;
}

.line-table-desktop {
}


.table-pricing .btn {
    padding: 16px 28px;
}

.text-start {
    font-weight: 400;
}


.btn-features {
    font-size: 18px;
    font-weight: 500;
    padding: 12px 24px;
    border: 1px solid #ccc;
    background: #fff;
    display: table;
    margin: auto;
    cursor: pointer;
    border-radius: 6px;
}
.btn-features:hover {
    background: #f7f7f7;
}



.accordion-item {
  border: 1px solid #ddd !important;
  margin-bottom: 10px;
    padding: 30px;
    width: 70%;
    box-sizing: border-box;
    user-select: none;
    margin-left: 15%;
}
.accordion-title {
    font-weight: 500;
    cursor: pointer;
    width: calc(100% - 0px);
    color: #383f76;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: color .1s ease;
    font-size: 1.2rem;
}

.accordion-title div {
    width: calc(100% - 20px);
}

.accordion-title svg {
    margin-top: 5px;
}
.accordion-title:hover {
}
.accordion-content {
  padding: 0px;
  display: none;
    margin-top: 10px;
    
}

.accordion-content p {
    margin-bottom: 0;
    font-size: 1.1875rem;
}

.active {
    color: #306aff;
}

.active svg {
    fill: #306aff;
}







@media (max-width: 990px) { 
    
    .title-text {
        width: 100%;
        text-align: center;
    }
    
    .switch {
        margin: auto;
    }
    
    .switch-home {
        float: unset;
        margin-bottom: 20px;
    }
    
    .pricing-container {
        flex-direction: column;
        max-width: 350px;
        margin: auto;
    }
    
    .pricing-col {
        width: 100%;
        margin-top: 30px;
    }
    
    .space-table {
        display: table-cell;
    }
    
    .line-table-mobile {
        display: table-cell;
        background-color: #fff !important;
    }
    
    .line-table-desktop {
        display: none;
    }
    
    .title-table {
        text-align: center;
    }
    
    .accordion-item { 
        width: 100%;
        margin-left: 0;
    }
    .accordion-title {
        font-size: 1rem;
    }
    .accordion-title div {
        width: calc(100% - 20px);
    }
    .accordion-content p {
        margin-bottom: 0;
        font-size: 1rem;
    }
    
    
    
}




.container-retry {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #ccc;
}

.btn-retry {
    background-color: #6064E3;
    border: 1px solid #6064E3;
    border-color: #6064E3;
    border-radius: 6px;
    border-width: 1px;
    color: #ffffff;
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0px;
    line-height: normal;
    padding: 12px 40px 12px 40px;
    text-align: center;
    text-decoration: none;
    border-style: solid;
    cursor: pointer;
    
}

.btn-retry:hover {
    background-color: #4b4fd1;
}



.table tbody th {
    font-weight: 400;
}

.table-pricing tbody td i {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
}

.table-pricing tbody td:not(:first-child) span {
    padding: 0;
}