.open-btn {
        padding: 12px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
    .modal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0; top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s;
    }
    .modal-content {
        background: white;
        padding: 25px;
        border-radius: 10px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        position: relative;
        animation: slideIn 0.3s;
    }
    .modal-content h2 {
        margin-top: 0;
    }
    .close-btnd {
        position: absolute;
        top: 10px; right: 15px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
    @keyframes fadeIn {
        from { background: rgba(0,0,0,0); }
        to { background: rgba(0,0,0,0.5); }
    }
    @keyframes slideIn {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
	
	
	
	body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    main {
      flex: 1;
      padding: 20px;
    }
    .footerx {
      background: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }