.outer-container {
    position: relative !important; /* This makes the div a reference point for absolute positioning */
    /*background-color: #D9D9D980;*/ /* Light green */
    border: 6px solid #006688; /* Dashed border */
    padding-left: 8% !important;
    padding-right: 8% !important;
    padding-top: 1% !important;
    padding-bottom: 35% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    background: url('https://www.lahsa.org/service/get-image?id=3b76160f-353b-4884-8a62-4d15791fbde3.jpg') lightgray -1.6px 0px / 100.178% 101.429% no-repeat;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.inner-container {
    position: relative;
    background-color: #E3EFF4BF; /* Light yellow */
    padding: 10%; /* Space around the cards */
    padding-bottom: 42%;
    border: 6px dashed #00BD9B; /* Dashed border */
    width: 100%;
}


.text-class {
    position: absolute; /* This makes the text position relative to the nearest positioned ancestor */
    top: 0; /* Stick to the top */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, 0); /* Adjust for exact centering */
    background-color: #f00; /* Background color */
    color: #fff; /* Text color */
    padding: 10px; /* Some padding */
}

.p-text-inaction {
    color: #006688;
    font-size: 16px !important;
}

.inAction-fontsize{
    font-size: 16px !important;
}

.inner-text {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #00BD9B; /* White background with 80% opacity */
    color: white;
    width: 101%;
    padding: 15px;
    text-align: center;
    font-size: 24px !important;
}

.outer-text {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #006688; /* White background with 80% opacity */
    color: white;
    padding: 12px;
    width: 40%;
    text-align: center;
    font-size: 24px !important;
}




.cardAlign-left {
    position: relative; /*Needed for z-index and top to work */
    z-index: 1; /*Raises the card above the containers */
    margin-top: 0%; /*Moves the card up by 30px */
    margin-bottom: 0%; /* Ensures the cards don't take up extra vertical space */
    margin-left: -80%; /*Moves the left side of the card over the outer container */
    margin-right: 20%; /* Moves the right side of the card over the inner container */
}


.cardAlign-right {
    position: relative; /*Needed for z-index and top to work */
    z-index: 1; /*Raises the card above the containers */
    margin-top: 0; /*Moves the card up by 30px */
    margin-bottom: 0; /* Ensures the cards don't take up extra vertical space */
    margin-left: 20%; /*Moves the left side of the card over the outer container */
    margin-right: -80%; /* Moves the right side of the card over the inner container */
}

.card-button {
    border-radius: 5px;
    background: #00BD9B;
}


/*.first-row {
        margin-right: -200px
    }



    .card-body {
        text-align: right;*/ /* Align the text to the right */
/*padding-left: 50%;*/ /* Add space for the icon */
/*}*/




.card-body-right {
    text-align: right; /* Align the text to the right */
    padding-left: 110px; /* Add space for the icon */
}

.card-icon-right {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    font-size: 3em; /* Make the icon the same size as the number */
}

.card-title {
    color: #276788;
}

.triangle-top {
    position: relative; /* Ensure this is relative for positioning internal elements absolutely */
    /* Existing styles */
}


.star {
    position: absolute;
    transform: translate(-50%, -50%); /* Centers the stars based on their dimensions */
    z-index: 10;
}

.star1 {
    top: -20%; /* Adjust these percentages as needed for positioning */
    left: 50%;
}

.star2 {
    top: -20%; /* Different positioning for the second star */
    left: 35%;
}

.star3 {
    top: -20%; /* Different positioning for the third star */
    left: 65%;
}

.svg-arrow-container {
    position: absolute;
    top: 39%; /* Adjust based on where the right card ends */
    left: 50%; /* Adjust based on the side alignment of the right card */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    z-index: 5; /* Ensure it's above the background but below interactive elements */
}

.svg-arrow-card1-container {
    position: absolute;
    top: 39%; /* Adjust to position vertically according to layout needs */
    left: 5%; /* Adjust to position horizontally according to layout needs */
    height: auto;
    transform: translateX(-50%); /* Centers the arrow if necessary */
    z-index: 5;
}

.svg-arrow-card2-container {
    position: absolute;
    top: 57%; /* Adjust to position vertically according to layout needs */
    left: 5%; /* Adjust to position horizontally according to layout needs */
    height: auto;
    transform: translateX(-50%); /* Centers the arrow if necessary */
    z-index: 5;
}

.svg-arrow-card3-container {
    position: absolute;
    top: 77%; /* Adjust to position vertically according to layout needs */
    left: 6%; /* Adjust to position horizontally according to layout needs */
    height: auto;
    transform: translateX(-50%); /* Centers the arrow if necessary */
    z-index: 5;
}

.svg-arrow-right-card1-container {
    position: absolute;
    top: 28%; /* Adjust to position vertically according to layout needs */
    left: 43%; /* Adjust to position horizontally according to layout needs */
    transform: translateX(-50%); /* Centers the arrow if necessary */
    z-index: 5;
}

.svg-arrow-right-card2-container {
    position: absolute;
    top: 31%; /* Adjust to position vertically according to layout needs */
    left: 45%; /* Adjust to position horizontally according to layout needs */
    transform: translateX(-50%); /* Centers the arrow if necessary */
    z-index: 5;
}

.svg-arrow-right-container {
    position: absolute;
    top: 33%; /* Adjust to position vertically according to layout needs */
    left: 45%; /* Adjust to position horizontally according to layout needs */
    transform: translateX(-50%); /* Centers the arrow if necessary */
    z-index: 5; /* Ensures it appears over the background but under any overlays */
}

/* Triangle at the top of the card */
.triangle-top::before {
    content: "";
    position: absolute;
    top: -199px; /* Adjust as necessary */
    left: 50%;
    transform: translateX(-50%);
    border-left: 268px solid transparent;
    border-right: 268px solid transparent;
    border-bottom: 200px solid #00BD9B; /* Adjust color as necessary */
}

.bottom-card {
    position: absolute;
    bottom: -20%; /* Adjust this value to position the card lower or higher */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Centering the card exactly in the middle */
    width: auto; /* Adjust width as necessary */
    /* Matching your inner container color */
    border: 2px dashed #00BD9B; /* A style matching other elements */
    padding: 20px; /* Padding inside the card */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds shadow for better visibility */
}

.bg-slate-200 {
    background-color: white;
}

.button-text {
    color: white;
    background-color: #00BD9B;
}


.card-border {
    border: 2px solid #00BD9B !important;
}

hr {
    border-top: 2px solid #666;
}

h5{
    font-size: 20px !important;
}

h4{
    font-size: 24px !important;
}

h1{
    font-size: 40px !important;
}

@media (min-height: 2190px) {
    .inner-container {
        position: relative;
        background-color: #E3EFF4BF; /* Light yellow */
        padding: 5%; /* Space around the cards */
        padding-top: 3%;
        border: 6px dashed #00BD9B; /* Dashed border */
        width: 100%;
        padding-bottom: 15%;
    }

    .svg-arrow-container {
        position: absolute;
        top: 43%; /* Adjust based on where the right card ends */
        left: 50%; /* Adjust based on the side alignment of the right card */
        width: 100%; /* Adjust if necessary */
        height: auto; /* Maintain aspect ratio */
        z-index: 5; /* Ensure it's above the background but below interactive elements */
    }
}