.bee-row,
.bee-row-content {
                position: relative
}

.bee-form .bee-form-row .bee-field button {
                font-size: inherit;
                font-family: inherit
}

.bee-row-1,
.bee-row-2,
.bee-row-3,
.bee-row-4,
.bee-row-5,
.bee-row-6,
.bee-row-6 .bee-row-content {
                background-repeat: no-repeat
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff8bd; /*fff8bd*/
    color: #000000;
    font-family: Arial, Helvetica, sans-serif
                
}

.bee-row-3 .bee-col-1 .bee-block-2 a,
.bee-row-4 .bee-col-1 .bee-block-3 a,
.bee-row-5 .bee-col-1 .bee-block-3 a,
.bee-row-6 .bee-col-1 .bee-block-3 a,
.bee-row-6 .bee-col-1 .bee-block-5 a,
a {
                color: #7747FF
}

* {
                box-sizing: border-box
}

h1,
p {
                margin: 0
}

.bee-row-content {
                max-width: 1280px;
                margin: 0 auto;
                display: flex
}

.bee-row-1 .bee-col-1 .bee-block-3 div.label:not(.inline),
.bee-row-1 .bee-col-1 .bee-block-3 label:not(.inline),
.bee-row-content .bee-col-w12 {
                flex-basis: 100%
}

.bee-button .content,
.bee-row-1 .bee-col-1 .bee-block-3,
.bee-row-1 .bee-col-1 .bee-block-3 .bee-button-container {
                text-align: center
}

.bee-button a,
.bee-icon .bee-icon-label-right a {
                text-decoration: none
}

.bee-divider,
.bee-image {
                overflow: auto
}

.bee-divider .center,
.bee-image .bee-center {
                margin: 0 auto
}

.bee-row-1 .bee-col-1 .bee-block-2,
.bee-row-1 .bee-col-1 .bee-block-3 .bee-form-row:not(.bee-sidelabel) input:not([type=checkbox]):not([type=radio]),
.bee-row-6 .bee-col-1 .bee-block-4 {
                width: 100%
}

.bee-form .bee-form-row .bee-field {
                padding: 3px;
                display: flex;
                flex: 1;
                flex-wrap: wrap;
                align-items: center
}

.bee-form .bee-form-row .bee-field.bee-inline-field {
                flex-wrap: nowrap;
                align-items: flex-start;
                display: block
}

.bee-form .bee-form-row .bee-field .bee-form-option-wrapper {
                align-items: flex-start;
                display: inline-flex
}

.bee-form .bee-form-row .bee-field input:not([type=checkbox]):not([type=radio]) {
                flex-grow: 1;
                font-family: inherit;
                font-size: inherit
}

.bee-form .bee-form-row .bee-field input[type=checkbox]:not(:first-of-type) {
                margin-left: 15px
}

.bee-form .bee-form-row .bee-field .bee-button-container {
                flex-grow: 1
}

.bee-form input[type=color] {
                border: none;
                height: 38px
}

.bee-form input[type=color]::-webkit-color-swatch-wrapper {
                margin: 0;
                padding: 2px
}

.bee-form input[type=color]::-webkit-color-swatch {
                margin: 0;
                padding: 0
}

.bee-icon {
                display: inline-block;
                vertical-align: middle
}

.bee-icon .bee-content {
                display: flex;
                align-items: center
}

.bee-image img {
                display: block;
                width: 100%
}

.bee-paragraph {
                overflow-wrap: anywhere
}

.bee-row-1 .bee-row-content,
.bee-row-2 .bee-row-content,
.bee-row-3 .bee-row-content,
.bee-row-4 .bee-row-content,
.bee-row-5 .bee-row-content {
                background-repeat: no-repeat;
                color: #000000
}

.bee-row-1 .bee-col-1,
.bee-row-2 .bee-col-1,
.bee-row-3 .bee-col-1,
.bee-row-4 .bee-col-1,
.bee-row-5 .bee-col-1,
.bee-row-6 .bee-col-1 {
                padding-bottom: 5px;
                padding-top: 5px
}

.bee-row-1 .bee-col-1 .bee-block-1,
.bee-row-3 .bee-col-1 .bee-block-1,
.bee-row-4 .bee-col-1 .bee-block-1,
.bee-row-4 .bee-col-1 .bee-block-2,
.bee-row-5 .bee-col-1 .bee-block-1,
.bee-row-5 .bee-col-1 .bee-block-2,
.bee-row-6 .bee-col-1 .bee-block-2 {
                padding: 10px;
                text-align: center;
                width: 100%
}

.bee-row-1 .bee-col-1 .bee-block-3 {
                font-family: inherit;
                font-size: 16px;
                font-weight: 400;
                padding: 10px
}

.bee-row-2 {
                background-color: #ffffff
}

.bee-row-2 .bee-col-1 .bee-block-1 {
                color: #1e0e4b;
                font-family: Inter, sans-serif;
                font-size: 15px;
                padding-bottom: 5px;
                padding-top: 5px;
                text-align: center
}

.bee-row-3 .bee-col-1 .bee-block-2,
.bee-row-4 .bee-col-1 .bee-block-3,
.bee-row-5 .bee-col-1 .bee-block-3,
.bee-row-6 .bee-col-1 .bee-block-3,
.bee-row-6 .bee-col-1 .bee-block-5 {
                direction: ltr;
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0;
                line-height: 120%;
                color: #101112
}

.bee-row-3 .bee-col-1 .bee-block-10,
.bee-row-3 .bee-col-1 .bee-block-3,
.bee-row-3 .bee-col-1 .bee-block-4,
.bee-row-3 .bee-col-1 .bee-block-5,
.bee-row-3 .bee-col-1 .bee-block-6,
.bee-row-3 .bee-col-1 .bee-block-7,
.bee-row-3 .bee-col-1 .bee-block-8,
.bee-row-3 .bee-col-1 .bee-block-9,
.bee-row-4 .bee-col-1 .bee-block-10,
.bee-row-4 .bee-col-1 .bee-block-11,
.bee-row-4 .bee-col-1 .bee-block-12,
.bee-row-4 .bee-col-1 .bee-block-4,
.bee-row-4 .bee-col-1 .bee-block-5,
.bee-row-4 .bee-col-1 .bee-block-6,
.bee-row-4 .bee-col-1 .bee-block-7,
.bee-row-4 .bee-col-1 .bee-block-8,
.bee-row-4 .bee-col-1 .bee-block-9,
.bee-row-5 .bee-col-1 .bee-block-10,
.bee-row-5 .bee-col-1 .bee-block-4,
.bee-row-5 .bee-col-1 .bee-block-5,
.bee-row-5 .bee-col-1 .bee-block-6,
.bee-row-5 .bee-col-1 .bee-block-7,
.bee-row-5 .bee-col-1 .bee-block-8,
.bee-row-5 .bee-col-1 .bee-block-9,
.bee-row-6 .bee-col-1 .bee-block-6 {
                padding: 10px;
                text-align: center
}

.bee-row-3 .bee-col-1 .bee-block-11,
.bee-row-4 .bee-col-1 .bee-block-13,
.bee-row-4 .bee-col-1 .bee-block-3,
.bee-row-5 .bee-col-1 .bee-block-3,
.bee-row-6 .bee-col-1 .bee-block-1,
.bee-row-6 .bee-col-1 .bee-block-3,
.bee-row-6 .bee-col-1 .bee-block-5 {
                padding: 10px
}

.bee-row-6 .bee-row-content {
                border-radius: 0;
                color: #000000
}

.bee-row-2 .bee-col-1 .bee-block-1 .bee-icon-image {
                padding: 5px 6px 5px 5px
}

.bee-row-2 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content {
                margin-left: 0
}

.bee-row-2 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
                margin-right: 0
}

.bee-row-3 .bee-col-1 .bee-block-2 {
                padding: 10px;
                text-align: center
}

.bee-row-3 .bee-col-1 .bee-block-2 p:not(:last-child),
.bee-row-4 .bee-col-1 .bee-block-3 p:not(:last-child),
.bee-row-5 .bee-col-1 .bee-block-3 p:not(:last-child),
.bee-row-6 .bee-col-1 .bee-block-3 p:not(:last-child),
.bee-row-6 .bee-col-1 .bee-block-5 p:not(:last-child) {
                margin-bottom: 16px
}

.bee-row-4 .bee-col-1 .bee-block-3,
.bee-row-5 .bee-col-1 .bee-block-3 {
                text-align: center
}

.bee-row-6 .bee-col-1 .bee-block-3,
.bee-row-6 .bee-col-1 .bee-block-5 {
                text-align: left
}

.bee-row-1 .bee-col-1 .bee-block-3 form {
                display: inline-block;
                width: 100%
}

.bee-row-1 .bee-col-1 .bee-block-3 div.label,
.bee-row-1 .bee-col-1 .bee-block-3 label {
                color: #101112;
                letter-spacing: normal;
                line-height: 200%;
                text-align: left;
                display: block
}

.bee-row-1 .bee-col-1 .bee-block-3 ::-webkit-input-placeholder {
                color: #000000
}

.bee-row-1 .bee-col-1 .bee-block-3 :-moz-placeholder {
                color: #000000
}

.bee-row-1 .bee-col-1 .bee-block-3 ::-moz-placeholder {
                color: #000000
}

.bee-row-1 .bee-col-1 .bee-block-3 :-ms-input-placeholder {
                color: #000000
}

.bee-row-1 .bee-col-1 .bee-block-3 .bee-field>label:first-child,
.bee-row-1 .bee-col-1 .bee-block-3 div.label {
                padding: 3px
}

.bee-row-1 .bee-col-1 .bee-block-3 .bee-field.bee-inline-field input[type=checkbox] {
                position: relative;
                color: purple;
                top: 7px
}

.bee-row-1 .bee-col-1 .bee-block-3 input:not([type=checkbox]):not([type=radio]):not([type=image]) {
                background-color: #ffffff;
                border-bottom: 1px solid transparent;
                border-left: 1px solid transparent;
                border-radius: 4px;
                border-right: 1px solid transparent;
                border-top: 1px solid transparent;
                color: #000000;
                padding: 5px;
                min-height: 42px
}

.bee-row-1 .bee-col-1 .bee-block-3 input:not([type=checkbox]):not([type=radio]):focus {
                outline-color: #5172f6
}

.bee-row-1 .bee-col-1 .bee-block-3 button {
                background-color: #5172f6;
                border-bottom: 0 solid transparent;
                border-left: 0 solid transparent;
                border-radius: 4px;
                border-right: 0px solid transparent;
                border-top: 0 solid transparent;
                color: #ffffff;
                letter-spacing: normal;
                line-height: 200%;
                padding: 5px 20px;
                width: 100%
}

@media (max-width:768px) {
                .bee-form form {
                                width: 100% !important
                }

                .bee-row-content:not(.no_stack) {
                                display: block
                }

                .bee-row-1 .bee-col-1 .bee-block-1,
                .bee-row-1 .bee-col-1 .bee-block-1 h1,
                .bee-row-3 .bee-col-1 .bee-block-1,
                .bee-row-3 .bee-col-1 .bee-block-10 .bee-button-content,
                .bee-row-3 .bee-col-1 .bee-block-2,
                .bee-row-4 .bee-col-1 .bee-block-1,
                .bee-row-4 .bee-col-1 .bee-block-12 .bee-button-content,
                .bee-row-4 .bee-col-1 .bee-block-2,
                .bee-row-4 .bee-col-1 .bee-block-3,
                .bee-row-5 .bee-col-1 .bee-block-1,
                .bee-row-5 .bee-col-1 .bee-block-10 .bee-button-content,
                .bee-row-5 .bee-col-1 .bee-block-3,
                .bee-row-6 .bee-col-1 .bee-block-6 .bee-button-content {
                                text-align: center !important
                }

                .bee-row-3 .bee-col-1 .bee-block-1 h1,
                .bee-row-4 .bee-col-1 .bee-block-1 h1,
                .bee-row-5 .bee-col-1 .bee-block-1 h1 {
                                font-size: 28px !important;
                                text-align: center !important
                }

                .bee-row-4 .bee-col-1 .bee-block-2 h1 {
                                font-size: 34px !important;
                                text-align: center !important
                }

                .bee-row-3 .bee-col-1 .bee-block-10,
                .bee-row-4 .bee-col-1 .bee-block-12,
                .bee-row-5 .bee-col-1 .bee-block-10,
                .bee-row-6 .bee-col-1 .bee-block-6 {
                                padding: 10px !important
                }

                .bee-row-1 .bee-col-1 .bee-block-3 button,
                .bee-row-1 .bee-col-1 .bee-block-3 input,
                .bee-row-1 .bee-col-1 .bee-block-3 label {
                                font-size: 16px !important
                }
}

.askaq {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 15px;
}

.bubble-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.text-bubble {
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 10px;
    margin: 20px;
    cursor: pointer;
}

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#question-input {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 5px 10px;
    margin-right: 5px;
    width: 85%;
    
}

#send-button, #clear-button {
    border: none;
    border-radius: 20px;
    padding: 5px 10px;
    background-color: #0d71db;
    color: white;
}

#submit-btn {
    border: none;
    border-radius: 5px;
    padding: 5px 10px; 
    background-color: #7747FF;
    color: white;
    float: right;
    margin-right: 15px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    padding: 0px 0px 0px 0px;
}
.button-container {
    position: absolute;
    width: 150px;
    height: 150px;
}
.button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #3498db;
    text-align: center;
    line-height: 100px;
    color: white;
    font-size: 20px;
    cursor: pointer;
}
.progress {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    clip: rect(0, 150px, 150px, 75px);
}
.progress .progress-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0, 75px, 150px, 0);
    background-color: #2ecc71;
    animation: progress-animation 5s linear infinite;
}
@keyframes progress-animation {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

/* Positioning for right button */
.button-container.level1 {
    left: 60px;
    top: calc(50% - 75px - 300px); /* Moves up further */
}

/* Positioning for left button */
.button-container.level2 {
    left: 220px;
    top: calc(50% - 75px - 100px); /* Moves down further */
}/* Positioning for right button */

.button-container.level3 {
    left: 60px;
    top: calc(50% - 75px + 100px); /* Moves up further */
}

/* Positioning for left button */
.button-container.level4 {
    left: 220px;
    top: calc(50% - 75px + 300px); /* Moves down further */
}