body {}
@keyframes spin {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
.hidden {display: none !important}
.invisible {opacity: 0 !important}
.text-green {color: green}
.text-yellow {color: #daa520}
.results-download-all {display: flex;align-items: center;justify-content: flex-end;height: 2.5em;margin-top: 30px}
.results-download-all button {background-color: #3F5FFF;border-color: #3F5FFF}
.results-download-all-loading img {width: 1.4em;height: 1.4em;animation: spin 1s infinite linear}
.results {display: flex;flex-direction: column;list-style: none;padding: 2em;background: #fff;border-radius: 2em}
.results-item {display: flex;gap: 1.5em;align-items: center;border-bottom: solid 1px #e1e4e9;padding-bottom: 1em;margin-bottom: 1em}
.results-item:last-child {padding-bottom: 0;border-bottom: none;margin-bottom: 0}
.results-item-image {display: block;max-width: 4.5em;height: auto;object-fit: fill;aspect-ratio: 1 / 1;background-color: #e1e4e9;border-radius: .2em}
.results-item-details {display: flex;justify-content: space-between;align-items: center;gap: .4em;width: 100%}
.results-item-details-info {display: grid}
.results-item-filename {overflow: hidden;width: 100%;font-size: 1em;font-weight: 600;text-align: left;line-height: 26px;text-overflow: ellipsis;text-wrap: nowrap;margin: 0 0 6px}
.results-item-meta {display: flex;align-items: center;gap: .4em;margin: 0}
.results-item-format-original, .results-item-size-new-format {display: inline-block;color: #fff;font-size: .7em;text-transform: uppercase;font-weight: 600;background-color: #48C4D8;padding: 0 .4em;border-radius: .2em}
.results-item-size-original {display: inline-block;font-size: .9em}
.results-item-size-new-container {display: flex;align-items: center;gap: .4em}
.results-item-size-new-size {display: inline-block;font-size: .9em}
.results-item-size-new-format {background-color: green}
.results-item-size-new-container svg {width: 1em;height: 1em}
.results-item-download {margin: 0}
.results-item-download button {display: flex;justify-content: center;align-items: center;gap: .4em;font-size: 14px;padding: 0;background: none;border: none;cursor: pointer}
.results-item-download button svg {width: 1.4em;height: 1.4em;transform: translateY(-1px)}

/* Compression Controls Styles */
.cd-compression-controls {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.cd-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-control-group label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

.cd-control-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    min-width: 120px;
    cursor: pointer;
}

.cd-control-select:focus {
    outline: none;
    border-color: #4FAFFC;
    box-shadow: 0 0 0 2px rgba(79, 175, 252, 0.2);
}

.cd-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.cd-control-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #4FAFFC;
    cursor: pointer;
}

.cd-checkbox-text {
    font-weight: 400;
}

/* Content Grid Mode - Compression Controls */
#hero.content-grid-mod .cd-compression-controls {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

#hero.content-grid-mod .cd-control-group label {
    color: #fff;
}

#hero.content-grid-mod .cd-checkbox-text {
    color: #fff;
}

#hero.content-grid-mod .cd-control-select {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
}

/* Responsive Design for Compression Controls */
@media (max-width: 768px) {
    .cd-compression-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .cd-control-group {
        justify-content: space-between;
    }
    
    .cd-control-select {
        min-width: 100px;
    }
}

/* Compression Status Indicators */
.cd-compression-status {
    background: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
    display: none;
}

.cd-compression-status.success {
    background: #e8f5e8;
    border-color: #4caf50;
    color: #2e7d32;
}

.cd-compression-status.warning {
    background: #fff3e0;
    border-color: #ff9800;
    color: #e65100;
}

.cd-compression-status.error {
    background: #ffebee;
    border-color: #f44336;
    color: #c62828;
}

.cd-compression-status .status-text {
    font-weight: 500;
    margin-bottom: 4px;
}

.cd-compression-status .status-details {
    font-size: 12px;
    opacity: 0.8;
}

/* Target Size Progress Indicator */
.cd-target-progress {
    background: #f5f5f5;
    border-radius: 4px;
    height: 6px;
    margin: 8px 0;
    overflow: hidden;
    display: none;
}

.cd-target-progress-bar {
    background: linear-gradient(90deg, #4FAFFC, #3F5FFF);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

/* Content Grid Mode - Status Indicators */
#hero.content-grid-mod .cd-compression-status {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

#hero.content-grid-mod .cd-compression-status.success {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
}

#hero.content-grid-mod .cd-compression-status.warning {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
}

#hero.content-grid-mod .cd-compression-status.error {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
}

#hero.content-grid-mod .cd-target-progress {
    background: rgba(255, 255, 255, 0.2);
}

@keyframes pulse {
    0% {transform: scale(1);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);border-width: 0}
    50% {transform: scale(1.025);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);border-width: 5px}
    100% {transform: scale(1);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);border-width: 0}
}
.upload-button {border: 0;background-color: #4FAFFC;color: #fff;text-transform: uppercase;font-weight: 700;border-radius: 2em;padding: .7em 1.2em .7em 3.6em;font-size: 1em;position: relative;cursor: pointer}
.upload-button:before {display: flex;align-items: center;justify-content: center;content: "↑";font-size: 1.6em;font-weight: 700;background-color: #fff;color: #4FAFFC;border: 1px solid currentColor;position: absolute;border-radius: 50%;width: 1.7em;height: 1.7em;left: 3px;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;box-shadow: 0 0 0 3px #fff}
.results-item-download button {background: #4faffc;padding: 10px 20px}
.error {color: #840000;background-color: #ffcccb;padding: .6em .8em;border-radius: .4em}
.error p {margin: 0}
#results-download-all {margin-top: 30px}
#results-download-all button {background-color: #3F5FFF;border-color: #3F5FFF}

/* Old Modified Start */
#hero.content-grid-mod .converter-wrapper .drop-area {display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 100px auto;padding: 20px;height: 320px;background-color: #fff;transition: background-color .5s ease-out;color: #666;border-radius: 2em;font-family: sans-serif;text-align: center; border: 2px solid transparent;}
#hero.content-grid-mod .converter-wrapper .drop-area.highlight {box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);border: 2px solid #4FAFFC}
#hero.content-grid-mod .converter-wrapper .drop-area.highlight > * {pointer-events: none}
/* Old Modified End */

/* Content Grid Mode CSS Start */
.content-grid-mod {position: relative;}
/* Hero Section Start */
#hero.content-grid-mod::before {
    background: rgb(0, 101, 173);
    background: -moz-radial-gradient(circle, rgba(0, 101, 173, 1) 0%, rgba(3, 31, 51, 1) 82%);
    background: -webkit-radial-gradient(circle, rgba(0, 101, 173, 1) 0%, rgba(3, 31, 51, 1) 82%);
    background: radial-gradient(circle, rgba(0, 101, 173, 1) 0%, rgba(3, 31, 51, 1) 82%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0065ad", endColorstr="#031f33", GradientType=1);
    background-size: 300vw;
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 70%;
}
#hero.content-grid-mod::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; margin: auto; height: 30%; background-color: #0D1E32; background-image: url("../img/clouds.svg"); background-size: 700px; background-repeat: no-repeat; background-position: -360px -370px;}
#hero.content-grid-mod {border-bottom: 0; z-index: 99;}
#hero.content-grid-mod .intro h1 {font-size: 61px; font-weight: 300; line-height: 1.2; margin-bottom: 24px;}
#hero.content-grid-mod .intro p {font-size: 22px; font-weight: 400; line-height: 1.5;}
#hero.content-grid-mod .tools-breadcrumb { font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 36px;}
#hero.content-grid-mod .converter-wrapper { background-color: #23436A; padding: 88px; border-radius: 24px; margin-top: 76px; transition: height 0.3s ease-out}
#hero.content-grid-mod .converter-wrapper .drop-area {background-color: #355A90; border-radius: 16px; padding: 50px 60px; height: auto; margin-bottom: 38px; margin: 0 auto 40px;}
#hero.content-grid-mod .converter-wrapper .drop-area h2 {font-weight: 300; font-size: 47px; color: #fff; margin-bottom: 42px; line-height: 1.2;}
#hero.content-grid-mod .converter-wrapper .drop-area p { font-size: 16px; color: #fff; line-height: 1.5; font-family: "Inter", sans-serif; margin: 16px auto;}
#hero.content-grid-mod .converter-wrapper .drop-area::before {content: ""; display: flex; height: 100px; width: 100px; background-image: url("../img/upload.svg"); background-size: contain; background-repeat: no-repeat; background-position: center;}
#hero.content-grid-mod .upload-button::before {display: none;}
#hero.content-grid-mod .upload-button {padding: 10px 32px; font-family: "Inter", sans-serif;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets { display: flex; align-items: center; justify-content: center; gap: 20px;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .info {text-align: left;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .info h4 {font-size: 22px; font-weight: 500; color: #fff; line-height: 1.2; margin-bottom: 0;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-items {display: flex;gap: 20px;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item video,
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item img { max-width: 100px; border-radius: 12px; border: 3px solid #fff; cursor: pointer;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item img {height: 100px; width: 100px; object-fit: cover;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item video {max-width: 180px; max-height: 100px; width: auto;}
#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-mini-upload-area { width: 100px; height: 100px; background-image: url("../img/upload_area.svg"); background-size: cover; background-repeat: no-repeat; display: none; border-radius: 8px; background-color: #23436a;}
#hero .tool-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 16px; text-transform: uppercase; margin-bottom: 36px; line-height: 1.2;}
#hero .tool-breadcrumb a {color: #0095FF; font-weight: 700;}
#hero .tool-breadcrumb .tool-breadcrumb-divider {color: #0095FF; font-weight: 700;}

.preview-active#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-mini-upload-area {display: unset;}
.preview-active#hero.content-grid-mod .converter-wrapper .cd-stock-assets {justify-content: left;}
.preview-active#hero.content-grid-mod .convertor {max-width: 100%;}
.preview-active#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-mini-upload-area.highlight {box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
.preview-active#hero.content-grid-mod .cd-tool-file-preview-wrapper {padding: 30px 0;}

@media (max-width: 767px) {
    #hero.content-grid-mod .converter-wrapper .drop-area h2 {font-size: 22px;}
    #hero.content-grid-mod .converter-wrapper {padding: 20px 20px 40px; margin-top: 40px; border-radius: 12px;}
    #hero#hero.content-grid-mod .converter-wrapper .drop-area {padding: 20px; height: auto;}
    #hero.content-grid-mod .converter-wrapper .cd-stock-assets {justify-content: flex-start;}
    #hero.content-grid-mod .converter-wrapper .drop-area h2 {margin-bottom: 17px;}
    #hero.content-grid-mod .converter-wrapper .drop-area::before {height: 60px; width: 60px;}
    #hero.content-grid-mod .converter-wrapper .drop-area::before {height: 60px; width: 60px;}
    #hero.content-grid-mod .converter-wrapper .drop-area p {font-size: 14px !important;}
    #hero.content-grid-mod .intro p {font-size: 16px;}
    #hero.content-grid-mod .intro h1 {font-size: 42px;}
    #hero.content-grid-mod .tools-breadcrumb {margin-bottom: 16px; font-size: 12px;}
    #hero.content-grid-mod .converter-wrapper .cd-stock-assets .info h4 {font-size: 14px;}
    #hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item img {max-width: 60px; border-radius: 8px; border-width: 2px; max-height: 60px;}
    #hero.content-grid-mod .converter-wrapper .cd-mini-upload-area {width: 60px; height: 60px;}
    #hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-items {gap: 10px;}

}
/* Transformation preview for */

.cd-tool-file-preview-wrapper { flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; padding: 30px; border-radius: 30px; display: none;}
.cd-tool-file-preview-wrapper.active {display: flex;}
.cd-tool-file-preview-list-item { display: flex; flex-wrap: nowrap; width: 100%; }
.cd-tool-file-preview-wrapper .cd-tool-preview-loader {order: 999;}
.cd-tool-file-preview-wrapper .cd-tool-preview-loader[data-loader-view="full"] { order: 999; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #1119; z-index: 999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px);}
.cd-tool-file-preview-wrapper .cd-tool-preview-loader span {font-weight: 500; color: #fff; }
.cd-tool-file-preview-wrapper .cd-tool-preview-loader img {animation: spin 1s infinite linear;}

.single.single-tools iframe[title="Upload Widget"] {display: none;}

.cd-tool-file-preview-item {}
.cd-tool-file-preview-original {}
.cd-tool-file-preview-processed {order: 2;}

.cd-tool-file-preview-item .file-content { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; width: 100%; font-size: 14px; min-height: 43px; line-height: 1.5;}
.cd-tool-file-preview-item .file-size-meta { text-align: right;}
.cd-tool-file-preview-item .file-content-meta {display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; justify-content: space-between;}
.cd-tool-file-preview-item .file-content .file-size-difference,
.cd-tool-file-preview-item .file-content .file-size {white-space: nowrap;}
.cd-tool-file-preview-item .file-content .file-size-difference {font-weight: 700; color: #46ff46;}
.cd-tool-file-preview-item .file-content .file-size-difference[data-diff-status="+"] {color: #ff0e0e;}
.cd-tool-file-preview-item .file-content .file-size-difference[data-diff-status="-"] {color: #46ff46;}

[data-tool-type="effect"][data-tool-effect="upscale"] .cd-tool-file-preview-item .file-content .file-size-difference[data-diff-status="+"] {color: #46ff46;}
[data-tool-type="effect"][data-tool-effect="upscale"] .cd-tool-file-preview-item .file-content .file-size-difference[data-diff-status="-"] {color: #ff0e0e;}
.cd-tool-file-preview-item .file-content .file-dimensions,
.cd-tool-file-preview-item .file-content .file-size { color: #fff; font-weight: 300; opacity: 0.9;}
.cd-tool-file-preview-item .file-content .file-dimensions {display: none;}


.cd-tool-file-preview-item .file-content .file-download { display: flex; align-items: center; gap: 8px; margin-left: 15px;}
.cd-tool-file-preview-item .file-content .file-download-btn { text-decoration: none; background: #d6daf3; display: flex; align-items: center; justify-content: center; padding: 2px 12px 4px; border-radius: 8px; gap: 6px;}
.cd-tool-file-preview-item .file-content .file-download .extension { font-size: 16px; font-weight: 600; color: #3448c5;}
.cd-tool-file-preview-item .file-content .file-download svg { width: 13px; fill: #3448c5;}
.cd-tool-file-preview-list-item .cd-tool-file-preview-original .file-content .file-meta .extension { background: #d6daf3; display: flex; align-items: center; justify-content: center; padding: 2px 12px 4px; border-radius: 8px; gap: 6px; font-size: 16px; font-weight: 600; color: #3448c5;}
.cd-tool-file-preview-list-item .cd-tool-file-preview-original .file-content .file-meta {flex-wrap: nowrap; display: flex; align-items: center; gap: 10px}
.cd-tool-file-preview-list-item .cd-tool-file-preview-item .file-content-meta { flex-wrap: wrap; gap: 5px; padding-left: 16px;}
.cd-tool-file-preview-list-item .cd-tool-file-preview-item .file-name {font-size: 16px; color: #fff; width: 100%; text-align: left; font-weight: 600; line-height: 1.2;}
.cd-tool-file-preview-list-item .cd-tool-file-preview-item video {height: auto; max-height: 100%; min-height: auto; width: 100%; max-width: 100%; border-radius: 10px;}
.cd-tool-file-preview-list-item .cd-tool-file-preview-item .media-container { display: flex; align-items: flex-start; justify-content: center; width: 100%; max-width: fit-content;}
.cd-tool-file-preview-list-item .cd-tool-file-preview-original img[src=""],
.cd-tool-file-preview-list-item .cd-tool-file-preview-original video[src=""] { display: none;}

.cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item .media-container {max-width: 100%;}
.cd-tool-file-preview-list-item[data-style="1"] .file-content { margin-top: 12px;}
.cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; flex-grow: 1; }
.cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item img { max-width: 100%; border-radius: 10px; width: 100%; height: auto;}
.cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item label.media-status-label { font-size: 20px; font-weight: 600; text-align: left; width: 100%; color: #fff; line-height: 1.2; margin-bottom: 12px;}
.cd-tool-file-preview-list-item[data-style="1"] {gap: 30px;}
.cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item .file-content-meta {padding-left: 0; min-height: 55px; align-items: flex-end;}
.cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item .file-content-meta .file-meta {width: 100%; justify-content: space-between; flex-direction: row-reverse; align-items: flex-end;}

.cd-tool-file-preview-list-item[data-style="2"] {width: 100%; justify-content: space-between; background-color: #355a90; padding: 20px; border-radius: 10px;}
.cd-tool-file-preview-list-item[data-style="2"] .cd-tool-file-preview-item { display: flex; align-items: center; justify-content: space-between;}
.cd-tool-file-preview-list-item[data-style="2"] .cd-tool-file-preview-original { flex-wrap: nowrap;}
.cd-tool-file-preview-list-item[data-style="2"] .cd-tool-file-preview-original video,
.cd-tool-file-preview-list-item[data-style="2"] .cd-tool-file-preview-original img {max-width: 96px; border-radius: 8px;}
.cd-tool-file-preview-list-item[data-style="2"] .cd-tool-file-preview-original .file-content {min-height: unset; margin: 0;}

.cd-tools-download-all { width: 100%; max-width: 100%; margin-top: 20px;}
#cd-tools-download-all-btn { background-color: #0d9aff; color: #fff; padding: 12px 26px; border-radius: 30px; font-weight: 600; background-image: linear-gradient(to left, #48C4D8 14.81%, #007DD6 70.37%, #3F5FFF 100%); display: inline-block; cursor: pointer;}

.converter-advance-config { position: fixed; top: 0; z-index: 999999; width: 100%; height: auto; background: #23436a; left: 0; padding: 20px; box-shadow: 0 0 5px #1115;}
.converter-advance-config form { display: flex; justify-content: center; gap: 40px;}
.converter-advance-config form .field-wrapper { display: flex; flex-wrap: wrap; gap: 0;}
.converter-advance-config form label {color: #fff; width: 100%; text-align: left; display: flex; justify-content: space-between; font-weight: 500;}
.converter-advance-config form select { width: 100%; border: none; border-radius: 6px; padding: 4px 10px; font-weight: 400;}
.converter-advance-config form .get-link { display: flex; align-items: center; justify-content: center; background: #fff; padding: 6px 15px; border-radius: 5px; height: fit-content; align-self: flex-end; cursor: pointer; font-weight: 500;}
@media (max-width: 767px) {
    .converter-advance-config {display: none;}
    .cd-tool-file-preview-list-item[data-style="1"] {gap: 15px;}
    .cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item label.media-status-label {font-size: 14px;}
    .cd-tool-file-preview-list-item[data-style="2"] {padding: 16px; border-radius: 6px;}
    .cd-tool-file-preview-item .file-content {font-size: 12px;}
    .cd-tool-file-preview-item .file-content .file-download-btn { padding: 3px 10px 4px; border-radius: 4px; font-size: 11px;}
    .cd-tool-file-preview-item .file-content .file-download svg {width: 11px;}
    .cd-tool-file-preview-item .file-content .file-download .extension {font-size: 12px;}
    .cd-tool-file-preview-list-item .cd-tool-file-preview-original .file-content .file-meta .extension {padding: 3px 10px 4px; border-radius: 4px; font-size: 11px;}
    .cd-tool-file-preview-list-item .cd-tool-file-preview-item .file-name {font-size: 13px; font-weight: 600}
    .cd-tool-file-preview-list-item[data-style="1"] .cd-tool-file-preview-item img {border-radius: 5px;}
    .cd-tool-file-preview-list-item .cd-tool-file-preview-item.cd-tool-file-preview-original .file-content-meta {justify-content: flex-start; padding-left: 10px;}
    .cd-tool-file-preview-list-item .cd-tool-file-preview-item.cd-tool-file-preview-processed .file-content-meta {justify-content: flex-end; padding-left: 10px;}
    .cd-tool-file-preview-list-item[data-style="2"] .cd-tool-file-preview-original img {max-width: 76px; border-radius: 3px;}
    .cd-tool-file-preview-item .file-content .file-size,
    .cd-tool-file-preview-item .file-content .file-size-difference {font-size: 11px;}
    .cd-tool-file-preview-list-item .cd-tool-file-preview-original .file-content .file-meta {gap: 6px;}
}
/* Hero Section End */
/* CTA Section Start */
#cta.content-grid-mod { background-color: #0D1E32; background-image: url("../img/rain-cloud.svg"); padding-top: 190px; padding-bottom: 145px; background-size: contain; background-repeat: no-repeat; background-position: 90% 200px;}
#cta.content-grid-mod .text-wrapper { max-width: 630px; margin: auto;}
#cta.content-grid-mod .text-wrapper h2 {font-size: 47px; font-weight: 300; line-height: 1.2;}
#cta.content-grid-mod .text-wrapper p {font-size: 16px; line-height: 1.5;}
#cta.content-grid-mod .btn-default { background-color: transparent; color: #0095FF; border-color: #0095FF;}


.single-tools #cta.content-grid-mod .row .text-wrapper h1,
.single-tools #cta.content-grid-mod .row .text-wrapper h2,
.single-tools #cta.content-grid-mod .row .text-wrapper h3,
.single-tools #cta.content-grid-mod .row .text-wrapper h4,
.single-tools #cta.content-grid-mod .row .text-wrapper h5,
.single-tools #cta.content-grid-mod .row .text-wrapper h6,
.single-tools #cta.content-grid-mod .row .text-wrapper { color: #fff;}


.single-tools #free.content-grid-mod .wrapper .text h1,
.single-tools #free.content-grid-mod .wrapper .text h2,
.single-tools #free.content-grid-mod .wrapper .text h3,
.single-tools #free.content-grid-mod .wrapper .text h4,
.single-tools #free.content-grid-mod .wrapper .text h5,
.single-tools #free.content-grid-mod .wrapper .text h6,
.single-tools #free.content-grid-mod .wrapper .text { color: #fff;}

@media (min-width: 768px) {
    #cta.content-grid-mod { background-position: calc(50vw + 136px) 255px; background-size: 250px; }
}
@media (min-width: 992px) {
    #cta.content-grid-mod {background-position: calc(50vw + 175px) 190px;}
}
@media (min-width: 1025px) {
    #cta.content-grid-mod {background-position: calc(50vw + 175px) 340px; background-size: 340px;}
}
@media (min-width: 1200px) {
    #cta.content-grid-mod {background-position: calc(50vw + 145px) 200px;}
}
@media (min-width: 1450px) {
    #cta.content-grid-mod { background-position: calc(50vw + 180px) 215px; background-size: 500px; }
}
@media (max-width: 1024px) {
    #cta.content-grid-mod { padding-top: 100px; padding-bottom: 80px; }
}
@media (max-width: 767px) {
    #cta.content-grid-mod { background-position: calc(50vw + 136px) 255px; background-size: 250px; padding-top: 60px; padding-bottom: 40px; }
    #cta.content-grid-mod .text-wrapper h2 {font-size: 28px;}
}
/* CTA Section End */

/* Intro Section Start */
#free.content-grid-mod {background-color: #0D1E32; padding: 0 20px;}
#free.content-grid-mod > .container { background-image: url("../img/intro_bg.svg"); border-radius: 24px; padding: 50px 60px; background-position: center; background-repeat: no-repeat; background-size: cover;}
#free.content-grid-mod .items h3 {font-size: 36px; line-height: 1.2}
#free.content-grid-mod .items p:last-child {margin-bottom: 0;}
#free.content-grid-mod .items {margin-bottom: 0;}
#free.content-grid-mod .item .image {margin-bottom: 0;}
#free.content-grid-mod .items.columns-2 .item {margin-bottom: 0;}
@media (max-width: 767px) {
    #free.content-grid-mod .items h3 { font-size: 28px;}
    #free.content-grid-mod > .container {padding: 30px; border-radius: 12px;}
    #free.content-grid-mod .items {padding: 0;}
}
/* Intro Section End */

/* Features Section Start */
#why-choose.content-grid-mod {background-color: #0D1E32; color: #fff;}
#why-choose.content-grid-mod h4,
#why-choose.content-grid-mod .title h2 {color: #fff;}
#why-choose.content-grid-mod .title {max-width: 650px; margin: 0 auto;}
#why-choose.content-grid-mod .title h2 {font-weight: 300; font-size: 47px; line-height: 1.2;}
#why-choose.content-grid-mod .items .item { margin-bottom: 100px;}
#why-choose.content-grid-mod .items .item h4 { font-size: 27px; max-width: 250px; margin: 0 auto 10px; line-height: 1.25;}
#why-choose.content-grid-mod .items .item p { font-weight: 400; line-height: 1.5; max-width: calc(100% - 30px); margin: 0 auto;}
#why-choose.content-grid-mod .intro p {line-height: 1.2;}
@media (max-width: 767px) {
    #why-choose.content-grid-mod .title h2 {font-size: 28px; margin-bottom: 12px;}
    #why-choose.content-grid-mod .intro p {font-size: 16px;}
    #why-choose.content-grid-mod .intro + .items {padding: 0;}
    #why-choose.content-grid-mod .items .item h4 {font-size: 24px;}
    #why-choose.content-grid-mod .items .item {margin-bottom: 40px;}
}
/* Features Section End */

/* Steps Section Start */
#resources.content-grid-mod .container {
    background: rgb(225, 237, 255);
    background: -moz-linear-gradient(180deg, rgba(225, 237, 255, 1) 33%, rgba(237, 244, 255, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(225, 237, 255, 1) 33%, rgba(237, 244, 255, 0) 100%);
    background: linear-gradient(180deg, rgba(225, 237, 255, 1) 33%, rgba(237, 244, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e1edff", endColorstr="#edf4ff", GradientType=1);
    padding: 60px 40px;
    border-radius: 16px;
}
.cld-2022 #resources.content-grid-mod { padding: 0 !important;}
#resources.content-grid-mod {background-color: #fff; padding: 0;}
#resources.content-grid-mod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 170px; background-color: #0D1E32;}
#resources.content-grid-mod .intro .text-wrapper { max-width: 730px; margin: 0 auto;}
#resources.content-grid-mod .title h2 {color: #27292F; font-weight: 300; font-size: 47px; line-height: 1.2; margin-bottom: 8px;}
#resources.content-grid-mod .text p { font-size: 16px; color: #363D45; line-height: 1.5; max-width: 640px; margin: 0 auto 35px;}
#resources.content-grid-mod .items .item { background-color: #23436A; padding: 20px 20px 30px; border-radius: 16px; text-align: center;}
#resources.content-grid-mod .items .item h4 {margin-bottom: 2px;}
#resources.content-grid-mod .items {counter-reset: tool-steps;}
#resources.content-grid-mod .items .item {counter-increment: tool-steps;}
#resources.content-grid-mod .items .item .title::before { content: counter(tool-steps); background-color: #60CFB7; height: 47px; width: 47px; display: flex; margin: 5px auto 27px; align-items: center; justify-content: center; font-size: 27px; font-weight: 700; color: #fff; border-radius: 50%; line-height: 1;}
#resources.content-grid-mod .btn-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 auto 34px;}
#resources.content-grid-mod .items .item .text p {color: #fff;}

.single-tools #resources.content-grid-mod .items .item { padding: 20px 30px 30px;}
.single-tools #resources .tools-btn-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 60px;}
.single-tools #resources .tools-btn-wrapper .tools-btn-primary { background: #0095FF; color: #fff; padding: 10px 30px; border-radius: 50px; text-transform: uppercase; font-weight: 500;}
.single-tools #resources .tools-btn-wrapper .tools-btn-tertiary {color: #0095FF;text-transform: uppercase; font-weight: 500;}
.single-tools #resources .tools-btn-wrapper .tools-btn-primary:hover,
.single-tools #resources .tools-btn-wrapper .tools-btn-tertiary:hover {text-decoration: none;}
.single-tools #resources.content-grid-mod .items .item .text p {margin-top: 0;}

@media (max-width: 767px) {
    #resources.content-grid-mod .container {padding: 40px 20px; border-radius: 8px;}
    .cld-2022 #resources.content-grid-mod {padding: 0 20px !important;}
    #resources.content-grid-mod .title h2 {font-size: 28px;}
    #resources.content-grid-mod .items {padding: 0;}
}
/* Steps Section End */

/* Api Explore Section Start */
.content-grid-mod[data-section-type="api_explore"] {background-color: #fff;}
/* Api Explore Section End */

/* FAQ Section Start */
#faq.content-grid-mod {background-color: #fff;}
#faq.content-grid-mod #faqs .panel {background-color: #EDF4FF; padding: 10px;}
#faq.content-grid-mod #faqs .panel-heading .heading {font-size: 36px !important;}
#faq.content-grid-mod #faqs .panel-collapse {color: #0C163B; font-weight: 400;}
#faq.content-grid-mod #pricing .faq-accordion > .panel .panel-body p {line-height: 1.5;}
#faq.content-grid-mod #pricing .pricing-faqs {background-color: transparent;}
#faq.content-grid-mod #pricing .pricing-faqs .heading h2 { font-size: 47px; font-weight: 300; text-align: center; margin-bottom: 40px;}

/* New FAQ internal section start */
#faq.content-grid-mod .title h2 { font-size: 47px; font-weight: 300; text-align: center; margin-bottom: 0;}
#faq.content-grid-mod .items {gap: 20px; margin-bottom: 0;}
#faq.content-grid-mod .items .item {background-color: #EDF4FF; padding: 30px; border-radius: 10px; margin-bottom: 0;}
#faq.content-grid-mod .items .item .title h4 { font-size: 36px; margin-bottom: 20px; font-weight: 300;}
#faq.content-grid-mod .items .item .text,
#faq.content-grid-mod .items .item .text p {font-size: 16px; line-height: 1.5;}
#faq.content-grid-mod .items .item .text p:last-child {margin-bottom: 0;}
/* New FAQ internal section end */


@media (max-width: 767px) {
    #faq.content-grid-mod .title h2 {font-size: 32px; line-height: 1.2;}
    #faq.content-grid-mod .items .item .title h4 { font-size: 24px; line-height: 1.2;}
    #faq.content-grid-mod .items .item { padding: 20px;}
    #faq.content-grid-mod #pricing .pricing-faqs .heading h2 {font-size: 32px; line-height: 1.2; margin-bottom: 30px;}
    #faq.content-grid-mod #faqs .panel-heading .heading {font-size: 24px !important;}
    #faq.content-grid-mod #faqs .panel {padding: 0;}
}
/* FAQ Section End */
/* Content Grid Mode CSS End */

.cd-tools-download-all { width: 100%; max-width: 100%; margin-top: 20px;}
#cd-tools-download-all-btn { background-color: #0d9aff; color: #fff; padding: 12px 26px; border-radius: 30px; font-weight: 600; background-image: linear-gradient(to left, #48C4D8 14.81%, #007DD6 70.37%, #3F5FFF 100%); display: inline-block; cursor: pointer;}

/*Top bar css*/
#hero .cd_header_top_bar {display: none;}
.cd_header_top_bar { width: 100%; background: #3f5fff; color: #fff; display: flex; align-items: center; justify-content: center; padding: 10px 30px; height: auto; z-index: 99; position: relative;}
.cd_header_top_bar .cd_header_top_bar_content { }
.cd_header_top_bar .cd_header_top_bar_content a { color: #fff; text-transform: uppercase; text-decoration: underline; margin-left: 8px;}
@media (max-width: 991px) {
    .cd_header_top_bar {padding: 10px 20px;}
    .cd_header_top_bar .cd_header_top_bar_content { font-size: 15px; }
    .cd_header_top_bar .cd_header_top_bar_content {font-size: 13px;}
}
@media (max-width: 575px) {
    .cd_header_top_bar {padding: 10px 16px;}
    .cd_header_top_bar .cd_header_top_bar_content { font-size: 14px; line-height: 1.5; }
    .cd_header_top_bar .cd_header_top_bar_content {font-size: 13px;}
}