body {
        margin: 0;
        font-family: 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, #ff4e50, #f9d423);
        color: #fff;
    }

    nav {
        position: fixed;
        width: 100%;
        top: 0;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(10px);
        padding: 15px;
        z-index: 1000;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    nav a {
        color: white;
        margin: 0 15px;
        text-decoration: none;
        font-weight: bold;
        padding: 5px;
    }

    nav a:hover{
        background-color: orangered;
    }

    
    header {
        text-align: center;
        padding: 90px 20px 50px 20px;
        background: rgba(0,0,0,0.4);
    }

    header img{
        width: 15em;
    }

    header h1 {
        font-size: 3em;
        margin-bottom: -20px;
    }

    header h2{
        margin-bottom: 40px;
        font-size: 2em;
    }

    header p {
        font-size: 1.2em;
        margin-bottom: 50px;
    }

    .btn{
        margin-top: 20px;
        background: rgba(255,102,102);
        padding:16px 40px;
        border-radius:40px;
        color:white;
        text-decoration:none;
        font-size:20px;
        font-weight:bold;
        transition:0.3s;
    }

    .btn:hover{
        transform:scale(1.1);
        box-shadow:0 0 30px rgba(255,204,51,0.9);
    }


    .btn2{
        margin-top: 40px;
        background: rgba(153,51,0);
        padding:16px 40px;
        border-radius:40px;
        color:white;
        text-decoration:none;
        font-size:20px;
        font-weight:bold;
        transition:0.3s;
    }

    .btn2:hover{
        transform:scale(1.1);
        box-shadow:0 0 30px rgba(153,51,0,0.9);
    }



    section {
        padding: 60px 20px;
        max-width: 1100px;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: center;
    }

    section h2 {
        text-align: center;
        margin-bottom: 40px;
    }


    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: auto;
    }


    table{
        width:100%;
        border-collapse:collapse;
        background:white;
        border-radius:10px;
        overflow:hidden;
        box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

    th{
        background:linear-gradient(45deg,#1565c0,#1e88e5);
        color:white;
        padding:20px;
    }

    td{
        padding:18px;
        text-align:center;
        color: black;
    }

    tr:nth-child(even){
        background:#e3f2fd;
    }

    .grid {
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    .card {
        background: rgba(255,255,255,0.1);
        padding: 20px;
        border-radius: 15px;
        transition: 0.3s;
    }

    .card:hover {
        transform: translateY(-5px);
        background: rgba(255,255,255,0.2);
    }

    .benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .benefit-box {
        flex: 1;
        min-width: 250px;
        background: rgba(0,0,0,0.3);
        padding: 20px;
        border-radius: 15px;
    }

    iframe {
        width: 100%;
        height: 250px;
        border-radius: 15px;
    }

    video {
        background-color: black;
        width: 100%;
        height: 250px;
        border-radius: 15px;

    }

    .whatsapp-section {
        text-align: center;
    }

    input {
        padding: 12px;
        width: 80%;
        margin: 10px 0;
        border-radius: 8px;
        border: none;
    }

    button {
        padding: 15px 25px;
        background: #25D366;
        border: none;
        color: white;
        font-size: 16px;
        border-radius: 10px;
        cursor: pointer;
    }

    button:hover {
        background: #1ebe5d;
    }

    footer{
        background: rgba(0,0,0,0.4);
        color:white;
        text-align:center;
        padding:30px;
    }


    @media(max-width:1080px){

        header img{
        width: 10em;
        }      

        header h1 {
            font-size: 2.5em;
        }

        header h2 {
            font-size: 1.5em;
        }


        .container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            max-width: 1200px;
            margin: auto;
        }



        nav a {
            margin: 0 3px;
            padding: 2px;
        }
    }