@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Kanit: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&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url(/css/header.css);
@import url(/css/hero.css);
@import url(/css/sroll_infinite.css);
@import url(/css/pain.css);
@import url(/css/about.css);
@import url(/css/price.css);
@import url(/css/faq.css);
@import url(/css/footer.css);


:root {
    --main-color: #26c2ff;
    --second-color: #4c94b1;
    --bg-color-1: #000;
    --bg-color-2: #333;
    --bg-color-3: #181818;
    --text-color-1: #d6d6d6;
    --text-color-2: #cacaca;
    --text-color-3: #9c9b9b;
    --border-color: #2c2c2ccc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    pointer-events: all;
}

body {
    background-color: var(--bg-color-1);
    color: var(--text-color-1);
    position: relative;
    pointer-events: none;
}

a {
    color: var(--text-color-1);
    text-decoration: none;
}

.btn {
    display: flex;
    justify-content: space-between;
    border-radius: 25px;
    align-items: center;
    color: var(--text-color-3);
    background-color: var(--bg-color-2);
    background: linear-gradient(270deg, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 0.63) 52%, #181818 92%);
    padding: 3px 0 3px 5px;
    width: 210px;
    font-size: 1.2rem;
    text-wrap: nowrap;
    border: 1px solid var(--border-color);

    i {
        font-size: 2.5rem;
        transform: rotate(45deg);
    }
}

.circle_words {
    position: relative;
    margin-right: 5px;
}

.gif_circle {
    position: absolute;
    width: 250px;
    aspect-ratio: 4/1;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/**swiper**/
.swiper {
    width: min(95%, 800px);
    img {
        aspect-ratio: 16/9;
        object-fit: cover;
        width: min(95%, 800px);
    }
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: linear-gradient(180deg, rgba(43, 86, 104, 0.753) 6%, rgb(0, 0, 0) 45%);
    border-radius: 10px;

    padding: 10px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--text-color-1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-color-2);
    border: 1px solid var(--border-color);

    svg {
        width: 20px;
        height: 20px;
    }
}