@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-Light25.woff2") format("woff2"), url("../font/SharpGrotesk-Light25.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-Black25.woff2") format("woff2"), url("../font/SharpGrotesk-Black25.woff") format("woff");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-BoldItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-BoldItalic20.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-Book25.woff2") format("woff2"), url("../font/SharpGrotesk-Book25.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-Bold25.woff2") format("woff2"), url("../font/SharpGrotesk-Bold25.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-BlackItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-BlackItalic20.woff") format("woff");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-BookItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-BookItalic20.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-LightItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-LightItalic20.woff") format("woff");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-SemiBoldItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-SemiBoldItalic20.woff") format("woff");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-Medium25.woff2") format("woff2"), url("../font/SharpGrotesk-Medium25.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-MediumItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-MediumItalic20.woff") format("woff");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-ThinItalic20.woff2") format("woff2"), url("../font/SharpGrotesk-ThinItalic20.woff") format("woff");
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-Thin25.woff2") format("woff2"), url("../font/SharpGrotesk-Thin25.woff") format("woff");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "sharpgrotesk";
    src: url("../font/SharpGrotesk-SemiBold25.woff2") format("woff2"), url("../font/SharpGrotesk-SemiBold25.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: sharpgrotesk, sans-serif;
}

#submenu {
    transition: color 0.1s ease-in-out;
}

.stack.active {
    color: #b930a9;
    padding-block: 10px;
    font-weight: 600;
    border-bottom: 2px solid #b930a9;
}

.grid {
    display: grid;
    grid-template-columns: 55% 45%;
}

.movingImage {
    width: 600px !important;
    height: 600px !important;
    box-shadow: 0px 44px 50px 24px rgba(123, 51, 99, 25%);
}
.inshadow {
    background: transparent;
    box-shadow: inset 0px 0px 100px 69px #db9fd7;
}
.rotate {
    height: 100%;
    width: 100%;
    object-fit: contain;
    scale: 3;
    animation: move 45s linear infinite;
}

.gradient-text {
    background: linear-gradient(135deg, #472424, #5653f8, #009a8f, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 100%;
    background-position: 0 0;
}

.myHeader {
    z-index: 1000;
    transform: translateY(2rem);
    transition: transform 0.5s ease;
}

.myHeader.scrolled {
    transform: translateY(0);
}

.myHeader.scrolled nav {
    background: rgba(29, 29, 32, 0.2);
    backdrop-filter: blur(1rem);
}

.nav-btn.active {
    background-color: #b930a9;
}

.stack-cards.active {
    display: block;
}

.accordion::after {
    content: url("../images/arrowTop.png");
    position: absolute;
    right: 0;
    bottom: 0.3rem;
    cursor: pointer;
}
.accordion.active::after {
    content: url("../images/arrowTop.png");
    position: absolute;
    transform: rotate(180deg);
    right: 0;
    bottom: 0.3rem;
    cursor: pointer;
}
.accordion.active {
    color: #000;
    font-weight: 600;
    border-top: 4px solid #000000;
}

.accordionText {
    max-height: 0;
    transition: max-height 0.7s ease-in-out;
}
.accordionText.show {
    padding-bottom: 1rem;
    max-height: 700px;
}

.green {
    box-shadow: 0px 100px 200px -140px #3bb163;
}
.blue {
    box-shadow: 0px 100px 120px -130px #4d8fca;
}
.vitse {
    box-shadow: 0px 100px 120px -130px #3bb163;
}
.lightblue {
    box-shadow: 0px 100px 120px -130px #55a0a8;
}

.para {
    opacity: 0;
    transition: opacity 0.7s linear !important;
}

.para.active {
    opacity: 1;
}

.bgImage {
    background-image: url("../images/Saffa.png");
    background-size: cover;
    background-position: center center;
}
.frame1 {
    background-image: url("../images/product/frame1.png");
    background-size: cover;
    background-position: center center;
}
.frame2 {
    background-image: url("../images/product/frame2.png");
    background-size: cover;
    background-position: center center;
}
.frame3 {
    background-image: url("../images/product/frame3.png");
    background-size: cover;
    background-position: center center;
}
.frame4 {
    background-image: url("../images/product/frame4.png");
    background-size: cover;
    background-position: center center;
}

.scale {
    transition: scale 0.2s linear;
}

.scale__parent:hover .imgOne,
.scale__parent:hover .imgTwo {
    scale: 1.05;
}

.layout-grid > * {
    flex: 1;
}
.card {
    transition: background ease-in-out;
}

.card:hover {
    animation: animateBorder 0.5s step-end forwards;
    background: linear-gradient(135deg, #212125, #131316, #111113);
}

.radial {
    background: radial-gradient(circle, #175840 33.33%, #454155 66.66%, #511c4b 100%);
}

.carousel__slide {
    opacity: 0;
    transition: opacity 2s ease;
}
.carousel__slide.active {
    opacity: 1;
}

.invalid {
    border: 1px solid red !important;
}
/* .carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
} */
.carousel__indicator {
    border: 0;
    border-radius: 50%;
    background-color: #594b58;
    width: 8px;
    height: 8px;
    transition: background-color 1s linear;
}
.carousel__indicator.current-slide {
    background-color: #b930a9;
}

.outercircle {
    background-color: #ad2e9e00;
    transition: background-color 3s ease;
}

.outercircle.show {
    background-color: #ad2e9e;
}

.innercircle {
    background-color: #b32da400;
    transition: background-color 3s ease;
}
.innercircle.show {
    background-color: #b32da4;
}

#hero-section i {
    position: absolute;
    background: radial-gradient(circle, #ff5e5e 0%, #ffffff 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px #fefefe;
}

.special-star {
    background: #fefefe !important;
    box-shadow: 0 0 10px #fefefe, 0 0 20px #fefefe, 0 0 30px #fefefe;

    opacity: 0;
    animation: moveStars 4s infinite forwards;
    /* animation-delay: 2s; */
}

.avatar {
    transition: transform 2s ease;
}

.avatar img {
    transition: scale 0.5s linear;
}
.avatar:hover img {
    scale: 0.9;
}

.open {
    background-color: #18181b;
}

.myHeader.scrolled.open {
    background-color: #18181b;
}

#navSubmenu {
    animation: navfade 0.3s linear;
}

.stickyContainer {
    position: sticky !important;
    top: 10rem;
}

@keyframes moveStars {
    100% {
        transform: translateX(5rem);
        opacity: 1;
    }
}

@keyframes animateBorder {
    0% {
        border: 1px solid #111113;
    }
    25% {
        border-top: 1px solid #b930a9;
    }
    50% {
        border-top: 1px solid #b930a9;
        border-right: 1px solid #b930a9;
    }
    75% {
        border-top: 1px solid #b930a9;
        border-right: 1px solid #b930a9;
        border-bottom: 1px solid #b930a9;
    }
    100% {
        border-right: 1px solid #b930a9;
        border-top: 1px solid #b930a9;
        border-bottom: 1px solid #b930a9;
        border-left: 1px solid #b930a9;
    }
}
.hiddenn {
    display: none !important;
}

#menu {
    padding-inline: 0 !important;
}
@keyframes move {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(35%);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-20%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes navfade {
    from {
        opacity: 0;
        transform: translateY(-3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ========================================== */
/* =============== SCROLL==================== */
/* ========================================== */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    border: none;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: #b930a9;
    height: 1rem;
}

.hideScroller::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.hideScroller::-webkit-scrollbar-thumb {
    background-color: transparent;
}

@media (max-width: 1000px) {
    .stickyContainer {
        position: static !important;
    }
}

@media (max-width: 750px) {
    .myHeader {
        transform: translateY(0);
    }
    /* .myHeader.scrolled {
        background: rgba(29, 29, 32, 0.5);
    } */
    .myHeader.scrolled nav {
        /* background: rgba(29, 29, 32, 0.5); */
        backdrop-filter: blur(0);
    }
    .movingImage {
        width: 352px !important;
        height: 352px !important;
    }

    .gradient-text {
        background: linear-gradient(130deg, #472424, #5653f8, #009a8f, #ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        background-size: 100%;
        background-position: 0 0;
    }
}
@media (max-width: 370px) {
    .movingImage {
        width: 330px !important;
        height: 330px !important;
    }

    .gradient-text {
        background: linear-gradient(130deg, #472424, #5653f8, #009a8f, #ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        background-size: 100%;
        background-position: 0 0;
    }
}