.project {
    background: linear-gradient(rgba(16, 29, 44, 0.894), rgba(16, 29, 44, 0.815)), url("../Img1/work.jpg") center center fixed;
    margin: auto;
    max-width: 100vw;
    /* height: 100vh; */
    padding-top: 32rem;
    padding-bottom: 35rem;
    z-index: -10;
    margin-top: -30rem;

    font-family: "Fira Sans", sans-serif;
    color: #ffffff;
    -webkit-clip-path: polygon(50% 20%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
    clip-path: polygon(50% 20%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
    /* position: relative; */
}

body {
    background: linear-gradient(rgba(16, 29, 44, 0.894), rgba(16, 29, 44, 0.815)), url("../Img1/work.jpg") center center fixed;

}



#con {
    width: 75%;
    margin: 0 auto;
    margin-top: 200px;
    height: auto;
}

#con2 {
    width: 75%;
    margin: 0 auto;
    margin-top: 30px;
    height: auto;
}

#con3 {
    width: 75%;
    margin: 0 auto;
    margin-top: 30px;
    height: auto;
}

.con4 {
    width: 75%;
    margin: 0 auto;
    margin-top: 30px;
    height: auto;
}

h4 {
    width: 90%;
    position: absolute;
    font-size: 30px;
    padding: 20px;
    margin-top: 120px;
    color: #fff;
}

.f-title {
    text-align: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.689);
    /* padding-right: 5rem; */

    margin-top: 5rem;
    /* margin-left: -4rem; */
    font-size: 4rem;
    /* background-color: rgba(255, 255, 255, 0.498); */
    /* font-family: 'Rock Salt', cursive; */
    font-family: 'Pacifico', cursive;

    /* -webkit-animation: colorchange 5s infinite alternate; */
}

@media (max-width:840px) {
    .proj {
        flex-direction: column;
    }
}

@media (max-width:800px) {
    .f-title {
        font-size: 2.5rem;
        margin-top: 3rem;
    }


}

.proj {
    display: flex;
    flex-direction: row;

}

.bg12 {
    background: url(../Img1/rocket.jpg) !important;
    background-size: cover !important;
    /* background-repeat: no-repeat !important; */

}

.bg123 {
    background: url(../Img1/MSIP.jpg) !important;
    background-size: cover !important;


}

.zayn_1 {
    position: relative;
    margin-top: -150px;
    background: url(https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzd8fHdvcmt8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 3px solid rgba(255, 162, 52, 0.8);
    width: 100%;
    height: 280px;
    border-radius: 6px;
    box-shadow: 5px 5px 30px 0px rgba(46, 61, 73, 0.9);
    transition: all 0.3s ease;

}

.zayn_2 {
    position: relative;
    margin-top: 1px;
    background: url("../Img1/CA.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 3px solid rgba(169, 81, 237, 0.8);
    width: 49%;
    height: 300px;
    border-radius: 6px;
    box-shadow: 5px 5px 30px 0px rgba(46, 61, 73, 0.9);
    transition: all 0.3s ease;
}

.zayn_3 {
    position: relative;
    float: right;
    margin-top: -304px;
    background: url("../Img1/MM.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 3px solid #1864ab;
    width: 49%;
    height: 300px;
    border-radius: 6px;
    box-shadow: 5px 5px 30px 0px rgba(46, 61, 73, 0.537);
    transition: all 0.3s ease;
}

.zayn_4 {
    position: relative;
    margin-top: 1px;
    background: url(../Img1/blogbg.jpg);


    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 3px solid rgba(255, 84, 131, 0.8);
    width: 100%;
    height: 280px;
    border-radius: 6px;
    box-shadow: 5px 5px 30px 0px rgba(46, 61, 73, 0.9);
    transition: all 0.3s ease;
}

.new {
    color: #fff;
    z-index: 1;
    position: relative;
    left: 2%;
    top: 8%;
    padding: 15px;
    background: linear-gradient(to right, #02b3e4 0%, #02ccba 100%);
    border-radius: 50px 120px 120px;
}

.zayn_form {
    position: relative;
    margin-top: -150px;
    background: #fafafa;
    border-bottom: 3px solid rgba(255, 162, 52, 0.8);
    width: 100%;
    height: 280px;
    border-radius: 6px;
    box-shadow: 5px 5px 30px 0px rgba(46, 61, 73, 0.9);
    transition: all 0.3s ease;
}

/*
  .form-title{
      position: relative;
      text-align: center;
      margin-bottom: 40px;
  }
   input{
       margin-top: 50px;
       margin-left: 95px;
       width: 50%;
      display: inline-block;
      text-align: center;
      border-radius: 7px;
      background: rgba(238, 238, 238, 1);
      padding: 1em 1em;
      outline: none;
      border: none;
      color: rgba(2, 204, 186, 0.4);
      transition: 0.3s linear;
  }
  ::placeholder {
      color: rgba(2, 204, 186, 0.9);
  }
  input:focus {
      background: rgba(2, 204, 186, 0.4);
  }
  */
.date-1 {
    color: #fff;
    z-index: 1;
    /* width: 10rem; */
    font-size: 1.5rem;
    text-align: center;
    background: #b24592;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b28345, #eaf15f);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b28345, #f1de5f);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    left: 45%;
    top: 40%;
    padding: 1rem;
    border-radius: 50px;
}

@media m {}

.date {
    color: #fff;
    z-index: 1;
    background: #b24592;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b24592, #f15f79);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b24592, #f15f79);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    right: 1%;
    bottom: 3%;
    padding: 9px;
    border-radius: 50px;
}

.date:hover {
    color: white;
    scale: 1.1;
}

.date-1:hover {
    color: white;
    scale: 1.1;
}

.pop {
    color: #fff;
    z-index: 1;
    position: absolute;
    left: 2%;
    bottom: 3%;
    padding: 15px;
    background: linear-gradient(to right, #dce402 0%, #cc9d02 100%);
    border-radius: 50px;
}

.lat {
    color: #fff;
    z-index: 1;
    scale: .8;
    position: absolute;
    left: 2%;
    bottom: 3%;
    padding: 15px;
    background: linear-gradient(to right, #02b3e4 0%, #02ccba 100%);
    border-radius: 50px;
}

.free {
    color: #fff;
    z-index: 1;
    position: absolute;
    left: 2%;
    top: 3%;
    padding: 15px;
    background: linear-gradient(to right, deepskyblue 0%, skyblue 100%);
    border-radius: 50px 120px 120px;
}

.overlay {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(000, 000, 000, 0.6);
    border-radius: 6px;
}



@media only screen and (max-width: 840px) {

    h4 {
        font-size: 24px;
    }

    .zayn_2 {
        position: relative;
        width: 100%;
    }

    .zayn_3 {
        position: relative;
        width: 100%;
        margin-top: 30px;
    }

    .zayn_4 {
        position: relative;
        width: 100%;
        margin-top: 360px;
    }

    .date {
        left: 70%;
    }

    .date-1 {
        left: 70%;
        font-size: 1rem;
        padding: .5rem;
        top: 60%;
    }
}

.footer {
    margin-top: 50px;
    position: absolute;
    background: #b24592;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b24592, #f15f79);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b24592, #f15f79);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 15px;
    width: 100%;
    border-radius: 4px;
}

.footer h1 {
    color: #fff;
    font-size: 20px;
    text-align: center;
}



.shadow:hover {
    box-shadow: 5px 1px 10px 0px rgba(46, 61, 73, 0.1);
    transition: all 0.3s ease;
}


@-webkit-keyframes spaceboots {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -webkit-transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shadow:hover,
.shadow:focus {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}




@-webkit-keyframes colorchange {
    0% {

        color: darkviolet;
    }

    10% {

        color: #fa3380;
    }

    20% {

        color: #02b3e4;
    }

    30% {

        color: #02ccba;
    }

    40% {

        color: #a951ed;
    }

    50% {

        color: #ffa234;
    }

    60% {

        color: #ff5483;
    }

    70% {

        color: deepskyblue;
    }

    80% {

        color: purple;
    }

    90% {

        color: lightpink;
    }

    100% {

        color: #fff;
    }
}







@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}