.backdrop{
    height: 12.5em;
    background-color: blue;
}

.intro img{
    display:block;
    margin:auto;
    max-width: 42.625em;
}
.our-tool-content{
    margin: auto;
    width: 70vw;
    max-width: 78.125em; 
}


.tool-card {
    position: relative;
    width: 100%;
    /* height: 37.5em; Adjust as needed */
    padding: 5% 0;
    overflow: hidden; /* Ensure the image and content stay within bounds */
}


.outer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.outter.content {
    position: relative;
    text-align: center;
    margin-top: 2rem;
    margin-left: 8em;
}


.inner-description {
    font-size: 1.25em;

}
.inner-header {
    font-weight: 500;
    font-size: 2.8em;
}

.title-header {
    font-weight: 600;
    font-size: 3.5em;
}

.inner {
    padding: 2.5em;
    border-radius: 10px; /* Optional: Add rounded corners */
    width: 70%;
    position: relative; /* Enable positioning for the circle */
    z-index: 2; /* Ensure this content is above everything */
    max-width: 78.125em;
    /* height: 41.875em; */
}

.circle {
    width: 10em;
    height: 10em;
    border-radius: 50%;
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    text-align: center; /* Centers text inside the p tag */
    position: absolute; /* Positioning relative to the .inner div */
    bottom: 0; /* Aligns the circle to the top */
    right: 0; /* Aligns the circle to the right */
    transform: translate(-20%, -20%);/*  Adjusts for half of the circle's width and height to prevent it from being cut off */
}



.account-circle {
    height: 5.9375em;
}

.circle p {
    margin: 0;/*  Removes default margin */
    color: black; /* Optional: Text color to contrast with the background */
    font-size: 1.5625em;
}

.green-theme .inner {
    background-color: rgb(202, 213, 181); /* Green background */
}

.green-theme .circle {
    background-color: rgb(166, 183, 128); /* Green circle */
}

.green-theme .image-overlay {
    background-color: rgba(212, 218, 198, 0.7); /* Green tint */
}

.yellow-theme .inner {
    background-color: rgb(245, 230, 190); /* Yellow background */
}

.yellow-theme .circle {
    background-color: rgb(247, 215, 144); /* Yellow circle */
}

.yellow-theme .image-overlay {
    background-color: rgba(209, 205, 191, 0.7); /* Yellow tint */
}

.blue-theme .inner {
    background-color: rgb(185, 206, 226); /* Blue background */
}

.blue-theme .circle {
    background-color: rgb(98, 155, 250); /* Blue circle */
}

.blue-theme .image-overlay {
    background-color: rgba(160, 175, 196, 0.75); /* Blue tint */
}

.intro {
    padding-top: 3.125em;
    padding-bottom: 3.125em;
}



/* Media query for tablets */
@media (width <= 1000px) {

}

@media (width <= 700px) {
    .circle {
        width: 11.875em;
        height: 11.875em;
    }
}

@media (width <= 600px) {
    .our-tool-content {
        width: 90%;
    }
    .intro img {
        max-width: 100%;
    }    
    .tool-card {
        height: auto;
    }
    .inner {
        padding: 2.5em;
        border-radius: 10px; /* Optional: Add rounded corners */
        width: 80%;
        z-index: 2; /* Ensure this content is above everything */
    }
    .circle {
        width: 11.875em;
        height: 11.875em;
    }
    .title-header {
        font-size: 2.5em;
    }
}

/* Media query for mobile devices */
@media (width <=  480px) {
    .inner {
        width: 90%;
    }
    .circle {
        width: 6.25em;
        height: 6.25em;
    }
}