*{
    padding: 0px;
    margin: 0px;
}
/* 
nav div,nav{
    background-color: black;
} */
.img{
    opacity: 1;
    background: url("../img/111.jpg");
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content:right;
    height: 100vh;
}
.content{
    color: white;
    padding: 25px;
    background: rgba(0,0,0,0.7);
}

#head-about,#head-exp{
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-family: "Playwrite DK Uloopet", cursive;
    background: linear-gradient(purple, red);
    font-size: 50px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  hr{
      margin-left: 35%;
      width: 30%;
      color: orangered;
  }
  .summery{
    width: 40vw;
	/* max-height: 38vh; */
  }
  #skill{
    width: 40vw;
	/*height:30vh;*/
	font-weight:500;
  }
  .empt{
      width: 100%;
      height: 80px;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: rgba(119, 111, 111, 0.5);
      justify-items: center;
  }
  .main{
    position: relative;
    /* border: 2px solid red; */
    /* background-color: black; */
    width: 21.10%;
    height: 38.7vh;
}
.main-card{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s ease;
    /* box-shadow: 2px 2px 5px orangered; */
}
.main-card:hover{
    transform: rotateY(180deg);
}
.front{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    color: #333;
}
.back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}
.items{
    /* width: ; */
    font-size: 32px;
}

.card-lo{
    width: 18rem;
}
@media (max-width:992px){
    #cont-det{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #cont-det i{
        font-size: 24px;
        margin-right: 5px;
    }
    #head-about,#head-exp{
        font-size: 30px;
    }
    #cont-exp{
        flex-direction: column;
        align-items: center;
    }
    #cont-abt{
        flex-direction: column;
    }
    .summery{
        width: 100%;
        margin-bottom: 5%;
    }
    #skill{
        width: 100%;
    }
    .main{
        width: 60%;
        margin-bottom: 50px;
    }
}

#cont-exp{
    align-items: center;
    justify-content: space-evenly;
    
}
/* Mobile View */
@media (max-width:425px){
    .img{
        background-image: url('/img/samimg.jpg');
        align-items: end;
    }
    .content{
        width: 100%;
        border-radius: 0px;
    }
    .content h1{
        font-size: 24px;
    }
    .main{
        width: 100%;
        margin-bottom: 70px;
    }
    .card-lo{
        width: 100%;
    }
}

@media (max-width:320px){
    .main{
        width: 100%;
    }
    .items i{
        font-size: 20px;
    }
}