<meta name="viewport" content="width=device-width, initial-scale=1" /><style>
    /* Style the buttons that are used to open and close the accordion panel */

    .accordion {
        background-color: #32557c;
        color: #ffffff;
        cursor: pointer;
        padding: 5px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

    .active,
    .accordion:hover {
        background-color: #d32e2a;
    }

    /* Style the accordion panel. Note: hidden by default */

    .panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 1s ease-out;
    }

    /*Add a symbol to each button to indicate whether the collapsible content is open or closed*/

    .accordion:after {
        content: "Expand \2B9F";
        /* Unicode character for Down Arrow */
        font-size: 13px;
        color: #ffffff;
        float: right;
        margin-left: 5px;
    }

    .active:after {
      background-color: #32557c;
        content: "Collapse \2B59";
        /* Unicode character for Circled "X" sign */
    }

// anchor links - smooth scroll effect 
html {
  scroll-behavior: smooth;
}

</style>