c-input {
    -webkit-appearance: none;
    -moz-appearance: none;
}

::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .month_btn.active {
        background-color: transparent;
        border-radius: 2vw;
    }

    input[type="number"] {
        font-size: 1vw;
        line-height: 1.429vw;
        width: 2vw;
    }

    .gradient-bg {
        background: linear-gradient(to right, #f7971e, #ffffff00); /* Example gradient */
    }


    .dark-theme .card-shape-item-left-2,
    .dark-theme .card-shape-item-right-2,
    .dark-theme .card-shape-item-left-3,
    .dark-theme .card-shape-item-right-3 {
        background-color: transparent;
        box-shadow: 11px -11px 0 10px black;
    }

}

@media (max-width: 991px) and (min-width: 768px) {
    .month_btn.active {
        background-color: transparent;
        border-radius: 1.8vw;
    }

    input[type="number"] {
        font-size: 1.7vw;
        line-height: 2.24vw;
        width: 5vw;
    }
}

@media (max-width: 478px) {
    .month_btn.active {
        background-color: transparent;
        border-radius: 5vw;
    }

    input[type="number"] {
        font-size: 4.5vw;
        line-height: 1.429vw;
        width: 5.52vw;
    }
}

input[type="number"] {
    border: none;
    outline: none;
    padding: 5px;
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    color: #f7971e;
    background-color: transparent;
    text-align: right;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type="number"]:focus {
    outline: none;
    border: none;
}


.dark-theme .card-shape-item-left-2,
.dark-theme .card-shape-item-right-2,
.dark-theme .card-shape-item-left-3,
.dark-theme .card-shape-item-right-3 {
    background-color: transparent;
    box-shadow: 11px -11px 0 2px black;
}

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

div.additional-beginning.active {
    background-color: transparent;
}

.additional-beginning.active {
    background-color: transparent;
}

.additional-beginning.slide-left {
    transform: translateX(-100%);
}

.additional-beginning.slide-right {
    transform: translateX(100%);
}

.beginning-list {
    display: none;
}

.beginning-list.active {
    display: flex;
}


.dark-theme {
    --background-color: #000000; /* Dark background */
}


.slider-span {
    position: absolute;
    background-color: rgba(25, 156, 184, 0.3);
    border-radius: 1.38vw;
    z-index: 1; /* Place the slider behind the tab text */
    transition: 0.7s ease;
}

.slider-span-ipad {
    position: absolute;
    background-color: rgba(25, 156, 184, 0.3);
    border-radius: 2.5vw;
    z-index: 1; /* Place the slider behind the tab text */
    transition: 0.7s ease;
}

.horizontal-slider {
    position: absolute;
    height: 100%;
    background-color: rgba(25, 156, 184, 0.3);
    border-radius: 1.8vw;
    z-index: 1; /* Place the slider behind the tab text */
    transition: 0.7s ease;
}

.phone-slider {
    position: absolute;
    height: 100%;
    background-color: rgba(25, 156, 184, 0.3);
    border-radius: 5.3vw;
    z-index: 1; /* Place the slider behind the tab text */
    transition: 0.7s ease;
}

.horizontal-ipad {
    position: absolute;
    height: 100%;
    background-color: rgba(25, 156, 184, 0.3);
    border-radius: 2.5vw;
    z-index: 1; /* Place the slider behind the tab text */
    transition: 0.7s ease;
}

.horizontal-price-slider {
    position: absolute;
    height: 100%;
    background-color: rgba(247, 151, 30, 0.7);
    border-radius: 1.8vw;
    z-index: 1; /* Place the slider behind the tab text */
    transition: 0.7s ease;
}

.blue-background-dark {
    background-color: rgba(23, 39, 42, 0.6) !important; /* Темна версія синього */
}

.yellow-background-dark {
    background-color: rgba(48, 38, 26, 0.6) !important; /* Темна версія жовтого */
}

.nav-button-plus {
    background-color: black;
!important;
}

.modal-dark {
    background-color: rgba(30, 27, 27, 0.79); /* Add missing semicolon */
}

.dark-theme-text {
    color: white;
}

.dark-blue-background {
    background-color: #56C9E2;
!important; /* Darker shade of blue for dark theme */
}

.blackText {
    color: black;
}

.dark-theme .nav-button-plus {
    background-color: #56C9E2;
!important;
}

.dark-modal {
    background-color: #0D0D0D;
!important;
}

.dark-theme-text .button-name {
    color: black
}

.blue-text {
    color: #56C9E2;
}

.white-text {
    color: white;
}

.white-text-plus {
    background-color: black;
    color: white;
}

.dark-blue-background .nav-button-plus {
    background-color: #56C9E2; !important;
}

.dark-demo-btn {
    background-color: #56C9E2;
    color: black;
}

.light-demo-btn {
    background-color: black;
    color: white;
}


.swap-animation-left {
    animation: slide-left 0.7s forwards;
}

.swap-animation-right {
    animation: slide-right 0.7s forwards;
}

@keyframes slide-left {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

@keyframes slide-right {
    from {
        left: 0;
    }
    to {
        left: 100%;
    }
}

.bachground-gradient {
    transition: width 1.5s ease;
}

.background-gradient.active {
    width: 30vw; /* Target width when active */
}

.lang-button-pc {
    background-color: transparent;
    color: #199cb8;
}

.faq-page,
.safety-list,
.additional-devices {
    position: relative;
    left: -100%;
    opacity: 0;
    transition: left 1.2s ease, opacity 1.2s ease; /* Ensure these properties can transition */
    width: 100%;
    height: fit-content; /* Use only one height property */
    box-sizing: border-box;
    display: none; /* Hide initially */
}


.faq-page .active,
.safety-list.active,
.additional-devices.active {
    display: flex; /* Change to flex when active */
    left: 0; /* Slide into view */
    opacity: 1; /* Fade in */
}

.beginning-list {
    position: relative;
    top: -5.57vw;
    opacity: 0;
    transition: top 1.2s ease, opacity 1.2s ease; /* Ensure these properties can transition */
    width: 100%;
    height: fit-content; /* Use only one height property */
    box-sizing: border-box;
    display: none; /* Hide initially */
}

@media (max-width: 478px) {
    .dark-theme .card-shape-item-left-2, .dark-theme .card-shape-item-right-3 {
        background-color: transparent;
        box-shadow: 7vw -4.6vw 0 4vw black;
    }
}

.beginning-list .active {
    display: flex; /* Change to flex when active */
    top: 0; /* Slide into view */
    opacity: 1; /* Fade in */
}

.tab-content-phone {
    transition: opacity 0.5s ease-in-out;
    opacity: 0; /* Початкова прозорість */
}

.tab-content-phone.active {
    opacity: 1; /* Прозорість для активного стану */
}

.no-scroll {
    overflow: hidden;
}

.arrow-container {
    position: relative;
    overflow: hidden; /* Hide overflow during transition */
    height: 2.76vw; /* Set a fixed height for the container */
}

.arrow-effect {
    left: 0;
    width: 0;
    height: 100%;
    transition: width 1s ease-in-out;
}

.arrow-effect .expand {
    width: 100%;
}

@media (max-width: 991px) and (min-width: 768px) {
    .arrow-container {
        position: relative;
        overflow: hidden; /* Hide overflow during transition */
        height: 4vw; /* Set a fixed height for the container */
    }

    .arrow-effect {
        left: 0;
        width: 0;
        height: 100%;
        transition: width 1s ease-in-out;
    }

    .arrow-effect .expand {
        width: 100%;
    }

    .dark-theme .card-shape-item-left-2, .dark-theme .card-shape-item-right-2, .dark-theme .card-shape-item-left-3, .dark-theme .card-shape-item-right-3 {
        background-color: transparent;
        box-shadow: 11px -11px 0 3px black;
    }

}

a[href^="tel"] {
    color: #199bbb;
}

.all-reviews .blackText {
    color: black;
}

.all-reviews {
    color: white;
}

.button-14.modal-open-btn.all-reviews.blackText {
    color: black;
}

.additional-phone-tab-1 {
    scroll-behavior: smooth; /* Ensure specific tabs also respect smooth scrolling */
    scroll-snap-type: x mandatory; /* Optional: snap tabs to the closest point */
    scroll-padding: 10px; /* Adds a smoother snap */
}

.abilities-name {
    text-align: center;
}