/* scroll css */
.scroll__down { display: flex; gap: 20px; align-items: center; }
.scroll__down p { font-weight: 500; font-size: 14px; line-height: 1.9; text-transform: uppercase; color: var(--white); }
.scroll__down span { width: 66px; height: 106px; border: 1px solid var(--black-6); display: flex; align-items: center; justify-content: center; border-radius: 89px; }
.scroll__down span i { color: var(--white); }
.scroll__down-wrapper { height: 425px; display: flex; align-items: center; justify-content: center; }
@media only screen and (max-width: 1399px) { .scroll__down-wrapper { height: 380px; } }
@media only screen and (max-width: 1199px) { .scroll__down-wrapper { height: 350px; } }
@media only screen and (max-width: 767px) { .scroll__down-wrapper { height: auto; padding: 40px 0; } }

.scroll-top { width: 50px; height: 50px; position: fixed; right: 15px; bottom: 0px; z-index: 9999; background: var(--white); border-radius: 100px; mix-blend-mode: exclusion; opacity: 0; visibility: hidden; transition: all 0.5s; }
.scroll-top.showed { opacity: 1; visibility: visible; bottom: 20px; }

.go-top-writer { width: 105px; font-size: 16px; cursor: pointer; text-align: left; color: var(--white); background-image: url(../imgs/writer/go-top.webp); background-position: right center; background-repeat: no-repeat; right: 16%; visibility: hidden; opacity: 0; z-index: 9; transition: all 0.5s; }
.go-top-writer:hover { color: var(--primary); }
.go-top-writer.showed { opacity: 1; visibility: visible; bottom: 20px; }
@media only screen and (max-width: 767px) { .go-top-writer br { display: block; } }

.progress-wrap { position: fixed; right: 20px; bottom: 20px; height: 50px; width: 50px; cursor: pointer; display: block; border-radius: 50px; z-index: 99; opacity: 0; visibility: hidden; transform: translateY(-100px); transition: all 300ms linear; }
.progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); background-color: var(--theme); }
.progress-wrap::after { position: absolute; content: "\f062"; font: var(--fa-font-solid); text-align: center; line-height: 50px; font-size: 18px; color: var(--white); left: 0; top: 0; height: 50px; width: 50px; cursor: pointer; display: block; z-index: 1; transition: all 200ms linear; border-radius: 50px; }
.dark .progress-wrap::after { color: var(--black); }
.progress-wrap svg path { fill: var(--black-6); }
.progress-wrap svg.progress-circle path { fill: var(--theme); stroke: transparent; stroke-width: 5; box-sizing: border-box; transition: all 200ms linear; }

.light .scroll__down p { color: var(--black); }
.light .scroll__down span { border-color: var(--white-3); }
.light .scroll__down span i { color: var(--black); }
.light.go-top-writer { color: var(--black); background-color: transparent; background-image: url(../imgs/writer/go-top-light.webp); }
.light.progress-wrap { margin: 0; background-color: transparent; }
.light.progress-wrap svg path { fill: var(--black); }
.light.progress-wrap::after { color: var(--white); }