.bonusesDiv {
    border-radius: 20px;
    border: 1px solid #004766;
    align-items: center;
    text-align: center;
    height: 300px;
    background-color: #fff;
    position: relative; 
    z-index: 2; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    flex-direction: column;
   padding: 24px 5%;
   
    
}

.benefitTitle {
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 900;
    font-size: clamp(22px, 2vw, 28px)!important;
    color: #004766;

}

.benefitsButton {
    width: 100%;
    border-radius: 12px;
    padding-top: 20px;
    padding-bottom: 24px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #004766;
    font-size: 24px;
    font-family: "quicksand", sans-serif;
    font-weight: 700;
    color: #fff;
    margin-top: 24px;
	border: 1px solid #004766!important;

}

.benefitsButton:hover {
    background-color: #fff;
    color:#004766;
}

.benefitsButton:focus {
	background-color: #fff;
	color:#004766;
}

.terms {
    margin-top: 24px;
    font-family: "quicksand", sans-serif;
    color:#004766;
}

@media (max-width: 576px) { /* Adjust breakpoint as needed */
    .col-xs-11 {
        flex: 0 0 90%;
        max-width: 90%;
    }
}


.combinedDiv {
    position: relative;
    width: 33.3%;
}

@media (min-width: 1200px) and (max-width: 1919px) {
    .benefitsButton {
        font-size: clamp(18px, 1.5vw, 24px);
    }
	.benefitTitle {
		font-size: clamp(24px, 1.5vw, 28px)!important;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
    .benefitsButton {
        font-size: clamp(18px, 2.5vw, 24px);
    }
	
}

@media (min-width: 992px) and (max-width: 1200px) {
    .bonusContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .combinedDiv {
        flex: 1 0 48%; /* Adjust the percentage as needed */
        margin: 1%; /* Adjust margin as needed */
    }

    /* Target the third .combinedDiv and adjust its flex properties */
    .bonusContainer .combinedDiv:nth-child(3) {
        flex: 0 0 60%!important; /* Takes 100% of the width */
    }
	.benefitsButton {
		font-size: 20px!important;
	}
}

/* ipads  */
@media (min-width: 768px) and (max-width: 992px) {
    
    .combinedDiv {
        width: 100%;
    }
    .bonusContainer {
        justify-content: center!important;
        flex-direction: column!important;
        align-items: center;
    }
    
}

/* phones  */
@media (min-width: 576px) and (max-width: 768px) {
    .combinedDiv {
        width: 100%;
    }
    .benefitsButton {
        padding: 16px 12px;
        margin-top: 12px;
    }
    .terms {
        margin-bottom: 0;
    }
    .bonusContainer {
        flex-direction: column!important;
    }
}

/* really small phones  */
@media (max-width: 576px) {
    .combinedDiv {
        width: 100%;
    }
    .benefitsButton {
        padding: 16px 12px;
        margin-top: 12px;
    }
    .terms {
        margin-bottom: 0;
    }
    .bonusContainer {
        flex-direction: column!important;
    }
}

.bonusContainer {
    gap: 20px;
    position: relative; 
    flex-direction: row;
}

.coverMe {
    position: relative; /* Added */
    z-index: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    overflow: hidden;
   
}

/* Styling for the coverMeCharacters class */
.coverMeCharacters {
    
    /* position: relative; */
	/* top: 0; Center vertically */
    vertical-align: middle;



}


@keyframes jumpIn {
    0%, 10% {
        transform: matrix(1.1, 0, 0, .9, 0, 243); /* Adjusted the translation value */
        
    }
    35% {
        transform: matrix(.9, 0, 0, 1.05, 0, 105); /* Adjusted the translation value */
        
    }
    55% {
        transform: matrix(1.05, 0, 0, .95, 0, 115); /* Adjusted the translation value */
    }
    75%, 100% {
        transform: translateY(110px); /* Adjusted the translation value */
    }
}

@keyframes jumpInMobile {
    0%, 10% {
        transform: matrix(1.05, 0, 0, .95, 0, 250); /* Adjust these values as needed */
    }
    35% {
        transform: matrix(.95, 0, 0, 1.05, 0, 120); /* Adjust these values as needed */
    }
    55% {
        transform: matrix(1.05, 0, 0, .95, 0, 130); /* Adjust these values as needed */
    }
    75%, 100% {
        transform: translateY(120px); /* Adjust these values as needed */
    }
}

/* Applying animation to coverMeCharacters when conditions are met */
@media (min-width: 576px) {
    .coverMeCharacters {
        
        transform-origin: bottom; /* Set the origin of transformation to bottom */
        animation-name: jumpIn; /* Apply the jumpIn animation */
        animation-duration: 1.6s; /* Set the duration of the animation to 1.6 seconds */
        animation-timing-function: cubic-bezier(.3, .8, .4, 1); /* Define the timing function */
        animation-iteration-count: 1; /* The animation will run once */
        animation-delay: 0s; /* No delay before the animation starts */
        animation-fill-mode: forwards;
    }
    #coverMeCharactersDog {
        animation-delay: 0s; /* No delay for the first element */
    }
    
    #coverMeCharactersWoman {
        animation-delay: 0.5s; /* 0.5s delay for the second element */
    }
    
    #coverMeCharactersMan {
        animation-delay: 1s; /* 1s delay for the third element */
    }
}

/* Handling cases where reduced motion is preferred */
@media (prefers-reduced-motion: no-preference) {
    .coverMeCharacters {
        /* You can adjust the styling for users who prefer reduced motion */
        /* For example, you might want to display the element without animation */
        
    }
}

/* Handling styling for viewports with a minimum width of 576px */
@media (min-width: 576px) {
    .coverMeCharacters {
/*         width: 125px; */
			width: 225px;
        height: auto;
    }
}


@media (max-width: 576px) {
    .coverMeCharacters {
        width: 240px; /* Set width to 100px on screens 576px or less */
        /* Add any other styles you want to apply to coverMeCharacters on small screens */
    }

    .coverMeCharacters {
        
        transform-origin: bottom; /* Set the origin of transformation to bottom */
        animation-name: jumpInMobile; /* Apply the jumpIn animation */
        animation-duration: 1.6s; /* Set the duration of the animation to 1.6 seconds */
        animation-timing-function: cubic-bezier(.3, .8, .4, 1); /* Define the timing function */
        animation-iteration-count: 1; /* The animation will run once */
        animation-delay: 0s; /* No delay before the animation starts */
        animation-fill-mode: forwards;
    }
    #coverMeCharactersDog {
        animation-delay: 0s; /* No delay for the first element */
    }
    
    #coverMeCharactersWoman {
        animation-delay: 0.5s; /* 0.5s delay for the second element */
    }
    
    #coverMeCharactersMan {
        animation-delay: 1s; /* 1s delay for the third element */
    }

}


.hidden {
    opacity: 0;
    visibility: hidden;
	animation: none !important;
}