/*! Variables start */
:root {
    /* Font Styles */
    --mainfont: "Poppins", sans-serif;

    /* Color Variables */
    --colorDarkBlue: #0A1540;
    --colorLightBlue: #68FDD7;
    --colorWhite: #FFFFFF;
    --colorBackground: #F3F3F3;
}

body {
    font-family: var(--mainfont) !important;
    cursor: default;
    height: 100vh;
    background-color: var(--colorBackground);
    color: var(--colorDarkBlue);
}

/* .page-service-hero {
    height: 100vh !important;
} */

.page-services-list {
    background-color: var(--colorWhite);
}

.ps-title {
    font-size: 35px;
    font-weight: 600 !important;
    color: var(--colorDarkBlue);
}

.ps-card-img {
    height: 350px !important;
    object-fit: cover;
    width: 100%;
    border-radius: 16px;
}

.ps-card {
    background-color: var(--colorWhite);
    border-radius: 22px;
}

.ps-card-title {
    font-size: 30px !important;
    font-weight: 400 !important;
    color: var(--colorDarkBlue);
}

.ps-card-text {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: var(--colorDarkBlue);
}


/* .daily-service-hero{
    height: 80vh;
} */
.service-image img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.text-content h1 {
    font-size: 30px;
    font-weight: 600;
}



/* Accordion Start By here */
/* .office-service-catergory{
    margin-right: 100px;
} */

/* .accordion{
    margin-right: 150px;
    width: 1300px;
} */

/* Hide checkboxes */
/* Hide checkboxes */
/* Hide checkboxes */
.accordion input[type="checkbox"] {
    display: none;
}

/* Styles for accordion items */
.accordion li {
    list-style: none;
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    background: white;
    border-color: aqua;
    border-bottom-style: solid;
}

.accordion li label {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}

.title {
    color: var(--colorDarkBlue);
    font-size: 20px !important;
    font-weight: 600;
}

/* Initially show "+" icon */
label::before {
    content: '+';
    margin-right: 10px;
    font-size: 24px;
    font-weight: 600;
    transition: max-height 0.2s ease-out;
}

/* Hide content by default and add smooth transition */
.accordion .content {
    /* padding-left: 20px;
    padding-right: 20px; */
    padding: 0px 20px;
    font-size: 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Change icon to "-" when accordion is expanded */
.accordion input[type="checkbox"]:checked ~ label::before {
    content: '-';
    transition: max-height 1s ease-out;
}

/* Show content when checkbox is checked */
.accordion input[type="checkbox"]:checked ~ .content {
    max-height: 1000px; /* Adjust to a value larger than your content's height */
    transition: max-height 0.6s ease-in-out;
}