div.reg-1 form select.form-select{
    height: 58px;
}

.invalid-tooltip,
.valid-tooltip {
    margin-bottom: 0.5rem; /* Space below input for tooltip */
    transform: none;    /* Ensures alignment with the input */
}

.form-group {
   
    position: relative;   /* Ensure tooltips position correctly */
}
.invalid-feedback {
    display: block;
        background-color: rgba(220,53,69,.9);
        color: #fff;
        padding: 0.25rem 0.5rem;
        font-size:.875rem;
        border-radius: 0.375rem;
        width: 70%;
      }
  
      .valid-feedback {
        display: block;
        background-color: rgba(25,135,84,.9);
        color: #fff;
        padding: 0.25rem 0.5rem;
        font-size:.875rem;
        border-radius: 0.375rem;
        max-width: 100%;
      }



      /* start  of column*/
      div.reg-1{
        background-color: black;
      }

    div.reg-2{
        padding: 40px 10px 20px 20px;
    }

    div.reg-2 div.carousel-item img.d-block{
        border-radius: 15px;
    }
    .carousel-item img {
        height: 750px; /* Set a uniform height */
        object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
        object-position: center; /* Centers the image within the container */
    }
    
    /* Overlay styling */
.black-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: 1; /* Place it above the image but below the caption */
}

/* Ensure the caption appears above the overlay */

/* Position logo in the top left corner */
.carousel-logo {
    position: absolute;
    top: 10px; /* Adjust the distance from the top */
    left: 10px; /* Adjust the distance from the left */
    z-index: 3; /* Ensure the logo is above the overlay and image */
}

.carousel-logo img {
    max-width: 120px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
}

.carousel-caption {
    
    z-index: 2;
}
    
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

.carousel-caption h5{
    
    font-size: 2.5em;
    font-weight: 400;
}

    div.reg-3{
        padding: 60px;
    }

    /* end of column */

    /* form start */
    p.reg-1{
        font-size:3rem;
        font-weight: 400;
        color: white;
    }
    p.reg-2{
        font-size: .9rem;
        color: lightgrey;
        margin-bottom: 50px;
        
    }

    a.reg-1{
        color: #6eea8e;
    }

    div.form-check{
        margin-bottom: 50px;
      
    }
     label.form-check-label{
        color: lightgrey;
        font-size: 0.9em;

    }
    label.form-check-label a{
        color: #6eea8e;
    }

    button.reg-1{
        padding: 15px 0px;
        background-color: forestgreen;
        color: white;
        border: none;
        font-weight: 500;
        text-shadow: 0.5px 0.5px 0.5px lightgrey;
    }
    button.reg-1:hover{
       
       
        color: white;
        background-color: #6eea8e;
    }

    button.reg-1:active{
       
       
        color: white;
        background-color: #6eea8e;
    }

    form button.toggle-password{
        border: none;
        color: grey;
        padding-right: 25px;
        font-size: 1em;
    }

/* Hide the default checkbox */
.custom-checkbox {
    appearance: none; /* Remove default styling */
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Background for unchecked state */
.custom-checkbox:before {
   
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Light background */
    border-radius: 4px;
}

/* Checked state */
.custom-checkbox:checked {
    border-color: #28a745; /* Green border when checked */
    background-color: #28a745; /* Green background */
}

/* Checkmark */
.custom-checkbox:checked:before {
    
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-container {
    z-index: 1055; /* Ensure it's above other elements */
}
.toast {
    font-size: 16px;
    animation: fadeIn 0.5s ease;
}

    /* form end */