.innerWrap{
    background-color: #FFFFFF;
/*    background-color: rgba(211, 227, 253, 0.5);*/
}
.cpr-section{
    display: flex!important;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 2em;
}
.cpr-section.centered {
    justify-content: center;
}

.cpr-courses-inner{
	text-align: center;
    width: 100%;
    margin: 0 8rem;
    font-family: Poppins, Arial, sans-serif;
    font-size: 20px;
    line-height: 2;
    color: #333;
}



/*.top-gradient-background {
    background: linear-gradient(to bottom, #fefeff, #e2f1ff);
}*/

/* Overall container with a gradient background */
.gradient-background {
background: linear-gradient(to top, #e0f0ff, #ecf4ff 40%, #f4faff 60%, #ffffff);
    width: 100%;
    box-sizing: border-box;
/*    padding: 20px 0;*/
}


.video-background-container {
    position: relative; /* Ensure the container is positioned */
	background-color: #e6f7ff;
    padding: 75px 0 175px 0; /* Top and bottom padding */
    margin: 50px auto 100px auto; 
    text-align: center; /* Center content horizontally */
    overflow: visible; /* Hide overflow to avoid the pseudo-element affecting layout */
	border: 0px solid red;
/*	border-radius: 25px;
/*    background-image: url('/public/images/blueBG.jpg');
    background-size: cover; /* Scale the image to cover the entire container */
/*    background-position: center; /* Center the background image */
/*    background-repeat: no-repeat; /* Prevent image repetition */
}

/*.video-background-container::before {
    content: ''; /* Required to make the pseudo-element appear */
/*    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/public/images/quoteBannerBG5.png');
    background-size: cover; /* Cover the entire pseudo-element with the background image */
/*    background-position: center; /* Center the background image */
/*    transform: scaleX(-1) scaleY(-1); /* Flip the background image horizontally and vertically */
/*    opacity: 0.5;
/*    z-index: -1; /* Ensure the pseudo-element is behind other content */
/*    pointer-events: none; /* Prevent the pseudo-element from blocking interaction with children */
/*	border-radius: 25px;
}
*/

.video-container {
    display: inline-block; /* Container wraps tightly around content */
/*    background-color: transparent; /* Transparent background */
	border-radius: 10px;
    padding: 0;
	margin: auto;
/*	margin-bottom: 25px; */
    position: relative;
/*    overflow: hidden; /* Hide overflow */
/*    text-align: center; /* Center the content horizontally */
/*    max-width: 640px; /* Set a max width for the video container */
/*    width: 50%; /* Ensure the container scales with the video */
    height: auto; /* Auto height based on video’s natural height */
    min-height: auto; /* Set this to the new taller height you prefer */
}

.review-slider-container {
    position: absolute; /* Position the testimonials relative to the video background */
    bottom: -175px; /* Move it up to partially overlap the slider container */
    left: 50%;
    transform: translateX(-50%); /* Center the slider horizontally */
    width: 100%; /* Full width for the testimonial slider */
    z-index: 1; /* Ensure it appears above the video background */
	border: 0px solid blue;
}

video {
    width: 100%; /* Let the video fill the container’s width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Block element to avoid inline space issues */
    margin: 0 auto; /* Center the video */
    max-width: 100%; /* Ensure the video doesn't exceed the container width */
    max-height: auto; /* Set to the preferred taller height */
    object-fit: contain; /* Maintain aspect ratio without cropping */
}


video {
    width: 100%; /* Ensure video scales to container width */
    height: 100%; /* Ensure video scales to container height */
    display: block; /* Make sure the video is treated as a block element */
    margin: 0 auto; /* Center the video */
    object-fit: contain; /* Contain the video within the container */
    max-width: 100%; /* Ensure the video doesn’t exceed the container width */
    max-height: 100%; /* Ensure the video doesn’t exceed the container height */
}

video {
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Natural height of the video */
    max-width: 100%; /* Ensure it doesn't exceed the parent container width */
    max-height: 100%; /* Ensure it doesn't exceed the parent container height */
    display: block; /* Make sure the video is treated as a block element */
    margin: 0 auto; /* Center the video */
    object-fit: cover; /* Cover the container without stretching */
}


.quote-container {
    text-align: center;
    align-content: center;
    margin-top: 20px;
	border: 1px solid red;
}


/**
*********************************
********   STEPS ****************
*********************************
 */

.steps-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 64px; /* Gap between the columns */
    max-width: 1200px; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container */
    width: 85%;
    overflow: visible;
}

.left-block, .right-block {
    width: calc(50% - 36px); /* 50% width minus half of the gap */
/*    border-radius: 15px;
/*    padding: 20px; */
	height: 100%;
	margin: 0 auto;
    margin-bottom: 120px;
	padding: 0;
/*    box-sizing: border-box; 
/*    background-color: #ffffff; /* Example background color */
}

.step {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: space-evenly; /* Spread items evenly, including space above and below */
    align-items: flex-start; /* Align child items to the left */
    text-align: left; /* Align text inside child elements to the left */
    
    opacity: 0; /* Optional for animation (if needed) */
    
    padding: 0px; /* Add padding for better spacing within the step */
    overflow: visible; /* Ensure content isn't cropped */
    
    transition: all 0.3s ease; /* Smooth transition effect */
    position: relative; /* Allows z-index control if needed */
    z-index: 1; /* Ensure it stays above other content (if applicable) */

    box-sizing: border-box; /* Ensure padding is included in size */
}

div.step{
    min-width: 200px; /* Ensure a minimum width */
    height: auto; /* Fixed height for consistency */
}

.step-img {
    display: block;
/*    margin: 0 auto; /* Centers the image and adds a margin below it */
    width: 80px; /* Adjust the size of the image */
    height: auto; /* Maintain the aspect ratio */
/*	filter: saturate(100%);
/*	opacity: 0.75;
/*	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3); */
}

.step-image {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column; /* Ensure the image fills the container */
    justify-content: center; /* Center the image vertically */
    align-items: center; /* Center the image horizontally */
}

.step h3 {
    font-family: 'Figtree', Arial, sans-serif;
    font-size: 24px; /* Increase font size for headings */
    font-weight: 500;
/*    margin: 0;
/*    margin: 15px 0;*/
/*    letter-spacing: 1.25px; */
}

.step p {
	padding: 16px 0 58px 0;
    font-size: 16px; /* Adjust font size */
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 400;
    color: #000; /* Darker text color */
    line-height: 1.75; /* Better readability with spacing between lines */
}

.step-image .image-block {
    width: 100%;
    height: 350px; /* Increase height for larger images */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px; /* Match the border radius of the blocks */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.take-course-pill-button {
    font-family: Poppins, Arial, sans-serif!important;
    font-size: 18px!important;
    border-radius: 25px!important; /* Rounder corners for pill shape */
    border: none!important;
    cursor: pointer!important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15)!important; /* Slightly smaller shadow */
    background-color: #FFB300!important; /* Inactive Amber color */
    color: #333!important; /* Darker text color for contrast */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease!important;
    padding: 10px 30px!important; /* Smaller padding for a compact look */
    font-weight: 400!important;
    text-decoration: none!important;
    position: relative!important;
    z-index: 3!important;
    width: auto!important; /* Prevents the button from expanding to 100% */
}

.take-course-pill-button:hover {
    background-color: #FFA000!important; /* Darker on hover */
    color: white!important; /* Change text color to white */
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25)!important; /* Increased shadow for depth */
}

.button-container button.take-course-pill-button{
    padding: 5px 15px!important;
    line-height: 24px!important;
    font-size: 16px!important;

}




/**
***************************************
************ REVIEW *******************
***************************************
 */
/* CORP REVIEW BANNER */
.fade-container {
    display: flex;
    align-items: center; /* vertically aligns the content in the center */
/*    background: linear-gradient(135deg, #6EC2FF 0%, #DAB7FF 50%, #E682FF 100%); */
/*    background-image: url('/public/images/quoteBannerBG5.png'); */
    background-size: cover;
    overflow: hidden;
    position: relative;
    min-height: 250px;
	width: 75%;
	margin: auto;
/*    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3); */
    justify-content: center;
    /*  margin-bottom: 20px;*/
}

/*
.fade-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: rgba(0, 0, 0, 0.25);
}
*/

/* Add this CSS block to apply transitions for the fade effect */
/*  .fade-container {
    opacity: 1;
   /* transition: opacity 1.5s ease-in-out; */
/*  }*/


.review-item {
    position: absolute;
/*    top: 0;
    left: 0; */
    opacity: 0;
    pointer-events: none; /* This will ensure that an invisible review doesn't capture any clicks */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
/*    min-height: 450px; */
    width: 100%;
	margin: auto;
}


.quote-left {
	font-family: 'Poppins', Arial, sans-serif; 	
	font-size: 200px; 
	font-style: italic; 
	color: #7cacf8; 
	align-content: center; 
	text-align: center;
	font-weight: 600;
    position: absolute;
    top: -85px;
	margin-left: -60px;
/*    left: 50%;
    transform: translateX(-50%); */
	z-index: -1;
	opacity: 5;
	
	
/*	border: 0px solid red;
    font-size: 600%;
    text-align: left;
    display: block;
    padding: 0 0 ;
    margin: -50px 0 -120px -25px;
    opacity: .3;*/
}

/* LOGO REVIEW BANNER IMAGE */
.review-bg {
/*    filter: blur(4px); */
	padding-left: 25px;
    position: absolute;
    right: 0;
    top: 0;
    width: 150px; /* Set the desired width */
    height: 150px; /* Set the desired height */
    object-fit: contain; /* Ensures the image covers the entire container without distortion */
/*    object-position: center; /* Centers the image within the container */
/*    clip-path: circle(250px at right 0%); /* Maintains your circle clip-path */
/*    clip-path: ellipse(250px 325px at right 50%); /* Creates a semi-circle */
	overflow: visible;
    border: 1px solid red;
}

/* REVIEW TEXT */
.review-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
	padding: 0 150px 0 0px;
    font-family: Poppins, Arial, sans-serif;
    font-weight: 400;
    font-style: none;
    font-size: 20px;
/*    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75), /* Larger, darker shadow */
/*                 0px 0px 2px rgba(255, 255, 255, 0); /* Soft glow */
    line-height: 1.75;
    text-decoration: none;
    color: #666;
/*    color: #3D52A0;*/
    position: relative;
    border: 1px solid blue;
    z-index: 2; /* If other content overlaps, adjust as necessary */
}


.review::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    z-index: -1;  /* Place it behind the content */
    /*  filter: blur(3px);*/
    /*background-color: rgba(52, 152, 219, 0.5); */ /* Adjust the background color and opacity as needed */
}

.review-navigation {
    background: transparent;
    position: relative;
    text-align: center;
    margin-top: 0px; /* Adjust this value to position the buttons correctly */
    padding: 20px 0; /* Padding to give some space above and below the elements */
    display: flex;
    align-items: center;
    justify-content: center; /* This will horizontally center items, if you also want that */
}

.review-arrow {
    background-color: transparent;
    border: none;
    width: 30px;  /* Set this to the width of your biggest icon */
    height: 30px;  /* Set this to the height of your biggest icon */
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-size: contain;  /* Ensure the icon fits within the button */
    background-repeat: no-repeat;  /* Ensure the icon doesn't repeat */
    background-position: center;  /* Center the icon in the button */
}

/*
#prev-review {
    background-image: url('/public/images/back-icon.png');
}

#next-review {
    background-image: url('/public/images/next-icon.png');
}
*/

#prev-review, #next-review {
    background: none;
    border: none; /* Remove button border if needed */
    cursor: pointer; /* Add a pointer cursor for better UX */
}

#prev-review i, #next-review i {
    color: #97a5b0; /* Set the desired color */
    font-size: 28px; /* Adjust the font size as needed */
    opacity: 0.5;
    transition: opacity 0.2s;
}

#prev-review i:hover, #next-review i:hover {
    opacity: 1;
}

.review-arrow:hover {
    /*    background-color: rgba(0, 0, 0, 0.1); /* Light gray background on hover */
}

.review-arrow:focus {
    outline: none;
}

/* Dots Container */
.review-dots {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px; /* Margin around the dots container for better spacing */
    padding-top: 0px;
}

/* Inactive Dots */
.review-dot {
    display: inline-block;
    width: 8px;    /* Slightly smaller than before */
    height: 8px;   /* Slightly smaller than before */
    background-color: #96b9d7; /* for inactive dots */
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s, width 0.3s;
}

/* Active Dot */
.review-dot.active-dot {
    width: 20px;   /* Width of the horizontal bar */
    height: 8px;   /* Height remains same */
    background-color: #4971aa; /* Blue color for active dot, change to desired blue if needed */
    border-radius: 4px; /* Slightly rounded edges for the bar */
}



.star {
    width: 15px;
    height: 15px;
    /*  filter: saturate(125%); */
}

.star-shadow {
    /*  font-size: 18px;  /* Change this to scale the star */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

/*
.review-columns-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 100px;

}

.review-column1 {
    flex: 1;
}

.review-column2 {
    flex: 3; /* Adjust this value as needed */
/*	justify-content: flex-end; /* Aligns items to the right */
/*    align-items: center;
 }


.review-column2 i {
	display: inline-block;
    text-align: right;
    align-items: center;
}
*/

.fade-out {
    opacity: 0;
}
.fade-in {
    opacity: 1;
}

/**
*********************************
*********** GRID ****************
*********************************
*/

.container2 {
    font-size: 28px;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px; /* space between the columns */
    margin-bottom: 25px;
}

.wrapper .column{
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.item {
    padding: 15px 50px 20px 50px;
    /**margin: 10px 25px 35px 25px; **/
    border-radius: 5px;
    border: 0px solid rgba(113, 160, 212, 0.75); /* Specify border color with opacity */
    position: relative;
    cursor:pointer;
    background-color:white;
    opacity: 0; /* Set initial opacity to 0 */
    transform: translateY(50px); /* Set initial translation to move it down */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Add transitions for opacity and transform */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.item .section1-text-wrapper.expanded{
    max-height: 500px; /* Adjust this value based on maximum content height */
}

.item.fade-in {
    opacity: 1; /* Set opacity to 1 to fade in */
    transform: translateY(0); /* Set translation to 0 to move it up */
}


.item:hover {
    /*  padding-bottom: 30px; /* New bottom padding size on hover */
    /*  background-color:white;*/
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);

}

/* CHEVRON DOWN */
.item:not(:has(.expanded))::after {
    /*    content: "Read more...";*/
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Required for some FontAwesome icons */
    color: rgb(55, 115, 181, 0.5);
    font-size: 18px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    /*    background-image: linear-gradient(to bottom, white 50%, #fafafa 50%);*/
    padding: 5px 10px;
    border-radius: 5px;
    border: 0px solid #71a0d4;
    white-space: nowrap;
    transition: opacity 0.2s; /* Add a transition for smooth effect */
    opacity: 1; /* Initially set the opacity to 1 */
}

.item:hover::after {
    color: rgba(55, 115, 181, 1);  /* Set the color to full opacity on hover */
    transition-delay: 0.2s;
}

.item:not(:hover)::after {
    transition-delay: 0.2s;
}

.item i {
    font-size: 2em;
    color: #4bb3fd;
}

.icon-title {
    display: flex;
    align-items: center;
    margin-bottom: 0px; /* Adjust this to reduce space */
}

.icon-title i {
    margin-top: 10px; /* Lower the icon by 10 pixels */
    opacity: 1;
}


.section1-text-wrapper {
    max-height: 120px; /* Adjust this value to show only the first 2-3 rows */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; /* Increased transition duration and changed timing function */
    /*  transition: max-height 0.5s ease-out; /* Updated timing function */
    position: relative;
    text-indent:85px;
    margin-top: -10px; /* Add this line to reduce the top margin */
}

.section1-text-wrapper.cprfade::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Adjust as needed */
    background: linear-gradient(transparent, rgba(255, 255, 255, .9)); /* Adjust the opacity value as needed */
}



.section1 {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #4bb3fd;
    margin: 0 auto;
    margin-top:0px;
}

.section1-text {
    font-family: Poppins, Arial, sans-serif;
    margin-top:-50px;
    font-weight: 400;
    font-size: 18px;
    /*    line-height: 1.25;*/
    color: #5f6368;
    color: #666;
    /*  text-indent: 15px; /* Adjust the padding value according to your needs */
}



.section2 {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    color: #005bb1;
}

.section2-text {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #5f6368;
    padding: 0 0px 0px;
    margin: 0 15px 15px;
    border:0px solid red;
}


/*********************************
*********************************
*********** CTA *****************
*********************************
**/
.cta-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end; /* Align items to the end */
/*    width: 80%;
	max-height: 800px;
*/
    background-size: contain;
    overflow: hidden;
    position: relative;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.095);
    border-radius: 15px; 
/*    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);*/
}

.cta-background{
    flex-grow: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('/public/images/nurse-laptop.webp');
    height: 100%;
    border-radius: 15px;
}
.container-cta{
    min-width: 600px;
}
.content-cta {
/*    height: 100%;
    width: 700px; */
    margin: auto;
    padding: 25px 50px;
/*    box-sizing: border-box;*/
    position: relative;
    background-color: white;
	min-width: 50%;
    border-radius: 15px;
	border: 0px solid red; 
}


/* Common Height variable(?) */
:root {
    --cta-height: auto;
}

/* BG IMAGE FOR CTA BANNER */
.background-image {
    flex: 0 0 auto;
    height: 550px;
    width: 350px;
    background: url('/public/images/laptop-tea.jpg') -175px 0px no-repeat;
    /*  transform: scaleX(-1); *//*flip horizontally*/
    background-size: cover;
    border-radius: 0px 10px 10px 0px;
    position: relative;  /* Added to contain the pseudo-element inside */
}

/*
.background-image::before {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    border: 2px solid #277abc;
    border-radius: inherit;  /* To keep the same border-radius as the parent */
/*}*/

.background-image-right {
    flex: 0 0 auto;
    height: var(--cta-height);
    width: 450px;
    background: #f1f9ff;
    padding: 25px 25px;
    /*  background-size: cover;*/
    border-radius: 10px 0px 0px 10px;
    position: relative; /* Added to position the pseudo-element relative to this container */
    align-items: center; /* Center vertically */
}

.background-image-right::before {
    content: "";
    position: absolute;
    top: 50%; /* Positioning at the vertical center */
    left: 0;
    width: 1px;
    height: 75%; /* You can adjust this to your preferred height */
    background-color: #ccc;
    opacity: .3;
    transform: translateY(-50%); /* This will center the border vertically */
}


.cta-text {
    font-family: Poppins, Arial, sans-serif;
    font-weight: 600;
    font-size: 32px;
    text-align: center;
    color: #062e6f;
    padding: 0;
    margin: 0;
}

.input-container {
    display: flex;
    flex-wrap: nowrap; /* This allows items to wrap to the next line */
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin:10px 0 15px 0;
	border: 1px solid red;	
}

/* General styles for all input fields */
.input-container input {
    padding: 5px 10px;
    border: 1px solid #ccc;
/*    border-radius: 5px; */
    margin-right: 5px;
    font-size: 18px;
}

/* Styles for first and last name inputs */
.input-container input[name="name_f"],
.input-container input[name="name_l"] {
    flex: 1;
    max-width: calc(50% - 5px); /* Deducting half of the total margins to ensure they fit side by side */
}

/* Style specifically for the last name input */
.input-container input[name="name_l"] {
    margin-right: 0;
}

/* Style specifically for the email input */
.input-container input[name="email"] {
    width: 100%;
    margin-right: 0; /* Ensure no right margin is added */
    margin-top: 10px;
}


.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align buttons to the left */
    margin-top: 0px;
	
}

.or-divider {
    display: flex;
    align-items: center;
    margin: 5px 0 0px 0;
}

.or-divider div {
    background-color: #666;
    height: 1px;
    flex-grow: 1;
/*    margin-bottom: 2px;*/
    margin: 5px 0 10px 0;
}

.or-divider span {
    margin: 5px 10px; /* Add margin before and after the 'OR' text */
    color: rgba(0, 0, 0, 0.50);
    font-family: Poppins, arial, sans-serif;
    padding: 15px 0 10px 0;
}



.container-cta .signup-btn,  .container-signup .signup-btn, .container-dialog .signup-btn{
    display: block;
    font-family: 'Poppins', Arial, sans-serif; /* Enclose font names with spaces in quotes */
    font-size: 18px;
    padding: 8px 6px; /* Slight increase in padding for better visual appeal */
    width: 100%;
    /*  margin: 15px auto;*/
    background-color: #32cd32;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none; /* Consider using focus styles for better accessibility */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Add transform transition */
    text-align: center; /* Ensure the text is centered */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}
.container-cta .signup-btn:disabled,  .container-signup .signup-btn:disabled, .container-dialog .signup-btn:disabled{
    background-color: #32cd32!important;
    color: white!important;
    cursor: not-allowed!important;
    pointer-events: all!important;
}

.container-cta .signup-btn:hover, .container-cta .signup-btn:focus,
.container-signup .signup-btn:hover, .container-signup .signup-btn:focus,
.container-dialog .signup-btn:hover, .container-dialog .signup-btn:focus
{
    background-color: #4CAF50;
    text-decoration: none!important;
    /*  transform: translateY(-2px); /* Slight move up for a hover effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Increase shadow on hover */
}

.container-cta .signup-btn:active, .container-signup .signup-btn:active, .container-dialog .signup-btn:active{
    transform: translateY(0); /* Button returns to its position on active state */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Return shadow to its original state */
}
.container-cta .signup-btn.MuiButton-outlinedSuccess:hover,  .container-signup .signup-btn.MuiButton-outlinedSuccess:hover, .container-dialog .signup-btn.MuiButton-outlinedSuccess:hover{
    border: 1px solid #2e7d32;
}
.container-cta .signup-btn.MuiButton-outlinedSuccess, .container-signup .signup-btn.MuiButton-outlinedSuccess,  .container-dialog .signup-btn.MuiButton-outlinedSuccess{
    background-color: white;
    border: 1px solid #4CAF50;
    color: #4CAF50;
}

/* Base styles for the guest button */
.container-cta .guest-btn, .container-signup .guest-btn {
    display: block;
    font-family: 'Poppins', Arial, sans-serif; /* Enclose font names with spaces in quotes */
    font-size: 18px;
    padding: 8px 6px; /* Slight increase in padding for better visual appeal */
    width: 100%;
    /*  margin: 15px auto;*/
    color: white;
    border-radius: 5px;
    cursor: pointer;
    outline: none; /* Consider using focus styles for better accessibility */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Add transform transition */
    text-align: center; /* Ensure the text is centered */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */

    background-color: #007BFF; /* A common shade of blue */
    border-color: #007BFF; /* A darker shade of blue for the border */
}
.container-cta .guest-btn.disabled, .container-signup .guest-btn.disabled{
    background-color: #007BFF  !important;
    border-color: #0056b3 !important;
    color: white !important;
    cursor: not-allowed!important;
    pointer-events: all!important;
}

/* Hover and focus styles for the guest button */
.container-cta .guest-btn:hover, .container-cta .guest-btn:focus
.container-signup .guest-btn:hover, .container-signup .guest-btn:focus
{
    background-color: #0056b3; 
}

/* Active state for the guest button */
.container-cta .guest-btn:active, .container-signup .guest-btn:active {
    background-color: #007BFF; /* Even darker shade for active state */
}

.container-cta .login-btn,
.container-login .login-btn,
.container-signup .login-btn,
.MuiDialog-container .login-btn {
    display: block;
    font-family: 'Poppins', Arial, sans-serif; /* Enclose font names with spaces in quotes */
    font-size: 18px;
    width: 100%;
    /*  margin: 15px auto;*/
    color: white;
    border-radius: 5px;
    cursor: pointer;
    outline: none; /* Consider using focus styles for better accessibility */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Add transform transition */
    text-align: center; /* Ensure the text is centered */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */

    padding: 8px 6px;
    background-color: #007BFF; /* A common shade of blue */
    border-color: #0056b3; /* A darker shade of blue for the border */
}
.container-cta .login-btn.disabled,
.container-login .login-btn.disabled,
.container-signup .login-btn.disabled,
.MuiDialog-container .login-btn.disabled


{
    background-color: #007BFF!important; /* A common shade of blue */
    border-color: #0056b3!important; /* A darker shade of blue for the border */
    color: white!important;
    cursor: not-allowed!important;
    pointer-events: all!important;
}

/* Hover and focus styles for the guest button */
.container-cta .login-btn:hover, .container-cta .login-btn:focus,
.container-login .login-btn:hover, .container-login .login-btn:focus,
.container-signup .login-btn:hover, .container-signup .login-btn:focus,
.MuiDialog-container .login-btn:hover, .MuiDialog-container .login-btn:focus
{
    background-color: #0056b3; /* Darken the blue a bit on hover */
}

/* Active state for the guest button */
.container-cta .login-btn:active,.container-login .login-btn:active,  .container-signup .login-btn:active, .MuiDialog-container .login-btn:active {
    background-color: #0056b3; /* Even darker shade for active state */
}

/*button tool tip */
.container-cta button[data-tip]:hover::before,
.container-signup button[data-tip]:hover::before
{
    content: attr(data-tip);
    position: absolute;
    top: -20px; /* position above the button */
    left: 50%;
    transform: translateX(-50%); /* center the tooltip */
    background-color: #fff;
    border: 1px solid #4971aa;
    color: #4971aa;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none; /* ensure tooltip doesn't interfere with button's hover state */
    z-index: 10;
}

.container-cta button[data-tip],
.container-signup button[data-tip]
{
    position: relative; /* to position the tooltip correctly */
}


.account-benefits-text {
    color: rgba(0, 0, 0, 0.75);
    font-family: Poppins, Arial, sans-serif;
    font-size: 12px;
    margin-top: 10px; /* Added space after the buttons */
}

.checkbox-item {
    display: flex;
    align-items: center;
    /*    margin: 5px 0;*/
}
.checkbox-item label {
    cursor: pointer;
    font-size: 18px;
    color: #333
}

.checkbox-item span{
    font-family: 'Poppins', sans-serif!important;
    font-weight: 500!important;
    font-size: 18px!important;
}
.checkbox-item:hover input[type="checkbox"] + .label,
.checkbox-item:hover .label:hover {
    /*    background-color: #007bff; /* Change the background color of the checkbox and label on hover */
    color: #666; /* Change the text color of the checkbox and label on hover */
    transition: background-color 0.2s, color 0.3s; /* Smooth transition effect */
}

.checkbox-item .badge {
    background-color: #ff5733;
    color: white;
    font-weight: normal;
    padding: 8px 12px;
    margin-left: 5px;
    border: none;
    font-size: 14px;
    border-radius: 2px;
    border-top-left-radius: 5%; /* rounded corner on the left top */
    border-bottom-left-radius: 5%; /* rounded corner on the left bottom */
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Create the left arrow shape */
.checkbox-item .badge::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 6px solid #ff5733;
    z-index: -1; /* Put the arrow below the badge to avoid overlapping shadows */
}

/* Show the badge when the label is hovered on */
.checkbox-item:hover .badge {
    opacity: 0;
}
.signup-page-flex-container {
    display: flex;
    width: 100%;
    border: 0px solid green;
}

.loginBtn {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    width: 13em;  /*- apply for fixed size */
    margin: 0.2em;
    /*margin-top: 10px;*/
    padding: 0;
    /*padding: 0 15px 0 46px; */
    border: none;
    text-align: center;
    line-height: 40px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #FFF;
}

.loginBtn:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 100%;
}

.loginBtn:focus {
    outline: none;
}

.loginBtn:active {
    box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}


/* Facebook */
.loginBtn--facebook {
    background-color: #4C69BA;
    margin-right: 10px;
    /*  background-image: linear-gradient(#4C69BA, #3B55A0); */
    /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
    text-shadow: 0 -1px 0 #354C8C;
}

.loginBtn--facebook:before {
    border-right: #364e92 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 5px 9px no-repeat;
}

.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
    background-color: #5B7BD5;
    /*  background-image: linear-gradient(#5B7BD5, #4864B1); */
}


/* Google */
.loginBtn--google {
    /*font-family: "Roboto", Roboto, arial, sans-serif;*/
    background: #DD4B39;
    /* margin-right: 10px;*/
}

.loginBtn--google:before {
    border-right: #BB3F30 1px solid;
    background: url('/public/images/google-logo.png') 3px 6px no-repeat;
    /*background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 3px 6px no-repeat;*/
}

.loginBtn--google:hover,
.loginBtn--google:focus {
    background: #ff4c43;
}

h3.signup-header{
    font-family: 'Poppins', Arial, sans-serif; font-size: 26px; font-weight:800;
}
.or-divider {
    display: flex;
    align-items: center;
    margin: 8px auto;
}

.or-divider div {
    background-color: #666;
    height: 1px;
    flex-grow: 1;
    margin-bottom: 4px;
}

.or-divider span {
    margin: 0 10px; /* Adjusted margin to match your desired style */
    color: #666;
    font-family: Figtree, Poppins, arial, sans-serif;
    font-size: 14px; /* Added font-size to match the original style */
	padding: 0;
}

.signup-thanks{
    font-family: Poppins, arial, sans-serif;
    font-size: 16px;
}

.container-cta .slick-slide{
    padding-left:0px!important;
    padding-right:0px!important;
}

.grecaptcha-badge {
    visibility: hidden !important;
}


.login-page-container{
    width: 100%;
    padding: 0px;
    margin: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    background-position: center top -25px;
    background-image: url('/public/images/laptop-on-fire-escape.jpg'); background-size: cover; background-repeat: no-repeat;
}


.feature-bar {
    font-family: Figtree, Poppins, Arial, sans-serif;
    font-weight: 500;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    background: rgba(229, 243, 255, 0.5); /* Semi-transparent blue tint */
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-radius: 15px;
    padding: 20px 25px;
    margin: -60px auto 0; /* Center horizontally */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.feature-item {
    flex: 1;
    max-width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 0 15px;
    border-right: 1px solid #666;
}

.feature-item:last-child {
    border-right: none; /* Remove border from the last item */
}

.feature-icon {
    width: 50px;
    height: auto;
    filter: invert(18%) sepia(87%) saturate(3500%) hue-rotate(190deg) brightness(85%) contrast(100%);
    margin-bottom: 10px;
}

.feature-item-text {
    color: #003992;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    font-weight: 500;
}

.item-text {
    font-family: Poppins, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
}

/* Glow effect for feature bar in dark mode */
#day-night-section.dark-mode .feature-bar {
    box-shadow: 0 6px 20px 10px rgba(255, 255, 255, 0.6); /* Soft white glow */
}

#day-night-section.dark-mode .feature-item-text {
    color: #fff; /* Soft white glow */
}




/*
.vertical-button-container {
    position: fixed;
    bottom: calc(100vh/2);
    right: 0;
    height: 100px ;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center ;
    transform:rotate(-90deg);

}

.vertical-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 50px;
    z-index: 2;

}

.vertical-button:hover {
    background-color: #3e8e41;
} */
#report-problem {
    position: fixed;
    bottom: calc(100vh/2);
    right: -3px;
    background-color: #D1D9DF;
    color: #002C68;
    border: none;
    border-radius: 5px;
    padding: 10px;
    opacity: 0.5;
    transition: opacity 0.3s;
    transform: rotate(270deg);
    transform-origin: right bottom;
    z-index: 4;
    font-size: 14px;
}

#report-problem:hover {
    opacity: 1;
}
.blured{
    opacity: 0.5;
}

fieldset.highlighted {
	overflow: visible!important;
    position: relative; /* Ensure the fieldset is the reference point for the pseudo-element */
    padding: 0px; /* Optional: Adjust for inner padding */
}

fieldset.highlighted::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -10px;
    left: -10px; /* Move the effect to the left */
    right: -10px; /* Extend to the right to maintain width */
    bottom: -10px; /* Adjust the bottom to maintain height */
    border-radius: 10px;
/*    box-shadow: 0 4px 20px rgba(41, 126, 248, 0.1); /* Initial shadow */
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.25); /* Initial shadow */
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
/*    background-color: rgba(41, 126, 248, 0.1); /* Subtle background color change */
    border: 3px solid red;

}
fieldset.highlighted::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 290px;
    left: 570px;
    /* right: 0px; */
    /* bottom: 0px; */
    width: 75px;
    height: 80px;
    background: url(/public/images/red-arrow.png) no-repeat;
    background-size: 60px auto;
}
fieldset.highlighted.active::before {
    border-radius: 10px;
/*    box-shadow: 0 4px 20px rgba(41, 126, 248, 0.5); /* More pronounced shadow */
    background-color: rgba(41, 126, 248, 0.1); /* Subtle background color change */
}

fieldset.highlighted label,
fieldset.highlighted span,
fieldset.highlighted legend,
fieldset.highlighted .MuiTypography-root,
fieldset.highlighted .MuiTypography-body1,
fieldset.highlighted .MuiFormControlLabel-label {
    color: black !important; /* Ensure all targeted elements have white text */
}



img.mfp-img{
    background: white;
    margin: 40px auto 0!important;
}
.mfp-bg {
    background: rgba(113, 160, 212, 0.75);
    opacity: .8;
    backdrop-filter: blur(5px)!important;
}
.MuiModal-backdrop{
    background: rgba(113, 160, 212, 0.75)!important;
    opacity: .8!important;
    backdrop-filter: blur(5px)!important;
}

.dialog-title-link{
    text-decoration: underline;
}

/******* INDEX PAGE BENEFITS *************/
.benefit-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px; /* Adjust based on your design needs */
    margin: -25px auto 25px auto;
	padding-bottom: 0px;
}

.benefit-card {
	color: #062e6f;
    font-family: Poppins, Arial, sans-serif;
    position: relative; /* Make the card the positioning context for absolute children */
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures everything in the card is centered */
    width: 45%; /* For two columns, considering some gap */
    margin-right: 2.5%; /* Half of the remaining space to right margin */
    margin-left: 2.5%; /* Half of the remaining space to left margin */
    margin-bottom: 20px;
    background-color: transparent; /* Light background for the card */
/*    background-color: #f9f9f9; /* Light background for the card */
    border: 0px solid #ddd; /* Subtle border */
    padding: 50px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.0); /* Optional: adds depth */
    transition: box-shadow 0.3s, transform 0.3s; /* Smooth transition for hover effects */
    overflow: visible;
}

.benefit-card:hover {
	background-color: #F0F8FF;
    box-shadow: 0 4px 20px rgba(0,0,0,0.075); /* Adds depth on hover */
/*    transform: translateY(-5px); /* Slightly lifts the card on hover */
}

/*.benefit-card:hover h3 {
	color: #062e6f;
}
*/

.benefit-card:hover .benefit-icon {
    opacity: 0.2; /* Change opacity on hover */
}

.benefit-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    text-align: center; /* Centers all text within the content div */
    position: relative; /* Make sure text stays above the icon */
    z-index: 2; /* Ensure text is above the icon */
/*    padding-top: 50px; /* Add padding to create space for the icon */
}

.benefit-icon {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%) scale(2); /* Center the icon and scale it */
    font-size: 60px; /* Adjust size as needed */
    opacity: 0.1; /* Set opacity  */
    color: #7cacf8; /* Color of the icon */
    z-index: 1; /* Ensure icon is behind the text */
    pointer-events: none; /* Make sure the icon does not interfere with hover effects */
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */ /* Added line */
}

.benefit-content h3 {
    font-weight: 600;
    font-size: 26px; /* Slightly larger text */
    transition: all 0.3s ease;
}

.benefit-content p {
    font-size: 1.3em;
}

/* Hover effects for the entire card */
.benefit-card:hover .benefit-icon i {
/*    transform: translateX(-50%) scale(2.2); /* Scale the icon slightly when card is hovered */
}




/************ TESTIMONIALS SLIDER **********/

/* General styles for the slider container */
.testimonial-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Hide anything overflowing */
    position: relative;
    margin: 0 auto; /* Center the slider */
    max-width: 90%; /* Width of the carousel container including margins */
    padding-bottom: 20px;
    height: auto; /* Allow height to be determined by content */
    padding-left: 25px; /* Left margin/whitespace */
    padding-right: 25px; /* Right margin/whitespace */
	border: 0px solid red;
}

/* Styling individual testimonial cards */
.testimonial {
    font-family: Poppins, Arial, sans-serif;
    background: white;
    border-radius: 5px;
    padding: 75px 5px 25px 5px;
    position: relative;
    margin: 35px 15px 15px 15px; /* Space between cards */
    width: calc((100% / 3) - 20px); /* Ensure 3 cards fit perfectly */
    transition: all 0.3s ease;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    flex: 0 0 auto; /* Prevent the flex items from shrinking */
    box-sizing: border-box; /* Include padding and border in the width calculation */
	border: 0px solid red;
}

/* Center card styling */
.testimonial.slick-center {
/*    transform: scale(1.05); /* Slightly enlarge center card */
    z-index: 2; /* Ensure it's above other cards */
}

/* Avatar styling */
.testimonial img:not(.company-logo) {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #7091e6;
    position: absolute;
    top: -30px;
    left: calc(50% - 30px); /* Center the avatar */
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 10;
}

/* Additional styling for the author name, location, and quote */
.author-name {
    text-align: center;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-top: -35px;
}

.location {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 0px;
    font-style: italic;
}
.position {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 0px;
    font-style: italic;
}

.quote {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 50px;
    margin-right: 50px;
}

.quote:before, .quote:after {
    content: '"';
    font-size: 75px;
    font-style: italic;
    color: #7091e6;
    position: absolute;
}

.quote:before {
    top: 60px;
    left: 15px;
}

.quote:after {
    bottom: -25px;
    right: 40px;
}

.rating{
    margin-top: 1em;
    text-align: center;
}

.slide-left {
    animation: slideLeft 1s forwards; /* Animation for sliding in from left */
}

.slide-up {
    animation: slideUp 1s forwards; /* Animation for sliding up */
}

.slide-right {
    animation: slideRight 1s forwards; /* Animation for sliding in from right */
}

@keyframes slideLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(25%); opacity: 0; } /* Start 20px below the baseline */
    to { transform: translateY(0); opacity: 1; } /* End at the baseline */
}

@keyframes slideRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* Resetting animations specifically for slide-up with different keyframes */
.slide-up {
    animation: slideUp 1s forwards;
}
.sliding-words-container {
    text-align: center;
    font-weight: 600;
    color: #333;
    font-size: 22px;
    font-family: Poppins, Arial, sans-serif;
    margin: 25px auto 25px auto;
    white-space: nowrap; /* Prevents wrapping */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden; /* Prevents overflow within the container */
    letter-spacing: 1.5px; /* Adjust letter-spacing as needed */
}

.v-slider-frame {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    height: 25px;
    transition: width 0.5s ease; /* Smooth transition */
}

.v-slides {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Ensures items are in a column */
    height: 25px;
    /* Resetting animations specifically for slide-up with different keyframes */
    }

    .v-slide {
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
        color: #7091e6;
        white-space: nowrap;
        display: flex;
        align-items: center;
        height: 26px;
        text-transform: uppercase; /* Makes text all caps */
    }

.grid-wrapper {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 75%; /* Stretch from margin to margin */
    background: #e9f5ff;
    /* background: linear-gradient(-25deg, rgba(23, 89, 164, 1), rgba(56, 156, 214, 1)); /* Gradient background */
    padding: 25px 100px; /* Padding at the top and bottom */
    /* box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3); */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    /*        padding: 35px;*/
    width: 90%;
    margin: auto;
}

/* Grid Items */
.grid-item {
    position: relative; /* Ensure children with absolute positioning are relative to this element */
    height: 250px; /* Set a fixed height */
    border-radius: 8px;
    overflow: hidden; /* Hide overflow */
    text-align: center;
    padding: 20px 25px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); /* Adjust the box shadow as needed */
}

/* Active tab indicator */
.grid-item.active {
    cursor: default;
    /* box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); */ /* Add box-shadow */
    /* border: 2px solid blue; /* or any other style you prefer */
}

/* Add this rule to make the background image full color */
/*    .grid-item.active .bg-image {
/*        filter: none;
/*    }

    /* Background Image */
.bg-image {
    pointer-events: none;
    position: absolute;
    border-radius: 8px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(0px);
    /*        filter: grayscale(100%) blur(2px);*/
    transition: filter 0.3s ease, background-color 0.3s ease;
}

/*image in normal state*/
.bg-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* Adjust the opacity as needed */
}

/* Content */
.content {
    position: relative;
    z-index: 1;
    color: #fff;
    /* Add text outline */
    font-family: Poppins, arial, sans-serif;
    padding: 50px 25px; /* Add some padding */
    /* border-radius: 5px; /* Rounded corners */
    /* Flexbox for centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* Take up full height of parent */
    transition: transform 0.3s ease; /* Add transition for smooth movement */
}

/* Normal text state */
.content h3,
.content p {
    transition: opacity 0.1s ease; /* Quick fade effect */
}

/* Specific style for h3 inside .content */
.content h3 {
    cursor: default;
    font-size: 36px; /* or any other size you prefer */
    font-weight: 700;
    margin: 0; /* Remove default margin */
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 1); /* Strong text shadow */
    color: white; /* Change the text color to white for better contrast, adjust as needed */
    /* text-shadow: 0px 2px 5px rgba(0, 0, 0, 1); /* Add text shadow */
}

/* Specific style for p inside .content */
.content p {
    font-size: 18px; /* or any other size you prefer */
    margin: 0; /* Remove default margin */
}


/* Hover Effect */


/*  on hover */
/*.grid-item:hover {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3); /* Add box-shadow here */
/* transform: scale(1.05); */
/* z-index: 2; */
/*text-decoration: none; /* Remove underline on hover */
/* } */

/* Remove Scale text on hover */
/*.grid-item:hover .content h3,
.grid-item:hover .content p,
.grid-item:hover .content > h3,
.grid-item:hover .content > p {
    cursor: default; */
/* color: #f1f9ff; */
/* transform: scale(1.25); /* Adjust the scaling factor as needed */
/* transition: transform 0.3s ease, text-shadow 0.3s ease; */
/* }*/

/* Add box shadow on hover */
/*.grid-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); /* Adjust the box shadow as needed */
    /*		transform: translateY(-2px); /* Slightly move the item up for better effect */

.grid-item:hover .content h3 {
    display: none !important; /* Completely hide */
/*    color: red; */
}

.grid-item:hover .content {
    transform: none; /* Remove any transform effects */
}

.grid-item:hover .button-container .info-container {
    opacity: 1; /* Make buttons visible */
}

.bg-image:hover::before {
    background-color: rgba(0, 0, 0, 0); /* Set background-color to fully transparent on hover */
}
/*    .grid-item:hover .bg-image {
        filter: grayscale(50%);
        filter: blur(0px);
    }
*/
.grid-item.active .button-container button {
    opacity: 1; /* Make visible */
    pointer-events: auto; /* Make it clickable */
}

/* Black & White filter for active tab */
/*    .grid-item.bw-filter .bg-image {
        /* filter: grayscale(100%); */
/*        filter: rgba(46,127,233, 0.5);
    }
*/

/* Info Container */
.info-container {
    opacity: 0; /* Initially hidden */
    display: flex; /* Keep as flex */
    flex-direction: column; /* Stack content vertically */
    justify-content: start; /* Center content vertically */
    position: absolute; /* Absolute positioning */
    top: 0; /* Position from the top */
    left: 0; /* Position from the left */
    height: 100%; /* Cover full height of the grid item */
    width: 100%; /* Cover full width of the grid item */
/*    padding: 25px 25px 0 25px; /* Add padding inside */
    transition: opacity 0.3s ease; /* Quick fade effect */
    background-color: rgba(255, 255, 255, 1); /* White with X% opacity */
    border-radius: 5px; /* Rounded corners */
    font-family: Poppins, sans-serif; /* Arial font */
    font-weight: normal; /* Font weight */
    font-size: 16px !important; /* Font size */
    line-height: 1.75; /* Line height */
    color: #333; /* Text color */
    text-shadow: none !important; /* Remove text shadow */
}

.info-container h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-shadow: none !important;
}

.info-container p {
    text-shadow: none !important;
    line-height: 1.5;
    margin-bottom: 5px;
    padding: 0px 10px 5px 10px; /* Add padding inside */
}

.spaced-line {
    display: flex;
    align-items: center;
/*    line-height: 1.5; /* Specific line height for these items */
/*    margin-top: 10px; /* Space between lines */
    padding: 0px 10px; /* Add padding inside */
}

.info-container img.checkmark-icon {
    color: #333;
    width: 16px;
    height: auto;
    vertical-align: middle; /* Aligns the icon with the text */
    margin-right: 5px; /* Adds a little space between the icon and the text */
    /*		margin-left: 5px; /* Adds a little indent */
}

/* Button Container */
.button-container {
    opacity: 1; /* Initially hidden/visible */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
/*    height: 100%;
/*    position: relative;
    /*        top: 25px;*/
/*    bottom: -95px;
    left: 0;*/
    transition: opacity 0.1s ease; /* Quick fade effect */
    transform: none;
}

/* General Button Styles */
.button-container button {
    padding: 5px 15px;
    font-family: Poppins, arial, sans-serif;
    font-size: 16px;
    /*		font-weight: 500;
            letter-spacing: 1.2px; */
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Learn More... Button */
.learn-more-button {
    background-color: #7cacf8;
    color: white;
}

/* Take Course Button */
.take-course-button {
    background-color: #32CD32;
    color: white;
}

/* Hover Effects */
.button-container button:hover {
    background-color: #d3e3fd;
    color: #4971aa;
    box-shadow: inset 0 0 0 1px #4971aa, 0 4px 20px rgba(0, 0, 0, 0.25);
}

.button-container .take-course-button:hover {
    background-color: #228B22;
    box-shadow: inset 0 0 0 1px #32CD32, 0 4px 20px rgba(0, 0, 0, 0.25);
    color: white;
}

.quote-text {
    font-size: 20px;
    font-family: 'Poppins', Arial, sans-serif;
    color: #333;
    font-weight: 500;
    position: relative;
    display: inline-block;
    /*    margin: 0;*/
}

.quote-mark {
    font-size: 50px;
    font-style: italic;
    color: lightblue;
    font-weight: 800;
}

p {
    margin: 0;
    padding: 0;
}

.MuiTooltip-tooltip{
    background-color: #7091e6!important;
    opacity: 0.9!important;
}
.MuiTooltip-arrow{
    color: #7091e6!important;
}

.testimonial-slider  .slick-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.sales-checklist {
    list-style-type: none;
    border: 0px solid red;
    padding-left: 0;
    max-width: 600px; /* Limiting the width for better readability */
    margin: 0 -20px;
    letter-spacing: .75px;
    /*	margin-top: -5px;*/
}

.sales-checklist li {
    font-family: Poppins, arial, sans-serif;
    font-size: 16px; /* Increased font size for better readability */
    font-weight: 500;
    line-height: 1.25;
    /*	opacity: .8;*/
    padding: 10px;
    position: relative;
    padding-left: 40px; /* Increased padding-left to give more space between the icon and text */
    transition: background-color opacity 0.2s; /* For a hover effect */
    white-space: nowrap; /* Prevents the line from breaking */
}

.sales-checklist li:hover {
    /*	opacity: 1;*/
    background-color: #fff; /* Light grey background on hover */
    border-radius: 5px;
}

/* Style for single icons */
.sales-checklist li i.fa:not(.star-icon) {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Vertically center the icon */
    width: 20px;
    text-align: center;
    padding-left: 15px;
    color: #666;
    /*	text-shadow:  0 2px 3px rgba(0, 0, 0, 0.5);*/
}

/* Style for star icons, inline positioning */
.sales-checklist li i.star-icon {
    position: static;
    transform: none;
    width: auto;
    padding-left: 0;
}

/* REVIEW */
.review-div {
    position: relative;
    text-align: left;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    font-family: Roboto, sans-serif;
    font-weight: normal;
    border: solid;
    box-shadow: 0 2px 15px rgba(163, 216, 248, 0.6);
    background-color: white;
    border-color: blue;
    border-width: 0px;
    border-radius: 5px;
    padding: 25px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%),  url('/public/images/quote_orange.gif');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: right;
    /*  transform: scaleX(-1); /* Flip the background image horizontally */
}

/*   SIGNUP FORM CUSTOM CHECKEBOXES */
/* Centering Button Wrapper */
.button-wrapper {
    grid-column: span 2; /* Make button span across both columns */
    width: 100%;
    display: flex; /* Use flexbox to center the button */
    justify-content: center; /* Center the button horizontally */
    padding-top: 10px; /* Optional: add space above the button */
    padding-bottom: 0px;
}

/* Google Button Styles */
.google-btn {
    margin: 0;
    font-family: Figtree, Poppins, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center; /* Centers both icon and text */
    width: 100%;
    padding: 12px 16px;
    background-color: transparent;
    border: 1px solid #c4c3c9;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 400;
    color: #565760;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    position: relative; /* Allows us to control the positioning of elements */
}

.google-btn:hover {
    background-color: #e4f1ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.google-btn img {
    width: 20px;
    margin-right: 10px;
}

.google-btn span {
    text-align: center; /* Center the text */
    margin-right: 10px; /* Space out text from icon slightly */
}

.google-btn::after {
    content: ""; /* Empty content to balance space */
    width: 18px; /* Set to the same width as the icon */
    height: 18px;
    display: inline-block;
}


/* Container Layout */
.container {
    background-color: #fafafa;
    width: max-content; /* Make the container as wide as its content */
    min-width: 50%;
    margin-left: 0;
    justify-content: center;
    padding: 2em 50px 0;
}

.checkboxes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 24px;
    justify-items: center;
}


.custom-checkbox,
.custom-checkbox-tile,
.custom-checkbox-input {
    margin: 0;
    padding: 0;
}

.custom-checkbox {
    display: flex; /* Removed duplicate `inline-flex` as `flex` achieves the same */
    align-items: center;
    cursor: pointer;
}

.custom-checkbox-input {
    display: none; /* Hides the checkbox visually */
    position: absolute; /* Removes it from layout flow */
    left: -9999px; /* Moves it far off-screen */}

/* Checkbox Tile Container */
.custom-checkbox-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width : 296px; /* Use a single width definition */
    /*  height: 70px; /* Fixed height for the tiles */
    padding: 16px 24px;
    border: 2px solid #b5bfd9;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transition: border 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.custom-checkbox-tile:before {
    content: "";
    position: absolute;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b5bfd9;
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
}

.custom-checkbox-input:checked + .custom-checkbox-tile  {
    border-color: #2260ff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    background-color: #e4f1ff;

}
.inactive-tile .custom-checkbox-tile  {
    border-color: #2260ff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    background-color: #e4f1ff;
}

.custom-checkbox-input:checked + .custom-checkbox-tile:before {
    transform: scale(1);
    opacity: 1;
    background-color: #2260ff;
    border-color: #2260ff;
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon,
.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-label {
    color: #2260ff;
}

/* Animated Check Mark */
.custom-checkbox-tile::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 10px; /* Adjust to be where your checkbox circle is */
    width: 0; /* Initial width and height set to 0 */
    height: 0;
    border: solid #fff; /* White check mark */
    border-width: 0 4px 4px 0;
    border-radius: 3px;
    transform: rotate(45deg);
    opacity: 0;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* Show Check Mark When Checked */
.custom-checkbox-input:checked + .custom-checkbox-tile::after {
    width: 10px; /* Width of the check mark */
    height: 20px; /* Height of the check mark */
    opacity: 1;
}

/* Icon Styles */
.custom-checkbox-icon {
    width: 30px; /* Icon size */
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto 5px auto; /* Space between icon and text */
    transition: background-image 0.3s ease-in-out;
}

/* Define icon styles for each checkbox */
.custom-checkbox-icon.acpr {
    background-image: url('/public/images/icon-old-man.png');
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon.acpr {
    background-image: url('/public/images/icon-old-man-blue.png');
}

.custom-checkbox-icon.cpr {
    background-image: url('/public/images/icon-family.png');
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon.cpr {
    background-image: url('/public/images/icon-family-blue.png');
}

.custom-checkbox-icon.bcls {
    background-image: url('/public/images/icon-hand-heart.png');
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon.bcls {
    background-image: url('/public/images/icon-hand-heart-blue.png');
}

.custom-checkbox-icon.bfa {
    background-image: url('/public/images/icon-wound.png');
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon.bfa {
    background-image: url('/public/images/icon-wound-blue.png');
}

.custom-checkbox-icon.bbp {
    background-image: url('/public/images/icon-lab.png');
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon.bbp {
    background-image: url('/public/images/icon-lab-blue.png');
}

.custom-checkbox-icon.hcp {
    background-image: url('/public/images/icon-doctor1.png');
}

.custom-checkbox-input:checked + .custom-checkbox-tile .custom-checkbox-icon.hcp {
    background-image: url('/public/images/icon-doctor1-blue.png');
}

/* Label Styles */
.custom-checkbox-label {
    font-family: Figtree, Poppins, Arial;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    text-align: center;
}

/* Custom Hover and Focus Effects */
.custom-checkbox:hover .custom-checkbox-tile {
    border-color: #2260ff;
    box-shadow: 0 3px 12px rgba(34, 96, 255, 0.3);
    background-color: #e4f1ff;
}

.custom-checkbox:hover .custom-checkbox-tile:before {
    transform: scale(1.3);
    opacity: 1;
}

/* Inactive tile effect */
.inactive-tile {
    background-color: #e4f1ff;
    position: relative;
    opacity: 0.4; /* Reduce opacity to indicate inactivity */
    pointer-events: none; /* Prevent interaction */
}

/* Optional white overlay for better visibility */
.inactive-tile::after {
    content: 'INCLUDED'; /* Display the text */
/*	background-Color: transparent; */
    position: absolute;
    top: 3px;
    left: 35px;
    color: #ff0000;
	font-family: Rock Salt, Figtree, sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    pointer-events: none; /* Ensure the overlay does not block interactions */
    z-index: 1; /* Ensure it appears above the ::after element */
}

.inactive-tile::before {
    border-color: #2260ff;
    box-shadow: 0 3px 12px rgba(34, 96, 255, 0.3);
    background-color: #e4f1ff;
	z-index: 2;
}

.tooltip-class {
    font-family: 'Rock Salt', sans-serif !important;
    font-size: 16px; /* Or adjust as needed */
    color: #FFF; /* Light text */
    background-color: #333; /* Dark background */
    padding: 8px 12px;
}


.subscribed-tile {
    background-color: #e4f1ff;
    position: relative;
    opacity: 0.4; /* Reduce opacity to indicate inactivity */
    pointer-events: none; /* Prevent interaction */
}

/* Optional white overlay for better visibility */
.subscribed-tile::after {
    content: 'SUBSCRIBED'; /* Display the text */
    position: absolute;
    top: 3px;
    left: 35px;
    color: #48c738;
    font-size: 16px;
    font-weight: 600;
    font-family: Rock Salt, Figtree, sans-serif;
    pointer-events: none; /* Ensure the overlay does not block interactions */
}

.content-cta .subscribed-tile::after, .content-cta .inactive-tile::before{
    font-size: 16px;
}

.content-cta .custom-checkbox-label{
    font-size: 16px;
}

.content-cta .form-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.content-cta  .cta-text{
    width: 100%;
}
.content-cta  .cta-text .headline{
     text-align: center;
 }
.content-cta .products-select{
    padding-right: 1em;
    border-right: 1px solid #f3f3f3 ;
}


.content-cta .column-form .button-wrapper{
    padding-top: 0px;
}

.content-cta .column-form{
    flex-grow: 1;
    padding-left: 1em;
}

.signup-btn {
    background-color: #ff9900 !important; /* Nice orange color */
    border-radius: 50px; /* Pill shape */
    color: #ffffff !important; /* White text for contrast */
    border: none; /* Remove border */
    padding: 10px 20px; /* Adjust padding */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Pointer cursor for interactivity */
}

.signup-btn:disabled,
.signup-btn.Mui-disabled {
    background-color: #e0e0e0 !important; /* Light gray for disabled state */
    color: #9e9e9e !important; /* Gray text */
    cursor: not-allowed; /* Show not-allowed cursor */
}

/* Container Styling */
.bento-grid-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 6 equal columns */
    grid-template-rows: repeat(3, 1fr); /* 3 equal rows */
    gap: 50px; /* Space between items */
    max-width: 85%; /* Limit width to 85% */
    margin: 0 auto; /* Center container */
    grid-auto-rows: minmax(100px, auto); /* Ensures rows have a minimum height but grow as needed */
}

/* General Item Styling */
.bento-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-position: center;
    font-family: Poppins, arial, sans-serif;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 250px;
    overflow: visible !important;
}

/* Hover Effect */
.bento-item:hover {
    /*    background: rgba(0, 0, 0, 0.8); /* Darker background on hover */
    /*    transform: translateY(-5px); /* Slight lift on hover */
    /*    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
}

.bento-item:hover .overlay-content {
    height: 100%; /* Expand height to show full content */
}


/* Show Description and Buttons on Hover */
.bento-item:hover .overlay-content p,
.bento-item:hover .overlay-content .button-container {
    opacity: 1; /* Show text and buttons */
    transform: translateY(0); /* Slide into position */
}

/* Individual Background Colors */
/*.item1 { background: #8e44ad; } /* Purple */
/*.item2 { background: #e67e22; } /* Orange */
/*.item3 { background: #2ecc71; } /* Green */
/*.item4 { background: #e74c3c; } /* Red */
/*.item6 { background: #f1c40f; } /* Yellow */
/*.item7 { background: #3498db; } /* Light Blue */

/*.item6 { grid-area: 2 / 3 / 3 / 6; } /* first-aid Top-right box (1st row, spans 1 column) */
/*.item7 { grid-area: 1 / 1 / 2 / 5; } /* a/p cpr teacher Top row, spanning 4 columns on the left */
/*.item3 { grid-area: 2 / 1 / 4 / 3; } /* hco doctors Left side, spans 2 rows vertically */
/*.item4 { grid-area: 3 / 3 / 4 / 8; } /* comp bls group Bottom-right, spans 4 columns wide */
/*.item1 { grid-area: 1 / 5 / 2 / 8; } /* adult cpr Middle row, 2nd column */
/*.item2 { grid-area: 2 / 6 / 3 / 8; } /* bbp Middle row, spanning 2 columns */

.bento-item.item6 {
    grid-area: 2 / 3 / 3 / 6;
}

/* Moved from columns 1-3 to 4-6 */
.bento-item.item7 {
    grid-area: 1 / 4 / 2 / 8;
}

/* Moved from columns 1-5 to 4-8 */
.bento-item.item3 {
    grid-area: 2 / 6 / 4 / 8;
}

/* Moved from columns 1-3 to 6-8 */
.bento-item.item4 {
    grid-area: 3 / 1 / 4 / 6;
}

/* Moved from columns 3-8 to 1-6 */
.bento-item.item1 {
    grid-area: 1 / 1 / 2 / 4;
}

/* Moved from columns 5-8 to 1-4 */
.bento-item.item2 {
    grid-area: 2 / 1 / 3 / 3;
}

/* Moved from columns 6-8 to 1-3 */


/* Background images for each course */
.bento-item.item1 {
    background-image: url('/public/images/first-aid5.webp');
    background-size: cover;
    background-position: center;
}

.bento-item.item2 {
    background-image: url('/public/images/lab-tech6.jpg');
    background-size: cover;
    background-position: center;
}

.bento-item.item3 {
    background-image: url('/public/images/doctors.webp');
    background-size: cover;
    background-position: center;
}

.bento-item.item7 {
    background-image: url('/public/images/teacher4.webp');
    background-size: cover;
    background-position: center;
}

.bento-item.item6 {
    background-image: url('/public/images/trainer6.webp');
    background-size: cover;
    background-position: center;
}


.bento-item.item4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-item.item3 .button-container{
    width: 75%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.industry-collage {
    background: linear-gradient(45deg, #8cbcff, #ffa3df);
    display: flex;
    gap: 16px;
    width: 100%;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0;
    padding: 0 16px;
}


/* Responsive image sizes that fit within the collage */
.industry-image {
    flex: 1;
    height: 168px; /* Scale to container height */
    border-radius: 8px;
    background-size: cover;
    /*    background-position: center; */
    background-repeat: no-repeat;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    margin: 16px auto auto auto;
    background-size: cover;
    background-position: center; /* Moves down from the top by 48px */

}

.industry-image.image1 {
    background-image: url('/public/images/first-aid5-small.webp');
}

.industry-image.image2 {
    background-image: url('/public/images/lab-tech6-small.webp');
}

.industry-image.image3 {
    background-image: url('/public/images/doctors-small.webp');
}

.industry-image.image4 {
    background-image: url('/public/images/teacher2-small.webp');
}

.industry-image.image5 {
    background-image: url('/public/images/trainer6.webp');
}

.industry-image.image6 {
    background-image: url('/public/images/Lucia-small.webp');
}

.industry-image.image7 {
    background-image: url('/public/images/Mike.webp');
}



/* Badge custom styling */
.badge-custom {
    font-family: Figtree, Poppins, arial;
    position: absolute;
    top: -20px; /* Position the badge slightly lower */
    right: -15px; /* Position the badge slightly inwards */
    padding: 10px 15px; /* Add padding for a better look */
    font-size: 0.9rem; /* Adjust font size */
    font-weight: 500;
    border-radius: 10px; /* Make the badge pill-shaped */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 3;
}


/* Course Content Overlay */
.overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent blue tint */
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    color: #000;
    padding: 10px 15px;
    text-align: left;
    border-radius: 10px;
    transition: background 0.3s ease-in-out;
    /*    border: 1px solid rgba(255, 255, 255, 0.5); /* Light white border for subtle effect */
    z-index: 1; /* Ensure content appears above images */
    height: 50px; /* Height enough to show only the title */
    overflow: hidden; /* Hide extra content */
    transition: height 0.3s ease-in-out, background 0.3s ease-in-out;
}

.overlay-content h2 {
    text-align: center;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    justify-self: center;
}
.overlay-content .spaced-line{
    font-size: 14px;
}

.overlay-content p {
    margin: 0;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
}

.checkmark-icon {
    color: #333;
    width: 16px;
    height: auto;
    vertical-align: middle; /* Aligns the icon with the text */
    margin-right: 8px; /* Adds a little space between the icon and the text */
    margin-left: 16px; /* Adds a little indent */
}

.spaced-line {
    display: flex;
    align-items: center;
    line-height: 2; /* Specific line height for these items */
    margin-top: 0px; /* Space between lines */
}


.button-container {
    position: absolute; /* Absolute positioning within .overlay-content */
    bottom: 8px; /* Position 10px from the bottom */
    left: 16px; /* Optional: add some left padding */
    right: 16px; /* Optional: add some right padding */
    margin: 0 auto; /* Remove any container margin */
    padding: 8px 0; /* Minimal padding */
    width: 85%;
    height: auto;
    border: 0px solid red; /* For debugging */
    display: flex;
    justify-content: space-around; /* Align buttons evenly */
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1em;

}

.learn-more-button, .take-course-pill-button {
    flex: 1; /* Allow buttons to stretch equally */
    width: 100% !important; /* Override default width */
    min-width: 200px;
    text-align: center; /* Center text within buttons */
    border-radius: 25px;
    margin: 0!important;
}

.take-course-pill-button {
    font-family: Poppins, Arial, sans-serif;
    font-size: 18px;
    border-radius: 25px; /* Rounder corners for pill shape */
    border: none;
    cursor: pointer;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); /* Slightly smaller shadow */
    background-color: #FFB300; /* Inactive Amber color */
    color: #333; /* Darker text color for contrast */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    padding: 10px 30px; /* Smaller padding for a compact look */
    font-weight: 400;
    text-decoration: none;
    position: relative;
    z-index: 3;
    width: auto; /* Prevents the button from expanding to 100% */
}

.take-course-pill-button:hover {
    background-color: #FFA000; /* Darker on hover */
    color: white; /* Change text color to white */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25); /* Increased shadow for depth */
}

/* Additional Text and Button Visibility */
.overlay-content p,
.overlay-content .button-container {
    opacity: 0; /* Hide initially */
    transform: translateY(24px); /* Slide in from below */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

button.signup-btn.MuiButton-contained.MuiButton-containedSuccess {
    margin-top: 16px;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 18px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15) !important;
    background-color: #FFB300 !important;
    color: #000 !important;
    padding: 10px 24px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Hover state styling */
button.signup-btn.MuiButton-contained.MuiButton-containedSuccess:hover {
    background-color: #FFA500 !important;
    color: white !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.35) !important;
}


*/ CSS Enhancements for Smooth Fading */
.slick-slide {
    opacity: 0; /* Hide inactive slides */
    transition: opacity 0.5s ease-in-out;
}

.slick-active {
    opacity: 1; /* Show the active slide */
}



.courses-grid-container {
    width: 85vw;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* Ten equal-width columns */
    grid-template-rows: auto auto 2fr; /* New top row + two existing rows */
    gap: 16px; /* Space between grid items */
    margin: 32px auto; /* Center container with top margin */
}

.courses-item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 24px;
    font-weight: bold;
    border-radius: 10px;
    background-color: white;
    padding: 25px 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Standard shadow */
    z-index: 1;
}

/* Hover Effect for .courses-item */
.courses-item:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* Larger shadow on hover */
}

/* Specific styles for top-row boxes */
/* Flex column styling for top row boxes */
.top-row-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.top-row-box-new{
    grid-column: span 6;
    font-family: Poppins, Arial, sans-serif;
}


/* Center and stack content in each column */
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Heading styling */
.box-heading {
    font-family: Poppins, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #666	;
}

/* Value styling */
.box-value {
    font-family: Poppins, Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000;
}

.data-value {
    font-family: Figtree, Arial, sans-serif;
    font-size: 18px;
    color: #000;
}

.top-row-box-1 {
    grid-column: 1 / span 5; /* First half of top row */
}

.top-row-box-2 {
    grid-column: 6 / span 5; /* Second half of top row */
}


.courses-item.top-row-box.top-row-box-2 {
    width: 600px;
    height: 100px;
    display: flex;
    justify-content: center;  /* Center the container horizontally */
    align-items: center;  /* Center the container vertically */
    padding: 10px;
    position: relative;
    font-family: Poppins, Arial, sans-serif;
}

.centered-content {
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    align-items: center;  /* Center items horizontally */
    gap: 0px;  /* Optional: spacing between rows */
    text-align: center;
}

.box-heading,
.box-value,
.data-value,
.pass-pay {
    margin: 0;
}

.pass-pay {
    font-size: 16px;
    font-weight: 400;
    font-family: figtree, poppins, sans-serif;
}

.guarantee-note {
    font-family: Rock Salt, Poppins, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    transform: rotate(-6deg);
    color: red;
    /*    font-style: italic;*/
    position: absolute;
    top: -48px;  /* Adjust this to position as desired */
    left: -135px;  /* Adjust this to position as desired */
    text-align: center;

}

.coupon-reminder {
    font-family: Rock Salt, Poppins, sans-serif;
    font-size: 14px;
    font-weight: bold;
    transform: rotate(1deg);
    color: red;
    position: absolute;
    top: -30px;  /* Adjust this to position as desired */
    right: -173px;  /* Adjust this to position as desired */
    text-align: left;
}

.coupon-reminder img{
    position: absolute;
    transform: rotate(0deg);
    top: 63px;
    left: -131px;
    width: 256px;
    height: 6px;
    opacity: 6;
}



.crossout-image {
    opacity: 0.8;
    height: 20px;
    width: 96px;
    position: absolute;

    top: 7px;  /* Adjust to layer over the price */
    left: -2px;  /* Adjust to align with price */
    transform: rotate(0deg);
    z-index: 2;  /* Ensure it's above content but below the guarantee note */
}

.info-icon {
    cursor: pointer;
    margin-top: 5px;
}

.info-icon img {
    width: 20px;
    height: 20px;
}

/* Individual item positions */
.courses-item.item1 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}

.courses-item.item2 {
    grid-column: 4 / 7;
    grid-row: 2 / 3;
}

.courses-item.item3 {
    grid-column: 7 / 11;
    grid-row: 2 / 4;
}

.courses-item.item4 {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
}

.courses-item.item5 {
    grid-column: 5 / 7;
    grid-row: 3 / 4;
}

.courses-item.item6 {
    grid-column: 1 / 6;
    grid-row: 4 / 5;
    align-items: flex-start;
}

.courses-item.item7 {
    grid-column: 6 / 11;
    grid-row: 4 / 5;
    align-items: flex-start;
}

/* Arrow items on the left and right */
.itemArrowLeft {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: transparent;
    border: 0;
}

.itemArrowRight {
    grid-column: 10 / 11;
    grid-row: 1 / 3;
    background: transparent;
    border: 0;
}

/* Glance Card */
.glanceCard2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}




/* Satisfied clients section */
.satisfied-clients-container {
    display: flex;
    align-items: left;
    justify-content: flex-start;
}

.satisfied-clients {
    margin: 25px 0;
    display: flex;
    align-items: center;
    background: linear-gradient(-135deg, rgba(82, 169, 255, 0.5), rgba(112, 145, 230, 0.5), rgba(179, 134, 255, 0.8));
    border-radius: 50px;
    padding: 5px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.client-avatars {
    display: flex;
    align-items: center;
}

.client-avatars .avatar {
    border-radius: 50%;
    border: 3px solid white;
    width: 50px;
    height: 50px;
    margin-left: -20px;
}

.client-info {
    font-family: Figtree, Arial, sans-serif;
    color: #55254c;
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
}

.client-count {
    font-family: Figtree, Arial, sans-serif;
    color: white;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
}

.client-text {
    font-size: 16px;
    color: #333;
}

/* TITLE BOX */
.course-title-box {
    font-family: Oswald, Poppins, Arial;
    color: #000;
    font-weight: 400;
    font-size: 28px;
    position: absolute;
    max-width: 456px; /* Adjusted for 24px margin */
    min-width: 200px; /* Optional: Set a min-width to avoid too small of a box */
    background: rgba(229, 243, 255, 0.5); /* Semi-transparent blue tint */
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border-radius: 15px;
    padding: 20px 25px;
    top: 384px;
    right: 124px; /* Anchor to the right with a 24px offset */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
    z-index: 3;
}

.cert-click-arrow{
    position: absolute;
    font-family: Rock Salt, arial, sans-serif;
    font-size: 18px;
    transform: rotate(-2.5deg);
    color: red;
    top: -64px;
    left: -136px;
    line-height: 1.25
}

.XMuiGrid-root.MuiGrid-container {
    grid-template-rows: auto!important;             /* Rows adjust based on content */
    grid-template-columns: auto!important;             /* Rows adjust based on content */
    gap: 10px!important;                             /* Space between grid items */
}

.corporate-form-step-title {
    font-family: Figtree, arial, sans-serif!important;
    font-size: 18px!important;
    font-weight: 500!important;
}

.corporate-form-group-size {
    font-family: Figtree, arial, sans-serif!important;
    font-size: 18px!important;
    font-weight: 500!important;
}


.MuiSlider-markLabel{
    font-family: Figtree, arial, sans-serif!important;
    font-size: 18px!important;
    font-weight: 500!important;
}


/* Targeting the button within the fieldset */
fieldset.MuiFormControl-root.css-1z0g23d button.MuiButton-contained.MuiButton-containedSuccess {
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 18px !important;  /* Adjusted font size for consistency */
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15) !important;
    background-color: #FFB300 !important;
    color: #000 !important;
    padding: 10px 24px !important; /* Consistent padding */
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Hover effect */
fieldset.MuiFormControl-root.css-1z0g23d button.MuiButton-contained.MuiButton-containedSuccess:hover {
    background-color: #FFA500 !important;
    color: white !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.35) !important;
}

.MuiTypography-root p {
    font-family: Poppins, arial, sans-serif;
}

.corporate-signup-form{
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.qty-slider-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 300px;
}