:root {
    --primary-grident: linear-gradient(1.87deg, #87174F 1.57%, #AB2856 50%, #B73A4E 98.43%);
    --color-primary: #AB2856;
    --color-secondary: #767C8C;
    --color-danger: #DC2626;

}

@font-face {
    font-family: 'SF-pro';
    src: url('/assets/font-family/SF-Pro-Text-Light.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SF-pro';
    src: url('/assets/font-family/SF-Pro-Text-Regular.otf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SF-pro';
    src: url('/assets/font-family/SF-Pro-Text-Medium.otf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SF-pro';
    src: url('/assets/font-family/SF-Pro-Text-Semibold.otf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SF-pro';
    src: url('/assets/font-family/SF-Pro-Text-Bold.otf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


body {
    font-family: 'SF-pro', sans-serif;
    margin: 0px;
    padding: 0px;
    /* overflow-x: hidden; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {

    overflow-x: hidden;
}

* {
    letter-spacing: -0.04em;
}

.bg-gradient-custom {
    background: var(--primary-grident);
}

.badge-gradient {
    background: linear-gradient(91.75deg, #E82F32 34.9%, #C25173 72.44%, #FFB2A0 109.98%);
}

.text-gradient-custom {
    background: var(--primary-grident);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

button.bg-gradient-custom {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

button.bg-gradient-custom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0;
    transition: opacity 500ms ease;
    z-index: -1;
}

button.bg-gradient-custom:hover::before {
    opacity: 1;
}



.text_14 {
    font-size: clamp(11px, 2.2vw, 14px);
}

.text_16 {
    font-size: clamp(14px, 2.5vw, 16px);
}

.text_16_v2 {
    font-size: clamp(15px, 2vw, 16px);
}

.text_18 {
    font-size: clamp(16px, 2.7vw, 18px);
}

.text_18_v2 {
    font-size: clamp(17px, 2vw, 18px);
}

.badge_18 {
    font-size: clamp(10px, 2.7vw, 18px);
}

.text_20 {
    font-size: clamp(18px, 3vw, 20px);
}

.text_20-v2 {
    font-size: clamp(11px, 3vw, 20px);
}

.text_22 {
    font-size: clamp(15px, 3.2vw, 22px);
}

.text_22_v2 {
    font-size: clamp(16px, 3vw, 22px);
}

.text_24 {
    font-size: clamp(19px, 3.4vw, 24px);
}

.text_24_v2 {
    font-size: clamp(22px, 3vw, 24px);
}

.text_32 {
    font-size: clamp(16px, 3vw, 32px);
}

.text_40 {
    font-size: clamp(24px, 4vw, 40px);
}

.text_41 {
    font-size: clamp(18px, 4.3vw, 41px);
}

.text_51 {
    font-size: clamp(30px, 4.5vw, 51px);
}


.text_57 {
    font-size: clamp(30px, 5vw, 57px);
}

.text_64 {
    font-size: clamp(30px, 5vw, 64px);
}

.text_65 {
    font-size: clamp(30px, 5vw, 65px);
}

.text_74 {
    font-size: clamp(30px, 5vw, 74px);
}

/* navbar  */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

.overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

.hamburger span {
    transition: all 0.3s ease-in-out;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.animation-rotate {

    animation: spin 50s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* chose-card  */
.chose-card {
    background: #EBEDF0;
    max-width: 360px;
    box-shadow: 0px 4.11px 28.9px 0px #00000014;

}



.chose-card:hover {
    background: linear-gradient(126.21deg, rgba(234, 75, 157, 0) 63.21%, #EA4B9D 112.87%);

}

/* slider  */
.slider-card {
    background-image: url('/assets/images/slider-card-img.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.slick-slide {
    padding: 0 10px;
}

.slick-list {
    margin: 0 -10px;
}

.slick-dots {
    bottom: -45px !important;
    /* Adjust spacing */
    text-align: center !important;
}

.slick-dots li button:before {
    font-size: 12px !important;
    color: #EBEDF0 !important;
    opacity: 1 !important;
}



.slick-dots li {
    margin: 0px !important;
}

.slick-dots li.slick-active {
    margin: 0px !important;
}

.slick-dots li.slick-active button:before {
    font-size: 16px !important;
    color: #000 !important;
}


/* faq  */
.faq-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-content.open {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

/* tilt  */
.tilt-card {

    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
    will-change: transform;


}

.vission-btn svg path {
    fill: black !important;
}

.vission-btn:hover svg path {
    fill: white !important;
}

/* contact us  */
.dropdown {
    max-height: 200px;
    overflow-y: auto;
}

.dropdown::-webkit-scrollbar {
    width: 6px;
}

.dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* card animation   */


@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.animated-border {
    position: relative;
    z-index: 0;
}

.animated-border-color-v1::after,
.animated-border-color-v1::before {
    background-image: conic-gradient(from var(--angle), transparent 70%, #0099FF, #A033FF);
}

.animated-border-color-v2::after,
.animated-border-color-v2::before {
    background-image: conic-gradient(from var(--angle), transparent 70%, #009EFF, #00F38D);
}

.animated-border-color-v3::after,
.animated-border-color-v3::before {
    background-image: conic-gradient(from var(--angle), transparent 70%, #FF543E, #FFDD55);
}

.animated-border::after,
.animated-border::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 1rem;
    animation: spin 5s linear infinite;
}

.animated-border::before {
    filter: blur(1.5rem);
    opacity: 0.5;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}


#rotatingBox {
    animation: imagesbox 25s linear infinite;
}
.unrotate-img {
    animation: boximages 25s linear infinite;
}

@keyframes imagesbox {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}
@keyframes boximages {
    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}


@media (min-width: 1362px) {
    .chose-card {
        max-width: 400px;
    }
}

@media (max-width: 769px) {
    .bg-cover {
        background-size: 350% !important;
    }
}

@media (max-width: 639px) {
    .chose-card.active-card .bg-img {
        display: block !important;
    }
}