/* Mobile device screen width */

@media (max-width: 700px) {

    .main {
        display: block;
        left:0%;
        top:0px;
        width: 1fr;
        height: 800px;
        position: relative;
        background-color: transparent;
        margin-top:0%;
        margin-left:-10px;
        margin-right: -10px;
        align-content: center;
        justify-items: center;

    }

     .main-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1;
        max-width:350px;
        min-width: 100px;
        height: 200px;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
        margin-top: 40%;
    }

    .hi p {

        font-size: 15px;
        color: rgb(202, 217, 238);
        margin: 0;
        margin-bottom: 10px;
    }

    .main-myname h1{
        font-size: 40px;
        color: rgb(231, 238, 248);
        margin: 0;
    }

    .brief-intro {

    }

    .brief-intro h3 {
        color: rgb(193, 219, 255);
        font-size: 20px;
        font-weight: normal;
        
    }

    .know-more p {

        color: rgb(28, 26, 26);
        font-size: 15px;
        
        color: rgb(35, 42, 42);
        display: inline-block;
        padding: 10px 40px 10px 22px;
        margin:0;
        
        cursor: pointer;
        
        
    }

    .know-more {
        background-color: white;
        display: inline-block;
        height: 45px;
        clip-path: path("M 0,0 L 156,0 L 186,20 L 156,40 L 0,40 L 20,20 L 0,0 Z");
        animation: move-forward 1s ease infinite alternate;
    }
    /* Bottom content */


    .footer-flex {
        
        margin-top: 15%;
        backdrop-filter: blur(5px);
    }

    .footer1-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }

    .icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        max-width: 180px;
        min-width: 80px;
        margin-left: 5%;
        column-gap: 30px;
        cursor: pointer;
        pointer-events: all;
    }

    .icons img {
        width: 18px;
        height: 18px;
        cursor: pointer;
        pointer-events: all;

    }

    .built-info {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        max-width: 200px;
        min-width: 80px;
        margin-right: 0%;
    }

    .built-info p {
        color: rgb(231, 238, 248);
        font-size: 12px;
    }

    .footer2-grid {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer2-grid p {
        color: rgb(231, 238, 248);
        font-size: 12px;
    }

    /* More About Content */

    .more-about {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex: 1;
        font-size: 25px;
        border-radius: 20px;
        margin-top: 0%;
      
        
    }

    .more-about-content {

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 40%;
        row-gap: 30px;
        margin-top: 26%;
        margin-left:2%;
        flex: 1;
        
        
        

    }

    .more-about-content-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        text-indent: 10px;
        padding: 10px 20px;
    }

    .more-about-content h4 {
        font-size: 25px;
        color: rgb(0, 3, 7);
        margin: 0;
        margin-top: 0px;
        text-align: center;
        margin-bottom: 20px;
        
        
    }

    .more-about-content p {
        margin: 0;
        font-size: 12px;
        color: rgb(0, 3, 7);
        font-family:Verdana;
        text-align: justify;
        text-justify: inter-word;
        line-height: 25px;
        
    }

    .more-about-content-text .explore {
        background-color: black;
        padding: 5px 15px;
        border-radius: 15px;
        display: inline-block;
        margin-left: -10px;
        margin-top: 40px;
        opacity: 1;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.489), 0 0 8px rgba(0, 255, 255, 0.398) inset;

    }

    .more-about-content-text .explore p {
        color: white;
        margin: 0;
        font-size: 15px;
    }
    

    .recent-works-symbol {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 25px;
        animation: move-down 2s ease-in-out infinite;
        
        
        
    }

    /* About footer */

    .about-icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        max-width: 180px;
        min-width: 80px;
        margin-left: 2%;
        column-gap: 30px;
        cursor: pointer;
        pointer-events: all;
        
    }

    .about-icons img {
        width: 18px;
        height: 18px;
        cursor: pointer;
        pointer-events: all;
        filter:invert();
        
    }

    .about-footer2-grid {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about-footer2-grid p {
        color: rgb(36, 37, 38);
        font-size: 12px;
    }

    .about-built-info {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        max-width: 200px;
        min-width: 80px;
        margin-right: 1%;
    }

    .about-built-info p {
        color: rgb(36, 37, 38);
        font-size: 12px;
    }


    /* Skills Section */
    
    .skills h5 {
        margin-top: 0px;
        font-size: 15px;
        color: rgba(0, 3, 7, 0.966);
    }


    .skills {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        margin-top: 25.5%;
        right: 0%;
        background-color: transparent;
        text-align: center;
        margin-right:0px;
        margin-left: 0px;
        position: relative;
        
        
    }

    .skills-section,
    .skills-section1,
    .skills-section2 {
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }

    .skills-box-1,
    .skills-box-2,
    .skills-box2,
    .skills-box3 {
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }



    .skills-title h5 {
        font-size: 18px;
        margin-top: 33px;
        text-decoration: underline;
    }


    .skills-box h5 {

        color: black;
    }

    .skills-box {
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: transparent;
        width:1fr;
        height: 750px;
        margin-top: 0px;
        

        
    }

    .skills-box1 {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: rgb(45, 48, 47);
        width:1fr;
        height: 750px;
        top:80px;
        
        clip-path: path("M 10,78 L 85,78 A 10,10 0,0,0 95,68 L 95,10 A 10,10 0,0,1 105,0 L 180,0 A 10,10 0,0,1 190,10 L 190,68 A 10,10 0,0,1 180,78 L 105,78 A 10,10 0,0,0 95,88 L 95,194 A 10,10 0,0,0 105,204 L 180,204 A 10,10 0,0,1 190,214 L 190,296 A 10,10 0,0,1 180,306 L 105,306 A 10,10 0,0,0 95,316 L 95,374 A 10,10 0,0,0 105,384 L 180,384 A 10,10 0,0,1 190,394 L 190,524 A 10,10 0,0,1 180,534 L 105,534 A 10,10 0,0,0 95,544 L 95,726 A 10,10 0,0,1 85,736 L 10,736 A 10,10 0,0,1 0,726 L 0,544 A 10,10 0,0,1 10,534 L 85,534 A 10,10 0,0,0 95,524 L 95,394 A 10,10 0,0,0 85,384 L 10,384 A 10,10 0,0,1 0,374 L 0,316 A 10,10 0,0,1 10,306 L 85,306 A 10,10 0,0,0 95,296 L 95,214 A 10,10 0,0,0 85,204 L 10,204 A 10,10 0,0,1 0,194 L 0,88 A 10,10 0,0,1 10,78 Z");
 
    }

  

    .skills-box1 p {
        color: rgb(244, 243, 246);
        font-weight: normal;
        
        
    }
    .skills1 {

        display: grid;
        grid-template-columns: repeat(2, 95px);
        height: 1fr;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;
        margin-top: -25px;
        position: relative;
        
    }

    .skills1-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    
        
    }

    .skills1-content1 {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 10px;
        
    }
  
    

    .skills1-text1 h5,
    .skills2-text1 h5,
    .skills3-text1 h5,
    .skills4-text1 h5,
    .skills5-text1 h5,
    .skills6-text1 h5 {
        color: rgb(96, 94, 99);
        font-size: 17px;
        
    }

    .skills2 {

        display: grid;
        grid-template-columns: repeat(2, 95px);
        height: 1fr;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills2-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .skills2-content1 {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 0px;
        
    }

  

    .skills3 {

        display: grid;
        grid-template-columns: repeat(2, 95px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;
        
    }

    .skills3-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }


    .skills3-text1 h5 {
        margin: 0;
    }


    .skills4 {

        display: grid;
        grid-template-columns: repeat(2, 95px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills4-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
        
    }

    .skills4-content1 {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: -20px;
        
    }



    .skills5 {

        display: grid;
        grid-template-columns: repeat(2, 95px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills5-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .skills5-content1 {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 0px;
        
    }

 


    .skills6 {

        display: grid;
        grid-template-columns: repeat(2, 95px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills6-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }


    .skills6-text1 h5 {
        margin: 0;
    }

    .skills1 h5 {

        font-size: 17px;
        margin: 0;
        
        
        
    }

    .skills1-content p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .skills2 h5 {

        font-size: 17px;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .skills2-content p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
    }


    .skills3 h5 {

        font-size: 17px;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .skills3-content p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .skills4 h5 {

        font-size: 17px;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .skills4-content p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
    }


    .skills5 h5 {

        font-size: 17px;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .skills5-content p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .skills6 h5 {

        font-size: 17px;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .skills6-content p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .recent-works-symbol p {
        font-size: 13px;
        margin: -5px;
        color: rgba(0, 3, 7, 0.507);
        font-weight: bold;
    
    
    }

    .recent-works-symbol h3 {
        margin: 0;
        font-family: bold;
        color: rgba(0, 3, 7, 0.507);
        font-size: 30px;
        margin-right:5px;
        margin-left:5px;
        
    }

    /* More about projects */

    .more-about-projects {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-top: 20%;
        margin-left: 3%;
        width: 1fr;
        position: relative;
        
        
    }

    .projects-flex-parent {
        height: 600px;
        width: 100%;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        
    }
    .projects-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        align-content: center;
        margin-left: 0%;
        
        
    
    }

    .projects-desc {
        width: 90%;
        margin-right: 10px;
    }
    .projects-desc h4 {
        font-size: 25px;
    }

    .projects-desc .scroll-notify {
        font-size: 12px;
        font-weight: normal;
        color: dimgray;
        margin: 0;
       
        
    }

    .projects-desc p {
        font-size: 15px;
        text-align: justify;
        line-height: 25px;
    }

    .proj-features-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 90%;
        margin-left: 4%;

    }
        

    .proj-key-title h5 {
        font-size: 22px;
        text-align: left;

    }

    .keys {
        
        width: 100%;
        
    }
    .proj-features .keys button {
        font-size: 10px;
        margin: 0;
        padding: 10px 15px;
        background-color: black;
        color: white;
        border-radius: 5px;
        margin-bottom: 10px;
        margin-right: 2px;
        cursor: pointer;

    }

    .keys a {
        text-decoration: none;
    }

    .features-elaborate {
        width: 100%;

    }

    .proj-video {
        margin-right:0;
        width: 90%;
        height: 300px;
        
    }

    .proj-video-laptop {

        position: relative;
    }
    .proj-laptop img {
        margin-top: 50px;
        width: 100%;
        height: 100%;
        max-width: 520px;
        min-width: 100px;
        max-height: 440px;
        min-height: 100px;
        
        
    }

    .proj-video-play video {
    
        width: 57.5%;
        height: 54%;
        max-height: 220px;
        min-height: 100px;
        min-width: 100px;
        max-width: 300px;
        border-radius: 5px;
        filter: blur(0px);
        position: absolute;
        top:20%;
        left: 22%;
        
        
        
        
    }
    .proj-video-play1 video {
    
        width: 57.2%;
        height: 53%;
        max-height: 200px;
        min-height: 100px;
        min-width: 100px;
        max-width: 300px;
        border-radius: 5px;
        filter: blur(0px);
        position: absolute;
        top:22%;
        left: 22%;
        
        
        
        
    }

    

    .features-elaborate h4 {
        font-size: 20px;
    }

    .features-elaborate p {
        font-size: 14px;
        line-height: 25px;
        text-align: justify;
    }

     /* Recent works */

    .more-about1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        overflow:hidden;
        margin-top: 15%;
        margin-left: -20px;
        
    }
  
    .recent-works {

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 80%;
        row-gap: 30px;
        margin-top: 20%;
        margin-left:0%;
        
        
    }

    .recent-works h4 {
        font-size: 25px;
        color: rgb(0, 3, 7);
        margin: 0;
        margin-top: 0px;
        text-align: center;
        margin-bottom: 20px;
        
        
    }

    .recent-works p {
        margin: 0;
        font-size: 14px;
        color: rgb(0, 3, 7);
        font-family:Arial, Helvetica, sans-serif;
        text-align: justify;
        text-justify: inter-word;
        line-height: 30px;
        
    }

    .recent-works-para {
        flex: 1;
        max-width: 90%;
    }

    .recent-works-content1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        column-gap: 40px;
        margin-left: 5px;
    }

    .recent-works-content2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        column-gap: 30px;
        margin-left: 5px;
    }



    .recent-works-img-color1 {
        
        position: relative;
        z-index: 210;
        flex: 1;
        max-width: 90%;
        max-height: 280px;
        border-radius: 20px;
        cursor: pointer;
        margin-bottom: 20px;
        
    }

    .recent-works-img-color2 {
        background-color: rgba(5, 38, 38, 0.706);
        position: relative;
        z-index: 210;
        flex: 1;
        max-width: 90%;
        max-height: 280px;
        border-radius: 20px;
        cursor: pointer;
        margin-bottom: 40px;
    }


    .recent-works-content1:hover .recent-works-cell1 img {
        filter: blur(5px);

    }

   

 

    .recent-works-content2:hover .recent-works-cell1 img {
        filter: blur(5px);

    }

    

    @keyframes big-stay {
        0% {
            transform: scale(0.8);
        }

        100% {
            transform: scale(1.3);
        }
    }

    .recent-works-cell1 {
        
        position: relative;
    }

    .recent-works-cell1 img,
    .recent-works-cell2 img {
        flex: 1;
        max-width: 100%;
        max-height: 280px;
        border-radius: 20px;
        opacity: 0.9;
        transition: opacity 1s;
        filter: blur(5px);
        
        
        
        
    }

    .recent-works-desc {
        width: 350px;
        
    }
    .recent-works-desc h4 {
        margin: 0;
        font-size: 20px;
        margin-left:0px;
        text-align: center;
        margin-bottom: 20px;
        text-decoration: underline;
    }

    .recent-works-desc p {
        font-size:14px;
        text-align: justify;
        margin: 0;
    }

    .tools-arrow1,
    .tools-arrow2 {
        background-color: black;
        padding: 0px 20px 0px 10px;
        clip-path: path("M 0,7 L 60,7 L 60,0 L 90,15 L 60,30 L 60,25 L 0,25  Z");
        margin-left: 10px;
        margin-top: 10px;
        animation: move-forward 1s ease infinite alternate;
        opacity:0;
    }

    .tools-arrow1 p,
    .tools-arrow2 p 

    {
        
        text-align: left;
        color: white;
        font-size: 12px;

        

    }

    .projects-tools {
        flex: 1;
        max-width: 350px;
        margin-top: -25px;
        
    }

    .projects-tools h3 {
        font-size: 17px;
    }

    .projects-tools button {
        background-color: black;
        border-radius: 5px;
        margin:3px 2px;
    }

    .projects-tools p {
        font-size: 10px;
        color: white;
    }
    

    .recent-works-content1 .explore {
        background-color: black;
        padding: 5px 15px;
        border-radius: 15px;
        display: inline-block;
        margin-left: 30%;
        margin-top: 10%;
        opacity: 1;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px cyan, 0 0 8px cyan inset;
        opacity: 0;
        position: absolute;
        

    }

    .recent-explore {
        background-color: black;
        padding: 5px 15px;
        border-radius: 15px;
        display: inline-block;
        right:43%;
        bottom: 5%;
        opacity: 1;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px cyan, 0 0 8px cyan inset;
        position: absolute;

    }

    .recent-explore p {
        color: white;
        margin: 0;
        font-size: 15px;
    }

    .recent-works-content2 .explore {
        background-color: black;
        padding: 5px 15px;
        border-radius: 15px;
        display: inline-block;
        margin-left: 40%;
        margin-top: 10%;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px cyan, 0 0 8px cyan inset;
        opacity: 0;
        position: absolute;

    }

    .recent-works-content1 .explore p {
        color: white;
        margin: 0;
        font-size: 15px;
    }

    .recent-works-content2 .explore p {
        color: white;
        margin: 0;
        font-size: 15px;
    }



    .recent-works-alt-text {
        flex: 1;
        max-width:330px;
        position: absolute;
        top:10px;
        left: 10px;
        opacity: 1;
        transition: opacity 1s;
        

    }

    .recent-works-alt-text h5 {
        font-size: 23px;
        text-align: center;
        text-justify: inter-word;
        font-weight: bold;
        color: black;
        font-family: cursive;
    }

    .recent-works-content2 .recent-works-alt-text h5 {
        font-size: 23px;
        text-align: center;
        text-justify: inter-word;
        font-weight: bold;
        color: white;
        font-family: cursive;
    }



 

    /* Contact box */


    .Contact {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 26%;
        margin-bottom: 260px;
        font-family: Arial, Helvetica, sans-serif;
        width: 1fr;
    }

    .Contact .sub-heading h2 {
        font-size: 22px;
        color: rgb(231, 238, 248);
        font-weight: bold;
        margin-bottom: 40px;
    }

    .Contact .sub-content {
        width: 80%;
        text-align: center;

    }

    .Contact .sub-content p {
        font-size: 15px;
        color: rgb(231, 238, 248);
        margin-bottom: 30px;
    }
    .contact-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 35px;
        width: 100%;
        min-width: 350px;
        height: 450px;
        background-color: white;
        border-radius: 15px;
        font-size: 14px;
        position: relative;
        
        

    }

    .contact-box .text {
        width: 95%; 
        min-width: 300px;  
        height: 30px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box .email {
        width: 95%; 
        min-width: 300px; 
        height: 30px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box .message {
        width: 90%; 
        min-width: 300px; 
        height: 80px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box button{

        padding: 15px 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, black, dimgray, black), linear-gradient(135deg, black, dimgray, black);
        mix-blend-mode: multiply;
        border: none;
        color: white;
        font-weight: bold;
        box-shadow: 2px 2px 2px black, 2px 2px 2px inset rgb(123, 121, 121), 2px 2px 2px inset black, 2px 2px 2px inset white, 2px 2px 2px inset black;
    }

    .contact-box .name-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 8px;

    }

    .contact-box .email-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 8px;
    }

    .contact-box .message-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 8px;

    }

    .name-box .name-title {
        font-weight: bold;
        color: dimgray;

    }
    .name-box .input {
        margin-left: 10px;
    }
    .email-box .email-title {
        font-weight: bold;
        color: dimgray;

    }

    .message-box .message-title {
        font-weight: bold;
        color: dimgray;
        margin-left: 4px;

    }

    .message {
        vertical-align: top;
        padding-top: 20px;
        padding-left: 10px;
        font-weight: bold;
        margin-left: 5px;
        padding-left: -20px;
        
    }

    input[type='email'] {
        padding-left: 10px;
        font-weight: bold;
        color: dimgray;
    }

    input[type='text'] {
        padding-left: 10px;
        font-weight: bold;
        color: dimgray;
    }


    .footer-flex-contact {
        margin-top: 15%;
        backdrop-filter: blur(5px);
    }

    .success_message {

        display: flex;
        justify-content: center;
        align-items: center;
        width: 350px;
        height: 120px;
        background: linear-gradient(120deg, rgb(211, 228, 234), white, rgb(211, 228, 234)), linear-gradient(120deg, rgb(211, 228, 234), white, rgb(211, 228, 234));
        border-radius: 10px;
        position: absolute;
        bottom: 340px;
        right: 0px;
        z-index: 200;
        
    }

    .success_message p {
        color: rgb(7, 150, 7);
        font-size: 14px;
        font-family: verdana;
        margin: 0;
        padding: 20px 30px;
        
    }

    .success_message img {
        width: 40px;
        height: 40px;
        margin-left: 20px;
    }


}

@media (min-width:701px) and (max-width:1000px) {
    .recent-works {

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 320px;
        min-width: 200px;
        row-gap: 30px;
        margin-top: 10%;
        margin-left:5%;
        flex-shrink: 0;
        
        
        

    }
}

@media (min-width:1001px) and (max-width:1350px) {
    .recent-works {

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 600px;
        min-width: 200px;
        row-gap: 30px;
        margin-top: 10%;
        margin-left:5%;
        flex-shrink: 0;
        
        
        

    }
}





@media (min-width:1351px) {
    .recent-works {

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 900px;
        min-width: 200px;
        row-gap: 30px;
        margin-top: 10%;
        margin-left:5%;
        flex-shrink: 0;
        
        
        

    }
}


@media (min-width: 701px) and (max-width:1000px) {
    .recent-works-alt-text h5 {
        font-size: 17px;
        text-align: center;
        text-justify: inter-word;
        font-weight: bold;
        color: black;
        font-family: cursive;
    }

    .recent-works-content2 .recent-works-alt-text h5 {
        font-size: 17px;
        text-align: center;
        text-justify: inter-word;
        font-weight: bold;
        color: white;
        font-family: cursive;
    }

    .recent-works-alt-text {
        flex: 1;
        max-width:350px;
        min-width: 100px;
        position: absolute;
        top:10px;
        margin-left: 5%;
        opacity: 0;
        transition: opacity 1s;

    }

    .explore {
        background-color: black;
        padding: 6px 20px;
        border-radius: 15px;
        display: inline-block;
        margin-left: 35%;
        margin-bottom: 5%;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px cyan, 0 0 8px cyan inset;

    }

    .recent-works-alt-text .explore p {
        color: white;
        margin: 0;
        font-size: 12px;
    }

    
}

@media (min-width:1001px) {
    .recent-works-alt-text h5 {
        font-size: 24px;
        text-align: center;
        text-justify: inter-word;
        font-weight: bold;
        color: black;
        font-family: cursive;
    }

    .recent-works-content2 .recent-works-alt-text h5 {
        font-size: 24px;
        text-align: center;
        text-justify: inter-word;
        font-weight: bold;
        color: white;
        font-family: cursive;
    }
    .recent-works-alt-text {
        flex: 1;
        max-width:350px;
        min-width: 100px;
        position: absolute;
        top:10px;
        margin-left: 10%;
        opacity: 0;
        transition: opacity 1s;

    }

    .explore {
        background-color: black;
        padding: 8px 25px;
        border-radius: 15px;
        display: inline-block;
        margin-left: 35%;
        margin-bottom: 5%;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px cyan, 0 0 8px cyan inset;

    }

    .recent-works-alt-text .explore p {
        color: white;
        margin: 0;
        font-size: 14px;
    }

    
}
/* Laptop screen width */

@media (min-width:701px) {

    /* Home page contents */
    .main {
        display: block;
        left:0%;
        top:70px;
        width:1fr;
        height: 800px;
        position: relative;
        background-color: transparent;
        margin-top:0%;
        margin-left:-10px;
        margin-right: -10px;
        align-content: center;
        justify-items: center;

    }

    .main-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1;
        max-width:700px;
        min-width: 200px;
        height: 400px;
        margin-left: 5%;
        margin-bottom: 5%;
    }
    .hi p {

        font-size: 25px;
        color: rgb(202, 217, 238);
        margin: 0;
        margin-bottom: 10px;
    }

    .main-myname h1{
        font-size: 80px;
        color: rgb(231, 238, 248);
        margin: 0;
    }
    
    

    .brief-intro h3 {
        color: rgb(193, 219, 255);
        font-size: 30px;
        font-weight: normal;
        
    }

    .know-more p {

        color: rgb(28, 26, 26);
        font-size: 18px;
        
        color: rgb(35, 42, 42);
        display: inline-block;
        padding: 10px 40px 10px 22px;
        margin:0;
        
        cursor: pointer;
        
        
    }

    .know-more {
        background-color: white;
        display: inline-block;
        height: 45px;
        clip-path: path("M 0,0 L 186,0 L 216,20 L 186,40 L 0,40 L 20,20 L 0,0 Z");
        animation: move-forward 1s ease infinite alternate;
    }


    /* Bottom content */

    .footer-flex {
        
        margin-top: 15%;
        backdrop-filter: blur(5px);
    }

    .footer1-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        
        
    }

    .icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        max-width: 300px;
        min-width: 100px;
        margin-left: 5%;
        column-gap: 30px;
        cursor: pointer;
        pointer-events: all;
    }

    .icons img {
        width: 30px;
        height: 30px;
        cursor: pointer;
        pointer-events: all;

    }

    .built-info {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        max-width: 800px;
        margin-right: 5%;
    }

    .built-info p {
        color: rgb(231, 238, 248);
        font-size: 15px;
    }

    .footer2-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
    }

    .footer2-grid p {
        color: rgb(231, 238, 248);
        font-size: 13px;
    }

    /* More About Content */

    .more-about {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 1fr;
        font-size: 25px;
        border-radius: 20px;
        margin-top: 0%;
        
        
        
        
    }

    .more-about-content {

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 720px;
        row-gap: 30px;
        margin-top: 15%;
        margin-left:12%;
        
        

    }

    .more-about-content-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        text-indent: 10px;
        padding: 10px 20px;
    }

    .more-about-content h4 {
        font-size: 45px;
        color: rgb(0, 3, 7);
        margin: 0;
        margin-top: 0px;
        text-align: center;
        margin-bottom: 20px;
        
        
    }

    .more-about-content p {
        margin: 0;
        font-size: 19px;
        color: rgb(0, 3, 7);
        font-family:Verdana;
        text-align: justify;
        text-justify: inter-word;
        line-height: 35px;
        
    }

    .more-about-content-text .explore {
        background-color: black;
        padding: 8px 25px;
        border-radius: 15px;
        display: inline-block;
        margin-left: -10px;
        margin-top: 40px;
        opacity: 1;
        animation: big-stay 2s ease infinite;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.489), 0 0 8px rgba(0, 255, 255, 0.398) inset;

    }

    .more-about-content-text .explore p {
        color: white;
        margin: 0;
        font-size: 17px;
    }

    .recent-works-symbol {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 25px;
        animation: move-down 2s ease-in-out infinite;
        
        
        
    }

    /* About footer */

    .about-icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        max-width: 300px;
        min-width: 100px;
        margin-left: 5%;
        column-gap: 30px;
        cursor: pointer;
        pointer-events: all;
        
    }

    .about-icons img {
        width: 30px;
        height: 30px;
        cursor: pointer;
        pointer-events: all;
        filter:invert();
        
    }

    .about-footer2-grid {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about-footer2-grid p {
        color: rgb(36, 37, 38);
        font-size: 13px;
    }

    .about-built-info {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        max-width: 800px;
        margin-right: 5%;
    }

    .about-built-info p {
        color: rgb(36, 37, 38);
        font-size: 15px;
    }

    .recent-works-symbol p {
    font-size: 13px;
    margin: -5px;
    color: rgba(0, 3, 7, 0.507);
    font-weight: bold;
    
    
    }

    .recent-works-symbol h3 {
        margin: 0;
        font-family: bold;
        color: rgba(0, 3, 7, 0.507);
        font-size: 30px;
        margin-right:5px;
        margin-left:5px;
        
    }

    .skills h5 {
        margin-top: 0px;
        font-size: 25px;
        color: rgba(0, 3, 7, 0.966);
    }


    .skills {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 300px;
        margin-top: 8%;
        right: 0%;
        background-color: transparent;
        text-align: center;
        margin-right:20px;
        overflow-y: auto;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
        position: relative;
        
    }

    .skills-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 300px;
        min-width: 100px;
        margin-top: 0%;
        right: 0%;
        background-color: transparent;
        text-align: center;
        margin-right:20px;
        height: 1fr;
        position: absolute;
        opacity: 1;
    }

    .skills-section1 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 300px;
        min-width: 100px;
        margin-top: 0%;
        right: 0%;
        background-color: transparent;
        text-align: center;
        margin-right:20px;
        height: 1fr;
        position: absolute;
        opacity: 0;
    }

    .skills-section2 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        max-width: 300px;
        min-width: 100px;
        margin-top: 0%;
        right: 0%;
        background-color: transparent;
        text-align: center;
        margin-right:20px;
        height: 1fr;
        position: absolute;
        opacity: 0;
    }

   
    .skills-title h5 {
        font-size: 30px;
        margin-top: 20px;
        text-decoration: underline;
    }

    .skills-box h5 {
        color:black;
    }

    


    .skills-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: transparent;
        width:1fr;
        height: 840px;
        margin-top: 20px;
        z-index: 200;
        

        
    }

    .skills-box-1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: transparent;
        flex: 1;
        max-width: 1fr;
        min-width: 100px;
        height: 840px;
        margin-top: 0px;
        z-index: 200;
        

        
    }

    .skills-box1 {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: rgb(45, 48, 47);
        width:1fr;
        height: 840px;
        top:130px;
        left: 0px;
        clip-path: path("M 10,86 L 140,86 A 10,10 0,0,0 150,76 L 150,10 A 10,10 0,0,1 160,0 L 290,0 A 10,10 0,0,1 300,10 L 300,76 A 10,10 0,0,1 290,86 L 160,86 A 10,10 0,0,0 150,96 L 150,218 A 10,10 0,0,0 160,228 L 290,228 A 10,10 0,0,1 300,238 L 300,330 A 10,10 0,0,1 290,340 L 160,340 A 10,10 0,0,0 150,350 L 150,416 A 10,10 0,0,0 160,426 L 290,426 A 10,10 0,0,1 300,436 L 300,586 A 10,10 0,0,1 290,596 L 160,596 A 10,10 0,0,0 150,606 L 150,810 A 10,10 0,0,1 140,820 L 10,820 A 10,10 0,0,1 0,810 L 0,606 A 10,10 0,0,1 10,596 L 140,596 A 10,10 0,0,0 150,586 L 150,436 A 10,10 0,0,0 140,426 L 10,426 A 10,10 0,0,1 0,416 L 0,350 A 10,10 0,0,1 10,340 L140,340 A 10,10 0,0,0 150,330 L 150,238 A 10,10 0,0,0 140,228 L 10,228 A 10,10, 0,0,1 0, 218 L 0,96 A 10,10 0,0,1 10,86 Z");
        z-index: 300;


        
    }

    .skills-box-2 {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: rgb(45, 48, 47);
        flex: 1;
        max-width:1fr;
        min-width: 100px;
        height: 840px;
        top:12%;
        right: 0%;
        z-index: 500;
        opacity: 1;
        clip-path: path("M 10,85 L 140,85 A 10,10 0,0,0 150,75 L 150,10 A 10,10 0,0,1 160,0 L 290,0 A 10,10 0,0,1 300,10 L 300,75 A 10,10 0,0,1 290,85 L 160,85 A 10,10 0,0,0 150,95 L 150,220 A 10,10 0,0,0 160,230 L 290,230 A 10,10 0,0,1 300,240 L 300,345 A 10,10 0,0,1 290,355 L 160,355 A 10,10 0,0,0 150,365 L 150,435 A 10,10 0,0,0 160,445 L 290,445 A 10,10 0,0,1 300,455 L 300,615 A 10,10 0,0,1 290,625 L 160,625 A 10,10 0,0,0 150,635 L 150,825 A 10,10 0,0,1 140,835 L 10,835 A 10,10 0,0,1 0,825 L 0,635 A 10,10 0,0,1 10,625 L 140,625 A 10,10 0,0,0 150,615 L 150,455 A 10,10 0,0,0 140,445 L 10,445 A 10,10 0,0,1 0,435 L 0,365 A 10,10 0,0,1 10,355 L140,355 A 10,10 0,0,0 150,345 L 150,240 A 10,10 0,0,0 140,230 L 10,230 A 10,10, 0,0,1 0, 220 L 0,100 A 10,10 0,0,1 10,85 Z");
        margin-top: -10px;


        
    }

    .skills-box2 {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: rgb(45, 48, 47);
        flex: 1;
        max-width:1fr;
        min-width: 100px;
        height: 840px;
        top:12%;
        right: 0%;
        z-index: 500;
        opacity: 1;
        clip-path: path("M 10,85 L 140,85 A 10,10 0,0,0 150,75 L 150,10 A 10,10 0,0,1 160,0 L 290,0 A 10,10 0,0,1 300,10 L 300,75 A 10,10 0,0,1 290,85 L 160,85 A 10,10 0,0,0 150,95 L 150,220 A 10,10 0,0,0 160,230 L 290,230 A 10,10 0,0,1 300,240 L 300,345 A 10,10 0,0,1 290,355 L 160,355 A 10,10 0,0,0 150,365 L 150,435 A 10,10 0,0,0 160,445 L 290,445 A 10,10 0,0,1 300,455 L 300,615 A 10,10 0,0,1 290,625 L 160,625 A 10,10 0,0,0 150,635 L 150,825 A 10,10 0,0,1 140,835 L 10,835 A 10,10 0,0,1 0,825 L 0,635 A 10,10 0,0,1 10,625 L 140,625 A 10,10 0,0,0 150,615 L 150,455 A 10,10 0,0,0 140,445 L 10,445 A 10,10 0,0,1 0,435 L 0,365 A 10,10 0,0,1 10,355 L140,355 A 10,10 0,0,0 150,345 L 150,240 A 10,10 0,0,0 140,230 L 10,230 A 10,10, 0,0,1 0, 220 L 0,100 A 10,10 0,0,1 10,85 Z");
        margin-top: -10px;


        
    }

    .skills-box3 {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        background-color: rgb(45, 48, 47);
        flex: 1;
        max-width:1fr;
        min-width: 100px;
        height: 840px;
        top:12%;
        right: 0%;
        z-index: 500;
        opacity: 1;
        clip-path: path("M 10,85 L 140,85 A 10,10 0,0,0 150,75 L 150,10 A 10,10 0,0,1 160,0 L 290,0 A 10,10 0,0,1 300,10 L 300,75 A 10,10 0,0,1 290,85 L 160,85 A 10,10 0,0,0 150,95 L 150,220 A 10,10 0,0,0 160,230 L 290,230 A 10,10 0,0,1 300,240 L 300,345 A 10,10 0,0,1 290,355 L 160,355 A 10,10 0,0,0 150,365 L 150,435 A 10,10 0,0,0 160,445 L 290,445 A 10,10 0,0,1 300,455 L 300,615 A 10,10 0,0,1 290,625 L 160,625 A 10,10 0,0,0 150,635 L 150,825 A 10,10 0,0,1 140,835 L 10,835 A 10,10 0,0,1 0,825 L 0,635 A 10,10 0,0,1 10,625 L 140,625 A 10,10 0,0,0 150,615 L 150,455 A 10,10 0,0,0 140,445 L 10,445 A 10,10 0,0,1 0,435 L 0,365 A 10,10 0,0,1 10,355 L140,355 A 10,10 0,0,0 150,345 L 150,240 A 10,10 0,0,0 140,230 L 10,230 A 10,10, 0,0,1 0, 220 L 0,100 A 10,10 0,0,1 10,85 Z");
        margin-top: -10px;


        
    }
   
    .skills1 {

        display: grid;
        grid-template-columns: repeat(2, 150px);
        height: 1fr;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;
        margin-top: -25px;
        position: relative;
        
    }

    .skills1-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    
        
    }

    .skills2 {

        display: grid;
        grid-template-columns: repeat(2, 150px);
        height: 1fr;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills2-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .skills3 {

        display: grid;
        grid-template-columns: repeat(2, 150px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;
        
    }

    .skills3-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .skills4 {

        display: grid;
        grid-template-columns: repeat(2, 150px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills4-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
        
    }

    .skills5 {

        display: grid;
        grid-template-columns: repeat(2, 150px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills5-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .skills6 {

        display: grid;
        grid-template-columns: repeat(2, 150px);
        height: 1fr;
        margin-bottom: 00px;
        margin-top: 0%;
        column-gap: 0px;
        margin-left: 0%;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        padding-bottom:10px;

    }

    .skills6-content {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        
    }

    .skills1 h5 {

        font-size: 20px;
        margin: 0;
        
        
        
    }


    .skills-box .html p,
    .skills-box .css p,
    .skills-box .django p,
    .skills-box .python p,
    .skills-box .streamlit p,
    .skills-box .sql p,
    .skills-box .aws p,
    .skills-box .heroku p,
    .skills-box .streamlit-cloud p, 
    .skills-box .mysql p,
    .skills-box .postgresql p,
    .skills-box .github p,
    .skills-box .git p,
    .skills-box .jupyter p,
    .skills-box .vs-code p,
    .skills-box .sublime p,
    .skills-box .eda p,
    .skills-box .wrang p,
    .skills-box .visual p,
    .skills-box .scraping p,
    .skills-box .predict p,
    .skills-box .neural p {
        font-size: 15px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
        color: transparent;
        font-weight: normal;
    }

    .skills-box1 .html p,
    .skills-box1 .css p,
    .skills-box1 .django p,
    .skills-box1 .python p,
    .skills-box1 .streamlit p,
    .skills-box1 .sql p,
    .skills-box1 .aws p,
    .skills-box1 .heroku p,
    .skills-box1 .streamlit-cloud p, 
    .skills-box1 .mysql p,
    .skills-box1 .postgresql p,
    .skills-box1 .github p,
    .skills-box1 .git p,
    .skills-box1 .jupyter p,
    .skills-box1 .vs-code p,
    .skills-box1 .sublime p,
    .skills-box1 .eda p,
    .skills-box1 .wrang p,
    .skills-box1 .visual p,
    .skills-box1 .scraping p,
    .skills-box1 .predict p,
    .skills-box1 .neural p {
        font-size: 15px;
        margin: 0;
        margin-bottom: 10px;
        text-align: center;
        color: rgb(244, 243, 246);
        font-weight: normal;
    }
    
    .skills-box-1 .html p,
    .skills-box-1 .css p,
    .skills-box-1 .django p,
    .skills-box-1 .python p,
    .skills-box-1 .streamlit p,
    .skills-box-1 .sql p,
    .skills-box-1 .aws p,
    .skills-box-1 .heroku p,
    .skills-box-1 .streamlit-cloud p, 
    .skills-box-1 .mysql p,
    .skills-box-1 .postgresql p,
    .skills-box-1 .github p,
    .skills-box-1 .git p,
    .skills-box-1 .jupyter p,
    .skills-box-1 .vs-code p,
    .skills-box-1 .sublime p,
    .skills-box-1 .eda p,
    .skills-box-1 .wrang p,
    .skills-box-1 .visual p,
    .skills-box-1 .scraping p,
    .skills-box-1 .predict p,
    .skills-box-1 .neural p {
        font-size: 13px;
        margin: 0;
        margin-bottom: 0px;
        text-align: center;
        color: transparent;
        font-weight: normal;
    }

    .skills-box-2 .html p,
    .skills-box-2 .css p,
    .skills-box-2 .django p,
    .skills-box-2 .python p,
    .skills-box-2 .streamlit p,
    .skills-box-2 .sql p,
    .skills-box-2 .aws p,
    .skills-box-2 .heroku p,
    .skills-box-2 .streamlit-cloud p, 
    .skills-box-2 .mysql p,
    .skills-box-2 .postgresql p,
    .skills-box-2 .github p,
    .skills-box-2 .git p,
    .skills-box-2 .jupyter p,
    .skills-box-2 .vs-code p,
    .skills-box-2 .sublime p,
    .skills-box-2 .eda p,
    .skills-box-2 .wrang p,
    .skills-box-2 .visual p,
    .skills-box-2 .scraping p,
    .skills-box-2 .predict p,
    .skills-box-2 .neural p {
        font-size: 12px;
        margin: 0;
        margin-bottom: 0px;
        text-align: center;
        color: rgb(244, 243, 246);
        font-weight: normal;
    }

    .skills-box2 .html p,
    .skills-box2 .css p,
    .skills-box2 .django p,
    .skills-box2 .python p,
    .skills-box2 .sql p,
    .skills-box2 .aws p,
    .skills-box2 .postgresql p,
    .skills-box2 .jupyter p,
    .skills-box2 .vs-code p,
    .skills-box2 .eda p {
        font-size: 13px;
        margin: 0;
        margin-top: 0px;
        text-align: center;
        color: rgb(244, 243, 246);
        font-weight: bold;
        width: 140px;
        animation: appear 2s ease infinite alternate;


    }
    .skills-box2 {
        padding-top: 15px;
    }

    .skills-box2 .streamlit p, 
    .skills-box2 .heroku p,
    .skills-box2 .streamlit-cloud p, 
    .skills-box2 .mysql p,
    .skills-box2 .github p,
    .skills-box2 .git p,
    .skills-box2 .sublime p,
    .skills-box2 .wrang p,
    .skills-box2 .visual p,
    .skills-box2 .scraping p,
    .skills-box2 .predict p,
    .skills-box2 .neural p {
        font-size: 12px;
        margin: 0;
        margin-top: 0px;
        text-align: center;
        color: rgb(45, 48, 47);
        font-weight: normal;
    }

    .skills-box3 .html p,
    .skills-box3 .css p,
    
    .skills-box3 .python p,
    .skills-box3 .streamlit p,
    .skills-box3 .sql p,
    .skills-box3 .aws p,
    .skills-box3 .heroku p,
    .skills-box3 .streamlit-cloud p, 
    .skills-box3 .mysql p,
    
    .skills-box3 .github p,
    .skills-box3 .git p,
    .skills-box3 .jupyter p,
    
    .skills-box3 .sublime p,
    .skills-box3 .eda p,
    .skills-box3 .wrang p,
    .skills-box3 .visual p,
    .skills-box3 .scraping p {
        font-size: 13px;
        margin: 0;
        margin-top: 0px;
        text-align: center;
        color: rgb(244, 243, 246);
        font-weight: bold;
        width: 140px;
        animation: appear 2s ease infinite alternate;
    }

    .skills-box3 {
        padding-top: 15px;
    }

    .skills-box3 .django p,
    .skills-box3 .postgresql p,
    .skills-box3 .vs-code p,
    .skills-box3 .predict p,
    .skills-box3 .neural p {
        font-size: 12px;
        margin: 0;
        margin-top: 0px;
        text-align: center;
        color: rgb(45, 48, 47);
        font-weight: normal;
    }

    .skills2 h5 {

        font-size: 20px;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .skills3 h5 {

        font-size: 20px;
        margin: 0;
        margin-bottom: 15px;
        
    }


    .skills4 h5 {

        font-size: 20px;
        margin: 0;
        margin-bottom: 15px;
        
    }



    .skills5 h5 {

        font-size: 20px;
        margin: 0;
        margin-bottom: 15px;
        
    }


    .skills6 h5 {

        font-size: 20px;
        margin: 0;
        margin-bottom: 15px;
        
    }



    /* More about projects */

    .more-about-projects {

        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 10%;
        margin-left: 3%;
        margin-right: 3%;
        flex: 1;
        column-gap: 40px;

        
        
        
    }

    .projects-flex-parent {
        height: 730px;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .projects-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        max-width: 100%;
        min-width: 20%;
        align-content: center;
        margin-left: 0%;
        
    
    }   

    .projects-desc {
        flex: 1;
        max-width: 600px;
        min-width: 200px;
    }
    .projects-desc h4 {
        font-size: 45px;
    }

    .projects-desc .scroll-notify {
        opacity: 0;
        position: absolute;
        visibility: hidden;
    }

    .projects-desc p {
        font-size: 17px;
        text-align: justify;
        line-height: 25px;
    }

    .proj-features-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex: 1;
        max-width: 600px;
        min-width: 200px;
    }
        

    .proj-key-title h5 {
        font-size: 30px;
        text-align: left;

    }

    .keys {
        flex: 1;
        max-width: 600px;
        min-width: 200px;
        
    }
    .proj-features .keys button {
        font-size: 13px;
        margin: 0;
        padding: 10px 15px;
        background-color: black;
        color: white;
        border-radius: 5px;
        margin-bottom: 10px;
        margin-right: 5px;
        cursor: pointer;

    }

    .keys a {
        text-decoration: none;
    }
    .proj-video {
        flex: 1;
        
        
    }

    .proj-video-laptop {
        position: relative;
        flex: 1;
        max-width: 830px;
        min-width: 200px;

    }

    .proj-laptop img {
        
        margin-top: 50px;
        width: 105%;
        min-width: 200px;
        height: 100%;
        max-height: 610px;
        min-height: 100px;
        
        
    }
    .proj-video-play video {
    
        height: 60%;
        min-height: 100px;
        width: 60%;
        min-width: 150px;
        border-radius: 5px;
        filter: blur(0px);
        position: absolute;
        top: 13.2%;
        right:16.7%;
        
        
        
    }

    .proj-video-play1 video {
    
        height: 58%;
        min-height: 100px;
        width: 60%;
        min-width: 150px;
        border-radius: 5px;
        filter: blur(0px);
        position: absolute;
        top: 15.5%;
        right:16.7%;
        

    }

  

    .features-elaborate h4 {
        font-size: 22px;
    }

    .features-elaborate p {
        font-size: 17px;
        line-height: 25px;
        text-align: justify;
    }

    /* Recent works */

    .more-about1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        column-gap: 20px;
        flex: 1;
    }


    .recent-works h4 {
        font-size: 45px;
        color: rgb(0, 3, 7);
        margin: 0;
        margin-top: 0px;
        text-align: center;
        margin-bottom: 20px;
        margin-left: 5%;
        
        
    }

    .recent-works p {
        margin: 0;
        font-size: 17px;
        color: rgb(0, 3, 7);
        font-family:Arial, Helvetica, sans-serif;
        text-align: justify;
        text-justify: inter-word;
        line-height: 30px;

        
    }

    .recent-works-para {
        flex: 1;
        max-width: 700px;
        min-width: 200px;
    }

    .recent-works-content1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 40px;
        
        position: relative;
        flex: 1;
        max-width: 100%;
    }

    .recent-works-content2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 30px;
        
        position: relative;
        flex: 1;
        max-width: 100%;
        
    }



    .recent-works-img-color1 {
        
        
        z-index: 210;
        width: 100%;
        max-width: 450px;
        min-width: 200px;
        height: 100%;
        max-height: 350px;
        min-height: 180px;
        border-radius: 20px;
        cursor: pointer;
        position: relative;
        
    }

    .recent-works-img-color2 {
        background-color: rgba(5, 38, 38, 0.706);
        
        z-index: 210;
        width: 100%;
        max-width: 450px;
        min-width: 200px;
        height: 100%;
        max-height: 350px;
        min-height: 180px;
        border-radius: 20px;
        cursor: pointer;
        position: relative;
    }

    .recent-works-content1:hover .recent-works-cell1 img {
        filter: blur(5px);

    }

    .recent-works-content1:hover .recent-works-alt-text {
        opacity: 1;
        color: dimgray;
    }

    .recent-works-content1:hover ~ .skills-section {
        opacity: 0;
    }

    .recent-works-content1:hover ~ .skills-section1 {
        opacity: 1;
    }

    .recent-works-content2:hover ~ .skills-section {
        opacity: 0;
    }

    .recent-works-content2:hover ~ .skills-section2 {
        opacity: 1;
    }
    .recent-works-content1:hover {
        .skills-box1 p {
            color: rgb(45, 48, 47);
        }
        
        .skills1-content p {
        color: white;
        animation: appear 2s ease infinite alternate;
        font-weight: bold;
        
    }   
        
        .skills2-content .django p,
        .skills2-content .python p,
        .skills2-content .sql p,
        .skills3-content .aws p,
        .skills4-content .postgresql p,
        .skills5-content .github p,
        .skills5-content .git p,
        .skills5-content .jupyter p,
        .skills5-content .vs-code p,
        .skills6-content .eda p {
            color: white;
            animation: big-stay 2s ease infinite;
            font-weight: bold;
            text-align: center;
            
        }
        .skills-box2 {
            opacity: 1;
            background-color: rgb(45, 48, 47);
        }
        .tools-arrow1 {
            opacity: 1;
        }
        .explore {
            opacity: 1;
        }

    }

    @keyframes appear {
        0%{
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .recent-works-content2:hover .recent-works-cell1 img {
        filter: blur(5px);

    }

    .recent-works-content2:hover .recent-works-alt-text {
        opacity: 1;
    }

    .recent-works-content2:hover {
        .skills-box1 p {
            color: rgb(45, 48, 47);
        }
        .skills1-content p {
        color: white;
        animation: big-stay 2s ease infinite;
        font-weight: bold;

    }
        .skills2-content .streamlit p,
        .skills2-content .python p,
        .skills2-content .sql p,
        .skills3-content .aws p,
        .skills3-content .heroku p,
        .skills4-content .mysql p,
        .skills5-content .github p,
        .skills5-content .git p,
        .skills5-content .jupyter p,
        .skills5-content .sublime p,
        .skills6-content .eda p,
        .skills6-content .visual p {
            color: white;
            animation: big-stay 2s ease infinite;
            font-weight: bold;
            text-align: center;
        }
        .skills-box1 {
            opacity: 1;
            background-color: rgb(45, 48, 47);
        }
        .tools-arrow2 {
            opacity: 1;
            margin-left: 20%;
        }
        .explore {
            opacity: 1;
        }

    }

    @keyframes big-stay {
        0% {
            transform: scale(0.8);
        }

        100% {
            transform: scale(1.2);
        }
    }

    @keyframes big-stay1 {
        0% {
            transform: scale(0.8);
        }

        100% {
            transform: scale(1.8);
        }
    }

    .recent-works-cell1 {

        
    }

    .recent-works-cell1 img,
    .recent-works-cell2 img {
        width: 100%;
        max-width: 450px;
        min-width: 200px;
        height: 200%;
        max-height: 400px;
        min-height: 180px;
        border-radius: 20px;
        opacity: 0.9;
        transition: opacity 1s;
        
        
        
    }

    .recent-explore {
        opacity: 0;
        position: absolute;
    }

    .recent-works-desc {
        width: 300px;
    }
    .recent-works-desc h4 {
        margin: 0;
        font-size: 22px;
        margin-left:0px;
        text-align: center;
        margin-bottom: 20px;
        text-decoration: underline;
    }

    .recent-works-desc p {
        font-size:15px;
        text-align: justify;
        margin: 0;
    }

    .tools-arrow1 {
        background-color: black;
        padding: 0px 20px 0px 10px;
        clip-path: path("M 0,7 L 60,7 L 60,0 L 90,15 L 60,30 L 60,25 L 0,25  Z");
        margin-left: 10px;
        margin-top: 10px;
        animation: move-forward 1s ease infinite alternate;
        opacity:0;
    }

    .tools-arrow1 p 

    {
        
        text-align: left;
        color: white;
        font-size: 12px;

        

    }

    .tools-arrow2 {
        background-color: rgb(255, 255, 255);
        padding: 0px 20px 0px 10px;
        clip-path: path("M 0,7 L 60,7 L 60,0 L 90,15 L 60,30 L 60,25 L 0,25  Z");
        margin-left: 10px;
        margin-top: 10px;
        animation: move-forward 1s ease infinite alternate;
        opacity:0;
        position: absolute;
        bottom: 30px;
        right: 50px;
        z-index: 1000;


    }

    .tools-arrow2 p 

    {
        
        text-align: left;
        color: rgb(4, 4, 4);
        font-size: 12px;

        

    }


    .projects-tools {
        width: 300px;
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }

    .projects-tools button {
        background-color: black;
        border-radius: 10px;
    }

    .projects-tools p {
        font-size: 13px;
        color: white;
    }

    

    

    

    .recent-works-img-color1 .skills-box p {
        font-size: 15px;
        font-family: 'Times New Roman', Times, serif;
        text-align: center;
        
        


    }

    .recent-works-img-color1 .skills-box {
        margin-left: 150px;
        margin-bottom:30px;
        position: absolute;
        top:-35.5%;
        right: -191.6%;
        pointer-events: none;
        opacity: 0;
    }

    .recent-works-img-color2 .skills-box p {
        font-size: 15px;
        font-family: 'Times New Roman', Times, serif;
        text-align: center;
        


    }

    .recent-works-img-color2 .skills-box {
        margin-left: 150px;
        margin-bottom:30px;
        position: absolute;
        top:-144%;
        right: -108.2%;
        pointer-events: none;
        opacity: 0;
    }

    /* Contact box */


    .Contact {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 6%;
        margin-bottom: 260px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .Contact .sub-heading h2 {
        font-size: 25px;
        color: rgb(231, 238, 248);
        font-weight: bold;
        margin-bottom: 40px;
    }

    .Contact .sub-content p {
        font-size: 18px;
        color: rgb(231, 238, 248);
        margin-bottom: 30px;
    }
    .contact-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 35px;
        width: 850px;
        
        height: 600px;
        background-color: white;
        border-radius: 15px;
        font-size: 14px;
        position: relative;
        
        

    }

    .contact-box .text {
        width: 773px;   
        
        height: 50px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box .email {
        width: 773px;
        height: 50px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box .message {
        width: 773px;
        height: 200px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box button{

        padding: 15px 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, black, dimgray, black), linear-gradient(135deg, black, dimgray, black);
        mix-blend-mode: multiply;
        border: none;
        color: white;
        font-weight: bold;
        box-shadow: 2px 2px 2px black, 2px 2px 2px inset rgb(123, 121, 121), 2px 2px 2px inset black, 2px 2px 2px inset white, 2px 2px 2px inset black;
    }

    .contact-box .name-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 8px;

    }

    .contact-box .email-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 8px;
    }

    .contact-box .message-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 8px;

    }

    .name-box .name-title {
        font-weight: bold;
        color: dimgray;

    }
    .name-box .input {
        margin-left: 10px;
    }
    .email-box .email-title {
        font-weight: bold;
        color: dimgray;

    }

    .message-box .message-title {
        font-weight: bold;
        color: dimgray;
        margin-left: 4px;

    }

    .message {
        vertical-align: top;
        padding-top: 20px;
        padding-left: 10px;
        font-weight: bold;
        margin-left: 5px;
        padding-left: -20px;
        
    }

    input[type='email'] {
        padding-left: 10px;
        font-weight: bold;
        color: dimgray;
    }

    input[type='text'] {
        padding-left: 10px;
        font-weight: bold;
        color: dimgray;
    }


    .footer-flex-contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
        margin-top: 35%;
        backdrop-filter: blur(5px);
    }

    .success_message {

        display: flex;
        justify-content: center;
        align-items: center;
        width: 350px;
        height: 120px;
        background: linear-gradient(120deg, rgb(211, 228, 234), white, rgb(211, 228, 234)), linear-gradient(120deg, rgb(211, 228, 234), white, rgb(211, 228, 234));
        border-radius: 10px;
        position: absolute;
        bottom: 340px;
        right: 0px;
        z-index: 200;
        
    }

    .success_message p {
        color: rgb(7, 150, 7);
        font-size: 14px;
        font-family: verdana;
        margin: 0;
        padding: 20px 30px;
        
    }

    .success_message img {
        width: 40px;
        height: 40px;
        margin-left: 20px;
    }



}




@keyframes move-forward {
    0% {
        transform: translateX(0px);
    }
   
    100% {
        transform: translateX(40px);
    }

    
}



.know-more:hover {
    animation-play-state: paused;
    transform: translateX(20px);
    animation: scale 1s ease infinite alternate;
    background-color: rgb(85, 98, 116);
    

    p {
        color: white;
        
    } 
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}



@keyframes move-down {

    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(20px);
    }
}

.recent-works-symbol:hover {
    animation-play-state: paused;
    animation: big 2s ease infinite;
}

@keyframes big {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2) translateY(20px);
        
    }
}