@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');


 body {
     margin: 0;
     font-family: Arial, sans-serif;
     background-color: #011425;
     color: #FFFFFF;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #toggle {
     display: none;
 }

 .toggle-btn {
     position: fixed;
     top: 30px;
     left: 25px;
     width: 30px;
     height: 25px;
     cursor: pointer;
     z-index: 1001;
 }

 .toggle-btn span {
     display: block;
     height: 4px;
     background: #8fd8ee;
     margin: 5px 0;
     border-radius: 2px;
     transition: 0.3s;
 }

 /* Sidebar */
 .sidebar {
     width: 220px;
     background-color: #1F4959;
     min-height: 100vh;
     padding: 20px 10px;
     position: fixed;
     top: 0;
     left: -240px;
     transition: 0.3s ease;
     z-index: 1000;
     margin-top: 20px;

 }

 .sidebar h2 {
     text-align: center;
     margin-bottom: 30px;
     font-size: 20px;
     color: #FFFFFF;
 }

 .sidebar a {
     display: block;
     padding: 12px;
     margin: 10px 0;
     border-radius: 8px;
     text-decoration: none;
     color: #FFFFFF;
     background-color: #3f6674;
     transition: 0.3s ease, transform 0.2s ease;
     text-align: center;
 }

 .sidebar a:hover {
     background-color: #242424;
     transform: scale(1.05);
 }

 #toggle:checked~.sidebar {
     left: 0;
 }

 #toggle:checked~.content {
     margin-left: 240px;
 }

 .content {
     margin-left: 0;
     padding: 20px;
     width: 100%;
     transition: margin-left 0.3s ease;

 }

 section {
     min-height: 90vh;
     padding: 40px;
     margin: 30px auto;
     width: 70vw;
     background-color: #1F4959;
     border-radius: 12px;
     box-shadow: 0 0 10px rgba(150, 208, 231, 0.5);
     transition: transform 0.3s ease;
     text-align: center;
     color: #FFFFFF;
     padding-top: 100px;
     margin-top: 0;
     padding-top: 20px;
 }


 #home {
     min-height: 90vh;
     padding: 40px;
     margin: 30px auto;
     width: 70vw;
     background-color: #1F4959;
     border-radius: 12px;
     box-shadow: 0 0 10px rgba(150, 208, 231, 0.5);
     transition: transform 0.3s ease;
     text-align: center;
     color: #FFFFFF;
     padding-top: 100px;
     margin-top: 90px;
     padding-top: 20px;
 }

 section:hover,
 #home:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);
 }

 h1,
 h2 {
     text-align: center;
     margin-bottom: 20px;
     color: #FFFFFF;
 }

 #page2 h2,
 #page3>h2,
 #page4>h2,
 #page5>h2,
 #page6>h2,
 #page7>h2,
 #page10>h2,
 #page8>h2,
 #page11>h2 {
     font-size: 2em;
     color: #96d0e7;
     text-shadow: 0 0 10px #242424;
     animation: glowHeading 2s infinite alternate;
     margin-top: 80px;
 }

 @keyframes glowHeading {
     from {
         text-shadow: 0 0 5px #5C7C89
     }

     to {
         text-shadow: 0 0 20px #3382b6
     }
 }


 .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 30px;
    width: 100%;
    margin: 10px auto;
    z-index: 2;
    position: relative;
    justify-items: center;
}

.card {
    width: 130px;
    height: 80px;
     background: linear-gradient(135deg, #5C7C89, #2a6076);
    border: 2px solid #407489;
    border-radius: 16px; 
    transform: none; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(48, 87, 104, 0.4);
    cursor: pointer;
    padding: 15px;
    text-align: center;
}

.card span {
    transform: none; 
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 0 5px #18404d;
}

.card:hover {
    background: #1f6475;
    transform: translateY(-5px) scale(1.05); 
    box-shadow: 0 8px 20px rgba(150, 208, 231, 0.6);
}



 .game-btn {
     display: block;
     margin: 20px auto;
     padding: 12px 20px;
     border: none;
     border-radius: 8px;
     background-color: #497688;
     color: #FFFFFF;
     font-size: 15px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s ease, transform 0.2s ease;
 }

 .game-btn:hover {
     background-color: #106779;
     transform: scale(1.05);
 }

 footer {
     text-align: center;
     padding: 20px;
     background-color: #1F4959;
     border-radius: 12px;
     margin-top: 40px;
     color: #FFFFFF;
 }

 #board {
     display: grid;
     grid-template-columns: repeat(3, 130px);
     gap: 5px;
     justify-content: center;
     margin-bottom: 50px;
 }

 .cell {
     width: 130px;
     height: 120px;
     border: 2px solid #5C7C89;
     font-size: 2em;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     background: linear-gradient(135deg, #5C7C89, #1F4959);
     color: #FFFFFF;
     animation: glowy 3s infinite alternate-reverse;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     transition: transform 0.7s ease;
 }

 .cell:hover {
     transform: scale(1.05);
     background: #1a4b4e;
 }

 @keyframes glowy {
     from {
         box-shadow: 0 0 8px #5C7C89;
     }

     to {
         box-shadow: 0 0 25px #242424;
     }
 }

 #msg {
     margin: 15px;
     font-size: 1.3em;
     color: #a5f3ed;
     margin-bottom: 40px;
 }

 .winText {
     font-size: 1.9em;
     font-weight: bold;
     color: #25867e;
     animation: poppy 1s infinite alternate;
     text-shadow: 0 0 10px #242424;
 }

 .winBox {
     background: #1a323b !important;
     color: #c9ddee !important;
     animation: glow 1s infinite alternate;
 }

 @keyframes poppy {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(2.0);
     }
 }

 @keyframes glow {
     from {
         box-shadow: 0 0 10px #5C7C89;
     }

     to {
         box-shadow: 0 0 25px #FFFFFF;
     }
 }

 .quiz-container {
     background: linear-gradient(135deg, #0e435c, #1F4959);
     padding: 25px;
     border-radius: 15px;
     box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);
     max-width: 500px;
     width: 100%;
     text-align: center;
     color: #FFFFFF;

 }

 .quiz {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 50px;
 }

 .quiz-btn {
     display: block;
     margin: 10px auto;
     padding: 16px;
     margin-top: 20px;
     width: 80%;
     border-radius: 8px;
     border: none;
     background: linear-gradient(135deg, #3d7388, #2e5869);
     color: #FFFFFF;
     cursor: pointer;
     font-size: 17px;
     font-weight: 600;
     transition: 0.3s all;
 }

 .quiz-btn:hover {
     background: #183238;
     box-shadow: 0 6px 8px rgba(92, 124, 137, 0.9);
 }



 .converter {
     background: linear-gradient(135deg, #0e435c, #1F4959);
     padding: 30px;
     border-radius: 20px;
     box-shadow: 0 10px 25px rgba(92, 124, 137, 0.6);
     width: 500px;
     text-align: center;
 }

 .conbtn {
     background: linear-gradient(135deg, #5C7C89, #1F4959);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 12px 20px;
     cursor: pointer;
     background: linear-gradient(135deg, #497688, #106779);
     font-weight: 600;
     transition: all 0.3s ease;

 }

 .conbtn:hover {
     background: #106779;
     transform: translateY(-2px);
 }

 .input-group {
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;
     gap: 15px;
     color: white;
 }

 input,
 select {
     padding: 12px;
     font-size: 16px;
     border-radius: 8px;
     border: none;
     box-shadow: 0 0 5px #86c2da;
     background: linear-gradient(135deg, #3d7388, #2e5869);
     color: white;
     transition: all 0.3s ease;
     height: 40px;
     text-align: center;
 }

 .currbox {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 50px;
 }

 .conresult {
     margin-top: 20px;
     color: #a3eaf8;
     animation: popp 9s alternate;

 }

 @keyframes popp {
     from {
         transform: scale(0.8);
         opacity: 0.8;
     }

     to {
         transform: scale(1.5);
         opacity: 1;
     }
 }


 input:hover,
 select:hover {
     background: #183238;
     box-shadow: 0 0 10px #5C7C89;
 }

 ::placeholder {
     color: #eef2f3f8;
 }

 .intro-text {
     margin-top: 1px;
     text-align: center;
     padding: 5px;
     animation: fadeInUp 3s ease alternate infinite;
     gap: 30px;
     animation: pop 4s ease alternate infinite;
 }

 .intro-text:hover {
     animation: fadeInUp 3s ease alternate;
     font-size: 1.0em;
 }

 .intro-text h4 {
     color: #bbe1f0;
     font-weight: 600;
     margin-bottom: 10px;
     font-size: 1.1em;

 }

 .intro-text h2 span {
     color: #d6e4e9;
     font-size: 1.3em;
     margin-bottom: 10px;

 }

 .intro-text p {
     color: #cdf2fc;
     line-height: 1.5;
     font-size: large;

     margin-bottom: 10px;
     margin-top: 10px;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes pop {
     from {
         transform: scale(0.5);
         opacity: 0.8;
     }

     to {
         transform: scale(0.9);
         opacity: 1;
     }
 }



 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 30px;
     background: linear-gradient(135deg, #1F4959, #1F4959);
     color: white;
     position: fixed;
     top: 0;
     left: 0;
     width: 95%;
     height: 60px;
     z-index: 1000;
     border-radius: 0 0 10px 10px;
 }


 header img {
     height: 170px;
     margin-left: 40px;
 }

 .signout-btn {
     background: #4c89a5;
     color: rgb(231, 234, 235);
     padding: 10px 20px;
     border: none;
     border-radius: 20px;
     font-size: 16px;
     cursor: pointer;
     transition: 0.3s ease;

 }

 .signout-btn:hover {
     background: #62c0c7;
 }

 .hero {
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     color: white;
     padding: 1px;
     margin-top: 100px;
     width: 100vw;
 }

 .hero h1 {
     transform: translateY(30px);
     font-size: 2.5em;
     font-style: bold;
     color: #b1ddee;
     text-shadow: 0 0 10px #242424;
     font-family: 'Times New Roman', Times, serif;
     animation: fadeInUp 1s ease forwards, glowHeading 2s infinite alternate;
     margin-bottom: 20px;
     margin-top: 20px;
 }

 .hero p {
     font-size: 1.2em;
     color: #96d0e7;
     text-shadow: 0 0 10px #242424;
     font-family: 'Times New Roman', Times, serif;

     animation: fadeInUp 1s ease forwards, glowHeading 2s infinite alternate;
 }

 .hero .overlay {
     margin-bottom: 60px;

 }

 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes glowHeading {
     from {
         text-shadow: 0 0 5px #5C7C89;
     }

     to {
         text-shadow: 0 0 20px #3382b6;
     }
 }


 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInDown {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }






 /* Weather App Container */

 #page5 h2 {
     margin-top: 120px;
 }

 .weatherAppContainer {
     width: 70%;
     margin: 0 auto;
     padding: 20px;
     background: linear-gradient(135deg, #0e435c, #1F4959);
     border-radius: 12px;
     box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);
     margin-top: 10px;
 }

 .weatherAppContainer h2 {
     margin-bottom: 15px;
     color: #333333;
     margin-top: 10px;

 }

 .weatherAppContainer p {
     margin-bottom: 10px;
     color: #53cfd8;
 }

 #weatherForm {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 25px;
     margin-top: 40px;
 }

 #cityInput {
     width: 70%;
     padding: 12px;
     font-size: 16px;
     border-radius: 8px;
     border: none;
     background: #2e5869;
     color: #ffffff;
     text-align: center;
     box-shadow: 0 0 5px #7ea4b3;
     transition: all 0.3s ease;
 }

 #weatherForm button {
     padding: 12px 20px;
     border: none;
     border-radius: 8px;
     background: linear-gradient(135deg, #497688, #106779);
     color: #ffffff;
     cursor: pointer;
     font-weight: 600;
     transition: all 0.3s ease;
     display: flex;
     justify-content: center;
     align-items: center;
 }


 #weatherForm button:hover {
     background: #327777;

 }

 #weatherResult {
     margin-top: 0px;
     padding: 15px;
     color: white;
     border-radius: 8px;
     width: 100%;
     box-sizing: border-box;
     text-align: center;
     justify-content: center;
     align-items: center;
     display: flex;
 }


 .weather-card {
     background: #2e677c;
     padding: 20px;
     border-radius: 15px;
     box-shadow: 0 5px 10px rgba(70, 108, 122, 0.8);
     color: #ffffff;
     text-align: left;
 }

 .weather-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
 }

 .weather-header h2 {
     font-size: 1.5rem;
     color: #bbe1f0;
     margin-bottom: 5px;
     margin-left: 80px;
 }

 .weather-header p,
 #todo-container p,
 #page4 p {
     font-size: 1rem;
     color: #96d0e7;
     text-transform: capitalize;
     margin-bottom: 20px;
 }

 .temp-info {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 20px;
     font-size: 2.5rem;
     margin-top: 10px;
     margin-left: 10px;
 }

 .temp-details {
     display: flex;
     margin-left: 40px;
     gap: 25px;
     font-size: 1.2rem;
     color: #d6e4e9;
 }

 .extra-info {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     margin-top: 15px;
 }

 .extra-info div {
     padding: 8px;
     border-radius: 10px;
     background: #175168;
     text-align: center;
     color: #cfe5f3;
     font-size: 0.9rem;
 }

 .weather-card footer {
     margin-top: 15px;
     text-align: center;
     font-size: 0.8rem;
     color: #bbe1f0;
     background: #2e677c;

 }

 .wi {
     margin-bottom: 40px;
     font-size: 6rem;
     color: #1e90ff;
 }

 #todo-container {
     max-width: 600px;
     width: 90%;
     background: linear-gradient(135deg, #0e435c, #1F4959);
     padding: 25px;
     border-radius: 15px;
     box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);
     text-align: center;
     color: #ffffff;
     margin: 50px auto;
 }

 #todo-input-field {
     width: 70%;
     padding: 12px;
     font-size: 16px;
     border-radius: 8px;
     border: none;
     background: #2e5869;
     color: #ffffff;
     text-align: center;
     box-shadow: 0 0 5px #7ea4b3;
     transition: all 0.3s ease;
     margin-top: 40px;
 }

 #todo-save-btn {
     padding: 12px 20px;
     border: none;
     border-radius: 8px;
     background: linear-gradient(135deg, #497688, #106779);
     color: #ffffff;
     cursor: pointer;
     font-weight: 600;
     transition: all 0.3s ease;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 40px;
     margin-left: 41%;
     width: 100px;
 }

 #todo-save-btn:hover {
     background: #327777;
 }

 #todo-input-list {
     list-style: none;
     padding: 0;
     margin: 20px auto;
     max-width: 400px;
 }

 .todo-list-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #549b9b;
     padding: 10px;
     border-radius: 5px;
     margin-bottom: 10px;
     color: white;
     text-align: left;
 }

 .todo-actions {
     display: flex;
     gap: 5px;
 }

 .todo-actions button {
     padding: 5px 8px;
     border: none;
     border-radius: 3px;
     cursor: pointer;
     background: #1c5757;
     color: white;
 }

 .todo-actions button:hover {
     background: #003333;
 }

 .todo-edit-input {
     flex: 1;
     padding: 5px 8px;
     border-radius: 3px;
     border: none;
 }





 #page7 {


     .calcontain {
         justify-content: center;
         align-items: center;
         display: flex;
     }

     .calculator {
         padding: 20px;
         border-radius: 15px;
         margin-top: 40px;
         background: linear-gradient(135deg, #0e435c, #1F4959);
         width: 30vw;
         justify-content: center;
         align-items: center;
         display: block;
         box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);


     }

     input {

         width: 370px;
         background: #2e5869;
         color: rgb(244, 248, 250);
         padding: 20px;
         box-shadow: 0px 2px 5px rgb(57, 126, 122);
         border-radius: 20px;
         text-align: right;
         cursor: pointer;
         font-size: 40px;
         margin-bottom: 20px;
     }

     input::placeholder {
         color: white;
     }

     button {
         margin-top: 50px;
         border: none;
         width: 65px;
         height: 65px;
         margin: 10px;
         font-size: 30px;
         margin-left: 14px;
         padding: 10px;
         border-radius: 50px;
         background-color: #3d707a;
         color: white;
         box-shadow: -2px -1px 10px rgb(46, 89, 109);
         cursor: pointer;
     }

     button:hover {
         background-color: rgb(126, 201, 224);
         transform: scale(1.1);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         color: black;
     }

     button:active {
         transform: scale(1.1);
         box-shadow: none;
     }

     button:disabled {
         background-color: #ddd;
     }

     .bottom {
         background-color: #3d707a;
     }

     .myclass {
         background: rgb(57, 127, 150);
     }

     .class {
         background: rgb(57, 127, 150);
     }

     .yourclass {
         background: rgb(57, 127, 150);

     }
 }







 .container-vertical {
     display: flex;
     flex-direction: column;
     gap: 70px;
     align-items: center;
     margin-top: 80px;
 }

 .stopwatch-box,
 .clock-box {
     position: relative;
     width: 300px;
     height: 30vh;
     box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);

     padding: 15px;
     background: linear-gradient(135deg, #0e435c, #1F4959);
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 12px;
 }

 .stopwatch-box::before,
 .clock-box::before {
     content: '';
     position: absolute;
     top: -3px;
     left: -3px;
     right: -3px;
     bottom: -3px;
     background: linear-gradient(135deg, #a2bebc, #3bd8ff, #8eddeb);
     border-radius: 15px;
     z-index: -1;
     filter: blur(10px);
     animation: animate 2s linear infinite;
 }

 .display {
     text-align: center;
     margin-top: 10px;
 }

 #time,
 #stopwatch {
     font-size: 36px;
     font-weight: bold;
     background: linear-gradient(135deg, #84cfc8, #6db7bd, #8ad8da);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: animate 2s linear infinite;
 }

 .controls {
     margin-top: 10px;
     display: flex;
     justify-content: center;
     gap: 10px;
 }

 .controls button {
     padding: 5px 12px;
     border: none;
     border-radius: 5px;
     background: #2d6064;
     color: white;
     cursor: pointer;
     margin-top: 10px;
     transition: 0.3s;
 }

 /* Button hover effect */
 .controls button:hover {
     background: #555;
 }

 /* Hue rotation animation */
 @keyframes animate {
     100% {
         filter: hue-rotate(360deg);
     }
 }



 #page10 {
     height: 95vh;
 }




 /* Card styling */
 #page10 .card {
     display: flex;
     flex-direction: column;
     gap: 16px;
     width: 70%;
     padding: 10px;
     border-radius: 16px;
     background: linear-gradient(135deg, #0e435c, #1F4959);
     height: 76%;
     transform: none;
     border: none;
     box-shadow: #052127;
     margin-bottom: 200px;
     margin-left: 125px;
     align-items: center;
     justify-content: center;
 }

 #page10 .controls {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     margin-top: 10px;
     align-items: center;
     justify-content: center;
 }

 #page10 .stats {
     display: flex;
     gap: 20px 50px;
     flex-wrap: wrap;
     margin-top: 80px;
     text-align: center;
     align-items: center;
     justify-content: center;

 }

 #page10 .stat {
     background: #215569;
     border: 1px solid #2c4d53;
     border-radius: 8px;
     color: #d9f0f5;
     text-align: center;
     box-shadow: 0 0 5px #7ea4b3;
     margin-top: 1px;
     width: 10vw;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 13vh;
     transform: none;
 }

 #page10 .stat strong {
     font-size: 14px;
     margin-bottom: 6px;
     color: #e1faff;
     transform: none;
     font-weight: normal;
 }

 #page10 .stat span {
     font-size: 22px;
     color: #8dd4e0;
     transform: none;
 }



 #page10 textarea {
     width: 75%;
     min-height: 10px;
     margin-top: 1px;
     border-radius: 8px;
     font-size: 15px;
     line-height: 1.9;
     background: #2e5869;
     box-shadow: 0 0 5px #7ea4b3;
     color: white;
     border: none;
     font-family: 'Times New Roman', Times, serif;
     text-align: center;
 }

 #page10 textarea:hover {
     background-color: #106779;
     font-size: 1.1em;
 }

 #page10 .lang-select {
     padding: 6px;
     border-radius: 6px;
     border: 1px solid #3e8f85;
     margin-left: 200px;
     font-size: 14px;
     background-color: #106779;
     height: 50px
 }

 #page10 .btn {
     cursor: pointer;
     border: none;
     border-radius: 8px;
     font-weight: 600;
     transition: 0.2s;
     border: 1px solid #3e8f85;
     box-shadow: 0 0 5px #7ea4b3;
     gap: 70px;
     height: 50px;
     width: 100px;
     background-color: #106779;
 }

 #page10 .btn.secondary {
     background: #397483;
     color: #fff;
     gap: 30px;
 }

 #page10 .btn:not(.secondary) {
     background: #397483;
     color: #fff;
     gap: 30px;

 }

 /* Hover effects */
 #page10 .btn:hover {
     opacity: 0.9;
     background-color: #106779;
 }

 /* Responsive for mobile */
 @media (max-width: 500px) {

     #page10 .controls,
     #page10 .stats {
         flex-direction: column;
         gap: 16px;
     }
 }





 .mycaptcha-container {
     display: inline-block;
     background: linear-gradient(135deg, #0e435c, #1F4959);
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 8px 16px rgba(92, 124, 137, 0.8);
     width: 40vw;
     margin-top: 50px;
     height: 40vh;
     gap: 90px;
 }

 .mycaptcha-box {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 24px;
     letter-spacing: 4px;
     font-weight: bold;
     background: #306c70;
     box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);

     padding: 10px;
     margin-left: 130px;
     border-radius: 8px;
     margin-bottom: 15px;
     user-select: none;
     width: 50%;
     margin-top: 20px;
 }

 .mycaptcha-input {
     padding: 8px;
     width: 150px;
     font-size: 16px;
     border: 1px solid #999;
     border-radius: 5px;
     margin-bottom: 10px;
     margin-top: 20px;
     background: #2e5869;


 }

 .mycaptcha-btn {
     display: inline-block;
     padding: 10px 20px;
     font-size: 16px;
     border: none;
     border-radius: 5px;
     background: #296870;
     color: white;
     cursor: pointer;
     transition: 0.3s;
     margin: 5px;
     margin-top: 20px;

 }

 .mycaptcha-btn:hover {
     background: #357abd;
 }

 .mycaptcha-message {
     margin-top: 15px;
     font-weight: bold;
 }

 .mycaptcha-success {
     color: green;
 }

 .mycaptcha-error {
     color: red;
 }




 #page8 {
     .container {
         width: 550px;
         height: 600px;
         padding: 25px 30px;
         overflow: hidden;
         position: relative;
         border-radius: 20px;
         background: linear-gradient(135deg, #0e435c, #1F4959);
         box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);
         margin: 0 auto;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.1);
         margin-top: 80px;
     }

     .container i {
         cursor: pointer;
     }

     .top-bar,
     .progress-area .song-timer,
     .controls,
     .music-list .header,
     .music-list ul li {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .top-bar i {
         font-size: 32px;
         color: #ffffffc0;
         text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         padding: 8px;
         border-radius: 50%;
         background: rgba(191, 236, 240, 0.295);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }

     .top-bar i:hover {
         transform: scale(1.15);
         opacity: 1;
         background: rgba(255, 255, 255, 0.2);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     }

     .top-bar i:first-child {
         margin-left: -7px;
         font-size: 26px;
     }

     .top-bar span {
         font-size: 30px;
         margin-left: -3px;
         color: #89eff3;
         font-weight: 600;
         text-shadow: 0 2px 6px rgba(140, 215, 218, 0.4);
         letter-spacing: 0.5px;
     }

     .img-area {
         width: 40%;
         height: 35%;
         overflow: hidden;
         margin-top: 25px;
         border-radius: 50%;
         margin-left: 28%;
         object-fit: fill;
         box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         border: 4px solid rgba(65, 109, 121, 0.8);
     }

     .img-area:hover {
         transform: scale(1.03);
         box-shadow:
             0 0 0 7px rgba(44, 118, 121, 0.35),
             0 20px 50px rgba(0, 0, 0, 0.5),
             0 0 0 1px rgba(93, 179, 185, 0.25) inset,
             inset 0 0 40px rgba(77, 199, 189, 0.2);
     }

     .img-area img {
         width: 100%;
         height: 100%;
         object-fit: cover;

     }

     .song-details {
         text-align: center;
         margin: 30px 0;
         padding: 0 15px;
         text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }

     .song-details p {
         color: #b3e9e6;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         margin: 10px 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         transition: all 0.3s ease;
     }

     .song-details .name {
         font-size: 24px;
         font-weight: 700;
         letter-spacing: 0.5px;
         background: linear-gradient(to right, #468885, #325f61);
         background-clip: text;
     }

     .song-details .artist {
         font-size: 17px;
         opacity: 0.9;
         line-height: 1.5;
         font-weight: 500;
     }

     .progress-area {
         height: 6px;
         width: 100%;
         border-radius: 3px;
         background: rgba(255, 255, 255, 0.2);
         cursor: pointer;
         margin: 25px 0;
         box-shadow:
             0 1px 2px rgba(0, 0, 0, 0.2),
             inset 0 1px 1px rgba(255, 255, 255, 0.1);
         transition: all 0.3s ease;
         backdrop-filter: blur(1px);
         border: 1px solid rgba(255, 255, 255, 0.05);
     }

     .progress-area:hover {
         background: rgba(255, 255, 255, 0.3);
         transform: scaleY(1.1);
         box-shadow:
             0 2px 4px rgba(0, 0, 0, 0.3),
             inset 0 1px 1px rgba(255, 255, 255, 0.2);
     }

     .progress-area .progress-bar {
         height: inherit;
         width: 0%;
         position: relative;
         border-radius: inherit;
         background: linear-gradient(to right, #8dc2bf, #86f9ff);
         box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);

         transition: 0.1s linear;
     }

     .progress-bar::before {
         content: "";
         position: absolute;
         height: 16px;
         width: 16px;
         border-radius: 50%;
         top: 50%;
         right: -8px;
         z-index: 2;
         opacity: 0;
         pointer-events: none;
         transform: translateY(-50%);
         background: #ffffff;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);

     }

     .progress-area:hover .progress-bar::before {
         opacity: 1;
         pointer-events: auto;
         transform: translateY(-50%) scale(1.2);
     }

     .progress-area .song-timer {
         margin-top: 10px;
         display: flex;
         justify-content: space-between;
     }

     .song-timer span {
         font-size: 15px;
         color: rgba(255, 255, 255, 0.95);
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
         font-weight: 600;
         letter-spacing: 0.5px;
     }

     .controls {
         margin: 25px 0;
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 30px;
     }

     .controls i {
         font-size: 32px;
         user-select: none;
         color: #ffffff;
         cursor: pointer;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         padding: 12px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 30px;
         height: 30px;
         background: rgba(255, 255, 255, 0.15);
         box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);

         backdrop-filter: blur(5px);
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .controls i:hover {
         transform: scale(1.15);
         text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
         background: rgba(255, 255, 255, 0.25);
         box-shadow:
             0 6px 12px rgba(0, 0, 0, 0.3),
             inset 0 0 0 1px rgba(255, 255, 255, 0.2);
         z-index: 2;
     }

     .controls i:active {
         transform: scale(0.95);
         background: rgba(255, 255, 255, 0.35);
         box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);

     }

     .controls #repeat-plist,
     .controls #more-music {
         background: rgba(56, 86, 92, 0.438);
         color: white;
         text-shadow: none;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .controls #repeat-plist:hover,
     .controls #more-music:hover {
         background: rgba(56, 86, 92, 0.438);
         color: white;
         transform: scale(1.15);
         z-index: 2;
     }

     .controls #repeat-plist:active,
     .controls #more-music:active {
         background: rgba(255, 255, 255, 0.35);
         transform: scale(0.95);
     }

     .controls i:nth-child(1),
     .controls i:nth-child(5) {
         font-size: 36px;
     }

     .controls i:nth-child(2),
     .controls i:nth-child(4) {
         font-size: 56px;
     }

     .controls #prev {
         margin-right: 0;
     }

     .controls #next {
         margin-left: 0;
     }

     .controls i.prev {
         font-size: 46px;
     }

     .controls i.next {
         font-size: 46px;
     }

     .controls .play-pause {
         height: 65px;
         width: 65px;
         display: flex;
         cursor: pointer;
         align-items: center;
         justify-content: center;
         border-radius: 50%;

         background: linear-gradient(135deg, #1c5055, #225357);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         z-index: 2;

     }

     .controls .play-pause:hover {
         transform: scale(1.10);
         box-shadow:
             0 10px 20px rgba(0, 0, 0, 0.5),
             0 0 0 3px rgba(255, 255, 255, 0.4),
             inset 0 0 0 1px rgba(255, 255, 255, 0.5);
         background: linear-gradient(135deg, #78c8ec, #3585ff);
     }




     .play-pause:hover::before {
         border-width: 3px;
         border-color: rgba(255, 255, 255, 0.8);
     }

     .play-pause i {
         height: 56px;
         width: 56px;
         line-height: 56px;
         text-align: center;
         color: rgb(142, 226, 241);
         position: absolute;
         font-size: 42px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .prev,
     .next {
         background: rgba(255, 255, 255, 0.15);
         border-radius: 50%;
         width: 58px;
         height: 58px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow:
             0 5px 10px rgba(0, 0, 0, 0.25),
             0 0 0 1px rgba(255, 255, 255, 0.15),
             inset 0 0 0 1px rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(3px);
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .prev:hover,
     .next:hover {
         background: rgba(255, 255, 255, 0.25);
         transform: scale(1.15);
         box-shadow:
             0 7px 14px rgba(0, 0, 0, 0.35),
             0 0 0 1px rgba(255, 255, 255, 0.25),
             inset 0 0 0 1px rgba(255, 255, 255, 0.2);
         z-index: 2;
     }

     .prev:active,
     .next:active {
         background: rgba(255, 255, 255, 0.35);
         transform: scale(0.95);
         box-shadow:
             0 3px 6px rgba(0, 0, 0, 0.2),
             0 0 0 1px rgba(255, 255, 255, 0.2),
             inset 0 0 0 1px rgba(255, 255, 255, 0.15);
     }

     .container:not(.paused) .play-pause {
         animation: pulse 2s infinite;
     }

     @keyframes pulse {
         0% {
             box-shadow:
                 0 8px 16px rgba(0, 0, 0, 0.4),
                 0 0 0 3px rgba(255, 255, 255, 0.25),
                 inset 0 0 0 1px rgba(255, 255, 255, 0.3);
             transform: scale(1);
         }

         50% {
             box-shadow:
                 0 8px 20px rgba(0, 0, 0, 0.5),
                 0 0 0 6px rgba(255, 255, 255, 0.35),
                 inset 0 0 0 1px rgba(255, 255, 255, 0.4);
             transform: scale(1.05);
         }

         100% {
             box-shadow:
                 0 8px 16px rgba(0, 0, 0, 0.4),
                 0 0 0 3px rgba(255, 255, 255, 0.25),
                 inset 0 0 0 1px rgba(255, 255, 255, 0.3);
             transform: scale(1);
         }
     }

     .music-list {
         position: absolute;
         bottom: -55%;
         opacity: 0;
         pointer-events: none;
         box-shadow:
             0px -5px 15px rgba(0, 0, 0, 0.2),
             0 0 0 1px rgba(255, 255, 255, 0.1) inset;
         z-index: 5;
         padding: 15px 30px;
         border-radius: 15px;
         background: linear-gradient(#5da8ad 0%, #357b85 90%);
         background-blend-mode: screen;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.1);

         /* center the box */
         left: 50%;
         transform: translateX(-50%);
         width: 80%;
         /* default width when hidden */
         max-width: 500px;
         /* optional cap so it doesn't get too big */
     }

     .music-list.show {
         bottom: 0;
         opacity: 1;
         pointer-events: auto;
         box-shadow:
             0px -10px 25px rgba(0, 0, 0, 0.3),
             0 0 0 1px rgba(255, 255, 255, 0.2) inset;

         width: 80%;
         max-width: 500px;
     }


     .music-list ul {
         margin: 10px 0;
         max-height: 260px;
         overflow-y: auto;
         width: 100%;
         padding-right: 5px;
     }

     .music-list ul li {
         list-style: none;
         display: flex;
         cursor: pointer;
         padding: 12px 0;
         margin-bottom: 8px;
         color: #032730;
         border-bottom: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 8px;
         transition: all 0.3s ease;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }

     .music-list ul li:last-child {
         border-bottom: 0px;
     }

     .music-list ul li:hover {
         background: rgba(255, 255, 255, 0.15);
         transform: translateX(5px);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }

     .music-list ul li .row span {
         font-size: 18px;
         font-weight: 500;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     }

     .music-list ul li .row p {
         opacity: 0.8;
         font-size: 15px;
         margin-top: 3px;
         margin-left: 20px;
     }

     ul li .audio-duration {
         font-size: 17px;
         font-weight: 500;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     }

     ul li.playing {
         pointer-events: none;
         color: #ffd9f2;
         background: rgba(255, 255, 255, 0.2);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }

     .header .row {
         display: flex;
         align-items: center;
         font-size: 20px;
         color: #ffffff;
         font-weight: 600;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     }

     .header .row i {
         cursor: default;
     }

     .header .row span {
         margin-left: 5px;
     }

     .header #close {
         font-size: 24px;
         color: #ffffff;
         padding: 8px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.15);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         transition: all 0.3s ease;
     }

     .header #close:hover {
         background: rgba(255, 255, 255, 0.25);
         transform: scale(1.1);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     }

     .music-list ul::-webkit-scrollbar {
         width: 50px;
     }

     .music-list ul li:hover {
         color: #71f7f0;
     }

     ul li.playing {
         pointer-events: none;
         color: #1c5455;
     }

     .volume-control {
         margin-top: 25px;
         text-align: center;
         color: rgba(83, 189, 180, 0.95);
         padding: 0 20px;
         text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     }

     .volume-control label {
         display: block;
         margin-bottom: 12px;
         font-size: 17px;
         font-weight: 600;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
         letter-spacing: 0.5px;
     }

     #volume {
         width: 70%;
         height: 6px;
         border-radius: 13px;
         background: rgba(56, 104, 112, 0.411);
         outline: none;
         -webkit-appearance: none;
         box-shadow:
             0 1px 3px rgba(0, 0, 0, 0.3),
             inset 0 1px 1px rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(1px);
         border: 1px solid rgba(255, 255, 255, 0.05);
     }

     #volume::-webkit-slider-thumb {
         -webkit-appearance: none;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         cursor: pointer;

         border: 2px solid #8ae4df;
     }

     #volume::-webkit-slider-thumb:hover {
         transform: scale(1.25);
         box-shadow:
             0 4px 8px rgba(0, 0, 0, 0.5),
             0 0 0 1px rgba(0, 0, 0, 0.15);
         background: #509caf;
     }

 }







 /* Button */
 .quote-btn {
     background: #316870;
     color: white;
     padding: 0.75rem 1.5rem;
     border: none;
     border-radius: 0.375rem;
     cursor: pointer;
     font-size: 1rem;
     height: 50px;
     transition: background 0.2s;
     margin-top: 89px;
 }

 .quote-btn:hover {
     background: #54a7c0;
 }

 /* Quote Widget */
 .quote-widget {
     width: 400px;
     background: linear-gradient(135deg, #0e435c, #1F4959);
     box-shadow: 0 2px 10px rgba(116, 156, 172, 0.8);
     color: rgb(169, 236, 238);
     border-radius: 0.375rem;
     padding: 2rem;
     text-align: center;
     margin-top: 80px;

     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

     display: none;
 }

 .quote-widget .para {
     font-size: 1.25rem;
     line-height: 1.5;
     margin-bottom: 1rem;
 }

 .quote-widget .author {
     font-size: 1.125rem;
     text-align: right;
     margin-bottom: 1.5rem;
     color: #d6eef3;

 }

 .quote-widget .icon {
     font-size: 1.25rem;
     cursor: pointer;
     margin: 0 0.5rem;
     color: #d6eef3;
 }

 .quote-widget .close {
     color: #dc2626;
     position: absolute;
     top: 0.5rem;
     right: 0.75rem;
     font-size: 30px;
 }