@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body {
    background-color: #0a0a0a;
}
.width-full {
    width: 100%;
}
.font-size-14 {
    font-size: 14px;
}
.font-size-16 {
    font-size: 16px;
}
.font-size-18 {
    font-size: 18px;
}
.font-size-22 {
    font-size: 22px;
}
.font-size-24 {
    font-size: 24px;
}
.font-size-40 {
    font-size: 40px;
}
.min-margin-top-2 {
    margin-top: -2px;
}
.m-right-28 {
    margin-right: 28px;
}
.m-right-6 {
    margin-right: 6px;
}
.m-right-10 {
    margin-right: 10px;
}
.m-right-16 {
    margin-right: 16px;
}
.m-right-20 {
    margin-right: 20px;
}
.m-left-10 {
    margin-left: 10px;
}
.m-left-5 {
    margin-left: 5px;
}
.mb-125 {
    margin-bottom: 1.25rem;
}
.text-gray-500 {
    color: #878787;
}
.weight-200 {
    font-weight: 200;
}
.weight-300 {
    font-weight: 300;
}
.weight-400 {
    font-weight: 400;
}
.weight-500 {
    font-weight: 500;
}
.weight-600 {
    font-weight: 600;
}
.weight-700 {
    font-weight: 700;
}
.weight-800 {
    font-weight: 800;
}
.border-bottom-gray-600 {
    border-bottom: 1px solid #424242;
}
.border-bottom-gray-600-5 {
    border-bottom: .5px solid #272727;
}
.border-radius-12 {
    border-radius: 12px;
}
.border-radius-16 {
    border-radius: 16px;
}
.border-radius-20 {
    border-radius: 20px;
}
.border-radius-24 {
    border-radius: 24px;
}
.border-radius-32 {
    border-radius: 32px;
}
.border-linear-4 {
    /* padding: 60px; */
    border-radius: 25px;
    border: 1px solid #696969;
}
.border-purple-05 {
    border: .5px solid #BC3CF8;
}
.background-linear-90 {
      background: linear-gradient(90deg, #1f1f1f, #060606);
  }

/* input, */
.accordion-button:focus,
.input:focus,
.form-check-input:focus,
.form-check-input,
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: none;
    transition: .2s;
    border-color: none;
}

.font-mulish {
    font-family: "Mulish", sans-serif;
}

.btn-white,
.font-size-18,
h6,
.page-profile p,
.text-16,
.btn-login-email,
.btnpurle,
.btndark,
.dropdown-item,
.dropdown-header,
.dropdown-container,
.custom-sequence,
.advanced-options,
.basic-options .form-select,label,
h1,h2,h3,h4,h5,h6,a {
    font-family: "Mulish", sans-serif;
}
.btn-try,
.font-red-hat-display {
    font-family: "Red Hat Display", sans-serif;
}
.bg-black-900 {
    background: #1F1F1F;
}
.bg-gray-900 {
    background: #0A0A0A;
}
.bg-gray-500 {
    background: #878787;
}
.color-gray-500 {
    color: #878787;
}
.bg-gray-100 {
    background: #F7F7F7;
}
.navbar {
    height: 74px;
}

.navbar .logo img {
    width: 200px;
    height: auto;
}
.navbar.login-page a {
    margin: 0;    
}

.navbar .navbar-nav li {
    margin-left: 16px;
}
.navbar a {
    color: #fff;
    text-transform: capitalize;
    font-family: "Lato", sans-serif;
    /* font-size: 16px; */
    font-weight: 500;
    text-decoration: none;
}

.navbar a.btn-log-in {
    border: 0.5px solid #fff;
    border-radius: 8px;
    padding: 7px 18px;
    transition: .5s;
}
.navbar a.btn-sign-up {
    background: #fff;
    color: #1F1F1F;
    border: 0.5px solid #fff;
    border-radius: 8px;
    padding: 7px 18px;
    transition: .5s;
    
}
.navbar a.btn-log-in:hover {
    background: #fff;
    border: 0.5px solid #fff;
    color: #1F1F1F;
}
.navbar a.btn-sign-up:hover {
    opacity: .7;
}



/* sidebar */

#sidebar {
    width: 90px;
    height: auto;
    position: absolute;
    /* position: fixed; */
    top: 0;
    bottom: 0; 
    left: 0;
    display: flex;
    flex-direction: column;
    padding-top: 72px;
    transition: width 0.3s ease;
    z-index: 1;
    padding-left: 6px;
    padding-right: 6px;
    border-right: .5px solid #ffffff14;
}

.sidebar-item {
    text-align: center;
    /* display: flex; */
    /* align-items: center; */
    padding: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 14px;
    /* justify-content: center; */
}

.sidebar-item:hover {
    background: #161616;
    border-radius: 8px;
}

.sidebar-icon {
    font-size: 20px;
}

.main-content {
    margin-left: 80px;
    transition: margin-left 0.3s ease;
}

.main-content.expanded {
    margin-left: 371px;
}

.layout .side-menu a {
    display: grid;
    align-items: center;
    font-family: "Mulish", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #878787;
    transition: 0.3s;
    line-height: 21px;
    align-content: center;
    justify-content: center;
    gap: 3px;
}


/* end */

.layout .side-menu a:hover {
    color: #fff;
}


.layout a.active {
    color: #fff; 
}

.layout a.active .icons-svg-style {
    stroke: #fff; 
    transition: stroke 0.3s ease;
}


.layout a:hover .eye.icons-svg-style,
.layout a:hover .icons-svg-style{
    stroke: #fff;
}

.eye.icons-svg-style{
    stroke: #fff;
    transition: stroke 0.3s ease;

}
.icons-svg-style {
    stroke: #fff;
    transition: stroke 0.3s ease;
}

.sidebar-item {
    color: #878787; 
    transition: color 0.5s ease;
}

.sidebar-item.active {
    color: #fff; 
    background-color: #161616;
    border-radius: 8px;
}

.bg-grey-800 {
    background-color: #161616;
}

.offcanvas.offcanvas-start {
    width: 280px;
    left: 90px;  
    transform:none;

}
.offcanvas.offcanvas-start h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-close {
    margin-top: -20px !important;
    font-size: 13px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    justify-content: space-between;
}

.image-grid button {
    display: block;
    text-decoration: none;
    border: 3px solid transparent;
    transition: border-color 0.3s;
    padding: 2px;
    border-radius: 8px;
}
.image-grid button img {
    border-radius: 5px;    
}

.image-grid button:focus,
.image-grid button:hover {
      border: 3px solid #5f0be7; 
}

.image-grid img {
      width: 100%;
      height: auto;
}

.custom-sequence .form-select,
.basic-options .form-select {
    background-color: #1F1F1F;
    border: 1px solid #FFFFFF14;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='' stroke='%23e6e6e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding: 7px 14px 7px 14px;
}

.custom-sequence label,
.advanced-options label,
.basic-options label {
    color: #e6e6e6;
    font-size: 16px;
    font-weight: 400;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #424242 30%, #1f1f1f 30%);
    border-radius: 5px;
    outline: none;
    transition: background 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff; 
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-ms-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.offcanvas.offcanvas-start h3 {
    margin-bottom: 24px;
}

select.form-select {
    font-size: 14px;
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

/* Styling untuk options */
select.form-select option {
    background-color: #333;
    color: #fff;
    padding: 5px;
}

select.form-select option:hover {
    background-color: #fff !important;
    color: #000;
}

select.form-select option[disabled] {
    display: none;
}

.offcanvas.offcanvas-start h3 {
    margin-bottom: 18px;
    margin-top: 1rem;
}

@media (min-width: 1440px) {
    .col-img-fluid {
        margin-top: 2rem;
    }
    .mx-width-500 {
        max-width: none !important;
        margin-left: 25px;
    }

}
@media (max-width: 1440px) {
    .col-img-fluid {
        margin-top: 1.5rem;
    }
    #sidebar {
        width: 80px;
    }
    .offcanvas.offcanvas-start{
        left: 80px;
    }
    .main-content.expanded {
        margin-left: 360px;
    }
}



/* slecect option */

        /* Custom styling for dropdown */
        .dropdown-container {
            position: relative;
            width: auto;
            margin-bottom: 20px;
        }

        .dropdown-header {
            background-color: #1F1F1F;
            color: #fff;
            padding: 6.5px 12px;
            border: 1px solid #FFFFFF14;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

        }

        .dropdown-header::after {
            content: "";
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='' stroke='%23e6e6e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            background-size: 16px 11px;
            width: 16px;
            height: 10px;
            position: absolute;
            right: 10px;
        }

        .dropdown-list {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #1F1F1F;
            color: #fff;
            border: 1px solid #FFFFFF14;
            border-radius: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
            opacity: 0;
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            transform: translateY(-15px); 
            margin-top: 4px;
        }

        .dropdown-item {
            padding: 6.5px 12px;
            cursor: pointer;
            position: relative;
            font-size: 14px;
            transition: .1s;
            border-radius: 4px;
            /* margin-bottom: .1px; */
        }

        .dropdown-item:hover {
            background-color: #fff;
            color: #1F1F1F;
        }

        .dropdown-item.selected:hover {
            background-color: #fff;
            color: #1F1F1F;
        }

        .dropdown-item.selected:hover::after {
            color: #1F1F1F;
        }

        .dropdown-container.active .dropdown-list {
            display: block;
            opacity: 1;
            transform: translateY(0);
            z-index: 1;
            transition: transform 0.6s ease;
        }

        .dropdown-container {
            position: relative;
            width: auto; /* Adjust as needed */
            cursor: pointer;
        }
        
        .dropdown-header {
            display: flex;
            align-items: center;
        }
        
        .dropdown-list {
            z-index: 10;
        }
        
        
        .dropdown-list .dropdown-item:hover {
            /* background-color: #f1f1f1; */
            /* margin-top: .5px; */
        }
        
        /* Show dropdown active */
        .dropdown-container.active .dropdown-list {
            display: block;
        }
        
        .dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* padding: 6.5px 12px; */
            cursor: pointer;
        }
        
        .dropdown-item p {
            display: grid;
            margin: 0;
        }

        .dropdown-item.selected {
            background-color: #fff; 
            color: #1F1F1F; 
        }

        .dropdown-item.selected .checkmark {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #1F1F1F; 
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.173 12.624l-3.704-3.704a1 1 0 011.414-1.414l2.296 2.296 6.29-6.29a1 1 0 011.414 1.414L6.173 12.624z"></path></svg>') no-repeat center;
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.173 12.624l-3.704-3.704a1 1 0 011.414-1.414l2.296 2.296 6.29-6.29a1 1 0 011.414 1.414L6.173 12.624z"></path></svg>') no-repeat center;
            transition: .2s;
        
        }

        .dropdown-item:hover ~ .dropdown-item.selected .checkmark {
            background-color: #fff; 
            color: #1F1F1F; 
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.173 12.624l-3.704-3.704a1 1 0 011.414-1.414l2.296 2.296 6.29-6.29a1 1 0 011.414 1.414L6.173 12.624z"></path></svg>') no-repeat center;
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.173 12.624l-3.704-3.704a1 1 0 011.414-1.414l2.296 2.296 6.29-6.29a1 1 0 011.414 1.414L6.173 12.624z"></path></svg>') no-repeat center;
        }

        .dropdown-item.selected:hover {
            background-color: #fff; 
            color: #1F1F1F; 
            
        }
        
        .dropdown-item.selected:hover .checkmark {
            background-color: #0a0a0a; 
        }
        .dropdown-item:hover ~ .dropdown-item.selected {
            background-color: #1F1F1F;
            color: #ffffff; 
        }
        .text-item {
            font-size: 13px;
            font-weight: 300;
            color: #928f8f;
        }

/* end */



.advanced-options input.form-control.form-control-color {
    width: 36px;
    height: 36px;
    padding: 0;
    background: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.btndark {
    width: 100%;
    background-color: #1F1F1F;
    color: #fff;
    border: .5px solid #fff;
    border-radius: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 700;
    font-size: 16px;
    transition: .5s;        
}

.btndark:hover {
    background-color: #fff;
    color: #1F1F1F;
}
span.preview {
    margin-right: 5px;
}




.header-main-content {
    border-bottom: .5px solid #424242;
}
.header-main-content .container-fluid {
    padding-top: 16.5px;
    padding-bottom: 16.5px;
}
.resolution {
    width: 297px;
}
.resolution .dropdown-container {
    margin-bottom: 0;
}

.content-img img {
    width: auto;
    /* margin-top: 4rem; */
}

.purple-buttons {
    background: #BC3CF8;
    margin-right: 22px;
    color: #fff;
    border: 0.5px solid #BC3CF8;
    border-radius: 8px;
    padding: 8px 14px;
    transition: .5s;
    /* text-transform: capitalize; */
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.purple-buttons:hover {
    background: #fff;
}

a.btn-icons-log.icons-svg-style {
    display: none;
}

a.btn-icons-log.icons-svg-style {
    background-color: #111111;
    border-radius: 100%;
    padding: 1px;
    stroke: #fff;
}

.page-section {
    position: relative; 
    min-height: 94vh;
}
@media (max-width: 1280px) and (max-height: 800px){
    .page-section {
        /* position: absolute; */
    }
}

@media (min-width: 1440px){
    .img-speedpaint-on-canva {
        width: 600px !important;
    }
}
@media (max-width: 1024px){
    .img-speedpaint-on-canva {
        width: 400px !important;
    }

}
@media (max-width: 820px) and (max-height: 1180px) {
    .resolution {
        width: 230px;
    }
    .purple-buttons {
        margin-right: 0;
        font-size: 14px;
    }
}
@media (max-width: 1024px) and (max-height: 600px) {
    .page-section {
        position: relative !important;
    }
}


@media (max-width: 540px)  and (max-height: 720px)  {
    .page-section {
        position: relative !important;
    }
}
.ratio.ratio-1x1.border-radius-24 {
    border: 12px solid #000;
}
.post-blog-article .menu-items-icons a {
    padding: 10px 12px;
    border-radius: 8px;
    transition: .5s;
    background: #060606;
}
.post-blog-article .menu-items-icons a:hover {
    background: #060606;
    /* opacity: .8; */
}
@media (max-width: 992px) {
    .new-subscription .accordion p span {
        font-weight: 700;
        margin-right: 2px;
    }
    .new-subscription .accordion-button {
        line-height: 1.8;
    }
    .new-subscription .accordion button.accordion-button {
        font-size: 15px;
    }
    .share-icons-social-media {
        margin-right: 26px;
    }
    .post-blog-article p {
        font-size: 15px;
    }
    .btn-try {
        border: 1.2px solid #fff;
        padding: 10px 18px;
        font-size: 15px;
    }
    .hero-home-page {
        padding-bottom: 40px !important;
    }
    .hero-home-page .font-size-24 {
        font-size: 20px;
        margin-bottom: 0;
    }
    .upload-img{
        width: 250px;
    }
    .frequently-asked-questions .font-size-48,
    .what-our .font-size-48,
    .how-it-works .font-size-48,
    .hero-home-page .font-size-48 {
        font-size: 28px;
        font-weight: 600;
    }
    .hero-home-page .font-size-48.lh-sm {
        line-height: 1.5 !important;
    }
    .how-it-works .font-size-40 {
        font-size: 28px;
        font-weight: 600;;
        line-height: 1.25;
    }
    .hero-home-page .font-size-40 {
        font-size: 28px;
        font-weight: 600;
        line-height: 1.25;
        padding-left: 25px;
        padding-right: 25px;
    }
    .content-speedpaint-on-canva::before {
        left: 0;
    }
    .img-how-it-works-download {
        width: 220px;
    }
    .img-speedpaint-on-canva {
        width: 320px !important;
    }
    .img-how-it-works {
        width: 250px;
     }
    .menu-items-icons a.twitter {
        border-radius: 18px 18px 0 0;        
    }
    .menu-items-icons a.discord {     
        border-radius: 0 0 0 17px;    
    }
    .icon-footer {
        width: 15px;
        height: 15px;
    }
    
    .menu-items-icons a {
        padding: 12px 18px;
        font-size: 12px;
    }
    .card-speed-paint h1 {
        font-size: 48px;
    }
    .new-subscription .new-subscription h2,
    .new-subscription .font-size-42 {
        font-size: 28px;
    }
    .font-size-42 {
        font-size: 34px;
    }
    .footer-top{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .menu-items-icons {
        margin-right: -16px;
    }
    
    .card-speed-paint {
        width: auto;
    }
}

@media (max-width: 375px) {
    .page-section {
        position: relative !important;
    }
}
@media (max-width: 350px) {
    .page-section {
        position: absolute !important;
    }
    .navbar a.navbar-brand {
        margin-right: 0;
    }

}
.line-height-1-4 {
    line-height: 1.4;
}
.line-height-1-6 {
    line-height: 1.6;
}

.new-subscription h2,
.new-subscription .font-size-42 {
    line-height: 1.6;
}

.p-right-26 {
    padding-right: 0;
}

@media (min-width: 992px) {
    .new-subscription .accordion p span {
        font-weight: 800;
        margin-right: 2px;
    }
    .new-subscription .accordion-button {
        line-height: 3;
    }
    .new-subscription .accordion button.accordion-button {
        font-size: 18px;
        font-weight: 500;
    }
    .p-right-26 {
        padding-right: 26px;
    }
    .new-subscription h2 {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.6;
    }
    .btn-close.btn-close-white {
        display: none;
    }
    .btn-try {
        border: 1.2px solid #fff;
        padding: 10px 18px;
        font-size: 18px;
        font-weight: 600;
        transition: .3s;
    }
    .btn-try:hover {
        background: linear-gradient(102.32deg, #8024ad 10.66%, #630ee1 99.78%);
    }
    .mx-width-500 {
        max-width: 540px;
    }
    .content-speedpaint-on-canva::before {
        content: "";
        background: linear-gradient(102.32deg, #8024ad 10.66%, #630ee1 99.78%);
        filter: blur(130px);
        position: absolute;
        width: 180px;
        height: 180px;
        top: 70px;
        z-index: -1;
        left: 250px;
    }
    .img-speedpaint-on-canva {
        width: 520px;
        height: auto;
    }
    .upload-img{
        width: 444px;
    }
    .img-how-it-works {
        width: 404px;
        /* height: 263px; */
    }
    .img-how-it-works-download {
        width: 273px;
        height: 273px;
    }
    .mx-width-580 {
        max-width: 580px;
    }
    .mx-width-470 {
        max-width: 470px;
    }
    .mx-width-320 {
        max-width: 320px;
    }
    .mx-width-370 {
        max-width: 370px;
    }
    
    .mx-width-250 {
        max-width: 250px;
    }

    .card-speed-paint h1 {
        font-size: 56px;
    }
    .font-size-42 {
        font-size: 42px;
    }
    .font-size-48 {
        font-size: 48px;
    }
    .font-size-52 {
        font-size: 52px;
    }
    .footer-top{
        padding-top: 95px;
        padding-bottom: 50px;
    }
    
    .menu-items-icons a.twitter {
        border-radius: 24px 24px 0 0;        
    }
    .menu-items-icons a.discord {     
        border-radius: 0 0 0 24px;    
    }
    .icon-footer {
        width: 20px;
        height: 20px;
    }
    
    .menu-items-icons a {
        font-size: 18px;
        padding: 14px 29px;
        transition: .5s;
    }

    .card-speed-paint {
        width: 530px;
    }
    .page-section h1 {
        font-size: 50px;
    }
    form.login {
        width: 465px;
    }
    .btnpurle {
        font-size: 18px;
    }
    .btn-login-email {
        font-size: 18px;
    }
    .menu-item-footer li a {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .subscription .card-price h6 {
        max-width: 150px;
    }
    .menu-item-footer li a {
        font-size: 16px;
    }
    
    .menu-item-footer ul {
        padding-left: 0;
    }
    .menu-item-footer ul li {
        list-style: none;
    }
    .btn-login-email,
    .btnpurle {
        font-size: 16px;
    }
    .page-section h1 {
        font-size: 32px;
    }

    .col-img-fluid {
        margin-top: 110px;
    }
    .navbar .container-fluid {
        flex-wrap: initial;
        justify-content: space-between;
    }
    .navbar {
        height: 58px;
    }
    .navbar a {
        font-size: 14px;
    }
    .z-2 {
        z-index: 0 !important;
    }

    .navbar .logo img {
        width: 130px;
    }
    
    .navbar.login-page .logo img {
        width: 160px;
    }
    
    .navbar a.btn-log-in,
    .navbar a.btn-sign-up {
        margin-left: .8rem;
        padding: 5px 8px;
        /* font-size: 14px; */
    }

/* }

@media (max-width: 768px) { */
    .offcanvas.offcanvas-start h3 {
        display: block;
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
    }
    .purple-buttons {
        margin-right: 0;
        padding: 7px;
        font-size: 12px;
        font-weight: 600;
    }
    #sidebar {
        width: 100%; 
        height: auto; 
        position: fixed;
        bottom: 0; 
        top: auto; 
        left: 0;
        z-index: 0; 
        flex-direction: row; 
        justify-content: center; 
        padding-top: 0;
        padding-bottom: 4px;
        border-top: 0.5px solid #ffffff14; 
        border-right: none; 
    }
    .layout .side-menu a {
        color: #fff;
    }
    .sidebar-item {
        padding: 8px 12px;
        font-size: 12px;
    }

    .sidebar-icon {
        font-size: 18px;
    }

    .main-content {
        margin-left: 0; 
        /* margin-top: 56px;  */
    }

    .main-content.expanded {
        margin-left: 0; 
    }

    .offcanvas.offcanvas-start {
        width: 100%; 
        left: 0; 
    }
/* }

@media (max-width: 768px) { */
    .bg-grey-800-list {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    .offcanvas.offcanvas-start.show + .navbar {
        /* z-index: 0; */
    }
    
    .bg-grey-800-list {
        background-color: #161616;
        padding-left: 27px;
        padding-right: 27px;
        padding-bottom: 20px;
        border-radius: 36px 36px 0 0;
        padding-bottom: 100px;
    }
    .bg-grey-800-list .offcanvas-body {
        /* overflow-y: visible; */
    }
    .resolution .dropdown-item {
        padding: 5px 10px;
    }
    .resolution .title-Choose {
        font-size: 18px;
    }
    .offcanvas.offcanvas-start.bg-grey-800 {
        justify-content: end;
    }
    
    .offcanvas.offcanvas-start {
        width: 100%; 
        height: auto; 
        position: fixed;
        bottom: 0; 
        left: 0;
        z-index: 1050; 
        background-color: #0a0a0aad; 
        transition: transform 0s ease; 
        transform: translateY(100%); 
        z-index: 0;
    }

    .header-main-content {
    }
    .header-main-content .container-fluid {
        background-color: #161616;
    }
    .resolution {
        width: auto;
    }
    
    .resolution .bg-dropdown-list {
        background-color: #161616;
        width: 100%; 
        height: auto; 
        position: fixed;
        bottom: 0; 
        margin-bottom: 0;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 70px;
        border-radius: 36px 36px 0 0;
    }
    .resolution .dropdown-list {
        background-color: #0a0a0aad;
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100vh; 
        border-radius: 0; 
        z-index: 1050; 
        margin: 0;
        z-index: 1;
    }
    

    .resolution .dropdown-close {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 15px;
    }
    .resolution .close-button {
        display: block;
        background-color: #161616;
        color: #afafaf;
        border: none;
        border-radius: 5px;
        padding: 1px 8px;
        text-align: center;
        width: unset;
        font-size: 30px;
        position: relative;
        left: 70px;
    } 

}


.bg-dropdown-list {
    padding: 8px 2px;
    margin-bottom: 0;
}



@media (min-width: 769px) {
    .page-section {
        /* position: absolute; */
    }
    .resolution .dropdown-item {
        padding: 6px 10px;
    }
    /* .gradient-border, */
    .dropdown-close,
    .close-button {
        display: none;
    }
    .navbar a {
        font-size: 16px;
    }
    .navbar a.btn-log-in, .navbar a.btn-sign-up {
        margin-left: 1.5rem;
    }

}



/* .close-button:hover {
    background-color: #ff3333;
} */


.offcanvas-body {
    overflow-y:hidden;
}

.off_canvas-header {
    display: flex;
    align-items: center;
}


/* Login */


.page-section {
    bottom: 0;
    top: 0;
    background-image: url(../image/auth_bg.jpg);
    background-size: cover; 
    background-position: center; 
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    /* min-height: 91vh; */
    display: flex;
    justify-content: center;

    /* width: 100%;
    height: 100%; 
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 91vh; */

    align-items: center; 
    /* position: absolute; */
}



.page-section h1 {
    /* font-size: 50px; */
    font-weight: 700;
    color: #ffffff;
}
.text-auth_detail{
    font-size: 18px;
    font-weight: 400;
    color: #878787;
}

form.login {
    /* width: 445px; */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pop-up-width label,
.login label {
    opacity: .9;
    color: #E6E6E6;
}

.btn-login-email {
    /* font-size: 18px; */
    font-weight: 600;
    border: .5px solid #a9a9a9;
    width: 100%;
    color: #fff;
    padding: 8px;
    border-radius: 12px;
    background: #0A0A0A;
    transition: .4s;
}
.btn-login-email:hover {
    background: #fff;
    color: #111111;
}

.icons-google {
    margin-right: 4px;
}
.icons-google svg{
    width: 24px;
    height: 24px;
}
.btn-pop-up,
.btnpurle {    
    color: #BC3CF8;
    /* font-size: 18px; */
    font-weight: 600;    
    transition: .4s;
    text-decoration: none;
}
.btnpurle:hover { 
    opacity: .8;
}
button.btnpurle {
    background: #BC3CF8;
    border: 1px solid #BC3CF8;
    color: #ffffff;
    width: 100%;
    padding: 8px;
    border-radius: 12px;
    opacity: 1;
}
button.btnpurle:hover {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #0A0A0A;
}
.pop-up-width form input,
.page-section form input {
    border: 1px solid #FFFFFF14;
    border-radius: 8px;
    padding: 6.5px 16px;
    width: 100%;
}
.input:focus-visible,
.input:focus
 {
    /* border: 1px solid #FFFFFF14; */
}
input::-webkit-input-placeholder {
    color: #878787;
}

input:-moz-placeholder {
    color: #878787;
}

input{
    color: #fff;
    /* transition: .5s; */
}

/* end */

input:focus-visible {
    outline-offset: 0px;
    outline:.5px solid #a9a9a9;
}

.form-check .form-check-input {
    /* width: 26px;
    height: 26px; */
    background-color: #1F1F1F;
}



.footer-main {
    background-image: url(../image/footer_bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background-position: center; */    
    width: 100%;
    height: 100%;
}

.menu-item-footer li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-weight: 300;
    transition: .5s;
}

.menu-item-footer li::marker {
    color: #fff;
}

.menu-item-footer li a:hover {
    text-decoration: underline;
    opacity: .8;
}

.text-16 {
    font-size: 16px;
    font-weight: 400;
}

.menu-items-icons a {
    color: #fff;
    background: linear-gradient(90deg, #1f1f1f, #060606);
    transition: .5s;
}
.menu-items-icons a.twitter {
    border-right: .5px solid #424242;
    border-left: .5px solid #424242;
    border-top: .5px solid #424242;
    border-bottom: .5px solid #424242;    
}
.menu-items-icons a.discord {
    border-right: .5px solid #424242;
    border-left: .5px solid #424242;
    border-bottom: .5px solid #424242;
}

.icons-footer {
    margin-right: 10px;
}

.icon-footer {
    fill: #fff;
    margin-top: -3px;
    transition: .1s;
}

.menu-items-icons a:hover {
    background: #ffffff;
    color: #1F1F1F;
}
.menu-items-icons a:hover .icon-footer {
    fill: #1F1F1F;
}
.share-icons-social-media .menu-items-icons a:hover .icon-footer {
    fill: #c4bfbf;
}

/* page profile */
/* .sc */
.page-profile{
    background: #161616;
}

.card-speed-paint {
    background-image: url(../image/subscription_bg.png);
    background-size: 100% 100%;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #2e2e2e;
    --bs-card-bg: none;
}
.card-speed-paint.yearly {
    background-image: url(../image/yearly.png);
    background-size: 100% 100%;
}

.data-icons img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: -3px;
}
.card-speed-paint h6 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
}


.card-speed-paint h1,
.page-profile h4 {
    font-family: "Red Hat Display", sans-serif;
}
.card-speed-paint h1 {
    color: #ffffff;
    /* font-size: 56px; */
    font-weight: 800;
}

.card-speed-paint h1 span {
    font-family: "Mulish", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-left: 8px;
}

.remaining {
    background: linear-gradient(90deg, #1F1F1F 0%, #060606 100%);
    border: 1px solid #2e2e2e;
    padding: 10px 14px;
    border-radius: 8px;
}
.card-speed-paint ul {
    padding: 0;
    /* border-top: 1px solid #ffffff34 */
}
.card-speed-paint li {
    font-size: 18px;
    font-weight: 400;
    list-style: none;
    margin-top: 16px;

}
.card-speed-paint li img {
    width: 20px;
    height: auto;
    margin-right: 15px;
}
.page-profile h4 {
    font-size: 28px;
    font-weight: 700;    
}
.btn-pop-up {
    font-size: 18px;
    font-weight: 700;
}
.btn-pop-up:hover {
    color: #8024AD;
}
.pop-up-width {
    /* --bs-modal-width: 565px;    */
    /* --bs-modal-bg: #161616; */
}
.modal-header {
    border-bottom:none;    
}
.pop-up-width .modal-content {    
    border: 1px solid #FFFFFF14;
    border-radius: 16px;
    background-color:#161616;
}
.modal.fade.show {
    background: #00000094;
}
.pop-up-width .modal-title {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}
.pop-up-width .btn-close {
    --bs-btn-close-bg:none;
    --bs-btn-close-opacity:none;
}
.pop-up-width .modal-footer {
    border-top:none;
}
.modal-footer button.btnpurle {
    width: auto;
    border: 2px solid #BC3CF8;
}
.modal-footer button.btnpurle:hover {
    border: 2px solid #ffffff;
}
.btnpurle.close {
    background: #161616;
    border: 2px solid #BC3CF8;
    color: #BC3CF8;
    transition: .5s;
}
/* end */

/* page subscription */
.h1 {   
    font-size: 64px;
    font-weight: 700;
    line-height: 80px;
    letter-spacing: 0.01em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* end */

/* page blog */
.post-blog-article {
    background-image: url(../image/bg-articel-post-blog.png);
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    /* background-position: top; */
}

.page-blog {
    bottom: 0;
    top: 0;
    background-image: url(../image/blog_bg.jpg);
    background-size: cover;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-gradient-purple {
    color: #B71DF6; 
    background: linear-gradient(81deg, #8200e5 2.66%, #5e00f5 57.45%, #5F0BE7 99.78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-blog {
    padding: 4px;
    /* border: 1px solid #fff; */
    border-radius: 16px;
    background: linear-gradient(90deg, #1F1F1F 0%, #060606 100%);
    position: relative;
    padding: 3px;
    /* border: 1px solid #696969;
    border: 1px solid; */
    border: 1px solid #4a4747;
    /* border-image-source: linear-gradient(90deg, #696969 0%, #232323 100%); */
}

.card-blog h5 {
    font-size: 28px;
}
.card-blog a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s;
}

.card-blog a:hover {
    opacity: 0.5;
    border: 1px solid #4a4747;    
}
.card-blog .card-body {
    border-top: 2.5px dashed #424242;
}

/* end */

/* Home page */

.hero-home-page {
    padding-bottom: 80px;
    background-image: url(../image/hero_bg-min.jpg);
    background-size: 100% 100%;    
}

.color-gradient-purple-2 {
    background: linear-gradient(90deg,#5f0be7,#b71df6,#5f0be7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.choosefile {
    background: #FFFFFF14;
    border: 2px dashed #FFFFFF66;
    border-radius: 24px;
    /* max-width: 525px; */
    width: 100%;
    cursor: pointer;
    transition: .5s;
}
.choosefile:hover {
    opacity: .8;
}
.img-choosefile img{
    width: 132px;
    height: 132px;
}


/* end */

.gradient-border {
    display: inline-block;
    padding: 1.2px; 
    border-radius: 30px; 
    background: linear-gradient(102.32deg, #8024AD 10.66%, #630EE1 99.78%);
}

.button-content {
    display: inline-block;
    padding: 10px 30px; 
    font-size: 16px;
    font-weight: bold;
    color: #fff; 
    text-decoration: none; 
    background: #1F1F1F; 
    border: none;
    border-radius: 50px; 
    cursor: pointer;
    transition: all 0.3s ease; 
}   

.how-it-works .button-content {
    cursor: auto;
    padding: 9px 18px;
}
.content-speedpaint-on-canva {
    position: relative;
}



.bg-traparent {
    background: transparent;
}

.accordion-button:not(.collapsed) {
    background-color:#0A0A0A;
}
.accordion-button{
    transition: .5s;
}
.accordion-button:not(.collapsed) u {
    color: #fff;
}
u.color-gray-500 {
    transition: .5s;
}
.accordion-button:hover u {
    color: #fff;
}

.frequently-asked-questions .accordion {
    --bs-accordion-border-color: none;
    --bs-accordion-bg:none;
    --bs-accordion-border-radius: none;
}

.border-top-bottom-1 {
    border-top: 1px solid #878787;
    border-bottom: 1px solid #878787;
}

.carousel-control-next {
    width: 80px;
    height: 40px;
    top: inherit;    
    left: 100px;
    right: 0;
    margin: auto;
    border-radius: 20px;
    border: 1px solid #1f1f1f;
    background-color: #1f1f1f;
    opacity: 1;
}
.carousel-control-prev {
    width: 80px;
    height: 40px;
    top: inherit;
    left: 0;
    right: 100px;
    margin: auto;
    border: 1px solid #1f1f1f;
    background-color: #1f1f1f;
    border-radius: 20px;
    opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-image: none;
}

.accordion-button:not(.collapsed)::after,
.accordion-button:hover::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3e%3ccircle cx='24' cy='24.0001' r='24' fill='url(%23paint0_linear_1054_2145)'/%3e%3cpath d='M24 31.0001L24 17.0001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M17 24.0001L24 17.0001L31 24.0001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear_1054_2145' x1='4.57143' y1='7.60988' x2='54.3197' y2='18.4728' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%238024AD'/%3e%3cstop offset='1' stop-color='%23630EE1'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 38px;
    width: 38px;
    height: 38px; 
   
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3e%3ccircle cx='24' cy='24.0002' r='23.5' stroke='%23424242'/%3e%3cpath d='M24 17.0002V31.0002' stroke='%23424242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M31 24.0002L24 31.0002L17 24.0002' stroke='%23424242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    transition: .5s;
    background-size: 38px;
    width: 38px;
    height: 38px; 
   
}


/* Input file styling */
#fileInput {
    display: block;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #555;
}

/* Progress bar container */
.progress-bar-container {
    width: 300px;
    background-color: #0000004D;
    border-radius: 8px;
    overflow: hidden;
    height: 14px;
    display: none; 
    margin: auto;

}


/* Progress bar */
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4db84b, #4CD849);
    transition: width 0.4s ease;
    border-radius: 8px;
}

.image-preview-container {
    position: relative;
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 6px;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 93%;
    transform: translate(-50%, -50%);
}
.icons-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#previewImage {
    width: 300px;
    height: 200px;
    object-fit: contain; 
    display: none;
}
.hidden {
    display: none;
}

.form-check .form-check-input {
    background-color: #1F1F1F;
    color: #fff;
    border: 1px solid #ffffff21;
    border-radius: 4px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    appearance: none;
    width: 26px;
    height: 26px;
    background-color: #1F1F1F;
    color: #fff;
    border: 1px solid #ffffff21;
    border-radius: 4px;
    display: grid;
    place-items: center; 
    margin: 0;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"]::before {
    content: ""; 
    width: 12px;
    height: 12px;
    transform: scale(0); 
    background: #F7F7F7;
    clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 30%, 80% 15%, 43% 77%);
    transition: transform 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:checked::before {
    transform: scale(1); 
}

.subscription .fade:not(.show) {
    opacity: initial;
}
.subscription .fade {
    transition: 0;
}

ul.nav-pills {
    background: #2f203f;
    padding: 10px;
    border-radius: 40px;
}

button.nav-link {
    padding: 12px 26px;
}

button.nav-link:hover,
button.nav-link,
button.nav-link.active {
    border-radius: 40px;
    color: #fff;
}
.nav-pills .nav-link.active {
    background: linear-gradient(90deg, #1F1F1F 0%, #060606 100%);
    border-radius: 40px;
    border: 1px solid #2e2e2e;
}
.nav-pills .show>.nav-link {
    border-radius: 40px;
    transition: .5s;    
    
}
.nav-pills .nav-link{
    border-radius: 40px;    
    border: 1px solid #2f203f;
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.nav-pills .nav-link:hover {
    background: linear-gradient(90deg, #1F1F1F 0%, #060606 100%);
    opacity: .8;
}
.btn-white:hover,
.btn-white {
    background: #fff;
    width: 100%;
    color: #000;
    padding: 6px;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid #fff;
    transition: .2s;
}

.btn-white:hover {
    opacity: .7;
}

.input-type-range {
    border: 1px solid #FFFFFF14;
    background: #1F1F1F;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    text-align: center;
}





/* New subscription years */


.padding-28px {
    padding: 28px;
}

.border_bottom {
    border-bottom: 1px solid #201e1e;
}
hr {
    border: 0;
    border-top: 1px solid #b7b0b078;
}

.pay-as-you-go .card .card-body {
    border: 1px solid #333436;
    border-radius: 2rem;

}
.new-subscription .card {
    border: 1px solid #333436;
}


.new-subscription h2,
.new-subscription h1 {
    font-family: "Poppins", sans-serif;
}

.new-subscription .card {
    background: #121212;
    border-radius: 2rem;
}
.color-bluish-gray {
    color: #8697a4;
}
.color-light-gray {
    color: #c8c8c8;
}

.text_sm {
    font-size: 16px;
    font-weight: 400;
}

.most-popular {
    font-size: 13px;
    font-weight: 600;
    color: #121212;
    background: #ffc83e;
    padding: 2px 12px;
    border-radius: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    height: 26px;
}

.new-subscription .card h4 {
    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

.item-price-card p {
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 400;
}

.pay-as-you-go h5,
.item-price-card h5 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2rem;
}

.btn-create-account:hover {
    opacity: .8;
}
.btn-create-account:hover,
.btn-create-account {
    width: 100%;
    background: #252728;
    border: 1px solid #2a2b2b;
    color: #c8c8c8;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    transition: .5s;
    letter-spacing: .3px;
}

.text-month {
    font-size: 20px;
    font-weight: 400;
    margin-left: 10px;
}

.card.card-most-popular{
    border:2px solid #ffc83e;
}

.btn-subscribe:hover {
    opacity: .8;
}
.btn-subscribe:hover,
.btn-subscribe {
    width: 100%;
    background: #0f70e6;
    border: 1px solid #0f70e6;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    transition: .5s;
    letter-spacing: .3px;
}
.svg-icons {
    position: absolute;
    top: -45px;
    right: -20px;
}

.new-subscription .form-select {
    background-color: #121212;
    border: 1px solid #8697a4;
    border-radius: 8px;
}

.new-subscription .form-floating>label {
    padding: .9rem .75rem;
}

.new-subscription .form-floating>.form-select~label {
    color: #8697a4;
}

select.form-select {
    color: #c8c8c8;
    font-size: 18px;
}

.new-subscription .form-floating>.form-select~label::after  {
    background-color: transparent;
}

.new-subscription .form-select option {
    background-color: #c8c8c8 !important;
    color: #333 !important;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 300;
}

.new-subscription .accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}
.new-subscription .accordion-button:not(.collapsed) {
    background-color: #121212;    
}

.new-subscription .form-select {
    background-size: 20px 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238697a4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}
.new-subscription .card .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8c8c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: .9rem;
}
.new-subscription .accordion {
    --bs-accordion-border-color: #333436;
}
.new-subscription .accordion {
    border-bottom: 1px solid #121212;
}

.new-subscription .accordion .accordion-item:last-of-type {
    border-bottom: none;
}

.new-subscription .accordion p {
    line-height: 1.8;
    font-size: 16px;
    font-weight: 400;
    /* color: #8697a4; */
}
.new-subscription p .link_info:hover {
    opacity: .9;
}
.new-subscription p .link_info {
    color: #0f70e6;
    transition: .5s;
}


.new-subscription .accordion-body,
.new-subscription .accordion-button {
    padding: 1rem 0;
    background-color: #121212;
    color: #c8c8c8;
    font-family: "Poppins", sans-serif;
}

.btn-faq:hover {
    opacity: 0.7;
}
.btn-faq:hover,
.btn-faq {
    font-size: 16px;
    font-weight: 400;
    background: #c8c8c8;
    border-radius: 30px;
    font-family: "Poppins", sans-serif;
    transition: .5s;
}
.btn-faq .fa-up-right-from-square {
    margin-left: 6px;
}

.new-subscription ul.nav-pills {
    background: #2f203f;
    padding: .5rem;
    border-radius: 9999px;
}
.new-subscription button.nav-link {
    padding: 9px 18px;
}
.new-subscription .nav-pills .nav-link {
    font-weight: 500;
}

.new-subscription .item-price-card p strong {
    color: #c8c8c8;
    font-weight: 600;
}
.pay-as-you-go .col-md-7 p {
    color: #8697a4;
    margin-bottom: 4px;
    line-height: 1.6;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.billing-appendix {
    margin-top: 14px;
    font-family: "Poppins", sans-serif;
    color: #c8c8c8;
    font-size: 12px;
}

/* end */