
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-style: normal;
}

.active {
    color: red; /* Highlight active link */
    font-weight: bold;
    }

   
@media screen and (max-width: 900px){
	.header-title{
		font-size: 20px;
	}
}
header{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    background-color: #000;
    position: sticky;
    nav{
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        align-items: center;
        .image{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px;
            img{
                width: 120px;
            }
        }

        ul{
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;
            margin: 1px;
            padding: 1px;
            li{
                list-style: none;
                text-transform: uppercase;
                a{
                    color: #fff;
                    text-decoration: none;
                    transition: color 0.3s ease;
                }
                a:hover{
                    color: red;
                }
            }
        }
    }
}

main{

    .container{
        h2{
            margin-top: 20px;
        }
    }
}

/* Login CSS */
.mother{
    background-image: url("../images/360_F_562312325_RcbmdU4btCOrL6OlNWicEPXktmD8EUC8.jpg");
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .second-wrapper{
        /* width: 800px;
        height: 400px; */
        background-color: rgba(255, 255, 255, 0.7);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
        padding: 2%;
        gap: 3rem;

        .child-1{
            
            form{
                background-color: #00000098;
                padding: 20px;
                color: #fff;
                width: 350px;
                .logo{
                    width: 60%;
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 5px;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .input-div{
                    h3{
                        text-align: center;
                    }

                    p{
                        color: red;
                        text-align: center;
                        /* display: none; */
                        font-size: 13px;
                    }
                    label{
                        font-size: 13px;
                       }
                }

                .button-div{
                   margin-top: 20px;

                 
                    button{
                        background-color: #000;
                        border: none;
                        color: #fff;
                        width: 100%;
                        padding: 8px;
                        border-radius: 5px;
                        font-size: 13px;
                        cursor: pointer;
                        transition: background-color 0.3s ease;
                        &:hover{
                            background-color: red;
                            color: #fff;
                        }
                    }

                    .forgot-password{
                        text-align: center;
                        font-size: 13px;
                        margin-top: 5px;
                    }
                }
                
            }
        }
    }

    
}