<style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f8f8; /* Light grey background for a clean look */
            color: #333; /* Dark grey text for readability */
        }
        
        header, .main.style2 {
            background-color: #005f73; /* A calm, dark blue for header and main section backgrounds */
            color: white;
        }
        
        h1, h2, h3 {
            color: #0a9396; /* A soft blue color for headings to stand out */
        }
        
        .user-profile {
            background-color: #94d2bd; /* A soft green for the user profile section */
            padding: 20px;
            border-radius: 8px;
            margin: 10px;
        }
        
        .analytics-graph {
            background-color: #ee9b00; /* An attention-grabbing orange for the analytics graph */
            padding: 20px;
            border-radius: 8px;
            margin: 10px;
        }
        
        .speech-exercises .exercise {
            background-color: #cae8d5; /* A light green for exercise boxes */
            padding: 15px;
            margin: 10px;
            border-radius: 8px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .selectBox label {
            display: block;
            padding: 10px;
            margin: 5px;
            background-color: #e9ece9; /* A very light green for checkboxes */
            border: 2px solid #94d2bd; /* Soft green border */
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="submit"] {
            background-color: #005f73; /* Matching the header background */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #0a9396; /* A lighter blue for hover effect */
        }

         .sticky-menu {
            position: fixed;
            top: 0;
            width: 100%;
            background: #005f73; /* Adjust the color to fit your site */
            z-index: 1000;
        }

        .sticky-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .sticky-menu ul li {
            float: left;
        }

        .sticky-menu ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .sticky-menu ul li a:hover {
            background-color: #0a9396; /* Lighter blue for hover */
        }


@media (max-width: 1600px) {
#header {
  padding: 6em 0;
}
}
#header {
margin-bottom: 6em;
}
.containerX {
display: flex;
align-items: center;
justify-content: center;
max-width: 650px;
margin: 0 auto;
flex-wrap: wrap;
gap: 20px;
}
@media (min-width: 768px) {
#imgProfile {
  min-width: 120px;
}
.containerX {
  justify-content: space-between;
}
}

input[type="range"] {
margin: 30px 0 50px;
-webkit-appearance: none;
}

input[type="range"]:focus {
outline: none;
}

/* Chrome & Safari */
input[type="range"]::-webkit-slider-runnable-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 10px;
cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}

/* Firefox */
input[type="range"]::-moz-range-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 14px;
cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}

/* IE */
input[type="range"]::-ms-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 14px;
cursor: pointer;
}

input[type="range"]::-ms-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}

.demo-box {
margin-bottom: 6em;
}
.carousel-control.right,
.carousel-control.left {
background: transparent;
border: 0;
}

#btn-start-recording {
background-color: #00af00;
}
#btn-start-recording:hover {
background-color: #0b8b0b;
}
#btn-stop-recording {
background-color: red;
}
#btn-stop-recording:hover {
background-color: #e51010;
}
#btn-release-microphone:hover,
#btn-download-recording:hover {
background-color: #0e5fd1;
}
.audio-player-holder {


}
#four {
margin-bottom: 20px;
}

.transcript-updates {
max-width: 50em;
margin: 6em auto;
padding-left: 20px;
padding-right: 20px;
}
.transcript-updates p label {
color: #fff;
font-size: 2em;
}
.transcript-updates textarea {
border-color: #fff;
border-radius: 7px;
padding: 1em;
font-size: 1.2em;
margin-top: 20px;
background-color: #1c1f25;
}
.transcript-updates textarea:focus {
background-color: transparent;
}
.transcript-updates input[type="submit"] {
color: #fff !important;
font-size: 1.1em;
background: var(--my-message-bg);
border-radius: 100vmax;
font-weight: 600;
padding: 0 2em;
}
.transcript-updates input[type="submit"]:hover {
background-color: #0e5fd1;
}
#five button {
margin-bottom: 6px;
}
#five {
padding: 6em 0 2em;
}
.buttons-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}
.audio-player-holder {
    margin-left: 30px;
}
.audio-player-holder audio {
    zoom: 0.8;

}


.bottom-part {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bottom-part .buttons-left {
    flex: 0 0 auto;
    width: 30%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 20px;
}

.bottom-part .form-right {
    flex: 0 0 auto;
    width: 70%;
    padding: 0 20px;
}

.bottom-part .form-right textarea {
    width: 100%;
    height: 170px;
    border: 3px solid;
}
.bottom-part .form-right input[type="submit"] {
    background: transparent;
    border: 2px solid;
    padding: 6px 10px;
    font: inherit;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
}
@media(max-width:767.98px){
 .bottom-part .form-right{
    width: 100%;
  }
  .bottom-part .buttons-left {
    width: 100%;
    align-items: center;
    margin-bottom: 30px;
}
}



body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.dial-container {
    text-align: center;
}

.dial {
    -webkit-appearance: none;
    width: 150px;
    height: 150px;
    background: #ddd;
    border-radius: 50%;
    border: solid 10px #333;
    transform: rotate(-135deg);
}

.dial::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: #333;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #fff;
}

.dial::-moz-range-thumb {
    width: 30px;
    height: 30px;
    background: #333;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #fff;
}

#volume-level {
    display: block;
    margin-top: 20px;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
}



</style>

/* Additional styles for colors, fonts, and responsive design can be added */
