profile.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;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 #hero{
    background-image: url('bk.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 850px;
}
#form{
    position: relative;
    top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}



#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: 25%;
    }
    #month{
        width: 35%;
    }
    #year{
        width: 30%;
    }
    #religion{
        width: 90%;
    }
    #caste{
        width: 90%;
    }
    #phoneNo{
        width: 75%
     }
    #country{
        margin-left: 13%;
    }
    #gmail{
        width: 90%;
    }
}
@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;
    }
}










.container > .info-side{
    flex-basis: 75%;
}