.roadmap_main{
    padding: 0px 0 100px;
}

.page_roadmap .main_header,
.page_changelog .main_header {
    display: none;
}

.roadmap_main .roadmap_header_sec{
    padding: 80px 0 40px;
}

.roadmap_main .roadmap_header_sec .roadmap_header_content h2{
    color:  #091E42;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 48px */
    letter-spacing: -1.2px;
    margin-bottom: 16px;
}

.roadmap_main .roadmap_header_sec .roadmap_header_content p{
    color:#5E6C84;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.16px;
    max-width: 765px;
    margin-bottom: 0px;
}


.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .nav{
    border-radius: 60px;
    border: 1px solid  #EFF0F3;
    background: #FFF;
    width: fit-content;
    margin-bottom: 40px;

}

.roadmap_main .roadmap_main_wrapper .nav-pills .nav-link.active, 
.roadmap_main .roadmap_main_wrapper .nav-pills .show>.nav-link{
    background:  #EAEBF9;
    color:  #2F39BF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */
}

.roadmap_main .roadmap_main_wrapper .nav-link{
    color: #5E6C84;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */
    padding: 14px 22px;
    border-radius: 60px;

}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container{
    border-radius: 8px;
    background:  #F4F5F7;
    padding: 8px;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header{
    padding: 16px 16px 20px;
    display: flex;
    align-items: center;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_dots{
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin-right: 10px;

}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_dots.in_progress{
    background-color: #FF9500;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_dots.delivered{
    background-color: #00875A;
}
.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_dots.planned{
    background-color: #AF52DE;
}
.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_heading{
    color:  #091E42;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: -0.16px;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container-body{
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container-body .card{
    border-radius: 8px;
    border: 1px solid  #EFF0F3;
    background: linear-gradient(176deg, #FFF 60.01%, #F6F7FF 129.11%);
    padding: 24px;
    margin-bottom: 10px;
    cursor: pointer;
}

.roadmap_main .tag{
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
    border-radius: 4px;
    margin-bottom: 10px;
    width: fit-content;
}

.roadmap_main .tag.green{
    color: #00875A;
    background-color: #E5F3EE;
}

.roadmap_main .tag.purple{
    color: #AF52DE;
    background-color: #F5EAFB;
}

.roadmap_main .tag.blue{
    color: #2F39BF;
    background-color: #EAEBF9 ;
}

.roadmap_main .tag.gray{
    color: #5E6C84;
    background-color: #F4F5F7 ;
}


.roadmap_main .tag.orange{
    color: #FF9500;
    background-color: #FFF4E5;
}

.roadmap_main .card .card_title{
    margin-bottom: 16px;
}


.roadmap_main  .feat_delivery_date{
    display: flex;
    align-items: center;
}

.roadmap_main .feat_delivery_date p{
    margin-bottom: 0;
    margin-left: 6px;
}
.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .roadmap_main_tab_wrap_inner::-webkit-scrollbar-thumb,
.cards_container-body::-webkit-scrollbar-thumb {
    background: #5961CC;
    border-radius: 35px;
  }
.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .roadmap_main_tab_wrap_inner::-webkit-scrollbar{
    background-color: #DFE1E6;
    height: 4px;
}
.cards_container-body::-webkit-scrollbar { 
    background-color: #DFE1E6;
    width: 4px;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container-body .no_cards_available{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container-body .no_cards_available p{
    margin: 16px 0 0;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .disclaimer_text{
    color: #5E6C84;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0;
}


/* modal | Begins */

.roadmap_main .modal .modal-dialog .modal-body{
    padding: 30px;
}
  
.roadmap_main .modal .modal-dialog .modal-body .card_title{
    color: #0E134F;
    font-size: 24px;
    font-weight: 600;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.72px;
    margin-bottom: 20px;
}

.roadmap_main .modal .modal-dialog .modal-body .feat_details{
    color: #42526E;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.roadmap_main .modal .modal-dialog .modal-body .roadmap-modal-tags{
    display: flex;
    gap: 8px;
    align-items: center;
}
.roadmap_main .modal hr{
    border-color: #EFF0F3;
    opacity: 1;
}

.roadmap_main .modal.show .modal-dialog {
    max-width: 686px;
    width: 100%;
    transform: translateY(30%);
}
.roadmap_main .modal .modal-footer{
 background-color: #F8F9FB;
 padding: 15px 30px ;
 justify-content: space-between;
}


.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .dropdown-footer .btn,
.roadmap_main .ppcNavBar .navbar .nav-item .btn,
.roadmap_main .modal .modal-footer .btn{
    border-radius: 6px;
    background: #2F39BF;
    min-width: unset;
    padding: 9px 30px;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .dropdown-footer .btn:hover,
.roadmap_main .ppcNavBar .navbar .nav-item .btn:hover,
.roadmap_main .modal .modal-footer .btn:hover,
.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .dropdown-footer .btn.active,
.roadmap_main .ppcNavBar .navbar .nav-item .btn.active,
.roadmap_main .modal .modal-footer .btn.active{
    background-color: #4c57e5;
    color: #fff;
    border-color: #2F39BF;
}

.roadmap_main .modal .modal-footer .social_icons{
    display: flex;
    align-items: center;
    gap: 10px;
}

.roadmap_main .modal .modal-footer .social_icons p{
    margin-bottom: 0;
    color: #0E134F;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

.roadmap_main .modal .modal-footer .social_icons img{
    cursor: pointer;
}

/* modal | Ends */


/* Changelog | Begins */


.changelog_main .changelog_sec .feature_tags{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
}

.changelog_main .tag{
    padding: 8px 10px;
    margin-bottom: 0;
   }

.changelog_main .changelog_sec .features_details_wrapper{
    padding: 48px 0;
    border-bottom: 1px solid #C1C7D0;
}
.changelog_main .changelog_sec .features_details_wrapper:last-child{
    border-bottom: none;
}

.changelog_main .changelog_sec .features_details_wrapper .feat_date_details{
    color:  #253858;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
    margin-top: 48px;
}


.changelog_main .changelog_sec .features_details_wrapper .features_details_wrap h4{
    color: #091E42;
    font-size: 24px;
    font-weight: 600;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.72px;
    margin-bottom: 20px;
}

.changelog_main .changelog_sec .features_details_wrapper .features_details_wrap p{
    color:  #253858;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.16px;
    margin-bottom: 0;
}

.changelog_main .changelog_sec .features_details_wrapper .features_details_wrap p a{
    color: #2F39BF;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-decoration: none;
}

.changelog_main .changelog_sec .features_details_wrapper .features_details_wrap b{
    color: #253858;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.16px;
}

.changelog_main .changelog_sec .changelog_searchAndFilter{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.changelog_main .changelog_sec .changelog_searchAndFilter .filter-text{
    padding-right: 31px;
}
.changelog_main .changelog_sec .changelog_searchAndFilter .input-group{
    width: 480px;
    height: 40px;
    border-radius: 4px;
    border: 0.5px solid  #DFE1E6;
    background: #FCFCFC;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .input-group>.form-control:focus, 
.changelog_main .changelog_sec .changelog_searchAndFilter .input-group>.form-floating:focus-within, 
.changelog_main .changelog_sec .changelog_searchAndFilter .input-group>.form-select:focus{
 box-shadow: none;
 border-color: #DFE1E6;
}

.dropdown-menu {
    border: 1px solid #dee2e6;
  }
  
  .dropdown-menu button.active {
    border-color: #5c60f5;
    color: #5c60f5;
    background-color: #f4f5ff;
  }

 #changelog-loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

 #changelog-loader .changelog-loader-wrap{
    background: white;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

 #changelog-loader .changelog-loader-wrap .changelog-loader-icon{
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #2F39BF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }


/* Changelog | Ends */

/* ppc navigation  | Begins */

.roadmap_main .ppcNavBar .navbar .nav-item svg{
    margin-right: 6px;
    margin-bottom: 2px;
}
.roadmap_main .ppcNavBar .navbar .nav-item:hover svg path,
.roadmap_main .ppcNavBar .navbar .nav-item.active svg path{
    fill: #2F39BF;
}

.roadmap_main .ppcNavBar .navbar .nav-item:hover a,
.roadmap_main .ppcNavBar .navbar .nav-item.active a{
    color: #2F39BF;
}

/* ppc navigation  | Ends */


/* Filter Button | Begins */

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn {
    background-color: #FCFCFC;
    border: 0.5px solid #DFE1E6;
    border-radius: 6px;
    width: 132px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #253858;
    transition: all 0.2s ease;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn:hover {
    background-color: #F4F5F7;
    border-color: #C1C7D0;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn:focus {
    box-shadow: none;
    border-color: #2F39BF;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn .filter-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn .filter-text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;    
    font-weight: 400;   
    line-height: 22px;
    color: #253858;
    margin: 0;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn .dropdown-arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.changelog-filter-dropdown_box
{
    position: relative;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.changelog-filter-dropdown.show{
    display: block !important;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown {
    min-width: 300px;
    width: 490px;
    border: 1px solid #DFE1E6;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(9, 30, 66, 0.15);
    margin-top: 8px;
    display: none;
    position: absolute;
    right: 0;
    z-index: 99;
    background-color: #fff;
    top: 100%;
    padding: 20px 24px 24px;
}


/* .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown_box .dropdown-item{
    white-space: revert;
} */

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown_box .dropdown-item-btn-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown_box .dropdown-header{
    color:  #091E42;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%; 
    letter-spacing: -0.2px;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown_box .dropdown-item .form-label{
    color: #253858;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 8px;
    margin-top: 18px;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown_box hr{
    border-color: #C1C7D0;
}
.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .filter-option {
    transition: all 0.2s ease;
}

.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .filter-option:hover,
.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .filter-option.active {
    background-color: #EAEBF9;
    border-color: #2F39BF;
    color: #2F39BF;
}
.changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .dropdown-footer{
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

/* Filter Button | Ends */

/* Filter Modal Figma Design | Begins */

.filter-modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

.filter-modal-content {
    background: #FFFFFF;
    border: 1px solid #C1C7D0;
    border-radius: 12px;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
    font-family: 'Poppins', sans-serif;
    padding: 0;
}

.filter-modal-header {
    position: relative;
    padding: 24px 24px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.filter-modal-title {
    color: #091E42;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin: 0;
}

.filter-modal-close {
    background: none;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.filter-modal-close:hover {
    opacity: 0.7;
}

.filter-modal-close svg {
    width: 16px;
    height: 16px;
}

.filter-modal-divider {
    height: 1px;
    background-color: #C1C7D0;
    margin: 20px 24px 24px 24px;
    opacity: 0.5;
}

.filter-modal-body {
    padding: 0 24px 24px 24px;
}

.filter-section {
    margin-bottom: 28px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section-label {
    color: #091E42;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 12px;
    display: block;
}

.filter-options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.filter-option-btn {
    background: #FFFFFF;
    border: 0.5px solid #C1C7D0;
    border-radius: 4px;
    color: #5E6C84;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
}

.filter-option-btn:hover:not(.active) {
    background-color: #F4F5F7;
    border-color: #8993A4;
}

.filter-option-btn.active {
    background: #F5F5FC;
    border: 0.5px solid #2F39BF;
    color: #2F39BF;
}

.filter-option-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(47, 57, 191, 0.2);
}



/* css for visual editor | Begins */
.features_details_wrap ul li span,
.features_details_wrap span{
    color:  #253858;
font-size: 16px;
font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: -0.16px;
}
.features_details_wrap span a{
    color:  #2F39BF;

font-size: 16px;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.16px;
}
.features_details_wrap ul{
    margin-top: 16px;
}

.changelog_main .changelog_sec .features_details_wrapper .features_details_wrap strong{
    color: #253858;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.16px;
}




/* css for visual editor | Ends */


/* Responsive Design */

@media (min-width: 992px) {
 .roadmap_main .navbar-expand-lg .navbar-nav {
        gap: 24px;
        align-items: center;
    }

  
}
@media (max-width: 992px) {
/* .roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container{
    margin-bottom: 16px;
} */
.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .nav{
    border: none;
    gap: 12px;
    justify-content: flex-start;
}
.roadmap_main .roadmap_main_wrapper .nav-link{
    border: 1px solid  #EFF0F3;
}

.roadmap_main .navbar-collapse{
    text-align: center;
}
.roadmap_main .navbar-collapse .nav-item .btn{
    margin: 0 auto;
}

#ppc-hdr .navbar-collapse.show{
    display: none !important;
    }
 #ppc-hdr .navbar-collapse.show.navShow{
        display: block !important;
    }

}

@media (max-width: 768px) {

    
.changelog_main .changelog_sec .features_details_wrapper .feat_date_details{
        margin-bottom: 16px;
 }
 .changelog_main .changelog_sec .features_details_wrapper .features_details_wrap h4{
    font-size: 18px;
 }

 .roadmap_main .modal .modal-dialog .modal-body .feat_details,
 .roadmap_main .roadmap_header_sec .roadmap_header_content p,
 .changelog_main .changelog_sec .features_details_wrapper .features_details_wrap b,
 .changelog_main .changelog_sec .features_details_wrapper .features_details_wrap p{
    font-size: 14px;
 }
 .changelog_main .changelog_sec .features_details_wrapper{
    padding: 24px 0;
 }
 .changelog_main .changelog_sec .changelog_searchAndFilter .input-group {
    width: 100%;
    min-width: 380px;
 }
 .roadmap_main .roadmap_header_sec .roadmap_header_content h2{
    font-size: 24px;
 }
 .roadmap_main .roadmap_main_wrapper .nav-link{
    font-size: 12px;
 }
 .roadmap_main .modal .modal-dialog .modal-body {
    padding: 20px;
}
.roadmap_main .modal .modal-footer{
    padding: 15px 20px;
}
.roadmap_main .modal .modal-dialog .modal-body .card_title{
    font-size: 20px;
}

.roadmap_main .container{
    padding: 0 16px;
 }

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .roadmap_main_tab_wrap_inner{
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin: 0;
    gap:8px;
}

.roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .roadmap_main_tab_wrap_inner .col-lg-4{
    max-width: 280px;
    padding: 0;
}

.roadmap_main .roadmap_header_sec{
    padding: 46px 0 40px;
    
}
.roadmap_main .modal.show .modal-dialog {
    max-width: 540px;
    margin: 0 auto;
 }
}



@media (max-width: 550px) {
    .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn .dropdown-arrow,
    .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn .filter-text{
        display: none;
    }
    .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-btn{
        width: 60px;
     }
     .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown{
        width: 100%;
     }
     .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown_box .dropdown-header{
        font-size: 18px;
     }
     .roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_heading,
     .changelog_main .changelog_sec .changelog_searchAndFilter .changelog-filter-dropdown .dropdown-footer .btn{
    font-size: 14px;
 }
 .roadmap_main .roadmap_main_wrapper .roadmap_main_tab_wrap .cards_container .cards_container_header .status_dots {
    height: 13px;
    width: 13px;
 }
 .roadmap_main .feat_delivery_date .p3-regular{
    font-size: 11px;
 }
 .roadmap_main .modal.show .modal-dialog {
    max-width: 400px;
 }

}


@media (max-width: 480px) {
    .changelog_main .changelog_sec .changelog_searchAndFilter .input-group {
        width: 100%;
        min-width: 300px;
     }
     .roadmap_main .modal.show .modal-dialog {
        max-width: 340px;
    }
   
}

/* Filter Modal Figma Design | Ends */