/* custom css */
:root {
    --bs-success: #B9D22E;
    --bs-accordion-btn-bg: #B9D22E;
    --color-red: #ff0050;
    --color-pink: #EA7A9A;
    --color-pink2: #F94687;
    --color-soft-pink: #f9efed;
    --color-linear-gradient: linear-gradient(90deg, #0C6EFD, #F94688);
    --bd-purple: #4c0bce;
    --bd-violet: #712cf9;
    --bd-accent: #ffe484;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bd-accent-rgb: 255, 228, 132;
    --bd-pink-rgb: 214, 51, 132;
}
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1100px;
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #01CEB3;
    --bs-btn-border-color: #01CEB3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #05c2a9;
    --bs-btn-hover-border-color: #05c2a9;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #05c2a9;
    --bs-btn-active-border-color: #05c2a9;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #01CEB3;
    --bs-btn-disabled-border-color: #01CEB3;
}
.accordion-item {
    border-radius: var(--bs-accordion-border-radius);
    margin-bottom: 1rem;
    border: 0;
}
.accordion-item:not(:first-of-type) {
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    border: 0;
}
.accordion-button {
    /* background-color: var(--bs-primary-bg-subtle); */
    background-color: #fff;
    border-radius: var(--bs-accordion-border-radius);
}
.text-red {
    color: var(--color-red);
}
.text-pink {
    color: var(--color-pink);
}
.text-pink2 {
    color: var(--color-pink2);
}
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    background-image: var(--color-linear-gradient);
    color: transparent;
}
.border-pink {
    border-color: var(--color-pink) !important;
}
.border-pink2 {
    border-color: var(--color-pink2) !important;
}
.btn-pink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-pink);
    --bs-btn-border-color: var(--color-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #de6a8b;
    --bs-btn-hover-border-color: #de6a8b;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #de6a8b;
    --bs-btn-active-border-color: #de6a8b;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-pink);
    --bs-btn-disabled-border-color: var(--color-pink);
}
.btn-pink2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-pink2);
    --bs-btn-border-color: var(--color-pink2);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ed3e7f;
    --bs-btn-hover-border-color: #ed3e7f;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ed3e7f;
    --bs-btn-active-border-color: #ed3e7f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-pink2);
    --bs-btn-disabled-border-color: var(--color-pink2);
}
.btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-red);
    --bs-btn-border-color: var(--color-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ed3e7f;
    --bs-btn-hover-border-color: #ed3e7f;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ed3e7f;
    --bs-btn-active-border-color: #ed3e7f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-red);
    --bs-btn-disabled-border-color: var(--color-red);
}
.bg-pink {
    background-color: var(--color-pink) !important;
}
.bg-pink2 {
    background-color: var(--color-pink2)!important;
}
.bg-soft-pink {
    background-color: #F8EFEC!important;
}
.mt-6 {
    margin-top: 4rem !important;
}
.fs-7 {
    font-size: 0.95rem;
}
.fs-8 {
    font-size: 0.9rem;
}
.fs-9 {
    font-size: 0.85rem;
}
.fs-10 {
    font-size: 0.8rem;
}
.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}
.icon.size-20 {
    width: 20px !important;
    height: 20px !important;
}
.icon.size-25 {
    width: 25px !important;
    height: 25px !important;
}
.icon.menu-homepage {
    background: url(../images/i-homepage.svg) center no-repeat;
    background-size: contain;
}
/* .icon.menu-homepage.active {
    background: url(../images/i-menu-homepage-active.svg) center no-repeat;
    background-size: contain;
} */
.icon.menu-tiktok {
    background: url(../images/i-tiktok.svg) center no-repeat;
    background-size: contain;
}
/* .icon.menu-tiktok.active {
    background: url(../images/i-menu-tiktok-active.svg) center no-repeat;
    background-size: contain;
} */
.icon.menu-instagram {
    background: url(../images/i-instagram.svg) center no-repeat;
    background-size: contain;
}
/* .icon.menu-instagram.active {
    background: url(../images/i-menu-instagram-active.svg) center no-repeat;
    background-size: contain;
} */
.icon.menu-facebook {
    background: url(../images/i-facebook.svg) center no-repeat;
    background-size: contain;
}
/* .icon.menu-facebook.active {
    background: url(../images/i-menu-facebook-active.svg) center no-repeat;
    background-size: contain;
} */
.icon.menu-youtube {
    background: url(../images/i-youtube.svg) center no-repeat;
    background-size: contain;
}
.icon.menu-twitter {
    background: url(../images/i-twitter-x.svg) center no-repeat;
    background-size: contain;
}
/* .icon.menu-youtube.active {
    background: url(../images/i-menu-youtube-active.svg) center no-repeat;
    background-size: contain;
} */
/* end custom css */

html {
    font-size: 16px;
}
body {
    background-color: #fff;
    /* background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%), radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%); */
}
a {
    text-underline-position: under;
    color: var(--color-red);
}
.dl__sidebar {
    top: 70px;;
    height: calc(100vh);
    padding-left: 0.25rem;
    margin-left: -0.25rem;
    overflow-y: auto;
    /* background-color: #0F0F0F; */
    border-right: 1px solid #EFF3F4;
}
.main__content {
    grid-area: main__content;
    padding-top: 0px;
}
.main__sidebar {
    grid-area: main__sidebar;
    padding: 20px;
}
.sidebar__right {
    top: 20px;
    display: block;
    height: calc(100vh);
}
.font-custom {
    /* font-family: 'Kalam', cursive; */
}
#page__header {
    height: 60px;
}
#page__header .nav {
    height: 100%;
}
#page__header .nav .nav-item {
    height: 100%;
}
#page__header .nav .nav-link {
    font-size: 1.1rem;
    height: 100%;
    display: flex;
    align-items: center;
}
#page__header .nav .nav-link.active {
    -webkit-box-shadow: inset 0px -2px 0px 0px rgb(255 1 80);
    -moz-box-shadow: inset 0px -2px 0px 0px rgb(255 1 80);
    box-shadow: inset 0px -2px 0px 0px rgb(255 1 80);
}
#header__top {
    background-color: #fff;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}
#mobile__nav {
    padding: 0;
    height: 48px;
    margin: 0;
    background-color: var(--color-red);
    
}
#mobile__nav .main__nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    padding-right: 10px;
    height: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
#mobile__nav .nav__item {
    display: inline-flex;
    align-items: center;
    height: 100%;
    order: 1;
}
#mobile__nav .nav__item a {
    padding: 0 0.5rem 0 0.5rem;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
}
#mobile__nav .nav__item.active {
    order: 0;
}
#mobile__nav .nav__item.active a {
    font-size: 1.5rem;
    font-weight: bold;
}
#mobile__nav .dropdown {
    position: absolute;
    top: 0;
    right: 0;
    background: rgb(248, 55, 88);
    background: linear-gradient(90deg, rgb(248, 55, 88) 0%, rgba(255, 255, 255, 0) 0%, rgb(255 1 80) 22%, rgb(253 199 73) 100%);
    color: #fff;
    width: 60px;
    height: 100%;
}
#mobile__nav .dropdown .btn {
    width: 100%;
    height: 100%;
    font-size: 1.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page__h1 {
    font-size: calc(1.6rem + 2.1vw);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.page__summary {
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}
.download__result .img__preview {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #000;
    margin-bottom: 1rem;
}
.why__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-soft-pink);
    color: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: absolute;
    top: 0;
    left: 50px;
    transform: translate(-50%, -50%);
}
.yellow__highlight {
    background-image: url(../images/yellow_highlight_01.svg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    white-space: nowrap;
}
.yellow__highlight__bold {
    background-image: url(../images/yellow_highlight_bold.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    white-space: nowrap;
}
.instagram__highlight {
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7);
    color: transparent;
}
.tiktok__highlight {
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(115deg, #00f2ea, #000, #ff0050);
    color: transparent;
}
.btn__hamburger .bi-x-lg {
    display: none;
}
.btn__hamburger.show .bi-x-lg {
    display: block;
}
.btn__hamburger .bi-list {
    display: block;
}
.btn__hamburger.show .bi-list {
    display: none;
}
.hero__form {
    background-color: #ffffff;
    background-image: linear-gradient(0deg, #ffffff 0%, #fff1f5 100%);
    padding: 2rem 1rem;
}
.form__download {
    min-height: 50px;
    /* max-width: 700px; */
}
.form__download .input__link {
    border: 2px solid #040404;
    font-size: 1.1rem;
    background-color: #fff;
    border-radius: var(--bs-border-radius);
    height: 50px;
}
/* body.instagram .form__download .input__link {
    border-color: #ea2b7e;
}
body.tiktok .form__download .input__link {
    border-color: #00f2ea;
    box-shadow: 5px 5px 0px #ff0050;
} */
/* body.tiktok .form__download .input__link::placeholder {
    color: #000;
} */
.form__download .btn__submit {
    font-size: 1.1rem;
    /* box-shadow: var(--bs-box-shadow); */
    border-radius: var(--bs-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    color: #fff;
    height: 50px;
    white-space: nowrap;
    padding: 0 30px;
    background-color: #0C6EFD;
}
.form__download .btn__submit:active {
    opacity: 0.8 !important;
    background-color: #0C6EFD;
    color: #fff;
}
/* body.instagram .form__download .btn__submit {
    background: #ea2b7e;
}
body.tiktok .form__download .btn__submit {
    background: #00f2ea;
    box-shadow: 5px 5px 0px #ff0050;
    color: #000;
} */
.form__download .btn__submit:hover {
    opacity: 0.8 !important;
}
#download_wrap {
}
.download__error,
.download__loading {
    padding: 1rem;
    text-align: center;
}
.download__result {
    background-color: #000;
    color: #fff;
    padding: 2rem 1.5rem;
}
.section__content ol,
.section__content ul {
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.section__content ul li,
.section__content ol li {
    margin-bottom: 0.5rem;
}
#page__footer {
    margin-top: 2rem;
    border-top: 1px solid #ddd;
}
@media (min-width: 992px) {

    .hero__form {
        padding: 3rem 0;
        text-align: center;
    }
    .hero__form .inner {
        width: 900px;
        margin: 0 auto;
    }
    .page__h1 {
        font-size: calc(1rem + 2.1vw);
    }
    #download_wrap {
        width: 900px;
        margin: 0 auto;
        padding: 0;
    }
    .download__result {
        display: flex;
        padding: 1.5rem;
        border-radius: 0.5rem;
    }
    .download__result .img__preview {
        width: 300px;
        margin-bottom: 0;
    }

}