index.css

.navbar{
    /* position: fixed; */
    display: flex;
    justify-content: space-between;
    transition-duration: .5s;
    border-bottom: 3px gray solid;
}
.home,.about,.login,.blog,.contact{
    padding-left: 25px;
    padding-right: 25px;
    color: black;
    text-decoration: none;
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* transition-duration: .5s; */
}
.twitter,.instagram,.facebook{
    padding-left: 5px;
    padding-right: 5px;
    transition-duration: .5s;
}

.company_name{
    padding-left: 10px;
    color: black;
    font-size: xx-large;
    font-weight: bolder;
    text-decoration: none;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    font-family: Georgia, 'Times New Roman', Times, serif;
    transition-duration: .5s;
}
.home:hover,.about:hover,.login:hover,.blog:hover,.contact:hover{
    border-bottom: 4px black solid;
    padding-bottom: 8px;
    /* transition-duration: .5s; */
    /* font-weight: bold; */
}

.toggle-button{
    position: absolute;
    top:0.75rem;
    right:1rem;
    padding:1rem;
    display:none;
    font-size: xx-large;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:30px;
    height:21px;

} 
.bar{
    width:100%;
    height:3px;
    background-color: black;
    display: none;
}
@media (max-width:945px) {
    .nav_items_2{
        display: none;
    }
    .toggle-button,.bar{
        display: flex;
    }
    .toggle-button:hover{
        background-color: white;
        border-radius: 5px;
    }
}
.flex_container_1{
    display: flex;
    justify-content: space-between;
    transition-duration: .5s;
}
.flex_container_1_item_1,.flex_container_1_item_2{
    padding: 30px;
    transition-duration: .5s;
}
.flex_container_1_item_1_point1{
    text-align: center;
    font-size: xx-large;
    font-weight: bolder;
    transition-duration: .5s;
}
.flex_container_1_item_1_point2{
    /* text-align: center; */
    font-size: x-large;
    transition-duration: .5s;
}
@media (max-width:656px) {
    .flex_container_1{
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media (max-width:450px) {
    .flex_container_1_item_1_point2{
        font-size:5vw;
    }
}
@media (min-width:656px) {
    @media (max-width:1181px) {
        .flex_container_1_item_1_point2{
            font-size:2.5vw;
        }
    }
    
}
.get_started_button{
    color: white;
    background-color: black;
    border-radius: 5px;
    border:5px black solid;
    padding: 5px;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
}
.flex_container_2{
    display: flex;
    justify-content: space-between;
    transition-duration: .5s;
}
.flex_container_2_item_2_point1{
    font-size: 20px;
    font-weight: bolder;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}
.flex_container_2_item_2_point2{
    font-size: 50px;
    font-weight: bolder;
    font-family:Georgia, 'Times New Roman', Times, serif ;
    text-align: center;
}
.flex_container_2_item_2_point3{
    font-size: 30px;
}
.flex_container_2_image{
    width: 40vw;
    height: 30vw;
}
.flex_container_2_item_1,.flex_container_2_item_2{
    padding: 30px;
}
@media (max-width:1267px){
    .flex_container_2_item_2_point3{
        font-size: 2vw;
    }
    .flex_container_2_item_2_point2{
        font-size: 3vw;
    }
}
@media (max-width:656px) {
    .flex_container_2{
        flex-wrap: wrap-reverse;
        justify-content: center;
    }
    .flex_container_2_image{
        height: 80%;
        width:80%;
    }
    .flex_container_2_item_2_point3{
        font-size: 25px;
    }
    .flex_container_2_item_2_point2{
        font-size: 40px;
    }
    
}
@media (max-width:362px) {
    .flex_container_2_item_2_point3{
        font-size: 20px;
    }
    .flex_container_2_item_2_point2{
        font-size: 20px;
    }
}
.flex_container_2_item_2_button_division{
    display: flex;
    justify-content: space-around;
}
.flex_container_2_button_1{
    text-decoration: none;
    font-size: 20px;
    color: white;
    background-color: black;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 10px;
    border-radius: 4px;
}
.flex_container_2_button_2{
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: bolder;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 10px;
    border-radius: 4px;
    background-color:gainsboro;
}
@media (max-width:941px){
    @media (min-width:656px) {
        .flex_container_2_item_2_button_division{
            flex-wrap: wrap;
            justify-content:center;
        }
    }
}
@media (max-width:538px) {
    .flex_container_2_item_2_button_division{
        flex-direction: column;
        justify-content:center;
    }
}
@media (max-width:325px) {
    .flex_container_2_button_2{
        font-size: 5vw;
    }
}
.services{
    font-size: larger;
    font-weight: bolder;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}
.check_services{
    font-size:30px;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}
.flex_container_3{
    display: flex;
    justify-content: space-around;
    padding: 5px;
}
.flex_container_3_item_1{
    background-color: black;
    padding: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 5px 5px grey ;
    /* width: fit-content; */
}
.flex_container_3_item_1_point1{
    color: white;
    text-align: center;
    font-size: x-large;
}
.flex_container_3_item_1_point2{
    color:darkgrey;
    text-align: center;
    font-size: larger;
}
.flex_container_3_item_1_point3{
    background-color: white;
    color: black;
    border: 8px;
    padding: 10px;
    font-size: 20px;
    text-decoration: none;
}
.flex_container_3_item_2_point1{
    color: black;
    text-align: center;
    font-size: x-large;
}
.flex_container_3_item_2{
    background-color: whitesmoke;
    padding: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 5px 5px grey;
    /* width: fit-content; */
}
.flex_container_3_item_2_point2{
    color:black;
    text-align: center;
    font-size: larger;
}
.flex_container_3_item_2_point3{
    background-color: white;
    color: black;
    border: 8px;
    padding: 10px;
    font-size: 20px;
    text-decoration: none;
}
@media (max-width:940px) {
    .flex_container_3{
        flex-direction:column;
        text-align: center;
        justify-self: center;
    }
    .flex_container_3_item_1{
        align-self: center;
    }
    .flex_container_3_item_2{
        align-self: center;
    }
}
@media (max-width:506px) {
    .flex_container_3_item_1_point2{
        font-size: 4vw;
    }
    .flex_container_3_item_2_point2{
        font-size: 4vw;
    }
    .flex_container_3{
        padding: 10px;
    }
    .flex_container_3_item_1_image{
        width: 60%;
        height:60%;
    }
    .flex_container_3_item_2_image{
        width: 60%;
        height:60%;
    }
    .check_services{
        font-size: x-large;
    }
}
@media (max-width:387px) {
    .flex_container_3_item_1_point2{
        font-size: 3vw;
    }
    .flex_container_3_item_2_point2{
        font-size: 3vw;
    }
}
.container_3_heading{
    text-align: center;
    font-size: xx-large;
    font-weight: bolder;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.container_3_flex_container{
    display: flex;
    justify-content: space-between;
    padding: 40px;
}
.container_3_flex_container_image{
    width: 250px;
    height: 250px;
    border-radius: 50%;
}
.container_3_flex_container_point1{
    font-size: large;
    /* font-weight: bolder; */
    color: gray;
    text-align: center;
}
.container_3_flex_container_point2{
    text-align: center;
    font-size: xx-large;
    color: black;
    font-weight: bolder;
}
.container_3_flex_container_point3{
    font-size: large;
    /* font-weight: bolder; */
    color: gray;
    text-align: center;
}
@media(max-width:990px){
    .container_3_flex_container{
        flex-direction: column;
    }
    .container_3_flex_container_image{
        width: 250px;
        height:250px;
    }
    .container_3_flex_container_flex{
        display: flex;
        justify-content: space-around;
    }
}
@media (max-width:620px) {
    .container_3_flex_container_image{
        width:150px;
        height:150px;
    }
}
@media (max-width:420px) {
    .container_3_flex_container_image{
        width:100px;
        height:100px;
    }
    .container_3_flex_container_point2{
        font-size: large;
    }
    .container_3_flex_container_point1{
        font-size: medium;
    }
    .container_3_flex_container_point3{
        font-size: medium;
    }
}
@media (max-width:369px) {
    .container_3_flex_container_flex{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .container_3_flex_container_image{
        padding-left: 4vw;
        padding-right: 4vw;
    }
}
.flex_container_4{
    display: flex;
    justify-content: space-around;
    background-color: black;
}
.greetings{
    font-size:40px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 900;
    color: white;
}
.password_heading{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: small;
    color: white;
}
.login_heading{
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 900;
    color: white;
}
.username_heading{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: small;
    color: white;
}
.username_textbox{
    border-bottom: white solid 4px;
    border-style: dotted;
    border-top: black solid;
    border-left: black solid;
    border-right: black solid;
    background-color: black;
}
.password_textbox{
    border-bottom: white solid 4px;
    border-style: dotted;
    border-top: black solid;
    border-left: black solid;
    border-right: black solid;
    background-color: black;
}
.forgot_password_button{
    text-decoration: none;
    color: grey;
}
.login_button{
    background-color: white;
    border-radius: 4px;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-size:x-large;
    text-decoration: none;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: black;
}
.create_account{
    text-decoration: none;
    color: grey;
}
.flex_container_4_container1{
    padding: 10px;
}
@media (max-width:958px) {
    .flex_container_4{
        flex-direction: column;
        flex-wrap: wrap-reverse;
        justify-content: center;
    }
    .flex_container_4_container1{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .forgot_password_button{
        text-align: center;
    }
    .login_button{
        text-align: center;
    }
    .create_account{
        text-align:center;
    }
}
input{
    color: white;
}
@media (max-width:658px){
    .flex_container_4_image{
        width:400px;
        align-self: center;
    }
}
@media (max-width:438px) {
    .flex_container_4_image{
        width:250px;
    }
}
@media (max-width:360px) {
    .flex_container_4_image{
        width:250px;
    }
    .greetings{
        font-size: xx-large;
    }
}
.container_5{
    padding: 30px;
}
.container_5_heading{
    font-size: xx-large;
    font-weight: 900;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container_5_flex_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container_5_flex_container_1_point1,.container_5_flex_container_2_point1,.container_5_flex_container_3_point1{
    font-size: xx-large;
    font-weight: 900;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container_5_flex_container_1_point2,.container_5_flex_container_2_point2,.container_5_flex_container_3_point2{
    font-size: large;
    font-weight: 900;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container_5_flex_container_1_point3,.container_5_flex_container_2_point3,.container_5_flex_container_3_point3{
    font-size: small;
    font-weight: 900;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
}
.container_5_flex_container_3_button{
    font-size: larger;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: black;
    border-radius: 5px;
}
.container_5_flex_container_2_button{
    font-size: larger;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: black;
    border-radius: 5px;
}
.container_5_flex_container_1_button{
    font-size: larger;
    text-decoration: none;
    color: black;
    font-weight: 500;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    border-radius: 5px;
}
.container_5_flex_container_1{
    background-color: black;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 10px;
}
.container_5_flex_container_1_point2,.container_5_flex_container_1_point1,.container_5_flex_container_1_point3{
    color: white;
    /* border-radius: 10px; */
}
.container_5_flex_container_2{
    background-color:whitesmoke;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 10px;
}
.container_5_flex_container_3{
    background-color:whitesmoke;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 10px;
}
@media (max-width:400px) {
    .container_5_flex_container_1_point3,.container_5_flex_container_2_point3,.container_5_flex_container_3_point3{
        font-size: 2vw;
        font-weight: 900;
        /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    }
    .container_5_flex_container_1_point2,.container_5_flex_container_2_point2,.container_5_flex_container_3_point2{
        font-size: small;
        font-weight: 900;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
}
.container_6{
    display: flex;
    justify-content: space-around;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
}
.container_6_container_2_point1{
    font-size: xx-large;
    font-weight: 900;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;
}
.container_6_container_2_point2{
    font-size: x-large;
    font-weight: 900;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;
}
.container_6_container_2_point3{
    font-size: large;
    font-weight: 500;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: grey;
}
.container_6_container_2_flex_container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.container_6_container_2_flex_container_text1{
    width: 120px;
    height: 20px;
    border: grey solid;
    border-radius: 5px;
    background-color: black;
}
.container_6_container_2_flex_container_text2{
    width:200px;
    height: 20px;
    border: grey solid;
    border-radius: 5px;
    background-color: black;
}
.container_6_container_2_message{
    text-align: center;
    border: white;
}
.container_6_container_2_button{
    text-decoration: none;
    font-size: x-large;
    background-color: white;
    color: black;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.container_6_container_2_message_box_1{
    background-color: black;
    border: grey solid 5px;
    border-radius: 5px;
}
.container_6_container_2_message_box_2{
    background-color: black;
    border: grey solid 5px;
    border-radius: 5px;
    display: none;
}
.container_6_container_2_message_box_1,.container_6_container_2_message_box_2{
    color: grey;
}
@media (max-width:1010px) {
    .container_6{
        flex-direction:column;
        justify-content: center;
    }
    .container_6_image_division{
        text-align: center;
    }
}
@media (max-width:535px) {
    .container_6_container_2_message_box_1{
        display: none;
    }
    .container_6_container_2_message_box_2{
        display: flex;
    }
    .container_6_image{
        width: 60%;
        height:60%;
    }
    .container_6_container_2_point1{
        font-size: larger;
    }
    .container_6_container_2_point2{
        font-size: large;
    }
    .container_6_container_2_point3{
        font-size: medium;
    }
}
.send_button_division{
    text-align: center;
}
.container_6_container_2_flex_container{
    text-align: center;
}
.footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white;
    padding: 20px;
    border-bottom: 3px black solid;
}
.footer_container_1_point1{
    font-size: x-large;
    font-weight: 900;
}
.footer_container_1_point4,.footer_container_1_point3,.footer_container_1_point2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: gray;
    font-weight: bolder;
}
.footer_home,.footer_about,.footer_login,.footer_contact,.footer_blogs{
    text-decoration: none;
    font-size: larger;
    color: gray;
    font-weight:200;
}
.footer_container_2_point1{
    font-size:x-large;
    font-weight: bolder;
}
.last_line{
    color: black;
    font-weight: bolder;
}
.footer_container_3_point1{
    font-size:x-large;
    font-weight: bolder;
}
.footer_container_3_point2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: gray;
    font-weight: bolder;
}
.footer_container_3_flex_container_store{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer_container_3_flex_container_subscribe_item1{
    height: 30px;
    border: gray solid;
}
.footer_container_3_flex_container_store_image_1,.footer_container_3_flex_container_store_image_2{
    padding: 5px;
}
@media (max-width:895px) {
    .footer{
        flex-direction: column;
        justify-content: center;
    }
    .footer_container_1,.footer_container_2,.footer_container_3{
        text-align: center;
    }
    .footer_container_3_flex_container_subscribe{
        text-align: center;
    }
    .footer_container_3_point2{
        font-size: medium;
    }
}