body {
     font-family: Arial, sans-serif;
     background: #f4f4f4;
     margin: 0;
     padding: 0;
     text-align: center;
 }

 .iconlogin {
     width: fit-content;
     height: fit-content;
     display: inline-block;
 }

 /* Ticker container */
 .news-ticker {
     background: linear-gradient(to bottom, #240088 1%, #48005a 100%);
     color: #fff;
     overflow: hidden;
     white-space: nowrap;
     box-sizing: border-box;
     padding: 10px 0;
     position: relative;
 }

 /* Moving text */
 .news-ticker-content {
     display: inline-block;
     padding-left: 100%;
     animation: ticker 40s linear infinite;
 }

 /* Animation keyframes */
 @keyframes ticker {
     0% {
         transform: translateX(0);
     }

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

 /* Optional: style for headlines */
 .news-item {
     display: inline-block;
     margin-right: 50px;
 }

 .btns {
     display: inline-flex;
     padding: 15px;

 }

 .viewbtn {
     color: #FFFF;
     letter-spacing: 1px;
     border: none;
     background: linear-gradient(to bottom, #119fec 1%, #8221f1 100%);
     cursor: pointer;
     font-size: 18px;
     width: 100%;
     height: 40px;
     border-radius: 5px;
     text-align: center;
 }

 .viewbtn:hover {
     transform: scale(1.1);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }

 /* Overlay background */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: none;
     /* hidden by default */
     justify-content: center;
     align-items: center;
     animation: fadeIn 0.4s ease;
 }

 /* Dialog box */
 .dialog {
     background: #fff;
     border-radius: 12px;
     width: 400px;
     max-width: 90%;
     padding: 20px 30px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
     animation: slideUp 0.5s ease;
 }

 .dialog h2 {
     margin: 0 0 10px;
     font-size: 22px;
     color: #333;
 }

 .dialog p {
     font-size: 15px;
     color: #555;
     line-height: 1.6;
 }

 .dialog .actions {
     margin-top: 20px;
     text-align: right;
 }

 .dialog button {
     background: #4a90e2;
     color: #fff;
     border: none;
     padding: 10px 18px;
     border-radius: 6px;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .dialog button:hover {
     background: #357abd;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }



 .dialog {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
     max-width: 1000px;
     padding: 20px;
 }

 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
     max-width: 1000px;
     padding: 20px;
 }

 .card {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     background: linear-gradient(135deg, #ff7eb3, #ff758c);
     color: #fff;
 }

 .card:nth-child(2) {
     background: linear-gradient(135deg, #6a11cb, #2575fc);
 }

 .card:nth-child(3) {
     background: linear-gradient(135deg, #43cea2, #185a9d);
 }

 .card:hover {
     transform: translateY(-10px) scale(1.03);
     box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
 }

 .card img {

     height: 180px;
     object-fit: cover;
     width: desired_width;

 }

 .card-content {
     padding: 16px;
 }

 .card-content h3 {
     margin: 0;
     font-size: 22px;
 }

 .card-content p {
     margin-top: 8px;
     font-size: 14px;
     opacity: 0.9;
 }

 .card button {
     margin-top: 12px;
     padding: 10px 16px;
     border: none;
     background: rgba(255, 255, 255, 0.2);
     color: #fff;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .card button:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 .item {
     display: inline-block;
 }

 .close {
     color: #FFFF;
     letter-spacing: 1px;
     border: none;
     background: linear-gradient(to bottom, #119fec 1%, #8221f1 100%);
     cursor: pointer;
     font-size: 18px;
     width: 40%;
     height: 40px;
     border-radius: 5px;
     text-align: center;
 }