body{
    align-items: center;
    margin: 10px 10px;
    background: transparent;
    background-repeat: no-repeat;
    position: sticky;
    /* background-color: black; */
    padding: 0px 0px;
    width: 100%;
    /* height: 20rem; */
}
*{
    padding: 0%;
    margin: 0%;
}
/* Code for form in the left side  (A)*/
.conatainer input{
    display: inline-block;
    margin: 20px 50px;
    padding: 15px 15px;
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    text-align: center;
    border:solid rgb(84, 137, 207);
    border-radius: 30px;
    background-color: transparent;

}
 ::placeholder{
    color: rgb(175, 175, 175);

}
input:hover{
    border-radius: 0px;
    background-color: transparent;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   
}
.whole_content{
    /* position: fixed; */
    /* left: 0px; */
}
h1{
     color: rgb(240, 104, 104);
     font-family: 'Courier New', Courier, monospace;
   margin: 10px 78px;
     display: inline-block;
     font-size: 50px;
}
.op{
    border: solid rgb(127, 157, 253) 2px;
    display: inline-block;
    /* left: 0px; */
    background-color:transparent;
    padding: 10px 10px;
    padding-bottom: 10px;
    margin: 0rem 16rem;
    margin-bottom: 10rem;
    display: block;
    float: left;
}
.submit_form{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    padding:10px 10px;
    background-color: salmon;
    margin: 10px 10px;
}
/* -----------------------------Styling for Form completed */
/* Navigation Bar Styling Started (B) */
body{
    background-image: url(bg2.jpg);
    /* background-color: black; */
    }


    .navbar {
    background-color:transparent;
    overflow: auto;
    margin: 10px 12%;
}

.navbar li {
    list-style: none;
    float: left;
    top: 0px;
    padding: 3px;
    /* border: solid blue; */
    padding: 10px 10px;
    margin: 7px 22px;
    color: rgb(235, 235, 235);
    
}
.navbar li:hover{
    color: black;
    
}
#home_li{
    color: black;
}
.navbar hr{
    float: left;
    
width: 23rem;
left: 0px;
top: 0px;
margin: 3rem -25rem;

}

/* --------------------Navigation Bar completed */
.content h2{
    color: rgb(0, 0, 0);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
}
.content p{
    color: white;
    font-family: sans-serif;
    letter-spacing: 2px;
    padding: 10px 10px;
}
.content{
    margin: 10px 10px;
}
.whole_content{
    margin: 10px 10px;
}
.op :hover{
    border-radius: 40px m;
}
.content h2:hover{
    color: solid #d8bcab;
}
h2:hover{
    color: solid #d8bcab;
}
.footer-content{
    float: left;
    margin-top: 13rem;
    background-color: rgb(52 62 243);
    height: 10rem;
}
.footer-content h3{
    color: white;
}
.footer-content {
    float: left;
    margin-top: 13rem;
    background-color: rgb(38 38 38);
    height: 10rem;
}
#submit-form{
    font-family:Lucida sans-serif;
                text-align: center;
                padding:10px 22px;
                background-color: transparent;
                border: solid white;
                color: wheat;
                margin: 17px 67px;
}

#home-nav{
    color: black;
}
/* !)Footer Content */
.footer-content-bottom {
     /* border: solid; */
    /* margin: 1% 1%; */
    margin-top: 35.5rem;
    /* width: 100%; */
    background-color: rgb(38,65,72);
    /* height: 34%; */
    margin-right: 17rem;
    margin: 26rem -1%;
}
.footer-content-bottom h4{
    color: white;
    font-family: 'Mukta', sans-serif;
    /* font-family: 'Odibee Sans', cursive; */
    font-size: 27px;
    letter-spacing: 3px;
    margin-bottom: 31px;
}
#h4_footer{
    font-family: 'Mukta', sans-serif;
    color: rgb(88, 88, 88);
    font-size: 1.2rem;
    cursor: pointer;
}
#h4_footer:hover{
    font-family: 'Mukta', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
}
.whole_content {
    margin: 58px 16px;
    
}
#hr-tag-footer2{
    width: 100%;
}
#youtube_logo{
    height: 3rem;
    width: 4rem;
    /* transition: width 2sec; */
    /* background-color: gray; */
}
#youtube_logo:hover, #facebook_logo:hover,#twitter_logo:hover{
    background-color: rgb(65, 65, 65);
}
#facebook_logo{
    height: 3rem;
    width: 3rem;
    margin: 0px 3rem;
}
#twitter_logo{
    height: 3rem;
    width: 3rem;
}
#hr-tag-footer{
    margin: 1rem 1rem;
    width: 10000rem;
}
.copywright p{
    color: rgb(182 179 177);
font-size: 20px;
font-family: 'Rajdhani', sans-serif;
padding: 2rem 3rem;
display: inline-block;
}
.copywright p:hover{
    color: black;
    cursor: pointer;
}
/* #Adding ANimation/transition */

.navbar li{
    transition: 5s all ;
}
.navbar li:hover{
    /* width: 20rem; */
    /* color: black; */
}

/* -
-------------------------------------Css for styling the website completed(C) */

 
/* Media Query Code(D) */

/* 1] Mobile Phone */
@media (max-width:717px){
    body{
        height: 76rem;
        background-repeat: repeat;

    }
    .op{
        
    margin: 21px 19px;
    }
    
    .navbar{
        background-color: transparent;
        overflow: auto;
        margin: -1px -18px;
    }
    .navbar li{
        padding: 3px;
    /* border: solid blue; */
    padding: 10px 10px;
    margin: 11px 6px;
    color: rgb(235, 235, 235);
    }
    .navbar hr{
        
        float: left;
        width: 17rem;
        left: 0px;
        top: 0px;
        margin: 3rem -18rem;

    }
    .whole_content{
        margin: 17px 22px;
        margin-right: 8rem;
        width: 19rem;
        text-align: center;
    }
    }

 /* ------------------------- for phone */
 
/* 2]Tablet/Ipad */
@media (min-width:719px) and (max-width:1260px) {
    body{
        background-repeat: repeat;
    }
    .navbar li{
        margin:10px 1%;
    }
    .navbar hr{
        margin:1px 19%;
    }
}