body {
    color: #444444 !important;
    /*background-color: #FFF1E0 !important;*/
}
.custom-bg {
    background-color: #FFF1E0 !important;
}
.hot-pink {
    color: #FF4081 !important;
}
.grey {
    color: #444444 !important;
  
}
p.grey, .features-item p {
    font-size: 18px;
    font-weight: 500;
    line-height: 2rem;
}
.features .nav-link p {
    font-size: 16px;
    font-weight: 500;
    line-height: 2rem;
}
.custom-heading {
    color: #00A8FF;
}
    .custom-heading:hover {
        color: #FF4081;
    }
.custom-btn {
    background-color: #00A8FF !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}
    .custom-btn:hover {
        color: #00A8FF !important;
        background-color: #FFEB3B !important;
    }
.hero h1{
    font-size:45px;
}
.section-title {
    color: #FF4081 !important;
    text-align:center;
}
.cta-btn:hover {
    background-color: #FF4081 !important;
}
#hero {
    padding-top:0px;
}
.hero-p {
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
    text-shadow: 0px -2px 7px #000000;
    padding: 26px;
}
.hero-h1 {
    font-size: 24px !important;
    font-weight: 700;
    color: #FF4081 !important;
    text-shadow: 2px 6px 9px #f5efef;
    padding: 26px;
}
.hero .position-absolute{
    top:20px;
    width:85%;
}
.custom-vi{
    width:100%;
    max-height:650px;
}
@media(max-width:400px) {
    .hero .position-absolute {
        position: relative !important;
    }

    .hero-p {
        color: #00A8FF !important;
        text-shadow: 0px 0px 0px #000000;
        padding: 3px;
    }

    .hero-h1 {
        text-shadow: 0px 0px 0px #000000;
        padding: 3px;
    }
}
.blue-heading {
    font-size: 19px;
    font-weight: 600;
    color: #00A8FF;
}
.counter-area span.hot-pink {
    font-size: 22px;
    font-weight: 600;
    text-transform: capitalize;
}
.font-2rem{
    font-size:2rem !important;
}
.faq .faq-container .faq-item .faq-content ul {
    margin-bottom: 0;
    overflow: hidden;
}
.faq .faq-container .faq-item .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
    max-height: 0; /* Set a max height to control expansion */
    overflow: hidden; /* Ensure that overflowing content is hidden */
}

.faq .faq-container .faq-active .faq-content {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    padding-top: 10px; /* Add padding for better spacing */
    max-height: 300px; /* Adjust as necessary */
}