* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none !important;
}

body {
    font-family: "Outfit", sans-serif !important;
}

.form-select:focus {
    box-shadow: none !important;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield; /* Firefox */
}

.custom-container {
    max-width: 1140px !important;
    width: 100% !important;
    margin: auto;
}

.max-w-1140 {
    max-width: 1140px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in number input for Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* ========================================== Header page ========================================== */
.main_header {
    position: relative;
}

.main_header .navbar {
    /*position: absolute;*/
    top: 0;
    z-index: 1;
}

.header_nav {
    padding-right: 60px;
}

.header_nav .nav-item > a {
    font-weight: 400;
    font-size: 14px;
}

.header_search {
    position: relative;
}

.header_search .form-control {
    background-color: #f6f6f6;
    border: none;
    border-radius: 50px;
    height: 32px;
    padding: 0;
}

.header_search button {
    position: absolute;
    top: 3%;
    right: 4%;
    width: 30px;
    height: 30px;
    object-fit: cover;
    border: 1px solid #f6f6f6;
    border-radius: 50px;
    background-color: #fff;
}

.header_search button img {
    width: 18px;
    height: 18px;
    vertical-align: text-top;
}

.main_header .navbar-light .navbar-toggler {
    border: none !important;
}

.main_header .navbar-toggler:focus {
    box-shadow: none;
}

.main_header .navbar-light .navbar-toggler-icon {
    background-image: url(../images/icons/menu.png) !important;
}

/* ========================================== Home page ========================================== */

/*---------------- home banner ----------------*/
/*    .banner_sec {*/
/*        position: absolute;*/
/*        top: 0;*/
/*        left: 0;*/
/*        right: 0;*/
/*        z-index: -1;*/
/*    }*/
.home_banner img {
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    width: 100%;
}

.banner_desc {
    position: absolute;
    top: 106px;
    padding: 0 16px 0 16px;
}

.banner_desc h1 {
    font-size: 64px;
    font-weight: 600;
    color: #fff;
    width: 85%;
}

.banner_desc h2 {
    font-size: 52px;
    font-weight: 600;
    color: #fff;
    padding-top: 50px;
}

.banner_desc h1 span {
    color: #fff;
    transition: all 0.5s ease;
}

.banner_desc h1:hover span {
    background: linear-gradient(to right, #BE15EC, #0A0DFE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.banner_desc p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    width: 70%;
}

/*.banner_page_txt {*/
/*    width: 60% !important;*/
/*}*/

/*---------------- start input_output ----------------*/
.formatter .conver_btn {
    height: 44px !important;
    line-height: 35px !important;
    background: linear-gradient(to right, #0A0DFE, #BE15EC);
    color: #fff !important;
    font-family: "Outfit", sans-serif;
    font-size: 14px !important;
    border: none;
    border-radius: 10px !important;
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formatter .nice-select:after {
    border-bottom: 3px solid #fff !important;
    border-right: 3px solid #fff !important;
    width: 7px !important;
    height: 7px !important;
}

.formatter .nice-select .option {
    font-family: "Outfit", sans-serif;
    font-size: 14px;
}

.formatter .nice-select .list {
    max-height: 200px;
    overflow-y: auto;
    color: #000 !important;
    border-radius: 10px !important;
}

.input_data {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 27px;
    box-shadow: 0px 0px 17.6px 2px #BE15EC0D;
}

.input-box {
    position: relative;
    border: 1px solid transparent;
    border-radius: 15px;
    height: 300px;
    padding: 15px;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #0A0DFE, #BE15EC);
}

.input-box::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #fff;
    border-radius: 14px;
    z-index: 0;
}

.input-box textarea, .calculator_input, .input-box table {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 90%;
    padding: 0;
    border: none;
    /*border-radius: 12px;*/
    resize: none;
    font-size: 16px;
    background-color: transparent;
    color: #333;
    outline: none;
    margin-top: 34px;
}

.password-ganerator .nice-select {
    top: 23% !important;
    border: 1px solid #e2e7f1 !important;
    border-radius: 10px;
}

.input-box .psw_lable {
    position: absolute;
    top: 15% !important;
}

.input-box .nice-select .list {
    width: 100%;
    border: 1px solid #e2e7f1 !important;
    border-radius: 10px;
    box-shadow: none;
    max-height: 114px;
    overflow-y: auto;
    margin: 0 !important;
}

.compound_frequency {
    background: #fff;
    border-radius: 10px;
    font-weight: 400;
    color: gray;
    border: 2px solid #e2e7f1 !important;
    outline: transparent;
}

.psw_code {
    position: absolute;
    top: 46%;
}

.psw_code span {
    font-size: 14px;
}

.salary_input {
}

.input_label {
    position: absolute;
    top: -14px;
    left: 25px;
    background: #fff;
    padding: 6px 16px;
    width: 150px;
    border-radius: 20px;
    font-weight: bold;
    color: #111;
    border: 1px solid #e0d5f8;
    background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #0A0DFE, #BE15EC) border-box;
    border: 1px solid transparent;
    text-align: center;
}

.calculator_input input {
    background: #fff;
    padding: 6px 16px;
    width: 100%;
    height: 42px;
    border-radius: 10px;
    font-weight: 400;
    color: gray;
    border: 2px solid #e2e7f1;
    outline: transparent;
}

.calculator_input {
    font-size: 14px !important;
}

.buttons {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    background: linear-gradient(90.7deg, #e7e6fe 0.34%, #f7e8fd 99.66%);
    border-radius: 10px;
    padding: 5px 10px;
}

.buttons button {
    background: transparent;
    border: none;
    color: #000;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.buttons button img {
    height: 18px;
    width: 18px;
}

.buttons span {
    margin: 0 5px;
    background: linear-gradient(91.23deg, #0A0DFE 48.95%, #BE15EC 58.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.4;
}

/*---------------- end input_output ----------------*/

/*---------------- start manage_tools ----------------*/
.manage_tools a {
    text-decoration: none !important;
}

.tools_card, .tools_card_1 {
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0px 0px 8.4px -2px #BE15EC1F;
    padding: 10px;
    height: 100%;
}

.tools_card {
    border: 1px solid transparent;
    transition: 0.5s ease-in;
}

.tools_card img, .tools_card_1 img {
    border: 0.25px solid #9F9F9F;
    border-radius: 50%;
    padding: 10px;
}

.tools_card h5, .tools_card_1 h5 {
    font-weight: 500;
    font-size: 20px;
    color: #000 !important;
}

.tools_card p, .tools_card_1 p {
    font-weight: 400;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    color: #000 !important;
}

.tools_card:hover {
    border: 1px solid transparent;
    border-radius: 11px;
    /*background-origin: border-box;*/
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #0A0DFE, #BE15EC);
}

/*---------------- end manage_tools ----------------*/

/*---------------- start manage_tools_detail ----------------*/
.manage_tools_detail h2, .customer-review h2 {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding: 30px 0;
    background: linear-gradient(91.23deg, #0A0DFE 40.95%, #BE15EC 65.38%);
    /*background: linear-gradient(to left, #0A0DFE, #BE15EC);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tools_img img {
    background: linear-gradient(124.88deg, #e7e6fe 22.18%, #f7e8fd 89.24%);
    border: none;
    border-radius: 50%;
    padding: 6px;
    margin-left: -10px;
}

.tools-button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: -4.1%;
}

.tools-body {
    height: 20px;
    background: linear-gradient(124.88deg, #e7e6fe 22.18%, #f7e8fd 89.24%);
    padding: 0 20px;
    display: flex;
    align-items: center;
}

/*---------------- end manage_tools_detail ----------------*/

/*---------------- start customer-review ----------------*/
.review_form {
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    background: #FFFFFF;
    border-radius: 9px;
    padding: 20px 30px;
}

.review i {
    font-size: 26px;
}

.review_data label {
    font-size: 14px;
    color: #9F9F9F;
}

.review_button button {
    font-size: 14px;
    color: #9F9F9F;
    background: #F2F2F2BF;
}

.review_card {
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    background: #FFFFFF;
    border-radius: 11px;
    padding: 15px 20px;
}

.review_card h6 {
    font-size: 18px;
}

.review_card p {
    font-size: 14px;
}

/*---------------- end customer-review ----------------*/

/*---------------- start faq_sec ----------------*/
.faq_sec h2 {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding: 30px 0;
    background: linear-gradient(91.23deg, #0A0DFE 48.95%, #BE15EC 53.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq_sec .accordion-item {
    box-shadow: 0px 0px 4.5px 0px #BE15EC1F;
    background-color: #FFFFFF;
    border-radius: 9px !important;
    font-size: 14px;
}

.faq_sec .accordion-button {
    box-shadow: none;
    background: #FFFFFF;
    border-radius: 9px !important;
    font-size: 14px;
    padding: 10px 20px;
}

.faq_sec .accordion-body {
    color: #9F9F9F;
    font-size: 14px;
    padding: 0 20px 16px 20px;
}

.faq_sec .accordion-button::after {
    background-image: url(../images/icons/pluse.png) !important;
    background-size: cover !important;
    height: 34px;
    width: 34px;
    /*background: #FCFDFF;*/
    /*box-shadow: 0px 0px 2px 0px #BE15EC1F;*/
    /*border-radius: 8px;*/
}

.faq_sec .accordion-button:not(.collapsed)::after {
    background-image: url(../images/icons/minuse.png) !important;
    background-size: cover !important;
    height: 34px;
    width: 34px;
}

.faq_sec .accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: #fff;
    color: #000;
}

.faq_sec .accordion-button:focus {
    box-shadow: none !important;
    border: none !important;
}

/*---------------- end faq_sec ----------------*/

/*---------------- start popular_category ----------------*/
.popular_category h2 {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding: 30px 0;
    background: linear-gradient(91.23deg, #0A0DFE 48.95%, #BE15EC 54.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.category {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    padding: 20px 0 20px 40px;
    border-radius: 15px;
}

.cat_item ul {
    list-style: none;
}

.cat_item ul {
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    color: #000;
}
.cat_item ul li a {
    color: #000 !important;
}

.cat_item {
    border-right: 0.25px solid transparent; /* fallback */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), linear-gradient(57.99deg, #0A0DFE 69.24%, #BE15EC 98.26%);
}

/*---------------- end popular_category ----------------*/

/* ========================================== Blogs page ========================================== */

/*---------------- start blogs ----------------*/
.blogs a {
    text-decoration: none !important;
}

.blog_item {
    position: relative;
}

.blog_date {
    position: absolute;
    top: -5px;
    right: 21.5px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(90.33deg, #0A0DFE 0.26%, #BE15EC 99.74%);
    border-radius: 50px;
    padding: 5px 10px;
}

.blog_item h3, .detail_item h3 {
    font-size: 24px;
    font-weight: 500;
    color: #000114;
    padding-top: 10px;
}

/*---------------- end blogs ----------------*/

/*---------------- start blog-detail ----------------*/
.detail_date {
    position: absolute;
    /*top: -5px;*/
    right: 80px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(90.33deg, #0A0DFE 0.26%, #BE15EC 99.74%);
    border-radius: 50px;
    /*padding: 8px 15px;*/
    width: 160px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center
}

.detail_item p {
    color: #252525;
    font-size: 16px;
    font-weight: 400;
}

.detail-info li strong {
    font-weight: 600;
}

/*---------------- end blog-detail ----------------*/

/* ========================================== Contact page ========================================== */
/*---------------- start contact ----------------*/
.contact_form {
    background: #FFFFFF;
    box-shadow: 0px 0px 4.5px 0px #BE15EC1F;
    border-radius: 22px;
    padding: 30px;
}

.contact_form label {
    color: #000;
    font-size: 14px;
}

.contact_form input, .contact_form textarea {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #BE15EC17;
    border-radius: 12px;
    border: none;
    height: 49px;
}

.form-control:focus {
    box-shadow: 0px 0px 4px 0px #BE15EC17 !important;
    border: none !important;
}

.contact_btn button {
    background: linear-gradient(90.74deg, #e7e6fe 0.53%, #f7e8fd 99.47%);
    width: 189px;
    height: 53px;
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}

/*---------------- end contact ----------------*/

/* ========================================== Files Compressor page ========================================== */
/*---------------- start files compressor ----------------*/
.file-category-item h3 {
    font-size: 24px;
    font-weight: 500;
    background: linear-gradient(91.23deg, #0A0DFE 20.95%, #BE15EC 42%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.category_menu{
    background: #fff;
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    border-radius: 18px;
    padding: 30px 20px 20px 20px;
}
.file_types {
    background: #fff;
    /*clip-path: polygon(*/
    /*    -100% -100%,*/
    /*    7% 0%,*/
    /*    20% 3%,*/
    /*    79% 3%,*/
    /*    93% 0%,*/
    /*    102% 0%,*/
    /*    102% 102%,*/
    /*    0% 102%*/
    /*);*/
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    border-radius: 18px;
    padding: 30px 20px 20px 20px;
}

.file_types .accordion-item {
    border: none !important;
}

.file_types .accordion-header {
    border-bottom: 0.25px solid #cecece;
}

.file_types .accordion-button {
    padding: 16px 0 !important;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #878787;
}

.file_types .accordion-button::after {
    background-image: url(../images/icons/down-arrow.png) !important;
}

.file_types .accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: #878787 !important;
    box-shadow: none !important;
}

.file_types .accordion-button:focus {
    box-shadow: none !important;
    border: none !important;
}

.catagories-list li {
    border-bottom: 0.25px solid #cecece;
    padding: 12px 20px;
}

.catagories-list li a {
    color: #878787 !important;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    border: none;
    background-color: transparent;
    padding: 0;
    text-decoration: none;
}

.cat_buttons {
    /*position: absolute;*/
    /*right: 17px;*/
    background: linear-gradient(90.7deg, #e7e6fe 0.34%, #f7e8fd 99.66%);
    border-radius: 10px;
    padding: 5px 10px;
}

.cat_buttons button {
    background: transparent;
    border: none;
    color: #000;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.cat_buttons button img {
    height: 18px;
    width: 18px;
}

.cat_buttons span {
    margin: 0 5px;
    background: linear-gradient(91.23deg, #0A0DFE 48.95%, #BE15EC 58.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.4;
}

.category_desc h3 {
    font-size: 24px;
    font-family: "Poppins", sans-serif;
    color: #000114;
    font-weight: 600;
}

.category_desc p, .category_desc li {
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    color: #424242;
}

.recommended {
    background: #FCFDFF;
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    border-radius: 10px;
    padding: 10px 20px;
}

.recommended a {
    font-size: 16px;
    font-weight: 400;
    color: #000 !important;
    text-decoration: none !important;
}

.comment-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 0px #BE15EC1F;
    padding: 20px;
    box-sizing: border-box;
}

.comment-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.illustration {
    text-align: center;
    margin-bottom: 20px;
}

.comment-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: none;

}

.comment-input textarea {
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    font-size: 16px;
}

.toolbar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F8F8;
    border-radius: 5px;
    padding: 10px;
}

.toolbar button {
    border: none;
}

.toolbar button:hover {
    opacity: 0.9;
}

.icon {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.input-box .nice-select:after {
    display: none !important;
}

.input-box .nice-select {
    display: flex;
    align-items: center;
}

#outputSection {
    display: none;
}

#outputImageBox img,
.crop-container img {
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
}

.preview-card {
    position: relative;
    display: inline-block;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    background-color: #f8f8f8;
    max-width: 100%;
    overflow: hidden;
}

.preview-card img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    object-fit: contain;
}

.remove-btn {
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 20px;
    cursor: pointer;
    color: #ff0000;
    font-weight: bold;
}

#previewArea {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
}


.input-box .table-striped tbody tr:nth-of-type(odd) {
    background-color: #FBFBFD !important;
}

.input_thead {
    background: linear-gradient(90.7deg, #e7e6fe 0.34%, #f7e8fd 99.66%);
}

.input-box .table tbody, td, tr {
    border-style: dashed !important;
    border-color: #e2e7f1 !important;
}

.input-box .table th {
    border-style: none !important;
}

.input-box tr {
    height: 48px !important;
}

#areaOutputTable td {
    max-width: 200px;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.input-box .nav-link {
    color: #000 !important;
    font-size: 14px !important;
    border: 1px solid #000 !important;
    border-radius: 10px !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: linear-gradient(90.7deg, #e7e6fe 0.34%, #f7e8fd 99.66%) !important;
    border-radius: 10px !important;
    color: #000 !important;
    border: none !important;
}

/*---------------- end files compressor ----------------*/

/* ========================================== Footer page ========================================== */
/*---------------- start footer ----------------*/
.footer_item p, .footer_item ul li a {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #000 !important;
    text-decoration: none;
}

.footer_item h4 {
    font-size: 16px;
    font-weight: 600;
}

.footer_item ul {
    list-style: none;
}

.footer_border {
    position: relative;
    border-bottom: 0.25px solid transparent;
    padding-top: 20px;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), linear-gradient(57.99deg, #0A0DFE 69.24%, #BE15EC 57.26%);
}

.copyright p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0;
}

/*---------------- end footer ----------------*/
.upload-container {
    position: relative;
    border: 1px solid transparent;
    border-radius: 15px;
    height: 300px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #0A0DFE, #BE15EC);
}

input[type="file"] {
    display: none;
}

.scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.scrollTopBtn  img {
    width: 58px;
    height: 58px;
}
.review i {
    color: #f1f1f1;
    cursor: pointer;
    transition: color 0.2s;
}

.review i.selected {
    color: #ffe100;
}

/*------------- Start Legal Page ----------------*/

.legal_content h5 {
    /*color: #3b0ff9;*/
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(25deg, #0A0DFE 11%, #BE15EC 17%);
    /* background: linear-gradient(to left, #0A0DFE, #BE15EC); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.legal_content h6 {
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(25deg, #0A0DFE 11%, #BE15EC 17%);
    /* background: linear-gradient(to left, #0A0DFE, #BE15EC); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}