.box {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.separator {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border: 1px solid gold;
}

.bg-heading {
    background-color: #008dd2;
}

.bg-heading-2 {
    background-color: rgb(234, 8, 8);
}

#counter-section {
    background: linear-gradient(135deg, rgba(0, 141, 210, 0.8), rgba(234, 8, 8, 0.8)), url('./assets/images/shape-6.png');
    background-blend-mode: overlay;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);


}

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

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

.animate-spin-slow {
    animation: spin-slow 6s linear infinite;
}

#prev .separator,
#next .separator {
    width: 24px;
    /* Increase width */
    height: 24px;
    /* Increase height */
    border-width: 1px;
    /* Thicker border */
}

.clip-triangle {
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.card:hover {
    box-shadow: 0 4px 15px 2px rgba(253, 0, 0, 0.2);
}

.hard {
    box-shadow: rgba(227, 50, 50, 0.19) 0px 10px 20px, rgba(165, 92, 92, 0.23) 0px 6px 6px;
}

.soft {
    box-shadow: rgba(188, 188, 239, 0.323) 0px 7px 29px 0px;
}

.imgshadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

/* .fade-transition {
    transition: background-image 2s ease-in-out;
} */

.btn-hover-bg-transition {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    /* border: 2px solid #fff; Border for transparent buttons */
    color: #fff;
    /* Default text color */
    /* Transparent background by default */
    border-radius: 0.375rem;
    overflow: hidden;
    transition: color 0.15s cubic-bezier(.4, 0, .2, 1), border-color 0.6s ease;
}

/* Pseudo-element for background effect */
.btn-hover-bg-transition::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* Start off-screen */
    width: 100%;
    height: 100%;
    background-color: var(--bg-color, rgb(234, 8, 8));
    /* Dynamic background color */
    z-index: 0;
    transition: left 0.6s ease;
    /* Smooth sliding effect */
}

/* On hover, slide the black background in */
.btn-hover-bg-transition:hover::before {
    left: 0;
}

/* Ensure text is always above the background */
.btn-hover-bg-transition span {
    position: relative;
    z-index: 10;
}

/* --------------------------btn-red----------------- */
/* Custom Button with Transparent Background & White Border */
.btn-hover-red-transition {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.65rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    /* White border initially */

    /* White text */
    background-color: var(--bg-color, rgb(227, 30, 37));
    /* Initially transparent */
    border-radius: 0.375rem;
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.6s ease;
    /* Smooth transition */
}

/* Pseudo-element for smooth red background transition */
.btn-hover-red-transition::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* Start off-screen */
    width: 100%;
    height: 100%;
    background-color: rgb(1, 141, 209);
    /* Background turns red */
    z-index: 0;
    transition: left 0.6s ease;
    /* Smooth sliding effect */
}

/* On hover, slide in the red background & remove border */
.btn-hover-red-transition:hover {
    border-color: transparent;
    /* Border disappears */
}

.btn-hover-red-transition:hover::before {
    left: 0;
}

/* Ensure text is always above the background */
.btn-hover-red-transition span {
    position: relative;
    z-index: 10;
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .hide-1000-1200 {
        display: none;
    }

}

/* Floating Animation */
@keyframes move {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(30px);
    }
}

.move-anim {
    animation: move 5s linear infinite;
}

.location-bg {
    background-image: url('./assets/images/location-bg.jpg');
    background-size: cover;
    background-position: center;
}