body{
    padding: 0;
    margin: 0;
}



        .message {
            height: 300px;
        }

     

      

        .contact_form {
            width: 80%;
            margin: 40px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .contact_form h3 {
            margin-top: 0;
            font-size: xx-large;
        }

        .contact_form label {
            display: block;
            margin-bottom: 10px;
        }

        .contact_form input[type="text"],
        .contact_form input[type="number"],
        .contact_form input[type="email"],
        .contact_form select,
        .contact_form textarea {
            width: 95%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .contact_form input[type="checkbox"] {
            margin-right: 10px;
        }

        .contact_form select {
            appearance: none;
           
            padding-right: 30px;
        }

        .contact_form textarea {
            resize: vertical;
        }

        .contact_form input[type="submit"] {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .contact_form input[type="submit"]:hover {
            background-color: #3e8e41;
        }

        .requiredstar {
            color: red;
        }

        /* Animated Styles */

        .contact_form input[type="text"]:focus,
        .contact_form input[type="number"]:focus,
        .contact_form input[type="email"]:focus,
        .contact_form textarea:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 10px rgba(0, 128, 0, 0.2);
        }

        .contact_form select:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 10px rgba(0, 128, 0, 0.2);
        }

        .contact_form label {
            transition: transform 0.2s ease-in-out;
        }

        .contact_form label:hover {
            transform: scale(1.1);
        }

        .contact_form input[type="submit"] {
            transition: background-color 0.2s ease-in-out;
        }

        .contact_form input[type="submit"]:hover {
            background-color: #3e8e41;
        }

        /* Selected Options */

        #selected-options {
            margin-bottom: 20px;
        }

        .selected-option {
            background-color: #f0f0f0;
            padding: 5px;
            border: 1px solid #ccc;
            margin: 5px;
            display: inline-block;
        }

        .remove-button {
            background-color: #ccc;
            color: #666;
            border: none;
            padding: 5px;
            cursor: pointer;
        }

        .remove-button:hover {
            background-color: #aaa;
        }

        #state {
            appearance: none;

            background-position: right 10px top 50%;
            background-repeat: no-repeat;
            padding-right: 30px;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        #state:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 10px rgba(0, 128, 0, 0.2);
        }

        /* Custom dropdown arrow */

        #state::-ms-expand {
            display: none;
        }

        #state option {
            padding: 10px;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
        }

        #state option:hover {
            background-color: #ddd;
        }

        #state option:selected {
            background-color: #4CAF50;
            color: #fff;
        }

        .info {
            margin: 0% 10%;
        }

        .heading {
            font-size: xxx-large;
            text-align: center;
        }

        .info h3 {
            font-size: 200%;
        }

        .info p {
            font-size: large;
        }

        .info p span {
            font-size: xx-large;
        }

        @media only screen and (max-width: 480px) {
            .heading {
                font-size: xx-large;
            }

            .info h3 {
                font-size: 100%;
            }

            .info p {
                font-size: unset;
            }

            .info p span {
                font-size: x-large;
            }
           
        }


        @media only screen and (min-width: 481px) and (max-width: 768px) {
            .heading {
                font-size: xx-large;
            }

            .info h3 {
                font-size: 100%;
            }

            .info p {
                font-size: unset;
            }

            .info p span {
                font-size: x-large;
            }
          
        }

        @media only screen and (min-width: 769px) and (max-width: 1024px) {
            
        }