.accordion-container {
    /*padding: 0px;*/
    width: 100%;
}

.accordion {
    border-bottom: 1px solid black; /* Thin grey line between each heading */
    display: flex;
    flex-direction: column;
    padding: 0px !important;
}

.toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; /* Remove background, padding only for spacing */
    cursor: pointer;
}

.accordion-container .accordion .toggle .heading {
    font-family: var(--font-heading) !important;
    /*font: var(--font-heading) !important;
    /*font-family: var(--font-heading) !important;*/
    color: black !important;
    margin: 0;
    padding: 0;
    font-size: 33px !important;
    font-weight: 300 !important;
    letter-spacing: -1px !important;
    line-height: 1em !important;/* Normal weight by default */
    /*transition: font-weight 0.3s ease; /* Smooth transition for bold effect */
    /*transition: transform 1s ease;*/

}

.accordion-container .accordion .toggle .heading.open {
    font-weight: 500 !important; /* Make the heading bold when accordion is opened */
}

.content {
    overflow: hidden;
    max-height: 0;
    font-weight: 300 !important;
    /*transition: max-height 0.3s ease;*/
    /*padding: 0 20px; /* Adjust padding for the content */
    /*background-color: #fff;*/
}

/*.accordion .content {
  display: none;
}*/


.content.open {
    max-height: none;
}

.accordion-container .accordion .content .inner-content p {
    font-size: 18px !important;
    font-weight: 400 !important;
}

.accordion-container .accordion .content .inner-content a {
    color: black !important;
    text-decoration: underline;
    /*line-height: 1em;*/
}

.accordion-container .accordion .content .inner-content a:hover {
    text-decoration: underline;
}
/*
.plus {
    font-size: 40px;
    font-weight: 100 !important;
    transition: transform 0.3s ease;
}

.plus.open {
    transform: rotate(45deg);
}
*/

/* Plus symbol styling */
.plus {
    font-size: 40px; /* Maintain size */
    font-weight: 100 !important;
    transition: transform 0.3s ease; /* Smooth rotation */
    transform-origin: center center; /* Ensure it rotates around its center */
    display: inline-block; /* Ensure it's treated as an inline-block element */
}

/* Rotating the plus to an 'x' */
.plus.open {
    transform: rotate(45deg); /* Rotate to form an 'x' */
}


/* Mobile-specific styles */
@media (max-width: 767px) {
    .accordion-container .accordion .toggle .heading {
        font-size: 20px !important; /* Set font size to 20px on mobile */
    }

    .accordion-container .accordion .toggle .heading.open {
        font-size: 20px !important; /* Ensure the open state also uses 20px font size */
    }
}


/* LinkedIn icon styles */
.linkedin-icon i {
    font-family: "Font Awesome 5 Brands" !important; /* Force brand icons to use the correct font */
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px;
    color: #000000;
}

.linkedin-icon i:before {
    content: "\f08c"; /* LinkedIn icon Unicode */
}

/* Position the LinkedIn icon at the top-right of the open accordion */
.accordion .content {
    position: relative; /* Ensure the accordion content is a positioned element */
}

.accordion .linkedin-icon {
    position: absolute;
    top: 0px; /* Adjust to the desired distance from the top */
    right: 25px; /* Adjust to the desired distance from the right */
    font-size: 24px; /* Adjust the icon size */
    color: #000000; /* LinkedIn color */
    transition: opacity 0.3s ease-in-out; /* Add smooth appearance when accordion opens */
    opacity: 0; /* Initially hidden */
}

/* Make the LinkedIn icon visible when the accordion is open */
.accordion .content.open .linkedin-icon {
    opacity: 1; /* Make it fully visible when the accordion is open */
}

/* Hover effect for LinkedIn icon */
.accordion .linkedin-icon i:hover {
    color: var(--yellow) !important; /* yellow on hover */
}

.accordion .contact-button:hover {
    color: var(--black);
    background-color: var(--white);
    border: solid 1px var(--black);
}