@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.login-block{
    background: -webkit-linear-gradient(to bottom, #8BC34A, #388E3C);   /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #8BC34A, #388E3C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
float:left;
width:100%;
min-height: 100vh; /* full viewport height */
padding : 50px 0;
display: flex;
    align-items: center;
}
.banner-sec{ background-size:cover; min-height:595px; padding:0;}
.container{background:#fff; box-shadow:15px 20px 0px rgba(0,0,0,0.1);}
.carousel-inner{border-radius:0;}
.carousel-caption{text-align:left; left:5%;}
.login-sec{padding: 50px 30px; position:relative;}
.login-sec .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}
.banner-text{width:70%; position:absolute; bottom:80px; padding-left:20px;}
.banner-text h2{color:#fff; font-weight:600;}
.banner-text h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px;}
.banner-text p{color:#fff;}

/* Original media query for <= 768px */
@media (max-width: 768px) {
    .banner-sec {
        display: none;
    }
    .login-sec {
        margin: 0 auto; /* Center the login form */
        width: 100%; /* Make the login form full width */
    }
}

/* NEW: Media query for screen size <= 1000px */
@media (max-width: 1000px) {
    .banner-sec {
        display: none; /* Hide the banner section */
    }
    .col-md-4.login-sec {
        flex: 0 0 100%; /* Make it take full width in flexbox context */
        max-width: 100%; /* Ensure it doesn't exceed 100% width */
        margin: 0 auto; /* Center the form */
        /* Remove float: none; as flexbox handles layout */
    }
    .container .row {
        justify-content: center; /* Center the column horizontally in the row */
    }
}


body,html{
    margin:0;
    height:100%;
    color:#6a6f8c;
    background:#c8c8c8;
    font:600 16px/18px 'Open Sans',sans-serif;
}


.login-box{

    min-height:595px;
    background:url(https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80) no-repeat center;
    box-shadow:0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.login-snip{
    
background: -webkit-linear-gradient(to bottom, rgba(0, 77, 77, 0.9), #388E3C);   /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, rgba(0, 77, 77, 0.9), #388E3C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.login-snip .login,
.login-snip .sign-up-form{
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    transform:rotateY(180deg);
    backface-visibility:hidden;
    transition:all .4s linear;
}
.login-snip .sign-in,
.login-snip .sign-up,
.login-space .group .check{
    display:none;
}
.login-snip .tab,
.login-space .group .label,
.login-space .group .button{
    text-transform:uppercase;
}
.login-snip .tab{
    font-size:22px;
    margin-right:15px;
    padding-bottom:5px;
    margin:0 15px 10px 0;
    display:inline-block;
    border-bottom:2px solid transparent;
}
.login-snip .sign-in:checked + .tab,
.login-snip .sign-up:checked + .tab{
    color:#fff;
    border-color:#1161ee;
}
.login-space{
    min-height:345px;
    position:relative;
    perspective:1000px;
    transform-style:preserve-3d;
}
.login-space .group{
    margin-bottom:15px;
}
.login-space .group .label,
.login-space .group .input,
.login-space .group .button{
    width:100%;
    color:#fff;
    display:block;
}
.login-space .group .input,
.login-space .group .button{
    border:none;
    padding:15px 20px;
    border-radius:25px;
    background:rgba(255,255,255,0.1);
}
.login-space .group input[data-type="password"]{
    text-security:circle;
    -webkit-text-security:circle;
}
.login-space .group .label{
    color:#aaa;
    font-size:12px;
}
.login-space .group .button{
    background:#1161ee;
}
.login-space .group label .icon{
    width:15px;
    height:15px;
    border-radius:2px;
    position:relative;
    display:inline-block;
    background:rgba(255,255,255,0.1);
}
.login-space .group label .icon:before,
.login-space .group label .icon:after{
    content:'';
    width:10px;
    height:2px;
    background:#fff;
    position:absolute;
    transition:all .2s ease-in-out 0s;
}
.login-space .group label .icon:before{
    left:3px;
    width:5px;
    bottom:6px;
    transform:scale(0) rotate(0);
}
.login-space .group label .icon:after{
    top:6px;
    right:0;
    transform:scale(0) rotate(0);
}
.login-space .group .check:checked + label{
    color:#fff;
}
.login-space .group .check:checked + label .icon{
    background:#1161ee;
}
.login-space .group .check:checked + label .icon:before{
    transform:scale(1) rotate(45deg);
}
.login-space .group .check:checked + label .icon:after{
    transform:scale(1) rotate(-45deg);
}
.login-snip .sign-in:checked + .tab + .sign-up + .tab + .login-space .login{
    transform:rotate(0);
}
.login-snip .sign-up:checked + .tab + .login-space .sign-up-form{
    transform:rotate(0);
}

*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}


.hr{
    height:2px;
    margin:30px 0 10px 0;
    background:rgba(255,255,255,0.2);
}
.foot{
    margin-top: 0px;
    text-align:center;
}
.card{
    width: 500px;
    left: -30px;
}

::placeholder{
color: #b3b3b3;
}



/*Register Drop Down settings*/
.input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #2d6a4f; /* Dark green background */
    color: #ffffff; /* White text */
}

/* Style the dropdown arrow */
.input:focus {
    outline: none;
    border-color: #95d5b2;
}

/* Option styling */
.input option {
    background-color: #2d6a4f; /* Same dark green background */
    color: #ffffff; /* White text */
}

.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select {
    width: 100%;
    height: 50px;
    padding: 10px 36px 10px 12px; /* space for arrow */
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #2d6a4f;
    color: #ffffff;
    appearance: none;          /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Arrow using ::after */
.custom-select-container::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    pointer-events: none;
}

.custom-select:focus {
    outline: none;
    border-color: #95d5b2;
}

.custom-select option {
    background-color: #2d6a4f;
    color: #ffffff;
}

/*mobile header display*/

.mobile-header {
    background: #8BC34A;
    text-align: center;
    display: none; /* Hidden by default, shown in mobile via media query */
    padding: 0.25rem 0.5rem; /* tighter padding for reduced height */

}

.mobile-header img {
    max-height: 40px;
    margin-top: 5px;
    margin-bottom: -35px;
    
}

.mobile-header h4 {
    color: white;
    margin: 0;
    font-weight: bold;
    margin-top: 35px;
    margin-left: 0.75rem; /* gap between logo and text */

}
@media (max-width: 1000px) {
    .mobile-header {
        display: block;
    }
}

/*error message*/

.error-message {
    margin-top: 5px;
    color: red;
    font-size: 0.85em;
    max-width: 250px;
    margin-left: 5px;
    
}

.username-label {
    margin-top: -5px;
}