@media (max-width: 1200px) {

    body {

        /* background: black; */
    }

    header {

        /* margin: 3vh 2vw; */
        position: relative;
        top: 20px;
        z-index: 10;
        /* border: 2px solid white; */
        /* filter: blur(10px);  */


    }

    /*************** off screen menu ********************/



    .off_screen_menu {
        
        display: flex;
        background-color: rgba(41, 41, 41, 0.842);
        height: 100%;
        width: 100%;
        max-width: 300px;
        position: fixed;
        top: 10%;
        right: -300px;  
        display: flex;
        justify-content: left;
        align-items: start;
        font-size: 1.3rem;
        transition: .3s ease;
        
        

    }
    .off_screen_menu.active{
        /* background-color: rgb(224, 0, 0);    */
        right: 0px;
    }

    .off_screen_menu li {

        list-style: none;
    }

    .off_screen_menu li a {
        text-decoration: none;
        color: white;
    }


    nav {
        height: 50px;
    }   

    .short_heading {
        display: flex;
        margin-left: 4vw;
        font-size: 1.3rem;
    }

    nav .Heading {
        display: none;
    }

    .menu_icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
        height: 40px;
        width: 40px;
        position: relative;
        margin-left: auto;
        margin-right: 15px;

    }

    .menu_icon span{
        /* border: 1px solid white; */
        height: 5px;
        width: 30px;
        border-radius: 5px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%); 
        transition:.3s ease;
    }
    .menu_icon span:nth-child(1){
        top: 30%;

    }
    .menu_icon span:nth-child(3){
        top: 70%;   

    }
    .menu_icon.active{
        z-index: 10;
    }
    .menu_icon.active span:nth-child(1){
        top: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
        /* z-index: 10; */
    }
    .menu_icon.active span:nth-child(2){
        opacity: 0;
    }

    .menu_icon.active span:nth-child(3){
        top: 50%;
        transform: translate(-50%,-50%) rotate(-45deg);
        /* z-index: 10; */
    }

    nav .right {
        display: none;
    }

    main hr {
        border: 0;
        border-radius: 100%;
        background: rgb(131, 91, 250);
        height: 3px;
        margin: auto 20px;

    }

    .firstsection {
        justify-content: space-around;
        flex-direction: column;
        display: flex;
        margin: 10px;
    }

    .leftsection {
        /* background-color: black; */
        font-size: 1.5rem;
        margin: 30px;
        /* background-color: black; */

    }

    .rightsection {
        /* background-color: black; */
        display: flex;
        justify-content: center;


    }

    .rightsection img {

        margin: 0px 60px;
        width: 80%;

    }

    .firstsection>dev {
        width: 30%;

    }

    .purple {
        color: rgb(255, 145, 42);
    }

    #element {
        color: rgb(134, 132, 255);
    }

    .secondsection {
        margin: 40px;
        /* color: rebeccapurple; */
    }

    .text_gray {
        color: gray;
    }

    .contact_div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .contact_info {
        display: none;
    }

    /******************* Contact container *******************/

    main .contact_container {
        /* height: 100vh; */
        display: flex;

        /* justify-content: space-evenly; */
        /* align-items: first baseline; */
        margin-top: 5%;

    }



    /****************** footer start *********************/


    footer {
        position: relative;
        /* flex-grow: 1; */
        /* flex-shrink: 1; */
        display: flex;
        /* width: 100vw; */
        /* flex-shrink: 1; */
        background-color: rgba(44, 44, 44, 0.57);
        justify-content: center;
        align-items: center;
        height: 300px;
        padding: 0;
        margin: 0;

        /* border-radius: 40px; */



    }

    footer * {
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        justify-content: center;
        align-items: center;
        /* flex-grow: 1; */
    }

    footer ul {
        /* border: 1px solid rgb(255, 192, 2); */
    }

    footer ul li {
        list-style: none;
        flex-shrink: 1;
        /* border: 1px solid rgb(0, 255, 47); */
    }

    footer ul li a {

        text-decoration: none;
        color: white;
        /* border: 1px solid rgb(255, 255, 255); */
    }

    footer .vl {
        display: none;
        height: 20px;
        width: 2px;
        background-color: red;
    }

    footer .quickLinks {
        position: relative;
        left: 0px;
        bottom: -30px;
        /* width: 100%; */
        /* left: 30px; */
        padding-top: 0px;
        /* margin-top: 20px; */
        /* display: flex; */
        height: 50px;
        width: 90%;
        /* justify-content: start; */
        /* align-items: center; */
        /* border: 1px solid red; */
        font-size: 0.8rem;
        /* padding: 20px; */

    }

    footer .quickLinks ul {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: inherit;
        /* width: inherit; */
        /* border: 2px solid rgb(0, 255, 34); */
        /* margin-top: 30px; */

    }

    footer .quickLinks ul li {

        /* align-items: start; */
        /* justify-content: start; */
        /* border: 2px solid gray; */
        margin: 00px 8px;
        /* padding-right: 8px; */
        /* border-right: 2px solid rgb(83, 83, 83);     */

    }




    footer .socialMediaLinks {
        /* position: absolute; */
        bottom: 30px;
        /* right: 20px; */
        /* left: 0px; */
        /* height: inherit; */
        /* margin: 30px; */
        /* border: 2px solid rgb(255, 0, 0);     */
        /* justify-self: end; */
        /* align-self: end; */
        /* padding: 0px 23px 23px 23px; */
    }

    footer .socialMediaLinks ul {

        /* margin: 20px    0px; */
        flex-direction: row;

        /* border: 2px solid rgb(0, 255, 8);  */
    }

    footer .socialMediaLinks ul li {
        /* border: 2px solid rgb(252, 252, 0);  */
    }

    footer .socialMediaLinks ul li a {
        /* border: 2px solid rgb(255, 1, 217);  */
        margin: 15px;
    }

    footer .socialMediaLinks img,
    .contactMe img {
        height: 30px;
        width: 30px;
    }

    footer .backToTop {
        position: absolute;
        top: -20px;
        right: 20px;
        filter: invert();
    }

    footer .backToTop img {
        width: 40px;
        height: 40px;
    }

    footer .copyrightBar {
        position: absolute;
        bottom: 0px;
        font-size: 0.6rem;
        background-color: rgb(0, 3, 38);
        /* border: 2px solid red; */
        padding: 5px 0px;

    }


    footer .contactMe {
        display: flex;
        position: absolute;
        font-size: 0.8rem;
        top: 50px;
        width: 70%;
        /* border: 2px solid red; */
        flex-grow: 1;
    }

    footer .contactMe ul {
        /* border: 2px solid orange; */
        align-items: right;



    }

    footer .contactMe ul li {
        /* border: 2px solid white; */
        width: inherit;
        flex-grow: 1;
        flex-direction: row;
        align-items: right;
        padding: 5px;
        /* padding: 5px; */
        gap: 10px
    }

    footer .contactMe ul li a {
        /* border: 2px solid rgb(43, 6, 255); */
        flex-direction: row;
        padding-left: 10px;
        gap: 10px;
        margin: 0px;
    }

    footer .contactMe img {
        width: 20px;
        height: 20px;
    }



}