* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }


        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background: linear-gradient(135deg, #ff0050 0%, #00f2ea 100%);

            min-height: 100vh;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding: 20px;

        }


        .container {

           

            border-radius: 20px;

            padding: 40px;

            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

            backdrop-filter: blur(17px);

            max-width: 500px;

            width: 100%;

            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

        }


        .logo {

            font-size: 2.5em;

            font-weight: bold;

            color: #ff0050;

            margin-bottom: 10px;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

        }


        .subtitle {

            color: #666;

            margin-bottom: 30px;

            font-size: 1.1em;

        }


        .input-group {

            margin-bottom: 25px;

        }


        .input-label {

            display: block;

            margin-bottom: 10px;

            font-weight: 600;

            color: #333;

            font-size: 1.1em;

        }


        .search-input {

            width: 100%;

            padding: 15px 20px;

            border: 2px solid #e0e0e0;

            border-radius: 50px;

            font-size: 16px;

            outline: none;

            transition: all 0.3s ease;

            background: #f8f9fa;

        }


        .search-input:focus {

            border-color: #ff0050;

            background: white;

            box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.1);

        }


        .download-btn {

            width: 100%;

            padding: 15px 30px;

            background: linear-gradient(45deg, #ff0050, #ff3366);

            color: white;

            border: none;

            border-radius: 50px;

            font-size: 18px;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 20px;

        }


        .download-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 20px rgba(255, 0, 80, 0.3);

        }


        .download-btn:active {

            transform: translateY(0);

        }


        .download-btn:disabled {

            opacity: 0.6;

            cursor: not-allowed;

            transform: none;

        }


        .results-container {

            margin-top: 30px;

            text-align: center;

        }


        .video-container {

            background: #f8f9fa;

            border-radius: 15px;

            padding: 20px;

            margin-bottom: 15px;

            border: 1px solid #e0e0e0;

            transition: all 0.3s ease;

        }


        .video-container:hover {

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

        }


        .video-preview {

            width: 100%;

            border-radius: 10px;

            margin-bottom: 15px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

        }


        .video-download-btn {

            background: #ff0050;

            color: white;

            border: none;

            padding: 12px 25px;

            border-radius: 25px;

            cursor: pointer;

            font-size: 16px;

            font-weight: 600;

            transition: all 0.3s ease;

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }


        .video-download-btn:hover {

            background: #e00046;

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(255, 0, 80, 0.3);

        }


        .loading {

            display: none;

            color: #ff0050;

            font-weight: 600;

            margin: 20px 0;

        }


        .error {

            color: #dc3545;

            background: #f8d7da;

            padding: 15px;

            border-radius: 10px;

            margin-top: 20px;

            display: none;

        }


        .success {

            color: #155724;

            background: #d4edda;

            padding: 15px;

            border-radius: 10px;

            margin-top: 20px;

            display: none;

        }


        .footer {

            margin-top: 40px;

            text-align: center;

        }


        .footer-links {

            margin-bottom: 15px;

        }


        .whatsapp-btn {

            display: inline-block;

            background: #25d366;

            color: white;

            padding: 12px 25px;

            border-radius: 25px;

            text-decoration: none;

            font-weight: 600;

            transition: all 0.3s ease;

            margin-bottom: 15px;

        }


        .whatsapp-btn:hover {

            background: #128c7e;

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);

        }


        .powered-by { 

            color: #666;

            font-size: 0.9em;

            font-weight: 600;

        }


        @media (max-width: 600px) {

            .container {

                padding: 30px 20px;

                margin: 10px;

            }

           

            .logo {

                font-size: 2em;

            }

        }

   #greeting{
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   }

   .action-buttons{
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.small-btn{
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin: 10px;
    padding: 10px;
}

.small-btn:hover{
    background: #444;
}


.footer a {
    color: #00f2ea;
    text-decoration: none;
}
.footer a :hover{
    color: #25d366;
    text-decoration: underline;
}