@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&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');
@import url('global.css');
/* @import url('tools/yt-thumbnail.css');
@import url('tools/image-to-base.css');
@import url('tools/dummy-img.generate.css');
@import url('tools/color-picker.css');
@import url('tools/password-gen.css');
@import url('tools/check-img-dimension.css');
@import url('tools/base-to-img.css');
@import url('tools/image-to-text.css');
@import url('tools/qr-scanner.css');
@import url('tools/pdf-to-text.css');
@import url('tools/mic-test.css');
@import url('tools/keyboard-test.css');
@import url('tools/mouse-tester.css');
@import url('tools/webcam-tester.css');
@import url('tools/case-converter.css');
@import url('tools/photo-date-name-join.css');
@import url('tools/crop-img.css');
@import url('tools/pdf-to-images.css'); */

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --primary-text: #191C1E;
    --primary-light: #EEF2FF;
    --body-background: #FFFFFF;
    --header-bg: #fff;
    --primary-color: #6366F1;
    --secondary-text: #F2EFFF;
    --gray-text: #8E9193;
    --hover-color: #E1E0FF;
    --section-bg: #f9fafb;
    --cardhover: #f3f5fd;
    --menu-hover: #e3e3f8;
    --card-color: #f8fafc;
    --box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16);
    --liearcolor: linear-gradient(to right, #2563eb, #818cf8);
    --heading-color: #002452;
    --cm: #f3f7fe;
    --in: #f5fbf8;
    --mm: #f9f7fe;
    --px: #fef9f6;
    --divider: #f2f4f6;
    --header: #ffffff7e;
    --upcard: #fff;

    --border: #e5e7eb;
    --input-bg: #f9fafb;
    --label-color: #374151;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --scan-color: #6366F1;
    --hover: #E1E0FF;
    --upcard: #fff;
    --divider: #f2f4f6;
    --menu-hover: #e3e3f8;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --card: #ffffff;
    --primary-glow: rgba(99, 102, 241, .18);
    --card-shadow: 0 4px 24px rgba(99, 102, 241, .10);
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --r-xs: 7px;
    --key-bg: #ffffff;
    --key-border: #d1d5db;
    --key-text: #374151;
    --key-shadow: 0 3px 0 #c7cadc, 0 4px 8px rgba(0, 0, 0, .10);
    --key-pressed-bg: #6366F1;
    --key-pressed-text: #fff;
    --key-pressed-shadow: 0 1px 0 #4338ca;
    --key-fn-bg: #f3f4f6;
    --key-mod-bg: #eef2ff;
    --key-tested: #dcfce7;
    --key-tested-border: #22c55e;
    --badge-bg: #eef2ff;
    --badge-text: #4f46e5;
    --heading: #002452;

    --left-btn: #6366F1;
    --right-btn: #a855f7;
    --middle-btn: #06b6d4;
    --canvas-bg: #f8faff;
    --canvas-grid: #e0e4f5;
    --trail-color: #6366F1;


    --green: #22c55e;
    --green-bg: rgba(34, 197, 94, 0.12);
    --green-border: rgba(34, 197, 94, 0.25);
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.12);
    --red-border: rgba(239, 68, 68, 0.25);
    --amber: #f59e0b;
    --amber-bg: rgba(245, 158, 11, 0.12);
    --amber-border: rgba(245, 158, 11, 0.25);
    --blue: #3b82f6;
    --blue-bg: rgba(59, 130, 246, 0.12);
    --blue-border: rgba(59, 130, 246, 0.25);
    --purple: #a855f7;
    --purple-bg: rgba(168, 85, 247, 0.12);
    --purple-border: rgba(168, 85, 247, 0.25);
    --danger-bg: #fef2f2;
    --success-bg: #F0F9F4;
    --success-color: #0CA951;
    --success-icon-bg: #D6F8E5;
    --muted: #6B7280;
        --bg-accent: #eef2ff;
    --border-accent: #a5b4fc;
    --text-accent: #4338ca;


}


[data-theme="dark"] {
    --upcard: #1b2232;
    --body-background: #0e1117;
    --section-bg: #0f1420;
    --header-bg: #161b26;
    --primary-text: #e8ecf3;
     --primary-light: rgba(129, 140, 248, 0.15);
    --cardhover: #1b2232;
    --menu-hover: #1b2232;
    --card-color: #161b26;
    --box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.65);
    --heading-color: #8ea2ff;
    --liearcolor: linear-gradient(to right, #2563eb, #818cf8);
    --cm: #0b1220;
    --in: #0b1a14;
    --mm: #140f1f;
    --px: #1a120e;
    --divider: #0f141a;
    --header: #161b2670;
    --hover: #1e2647;
    --border: #2a3347;
    --input-bg: #1b2232;
    --label-color: #a0aec0;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --menu-hover: #1b2232;

    --badge-bg: #1e2647;
    --badge-text: #a5b4fc;
    --heading: #8ea2ff;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, .4);
    --key-bg: #1e2540;
    --key-border: #2a3660;
    --key-text: #c8d0e8;
    --key-shadow: 0 3px 0 #0c1020, 0 4px 8px rgba(0, 0, 0, .4);
    --key-pressed-bg: #6366F1;
    --key-pressed-shadow: 0 1px 0 #3730a3;
    --key-fn-bg: #151c2e;
    --key-mod-bg: #1a2240;
    --key-tested: #0f2d1a;
    --key-tested-border: #22c55e;
    --primary-light: #1e2647;
    --card: #161b26;

    --canvas-bg: #131825;
    --canvas-grid: #1e2a3d;
    --trail-color: #818cf8;
    --success-bg: #0b1a14;
    --success-icon-bg: #12291e;
    --bg-accent: #1e2647;
    --border-accent: #4f46e5;
    --text-accent: #a5b4fc;
}

html {
  scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

.link{
    font-weight: 600;
    color: var(--primary-color);
}

body {
    background-color: var(--body-background);
}


.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}


.features__tags {
    display: flex;
    align-items: center;
    justify-content: center;
}

.features__tags .tags_grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 830px; /* 200*4 + 10*3 */
    margin: 0 auto;
}

.features__tags .tags_grid > *{
    width: 200px;
}

.features__tags .tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 7px 15px;
    border-radius: 15px;
    /* background-color: #e3e3f8; */
    background: var(--menu-hover);
    text-transform: capitalize;
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
    
}

.main_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    /* overflow: auto; */
}

.desktop__header {
    /* margin-top: 10px; */
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: 0.4s;
}

.desktop__header header {
    padding: 10px 20px;
    width: 100%;
    background-color: var(--header);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--box-shadow);
    transition: 0.4s;
    backdrop-filter: blur(10px);
}

.desktop__header header .left__side {
    display: flex;
    align-items: center;
    gap: 20px;
}

.desktop__header header .left__side .website_logo img {
    width: 30px;
}

.desktop__header header .left__side .website_logo h3 {
    background: var(--liearcolor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.desktop__header header .desktop_main__menu ul {
    display: flex;
    align-items: center;
    position: relative;
}

.desktop__header header .desktop_main__menu ul li {
    padding: 0px 10px;
    list-style: none;
    font-size: 13px;
    position: relative;
}


.desktop__header header .desktop_main__menu ul li a {
    text-decoration: none;
    color: var(--primary-text);
    padding: 7px 15px;
    border-radius: 15px;
    font-weight: 500;
    text-transform: capitalize;
    transition: 0.4s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.desktop__header header .desktop_main__menu ul li a:hover {
    background-color: var(--menu-hover);
    color: var(--primary-color);
}

.desktop__header header .desktop_main__menu ul li a:hover i.hgi-arrow-down-01 {
    color: var(--primary-color);
}


.desktop__header header .right__side {
    display: flex;
    align-items: center;
    gap: 20px;
}

.desktop__header header .right__side span {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    position: relative;
}

.desktop__header header .right__side .profile__container {
    position: relative;
}

.desktop__header header .right__side .profile__container .profile__circle {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: var(--primary-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.desktop__header header .right__side .profile__container .profile__box {
    height: 29px;
    width: 29px;
    border-radius: 50%;
    overflow: hidden;
}

.desktop__header header .right__side .profile__container .profile__box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.desktop__header header li.dropdown__menu_container {
    position: relative;
}

.desktop__header header li.dropdown__menu_container .dropdown__menu {
    /* height: 400px; */
    width: 1050px;
    background-color: var(--header-bg);
    position: absolute;
    top: 60px;
    left: -190px;
    border-radius: 15px;
    box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16);
    z-index: 100;
    padding: 20px;
    display: none;
}


.desktop__header header li.dropdown__menu_container .dropdown__menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 240px;
    width: 16px;
    height: 16px;
    background-color: var(--header-bg);
    transform: rotate(45deg);
    z-index: 0;
    border-top-left-radius: 5px;
}



.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid .item {
    padding: 15px 10px;
}


.desktop__header header .dropdown__menu .convert_dropdown__grid .item span {
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
}

.desktop__header header .dropdown__menu .convert_dropdown__grid .item h3 {
    text-transform: capitalize;
}

.desktop__header header .dropdown__menu .convert_dropdown__grid .item p {
    font-size: 10px;
    color: var(--gray-text);
    font-weight: 500;
    /* margin-top: 10px; */
}

.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid .item.first__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid .item .bulk_converter__btn {
    padding: 10px;
    background-color: #020617;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;

}


.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid .item .bulk_converter__btn .thunderbold__icon {
    height: 35px;
    width: 35px;
    background-color: #e9ebfd;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid .item .bulk_converter__btn .thunderbold__icon img {
    width: 15px;
}


.desktop__header header li.dropdown__menu_container .dropdown__menu .convert_dropdown__grid .item .bulk_converter__btn .text__content span {
    color: #F2EFFF;
    text-transform: capitalize;
}


.desktop__header header .dropdown__menu .item .image__format {
    height: 50px;
    width: 50px;
    padding: 10px;
    background-color: #FEF2F2;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #DC2626;

}


.desktop__header header .dropdown__menu .item .image__format .hgi-image-02 {
    font-size: 20px;
    color: #DC2626;
}

.desktop__header header .dropdown__menu .item .image__format span {
    color: #DC2626;
}


.desktop__header header .dropdown__menu .item .convert_format_title {
    margin-top: 10px;
}

.desktop__header header .dropdown__menu .item .convert_format_title span {
    color: var(--primary-text);
}


.desktop__header header .dropdown__menu .item .tools__links {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.desktop__header header .dropdown__menu .item .tools__links a {
    padding: 0;
    color: var(--gray-text);
    text-transform: uppercase;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.desktop__header header .dropdown__menu .item .tools__links a:hover {
    background-color: transparent;
    transform: translateX(10px);
}




@media (max-width: 1200px) {
    .dropdown__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .dropdown__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dropdown__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dropdown__grid {
        grid-template-columns: 1fr;
    }
}


.desktop__header header li.converter__dropdown_menu:hover .dropdown__menu {
    display: block;
}


.desktop__header header .resize_dropdown_menu_btn:hover .resize_dropdown_menu {
    display: block;
}

.desktop__header header .resize_dropdown_menu {
    padding: 20px;
    width: 900px;
    background-color: var(--header-bg);
    /* box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16); */
    box-shadow: var(--box-shadow);
    position: absolute;
    top: 60px;
    border-radius: 15px;
    left: 0;
    z-index: 100;
    display: none;
}


.desktop__header header .resize_dropdown_menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50px;
    width: 16px;
    height: 16px;
    background-color: var(--header-bg);
    transform: rotate(45deg);
    z-index: 0;
    border-top-left-radius: 5px;
}


.desktop__header header .resize_dropdown_menu .resizer__menu__header h3 {
    font-size: 20px;
    color: var(--primary-text);
}

.desktop__header header .resize_dropdown_menu .resizer__menu__header p {
    color: var(--gray-text);
    font-size: 12px;
    margin-top: 5px;
}

.desktop__header header .resize_dropdown_menu .resize_menu_divider {
    height: 1px;
    width: 100%;
    background-color: #e5eaf2;
    margin-top: 15px;
    border-radius: 10px;
}


.desktop__header header .resize_dropdown_menu .resize__menu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}






.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .title__header {
    display: flex;
    align-items: center;
    gap: 10px;
}


.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .title__header .icon {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background-color: #dce9fe;
    color: #0c4af6;
    font-weight: 600;
}


.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .title__header span {
    font-weight: 600;
    color: #0c4af6;
    /* font-size: 1px; */

}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .title__header p {
    font-size: 12px;
    color: var(--gray-text);
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tools__links__container {
    margin-top: 20px;
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--cm);
    border-radius: 10px;
    color: var(--primary-text);
    margin-top: 10px;
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link.inches__link {
    background-color: var(--in);
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link.inches__link i {
    color: #08824e;
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link.mm__link {
    background-color: var(--mm);
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link.mm__link i {
    color: #7f50f1;
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link.pixel__link {
    background-color: var(--px);
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link.pixel__link i {
    color: #fe630c;
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link i {
    color: #0c4af6;
    font-size: 18px;
    transition: 0.4s;
}

.desktop__header header .resize_dropdown_menu .resize__menu__grid .resizer_items .tool__link:hover i {
    transform: translateX(5px);
}

.desktop__header header .all__tools__btn {
    color: var(--primary-text);
}

.desktop__header header .all__tools__btn:hover .all_tool_dropdown_menu {
    display: block;
}

.desktop__header header .mobile__menu__all__tool {
    display: none;
    color: var(--primary-text);
}

.desktop__header header .all_tool_dropdown_menu {
    /* height: 200px; */
    width: 800px;
    background-color: var(--header-bg);
    position: absolute;
    top: 60px;
    left: -670px;
    /* box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16); */
    box-shadow: var(--box-shadow);
    padding: 20px;
    border-radius: 15px;
    /* pointer-events: none; */
    z-index: 100;
    display: none;
}


.desktop__header header .all_tool_dropdown_menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 670px;
    width: 16px;
    height: 16px;
    background-color: var(--header-bg);
    transform: rotate(45deg);
    z-index: 0;
    border-top-left-radius: 5px;
}


.desktop__header header .all_tool_dropdown_menu .title span {
    font-size: 12px;
    color: var(--gray-text);
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px;
}



.desktop__header header .all_tool_dropdown_menu .all__tools__grid__container {
    margin-top: 10px;
}


.desktop__header header .all_tool_dropdown_menu .all__tools__grid__container .all_tool_grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}


.desktop__header header .all_tool_dropdown_menu .all__tools__grid__container .tools {
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 5px;
    color: var(--primary-text);
    min-width: 0;
}

.desktop__header header .all_tool_dropdown_menu .all__tools__grid__container .tools:hover .icon {
    background-color: var(--hover-bg) !important;
    color: #fff !important;
}

.desktop__header header .all_tool_dropdown_menu .all__tools__grid__container .tools .icon {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: var(--bg);
    color: var(--clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: 0.3s;
}

.desktop__header header .all_tool_dropdown_menu .all__tools__grid__container .tools span {
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
    min-width: 0;
}

.text-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ── other menu dropdown (click-based, not hover) ── */

.desktop__header header .other__menu {
    color: var(--primary-text);
}

.desktop__header header .other__menu .other__tools__dorpdown {
    width: 250px;
    background-color: var(--header-bg);
    position: absolute;
    top: 55px;
    left: -180px;
    /* box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16); */
    box-shadow: var(--box-shadow);
    border-radius: 15px;
    z-index: 100;
    overflow: hidden;

    /* animate open/close */
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    /* transition-delay: 1000ms; */
}



.desktop__header header .other__menu .other__tools__dorpdown.menu--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── slider track inside dropdown ── */
.menu__slider__track {
    display: flex;
    width: 500px;
    /* 250 x 2 panels */
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu__slider__track.slid {
    transform: translateX(-250px);
}

.menu__panel {
    flex: 0 0 250px;
    padding: 20px;
    box-sizing: border-box;
}

/* panel 2 header row */
.menu__panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-text);
    text-transform: capitalize;
}

.menu__back__btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-text);
    font-size: 14px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.menu__back__btn:hover {
    background: var(--menu-hover);
    color: var(--primary-color);
}

/* language list */

.lang__list {
    overflow: scroll;
    height: 250px;
}


.lang__list::-webkit-scrollbar {
    width: 4px;
}

.lang__list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 15px;
}

.lang__list li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
}

.lang__check {
    font-size: 14px;
    color: #ccc;
    transition: color 0.2s;
}

.lang__check.active__lang {
    color: var(--primary-color) !important;
}

.desktop__header header .other__menu .other__tools__dorpdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 180px;
    width: 16px;
    height: 16px;
    /* background-color: red; */
    background-color: var(--header-bg);
    transform: rotate(45deg);
    z-index: 0;
    border-top-left-radius: 5px;
}

.desktop__header header .other__menu .other__tools__dorpdown ul li {
    list-style: none;
}

.desktop__header header .other__menu .other__tools__dorpdown ul li a {
    color: var(--primary-text);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
}

.desktop__header header .other__menu .other__tools__dorpdown ul li a span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
}

.desktop__header header .other__menu .other__tools__dorpdown ul li a i {
    font-size: 16px;
    font-weight: 500;
}

.desktop__header header .other__menu .other__tools__dorpdown ul li a i.hgi-crown {
    color: #CFA037;
}

.desktop__header header .other__menu .other__tools__dorpdown ul li a:hover {
    color: #776af1;
    background-color: var(--menu-hover);
}

.desktop__header header .other__menu .other__tools__dorpdown ul li a:hover i {
    color: #776af1;
}

.desktop__header header .other__menu .other__tools__dorpdown button#darkModeBtn {
    padding: 10px;
    border: 0;
    background-color: #020617;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    font-size: 11px;
    cursor: pointer;
}

.desktop__header header .temporary__files__btn {
    color: var(--primary-text);
    position: relative;
}

.desktop__header header .temporary__files__btn.filescount::before {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -6px;
    min-width: 13px;
    height: 15px;
    padding: 0 5px;
    background: linear-gradient(135deg, var(--primary-color), #818cf8);
    color: var(--secondary-text);
    /* border: 2px solid var(--header-bg); */
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.35);
    z-index: 2;
}

.desktop__header header .temporary__files__btn:hover .temporary__files__dropdown {
    display: block;
}


.desktop__header header .temporary__files__dropdown {
    width: 280px;
    background-color: var(--header-bg);
    position: absolute;
    top: 60px;
    left: -200px;
    /* box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16); */
    box-shadow: var(--box-shadow);
    padding: 20px;
    border-radius: 15px;
    z-index: 100;
    display: none;
}


.desktop__header header .temporary__files__dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 200px;
    width: 16px;
    height: 16px;
    background-color: var(--header-bg);
    transform: rotate(45deg);
    z-index: 0;
    border-top-left-radius: 5px;
}

.desktop__header header .temporary__files__dropdown span {
    font-size: 12px;
    color: var(--gray-text);
    text-transform: capitalize;
    /* padding: 10px; */
}

.desktop__header header .temporary__files__dropdown .storage__opt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;

}

.desktop__header header .temporary__files__dropdown .storage__opt a {
    padding: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--cardhover);
    border-radius: 10px;
}

.desktop__header header .temporary__files__dropdown .storage__opt a:hover .icon {
    background-color: #3e55fa;
    color: var(--secondary-text);
}

.desktop__header header .temporary__files__dropdown .storage__opt a.temprary_files:hover .temprary_icon {
    background-color: #5534ea !important;
    color: var(--secondary-text) !important;
}

.desktop__header header .temporary__files__dropdown .storage__opt a .icon {
    height: 40px;
    width: 40px;
    background-color: #d6ddfe;
    border-radius: 10px;
    color: #3e55fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
    transition: 0.4s;
}

.desktop__header header .temporary__files__dropdown .storage__opt a .name span {
    color: var(--primary-text);
    /* font-size: 13px; */
}

.desktop__header header .temporary__files__dropdown .storage__opt a .name p {
    font-size: 12px;
    color: var(--gray-text);
}

.desktop__header header .profile__container:hover .profile__dropdown__menu {
    display: block;
}


.desktop__header header .profile__container .profile__dropdown__menu {
    width: 300px;
    background-color: var(--header-bg);
    position: absolute;
    top: 60px;
    left: -260px;
    /* box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16); */
    box-shadow: var(--box-shadow);
    padding: 20px;
    border-radius: 15px;
    z-index: 100;
    display: none;
}


.desktop__header header .profile__container .profile__dropdown__menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 260px;
    width: 16px;
    height: 16px;
    background-color: var(--header-bg);
    transform: rotate(45deg);
    z-index: 0;
    border-top-left-radius: 5px;
}



.desktop__header header .profile__container .profile__dropdown__menu .profile__card {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: capitalize;
}

.desktop__header header .profile__container .profile__dropdown__menu .profile__card .icon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;

}

.desktop__header header .profile__container .profile__dropdown__menu .profile__card .icon img {
    width: 100%;
    object-fit: cover;
}

.desktop__header header .profile__container .profile__dropdown__menu .profile__card span {
    font-size: 13px;
    font-weight: 500;
}

.desktop__header header .profile__container .profile__dropdown__menu .profile__card p {
    font-size: 12px;
    color: var(--gray-text);
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access {
    margin-top: 10px;
}



.desktop__header header .profile__container .profile__dropdown__menu .premium__box_poster {
    padding: 10px 13px;
    background-color: #020617;
    margin-top: 10px;
    width: 100%;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* justify-content: space-between; */
}

.desktop__header header .profile__container .profile__dropdown__menu .premium__box_poster .icon {
    width: 20px;
    height: 20px;
}

.desktop__header header .profile__container .profile__dropdown__menu .premium__box_poster .icon img {
    width: 100%;
}

.desktop__header header .profile__container .profile__dropdown__menu .premium__box_poster span {
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary-text);
    text-transform: capitalize;
}

.desktop__header header .profile__container .profile__dropdown__menu .premium__box_poster p {
    font-size: 12px;
    color: var(--gray-text);
}


.desktop__header header .profile__container .profile__dropdown__menu .premium__box_poster a {
    padding: 5px 10px;
    background: linear-gradient(to right, #2563eb, #818cf8);
    color: var(--secondary-text);
    font-size: 12px;
    border-radius: 8px;
    text-transform: capitalize;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access span {
    font-size: 12px;
    color: var(--gray-text);
    font-weight: 500;
    text-transform: capitalize;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access li {
    list-style: none;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access li a {
    padding: 10px 0px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
    color: var(--primary-text);
    font-weight: 500;
    transition: 0.4s;
    justify-content: space-between;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access li a .text{
    display: flex;
    align-items: center;
    gap: 5px;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access li a .badge{
    padding: 3px 8px;
    background-color: var(--primary-color);
    border-radius: 10px;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access li a .badge span{
    color: #fff;
    font-size: 10px;
}



.desktop__header header .profile__container .profile__dropdown__menu .quick__access li a i {
    font-weight: 500;
    font-size: 16px;
    transition: 0.4s;
}

.desktop__header header .profile__container .profile__dropdown__menu .quick__access li a:hover {
    color: var(--primary-color);
}













/* hero section code  */
.hero_section {
    margin-top: 50px;
}

.hero_section .header__heading {
    text-align: center;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero_section .header__heading .header_context{
    width: 100%;
    max-width: 700px;
    min-width: 0;
    box-sizing: border-box;
}

.hero_section .header__heading h1 {
    font-size: 60px;
    line-height: 65px;
    color: var(--heading-color);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

}

.hero_section .header__heading h1 span {
    background: var(--liearcolor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.hero_section .header__heading p {
    margin-top: 20px;
    color: var(--gray-text);
    font-size: 12px;
}


.hero_section .uploading__section {
    display: grid;
    place-items: center;
    padding: 10px;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}



.hero_section .uploading__section .uploading__area {
    height: 300px;
    width: min(700px, 100%);
    background-color: var(--header-bg);
    border-radius: 20px;
    /* box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16); */
    box-shadow: var(--box-shadow);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    /* transition: 0.4s; */
}

.hero_section .uploading__section .uploading__area.drag-over{
    border: 2px dashed var(--primary-color);
    border-color: var(--primary-color);
    background: var(--menu-hover);
    transform: scale(1.015);
}


.hero_section .uploading__section .uploading__area p {
    font-size: 12px;
    color: var(--gray-text);
    text-align: center;
    margin-top: 10px;
    line-height: 20px;
}

.hero_section .policy__int {
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    color: var(--gray-text);
}

/* hero section code end  */




/* how_it_work section code */


.how_it_work {
    padding: 50px;
    background-color: var(--section-bg);
    width: 100%;
    margin-top: 100px;
}


.how_it_work .how_it_work__title {
    text-align: center;
    text-transform: capitalize;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.how_it_work .how_it_work__title h3 {
    color: var(--primary-text);
}

.how_it_work .how_it_work__title .divider_line {
    height: 4px;
    width: 100px;
    background-color: var(--primary-color);
    border-radius: 5px;
}


/* .how_it_work .grid__container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
} */

.how_it_work .grid__container .grid__layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
    padding: 10px;
    /* background-color: red; */
    position: relative;
    overflow: hidden;
}



/* tablet */
@media (max-width: 1024px) {
    .how_it_work .grid__container .grid__layout {
        grid-template-columns: repeat(2, 1fr);
    }

    .how_it_work .grid__container .grid__layout .dots__line {
        display: none;
    }
}

/* mobile */
@media (max-width: 640px) {
    .how_it_work .grid__container .grid__layout {
        grid-template-columns: 1fr;
    }
}

.how_it_work .grid__container .grid__layout .dots__line {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed #cbd5e1;
    z-index: 0;
}


.how_it_work .grid__container .grid__layout .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    position: relative;
}

.how_it_work .grid__container .grid__layout .card .step__circle {
    height: 50px;
    width: 50px;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary-color);
    font-size: 17px;
    /* background-color: #ffffff; */
    background-color: var(--section-bg);
}

.how_it_work .grid__container .grid__layout .card span {
    font-size: 15px;
    font-weight: bold;
    color: var(--primary-text);
}

.how_it_work .grid__container .grid__layout .card p {
    font-size: 14px;
    color: var(--gray-text);
}


/* how_it_work section code end */


/* features__section code  */

.features__section {
    padding: 90px 24px;
}

.features__section .features__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.features__section .features__header span {
    display: inline-block;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--primary-color);
    background: var(--secondary-text);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid var(--hover-color);
}

[data-theme="dark"] .features__section .features__header span {
    background: #1b2232;
    border-color: #2a3347;
}

.features__section .features__header h2 {
    font-size: 34px;
    line-height: 1.3;
    margin-top: 16px;
    color: var(--primary-text);
    /* font-family: "Google Sans", sans-serif; */
}


.features__maintion {
    margin-top: 50px;
}

.features__maintion .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.features__maintion .card {
    padding: 32px 26px;
    background-color: var(--header-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.features__maintion .card:hover {
    /* transform: translateY(-6px); */
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color);
}

.features__maintion .card .icon {
    height: 54px;
    width: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
    background: var(--secondary-text);
    color: var(--primary-color);
    transition: .3s;
}

[data-theme="dark"] .features__maintion .card .icon {
    background: #1e1e3a;
}

/* .features__maintion .card:hover .icon {
    background: var(--primary-color);
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
} */

.features__maintion .card span {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-text);
}

.features__maintion .card p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-text);
}

@media (max-width: 992px) {
    .features__maintion .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .features__section {
        padding: 56px 16px;
    }

    .features__section .features__header h2 {
        font-size: 24px;
    }

    .features__section .features__header h2 br {
        display: none;
    }

    .features__maintion {
        margin-top: 32px;
    }

    .features__maintion .grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .features__maintion .card {
        padding: 24px 20px;
    }

    .features__maintion .card:hover {
        transform: none;
    }
}

/* features__section code end */


.content__section {
    padding: 80px;
    background-color: var(--section-bg);
}

.content__section h2{
    color: var(--primary-text);
}

.content__section p {
    color: var(--gray-text);
    font-size: 13px;
    margin-top: 5px;
}


/* releted__tool__section code  */


.releted__tool__section {
    padding: 90px 24px;
    /* background-color: var(--section-bg); */
    width: 100%;
}

.releted__tool__section .header__title {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.releted__tool__section .header__title .rt_badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--secondary-text);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid var(--hover-color);
    margin-bottom: 16px;
}

[data-theme="dark"] .releted__tool__section .header__title .rt_badge {
    background: #1b2232;
    border-color: #2a3347;
}

.releted__tool__section .header__title h2 {
    text-transform: capitalize;
    font-size: 32px;
    line-height: 1.25;
    color: var(--primary-text);
    /* font-family: "Google Sans", sans-serif; */
}

.releted__tool__section .header__title p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-text);
    margin-top: 12px;
}

.releted__tool__section .releted__tool__grid__container {
    margin-top: 46px;
}

.releted__tool__section .rt_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.releted__tool__section .releted__tool__grid__container .tool__Box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px;
    color: var(--primary-text);
    background-color: var(--header-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}

.releted__tool__section .releted__tool__grid__container .tool__Box:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color);
}

.releted__tool__section .releted__tool__grid__container .tool__Box:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.releted__tool__section .releted__tool__grid__container .tool__Box .icon {
    height: 52px;
    width: 52px;
    border-radius: 14px;
    background-color: var(--secondary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--primary-color);
    font-weight: 500;
    transition: .3s;
}

[data-theme="dark"] .releted__tool__section .releted__tool__grid__container .tool__Box .icon {
    background-color: #1e1e3a;
}

.releted__tool__section .releted__tool__grid__container .tool__Box:hover .icon {
    background-color: var(--primary-color);
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
}

.releted__tool__section .releted__tool__grid__container .tool__Box span {
    font-weight: 700;
    font-size: 15px;
}

.releted__tool__section .releted__tool__grid__container .tool__Box p {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--gray-text);
    margin-top: -4px;
    padding-right: 30px;
}

.releted__tool__section .releted__tool__grid__container .tool__Box .tool__Box__arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--section-bg);
    color: var(--gray-text);
    opacity: .6;
    transform: translate(0, 0);
    transition: .3s;
}

.releted__tool__section .releted__tool__grid__container .tool__Box:hover .tool__Box__arrow {
    opacity: 1;
    background: var(--primary-color);
    color: #fff;
    transform: translate(3px, -3px);
}

@media (max-width: 992px) {
    .releted__tool__section .rt_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .releted__tool__section {
        padding: 56px 16px;
    }

    .releted__tool__section .header__title h2 {
        font-size: 24px;
    }

    .releted__tool__section .releted__tool__grid__container {
        margin-top: 32px;
    }

    .releted__tool__section .rt_grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .releted__tool__section .releted__tool__grid__container .tool__Box {
        padding: 22px 20px;
    }

    .releted__tool__section .releted__tool__grid__container .tool__Box:hover {
        transform: none;
    }
}



/* releted__tool__section code end */



/* blog section code  */

.blog__section {
    padding: 80px;
    background-color: var(--section-bg);
}

.blog__section .header_title .paragraph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.blog__section .header_title h2 {
    color: var(--primary-text);
}

.blog__section .header_title .paragraph p {
    font-size: 12px;
    color: var(--gray-text);
}

.blog__section .header_title .paragraph a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 12px;
}


.blog__section .header_title .paragraph a i {
    transition: 0.3s;
}

.blog__section .header_title .paragraph a:hover i {
    transform: translateX(7px);
}

.blog__section .blog__grid__container {
    margin-top: 50px;
}

.blog__section .blog__grid__container .blog__card {
    /* width: 300px; */
    height: fit-content;
    /* background-color: var(--body-background); */
    border-radius: 15px;
    /* overflow: hidden; */
    /* padding: 20px; */
}

.blog__section .blog__grid__container .blog__card:hover h2 {
    color: var(--primary-color);
}

.blog__section .blog__grid__container .blog__card:hover img {
    transform: scale(1.1);
}

.blog__section .blog__grid__container .blog__card .blog__poster img {
    width: 100%;
    border-radius: 15px;
    transition: 0.4s;
}

.blog__section .blog__grid__container .blog__card .blog__poster {
    overflow: hidden;
    border-radius: 15px;
}


.blog__section .blog__grid__container .blog__card .post_date {
    color: var(--gray-text);
    font-size: 12px;
    margin-top: 8px;
    text-transform: uppercase;
    font-weight: 500;
}

.blog__section .blog__grid__container .blog__card h2 {
    font-size: 15px;
    color: var(--primary-text);
    margin-top: 8px;
    transition: 0.3s;
}

.blog__section .blog__grid__container .blog__card p {
    font-size: 12px;
    color: var(--gray-text);
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* max 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* blog section code end */



/* faq section code  */

.faq_section {
    padding: 80px;
    background-color: var(--section-bg);
}

.faq_section .title__header {
    text-align: center;
    margin-bottom: 50px;
}

.faq_section .title__header h2 {
    color: var(--primary-text);
}

.faq_section .title__header p {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gray-text);
}

.faq_section .faq__container {
    padding: 30px;
    background-color: var(--card-color);
    box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .16);
    border-radius: 15px;
    /* height: 60px; */
    overflow: hidden;
    margin-bottom: 20px;
}

.faq_section .faq__container .quesion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq_section .faq__container .quesion h2 {
    font-size: 15px;
    color: var(--primary-text);
}


.faq_section .faq__container .asnwer p {
    color: var(--gray-text);
    font-size: 12px;
    margin-top: 10px;
}

.faq_section .faq__container .asnwer ul{
    list-style-type: disc;
    padding-left: 20px;
}

.faq_section .faq__container .asnwer ul li{
    display: list-item;
}

.faq_section .faq__container .asnwer ul li{
    color: var(--gray-text);
    font-size: 12px;
    line-height: 25px;
}

.faq_section .contact__details {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.faq_section .contact__details span {
    font-size: 12px;
    color: var(--gray-text);
}

.faq_section .contact__details a {
    padding: 10px 20px;
    background-color: var(--body-background);
    color: var(--primary-color);
    font-size: 13px;
    border-radius: 20px;
    border: 1px solid var(--card-color);
    font-weight: bold;
    transition: 0.4s;
}

.faq_section .contact__details a:hover {
    background-color: var(--primary-color);
    color: var(--secondary-text);
    border-color: var(--primary-color);
}

/* faq section code end */


/* footer section code  */











/* .sic_pro_footer {
  padding: 80px 0 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,102,241,.18), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(239,68,68,.12), transparent 28%),
    var(--section-bg);
}

.sic_footer_cta {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  padding: 34px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  box-shadow: 0 30px 70px -35px rgba(99,102,241,.9);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.sic_footer_cta::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}

.sic_footer_badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}

.sic_footer_cta h2 {
  max-width: 620px;
  font-size: 34px;
  line-height: 1.15;
  margin-bottom: 12px;
}

.sic_footer_cta p {
  max-width: 650px;
  font-size: 14px;
  line-height: 1.7;
  opacity: .88;
}

.sic_footer_form {
  position: relative;
  z-index: 1;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
}

.sic_footer_form label {
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 12px;
}

.sic_footer_input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-radius: 16px;
  background: #fff;
}

.sic_footer_input i {
  color: var(--primary-color);
  margin-left: 8px;
}

.sic_footer_input input {
  flex: 1;
  border: 0;
  outline: 0;
  min-width: 0;
  color: #111827;
  font-size: 13px;
}

.sic_footer_input button {
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 11px 15px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.sic_footer_form small {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  opacity: .85;
}

.sic_footer_body {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding: 28px;
  border-radius: 26px;
  background: var(--header-bg);
  border: 1px solid var(--divider);
  box-shadow: var(--box-shadow);
}

.sic_brand_logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.sic_brand_logo strong {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: #e3e3f8;
  color: var(--primary-color);
  font-size: 16px;
}

.sic_brand_logo h3,
.sic_footer_col h4 {
  color: var(--primary-text);
}

.sic_brand_logo h3 {
  font-size: 18px;
  margin-bottom: 3px;
}

.sic_brand_logo p,
.sic_brand_text,
.sic_footer_col a,
.sic_footer_bottom p {
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.7;
}

.sic_brand_text {
  max-width: 420px;
  margin-bottom: 18px;
}

.sic_footer_tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sic_footer_tools span {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--body-background);
  border: 1px solid var(--divider);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 800;
}

.sic_footer_col h4 {
  font-size: 14px;
  margin-bottom: 14px;
}

.sic_footer_col a {
  display: block;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .22s ease, transform .22s ease;
}

.sic_footer_col a:hover {
  color: var(--primary-color);
  transform: translateX(4px);
}

.sic_footer_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.sic_footer_social {
  display: flex;
  gap: 10px;
}

.sic_footer_social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--header-bg);
  border: 1px solid var(--divider);
  color: var(--primary-text);
  text-decoration: none;
  transition: transform .22s ease, color .22s ease, border-color .22s ease;
}

.sic_footer_social a:hover {
  transform: translateY(-3px);
  color: var(--primary-color);
  border-color: rgba(99,102,241,.35);
}

[data-theme="dark"] .sic_brand_logo strong {
  background: rgba(99,102,241,.16);
}

@media (max-width: 900px) {
  .sic_footer_cta,
  .sic_footer_body {
    grid-template-columns: 1fr 1fr;
  }

  .sic_footer_brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .sic_pro_footer {
    padding: 55px 0 22px;
  }

  .sic_footer_cta,
  .sic_footer_body {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .sic_footer_cta h2 {
    font-size: 27px;
  }

  .sic_footer_input {
    flex-direction: column;
    align-items: stretch;
  }

  .sic_footer_input i {
    display: none;
  }

  .sic_footer_input input {
    min-height: 42px;
    padding: 0 10px;
  }
} */













/* footer {


    position: relative;
    background: linear-gradient(180deg,
            #0b1023 0%,
            #070b1a 40%,
            #020617 100%);
    padding: 80px 0 30px;

}


footer .footer__grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    padding: 30px;
}


footer .footer__item .footer__logo_name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-text);
}

footer .footer__item .footer__logo_name img {
    width: 25px;
}

footer .footer__item .footer__logo_name span {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
}

footer .footer__item .footer__logo_name p {
    color: var(--gray-text);
    font-size: 12px;
}

footer .footer__item .site__about p {
    color: var(--gray-text);
    font-size: 12px;
    margin-top: 20px;
}


footer .footer__item .social__media__icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

footer .footer__item .social__media__icons a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #241524;
    border: 1px solid #241524;
    color: #94a3b8;
    transition: .25s ease;
    color: #f96269;
    transition: 0.4s;
}

footer .footer__item .social__media__icons a.instagram {
    color: #dc2743;

}

footer .footer__item .social__media__icons a.twitter {
    color: #4ba9fa;
    background-color: #101f3a;
    border: #101f3a;
}


footer .footer__item .social__media__icons a:hover {
    transform: translateY(-3px);
}



footer .footer__item .tool__title {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #7856ba;
    font-weight: 500;
}

footer .footer__item .tool__title span {
    font-size: 12px;
    text-transform: uppercase;
}

footer .footer__item ul {
    margin-top: 20px;
    border-right: 1px solid #131a2a;
}


footer .footer__item ul li {
    list-style: none;
    font-size: 13px;
    padding: 10px 0px;
}

footer .footer__item ul li a {
    color: var(--gray-text);
    transition: 0.4s;
}

footer .footer__item ul li a:hover {
    color: var(--primary-color);
}


footer .footer__item .device_tester {
    color: #69d0b2;
}

footer .footer__item .other_tool {
    color: #dd9a38;
} */



/* newsletter container */
/* .footer__newsletter {
    padding: 26px;
    border-radius: 18px;
    background: linear-gradient(135deg,
            rgba(124, 58, 237, 0.15),
            rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    width: 270px;
} */

/* glow effect */
/* .footer__newsletter::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,
            rgba(124, 58, 237, .35),
            transparent);
    top: -40px;
    right: -40px;
    filter: blur(40px);
} */

/* title */
/* .footer__newsletter h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 6px;
    position: relative;
} */

/* description */
/* .footer__newsletter p {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 16px;
    position: relative;
} */

/* form */
/* .newsletter__form {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
    flex-direction: column;
} */

/* input */
/* .newsletter__input {
    height: 44px;
    border-radius: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: white;
    outline: none;
    transition: .25s ease;
}

.newsletter__input::placeholder {
    color: #64748b;
}

.newsletter__input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
} */

/* button */
/* .newsletter__btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;

    background: linear-gradient(90deg,
            #7c3aed,
            #6366f1);

    transition: .25s ease;
}

.newsletter__btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(124, 58, 237, .35),
        0 2px 6px rgba(0, 0, 0, .2);
} */

/* note */
/* .newsletter__note {
    color: #64748b;
    font-size: 12px;
    position: relative;
} */

/* responsive */
/* @media (max-width:600px) {
    .newsletter__form {
        flex-direction: column;
    }

    .newsletter__btn {
        height: 44px;
    }
}


footer .footer__divider {
    height: 1px;
    width: 100%;
    background-color: #151d2f;
    margin-top: 70px;
    border-radius: 10px;
}

footer .footer__pages__trademark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

@media screen and (max-width:850px) {
    footer .footer__pages__trademark {
        flex-direction: column;
        gap: 10px;
    }
} */

/* footer .footer__pages__trademark .pages__container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    background-color: #101729;
    border-radius: 20px;
    border: 1px solid #151c2f;
} */

/* footer .footer__pages__trademark .pages__container a {
    color: var(--gray-text);
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
    transition: 0.4s;
}

footer .footer__pages__trademark .pages__container a:hover {
    color: var(--primary-color);
}

footer .footer__pages__trademark {
    text-align: center;
}

footer .footer__pages__trademark span {
    color: var(--gray-text);
    font-size: 12px;
    font-weight: 500;
}

footer .footer__pages__trademark span a {
    color: var(--primary-color);
} */

/* footer section code end */



/* ── FAQ accordion ── */
.faq_section .faq__container .asnwer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

.faq_section .faq__container.faq--open .asnwer {
    max-height: 300px;
    opacity: 1;
}

.faq_section .faq__container .quesion i {
    transition: transform 0.3s ease;
    font-size: 16px;
    color: var(--gray-text);
    flex-shrink: 0;
}

.faq_section .faq__container.faq--open .quesion i {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.faq_section .faq__container.faq--open {
    border-left: 3px solid var(--primary-color);
}


/* ================================================================
   UNIVERSAL DROPDOWN ANIMATION SYSTEM
   Replaces all display:none/block with smooth fade+slide
   ================================================================ */

/* -- Shared base state for ALL dropdowns -- */
.desktop__header header li.dropdown__menu_container .dropdown__menu,
.desktop__header header .resize_dropdown_menu,
.desktop__header header .all_tool_dropdown_menu,
.desktop__header header .other__tools__dorpdown,
.desktop__header header .temporary__files__dropdown,
.desktop__header header .profile__container .profile__dropdown__menu {
    display: block !important;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
    /* close: instant start, open: small delay so cursor can travel the gap */
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
}

/* -- Pseudo-element bridge: fills the gap between trigger and dropdown --
   Invisible but hoverable, keeps the parent :hover alive while
   cursor travels from nav item down to the dropdown panel.         */
.desktop__header header li.converter__dropdown_menu::after,
.desktop__header header .resize_dropdown_menu_btn::after,
.desktop__header header .all__tools__btn::after,
.desktop__header header .other__menu::after,
.desktop__header header .temporary__files__btn::after,
.desktop__header header .profile__container::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    /* matches the gap between nav bar and dropdown */
    background: transparent;
}

/* -- Open: add a small open-delay so hover flicker doesn't trigger it --
   Close delay on the parent keeps dropdown alive while crossing the gap */
.desktop__header header li.converter__dropdown_menu:hover .dropdown__menu,
.desktop__header header .resize_dropdown_menu_btn:hover .resize_dropdown_menu,
.desktop__header header .all__tools__btn:hover .all_tool_dropdown_menu,
.desktop__header header .other__menu:hover .other__tools__dorpdown,
.desktop__header header .other__menu .other__tools__dorpdown.menu--open,
.desktop__header header .temporary__files__btn:hover .temporary__files__dropdown,
.desktop__header header .profile__container:hover .profile__dropdown__menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    /* open: small delay (100ms) so accidental hover doesn't trigger */
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1) 100ms,
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}

/* -- Close delay: keep dropdown visible for 200ms after hover leaves
   so cursor has time to travel from trigger into the dropdown         */
.desktop__header header li.dropdown__menu_container .dropdown__menu,
.desktop__header header .resize_dropdown_menu,
.desktop__header header .all_tool_dropdown_menu,
.desktop__header header .other__tools__dorpdown,
.desktop__header header .temporary__files__dropdown,
.desktop__header header .profile__container .profile__dropdown__menu {
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1) 200ms,
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) 200ms;
}

/* Fix: other__menu JS click open must also work */
.desktop__header header .other__menu .other__tools__dorpdown.menu--open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}


/* === JS controlled dropdown fix === */
.dropdown__menu,
.resize_dropdown_menu,
.all_tool_dropdown_menu,
.temporary__files__dropdown,
.profile__dropdown__menu {
    display: block !important;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.menu--open {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}



/* .mobile__menu__container .menu__container{
    height: 100%;
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 20px;

} */






.demo-wrap {
    background: var(--header-bg);
    /* border-radius: 10px; */
    padding: 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    min-height: 520px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
}

.phone-frame {
    width: 100%;
    min-width: 280px;
    height: calc(100vh - 50px);
    background: var(--header-bg);
    /* border-radius: 24px; */
    /* border: 0.5px solid red; */
    overflow: hidden;
    position: relative;
    color: var(--primary-text);
}


.mobile-menu-container {
    height: 100%;
    width: 100%;
    background: var(--header-bg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.phone-frame .m-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    /* border-bottom: 0.5px solid red; */
}

.phone-frame .m-header button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-text);
    font-size: 14px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.phone-frame .m-header-title {
    font-size: 15px;
    font-weight: 500;
}

.phone-frame .back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    padding: 4px 0;
}

.phone-frame .back-btn svg {
    width: 14px;
    height: 14px;
}

.phone-frame .menu-nav {
    padding: 8px 0;
}

.phone-frame .menu-nav ul {
    list-style: none;
}

.phone-frame .menu-nav li {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    transition: background 0.15s;
    user-select: none;
    text-transform: capitalize;
}

.phone-frame .menu-nav li a {
    color: var(--primary-text);
}

.phone-frame .menu-nav li:hover {
    background: var(--color-background-secondary);
}

.phone-frame .menu-nav li .chevron {
    color: var(--color-text-secondary);
    font-size: 11px;
    transition: transform 0.2s;
}

.phone-frame .panel {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: var(--header-bg);
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.phone-frame .panel.active {
    left: 0;
}

.phone-frame .panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-shrink: 0;
}

.phone-frame .panel-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.phone-frame .panel-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* .phone-frame .panel-items::-webkit-scrollbar{
    width: 4px;
}

.phone-frame .panel-items::-webkit-scrollbar-thumb{
    background-color: var(--primary-color);
    border-radius: 10px;
} */

.phone-frame .panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 0.5px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 5px;
}

/* .phone-frame .panel-item:hover {
    background: var(--color-background-secondary);
} */

.phone-frame .item-icon {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.phone-frame .item-icon.converter__icon {
    height: 50px;
    width: 50px;
    flex-direction: column;
    font-weight: 500;
    font-size: 12px;
}

.phone-frame .item-icon.converter__icon i {
    font-size: 20px;
}

.phone-frame .item-label {
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--primary-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.phone-frame .item-label.conveter_name {
    text-transform: uppercase;
    color: var(--gray-text);
    display: flex;
    align-items: center;
    gap: 10px;
}



.phone-frame .item-sub {
    font-size: 11px;
    color: var(--gray-text);
    margin-top: 1px;
}

.phone-frame .back-arrow-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--color-text-secondary);
}

.phone-frame .back-arrow-btn svg {
    width: 18px;
    height: 18px;
}

.phone-frame .tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: auto;
    font-weight: 500;
}

.phone-frame .tag-new {
    background: #E6F1FB;
    color: #185FA5;
}

.phone-frame .tag-hot {
    background: #FCEBEB;
    color: #A32D2D;
}


/* ── Upload area transition ── */
.hero_section .uploading__section .uploading__area,
.hero_section .uploading__section .uploading__progress__container {
    grid-area: 1 / 1;
    /* both sit in same grid cell — no layout shift */
}

.hero_section .uploading__section .uploading__area {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero_section .uploading__section .uploading__area.hide-upload {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
    pointer-events: none;
}


/* ── Progress container ── */
.uploading__progress__container {
    height: fit-content;
    width: min(700px, 100%);
    background-color: var(--header-bg);
    border-radius: 20px;
    box-shadow: var(--box-shadow);
    padding: 20px;

    /* initial hidden state */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(.22, 1, .36, 1),
        transform 0.4s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0.4s;
}

.uploading__progress__container.show-progress {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(.22, 1, .36, 1),
        transform 0.4s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}

/* upload card pop-in animation */
/* ── Card ENTER animation ── */
@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
        box-shadow: none;
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.015);
    }

    80% {
        transform: translateY(2px) scale(0.998);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* shimmer sweep on the icon thumbnail after card lands */
@keyframes shimmerSweep {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ── Card EXIT animation ── */
@keyframes cardExit {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 120px;
        margin-top: 8px;
        padding: 10px 15px;
    }

    35% {
        opacity: 0;
        transform: translateX(60px) scale(0.96);
        max-height: 120px;
    }

    100% {
        opacity: 0;
        transform: translateX(60px) scale(0.96);
        max-height: 0;
        margin-top: 0;
        padding: 0 15px;
    }
}

.upload_card {
    animation: cardEnter 0.55s cubic-bezier(.22, 1, .36, 1) both;
    /* needed so exit's max-height collapse works */
    overflow: hidden;
    will-change: transform, opacity;
}

.upload_card:nth-child(1) {
    animation-delay: 0.00s;
}

.upload_card:nth-child(2) {
    animation-delay: 0.07s;
}

.upload_card:nth-child(3) {
    animation-delay: 0.14s;
}

.upload_card:nth-child(4) {
    animation-delay: 0.21s;
}

.upload_card:nth-child(n+5) {
    animation-delay: 0.25s;
}

/* icon shimmer fires after card settles */
.upload_card .icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 70%);
    background-size: 200% 100%;
    animation: shimmerSweep 0.7s ease 0.5s both;
    border-radius: inherit;
    pointer-events: none;
}

/* exit state — applied via JS */
.upload_card.card--removing {
    animation: cardExit 0.42s cubic-bezier(.55, 0, .1, 1) forwards;
    pointer-events: none;
}

/* progress bar fill animation */
@keyframes progressFill {
    from {
        width: 0%;
    }

    to {
        width: var(--target-width, 70%);
    }
}

/* .progress_bar {
    animation: progressFill 1.2s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: 0.3s;
    transition: 0.3s;
} */


.uploading__progress__container button.FileUploadBtn {
    padding: 10px 20px;
    /* background-color: rgb(196, 194, 194); */
    border-radius: 13px;
    border: 0;
    text-transform: capitalize;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    background: #F3F5FF;
    color: #5B6CFF;
    border: 1px dashed #C7D2FE;
    transition: 0.3s;
}

[data-theme="dark"] .uploading__progress__container button.FileUploadBtn{
    background-color: var(--menu-hover);
}

.uploading__progress__container button.FileUploadBtn:hover {
    background: #EEF1FF;
    border-color: #9FB0FF;
}

[data-theme="dark"] .uploading__progress__container button.FileUploadBtn:hover{
    border-color: #9FB0FF;
    background-color: rgba(129, 140, 248, 0.15);
}

.uploading__progress__container .upload__card_container {
    margin-top: 15px;
}


.uploading__progress__container .upload__card_container .upload_card {
    padding: 10px 15px;
    width: 100%;
    border-radius: 10px;
    background: var(--upcard);
    border: 1px solid var(--divider);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}


.uploading__progress__container .upload__card_container .upload_card .files__details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name {
    display: flex;
    align-items: center;
    gap: 7px;
}

.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name .icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name .icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}



.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name .names__files__size span {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-text);
}


.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name .names__files__size .files__size__and__status {
    display: flex;
    align-items: center;
    gap: 7px;
}

.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name .names__files__size .files__size__and__status span {
    color: var(--gray-text);
    font-size: 11px;
}

.uploading__progress__container .upload__card_container .upload_card .files__details .icons__and__name .names__files__size .files__size__and__status .badge {

    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #22c55e;
    transition: all 0.3s
}


.uploading__progress__container .upload__card_container .upload_card .files__details .image__format__abort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uploading__progress__container .upload__card_container .upload_card .files__details .image__format__abort select {
    padding: 3px 10px;
    outline: none;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid var(--divider);
    transition: 0.4s;
    cursor: pointer;
    background-color: var(--header);
    color: var(--primary-text);
}

.uploading__progress__container .upload__card_container .upload_card .files__details .image__format__abort select:hover {
    border-color: var(--primary-color);
}

.uploading__progress__container .upload__card_container .upload_card .files__details .image__format__abort .AbortBtn {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--divider);
    background-color: transparent;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 500;
    color: var(--primary-text);
}

.uploading__progress__container .upload__card_container .upload_card .files__details .image__format__abort .AbortBtn:hover {
    border-color: var(--primary-color);
}

.uploading__progress__container .upload__card_container .upload_card .progress_bar__container {
    height: 3px;
    width: 100%;
    border-radius: 10px;
    background-color: #e8e7e2;
    overflow: hidden;
    transition: 0.3s !important;
}


.uploading__progress__container .upload__card_container .upload_card .progress_bar__container .progress_bar {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    border-radius: 10px;
    transition: 0.4s !important;
}

.uploading__progress__container .upload__card_container .upload_card .status {
    color: var(--primary-color);
    font-size: 12px;
    display: flex;
    justify-content: end;
}

.uploading__progress__container .conveter__btn_container {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.uploading__progress__container .conveter__btn_container .images__format {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uploading__progress__container .conveter__btn_container .images__format span {
    font-size: 12px;
    color: var(--primary-text);
    font-weight: 500;
}

.uploading__progress__container .conveter__btn_container .images__format span span {
    font-weight: bold;
}

.uploading__progress__container .conveter__btn_container .images__format select {
    padding: 3px 20px;
    outline: none;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid var(--divider);
    transition: 0.4s;
    cursor: pointer;
    background-color: var(--header);
    color: var(--primary-text);
}

.uploading__progress__container .conveter__btn_container button {
    padding: 9px 20px;
    background-color: var(--primary-color);
    color: #fff;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    text-transform: capitalize;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.25);
    transition: all 0.2s ease;
}

.uploading__progress__container .conveter__btn_container button:disabled {
    background-color: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
    transform: none;
    pointer-events: none;
}

.uploading__progress__container .conveter__btn_container button:disabled:hover {
    transform: none;
    box-shadow: none;
}

.uploading__progress__container .conveter__btn_container button:hover {
    box-shadow: 0 16px 45px rgba(99, 102, 241, 0.35);
    transform: translateY(-2px);
}

.uploading__progress__container .conveter__btn_container button svg {
    height: 15px;
}




/* ══════════════════════════════════════
     TOAST SYSTEM
  ══════════════════════════════════════ */

/* #toast-root {
     position: fixed;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: 10px;
     pointer-events: none;
     max-width: 360px;
     width: calc(100vw - 32px);
     transition: all 0.3s;
 }


 #toast-root.br {
     bottom: 24px;
     right: 24px;
     align-items: flex-end;
 }

 #toast-root.bl {
     bottom: 24px;
     left: 24px;
     align-items: flex-start;
 }

 #toast-root.tr {
     top: 24px;
     right: 24px;
     flex-direction: column-reverse;
     align-items: flex-end;
 }

 #toast-root.tl {
     top: 24px;
     left: 24px;
     flex-direction: column-reverse;
     align-items: flex-start;
 }

 #toast-root.tc {
     top: 24px;
     left: 50%;
     transform: translateX(-50%);
     flex-direction: column-reverse;
     align-items: center;
 }

 #toast-root.bc {
     bottom: 24px;
     left: 50%;
     transform: translateX(-50%);
     align-items: center;
 }

 .toast {
     pointer-events: all;
     display: flex;
     align-items: flex-start;
     gap: 11px;
     padding: 13px 14px 15px;
     border-radius: 8px;
     border: 1px solid var(--border);
     background: var(--header-bg);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     position: relative;
     overflow: hidden;
     min-width: 280px;
     max-width: 360px;
     width: 100%;
     cursor: default;
     animation: t-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     transform-origin: bottom right;
 }

 .toast.removing {
     animation: t-out 0.26s cubic-bezier(0.55, 0, 1, 0.45) forwards;
 }

 @keyframes t-in {
     0% {
         opacity: 0;
         transform: translateX(22px) scale(0.9);
     }

     100% {
         opacity: 1;
         transform: translateX(0) scale(1);
     }
 }

 @keyframes t-out {
     0% {
         opacity: 1;
         transform: translateX(0) scale(1);
         max-height: 120px;
         margin-bottom: 0;
     }

     100% {
         opacity: 0;
         transform: translateX(24px) scale(0.88);
         max-height: 0;
         margin-bottom: -10px;
     }
 } */

/* Left accent strip */
/* .toast::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 3px;
     border-radius: 3px 0 0 3px;
 }

 .toast.success::before {
     background: var(--green);
 }

 .toast.error::before {
     background: var(--red);
 }

 .toast.warning::before {
     background: var(--amber);
 }

 .toast.info::before {
     background: var(--blue);
 }

 .toast.loading::before {
     background: var(--purple);
 } */

/* Icon bubble */
/* .t-icon {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: var(--primary-text);
 }

 .toast.success .t-icon {
     background: var(--green-bg);
     border: 1px solid var(--green-border);
 }

 .toast.error .t-icon {
     background: var(--red-bg);
     border: 1px solid var(--red-border);
 }

 .toast.warning .t-icon {
     background: var(--amber-bg);
     border: 1px solid var(--amber-border);
 }

 .toast.info .t-icon {
     background: var(--blue-bg);
     border: 1px solid var(--blue-border);
 }

 .toast.loading .t-icon {
     background: var(--purple-bg);
     border: 1px solid var(--purple-border);
 }

 .t-icon svg {
     width: 16px;
     height: 16px;
     stroke-width: 2.2;
 }

 .toast.success .t-icon svg {
     stroke: var(--green);
 }

 .toast.error .t-icon svg {
     stroke: var(--red);
 }

 .toast.warning .t-icon svg {
     stroke: var(--amber);
 }

 .toast.info .t-icon svg {
     stroke: var(--blue);
 }

 .toast.loading .t-icon svg {
     stroke: var(--purple);
 }

 .spin {
     animation: spin 0.9s linear infinite;
     display: block;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 } */

/* Body */
/* .t-body {
     flex: 1;
     min-width: 0;
     padding-top: 1px;
 }

 .t-title {
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--primary-text);
     line-height: 1.4;
 }

 .t-msg {
     font-size: 0.78rem;
     color: var(--gray-text);
     margin-top: 2px;
     line-height: 1.45;
 } */

/* Action button */
/* .t-action {
     margin-top: 8px;
     padding: 4px 10px;
     border-radius: 6px;
     border: 1px solid var(--border);
     background: transparent;
     font-size: 0.75rem;
     font-weight: 500;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s;
 } */

/* .toast.success .t-action {
     color: var(--green);
     border-color: var(--green-border);
 }

 .toast.error .t-action {
     color: var(--red);
     border-color: var(--red-border);
 }

 .toast.warning .t-action {
     color: var(--amber);
     border-color: var(--amber-border);
 }

 .toast.info .t-action {
     color: var(--blue);
     border-color: var(--blue-border);
 }

 .toast.loading .t-action {
     color: var(--purple);
     border-color: var(--purple-border);
 }

 .t-action:hover {
     background: var(--surface-2);
 } */

/* Close */
/* .t-close {
     width: 22px;
     height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 6px;
     background: none;
     border: none;
     color: var(--primary-text);
     cursor: pointer;
     flex-shrink: 0;
     transition: background 0.12s, color 0.12s;
     margin-top: 1px;
 }

 .t-close:hover {
     background: var(--menu-hover);
     color: var(--primary-text);
 }

 .t-close svg {
     width: 13px;
     height: 13px;
     stroke-width: 2.5;
 } */

/* Progress bar */
/* .t-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     border-radius: 0;
     animation: t-progress linear forwards;
 }

 .toast.success .t-progress {
     background: var(--green);
 }

 .toast.error .t-progress {
     background: var(--red);
 }

 .toast.warning .t-progress {
     background: var(--amber);
 }

 .toast.info .t-progress {
     background: var(--blue);
 }

 .toast.loading .t-progress {
     background: var(--purple);
 }

 @keyframes t-progress {
     from {
         width: 100%;
     }

     to {
         width: 0%;
     }
 }


 .toast:not(:last-child) {
     opacity: 0.85;
 } */






 /* ── Loader Overlay ──────────────────────────────────── */
 /* ── Loader Overlay ── */
 #loaderOverlay {
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: var(--body-background);
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 28px;
     padding: 40px 24px;
     transition: opacity 0.5s ease;
     overflow: hidden;
 }

 #loaderOverlay.fade-out {
     opacity: 0;
     pointer-events: none;
 }

 .loader-bg-dots {
     position: absolute;
     inset: 0;
     pointer-events: none;
     overflow: hidden;
 }

 .loader-dot {
     position: absolute;
     border-radius: 50%;
     background: rgba(99, 102, 241, 0.07);
     animation: loaderFloat linear infinite;
 }

 @keyframes loaderFloat {
     0% {
         transform: translateY(0) translateX(0);
         opacity: 0;
     }

     15% {
         opacity: 1;
     }

     85% {
         opacity: 1;
     }

     100% {
         transform: translateY(-140px) translateX(25px);
         opacity: 0;
     }
 }

 .loader-icon-wrap {
     position: relative;
     width: 84px;
     height: 84px;
 }

 .loader-ring-outer {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 3px solid var(--border);
     border-top-color: var(--primary-color);
     animation: spinLoader 0.95s linear infinite;
 }

 .loader-ring-inner {
     position: absolute;
     inset: 10px;
     border-radius: 50%;
     border: 2px solid var(--border);
     border-bottom-color: #818cf8;
     animation: spinLoader 1.4s linear infinite reverse;
 }

 .loader-icon-center {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-color);
     font-size: 28px;
 }

 @keyframes spinLoader {
     to {
         transform: rotate(360deg);
     }
 }

 .loader-title {
     font-size: 18px;
     font-weight: 600;
     color: var(--primary-text);
     text-align: center;
     margin: 0;
 }

 .loader-sub {
     font-size: 13px;
     color: var(--gray-text);
     text-align: center;
     margin: -45px 0 0;
     transition: all 0.3s ease;
     min-height: 20px;
 }

 .loader-steps {
     display: flex;
     flex-direction: column;
     gap: 10px;
     width: 100%;
     max-width: 340px;
 }

 .loader-step {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 14px;
     border-radius: var(--radius-sm);
     background: var(--section-bg);
     border: 1px solid var(--border);
     font-size: 13px;
     color: var(--gray-text);
     transition: all 0.4s ease;
 }

 .loader-step.ls-active {
     border-color: #818cf8;
     color: var(--primary-text);
     background: var(--card-color);
     box-shadow: var(--card-shadow);
 }

 .loader-step.ls-done {
     color: var(--success);
     border-color: rgba(16, 185, 129, 0.35);
     background: var(--success-bg);
 }

 .ls-icon {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     flex-shrink: 0;
     background: var(--border);
     color: var(--gray-text);
     transition: all 0.4s ease;
 }

 .loader-step.ls-active .ls-icon {
     background: var(--primary-color);
     color: #fff;
     animation: lsPulse 1s ease-in-out infinite;
 }

 .loader-step.ls-done .ls-icon {
     background: var(--success);
     color: #fff;
     animation: none;
 }

 @keyframes lsPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.12);
     }
 }

 .ls-label {
     flex: 1;
     font-weight: 500;
 }

 .ls-spinner {
     width: 14px;
     height: 14px;
     border: 2px solid rgba(99, 102, 241, 0.2);
     border-top-color: var(--primary-color);
     border-radius: 50%;
     animation: spinLoader 0.7s linear infinite;
     display: none;
     flex-shrink: 0;
 }

 .loader-step.ls-active .ls-spinner {
     display: block;
 }

 .loader-progress-wrap {
     width: 100%;
     max-width: 340px;
 }

 .loader-progress-track {
     height: 5px;
     background: var(--border);
     border-radius: 10px;
     overflow: hidden;
 }

 .loader-progress-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--primary-color), #818cf8);
     border-radius: 10px;
     width: 0%;
     transition: width 0.7s cubic-bezier(.4, 0, .2, 1);
 }

 .loader-progress-meta {
     display: flex;
     justify-content: space-between;
     margin-top: 7px;
     font-size: 11px;
     color: var(--gray-text);
 }


 /* table css code   */

 .ift-wrap { padding: 1rem 0; }
.ift-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.ift-header h2 { font-size: 18px; font-weight: 500; color: var(--primary-text); margin: 0; }
.ift-count { font-size: 12px; color: var(--gray-text); background: var(--section-bg); border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; }
.ift-table-wrap { border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
table.ift-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ift-table thead tr { background: var(--section-bg); }
table.ift-table thead th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-text); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 0.5px solid var(--border); white-space: nowrap; }
table.ift-table tbody tr { border-bottom: 0.5px solid var(--border); transition: background 0.15s; }
table.ift-table tbody tr:last-child { border-bottom: none; }
table.ift-table tbody tr:hover { background: var(--cardhover); }
table.ift-table tbody td { padding: 14px 16px; vertical-align: top; color: var(--primary-text); }
.ift-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.ift-badge-jpg  { background: #FAECE7; color: #712B13; }
.ift-badge-png  { background: #E6F1FB; color: #0C447C; }
.ift-badge-gif  { background: #FAEEDA; color: #633806; }
.ift-badge-webp { background: #E1F5EE; color: #085041; }
.ift-badge-bmp  { background: #F1EFE8; color: #444441; }
.ift-badge-tiff { background: #EEEDFE; color: #3C3489; }
.ift-feature { font-size: 13px; color: var(--primary-text); line-height: 1.5; }
.ift-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 0.5px solid var(--border); color: var(--gray-text); margin: 2px 2px 0 0; background: var(--header-bg); }
.ift-cards { display: none; gap: 10px; flex-direction: column; }
.ift-card { background: var(--header-bg); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.ift-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.ift-card-name { font-size: 15px; font-weight: 500; color: var(--primary-text); }
.ift-card-full { font-size: 12px; color: var(--gray-text); margin-top: 2px; }
.ift-card-row { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 13px; }
.ift-card-label { color: var(--gray-text); text-transform: capitalize; min-width: 60px; flex-shrink: 0; }
.ift-card-val { color: var(--primary-text); line-height: 1.5; }
@media (max-width: 560px) {
    .ift-table-wrap { display: none; }
    .ift-cards { display: flex; }
}



/* example conversion  */


 .ec_section {
            margin-top: 70px;
            padding: 10px 16px 60px;
        }

        .ec_top {
            text-align: center;
        }

        .ec_section_badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            color: var(--primary-color);
            background: var(--secondary-text);
            padding: 6px 16px;
            border-radius: 30px;
            border: 1px solid var(--hover-color);
        }

        [data-theme="dark"] .ec_section_badge {
            background: #1b2232;
            border-color: #2a3347;
        }

        .ec_top h2 {
            margin-top: 18px;
            font-size: 38px;
            line-height: 1.2;
            color: var(--heading-color);
            /* font-family: "Google Sans", sans-serif; */
        }

        .ec_top h2 span {
            background: var(--liearcolor);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .ec_top p {
            margin-top: 12px;
            font-size: 13px;
            color: var(--gray-text);
        }

        .ec_compare {
            margin-top: 40px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 18px;
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
        }

        .ec_card {
            background: var(--header-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 18px;
            box-shadow: var(--card-shadow);
        }

        .ec_card_top {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .ec_tag {
            font-size: 11px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 30px;
        }

        .ec_tag_original {
            color: #6f2efb;
            background: #efeafe;
        }

        .ec_tag_converted {
            color: #08824e;
            background: #e6f4ee;
        }

        [data-theme="dark"] .ec_tag_original {
            color: #b9a1ff;
            background: #1e1e3a;
        }

        [data-theme="dark"] .ec_tag_converted {
            color: #6ee7a7;
            background: #0b1a14;
        }

        .ec_format {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-text);
        }

        .ec_size {
            margin-left: auto;
            font-size: 12px;
            font-weight: 600;
            color: var(--label-color);
            background: var(--section-bg);
            border: 1px solid var(--border);
            padding: 5px 12px;
            border-radius: 30px;
        }

        .ec_img_box {
            width: 100%;
            aspect-ratio: 16/10;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: var(--section-bg);
        }

        .ec_img_box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .ec_middle {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .ec_arrow_circle {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--primary-color);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .ec_result {
            text-align: center;
        }

        .ec_result .ec_check_icon {
            width: 34px;
            height: 34px;
            margin: 0 auto 8px;
            border-radius: 50%;
            border: 2px solid #16a34a;
            color: #16a34a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        [data-theme="dark"] .ec_result .ec_check_icon {
            border-color: #4ade80;
            color: #4ade80;
        }

        .ec_result span {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: #16a34a;
            white-space: nowrap;
        }

        [data-theme="dark"] .ec_result span {
            color: #4ade80;
        }

        .ec_result p {
            margin-top: 2px;
            font-size: 11px;
            color: var(--gray-text);
            white-space: nowrap;
        }

        .ec_features {
            max-width: 1100px;
            margin: 40px auto 0;
            background: var(--card-color);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .ec_feature_item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ec_feature_icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
            background: var(--menu-hover);
            color: var(--primary-color);
        }

        /* .ec_feature_icon.hq {
            background: linear-gradient(135deg, #818cf8, #6366f1);
        }

        .ec_feature_icon.ss {
            background: linear-gradient(135deg, #34d399, #059669);
        }

        .ec_feature_icon.fl {
            background: linear-gradient(135deg, #60a5fa, #2563eb);
        }

        .ec_feature_icon.be {
            background: linear-gradient(135deg, #c084fc, #9333ea);
        } */

        .ec_feature_item span {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-text);
        }

        .ec_feature_item p {
            margin-top: 2px;
            font-size: 11px;
            color: var(--gray-text);
        }

        @media (max-width: 860px) {
            .ec_compare {
                grid-template-columns: 1fr;
            }

            .ec_middle {
                flex-direction: row;
                justify-content: center;
                gap: 28px;
            }

            .ec_arrow_circle {
                transform: rotate(90deg);
            }

            .ec_features {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .ec_top h2 {
                font-size: 28px;
            }

            .ec_features {
                grid-template-columns: 1fr;
            }
        }






        
/* releted__tool__section code  */


/* footer css  */
.sic_footer_v2 {
  padding: 80px 0 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.18), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(239, 68, 68, 0.12), transparent 28%),
    linear-gradient(180deg, var(--section-bg), var(--body-background));
}

.sic_footer_hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  padding: 34px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.96), rgba(139, 92, 246, 0.96)),
    var(--primary-color);
  color: #fff;
  box-shadow: 0 34px 80px -42px rgba(99, 102, 241, 0.95);
  position: relative;
  overflow: hidden;
}

.sic_footer_hero::before,
.sic_footer_hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.sic_footer_hero::before {
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
}

.sic_footer_hero::after {
  width: 140px;
  height: 140px;
  left: 45%;
  bottom: -70px;
}

.sic_footer_hero_content,
.sic_footer_newsletter {
  position: relative;
  z-index: 1;
}

.sic_footer_chip {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 16px;
}

.sic_footer_hero h2 {
  max-width: 650px;
  font-size: 36px;
  line-height: 1.14;
  margin-bottom: 13px;
}

.sic_footer_hero p {
  max-width: 670px;
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.9;
}

.sic_footer_mini_stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.sic_footer_mini_stats div {
  min-width: 112px;
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sic_footer_mini_stats strong,
.sic_footer_mini_stats span {
  display: block;
}

.sic_footer_mini_stats strong {
  font-size: 18px;
  margin-bottom: 3px;
}

.sic_footer_mini_stats span {
  font-size: 11px;
  opacity: 0.82;
}

.sic_footer_newsletter {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
}

.newsletter_icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--primary-color);
  font-size: 23px;
  margin-bottom: 18px;
}

.sic_footer_newsletter h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.newsletter_form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.newsletter_input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  min-height: 48px;
  border-radius: 15px;
  background: #fff;
}

.newsletter_input i {
  color: var(--primary-color);
}

.newsletter_input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font-size: 13px;
}

.newsletter_form button {
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#SicSubscribeMsg {
  display: block;
  margin-top: 11px;
  font-size: 12px;
  opacity: 0.9;
}

.sic_footer_main {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 22px;
  padding: 30px;
  border-radius: 28px;
  background: var(--header-bg);
  border: 1px solid var(--divider);
  box-shadow: var(--box-shadow);
}

.sic_logo_box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.sic_logo_mark {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #e3e3f8;
  color: var(--primary-color);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.sic_logo_box h3,
.sic_footer_col h4 {
  color: var(--primary-text);
}

.sic_logo_box h3 {
  font-size: 18px;
  margin-bottom: 3px;
}

.sic_logo_box p,
.sic_brand_desc,
.sic_footer_col a,
.sic_footer_bottom p {
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.7;
}

.sic_brand_desc {
  max-width: 430px;
  margin-bottom: 18px;
}

.sic_format_pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sic_format_pills span {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--body-background);
  border: 1px solid var(--divider);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 800;
}

.sic_footer_col h4 {
  font-size: 14px;
  margin-bottom: 14px;
}

.sic_footer_col a {
  display: block;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.22s ease, transform 0.22s ease;
}

.sic_footer_col a:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

.sic_footer_bottom {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.sic_footer_social {
  display: flex;
  gap: 10px;
}

.sic_footer_social a,
.sic_back_top {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--header-bg);
  border: 1px solid var(--divider);
  color: var(--primary-text);
  text-decoration: none;
  transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.sic_footer_social a:hover,
.sic_back_top:hover {
  transform: translateY(-3px);
  color: var(--primary-color);
  border-color: rgba(99, 102, 241, 0.35);
}

.sic_back_top {
  cursor: pointer;
}

[data-theme="dark"] .sic_logo_mark {
  background: rgba(99, 102, 241, 0.16);
}

@media (max-width: 960px) {
  .sic_footer_hero,
  .sic_footer_main {
    grid-template-columns: 1fr 1fr;
  }

  .sic_footer_brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .sic_footer_v2 {
    padding: 55px 0 24px;
  }

  .sic_footer_hero,
  .sic_footer_main {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 22px;
  }

  .sic_footer_hero h2 {
    font-size: 28px;
  }

  .sic_footer_mini_stats {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sic_footer_bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}










/* ===== Ad Slot Container ===== */
/* Default state: HIDDEN. Ad slot tabhi dikhega jab AdSense confirm kare
   ki ad actually fill hua hai (ads.js isko handle karta hai).
   Agar ad blocked hai ya "unfilled" hai, to ye box page mein
   kabhi dikhega hi nahi — koi khali jagah/gap nahi chhutega. */

.ad__slot {
    display: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 10px;
}

.ad__slot.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px auto;
    min-height: 100px;
}

.ad__slot .ad__inner {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ad__slot .ad__inner ins,
.ad__slot .ad__inner iframe {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

.ad__slot .ad__label {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--secondary-text, #999);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    width: 100%;
}

.ad__slot--in-content {
    max-width: 900px;
}

@media (max-width: 600px) {
    .ad__slot.is-visible {
        min-height: 100px;
        margin: 20px auto;
    }
}