:root {
  --bs-font-sans-serif: 'Nunito Sans', sans-serif;
}

body{
    background-color: #ffffff;
}

.small {
    font-size: 0.9rem !important;
}
.card-hover:hover {
    cursor: pointer !important;
    background-color: #eaebff !important; /* light blue or any color you prefer */
    transition: background-color 0.3s ease !important;
    transform: scale(1.08); /* Optional: Slightly enlarge the card on hover */
}

.card-hover.active-hover {
    background-color: #eaebff !important; /* light blue or any color you prefer */
    transition: background-color 0.3s ease !important;
    transform: scale(1.08); /* Optional: Slightly enlarge the card on hover */
}

.navbar {
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.is-sticky {
    top: 15px;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* optional subtle shadow */
}

.landing-green-bg{
    background-color: #47d90c !important;
    color: white !important;
    transition: background-color 0.3s ease;
    border: 1px solid #47d90c !important;
}

.btn.landing-green-bg:hover {
    background-color: #3ebf0a !important; /* Slightly darker green */
    border: 1px solid #3ebf0a !important;
}

.landing-green-outline{
    background-color: #ffffff;
    border: 1px solid #47d90c !important;
    color: #47d90c;
    transition: background-color 0.3s ease;
}

.btn.landing-green-outline:hover {
    color: white !important;
    background-color: #3ebf0a; /* Slightly darker green */
    border: 1px solid #3ebf0a !important;
}

.rounded-sharp-top{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

.letter-spacing-wide {
    letter-spacing: 1px;
}


.cube-image-wrapper {
    position: relative;
    display: inline-block;
    background: #ffffff;
    border-radius: 50px;
    padding: 20px;
    overflow: visible; /* Important to allow floating out */
    box-shadow: 
    rgba(0, 0, 0, 0.10) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.08) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.06) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.04) 0px 2px 1px,
    rgba(0, 0, 0, 0.05) 0px 4px 2px,
    rgba(0, 0, 0, 0.05) 0px 8px 4px,
    rgba(0, 0, 0, 0.05) 0px 16px 8px,
    rgba(0, 0, 0, 0.05) 0px 32px 16px;

}

.cube-image-wrapper img {
    position: relative;
    z-index: 1;
    border-radius: 24px;
}

/* Cube corner cut effect (optional) */
/* .cube-image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: #bdbdf3;
    border-bottom-left-radius: 60px;
    transform: translate(30%, -30%) rotate(45deg);
    z-index: 0;
} */

/* The image floats to the top-left */
.cube-image-floating {
    position: absolute;
    scale: 1.1; /* Optional: Slightly enlarge the image */;
    z-index: 1;
}

.top-30{
    top: -30px;
}

.left-40{
    left: -40px;
}

.right-40{
    right: -40px;
}

@media (max-width: 768px) {

    .cube-image-floating {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        scale: 1 !important; /* Reset scale for smaller screens */
        transform: none !important;
    }
    .cube-image-wrapper {
        padding: 5px; /* Adjust padding for smaller screens */
        box-shadow: none; /* Remove shadow for smaller screens */
    }

    .top-30 {
        top: 0 !important; /* Reset top position for smaller screens */
    }
    .left-40 {
        left: 0 !important; /* Reset left position for smaller screens */
    }
    .right-40 {
        right: 0 !important; /* Reset right position for smaller screens */
    }
}


.mw-300px{
    max-width: 300px;
}
.mw-250px{
    max-width: 250px;
}


.checkmark-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  background: linear-gradient(to bottom, #4cd964, #34c759);
  border-radius: 50%;
  box-shadow: 
    inset 0 5px 10px rgba(255,255,255,0.5),
    inset 0 -5px 10px rgba(0,0,0,0.2),
    0 8px 15px rgba(0,0,0,0.3);
  position: relative;
  transition: all 0.2s ease;
}

.checkmark-button:active {
  box-shadow: 
    inset 0 5px 10px rgba(0,0,0,0.3),
    inset 0 -2px 5px rgba(255,255,255,0.4),
    0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(2px);
}

.checkmark-button .bx {
  font-size: 25px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.fs-18px{
    font-size: 18px !important;
}

.hw-80px{
    height: 80px;
    width: 80px;
}

.mh-350px{
    max-height: 350px;
}
.mw-350px{
    max-width: 350px;
}

.mh-200px{
    max-height: 200px;
}

.w-500px{
    width: 500px;
}

/* style="background-color: #EAEBFF;" */
.light-violet-bg {
    background-color: #EAEBFF !important;
}

.primary-bg {
    background-color: #696cff !important;
}

.fw-900{
    font-weight: 900 !important;
}

.fw-500{
    font-family: var(--bs-font-sans-serif);
    font-weight: 700 !important;
    /* font-style: italic; */
}

.cube-image-container {
    position: relative;
    display: inline-block;
    /* overflow: hidden; This clips dots from overflowing outside */
}

.light-gray-bg{
    background-color: #F5F5F9 !important;
}

/* .dots-pattern {
    position: absolute;
    top: -65px;    75px up from top
    left: -75px;   75px from left
    width: 150px; Adjust size as needed
    height: 150px;
    background: url('/assets/img/landing/dots-pattern.png') no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
} */

.dots-pattern {
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('/assets/img/landing/dots-pattern.png') no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.dots-top-right {
    top: -65px;
    right: -75px;
}

.dots-bottom-left {
    bottom: -65px;
    left: -75px;
}

.top-left{
    top: -65px;
    left: -75px;
}



/* Ensure page content overlays it */
/* body > *:not(.dots-pattern) {
    position: relative;
    z-index: 1;
} */

/* Mobile adjustment */
@media (max-width: 768px) {
    .top-left {
        top: -90px;
        left: -100px;
    }
}

.rounded-5 {
    border-radius: 0.8rem !important;
}

.gray-bg{
    background-color: #F5F5F9 !important;
}