.cta-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: rgb(43, 156, 43);
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    margin-top: 20px;

    &:hover {
        background-color: rgb(43, 156, 43);
    }
}


:root {
    --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Jost", sans-serif;
    --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #444444;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #37517e;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: rgb(43, 156, 43);
    /* Changed to purple */
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --contrast-color: #ffffff;
    /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #ffffff;
    /* The default color of the main navmenu links */
    --nav-hover-color: rgb(43, 156, 43);
    /* Changed to purple */
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #542384;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: rgb(43, 156, 43);
    /* Changed to purple */
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}


/* Template Custom Colors */
:root {
    --hero-background-color: #000000;
    --hero-color: #ffffff;
}



/*--------------------------------------------------------------
  # Global Header
  --------------------------------------------------------------*/
.header {
    --background-color: #542384;
    --heading-color: #ffffff;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 15px 0;
    transition: all 0.5s;
    z-index: 997;
}

.header .logo {
    line-height: 1;
}

.header .logo img {
    max-height: 50px;
    margin-right: 8px;
}



.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--contrast-color);
    background: rgb(43, 156, 43);
    /* Changed to green */
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 30px;
    border-radius: 50px;
    transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, green, transparent 15%);
    /* Changed to green */
}



/* Index Page Header
  ------------------------------*/
.index-page .header {
    --background-color: rgba(255, 255, 255, 0);
    --heading-color: #ffffff;
    --nav-color: #ffffff;
}

/* Index Page Header on Scroll
  ------------------------------*/
.index-page.scrolled .header {
    --background-color: #542384;
}

/*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
/* Desktop Navigation */


.no-bullets {
    list-style-type: none;
    padding-left: 0;
}