/* Global styling for body */
html, body {
    height: 100%;           /* Ensure the body takes full height of the screen */
    margin: 0;              /* Remove default margin */
    padding: 0;             /* Remove default padding */
}

/* Main container - uses flexbox */
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Makes sure footer is pushed to the bottom */
}

/* Footer styling */
.footer {
    text-align: center;           /* Centers the footer content */
    padding: 10px;                /* Adds padding inside the footer */
    color: #ffffff;
    background-color: black;    /* Light background color */
    width: 100%;                  /* Ensures the footer spans the entire width */
    position: relative;           /* Keeps the footer at the bottom */
    bottom: 0;                    /* Makes sure it's at the bottom of the screen */
    left: 0;                      /* Aligns it to the left */
    margin-top: 30px;             /* Adds space between content and footer */
}

/* Navbar Styling */
.navbar {
    background-color: black;
}

.navbar-brand img {
    height: 50px;
    color: white;
}

.navbar-brand {
    color: white !important;
}

.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav .nav-link:hover {
    color: #32CD32 !important;
}

/* Card Styling */
.card {
    border: none;
    padding: 0%;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background: #ffffff;
}

.card-header {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #006400;
}

.form-control {
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: none;
}

/* Outline Button Styles */
.btn-outline-light {
    border: 2px solid #006400 !important;
    /* Text color */
    color: white !important;
    background-color: transparent;
    /* Transparent background */
    transition: all 0.3s ease;
    /* Smooth transition for hover effect */
}

.btn-outline-light:hover {
    background-color: #32CD32 !important;
    /* White background on hover */
    color: #006400 !important;
    /* Text color on hover */
    border-color: #32CD32;
    /* Border color on hover */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
    /* Adding shadow on hover */
}

/* Primary Button Styles */
.btn-primary {
    background-color: #006400 !important;
    /*Greenbackground*/border-color: #006400 !important;
    /*Greenborder*/color: #ffffff !important;
    /*Whitetext*/transition: all 0.3s ease;
    /*Smoothtransitionforhovereffect*/-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #32CD32 !important; /* Lighter green background on hover */
    border-color: #32CD32 !important; /* Lighter green border */
    color: #ffffff; /* White text on hover */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important; /* Adding shadow on hover */
}

/* Active (clicked) button state */
.btn-primary:active {
    background-color: #228B22 !important; /* Darker green when button is clicked */
    border-color: #228B22 !important; /* Darker green border */
    color: #ffffff !important; /* White text on click */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important; /* Optional: Add shadow when clicked */
}

.login-footer {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}

.login-footer a {
    color: #006400;
    font-weight: 600;
}

.login-footer a {
    color: #000000;
}

/* Video Section Styling */
.col-video {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

#myVideo {
    width: 100%;
    height: auto;
    display: block;
}

#myBtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 18px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
}

#myBtn:hover {
    background-color: green;
    color: black;
}

/* Form Input Styling */
.form-group label {
    font-weight: 600;
}

.form-group input {
    font-size: 14px;
    padding: 12px;
}

.btn-block {
    font-size: 16px;
    padding: 12px;
}

.text-danger {
    color: #dc3545;
    /* Red color for error messages */
}

.swal2-popup {
    background: #f5f5f5;
    /* Background color */
    color: #333;
    /* Text color */
}

.swal2-title {
    color: #333;
    /* Title color */
}

.swal2-confirm {
    background: #228B22;
    /* Button background color */
    color: white;
    /* Button text color */
}

.swal2-confirm:hover {
    background: #228B22;
    /* Button hover background color */
    border: #228B22;
}

/* Card Styling */
.card {
    border-radius: 10px;
    overflow: hidden;
}

/* Form Column Styling */
.bg-light {
    background-color: #f9f9f9;
}

/* Video Wrapper Styling */
.video-wrapper {
    height: 100%;
    position: relative;
}

.video-wrapper video {
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Button Styling */
.btn-primary {
    background-color: #007bff;
    border: none;
}

.btn-primary:hover {
    background-color: #0056b3;
}

input[name="name"],
input[name="state"],
input[name="district"],
input[name="city"] {
    text-transform: capitalize;
}