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

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

    /* 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{
        letter-spacing: 5px;
          font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-size: 2.5rem;
  letter-spacing: 5px;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
    
        color:rgb(0, 0, 0);
        font-size:30px;
        cursor:pointer;
    
    }
    .logo_name h3:hover{
        text-decoration: underline;
    }
    .navbar:before{
        content: "";
    background: #4c4c4c ;
    position: absolute;
    z-index: -1;
    /* height: 10rem; */
    /* opacity: 1.8; */
    height: 100%;
    opacity: 0.8;
    width: 100%;
    }
    #logo_main{
        height: 45%;
        width:25%;
        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: 17px;
    margin: 2rem 2rem;
    letter-spacing: 5px;
    transition:  all 0.8s;
      font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: 950;
  /* font-size: 2rem; */
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;

}
#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{
  margin-bottom: 20px;
color: rgb(255 255 255);
font-size: 3.56rem;
transition: all 1s;
font-family: "Handjet", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-variation-settings:
  "ELGR" 1,
  "ELSH" 2;
  letter-spacing: 11px;
  /* font-size: 4rem; */
  font-weight: 800;
  
}
.content-in-the-section h3:hover{
    transform: scale(105%);
}
.content-in-the-section p{
    font-family: sans-serif; */
    font-size: 22px;
    color: #00FFC6;
    text-align: center;
    margin-bottom: 1rem;
    font-family: "Handjet", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: <weight>; */
    font-style:normal;
    font-variation-settings: "ELGR" 1, "ELSH" 2;
    /* font-size:2rem; */
    letter-spacing: 4px;
    font-style:italic;
    font-weight: 600;
    font-size: 22px;
    
}
#learn-more_button{
    padding: 15px 20px;
    border-radius: 34px;
    margin-bottom: 8px;
    text-align: center;
    border: none;
    color: #ffff;
    /* font-family: sans-serif; */
    font-family: "Handjet", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "ELGR" 1, "ELSH" 2;
    cursor: pointer;
    /* color: transparent; */
    font-size: 20px;
    transition: all 1s;
    background-color: purple;
    letter-spacing: 2px;
    font-weight: 700
}
#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: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;

}
.flex-items h3{
      font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
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: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;

}
.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: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
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:344px){
       
        header::before{
            content: "";
            background: url(BG_6_WIZ.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: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
        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: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
        width: 41rem;
    }
    .flex-items h3 {
          font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
        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;
    }
}
/* !)Footer Content */
.footer-content-bottom {
    /* border: solid; */
   /* margin: 1% 1%; */
   margin-top: 35.5rem;
   /* width: 100%; */
   background-color: rgb(26 30 31);
   /* 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; */
}

*{
    margin: -2px 0px;
    border: transparent;
}
/* -