html {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  /* inherit border-box on all elements before and after
   */
  *, 
  *:before, 
  *:after {
    box-sizing: inherit;
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}
  /* Hide scrollbar for IE, Edge and Firefox */
body{
    padding: 0px;
    margin: 0px;
    font-family: 'Lemonada', cursive;
    color:#D168FF;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* nav menu starts here*/
.menu-bar{
    background: linear-gradient(to right, rgb(209, 104, 255), rgb(107, 13, 197));
    display: flex;
    align-items: center;
    color:white;
    height: 4.5rem;
    padding:0px;
    margin:0px;
    z-index: 999;
    box-shadow:  0px 10px 20px rgba(0,0,0,0.16);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 20px 25px -5px, rgba(0, 0, 0, 0.14) 0px 10px 20px -5px;
    position: fixed;
    width: 100%;
}
.menu-logox{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-right: 1px solid white;
    padding:0px 0px;
    margin:0px;
    height: auto;
    flex-basis: 25%;
}
.menu-logo{
    display: flex;
    align-items: center;
    height: auto;
    color: white;
    text-decoration: none;
}
.logo img{
    width:auto;
    height: 60px;
    padding-top: 10px;
    margin-right: 2rem;
}
.logo-name{
    font-size: 1.8rem;
    font-weight:600;
    margin:0px;
    padding:0px;
    letter-spacing: 1px;
    font-family: 'Original Surfer', cursive;
}
.menu-nav{
    flex-basis:50%;
}
.menu-nav-ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0px;
    padding:0px;
}
.menu-nav-ul li{
    margin-left:2.5rem;
}
.menu-nav-ul a{
    text-decoration:none;
    color:white;
    font-size: 1.1rem;
    font-weight: bold;
}
.menu-nav-ul .active{
    border-bottom: 2px solid white;
    transition:  0.3s ease border-bottom;
}
.menu-contact{
    flex-basis: 25%;
    display: flex;
    justify-content: space-around;
}
.menu-contact-logo{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: white;
    border-radius: 5px;
    color:#6B0DC5;
    padding: 0px 10%;
}
.menu-contact-logo a{
    text-decoration: none;
    display: flex;
    align-items: center;
    color:#6B0DC5;
    padding:0px;
    margin:0px;
}
.menu-contact-logo img{
    width: 50px;
    height: 50px;
    padding: 0px;
    margin:0px;
}
.menu-contact-logo p{
    font-size: 1.1rem;
    margin:0px;
    cursor: pointer;
    padding:0px;
    font-weight: bold;
}
/*nav menu end */

/*portfolio main */
.portfolio-intro{
    background-image: url('../img/protfolio-intro.svg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow-y: hidden;
}
.main{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 3rem;
}
.introduction{
    flex-basis: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: #D168FF;
    margin-top:8rem;
    margin-left: 4.3rem;
}
.introcuction-image{
    flex-basis: 30%;
}
.introcuction-image img{
    margin-top: 3rem;
    width: 100%;
}
.para-margin{
    margin: 0px 0 0px -5px;
    font-size: 5.2rem;
    font-family: 'Original Surfer', cursive;
}
.my-name{
    color:  #6B0DC5;
    margin:0px;
    margin-top: -8px;
    font-size: 3rem;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 2.5px;
}
.para-margin-1{
    margin: 0px;
    margin-top: 10px;
    font-size: 1.1rem;
    padding-bottom: 0px;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 1px;
}
.para-margin-2{
    margin: 0px;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 1px;
}
.intro-para{
    font-size: 1.1rem;
    margin:0px 0 0 0;
    line-height: 1.5rem;
    font-weight: bold;
    color:#6B0DC5;
}
.intro-para-break{
   margin-top: 0px;
}
.introduction-content{
    width: 80%;
}
.intro-contact{
    margin-top: 4rem;
    margin-bottom: 3rem;
    font-size: 1rem;
    display: flex;
}
.resume{
    margin-right: 1.8rem;
}
.resume a{
    padding: 0.5rem 2.7rem;
    background-color: #6B0DC5;
    text-decoration: none;
    margin: 0rem;
    color:white;
    border-radius: 4px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.16);
    font-weight: bold;
    transition: ease-in-out;
    transition: transform 1s;
}
.contact a{
    padding: 0.5rem 2.8rem;
    background-color: white;
    text-decoration: none;
    color:#6B0DC5;
    border-radius: 4px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.16);
    margin: 0px;
    font-weight: bold;
    transition: ease-in-out;
    transition: transform 1s;
}
.contact:hover{
    transform: scale(1.1);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}
.resume:hover{
    transform: scale(1.1);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.9);
}
.social-links{
    display: flex;
    padding: 0px;
    margin:0px;
}
.social-links a{
    text-decoration: none;
    font-size: 3rem;
    margin-right: 2rem;
    color:#D168FF;
}
.social-links a:hover{
    color:#6B0DC5;
}
.my-stuff{
    display: flex;
    align-items: center;
    color:#6B0DC5;
    margin-bottom: 2rem;
    padding: 0px 5rem;
    margin-top: 1rem;
}
.stuff{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding:0px 1rem;
    border-radius: 7px;
    font-size:1rem;
    font-weight: bold;
    flex-grow: 1;
    margin:0 2rem;
    cursor: pointer;
}
.cool{
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.cool::after {
    content: "";
    border-radius: 5px;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.cool:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}

.cool:hover::after {
    opacity: 1;
}
.stuff img {
    width: 50px;
    height:64px;
}
/*portfolio main ends here*/
/*project showcasing section*/
#projects{
    margin-top: 20px;
}
.section-2{
    background-image: url('../img/project.svg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.project-intro-img{
    background-image: url('../img/project-img.svg');
    width: 60%;
    height: 40vw;
    min-height: 500px;
    background-repeat: no-repeat;
    background-position:right center ;
    flex-basis: 50%;
}
.project-intro{
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.project-intro-inner-area{
    margin-left: 6rem;
    margin-top: 2rem;
}
.project-intro-inner-area h2{
    color:#6B0DC5;
    font-size: 3rem;
    margin:0px;
    font-weight: 800;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 2px;
}
.project-intro-inner-area p{
    font-weight: bold;
    line-height: 25px;
}
.section-3{
    background-image: url('../img/project-showcase.svg');
    background-repeat: repeat-x;
}
.display-project-card{
    display: flex;
    justify-content: space-evenly;
    align-items: stretch !important;
    padding:0px 2rem;
}
.project img{
    width:100%;
    height: auto;
}
.project{
    margin:2rem 1.5rem;
    padding: 2rem 2rem 4rem 2rem;
    border-radius: 10px;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.15);
}
.project h2{
    font-family: 'Original Surfer', cursive;
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: 900;
    color:#6B0DC5;
}
.project p{
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding-bottom: 1rem;
    line-height: 25px;
}
.project a{
    text-decoration:none;
    font-size: 1rem;
    font-weight: bold;
    background-color: #6B0DC5;
    color: white;
    letter-spacing: 2px;
    padding:0.8rem 2.5rem;
    border-radius: 4px;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.15);
}
.project .view-git{
    background-color: white;
    color:#6B0DC5;
    padding:0.8rem 2.5rem;
}
.project{
    background-color: white;
    padding-bottom: 3rem;
}
.project-view{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.project a{
    margin:0;
}
.project .view-git{
    margin-top: 0rem;
    
}
view,.view-git{
    flex-wrap: wrap;
}
.dont-click:hover{
    cursor:not-allowed;
}
/* carousle css */
.owl-dots{
    text-align: center;
}
.owl-item .project{
    align-items: stretch;
}
.display-project-card{
    align-items: stretch;
}
.owl-carousel{
    align-items: stretch;
}
.owl-dot{
    height: 15px;
    width: 45px;
    border:2px solid #D168FF !important;
    cursor: pointer;
    border-radius: 25px;
    margin:0 5px;
    transition: all 0.3s ease;
    outline:none;
}
.owl-dot:hover{
    background-color: #6B0DC5 !important;
    border:2px solid #6B0DC5 !important;
}
.owl-dot.active{
    background-color: #D168FF !important;
}
/* project section ends here */

/* skill section starts here */

.skill-container{
    background-image: url('../img/skills.svg');
    background-repeat: no-repeat;
    background-size: cover;
    border: 0.1px solid white;
    padding: 0px 2rem;
    margin: 0px;
}

.skill-content{
    margin-top: 8rem;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
}
.skill-img{
    display: flex;
    justify-content: flex-start;
    flex-basis: 50%;
}
.skill-img img{
    width: 100%;
    height: auto;
    margin-top: 5rem;
}

.skill-introduction{
    flex-basis: 40%;
    padding: 3rem;
    margin-bottom:8rem;
}
.skill-introduction h2{
    font-family: 'Original Surfer', cursive;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    color:#6B0DC5;
}
.skill-introduction p{
    line-height:25px;
    font-weight: bold;
}
.skill-card-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 90%;
    margin:0 auto;
    z-index: 100;
    position: relative;
    top:-8rem;
    overflow: visible;
}
.skill-front img{
    width: 100%;
    height: 100%;
}
.skill-card{
    position: relative;
    width:7rem;
    height:7rem;
    cursor: pointer;
    margin-right: 2rem;
    margin-bottom: 2rem;
}
.skill-card-inner{
    position: absolute;
    width:100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.8s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px;
}
.skill-card-inner:hover{
    transform:rotateY(180deg);
}
.skill-front{
    position:absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background:white;
    padding:1.5rem;
    border-radius: 10px;
}
.skill-back{
    position:absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background:white;
    color:white;
    transform: rotateY(180deg);
    border-radius: 10px;
    padding:1.6rem;
    text-align: center;
}

.skill-back p{
    margin-top: -15px;
    color:#6B0DC5;
    font-size: 0.9rem;
    font-weight: bold;
}
.shift{
    margin-left: -14px;
}
.skill-back h1{
    margin-top:-25px;
    font-size: 2rem;
    color:#D168FF;
}
.other-technologies{
    width: 90%;
    margin:0 auto;
    margin-top:-5rem;
    margin-bottom: 5rem;
}
.other-technologies h2{
    font-family: 'Original Surfer', cursive;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    color:#6B0DC5;
}
.other-skill-card-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin:0 auto;
    position: relative;
    overflow: visible;
}
.other-skill-back p{
    color:#6B0DC5;
    font-size: 1rem;
    font-weight: bold;
}
.other-skill-back{
    position:absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background:white;
    color:white;
    transform: rotateY(180deg);
    border-radius: 10px;
    padding:1.6rem;
    text-align: center;
}

/*skills section ends here */

/* Experience section starts here*/

.experience-wrapper{
    background-image: url('../img/project-showcase.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.experience-wrapper-content{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}
.experience-wrapper-intro{
    width: 44%;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 10rem;
    padding-left: 10rem;
}
.experience-wrapper-intro h2{
    color:#6B0DC5;
    font-size: 3rem;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 2px;
    font-weight: 800;
}
.experience-wrapper-intro p{
    line-height: 30px;
    font-weight: bold;
}
.experience-wrapper-img{
    width: 60%;
    margin: 0px;
    background-image: url('../img/experience-img.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    min-height: 600px;
    position: relative;
}
.experience-wrapper-showcase{
    width:80%;
    margin:0 auto;
}

.experience-card{
    position: relative;
    width:20rem;
    height:35rem;
}
.experience-front-company{
    height: 25%;
    width: 100%;
}
.experience-front-company img{
    width: 100%;
    margin-top: 25%;
}
.experience-front-content{
    padding:0.5rem;
}
.experience-front-content h2{
    color:#6B0DC5;
    font-size: 2.3rem;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 2px;
    font-weight: bold;
    margin-top: 3rem;
}
.experience-front-content p{
    line-height: 30px;
    margin-top: -14px;
    font-size: 0.8rem;
    font-weight: bold;
}
.experience-card-inner{
    position: absolute;
    width:100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.8s ease-in-out;
}
.experience-front{
    position:absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background:white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding:1.5rem;
    border-radius: 20px;
}
.experience-info{
    padding:0 0.5rem;
    text-align: center;
    cursor: pointer;
}
.experience-info-button{
    text-decoration: none;
    background-color: #6B0DC5;
    padding:0.5rem 4.5rem;
    border-radius: 5px;
    margin-top: -15px;
    border: none;
    color:white;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    font-family: 'Lemonada', cursive;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.experience-back{
    position:absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background:#6B0DC5;
    transform: rotateY(180deg);
    border-radius: 20px;
    padding:1rem 1.5rem;
    text-align: center;   
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color:white;
}
.experience-back h2{
    font-size: 1.5rem;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 1px;
    font-weight: 900;
}
.experience-back-content{
    text-align: left; 
}
.experience-back-content p{
    margin:0px;
    font-size: 1rem;
    font-weight: bold; 
}
.experience-back-content ul{
    margin:0px; 
}
.experience-back-content ul li{
    margin:0px; 
    font-size: 0.8rem;
}
.experience-info-button-back{
    text-decoration: none;
    background-color:white ;
    padding:0.5rem 6.5rem;
    border-radius: 5px;
    margin-top: 7rem;
    border: none;
    color:#6B0DC5;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    font-family: 'Lemonada', cursive;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
/* experience section ends here */
/* about me section starts here */
.aboutme-container{
    background-image: url('../img/academics.svg');
    background-repeat: no-repeat;
    background-size: cover;
    border: 0.1px solid white;
}

.aboutme-intro{
    margin-top: 14rem;
    margin-left: 15rem;
    width: 30%;
}
.aboutme-intro h2{
    color:#6B0DC5;
    font-size: 3rem;
    font-family: 'Original Surfer', cursive;
    letter-spacing: 2px;
    font-weight: bold;
}
.aboutme-intro p{
   line-height: 30px;
    font-weight: bold;
}
.aboutme-main{
    margin:8rem auto;
    width: 60%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border-radius: 20px;
}
.academic-name{
    color:#6B0DC5;
    font-size: 3rem;
    letter-spacing: 2px;
    font-weight: 900;
    margin:0px;
    font-family: 'Original Surfer', cursive;
    margin-top: 3rem;
}
.academic-dob{
    color:#D168FF;
    font-size: 1.5rem;
    letter-spacing: 2px;
    font-weight: 900;
    padding:0px;
    font-family: 'Original Surfer', cursive;
    margin:0;
}
.aboutme-academic-wrapper{
    display: flex;
    justify-content: space-evenly;
}
.aboutme-academic-wrapper-img{
    width:16%;
    min-height: 200px;
    background:#6B0DC5;
    border-radius: 20px;
    position:absolute;
    z-index: 555;
    left:12%;
    margin-top: 7rem;
}
.aboutme-academic-wrapper-img img{
    padding:0px;
    margin:0;
    width: 100%;
    height: auto;
}
.aboutme-academics-detail{
    display: flex;
    align-items: flex-start;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    border-radius: 15px;
    margin:0;
    margin-top: 2rem;
    padding: 10px;
    width: 80%;
}
.aboutme-academics-detail p{
    margin: 0px;
    padding:0px;
    line-height: 22px;
    font-size: 0.8rem;
}
.aboutme-academics-detail .college-name{
    color:#6B0DC5;
    font-family: 'Original Surfer', cursive;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.2rem;
}
.aboutme-academics-detail img{
    width: 11%;
    margin-right: 1rem;
    margin-top: 0.5rem;
}
.score{
    font-weight: bold;
}
.aboutme-academics{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 8rem;
}
.aboutme-academics-detail{
    text-align: left;
}
.academic-detail-bottom{
    margin-bottom: 4rem;
}
/* about me section ends here */
/* contact starts here */
#contact-me{
    background-image: url('../img/contact.svg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 5rem;
}
.contact-container-intro{
    width: 30%;
    margin:0px;
    margin-left: auto;
    margin-right: 8%;

}
.contact-container-intro-heading{
    font-size: 3rem;
    color: #6B0DC5;
    font-family:'Original Surfer', cursive;
    margin:0;
    font-weight: 900;
    letter-spacing: 2px;
}
.contact-container-intro-para{
    color: #D168FF;
    font-size: 1rem;
    font-weight: bold;
}
.contact-container{
    width: 60%;
    margin:5rem 4% 0 auto;
}
.contact-talk{
    background-color: white;
    width: 80%;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.16);
    position:relative;
    right: -14%;
}
.contact-talk h2{
    font-family:'Original Surfer', cursive;
    color:#6B0DC5;
    font-size: 3rem;
    letter-spacing: 2px;
    font-weight: 900;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    margin:0;
}
.contact-method{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.contact-method-1 a{
    text-decoration: none;
    color:#D168FF;
    font-size: 3rem;
    text-decoration: none;
    padding: 0px;
    margin:0px;
}
.contact-method-1 p{
    font-size: 1rem;
    margin:0px;
    font-weight: bold;
    padding: 0px;
    margin:0;
    margin-top: -25px;
}
.contact-method a:hover{
    color:#6B0DC5;
}
.contact-resume-bottom{
    text-decoration: none;
    padding:0.6rem 5rem;
    background-color:#6B0DC5 ;
    color:white;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 7%) 0px 1px 1px, rgb(0 0 0 / 7%) 0px 2px 2px, rgb(0 0 0 / 7%) 0px 4px 4px, rgb(0 0 0 / 7%) 0px 8px 8px, rgb(0 0 0 / 7%) 0px 16px 16px;
}
.contact-resume{
    padding:3rem 0;
    display: flex;
    justify-content: center;
}
.contact-resume-hover{
   /* padding:3rem 0; */
   transition: ease-in-out;
   transition: transform 1s;
}
.contact-resume-hover:hover{
    transform: scale(1.1);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}
.ipad-only{
    display: none;
}
.opener{
    display: none;
}
.scam{
    display: none !important;
}
/* contact ends here */
/* operner disable for desktop opener == mobile responsive menu open window */
/* media query */


@media (max-width: 1024px){
    /* ipad pro versiron */
    .logo img{
        margin-right: 1rem;
    }
    .my-stuff{
        justify-content: space-evenly;
        padding: 0px 0px;
        margin-top: 3rem;
    }
    .stuff{
        flex-grow: unset;
        padding: 0px 2.5rem;
        margin:0;
    }
    .skill-card {
        position: relative;
        width: 6rem;
        height: 6rem;
        margin-right: 2rem;
    }
    .shift{
        padding:0;
        margin-left: -20px !important;
    }
    .other-skill-back {
        text-align: center;
        padding-right: 15px;
    }
    .other-skill-back p{
        margin:0;
    }
    .leftjaa{
        position:relative;
        left:-18%;
    }
    .aboutme-main{
        width: 70%;
        margin-left: 18%;
    }
    .aboutme-academic-wrapper-img{
        width:25%;
        height: 4%;
        left:3%;
        padding: 0.1rem;
        margin-top: 7rem;
    }
    .aboutme-academic-wrapper-img img{
        height: 95%;
        width: 100%;
    }
    .aboutme-academics-detail{
        width: 90%;
    }
    /* contatc section */
    .contact-container{
        width: 70%;
        margin:0;
        margin-bottom: 3rem;
    }
    .contact-talk{
        width: 100%;
        margin: 0px;
        left:35%;
        margin-top: 5rem;
    }
    .contact-talk h2{
        margin: 0px;
        padding-top: 3rem;
    }
    .ipad-only{
        display: none;
    }
    .project{
        height:880px ;
    }
    .project a{
        margin:0 3%;
    }
/* contact section ends here */

}

@media screen and (max-width:830px) {
    /* ipad version */
    /* disabling element which is not required in ipad version */
    .menu-contact{
        display: none;
    }
    .menu-logox{
        flex-basis: 25%;
    }
    .menu-logo{
        justify-content: flex-start;
    }
    .logo{
        width: 8%;
        margin:0 8px;
    }
    .logo-name{
        font-size: 1.1rem;
        margin-left: 20%;
    }
    .introcuction-image{
        display: none;
    }
    .introduction{
        width: 100%;
        flex-basis: 100%;
    }
    .my-stuff{
        font-weight: normal;
        padding:0 10px;
        justify-content: space-around;
    }
    .stuff img{
        width: 50%;
    }
    .stuff{
        padding: 0px  1.8rem;
        margin:0 0;
        font-size: 0.8rem;
    }
    .skill-introduction {
        flex-basis: 40%;
        padding: 3rem 0 3rem 1.5rem;
    }
    .skill-card {
        width: 5.9rem;
        height: 5.9rem;
    }
    .skill-card-container{
        width: 90%;
    }
    .experience-wrapper-intro {
        width: 50%;
        padding-left: 5rem;
    }
    .experience-wrapper-img {
        width: 50%;
        margin-top: 8rem;
        min-height: 400px;
    }
    .experience-wrapper-showcase {
        width: 80%;
        margin:0 auto;
        margin-top: 5rem;
    }
    .aboutme-intro {
        margin-left: 9rem;
        width: 50%;
    }
    .aboutme-academic-wrapper-img {
        width: 30%;
        height: 3%;
        left: 0%;
        padding: 1rem;
        margin-top: 7rem;
    }
    .aboutme-academic-wrapper-img img {
        width: 100%;
        height: 100%;
    }
    .aboutme-main{
        margin:8rem auto;
        width: 85%;
    }
    .aboutme-academics {
        padding-left: 15rem;
        padding-right: 2rem;
    }
    .aboutme-academics-detail img {
        width: 20%;
        margin-top: 0.5rem;
    }
    .academic-name {
        margin-top: 2rem;
    }
    .academic-detail-bottom {
        margin-bottom: 3rem;
    }
    .aboutme-academics-detail{
        margin-top: 1.2rem;
    }
    .ipad-hide{
     display: none;
    }
    .ipad-only{
        display: inherit;
    }
    .contact-container-intro {
        width: 53%;
        margin-bottom: -8rem;
        padding-bottom: 6rem;
    }
    .contact-container{
        padding-top: 9rem;
    }
    .contact-talk h2{
        padding-top: 2.5rem;

    }
    .contact-method{
        margin-top: -1rem;
        margin-bottom: -0.5rem;
    }
    .contact-resume-bottom{
        padding:1rem 3rem;
    }
    .project{
        padding-bottom: 3rem;
        height: 830px;
    }
    .project-view{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .project a{
        margin:0;
    }
    .project .view-git{
        margin-top: 1rem;
    }
    view,.view-git{
        flex-wrap: wrap;
    }

    /* clutter free here with desktop elements */

    /* mobile nav menu */
    .opener{
        display: inherit;
    }
    .line{
        height: 5px;
        width: 40px;
        margin:8px;
        background-color: white;
    }
    .none{
        display: none;
    }
    .menu-nav{
        position: relative;
    }
    .opener{
        position:absolute;
        cursor: pointer;
        right: -40%;
        transform: translatey(-50%);
    }
    .mobile-hide{
        display: none;
    }
    .menu-nav-ul li{
        margin-left: 0px;
    }
    .menu-nav-ul a{
        color:#6B0DC5;
        display: block;
        margin: 1rem 0;
        padding:0.5rem;
    }
 
    .menu-nav-ul{
        position: fixed;
        display: block;
        text-align: center;
        background: white;
        padding-top: 2rem;
        height: 100vh;
        width: 100%;
        margin-top: 33px;
        margin-left: -25%;
        clip-path: circle(10px at 90% -10%);
        -webkit-clip-path: circle(10px at 90% -10%);
        transition: all 1s ease-in-out; 
        outline: none; 
    }
    .menu-nav-ul.open{
        clip-path: circle(1200px at 90% -10%);
        -webkit-clip-path: circle(1200px at 90% -10%);
    }
    .menu-nav-ul li{
        opacity: 0;
    }  
    .menu-nav-ul li a {
        font-size: 1.2rem;
    }
    .menu-nav-ul li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .menu-nav-ul li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .menu-nav-ul li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .menu-nav-ul li:nth-child(4){
        transition: all 0.5s ease 0.8s;
    }
    .menu-nav-ul .fade{
        opacity: 1;
    }
    .hide{
        display: none;
    }
    .menu-nav-ul .mactive{
        color:white;
        background-color:#6B0DC5;
    }
}
@media screen and (max-width:680px) {
    .stuff img{
        width: 30%;
    }
    .stuff{
        font-size: 0.6rem;
        padding:0 1.3rem
    }
    .project a{
        font-size: 0.7rem;
    }
    .aboutme-academic-wrapper-img{
        width: 35%;
        padding: 0;
    }
    .skill-back p{
        font-size: 0.7rem;
    }
    .project{
        height: 820px;
    }
    .menu-nav-ul{
        padding-top: 1rem;
    }
    .menu-nav-ul li a{
        font-size: 1.2rem;
        margin:0.8rem 0;
    }
}
@media screen and (max-width:576px) {
    /* mobile phones */
  .main{
      margin-top: 2rem;
  }
  .menu-nav-ul{
     padding-top: 2rem;
  }
    .menu-nav-ul li a{
     font-size: 1.3rem;
     margin:1rem 0;
  }
  .logo img{
     margin-right: 0;
  }
  .logo-name{
      display: none;
  }
  .portfolio-intro{
      background:none;
  }
  .introduction{
      margin-left: 0;
  }
  .introduction-content{
      width: 80%;
      margin: 0 auto;
  }
  .para-margin{
      font-size: 4rem;
  }
  .intro-para{
      display: inline;
      font-size: 1rem;
  }
  .intro-para-break{
      margin:0;
      line-height: 0.1rem;
  }
  .para-margin-1{
    font-size: 1rem;
  }
  .para-margin-2{
    font-size:1rem;
    margin-bottom: 1rem;
  }
  .resume a{
      padding:0.5rem 2rem;
  }
  .contact a{
      padding: 0.5rem 2rem;
  }
  .intro-contact a{
      font-size: 0.8rem;
  }
  .social-links{
      margin-top: -1.5rem;
  }
  .social-links a{
      font-size: 2.5rem;
  }
  .my-stuff{
      width: 96%;
      flex-wrap: wrap;
      margin-top: 5rem;
      margin-left: 0.5rem;
  }
  .stuff{
      margin: 0.4rem;
      flex-grow: 1;
  }
  .project{
      height: 720px;
  }
  .project-intro-img{
      width: 50%;
  }
  .project-intro-inner-area h2{
      font-size: 2rem;
  }
  .project-intro-inner-area{
      margin-left: 3rem;
  }
  .project-intro-inner-area p{
      font-size: 0.8rem;
  }
  .project h2{
      font-size: 1.5rem;
  }
  .project p{
      font-size: 0.8rem;
  }
  .project a{
      font-size: 0.8rem;
      padding: 0.5rem 2.2rem;
  }
  .project .view-git{
    padding: 0.5rem 2.2rem;
  }
  .skill-introduction h2{
      font-size: 2rem;
  }
  .skill-introduction p{
      font-size: 0.8rem;
  }
  .skill-img{
      display: none;
  }
  .skill-content{
      display: block;
  }
  .skill-introduction{
      width: 90%;
      padding-top: 0rem;
      padding-left: 0px;
  }
  .skill-card-container{
      width: 100%;
  }
  .skill-container{
      padding-left: 3.3rem;
      padding-right: 1rem;
  }
  .skill-card{
      width: 5rem;
      height: 5rem;
  }
  .other-technologies h2{
      font-size: 2rem;
  }
  .experience-wrapper-content{
      display: block;
      margin-top: -8rem;
  }
  .experience-wrapper-intro{
      width:90%;
      padding-left:4rem;
  }
  .experience-wrapper-img{
      display: none;
  }
  .experience-wrapper-intro h2{
      padding-top: 4rem;
      font-size: 2rem;
  }
  .experience-wrapper-intro p{
      font-size: 0.8rem;
  }
  .aboutme-intro{
      width: 60%;
      margin-top: 5rem;
      margin-left: 4rem;
      padding-bottom: 1rem;
  }
  .aboutme-container{
      background: none;
  }
  .aboutme-intro h2{
      font-size: 2rem;
      padding-top: 1rem;
  }
  .aboutme-intro p{
    font-size: 0.8rem;
  }
  .aboutme-academic-wrapper-img{
      margin-top: -9rem;
      right: 2%;
      left:auto;
      width: 50%;
      min-height: 160px;
      padding:3px 6px;
      padding-left:14px
    }
    .aboutme-academic-wrapper-img img{
        height: 98%;
    }
    .aboutme-academics{
        padding-left: 2rem;
        padding-right: 0rem;
    }
    .aboutme-main{
        margin:8rem auto;
        width: 95%;
    }
    .academic-name{
        font-size: 1.8rem;
    }
    .academic-dob{
        font-size: 1.2rem;
    }
    .aboutme-academics-detail .college-name{
        font-size: 1rem;
    }
    .contact-container-intro-heading{
        font-size: 2rem;
    }
    .contact-container-intro-para{
        font-size:0.8rem;
    }
    .contact-container-intro{
        margin:0px;
        margin-left: 4rem;
    }
    #contact-me{
        background: none;
    }
    .contact-container{
        padding-top: 1rem;
        background: none;
        position: absolute;
        width: 96%;
        left:-8rem;
    }
    .contact-talk{
        margin-bottom:6rem;
    }
    .contact-talk h2{
        font-size: 1.8rem;
        display: block;
    }
    .contact-method-1 a{
        font-size: 2.2rem;
    }
    .contact-resume-bottom{
        font-size: 0.8rem;
        padding: 0.5rem 2rem;
    }
    #contact-me{
        padding-bottom: 0px;
    }
    .contact-container-intro{
        padding-bottom: 0px;
    }

}

@media screen and (max-width:400px){
    /* s-mobile devices */
    .para-margin{
        font-size: 3rem;
    }
    .my-name{
        font-size: 2.5rem;
    }
    .intro-para{
        font-size: 0.8rem;
    }
    .introduction{
        margin-left: -3%;
    }
    .introduction-content{
        width: 90%;
        margin: 0px;
    }
    .social-links a{
        font-size:1.8rem;
    }
    .intro-contact a{
        font-size: 0.6rem;
    }
    .resume{
        margin-right: 1rem;
    }
    .my-stuff{
        width: 100%;
        margin:0;
        margin-top: 5rem;
        margin-bottom: 1.3rem;
        justify-content: center;
        align-items: center;
    }
    .project-intro-img{
        width: 50%;
    }
    .experience-card{
        margin-top: 3rem;
    }
    .experience-wrapper-intro{
        padding-left: 3rem;
    }
    .experience-front-content h2{
        font-size: 1.5rem;
    }
    .experience-front-content p{
        font-size: 0.7rem;
        line-height: 25px;
    }
    .experience-info-button-back{
        margin-top: 4rem;
    }
    .experience-wrapper-showcase{  
         margin:0 1% 0 5%;
    } 
    .experience-card{
        width: 18rem;
        height: 30rem;
    }
    .experience-info-button{
        font-size: 0.7rem;
        margin-top: -14px;
    }
    .experience-back h2{
        font-size: 1.2rem;
    }
    .experience-back-content p{
        font-size: 0.9rem;
    }
    .experience-info-button-back{
        font-size: 0.7rem;
    }
    .aboutme-intro{
        width: 70%;
        margin-left: 3rem;
    }
    .aboutme-academic-wrapper-img{
        width: 60%;
        padding: 0px;
    }
    .aboutme-academics-detail .college-name{
        font-size: 0.8rem;
    }
    .aboutme-academics-detail p{
        font-size: 0.6rem;
    }
    .aboutme-academics-detail img{
        width: 30%;
    }
    .contact-container-intro{
        width: 70%;
        margin-left: 3rem;
    }
    .contact-container{
        width: 94%;
        left:-30%;
    }
    .contact-method-1 p{
        font-size: 0.7rem;
    }
    .contact-resume{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .contact-talk h2{
        font-size: 2rem;
        padding-top: 2rem;
    }
    .contact-resume-bottom{
        font-size: 0.7rem;
    }
 
}