/* --------Reseting VAlues------ */

*{
    margin: 0px 0px;
}
/* ------Applying Backgorund */
html{
  scroll-behavior: smooth;
}
body{
    background: rgb(0, 0, 0);
}
header::before{
    content: "";
    background: url(bg.gif) no-repeat;
    position: absolute;
    z-index: -1;
    /* height: 10rem; */
    /* opacity: 1.8; */
    height: 60rem;
    opacity: 0.9;
    width: 100%;
}

    /* Designing NAvigation MEnu */
.navigation{
    /* display: flex; */
    margin: auto;
    position: fixed;
    top: 0px;
    width: 100%;
}
    .navbar{
        display: flex;
        flex-direction: row;
    }
    .logo_name{
        position: relative;
        display: flex;
        flex-direction: column-reverse;   
        align-items: center;
justify-content: center;
margin: auto;
transition: all 1s;
    }
    .logo_name h3{
        font-family: 'Original Surfer', cursive;
        color: rgb(0, 0, 0);
        font-size: 29px;
        cursor: pointer;
    }
    .logo_name h3:hover{
        text-decoration: underline;
    }
    .navbar:before{
        content: "";
    background: rgb(141, 138, 138) ;
    position: absolute;
    z-index: -1;
    /* height: 10rem; */
    /* opacity: 1.8; */
    height: 13rem;
    opacity: 0.8;
    width: 100%;
    }
    #logo_main{
        height: 5rem;
        width: 5rem;
        transition: all 2s;
    }
    #logo_main:hover{
        transform: scale(125%);
    }
 ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#nav_li{
    list-style: none;
    color: rgb(236, 236, 236);
    font-size: 1.5rem;
    margin: 2rem 2rem;
    transition:  all 1s;
    font-family: 'Original Surfer', cursive;
}
#nav_li:hover{
    color: rgb(0, 0, 0);
    border-bottom: solid rgb(245, 243, 243) 3px;
    
}
a{
text-decoration: none;

}

/* -------Content of the website */

.content-in-the-section{
display: flex;
flex-wrap: wrap;
margin-top: 20rem;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.content-in-the-section h3{
    font-family: cursive;
color: rgb(221, 221, 231);
font-size: 3rem;
transition: all 1s;
}
.content-in-the-section h3:hover{
    transform: scale(105%);
}
.content-in-the-section p{
    /* font-family: sans-serif; */
    font-size: 26px;
    color: black;
    /* width: 88rem; */
    text-align: center;
    margin-bottom: 1rem;

    font-family: sans-serif;
}
#learn-more_button{
    padding: 1rem 2rem;
    border-radius: 34px;
    text-align: center;
    border: none;
    color: #ffff;
    /* font-family: sans-serif; */
    font-family: 'Original Surfer', cursive;

    cursor: pointer;
    /* color: transparent; */
    font-size: 1.5rem;
    transition: all 1s;
    background-color: purple;
    
}
#learn-more_button:hover{
    transform: scale(125%);
    /* transform: rotate(360deg); */
}
/* ---------Projects Section */
.project-section{
    margin: 21.1rem 0rem;
    background-color: rgb(99, 99, 99);
    border-bottom: solid;
}

.img_project_style{
    height: 15rem;
    width: 26rem;
    border-radius: 20px;
    transition:  all 1s;
    border:  solid black;

    margin: 2rem 2rem;
}
.img_project_style:hover{
    border-radius: 0px;
}
.flex-items{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* border: solid rgb(0, 0, 0); */
}

#heading_project{
    background: rgb(165, 165, 165);
    padding: 3rem 2rem;
    font-size: 3rem;
    color: royalblue;
    margin-bottom:4rem ;
    border:  solid black;
    margin-top: 5rem;
    font-family: 'Original Surfer', cursive;

}
.flex-items h3{
    font-family: 'Original Surfer', cursive;
color: rgb(223, 215, 215);
cursor: pointer;
transition: text-decoration 2s;
}
.flex-items h3:hover{
    text-decoration: underline;
}
/* -------Designing Contact Form */
.contact-form-in-the-bottom::before{
    content: "";
    background: url(contbg.jpg) no-repeat;
    position: absolute;
    z-index: -1;
    /* height: 10rem; */
    /* opacity: 1.8; */
    height: 40rem;
    opacity: 0.9;
    width: 100%;
}
.contact-form-in-the-bottom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form_contact{
    background: rgb(45,58,75);
    padding: 3rem 3rem;
}
#heading_2,#heading_1{
    color: white;
    font-size:2rem;
    font-family: 'Original Surfer', cursive;

}
.heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form_inputs_contact{
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}
.form_inputs_contact input{
width: 10rem;
margin-bottom: 1rem;
padding: 10px 2rem;
background: rgb(45,58,75);
border-top:none ;
border-right: none;
border-left:none ;

}
.form_inputs_contact ::placeholder{
    text-align: center;
    font-size:17px ;
    font-weight: bold;
}
.form_inputs_contact textarea{
    width: 40rem;
    height: 10rem;
    margin-bottom: 1rem;
    /* padding: 10px 2rem; */
    background: rgb(128, 129, 131);
    /* border-top:none ;
    border-right: none;
    border-left:none ; */
    color: whitesmoke;
    font-family: 'Original Surfer', cursive;
text-align: center;
font-size: 20px;
    
    }
    #submit_cont{
        font-size: 1rem;
        text-align: center;
        transition: all 1s;
        /* animation: all 2s; */
       background: rgb(91, 112, 139);

        border-radius: 20px;
        cursor: pointer;
    }
    #submit_cont:hover{
        border-radius: 0px;
        background: black;
        color: white;
    }
    /* -----ABout Section */
    
    .about-section-bottom{
        margin: 9rem 7rem;
        font-family: sans-serif;
        border-radius: 3rem;
        color: rgb(212, 212, 212);
        border: solid rgb(146, 146, 146);
        background-color: rgb(44, 46, 44);
        padding: 2rem 2rem;


    }
    #heading_about{
        font-size: 2rem;
    }
    #heading_about{
        background-color: grey;
        font-family: cursive;
        font-size: 15px;
    }
    .heading h3{
        font-size: 4rem;
        font-family: sans-serif;
        font-family: cursive;
    }
    .info p{
        font-family: cursive;
        text-align: center;
        font-size: 1.2rem;
    }
    #about_image{
        height: 14rem;
        width: 9rem;
        margin-top: 3rem;
    }
    /* ------MAking website Responsive */
    @media (max-width:520px){
       
        header::before{
            content: "";
            background: url(bg.gif) no-repeat;
            position: absolute;
            z-index: -1;
            /* height: 10rem; */
            /* opacity: 1.8; */
            height: 60rem;
            opacity: 0.6;
            width: 200%;
        }
        .content-in-the-section h3 {
            font-family: cursive;
            color: rgb(221, 221, 231);
            font-size: 3rem;
            /* transition: all 1s; */
            width: -2rem;
            width: 33rem;
        }
     .heading_top{
         width: 40rem;
     }
     .content-in-the-section p {
        /* font-family: sans-serif; */
        font-size: 26px;
        color: black;
        width: 38rem;
        text-align: center;
        margin-bottom: 1rem;
        font-family: sans-serif;
    }
    #heading_project {
        background: rgb(165, 165, 165);
        padding: 3rem 2rem;
        font-size: 3rem;
        color: royalblue;
        margin-bottom: 4rem;
        border: solid black;
        margin-top: 5rem;
        font-family: 'Original Surfer', cursive;
        width: 37rem;
    }
    .project-section {
        margin: 21.1rem 0rem;
        /* background-color: rgb(99, 99, 99); */
        border-bottom: solid;
    }
    .flex-items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        /* border: solid rgb(0, 0, 0); */
        width: 40rem;
    }
    #heading_project {
        /* background: rgb(165, 165, 165); */
        padding: 3rem 2rem;
        font-size: 3rem;
        color: royalblue;
        margin-bottom: 4rem;
        border: solid black;
        margin-top: 5rem;
        font-family: 'Original Surfer', cursive;
        width: 41rem;
    }
    .flex-items h3 {
        font-family: 'Original Surfer', cursive;
        color: rgb(223, 215, 215);
        cursor: pointer;
        transition: text-decoration 2s;
        font-size: 2rem;
        
    }
    .contact-form-in-the-bottom::before {
        content: "";
        background: url(contbg.jpg) no-repeat;
        position: absolute;
        z-index: -1;
        /* height: 10rem; */
        /* opacity: 1.8; */
        height: 40rem;
        opacity: 0.9;
               width: 200%;

    }
    .info p {
        font-family: cursive;
        text-align: center;
        font-size: 2rem;
        width: 39rem;
        margin: 1rem -2rem;
    }
    .about-section-bottom {
        margin: 5rem 2rem;
        font-family: sans-serif;
        border-radius: 3rem;
        color: rgb(212, 212, 212);
        border: solid rgb(146, 146, 146);
        background-color: rgb(44, 46, 44);
        padding: 2rem 2rem;
        width: 35rem;
    
    }
    .heading h3 {
        font-size: 3.5rem;
        font-family: sans-serif;
        font-family: cursive;
        width: 38rem;
    }
    #about_image {
        height: 20rem;
        width: 13rem;
        margin-top: 3rem;
    }
    #heading_about {
        background-color: black;
        font-family: cursive;
        font-size: 15px;
        width: 150%;
        color: white;
        font-size: 2rem;
    }
    .img_project_style {
        height: 15rem;
        width: 28rem;
        border-radius: 20px;
        transition: all 1s;
        border: solid black;
        margin: 2rem 2rem;
    }
}