/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/***************
 * CQC landing page *
 */

.span12.widget-span.widget-type-cell.cell_1758119127649-background-color.cell_1758119127649-background-layers.dnd-column, .span12.widget-span.widget-type-cell.cell_1758119721322-background-layers.cell_1758119721322-background-color.cell_1758119721322-padding.cell_1758119721322-margin.dnd-column, .span12.widget-span.widget-type-cell.cell_1758119725199-padding.cell_1758119725199-margin.cell_1758119725199-background-layers.cell_1758119725199-background-color.dnd-column, .span12.widget-span.widget-type-cell.cell_1758119730197-background-layers.cell_1758119730197-background-color.dnd-column.cell_1758119730197-margin.cell_1758119730197-padding, .span12.widget-span.widget-type-cell.cell_1758119736102-background-layers.cell_1758119736102-margin.cell_1758119736102-background-color.cell_1758119736102-padding.dnd-column {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 15px;
}






@media screen and (max-width: 1130px) { 
  h1 {
    font-size: 40px;
  }
}




/*****************************************/
/* Vantage compliance journey    */
/*****************************************/

/*****************************************/
/* Hero section    */
/*****************************************/

.fade-text {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.faded {
    opacity: 1;
}











/*****************************************/
/* Vantage compliance journey - END  */
/*****************************************/


<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">


 body {
            font-family: 'Poppins', sans-serif;
            margin: 20px;
            overflow-x: hidden;
            background-color: white;
        }
        #app {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;-
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            box-shadow: none; /* Removed drop shadow */
            border-radius: 12px;
        }
        #topic-container {
            margin-bottom: 5px;
            text-align: center;
            width: 100%;
            position: relative;
            height: 50px;
            overflow: hidden;
        }
        .topic-text {
            position: absolute;
            width: 100%;
            transition: all 0.5s ease-in-out;
            opacity: 1;
            font-size: 20px;
            color: #898a8c;
            font-weight: bold;
            margin-bottom: 10px;
        }
        #question-container {
            margin-bottom: 10px;
            text-align: center;
            position: relative;
            height: 100px;
            overflow: hidden;
            width: 100%;
        }
        .question-text {
            position: absolute;
            width: 100%;
            transition: all 0.5s ease-in-out;
            opacity: 1;
            font-size: 24px;
            word-wrap: break-word;
            color: #404040;
        }
        /* Keyframe Animations */
        @keyframes fadeOutLeft {
            0% {
                transform: translateX(0%);
                opacity: 1;
            }
            100% {
                transform: translateX(-100%);
                opacity: 0;
            }
        }

        @keyframes fadeInRight {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }
            100% {
                transform: translateX(0%);
                opacity: 1;
            }
        }

        /* Animation Classes */
        .slide-out {
            animation: fadeOutLeft 0.5s forwards;
        }
        .slide-in {
            animation: fadeInRight 0.5s forwards;
        }

        #slider-container {
            margin-bottom: 10px;
            position: relative;
            width: 100%;
        }
        #slider {
            width: 100%;
            height: 10px; /* Reduced height by half */
            -webkit-appearance: none;
            appearance: none;
            background: linear-gradient(to right, #fcb415, #fc7600);
            border: none; /* Removed border */
            border-radius: 10px;
            position: relative;
            transition: background 0.5s ease-in-out;
            margin: 15px 0;
        }
        /* Updated Slider Thumb: Square with Rounded Corners, Thick Border, and Slight Bulge */
        #slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 30px;
            height: 30px;
            background-color: white; /* Swapped colors: white inside */
            border-radius: 8px; /* More rounded corners */
            box-shadow:
                inset 0 0 0 6px #f9b513, /* Thicker orange border */
                0 0 5px rgba(0, 0, 0, 0.2); /* Slight bulge effect */
            cursor: pointer;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        #slider::-moz-range-thumb {
            width: 30px;
            height: 30px;
            background-color: white; /* Swapped colors: white inside */
            border-radius: 8px; /* More rounded corners */
            box-shadow:
                inset 0 0 0 6px #f9b513, /* Thicker orange border */
                0 0 5px rgba(0, 0, 0, 0.2); /* Slight bulge effect */
            cursor: pointer;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        /* Slider Track (Behind the Thumb) */
        #slider::-webkit-slider-runnable-track {
            height: 10px; /* Match the slider height */
            background: transparent;
            border: none;
        }
        #slider::-moz-range-track {
            height: 10px; /* Match the slider height */
            background: transparent;
            border: none;
        }
        .slider-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            width: 100%;
        }
        .slider-labels span {
            font-size: 16px; /* Increased font size */
            text-align: center;
            width: 20%;
            color: #404040;
            font-weight: bold; /* Increased font weight */
            line-height: 1.2; /* Slightly increased line height for closer words */
        }
        /* Button Styling */
        #next-button,
        #download-button {
            display: block;
            margin: 0 auto;
            margin-top: 5px;
            padding: 11px 23px;
            background-color: #e9680a;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease;
            text-align: center;
        }
        #next-button:hover,
        #download-button:hover {
            background-color: #898a8c;
        }
        #chart-container {
            width: 100%;
            max-width: 600px;
            margin: 20px auto 0 auto;
            height: 400px;
            overflow: visible;
            display: none;
        }
        /* Styles for Interpretation Paragraph */
        #interpretation {
            margin-top: 20px;
            font-size: 16px;
            line-height: 1.6;
            color: #404040;
            max-width: 600px;
            text-align: left;
            display: none;
        }
        #interpretation h2 {
            font-size: 20px;
            margin-top: 20px;
            margin-bottom: 10px;
            color: #404040;
            font-weight: bold;
        }
        #interpretation p {
            margin-bottom: 10px;
        }
        /* Adjusted link styles within interpretation to avoid affecting the download button */
        #interpretation p a {
            color: #e9680a;
            text-decoration: none;
            font-weight: bold;
        }
        #interpretation p a:hover {
            text-decoration: underline;
        }
        @media screen and (max-width: 600px) {
            #chart-container {
                width: 100%;
                height: 300px;
            }
            .topic-text {
                font-size: 18px;
            }
            .question-text {
                font-size: 20px;
            }
            #app {
                padding: 0 10px;
            }
            #interpretation h2 {
                font-size: 18px;
                margin-top: 15px;
            }
            #interpretation p {
                font-size: 14px;
            }
            .slider-labels span {
                font-size: 14px; /* Increased font size for mobile */
                font-weight: bold; /* Increased font weight for mobile */
                line-height: 1.2; /* Slightly increased line height for closer words on mobile */
            }
            #slider::-webkit-slider-thumb,
            #slider::-moz-range-thumb {
                width: 25px;
                height: 25px;
                background-color: white; /* Swapped colors: white inside */
                border-radius: 8px; /* More rounded corners for smaller thumb */
                box-shadow:
                    inset 0 0 0 4px #f9b513, /* Adjusted thicker orange border */
                    0 0 3px rgba(0, 0, 0, 0.2); /* Slight bulge effect for smaller thumb */
            }
            #slider {
                margin: 10px 0;
            }
          
          
          
          
          .button.button--secondary, .hs-delete-data__button, .hs-download-data__button {
            font-size: 14px;
          }
          h3 {
            font-size: 20px;
          }
          h1 {
            font-size: 30px;
            line-height: 30px;
        }
          h2 {
            font-size: 25px;
            line-height: 30px;
          }
          div#hs_menu_wrapper_widget_1731939620414_ {
            text-align: center;
          }
          div#hs_menu_wrapper_widget_1731939624418_ {
            text-align: center;
          }
          
          
          
          
        }