.quiz-app-container * {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif; 
            box-sizing: border-box;
        }

        .quiz-app-container body {
            
            background: #6b4bb7;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #E9E4F0, #D3CCE3);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



            /* background-color: #001e4d; */
        }


        .quiz-app-container .app {
            background: #a9ccff6f;
            width: 600px;
            margin: 100px auto 0;
            border-radius: 10px;
            padding: 15px;


        }

        .quiz-app-container .app #progress-container {
            max-width: 100%;
            height: 15px;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px auto;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            
        }

        .quiz-app-container #progress-bar {
            width: 0;
            height: 15px;
            background-color: #4caf50;
            border-radius: 5px;
            transition: width 0.4s ease;
            
        }

        .quiz-app-container .app h1 {
            font-size: 1.8rem;
            color: #001e4d;
            font-weight: 600;
            margin: 10px auto;
            
        }

        .quiz-app-container .quiz {
            padding: 15px 0;

        }

        .quiz-app-container .quiz h2 {
            color: #001e4d;
            font-weight: 600;
            
        }

        .quiz-app-container h2 {
            padding-top: 5px;
            font-size: 1.5rem;
        }

        .quiz-app-container .btn {
            background: #ffffffd0;
            color: #222;
            font-weight: 500;
            width: 100%;
            border: 1px solid #22222232;
            padding: 15px;
            margin: 15px 0;
            text-align: left;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 1.3rem;

        }

        .quiz-app-container .btn:hover:not([disabled]) {
            background: #216fff68;
            color: #ffffff;
        }

        .quiz-app-container .btn:disabled {
            cursor: no-drop;
        }

        .quiz-app-container #next-btn {
            background: #ccc;
            color: #666;
            font-weight: 500;
            font-size: 1.3rem;
            width: 250px;
            border: 0;
            padding: 15px;
            margin: 10px auto;
            border-radius: 4px;
            cursor: not-allowed;
            display: block;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }

        .quiz-app-container #next-btn:disabled {
            background: #ccc;
            color: #666;
            cursor: not-allowed;
        }

        .quiz-app-container #next-btn.correct {
            background: #4caf50;
            color: #fff;
            cursor: pointer;
        }

        .quiz-app-container #next-btn.incorrect {
            background: #f44336;
            color: #fff;
            cursor: pointer;
        }

        .quiz-app-container #next-btn.play-again {
            background: #001e4d;
            color: #fff;
            cursor: pointer;
            margin: 5px auto;

        }

        .quiz-app-container .correct {
            background: #9aeabc;
        }

        .quiz-app-container .correct.btn {
            animation: pulse 0.6s ease-in-out;
        }

        @keyframes quiz-app-pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .quiz-app-container .correct.btn {
            animation: quiz-app-pulse 0.6s ease-in-out;
        }

        .quiz-app-container .incorrect {
            background: #ff9393;
        }

        .quiz-app-container .incorrect.btn {
            animation: quiz-app-shake 0.4s ease-in-out;
        }

        @keyframes quiz-app-shake {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            50% {
                transform: translateX(5px);
            }

            75% {
                transform: translateX(-5px);
            }

            100% {
                transform: translateX(0);
            }
        }

        .quiz-app-container #question-info {
            font-size: 15px;
            padding-bottom: 5px;
            margin: 10px auto;
        }

       

        /* Styles for the summary section at the end of the quiz */
        .quiz-app-container .summary {
            background-color: #f9f9f9; /* Light background for each summary item */
            border: 1px solid #ddd;    /* Border around each summary item */
            border-radius: 15px;        /* Rounded corners */
            padding: 15px;             /* Padding inside each summary item */
            margin-bottom: 15px;       /* Space between summary items */
            text-align: left;          /* Align text to the left */
        }

        .quiz-app-container .summary h3 {
            font-size: 1rem;           /* Slightly smaller font for the question */
            color: #333;               /* Darker text color for the question */
            margin-bottom: 1rem;        /* Space below the question */
        }

        .quiz-app-container .summary p {
            font-size: 1rem;           /* Smaller font for answers */
            color: #555;               /* Medium-dark text color for answers */
            margin-bottom: 15px;        /* Space between answer lines */
        }


        /* Add these styles to your existing style.css file */

/* Start page styles */



.quiz-app-container #start-page {
    text-align: center;
    padding: 40px 20px;
    
}

.quiz-app-container #start-page h1 {
    margin-bottom: 10px;
    color: #333;
}

.quiz-app-container #start-page p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #666;
    line-height: 1.5;
}

.quiz-app-container .start-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.quiz-app-container .start-button:hover {
    background-color: #0056b3;
}

.quiz-app-container .start-button:active {
    transform: translateY(1px);
}

/* Hide quiz content initially */
.quiz-app-container #quiz-content {
    display: none;
}

.quiz-app-container #quiz-content img {
    width: 400px;
    height: auto;
    border-radius: 10%;
    margin: 5px auto;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}


.quiz-app-container .feedback {
    display: flex;
    justify-content: center;
    margin: 5px 0;
}

.quiz-app-container .right-feedback,
.quiz-app-container .wrong-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px;
}

.quiz-app-container .right-feedback {
    color: green;
    margin: 10px;
}

.quiz-app-container .wrong-feedback {
    color: rgba(255, 0, 0, 0.817);
   margin: 10px;
}

.quiz-app-container .feedback span {
    font-size: 1.4rem;
    font-weight: 600;
    vertical-align: middle;
}

.quiz-app-container .feedback svg {
    vertical-align: middle;
    height: 30px;
    width: 30px;

}


@media (max-width: 800px) {
  .quiz-app-container .app {
    
    width: 90vw !important;
    max-width: 90vw !important;
    
    margin: 10px auto!important;
    border-radius: 15px !important;
    padding: 15px 10px !important;
    box-sizing: border-box;
    
   
 

   
    
    
  }

  .quiz-app-container body, .quiz-app-container html {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }
  .quiz-app-container .app h1,
.quiz-app-container .quiz h2,
.quiz-app-container h2 {
    font-size: 1.5rem !important;
    margin: 10px 30px;
}



.quiz-app-container .btn,
.quiz-app-container #next-btn,
.quiz-app-container .start-button {
    font-size: 1rem !important;
    padding: 14px !important;
    
}

.quiz-app-container #start-page p,
.quiz-app-container #question-info,
.quiz-app-container .summary h3,
.quiz-app-container .summary p {
    font-size: 1rem !important;
}

.quiz-app-container .feedback span {
    font-size: 1rem !important;
}

.quiz-app-container #quiz-content img {
    
   
    max-width: 60% !important;
    height: auto;
    border-radius: 10%;
    margin: 20px auto;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.quiz-app-container .app #question-info {
    margin: 20px 30px;
    
}

.quiz-app-container .app #progress-container {
    margin: 20px 30px;
    
    max-width: 100%;
}

.quiz-app-container .app #progress-bar {
    width: 100wv;
    
    
}





.quiz-app-container .mobile-view{
    display: flex;
    flex-direction: space-between;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.quiz-app-container #next-btn {
    padding: 5px 5px;
    margin: 5px 5px;
}


.quiz-app-container #answer-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  margin: 10px 30px;
  box-shadow: 0 2px 4px auto;
  gap: 0 20px;
  
}

.quiz-app-container #answer-buttons .btn:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.quiz-app-container #answer-buttons .btn:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.quiz-app-container #answer-buttons .btn:nth-child(3) {
  grid-column: 2;
  grid-row: 1;
}

.quiz-app-container #answer-buttons .btn:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}



}

.quiz-app-container button#next-btn.play-again {

    background-color: rgb(255, 32, 69);
    margin: 30px auto;
}

.quiz-app-container .cross {
    color: red;
    font-weight: bold;
}

.quiz-app-container .circle {
    color: green;
    font-weight: bold;
}