/* Custom background with black and violet gradient */
.bg-custom {
    background: linear-gradient(135deg, black, rgb(38, 3, 38));
    height: 100vh;
    align-items: center;
    justify-content: center;
    display:flex;
}

body{
    background: linear-gradient(135deg, black, rgb(24, 2, 24));
    height: 100vh;
}

/* Custom font and color for the text */
.custom-font {
    font-family: 'Poppins', sans-serif; /* You can choose a different font */
    font-size: 2.5rem; /* Adjust the font size */
    color: white; /* White text color */
}

/* Custom button styles */
.custom-btn {
    font-size: 1.5rem; /* Bigger font size for buttons */
    padding: 1rem 2rem; /* Increase padding for larger buttons */
    border-radius: 10px; /* Slightly rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    margin-left: 20px;
}

/* Colors for buttons */
#acceptBtn {
    background-color: #28a745; /* Dark green */
    border: none;
    color: white;
}

#acceptBtn:hover {
    background-color: #218838; /* Lighter green on hover */
}

#declineBtn {
    background-color: #dc3545; /* Dark red */
    border: none;
    color: white;
}

#declineBtn:hover {
    background-color: #c82333; /* Lighter red on hover */
}

/* declined html*/

/* Import Poppins font if not already imported in HTML */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');



/* Styling for the video */
.video-container {
    max-width: 100%;
    margin-top: 20px;
}

.animated-video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    /* Optional: Add shadow for better appearance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Media Queries for Responsiveness */

/* Small Devices (Mobile Phones) */
@media (max-width: 576px) {
    .custom-font {
        font-size: 1.8rem;
    }

    .animated-video {
        max-width: 100%;
    }
}

/* Medium Devices (Tablets) */
@media (min-width: 577px) and (max-width: 768px) {
    .custom-font {
        font-size: 2.2rem;
    }

    .animated-video {
        max-width: 80%;
    }
}

/* Large Devices (Desktops) */
@media (min-width: 769px) and (max-width: 1200px) {
    .custom-font {
        font-size: 2.5rem;
    }

    .animated-video {
        max-width: 60%;
    }
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1201px) {
    .custom-font {
        font-size: 3rem;
    }

    .animated-video {
        max-width: 50%;
    }
}

/*accepted html*/



/* Changed font family for the subheadings */
.custom-subfont {
    font-family: 'Roboto', sans-serif; 
    color: #dc3545;
}

/* Styling for the image */
.accepted-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Optional: add rounded corners */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .custom-font {
        font-size: 2rem; /* Smaller font size on tablets */
    }

    .custom-subfont {
        font-size: 1.5rem; /* Smaller subheading font size on tablets */
    }

    .accepted-img {
        max-width: 100%; /* Full width on tablets */
    }
}

@media (max-width: 576px) {
    .custom-font {
        font-size: 1.5rem; /* Even smaller font size on mobile */
    }

    .custom-subfont {
        font-size: 1.25rem; /* Even smaller subheading font size on mobile */
    }

    .accepted-img {
        max-width: 100%; /* Full width on mobile */
    }
}



/* Media queries for responsiveness */
@media (max-width: 992px) {
    .custom-font {
        font-size: 2rem; /* Smaller font size on tablets */
    }

    .custom-btn {
        font-size: 1.25rem; /* Slightly smaller button text on tablets */
    }
}

@media (max-width: 768px) {
    .custom-font {
        font-size: 1.75rem; /* Even smaller font size on small tablets */
    }

    .custom-btn {
        font-size: 1.15rem; /* Smaller button text on small tablets */
    }

    .btn-group {
        flex-direction: column;
    }

    #acceptBtn, #declineBtn {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .custom-font {
        font-size: 1.5rem; /* Smaller font size on mobile */
    }

    .custom-btn {
        font-size: 1rem; /* Smaller button text on mobile */
    }
}