*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f7fb;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.nav{background:linear-gradient(90deg,#6a11cb,#8e2de2);flex-wrap:wrap;justify-content:space-between;align-items:center;padding:20px 35px;display:flex;box-shadow:0 5px 15px #0003}.nav-link{color:#fff;font-weight:600;text-decoration:none;transition:all .3s}.nav-link:hover{color:#ffe600}.home{text-align:center;padding:40px}.home h1{color:#4a148c;margin-bottom:15px;font-size:48px}.home p{color:#666;margin-bottom:40px;font-size:20px}.showCase{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:30px;padding:10px;display:grid}.showCase div{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:25px;transition:all .35s;box-shadow:0 10px 25px #00000026}.showCase div:hover{transform:translateY(-8px);box-shadow:0 18px 35px #00000040}.showCase div h2{margin-bottom:15px;font-size:30px}.showCase div p{color:#bacff9;margin-bottom:20px;font-size:18px;line-height:1.6}.showCase button{color:#6a11cb;cursor:pointer;background:#fff;border:none;border-radius:30px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s;box-shadow:0 5px 15px #00000026}.showCase button:hover{color:#fff;background:#4a00e0;transform:scale(1.05)}.toggleImg{text-align:center;background:linear-gradient(135deg,#ff9a9e,#fad0c4);justify-content:center;align-items:center;min-height:90vh;display:flex}.toggleImg .container{background-color:#a4d5f1;border-radius:20px;margin:40px;padding:20px 40px}.toggleImg h1{color:#770beb;margin-bottom:20px}.toggleImg img{width:180px;margin:25px 0;transition:all .3s}.toggleImg img:hover{transform:scale(1.08)}.toggleImg button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6a11cb,#8e2de2);border:none;border-radius:30px;padding:12px 28px;font-size:16px;transition:all .3s}.toggleImg button:hover{transform:scale(1.05)}.inputFieldValue{background:linear-gradient(135deg,#84fab0,#8fd3f4);justify-content:center;align-items:center;min-height:90vh;display:flex}.inputFieldValue .container{background-color:#667eea;border-radius:20px;height:200px;padding:25px}.inputFieldValue .container h1,input,h2{margin:10px}.inputFieldValue .container h2{color:#fff}.inputFieldValue .container input{border:none;border-radius:20px;outline:none;width:80%;height:25px;padding-left:15px}.showHide{background:linear-gradient(135deg,#ff9a9e,#fad0c4);justify-content:center;align-items:center;height:90vh;display:flex}.showHide .container{text-align:center;background:#fff;border-radius:20px;width:400px;padding:30px;box-shadow:0 10px 20px #0003}.showHide h1{margin-bottom:20px}.showHide p{color:#444;margin:20px 0;line-height:1.6}.showHide button{color:#fff;cursor:pointer;background:#8a2be2;border:none;border-radius:20px;padding:10px 20px;font-size:16px}.showHide button:hover{background:#5a189a}.charCounter{background:linear-gradient(135deg,#84fab0,#8fd3f4);justify-content:center;align-items:center;min-height:90vh;display:flex}.charCounter .container{text-align:center;background:#fff;border-radius:20px;width:450px;padding:30px;box-shadow:0 10px 20px #0003}.charCounter h1{color:#333;margin-bottom:20px}.charCounter textarea{resize:none;border:1px solid #ccc;border-radius:10px;outline:none;width:100%;padding:12px;font-size:16px}.charCounter textarea:focus{border-color:#4caf50}.charCounter h3{color:#4caf50;margin-top:20px}.formPage{background:linear-gradient(270deg,#a01899,#f339e0);justify-content:center;align-items:center;min-height:90vh;display:flex}.formPage form{background-color:#fff;border-radius:20px;flex-direction:column;justify-content:space-between;width:400px;min-width:180px;height:400px;padding:25px;display:flex}.formPage form input{border:2px solid #c6c0c0;outline:none;height:28px;padding:6px}.formPage form .submitbtn{color:#fff;background-color:#873ee0;border:none;border-radius:5px;height:35px;padding:5px;font-size:18px;font-weight:600}.checkBoxPage{background:linear-gradient(135deg,#84fab0,#8fd3f4);justify-content:center;align-items:center;min-height:90vh;display:flex}.checkBoxPage .container{background:#fff;border-radius:20px;width:400px;padding:30px;box-shadow:0 10px 25px #0003}.checkBoxPage h1{text-align:center;margin-bottom:20px}.checkBoxPage div{margin:10px 0}.checkBoxPage label{margin-left:10px}.checkBoxPage h3{margin-top:20px}.dropdownPage{background:linear-gradient(135deg,#e75df6,#e5acdf);justify-content:center;align-items:center;min-height:90vh;display:flex}.dropdownPage .container{text-align:center;background:#fff;border-radius:20px;width:400px;padding:30px;box-shadow:0 10px 25px #0003}.dropdownPage select{border-radius:8px;width:100%;padding:10px;font-size:16px}.dropdownPage h3{color:#444;margin-top:20px}@media (width<=768px){.nav{flex-direction:column;gap:15px}.home h1{font-size:36px}.home p{font-size:18px}.showCase{grid-template-columns:1fr}.toggleImg .container{width:95%}}