*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	font-size: 62.5%;
}

body{
	background: url(image/background.png);
	background-size:cover ;
}

header{
	font-family: 'Acme', sans-serif;
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
}

header .w span{
	background: #54b154;
	color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    padding: 5px;
    margin: 13px;
    width: 22%;
    border-top-right-radius: 100px ;
}

header .w marquee{
	font-weight: 600;
	font-size: 1.5rem;
}

header .w{
	display: flex;
	align-items: center;
	width: 70%;
}

.container{
	display: flex;
	width: 100%;
	height: 45vh;
	overflow: hidden;
}

.container .login{
	display: flex;
    width: 130%;
    height: 100%;
    background: #fff;
}

.container .login .login-2{
	position: absolute;
	font-family: 'Acme', sans-serif;
    width: 44.5%;
    height: 44%;
    padding: 14px 0;
    background: #fff;
    border-radius: 10px;
    clip-path: polygon(0% 0%, 0% 100%, 65% 100%, 100% 0%);
    border: 2px solid green;
}
 
.circle{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(#00efef,green);
	clip-path: circle(704px at right 699px);
}

.container .login .login-2 .formbox{
	position: relative;
	top: 18px;
}

.container .login h1{
    color: #f44336;
    font-size: 2.9rem;
    font-weight: 500;
    padding: 0 19px;
}

.container .login .formbox .inputbox{
	position: relative;
	margin-bottom:25px ;
}

.container .login .formbox .inputbox.w50{
	width: 100%;
}
.container .login .formbox .inputbox.w100{
	width: 90%;
	margin: 12px ;
}

.container .login .formbox .hidden{
	display: none;
}

.container .login .formbox .inputbox input{
	width: 43%;
	margin: 0 10px;
	resize: none;
	padding: 5px 0;
	font-size: 1.8rem;
	font-weight: 300;
	color: #333;
	border: none;
	outline: none;
	border-bottom: 1px solid #f44336;
}

.container .login .formbox .inputbox span{
	position: absolute;
	left: 0;
	padding: 5px 5px;
	pointer-events: none;
	font-size: 1.8rem;
	font-weight: 300;
	transition: 0.3s;
}

.container .login .formbox .inputbox span i{
	padding: 0px 10px;
}

.container .login .formbox .inputbox input:focus ~ span,
.container .login .formbox .inputbox input:valid ~ span{
transform: translateY(-20px);
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 1px;
color: #f44336;
font-weight: 500;
}

.container .login .formbox .inputbox input[type="submit"]{
	position: relative;
	cursor: pointer;
	background: #54b154;
	border: none;
	max-width: 100%;
	padding: 8px;
	color: #fff;
	border-radius:5px ;
	transition: .4s;
}
.container .login .formbox .inputbox input[type="submit"]:hover{
	background: #7b89bd;
}

.container .login .formbox a{
   text-decoration: none;
  color: #2b3ae9;
   letter-spacing: 1px;
   font-size: 1.5rem;
   padding: 12px;
} 

.announcements{
    font-family: 'Acme', sans-serif;
    position: absolute;
    right: 39%;
    width: 31%;
    height: 44%;
    background: #0099cc;
    border-radius: 10px;
    margin: 0 10px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 106% 0%);
}

.container .announcements h1{
    position: relative;
    display: flex;
    color: #f44336;
    text-align: center;
    font-weight: 800;
    font-size: 2rem;
    background: #91cde1;
    justify-content: flex-end;
}
.announcements .marquee{
    height: 83%;
    text-align: right;
    position: absolute;
    right: 0;
    width: 72%;
}
.announcements .marquee .text{
    border-bottom: 2px solid #ed3e07;
    font-size: 1.5rem;
    padding: 12px;
    margin: 10px;
}

.announcements .marquee .text h2{
	background: #54b154;
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 500;
	border-radius: 5px;
	padding: 5px;
}

 .slider-wrapper{
    width: 85%;
    height: 100%;
    overflow: hidden;
 }

 .wrapper{
    position: absolute;
    width: 39%;
    height: 44%;
    display: flex;
    animation: slider 20s infinite;
 }

  .slider-wrapper .wrapper img{
  	width: 100%;
  	height: 100%;
  }

 /*@keyframes slider{
 	0%{
        transform: translateX(0);
 	}
 	25%{
 		transform: translateX(0);
 	}
 	30%{
        transform: translateX(-100%);
 	}
 	50%{
        transform: translateX(-100%);
 	}
 	55%{
        transform: translateX(-200%);  
 	}
 	75%{
 		transform: translateX(-200%);
 	}
 	80%{
 		transform: translateX(-300%);
 	}
 	100%{
 		transform: translateX(-300%);
 	}
 }*/

 .container-2{
 	position: relative;
 	display: flex;
 	width: 100%;
 	height: 40vh;
 }

.container-2 .image{
	height: 100%;
}

 .container-2 .image img{
 	height: 100%;
 	padding: 10px 0;
 }

 .container-2 .marquee-2{
 	width: 100%;
 	height: 100%;
 }

  .container-2 .marquee-2 img{
  	height: 56.6vh;
  	padding: 10px 0;
    padding-bottom: 111px;
  }

 footer{
 	display: flex;
 	align-items: center;
 	height: 6vh;
 	font-family: 'Acme', sans-serif;
 	margin: auto;
 	background: #000;
 	font-weight: 700;
 	font-size: 1.5rem;
 	color: #fff;
 	padding: 0 15px;
 	overflow: hidden;
 }

 footer ul{
 	display: flex;
 }

 footer ul li{
 	list-style: none;
 	font-weight: 400;
 	font-size: 1.4rem;
 }

 footer ul li a{
 	text-decoration: none;
 	color: #fff;
 	padding: 0 10px;
 }
 footer .footer-nav{
 	margin: 0 70px;
 }

  footer .footer-nav li a {
  	border-right: 2px solid #fff;
 }

  footer .footer-nav li a:hover{
  	color: #ed3e07 ;
  }

 footer .footer-icon{
 	filter: invert(1);
 }

 footer .footer-icon img{
 	height: 20px;
 	padding:1px;
 	transition: .4s;
 }

  footer .footer-icon li a img:hover{
    transform: scale(1.2);
    background: #ed3e07;
  }

@media (max-width : 1029px){
	html{
		font-size: 57%;
	}
	footer{
		display: flex;
		flex-direction: column;
		height: 15vh;
	}
	footer .footer-nav{
		margin: 15px 0;
	}
}

@media (max-width : 790px){
	.container {
        display: flex;
        height: 92vh;
        flex-direction: column;
     }

    .container .login .login-2 {
        width: 76.5%;
        clip-path: polygon(0% 0%, 0% 100%, 70% 100%, 99% 0%);
        margin-left: 5px ;
     }

     .announcements {
        right: 0;
        width: 45%;
        margin: 0;
     }

     .slider-wrapper {
        padding: 9px 23px;     
        width: 100%;
        height: 105%;
     }

     .wrapper {
        width: 94%;
        height: 50.5%;
     }

     .container-2 {
        margin-top: 42px;
     }
}

@media (max-width : 566px){
    html{
    	font-size: 48%;
    }

	header img{
		height: 40px;
		width: 142px;
	}

	header .w span{
		font-size: 1.2rem;
	}
}

@media (max-width : 414px){
	header {
       display: flex;
       flex-direction: column;
    }

    header .w {
       width: 100%;
    }

    header .w span {
       width: 26%;
    }

    .container{
    	width: 100%;
    	height: 135vh;
    }

    .announcements {
        position: absolute;
        top: 61%;
        clip-path: none;
        width: 100%;
    }

    .announcements .marquee {
        text-align: center;
        width: 100%;
    }

    .container .announcements h1{
    	justify-content: center;
    }

    .container .login .login-2 {
    	width: 98%;
    	clip-path: none;
    }

    .container .login .formbox .inputbox input{
    	width: 94%;
    }

    .container .login .formbox .inputbox span {
    position: absolute;
    left: 0;
    top: 0px;
    }

    .circle {
        clip-path: circle(607px at right 667px);
    }

    .slider-wrapper {
        height: 49%;
        padding: 6px 10px;
    }

    .wrapper{
    	height: 48.5%;
    }

    footer .footer-nav li a {
       font-size: 1.1rem;
       padding: 0 9px;
    }
}

@media (max-width : 360px){
	html{
		font-size: 59% ;
	}
	.container{
		height: 121vh;
	}
	.slider-wrapper {
       height: 34%;
    }

    .wrapper{
    	height: 37%;
    }

    .container-2 {
    margin-top: 42px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    }

    .container-2 .image {
    height: 61%;
    }

    .container-2 .image img {
    	width: 100%;
    }

    footer{
    	height: 19vh;
    }

    footer div{
    	text-align: center;
    }

    footer .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    footer .footer-nav li a {
        padding: 0 5px;
/*        border: none;*/
    }
}

@media (max-width : 250px){
	.announcements {
        position: absolute;
        top: 63%;
    }

    .slider-wrapper {
    padding: 0px 6px;
    }

    footer {
    height: 23vh;
    }
}
        .error {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
        }
        .successText {
            color: #2ecc71;
            font-size: 12px;
            margin-top: 5px;
        }
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
            /* Gradient background */
            background-image: url(/public/assets/bg1.jpg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
            /*background-attachment: fixed;*/
            /*background-size: 200% 200%;*/
            /*animation: gradient 10s ease infinite;*/
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        .login-wrapper {
            display: flex;
            min-height: 100vh;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .login-container {
            display: flex;
            max-width: 1200px;
            width: 100%;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .slider-section, .form-section {
            flex: 1;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .slider-section {
            background: #1a237e; /* Dark blue from image */
            position: relative;
            overflow: hidden;
        }
        .form-section {
            padding: 40px;
        }
        .login-form-container {
            max-width: 400px;
            width: 100%;
        }
        .login-logo {
            text-align: center;
            margin-bottom: 30px;
        }
        .login-logo img {
            max-width: 180px;
        }
        .login-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #2c3e50;
            text-align: center;
        }
        .login-subtitle {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 30px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-control {
            height: 48px;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding-left: 15px;
            width: 100%;
            font-size: 14px;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
        }
        .btn-login {
            background: #FF6B00; /* Orange button color */
            border: none;
            height: 48px;
            border-radius: 6px;
            font-weight: 500;
            margin-top: 20px;
            width: 100%;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-login:hover {
            background: #E55D00; /* Darker orange on hover */
        }
        .login-links {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 13px;
        }
        .login-links a {
            color: #3498db;
            text-decoration: none;
            transition: all 0.3s;
        }
        .login-links a:hover {
            color: #1a5276;
            text-decoration: underline;
        }
        
        /* Slider Styles */
        .slider-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: 100%;
        }
        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(26, 35, 126, 0.7); /* Dark blue overlay */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            text-align: center;
            color: white;
        }
        .slide-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        .slide-content {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
            max-width: 400px;
        }
        .slider-controls {
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 10;
        }
        .slider-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .slider-dot.active {
            background-color: white;
            width: 25px;
            border-radius: 5px;
        }
        
        .contact-info {
            position: absolute;
            bottom: 80px;
            left: 0;
            right: 0;
            text-align: center;
            color: white;
            font-size: 14px;
            z-index: 10;
        }
        .contact-info p {
            margin: 5px 0;
        }
        .contact-info i {
            margin-right: 5px;
            color: #FF6B00;
        }
        
        /* Modal styles */
        .modal-header {
            background: #1a237e;
            color: white;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
            }
            .slider-section, .form-section {
                min-height: auto;
                padding: 30px 20px;
            }
            .slider-container {
                height: 300px;
            }
            .contact-info {
                position: relative;
                bottom: auto;
                margin-top: 20px;
                color: #333;
            }
        }
        
        /* Hide original navbar */
        .navbar {
            display: none;
        }