@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


html, body {
    background-color: var(--light);
    color: var(--dark);
    line-height: 1.6;
    padding: 1px;
    max-width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
}



* {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}



:root {
    --primary: #510c5d;
    --primary-light: #ff9e00;
    --secondary: #FF9E00;
    --light: #F9F6FA;
    --dark: #2E052E;
    --gray: #E8E0E9;
    --success: #00C853;
    --radius: 12px;
    --shadow: 0 5px 15px rgba(81, 12, 93, 0.1);
    --transition: all 0.3s ease;
}



.container {
    /* max-width: 500px; */
    margin: 0 auto;
    width: 100%;
}

header {
    text-align: center;
    margin-bottom: 25px;
   
}

.head {
    font-weight: 600;
}

.logo {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    /* background-color: var(--primary); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

    /* .logo span {
            color: white;
            font-size: 24px;
            font-weight: bold;
        } */

    .logo img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

h1 {
    color: var(--primary);
    margin-bottom: 8px;
    font-size: 24px;
}

p.subtitle {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.card {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--gray);
    display: flex;
    align-items: center;
    flex-direction: column;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(81, 12, 93, 0.15);
    }

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.card-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(81, 12, 93, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.card-content {
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

    .btn-primary:hover {
        background-color: var(--primary-light);
    }

.btn-outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

    .btn-outline:hover {
        background-color: var(--primary);
        color: var(--gray);
    }

.btn-news {
    background-color: var(--secondary);
    color: white;
}

    .btn-news:hover {
        background-color: #e68f00;
    }

.voucher-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--gray);
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 15px;
    transition: var(--transition);
}

    .voucher-input:focus {
        border-color: var(--primary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(81, 12, 93, 0.2);
    }

.news-item {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray);
}

    .news-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.news-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.news-date {
    color: #999;
    font-size: 12px;
}

footer {
    color: #999;
    font-size: 13px; 
    display:flex;
    height:100%;
    align-content:center;
    justify-content:space-between;
}

/* Fake icon font */
.icon::before {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.wifi-icon::before {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23510c5d"><path d="M12 3C7.79 3 3.7 4.41.38 7 4.41 12.06 7.89 16.37 12 21.5c4.08-5.08 7.57-9.42 11.62-14.5C20.32 4.41 16.22 3 12 3zm0 2c3.07 0 6.09.86 8.71 2.45l-3.21 3.98C16.26 10.74 14.37 10 12 10c-2.38 0-4.26.75-5.5 1.43L3.27 7.45C5.91 5.85 8.93 5 12 5z"/></svg>');
}

.voucher-icon::before {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23510c5d"><path d="M20 12c0-1.1.9-2 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-1.99.9-1.99 2v4c1.1 0 1.99.9 1.99 2s-.89 2-2 2v4c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-4c-1.1 0-2-.9-2-2zm-4.42 4.8L12 14.5l-3.58 2.3 1.08-4.12-3.29-2.69 4.24-.25L12 5.8l1.54 3.95 4.24.25-3.29 2.69 1.09 4.11z"/></svg>');
}

.news-icon::before {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9E00"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path d="M7 12h2v5H7zm8-5h2v10h-2zm-4 7h2v3h-2zm0-4h2v2h-2z"/></svg>');
}



.whatsapp-icon::before {
    width: 25px;
    height: 25px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2325D366" viewBox="0 0 24 24"><path d="M20.52 3.48a11.77 11.77 0 0 0-16.66 0A11.81 11.81 0 0 0 2 12.26c0 1.89.47 3.72 1.37 5.35L2 22l4.47-1.34a11.87 11.87 0 0 0 5.73 1.45h.01c6.52 0 11.8-5.28 11.8-11.8a11.81 11.81 0 0 0-3.49-8.53zM12.2 20.07h-.01a9.37 9.37 0 0 1-4.79-1.29l-.34-.2-2.66.79.79-2.6-.22-.33a9.37 9.37 0 1 1 17.01-5.39c0 5.18-4.21 9.39-9.38 9.39zm5.19-6.89c-.28-.14-1.64-.81-1.89-.91-.25-.09-.43-.14-.61.14s-.7.91-.86 1.1c-.16.18-.32.2-.6.07-.28-.14-1.18-.44-2.25-1.41-.83-.74-1.39-1.64-1.55-1.91-.16-.28-.02-.43.12-.57.13-.13.28-.32.42-.48.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.61-1.47-.84-2.01-.22-.53-.44-.46-.6-.47h-.52c-.18 0-.47.07-.71.34s-.93.91-.93 2.23.95 2.58 1.09 2.76c.13.18 1.87 2.86 4.54 4.01.63.27 1.12.43 1.5.55.63.2 1.2.17 1.65.1.5-.08 1.64-.67 1.87-1.31.23-.63.23-1.18.16-1.31-.06-.13-.25-.2-.52-.33z"/></svg>');
}

.call-icon::before {
    content: "";
 
    width: 25px;
    height: 25px;
    padding: 5px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23510c5d" viewBox="0 0 24 24"><path d="M6.62 10.79a15.07 15.07 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.21c1.21.49 2.53.76 3.89.76a1 1 0 011 1V20a1 1 0 01-1 1C10.07 21 3 13.93 3 5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.36.27 2.68.76 3.89a1 1 0 01-.21 1.11l-2.2 2.2z"/></svg>');
}




.myIcon {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0,0,0,0.03);
}