style.css

/* google fonts link */
@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');

*{
    font-family: "Poppins", sans-serif;
}
img{
    -webkit-user-drag: none;
    user-select: none;
}
#into1,
#info2,
#info3,
#info4,
#info5,
#info6,
#info7,
#info8,
#info9,
#info10{
    margin: auto;
}
#hero{
    background-image: url('./images/bk.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    padding: 150px 50px 150px 50px;
}
#form{
    width: 550px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}
#about{
    background-image: url('./images/bk2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    /* height: 1300px; */
    padding-top: 50px;
    padding-bottom: 100px;
}
#filter{
    /* height: 150px; */
    width: 83%;
    margin-top: -130px;
    margin-left: 20px;
    margin-right: 20px;
    margin: auto;
}
#profiles{
    height: 400px;
}
#profile-info{
    margin-bottom: 150px;
}
#profile-info img{
    width: 200px;
    height: 200px;
}
/* #design{
    position: relative;
    top: -280px;
} */
#design img{
    width: 100%;
    /* height: 250px; */
    margin-top: -100px;
}
#about input,
#about select{
    background-color: rgb(241, 241, 241);
    padding: 5px 10px;
    border-radius:5px;
}
.caste{
    width: 180px!important;
}
label{
    font-weight:600;
}
#member1{
    background-image: url('images/member1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member2{
    background-image: url('images/member2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member3{
    background-image: url('images/member3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member4{
    background-image: url('images/member4.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member5{
    background-image: url('images/member1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member6{
    background-image: url('images/member2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member7{
    background-image: url('images/member3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
#member8{
    background-image: url('images/member4.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 10px;
    border-image: fill 0 linear-gradient(#0001, #000);
}
.active {
    background-color: #d1d5db !important; /* Gray 300 */
  }
#news-btn{
    position: relative;
    right: 5px;
    top: 1px;
}
#f1{
    width: 20%;
}
#f2{
    width: 15%;
}
#f3{
    width: 30%;
}
#f4{
    width: 25%;
}

@media (max-width: 580px) {
    #f1{
        width: 100%;
    }
    #f2{
        width: 100%;
    }
    #f3{
        width: 100%;
    }
    #f4{
        width: 100%;
    }
    #footer-container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
/* Target smaller screens first */
@media (max-width: 1050px) and (min-width: 580px){
    #f1{
        width: 55%;
    }
    #f2{
        width: 45%;
    }
    #f3{
        width: 55%;
    }
    #f4{
        width: 45%;
    }
}
input:focus {
    border-color: #d1d5db!important; /* Change this to your desired color */
    box-shadow: 0 0 20px #fff; /* Add a box shadow for visual effect */
}
@media (min-width: 1024px){
    #day{
        width: 18%;
    }
    #month{
        width: 35%;
    }
    #year{
        width: 30%;
    }
    #religion{
        width: 85%;
    }
    #caste{
        width: 85%;
    }
    #phoneNo{
        width: 70%
     }
    #country{
        margin-left: 13%;
        width:90%;
    }
    #gmail{
        width: 85%;
    }
}
@media screen and (max-width: 768px){
    

    #hero {
        height: auto;
        padding: 40px 20px;
        padding-bottom: 100px;
        display: flex;
        justify-content: center;
        padding-top: 100px;
    }
    #form{
        justify-content: center;
        /* width: 93%; */
        padding: 20px 20px;
        /* padding: 10px 30px; */
    }
    /* #form p{
        margin-left: -30px;
    } */
     select,
     input[type = number],
     input[type = text]{
        width: 85%;
     }
     #countryCode{
        width: 20%!important;
     }
     #firstName,
     #lastName{
        width: 42.5%;
     }
     #day{
        width: 23%;
     }
     #month{
        width: 30%;
     }
     #year{
        width: 30%;
     }
     /* #age,
     #lastName,
     #month,
     #year,
     #country{
        width: 90%!important;
     } */
     #phoneNo{
        width: 63%!important;
     }
     #gmail{
        width: 85%;
     }
     /* #into1,
     #info2,
     #info3,
     #info4,
     #info5,
     #info6,
     #info7,
     #info8,
     #info9,
     #info10
     } */
     #filter{
        margin-top: -90px;
    }
    #design img{
        margin-top: 20px;
    }
    #filter1,
    #filter2,
    #filter3,
    #filter4{
        width: 100%;
    }
    #filter select{
        width: 100%!important;
    }
    #member5,
    #member6,
    #member7,
    #member8{
        display: none;
    }
}


.block{
	display: block;
}
.hidden{
	display:none;
}