/* Mobile device screen width */

@media (max-width:700px) {
   /* Home page contents */
    .main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        left:0%;
        position: relative;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ); 
        margin-top:-5%;
        margin-left:-10px;
        margin-right: -10px;
        z-index: 300;
        
    
   
    } 

    .main-content {
        display: grid;
        grid-template-columns: 50vw 35vw;
        max-width:90vw;
        height: 380px;
        margin-top: 25%;
        column-gap: 0px;
        place-content: center center;
        place-self: center;
        
    }

    .main-content-div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1;
        width:50vw;
        max-width: 230px;
        min-width: 100px;
        height: 300px;
        margin-bottom: 5%;
        row-gap: 10px;
        
        margin-right: 5%;
    }

    .hi p {

        font-size: 20px;
        color: rgb(56, 63, 63);       
        margin: 0;                      
        margin-bottom: 0px;
    }

    .main-myname h1{
        font-size: 34px;
        color: rgb(9, 10, 10);
        margin: 0;
    }
    .designation {
        width: 100%;
        max-width: 43vw;
        min-width: 80px;
        margin-bottom: 10px;
    }
    .designation h2 {
        color: rgb(56, 63, 63);
        font-size: 19px;
        font-weight: normal;
        margin: 0;
    }

    .brief-intro h5 {
        color: rgb(56, 63, 63);
        font-size: 17px;
        font-weight: normal;
        margin: 0;
        
    }

    .my-pic {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        max-height: 170px;
        width: 100%;
        max-width: 130px;
        clip-path: circle(63px at 50% 38%);
        background-color: white;
        object-position: center right;
        margin-top: 30%;
        
    }

    .my-pic img {
        height: 100%;
        max-height: 160px;
        width: 100%;
        max-width: 120px;
        clip-path: circle(57px at 50% 38%);
        background-color: ghostwhite;
        backdrop-filter: blur(5px);

        
    }

    .know-more button {

        color: white;
        padding: 10px 18px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .know-more {
        font-size: 13px;
        margin-top: 10px;
    }

    .know-more button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    /* Services section */

    .services-brief {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
        background-color: ghostwhite;
        backdrop-filter: blur(10px);
        width: 100vw;
        height: 600px;
        padding: 30px 0px;
        margin-top: 30px;
        
    }

    .service-maintitle h3 {
        font-size: 26px;
        color: rgb(9, 10, 10);
        margin: 0;
        

    }

    .service-subtitle p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .services {
        display: grid;
        grid-template-columns: 85vw;
        place-content: center center;
        place-self: center;
        row-gap: 20px;
        display: none;
        opacity: 0;

    }

    .service4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 10px;
        backdrop-filter: blur(5px);
        height: 100%;
        max-height: 250px;
        min-height: 100px;
        flex: 1;
        max-width:550px;
        min-width: 200px;
        padding: 0px 20px;
        background-color: white;
        text-align: center;
        border-radius: 5px;
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
        display: none;
        opacity: 0;
    }



    .services-mobile {
        display: grid;
        grid-template-columns: 70vw;
        height: 400px;
        place-content: center center;
        place-self: center;
        row-gap: 20px;
        
    }

    .service-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 10px;
        backdrop-filter: blur(5px);
        height: 100%;
        max-height: 400px;
        min-height: 150px;
        width:70vw;
        min-width: 150px;
        background-color: white;
        text-align: center;
        border-radius: 10px;
        padding: 10px 20px;
        place-self: center;
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
    }

    .service-title-mobile {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 65vw;
        row-gap: 20px;
    }

    .service-title-mobile img {
        height: 150px;
        width: 28vw;
        
    }


    .service-title-mobile h3 {
        font-size: 22px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .service-content-mobile {
        width: 100%;
        max-width: 60vw;
        margin-top: 20px;
    }
    .service-content-mobile p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 20px;
    }

    .view-services button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
    }

    .view-services {
        font-size: 15px;
         margin-top: 25px;
    }

    .view-services button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }
    
    /*
    .know-more {
        
        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;
    }
    */

    /* Why choose me */

    .why-choose-me {
        display: grid;
        grid-template-rows: 550px 450px;
        place-content: center center;
        place-self: center;
        place-items: center;
        row-gap: 30px;
        width: 100vw;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        padding: 20px 0px;
        height: 1fr;

    }

    .why-choose-me-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 85vw;
        min-width: 150px;
    }

    .why-choose-me-content h3 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
        margin-bottom: 20px;
        
    }

    .why-choose-me-content p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 30px;
    }

    .why-choose-me-pic img {
        width: 100%;
        max-width: 250px;
        min-width: 100px;
        height: 100%;
        max-height: 400px;
        animation: appear 2s ease infinite;
    }

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

    @keyframes appearFromRight {
        0% {
            opacity: 0.3;
            margin-left: 35%;
        }
        100% {
            opacity: 1;
            margin-left: -30%;
        }
    }

    .why-choose-me-content button {
        color: white;
        padding: 10px 15px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        font-size: 13px;
        margin-top: 20px;
        opacity: 0;
        display: none;
        
        
    }

    .choose-me-service-button button {
        color: white;
        padding: 10px 15px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        font-size: 13px;
        margin-top: 20px;
        
    }

    .choose-me-service-button button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }


    /* Latest Works */

    .latest-works {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10px);
        width: 100vw;
        row-gap: 30px;
        margin-top: 0%;
        height: 1fr;
        padding: 40px 0px;
        /*
        background: linear-gradient(120deg, white, ghostwhite, rgb(231, 231, 231), white), linear-gradient(120deg, white, ghostwhite, rgb(231, 231, 231), white);
        */
        background-color: ghostwhite;
        
    
    }

    .latest-works-title h3 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .latest-works-subtitle p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .latest-works-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
        max-width: 700px;
        place-content: center center;
        place-self: center;
        display: none;
        opacity: 0;
    }

    .latest-works-grid-mobile {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
        max-width: 700px;
        place-content: center center;
        place-self: center;


    }

    .latest-works-sub-grid-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
    }

    .latest-works-details-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
        height: 360px;
        width: 100%;
        max-width: 300px;
        min-width: 100px;
        place-self: center;
        cursor: pointer;
        border-radius: 8px;
        
    }

    .latest-works-details-mobile:hover {
        box-shadow: 2px 2px 6px rgb(199, 198, 198), 2px 2px 6px inset rgb(199, 198, 198), 2px 2px 6px inset rgb(199, 198, 198);
        
    }

    .latest-works-name-mobile {
        width: 100%;
        max-width: 300px;
    }

    .latest-works-name-mobile h4 {
        font-size: 20px;
        color: rgb(9, 10, 10);
        margin: 0;
        text-align: center;
    }

    .latest-works-name-mobile span {
        font-size: 14px;
        color: rgb(174, 59, 59);
        margin: 0;
        vertical-align: middle;
        
    }

    .works-img-mobile img {
        height:100%;
        max-height: 350px;
        min-height: 100px;
        width: 100%;
        max-width: 290px;
        min-width: 250px;
        border-radius: 8px;
        animation: appear 2s ease;
    }

    .design-stage {
        position: absolute;
        bottom:40%;
    }

    .design-stage h5 {
        font-size: 20px;
        color: rgb(9, 10, 10);
        margin: 0;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.232);
    }

    .works-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .see-in-detail button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .see-in-detail {
        font-size: 15px;
        margin-top: 25px;
    }

    .see-in-detail button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    /* Why Work with Me */

    .why-work-with-me {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 0px;
        row-gap: 30px;
    }

    .work-with-me-title h3 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .work-with-me-grid {
        display: grid;
        grid-template-columns: 350px;
        row-gap: 20px;
        align-content: center;
        place-content: center center;
        place-self: center;
        opacity: 0;
        display: none;
        

    }

    .work-with-me-grid-mobile {
        display: grid;
        grid-template-columns: 75vw;
        row-gap: 20px;
        align-content: center;
        place-content: center center;
        place-self: center;
        height: 300px;
        
        

    }

    .work-with-me-contents-mobile {
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
        width: 100%;
        height: 250px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.535);
        backdrop-filter: blur(5px);
        
    }

    .work-with-content-flex-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
        margin-top: 20px;
        
        
    }

    .work-with-content-flex-mobile img {
        width: 60px;
        height: 60px;
    }

    .content-title-mobile h4 {
        font-size: 20px;
        margin: 0;
        color: rgb(9, 10, 10);
        text-align: center;
        
    }

    .content-details-mobile {
        width: 90%;
        
    }
    .content-details-mobile p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-left: 30px;

    }

    .lets-talk button {

        color: white;
        padding: 10px 15px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .lets-talk {
        font-size: 13px;
        margin-top: 20px;
    }

    .lets-talk button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }


    /* Discuss Your Project */

    .discuss-your-project {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 30px;
        background-color: ghostwhite;
        padding: 80px 0px;
        width: 100vw;
    }

    .discuss-title h3 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .discuss-content {
        width: 80vw;
    }

    .discuss-content p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .discuss-contact button {

        color: white;
        padding: 10px 15px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .discuss-contact {
        font-size: 13px;
         margin-top: 25px;
    }

    .discuss-contact button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }


    /* More About Page */

    /* More About- Content */
    .about-me {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        width: 100vw;
        height: 1000px;
        margin-top: -3%;
    }

    .about-me-content {
        display: grid;
        grid-template-rows: 350px 350px;
        row-gap: 100px;
        width: 85vw;
        place-content: center center;
        place-self: center;
        padding: 30px 20px;
        margin-top: 13%;
        
    
    }

    .about-me-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 30px;
        width: 85vw;
        margin-left: 0%;
        

    }

    .about-me-title h1 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .about-me-p {
        width: 85vw;
    }    

    .about-me-p h6 {
        color: rgb(56, 63, 63);
        font-size: 22px;
        font-weight: normal;
        margin: 0;
        line-height: 30px;
        margin-bottom: 20px;
        text-align: justify;
        
    }

    .about-me-p p {
        color: rgb(56, 63, 63);
        font-size: 18px;
        font-weight: normal;
        margin: 0;
        line-height: 30px;
        margin-top:10px;
        text-align: justify;

    }

    .about-me-button {
        font-size: 15px;
        margin-top: 25px;
    }

    .about-me-button button {
        color: white;
        padding: 10px 15px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .about-me-button button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141);
    }

    .about-me-img-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        max-height: 250px;
        width: 100%;
        max-width: 200px;
        background-color: rgba(255, 255, 255, 0.456);
        object-position: center center;
        border-radius: 20px;
        box-shadow: 3px 3px 4px rgba(255, 255, 255, 0.456), 3px 3px 4px inset rgba(255, 255, 255, 0.456), 3px 3px 4px inset rgba(255, 255, 255, 0.456), 3px 3px 4px inset rgba(255, 255, 255, 0.456), 3px 3px 4px inset rgba(255, 255, 255, 0.456);
        align-content: center center;
        align-self: center center;
        place-self: center;
        position: relative;
    }

    .about-me-img {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        max-height: 250px;
        width: 100%;
        max-width: 200px;
        clip-path: circle(100px at 50% 40%);
        background-color: white;
        object-position: center center;
        opacity: 0;
        display: none;
        
        
    }

    .about-me-img-mobile img {
        height: 100%;
        width: 100%;
        max-width: 190px;
        background-color: ghostwhite;
        backdrop-filter: blur(5px);
        border-radius: 20px;
    }

    .certifications {
        position: absolute;
        right: 6%;
        bottom: 2%;
        
    }

    .certificates-button button {
        
        background-color: #f2f5ff;
        border: none;
        width: 100%;
        max-width: 40px;
        height: 100%;
        max-height: 35px;
        box-shadow: 1px 1px 3px lightgray, 1px 1px 3px inset lightgray, 1px 1px 3px inset lightgray, 1px 1px 3px inset lightgray, 1px 1px 3px inset lightgray;
        object-position: center center;
        place-self: center center;
        place-items: bottom center;
        cursor: pointer;
    }

    .certificates-button img {
        width: 85%;
        max-width: 30px;
        height: 85%;
        max-height: 30px;
        margin-top: 3px;
        
        

    }

    .certifications-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100vw;
        height: 100%;
        background-color: rgba(173, 216, 230, 0.489);
        backdrop-filter: blur(8px);
        opacity: 0;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;

    }

    .isCertifications {
        opacity: 1;
        display: initial;
    }

    .certificates {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        row-gap: 10px;
        background-color: white;
        width: 60vw;
        padding-top: 10px;
        padding-left: 30px;
        place-self: center center;
        position: relative;

    }

    .pop-up-close button {
        background-color: transparent;
        border: none;
        position: absolute;
        top:0;
        right: 0;

    }

    .pop-up-close button p {
        font-family: poppins;
        font-size: 23px;
        color: dimgray;
        margin: 0;

    }

    .pop-up-close p:hover {
        transform: scale(1.1);
        color: red;
    }


    .certificate-title {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 5px;
        border-bottom: 0.5px lightgray solid;
    }

    .certificate-title img {
        width: 25px;
        height: 25px;
    }

    .certificate {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        border-bottom: 0.5px lightgray solid;
    }

    .certificates h5 {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .certificates h6 {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 5px;
    }

    .certificates p {
        font-size: 15px;
        color: dimgray;
        margin: 0;
        margin-bottom: 15px;
    }

    .certificates li {
        font-size: 14px;
        color: rgb(59, 59, 59);
        margin: 0;
        line-height: 25px;
        margin-left: 15px;
    }


    
    /* More About- Journey */

    .my-journey {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        background-color: ghostwhite;
        backdrop-filter: blur(5px);
        row-gap: 30px;
        padding: 30px 0px;
        height: 1fr;
    }

    .journey-title h4 {
        font-size: 30px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .journey-text {
        width: 85vw;
        
    }

    .journey-text p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 30px;
        margin-bottom: 20px;
        text-align: justify;
    }
    /* About me- Skills Section */

    .skills-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        width: 100vw;
        padding: 40px 0px;
        place-content: center center;
        place-self: center center;

    }

    .skills-section-title h4 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .skills {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        max-width: 1350px;
        column-gap: 80px;
        place-self: center;
        place-content: center center;
        margin-top: 40px;
        opacity: 0;
        display: none;
    }

    .skills-mobile {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 50vw;
        place-self: center;
        place-content: center center;
        margin-top: 40px;
    }

    .skill-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        place-self: center;
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
        width:  250px;  
        height: 380px;
        background-color: rgba(255, 255, 255, 0.735);
        backdrop-filter: blur(5px);
        border-radius: 5px;
        padding: 15px;
        row-gap: 30px;
        margin-top: 10%;

    }
    .skill-content-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .skill-title-h5 h5 {
        color: rgb(9, 10, 10);
        margin: 0;
        font-size: 20px;
        
    }

    .skill-image img {
        width: 80px;
        height: 80px;
        
    }

    .skill-content-text li {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 40px;
        margin-left: 20px;
        
    }

    .skills-contact-me {
        font-size: 15px;
        margin-top: 35px;
        margin-bottom: 35px;
    }

    .skills-contact-me button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .skills-contact-me button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    /* Projects Page */

    /* Latest Projects */

    .latest-projects {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-top: -5%;
        /*background: linear-gradient(120deg, rgb(217, 217, 237), white, ghostwhite, white, rgb(210, 210, 240), white, rgb(204, 204, 240));
        */
        background: linear-gradient(130deg, #283456, #283456, #0d1017, #283456, #39456d, #283456, #283456);
        mix-blend-mode: multiply;
        padding-bottom: 60px;
    }

    .latest-projects-title {
        margin-top: 30%;
    }

    .latest-projects-title h1 {
        font-size: 35px;
        color: #c9d2ee;
        margin: 0;
        margin-bottom: 20px;
        
    }

    .latest-projects-subtitle {
        width: 80vw;
    }

    .latest-projects-subtitle h6 {
        color: #abb4ce;
        font-size: 22px;
        font-weight: normal;
        margin: 0;
        line-height: 40px;
        margin-bottom: 20px;
        text-align: justify;
    }

    .latest-projects-details {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 1350px;
        height: 510px;
        place-content: center center;
        place-self: center;
        column-gap: 40px;
        margin-bottom: 60px;
        opacity: 0;
        display: none;
        
    }

    .latest-projects-details-mobile {

        display: grid;
        grid-template-columns: 85vw;
        height: 500px;
        place-content: center center;
        place-self: center;
        margin-top: 30px;
        
    }

    

    .latest-projects-contents {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        place-self: center;
        height: 480px;
        width: 100%;
        max-width: 60vw;
        border-radius: 10px;
        box-shadow: 1px 1px 2px #c5cde3, 1px 1px 2px inset #c5cde3, 1px 1px 2px inset #c5cde3;
        position: relative;
        cursor: pointer;
        background-color: rgb(253, 253, 254);
        row-gap: 10px;
        
        
    }

    

    .latest-projects-contents img {
        height: 100%;
        max-height: 450px;
        width: 100%;
        max-width: 60vw;
        border-radius: 10px;
        cursor: pointer;
        

    }

    .business-intelligence img {
        height: 100%;
        max-height: 340px;
        width: 100%;
        max-width: 60vw;
        border-radius: 10px;
        cursor: pointer;
        margin-top: 5px;
        filter: blur(2px);
    }


    .projects-content-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 1fr;
        width: 100%;
        max-width: 55vw;
        min-width: 100px;
        position: absolute;
        background-color: rgb(253, 253, 254);
        padding: 20px;
        border-radius: 0px 0px 5px 5px;
        bottom: 0px;
        
    }

    .projects-content-text-bus {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 1fr;
        width: 100%;
        max-width: 55vw;
        min-width: 100px;
        background-color: rgb(253, 253, 254);
        padding: 20px;
        border-radius: 0px 0px 5px 5px;
        bottom: 0px;
    }
    
    .projects-content-text h5 {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        opacity: 1;
        display: initial;
    }

    .projects-content-text-bus h5 {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        opacity: 1;
        display: initial;
        border-radius: 0px 0px 5px 5px;
    }
    
    .js-ml-project-content-h5-mobile {

        opacity: 1;
        display: initial;
        margin-bottom: 20px;
    }

    .removeH5 {
        opacity: 0;
        display: none;
    }

    .projects-content-text p {
        font-size: 15px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        
    }

    .projects-content-text-bus p {
        font-size: 15px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        
    }

    .projects-content-text-bus li {
        font-size: 14px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 35px;
        margin-left: 10px;
        
    }

    .zoomP p {
        font-size: 20px;
        color: rgb(117, 59, 59);
        margin: 0;
        line-height: 25px;
        margin-bottom: 10px;
        margin-top: 15px;
    }

    .zoomP li {
        font-size: 16px;
        color: rgb(117, 59, 59);
        margin: 0;
        line-height: 35px;
        margin-left: 15px;
    }

    .projects-content-text button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  #2f3a55;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 14px;
        margin-top: 20px;
        border-radius: 5px;
    }

    .projects-content-text button:hover {
        background-color:  #3b4b75;
        box-shadow: none;
    }

    .projects-content-text-bus button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  #2f3a55;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 14px;
        margin-top: 20px;
        border-radius: 5px;
    }

    .projects-content-text-bus button:hover {
        background-color:  #3b4b75;
        box-shadow: none;
    }


    .have-project-idea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        padding: 40px 0px;
        background: linear-gradient(125deg, ghostwhite, ghostwhite, white, ghostwhite, ghostwhite, ghostwhite), linear-gradient(125deg, ghostwhite, ghostwhite, white, ghostwhite, ghostwhite, ghostwhite);
        mix-blend-mode: multiply;
        height: 1fr;
        row-gap: 30px;
    }

    .project-idea-title {
        width: 80vw;
        max-width: 370px;
    }
    
    .project-idea-title h4 {
        color: rgb(56, 63, 63);
        margin: 0;
        font-size: 25px;
    }
    .project-idea-text {
        width: 80vw;
        max-width: 370px;
    }

    .project-idea-text p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
    }

    .project-idea-button button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  #2f3a55;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 14px;
        border-radius: 5px;
    }

    .project-idea-button button:hover {
        background-color:  #3b4b75;
        box-shadow: none;
    }

    /* Services Page */

    .service-projects-details /* For services page */{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        max-width: 1350px;
        height: 510px;
        place-content: center center;
        place-self: center;
        column-gap: 40px;
        margin-top: 50px;
        margin-bottom: 60px;
        opacity : 0;
        display: none;
        
    }

    .service-projects-details-mobile {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 85vw;
        height: 510px;
        place-content: center center;
        place-self: center;
        column-gap: 40px;
        margin-top: 50px;
        margin-bottom: 60px;
    }

    .services-projects-contents-mobile /* For services page */{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        place-self: center;
        height: 100%;
        max-height: 650px;
        width: 100%;
        max-width: 75vw;
        border-radius: 10px;
        box-shadow: 1px 1px 2px #c5cde3, 1px 1px 2px inset #c5cde3, 1px 1px 2px inset #c5cde3;
        position: relative;
        cursor: pointer;
        
        /* background-color: rgb(253, 253, 254);*/
        background: linear-gradient(120deg, rgb(237, 237, 244), white, rgb(237, 237, 244), rgb(237, 237, 244)), linear-gradient(120deg, rgb(237, 237, 244), white, rgb(237, 237, 244), rgb(237, 237, 244));
        

        
        
    }

    .services-projects-contents-mobile img /* For services page */{
        height: 100%;
        max-height: 150px;
        width: 100%;
        max-width: 240px;
        border-radius: 10px;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 10px;

    }

    .services-content-text /* For services page */ {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100%;
        max-height: 300px;
        width: 90%;
        max-width: 260px;
        min-width: 100px;
        padding: 20px;
        border-radius: 0px 0px 5px 5px;
        row-gap: 15px;
        
        

    } 

    .services-content-text h5 /* For services page */{
        font-size: 22px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 0px;
    }
    .services-content-text-p {
        height: 210px;
        overflow-y: auto;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
    }

    .services-content-text-p p/* For services page */{
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        
    }

    .services-content-text-li li /* For services page */ {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        margin-top: 0px;
        margin-left: 15px;
        margin-bottom: 10px;
    }     

    .tools /* For services page */{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(206, 206, 206, 0.207);
        backdrop-filter: blur(10px);
        column-gap: 8px;
        margin-left: -6%;
        margin-bottom: -5%;
        width: 290px;
        
    }

    .tools p {
        font-size: 11px;
        color: rgb(56, 63, 63);
        margin: 0;
    }
    
    .toolicon,
    .toolicon-sklearn {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .toolicon img {
        width: 20px;
        height: 20px;
    }

    .toolicon-sklearn img {
        width: 35px;
        height: 30px;
    }

    .more p {
        
        color: rgb(56, 63, 63);
        margin: 0;
        margin-left: 5px;
    }


    /* Project- Service App Page */

    .service-app {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 100vw;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        margin-top:-5%;
        column-gap: 70px;
        padding-bottom: 15%;
        

    }

    .service-app-details {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        max-width: 85vw;
        margin-top: 25%;
        row-gap: 40px;
        margin-left: 2%;
        
    }

    .service-app-title h3 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .service-app-desc {
        width: 90%;
    }

    .service-app-desc p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 30px;
    }

    .service-app-nav-buttons button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  black;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 16px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .js-demo-video-button {
        opacity: 0;
        display: none;
    }

    .js-tools-button {
        opacity: 0;
        display: none;
    }

    .service-app-nav-buttons button:hover {
        background-color:  dimgray;
        box-shadow: none;
    }

    .js-key-features  {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 95%;
        row-gap: 20px;
        opacity:0;
        display: none;
        
        
    }

    .key-features h5 {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;

    }

    .key-features a {
        text-decoration: none;
    }

    .key-features-buttons button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color:  black;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 13px;
        border-radius: 5px;
        margin-right: 5px;
        margin-bottom: 10px;
    }

    .key-features-buttons button:hover {
        background-color:  dimgray;
        box-shadow: none;
    }

    .js-tools-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 95%;
        row-gap: 20px;
        opacity: 1;
        display: initial;
        animation: appear 2s ease;
        
    }

    .js-tools-list h5 {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        
    }

    .tools-used-buttons button {
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color:  ghostwhite;
        box-shadow: 2px 2px 4px white, 2px 2px 4px inset white, 2px 2px 4px inset white, 2px 2px 4px white;
        border: none;
        font-size: 13px;
        border-radius: 5px;
        margin: 0;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .tools-used-buttons p {
        margin: 0;
        font-size: 13px;
        color: rgb(56, 63, 63);

    }


    .tools-used-buttons img {
        width: 30px;
        height: 30px;
        object-position: center center;
    }

    .notKeys {
        opacity: 1;
        display: initial;
        animation: appear 2s ease;
        
    }

    

    .isTools {
        opacity: 0;
        display: none;

    }

    .key-feature-name h5 {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        margin-top: 20px;
        animation: appear 2s ease;
    }

    .key-feature-description p {
        font-size: 14px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 30px;
        animation: appear 2s ease;
    }

    .js-key-features-elaborate {
        animation: appear 2s ease;
    }



    .service-app-video-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 380px;
        margin-top: 20%;
        opacity: 0;
        display: none;

    }

    .service-app-video-img-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 380px;
        margin-top: 20%;

    }


    .service-app-visuals {
        opacity: 0;
        display: 0;
    }

    .service-app-images {
        width: 100%;
        max-width: 300px;
        
        
    }

    .service-app-images img {
        width: 100%;
        max-width: 350px;
        height: 100%;
        max-height: 400px;
        animation: appear 2s ease infinite;
    }

    .js-service-app-demo-video-mobile {
        opacity: 0;
        display: none;
    }

    .service-app-demo-video {
        width: 100%;
        max-width: 400px;
        height: 100%;
        max-height: 400px;
        animation: appear 2s ease;
        
    }

    .video-visible {
        opacity: 1;
        display: initial;
    }
    
    .noVisuals {
        opacity: 0;
        display: none;
    }

    /* Ecommerce app page */

    .ecommerce-app-video-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 650px;
        margin-top: 20%;
        opacity: 0;
        display: none;
    }

    .ecommerce-app-video-img-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 380px;
        margin-top: 20%;
        
    }

    .js-ecommerce-app-demo-video-mobile {
        opacity: 0;
        display: none;
    }

    .ecommerce-app-demo-video {
        width: 100%;
        max-width: 500px;
        height: 100%;
        max-height: 400px;
        animation: appear 2s ease;
    }

    .video1-visible {
        opacity: 1;
        display: initial;
    }

    .image1-invisible {
        opacity: 0;
        display: none;
    }

    /* Contact Page */


    .Contact {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 15%;
        margin-bottom: 15%;
        
    }

    .Contact .sub-heading h2 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        font-weight: bold;
        margin-bottom: 30px;
        margin-top: 35%;
    }
      
    .Contact .sub-content {
        width: 85vw;
        max-width: 390px;
    }

    .Contact .sub-content p {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin-bottom: 30px;
    }
    .contact-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 35px;
        width: 85vw;
        max-width: 380px;
        height: 400px;
        background-color: white;
        border-radius: 15px;
        font-size: 13px;
        position: relative;
        
    }

    .contact-box .text {
        width: 80vw;
        max-width: 320px;   
        height: 25px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box .email {
        width: 80vw;
        max-width: 320px;
        height: 25px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box .message {
        width: 80vw;
        max-width: 320px;
        height: 100px;
        background-color: lightgray;
        border: none;
        border-radius: 5px;
    }

    .contact-box button{

        padding: 10px 25px;
        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: 300px;
        height: 100px;
        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: 30%;
        right: 0px;
        z-index: 200;
        
    }

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

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


    /* Bottom content */


    .footer-laptop {
        opacity: 0;
        display: none;
    }

    .footer-mobile {
        backdrop-filter: blur(5px);
        background: linear-gradient(130deg, #283456, #283456, #0d1017, #283456, #39456d, #283456, #283456);
        width: 100%;
        max-width:100vw;
        min-width: 60vw;
        font-family: poppins;
    }

    .footer-flex-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width:100vw;
        min-width: 60vw;
        padding-top: 30px;
        margin-bottom: 0px;
        
        
            
    }

    .footer-flex1-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.014);
        backdrop-filter: blur(5px);
        width: 100%;
        max-width:100vw;
        min-width: 60vw;
        padding-top:20px;
        padding-bottom: 20px;
        margin-top: -20px;
        height: 50px;
    }
    
    .footer-flex1-mobile h4 {
        margin: 0;
        color: #abb4ce;
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
        font-weight: normal;

        
    }

    .footer-flex1-mobile p {
        margin: 0;
        color: #6b7695;
        font-size: 12px;
        text-align: center;
    }

    .footer-flex1-mobile span {
        margin: 0;
        color: #abb4ce;
        font-size: 12px;
        font-weight: normal;
    }

    .footer-grid-mobile {
        display: grid;
        grid-template-columns: 60vw 25vw;
        width: 100%;
        max-width: 90vw;
        min-width: 30vw;
        height: 30px;
        /*background-color: #283456;*/
        border-bottom: 0.2px solid #646b835c;
        column-gap: 2%;
        flex-shrink: 1;
        
     
    }
    .grid1-mobile {

        width: 100%;
        max-width: 60vw;
        min-width: 30vw;
        font-weight: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 1;
        column-gap: 2%;
    }
  

    .grid1-mobile p {
        color: #95a4cc;
        margin: 0;
        font-size: 11.5px;
        border: none;
        background-color: transparent;
        cursor: pointer;

        
        
    }

    .grid1-mobile a {
        text-decoration: none;
        color: #95a4cc;
    }

    .grid2-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 3%;
    }

    
    .grid2-mobile p {
        margin: 0;
        color: #6b7695;
        font-size: 12px;
        align-items: center;
        
        
    }

    
    .linkedin-mobile img {
        width: 25px;
        height: 25px;
        cursor: pointer;
        pointer-events: all;
        

    }

    .github-mobile img {
        width: 20px;
        height: 20px;
        cursor: pointer;
        pointer-events: all;
        

    }

    .mail-box-mobile img {
        width: 20px;
        height: 20px;
        cursor: pointer;
        pointer-events: all;
        

    }

    .footer-flex3-mobile p {
        margin: 0;
        color: #6b7695;
        font-size: 12px;
        margin-top: 8px;
        margin-bottom: 8px;
    }



}


/**************************************************************************************************/
/**************************************************************************************************/




/* Laptop screen width */

@media (min-width:701px) {

    /* Home page contents */
    .main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        left:0%;
        position: relative;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        
        margin-top:-5%;
        margin-left:-10px;
        margin-right: -10px;
        z-index: 300;
        
    
   
}

    .main-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width:1fr;
        height: 700px;
        margin-top: 10%;
        column-gap: 40px;
        
    }

    .main-content-div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1;
        max-width:700px;
        min-width: 200px;
        height: 250px;
        margin-bottom: 5%;
        row-gap: 10px;
        margin-top: 0%;
    }
    .hi p {

        font-size: 25px;
        color: rgb(56, 63, 63);       
        margin: 0;                      
        margin-bottom: 0px;
    }

    .main-myname h1{
        font-size: 70px;
        color: rgb(9, 10, 10);
        margin: 0;
    }
    .designation {
        width: 100%;
        max-width: 300px;
        min-width: 80px;
        margin-bottom: 10px;
    }
    .designation h2 {
        color: rgb(56, 63, 63);
        font-size: 27px;
        font-weight: normal;
        margin: 0;
    }

    .brief-intro h5 {
        color: rgb(56, 63, 63);
        font-size: 22px;
        font-weight: normal;
        margin: 0;
        
    }

    .my-pic {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        max-height: 460px;
        width: 100%;
        max-width: 360px;
        clip-path: circle(180px at 50% 40%);
        background-color: white;
        object-position: center center;
    }

    .my-pic img {
        height: 100%;
        max-height: 450px;
        width: 100%;
        max-width: 350px;
        clip-path: circle(170px at 50% 40%);
        background-color: ghostwhite;
        backdrop-filter: blur(5px);

        
    }

    .know-more button {

        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .know-more {
        font-size: 15px;
         margin-top: 25px;
    }

    .know-more button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }


    /* Services section */

    .services-brief {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 30px;
        background-color: ghostwhite;
        backdrop-filter: blur(10px);
        width: 100vw;
        height: 620px;
        padding: 30px 0px;
        
    }

    .service-maintitle h3 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
        

    }

    .service-subtitle p {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .services {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        column-gap: 30px;

    }

    .services-mobile {
        display: grid;
        grid-template-columns: 350px;
        height: 400px;
        place-content: center center;
        place-self: center;
        row-gap: 20px;
        display: none;
        opacity: 0;
        
    }

    .service1,
    .service2,
    .service3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 10px;
        backdrop-filter: blur(5px);
        height: 90%;
        max-height: 200px;
        min-height: 100px;
        flex: 1;
        max-width:350px;
        min-width: 150px;
        background-color: white;
        text-align: center;
        border-radius: 5px;
        padding: 10px 20px;
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
    }

    .service4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 10px;
        backdrop-filter: blur(5px);
        height: 100%;
        max-height: 250px;
        min-height: 100px;
        flex: 1;
        max-width:550px;
        min-width: 200px;
        padding: 0px 20px;
        background-color: white;
        text-align: center;
        border-radius: 5px;
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
   
    }
    .service-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: 300px;
    }

    .service-title img {
        height: 90px;
        width: 120px;
    }

    .service4-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: 500px;
        
        
    }

    .service4-title .img1 {
        height: 90px;
        width: 100px;
        margin-right: 15px;
        
    }

    .service4-title .img2 {
        height: 130px;
        width: 140px;
        

    }

    .service-title h3 {
        font-size: 22px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .service4-title h3 {
        font-size: 22px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .service-content {
        width: 100%;
        max-width: 300px;
    }
    .service-content p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 20px;
    }

    .service4-content {
        width: 100%;
        max-width: 450px;
       
        
    }
    .service4-content p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        text-align: left;
        margin: 0;
        line-height: 20px;
    }

    .view-services button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .view-services {
        font-size: 15px;
         margin-top: 25px;
    }

    .view-services button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }
    
    /*
    .know-more {
        
        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;
    }
    */

    /* Why choose me */

    .why-choose-me {
        display: grid;
        grid-template-columns: repeat(2, 650px);
        place-content: center center;
        place-self: center;
        place-items: center;
        column-gap: 80px;
        width: 100vw;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        padding: 30px 0px;
        height: 750px;

    }

    .why-choose-me-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        max-width: 500px;
    }

    .why-choose-me-content h3 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
        margin-bottom: 20px;
        
    }

    .why-choose-me-content p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 35px;
    }

    .why-choose-me-pic img {
        width: 100%;
        max-width: 500px;
        min-width: 200px;
        height: 100%;
        max-height: 650px;
        animation: appear 2s ease infinite;
    }

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

    .why-choose-me-content button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        font-size: 15px;
        margin-top: 35px;
        
        
    }

    .why-choose-me-content button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }
    
    .choose-me-service-button {
        opacity: 0;
        display: none;
    }

    /* Latest Works */

    .latest-works {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10px);
        width: 100vw;
        row-gap: 30px;
        margin-top: 20px;
        height: 1fr;
        padding: 40px 0px;
        /*
        background: linear-gradient(120deg, white, ghostwhite, rgb(231, 231, 231), white), linear-gradient(120deg, white, ghostwhite, rgb(231, 231, 231), white);
        */
        background-color: ghostwhite;
    
    }

    .latest-works-title h3 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .latest-works-subtitle p {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .latest-works-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
        column-gap: 80px;
        max-width: 1200px;
        place-content: center center;
        place-self: center;
    }

    .latest-works-grid-mobile {
        display: none;
        opacity: 0;
    }

    .latest-works-details {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
        height: 560px;
        width: 100%;
        max-width: 400px;
        min-width: 200px;
        background-color: rgba(255, 255, 255, 0.681);
        place-self: center;
        cursor: pointer;
        border-radius: 8px;
        box-shadow: 2px 2px 4px rgb(239, 239, 239), 2px 2px 4px inset rgb(239, 239, 239), 2px 2px 2px inset rgb(239, 239, 239);
        border: 2px rgb(190, 190, 190) solid;

        
    }

    .latest-works-details:hover {
        box-shadow: 2px 2px 6px rgb(199, 198, 198), 2px 2px 6px inset rgb(199, 198, 198), 2px 2px 6px inset rgb(199, 198, 198);
        
    }


    .latest-works-grid > .latest-works-sub-grid:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .latest-works-sub-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
    }

    .latest-works-name {
        width: 100%;
        max-width: 400px;
    }

    .latest-works-name h4 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
        text-align: center;
    }

    .latest-works-name span {
        font-size: 15px;
        color: rgb(174, 59, 59);
        margin: 0;
        vertical-align: middle;
        
    }

    .works-img img {
        height:100%;
        max-height: 550px;
        min-height: 100px;
        width: 100%;
        max-width: 390px;
        min-width: 250px;
        border-radius: 8px;
        
    }

    .works-img3 img {
        height:100%;
        max-height: 550px;
        min-height: 100px;
        width: 100%;
        max-width: 390px;
        min-width: 250px;
        border-radius: 8px;
        position: relative;
        filter: blur(0px);
        object-position: center center;
        object-fit: cover;
        
        
        
    }
    .design-stage {
        position: absolute;
        bottom:40%;
    }

    .design-stage h5 {
        font-size: 25px;
        color: rgb(9, 10, 10);
        margin: 0;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.232);
    }

    .works-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .see-in-detail button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .see-in-detail {
        font-size: 15px;
        margin-top: 25px;
    }

    .see-in-detail button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }


    /* Why Work with Me */

    .why-work-with-me {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 0px;
        row-gap: 30px;
    }

    .work-with-me-title h3 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .work-with-me-grid {
        display: grid;
        grid-template-columns: repeat(3, 400px);
        row-gap: 40px;
        column-gap: 40px;
        align-content: center;
        

    }

    .work-with-me-grid-mobile {
        opacity: 0;
        display: none;
    }

    .work-with-me-contents {
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
        width: 100%;
        height: 300px;
        background-color: rgba(255, 255, 255, 0.535);
        backdrop-filter: blur(5px);
        border-radius: 5px;
        
    }

    .work-with-content-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
        margin-top: 20px;
        


    }

    .work-with-content-flex img {
        width: 60px;
        height: 60px;
    }

    .content-title h4 {
        font-size: 25px;
        margin: 0;
        color: rgb(9, 10, 10);
        text-align: center;
        
    }

    .content-details {
        width: 90%;
        
    }
    .content-details p {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-left: 30px;

    }

    .lets-talk button {

        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .lets-talk {
        font-size: 15px;
        margin-top: 25px;
    }

    .lets-talk button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    /* Discuss Your Project */

    .discuss-your-project {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 30px;
        background-color: ghostwhite;
        padding: 120px 0px;
        width: 100vw;
    }

    .discuss-title h3 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .discuss-content p {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .discuss-contact button {

        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
        
        
    }

    .discuss-contact {
        font-size: 15px;
         margin-top: 25px;
    }

    .discuss-contact button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    /* More About Page */

    /* More About- Content */
    .about-me {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        width: 100vw;
        margin-top: -3%;
    }

    .about-me-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding: 40px 20px;
        column-gap: 80px;
        max-width: 1400px;
        height: 500px;
        margin-top: 15%;
        margin-right: 7%;
    }

    .about-me-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        row-gap: 30px;
        width: 100%;
        max-width: 750px;
        margin-left: 0%;

    }

    .about-me-title h1 {
        font-size: 65px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .about-me-p h6 {
        color: rgb(56, 63, 63);
        font-size: 32px;
        font-weight: normal;
        margin: 0;
        line-height: 50px;
        margin-bottom: 20px;
        
    }

    .about-me-p p {
        color: rgb(56, 63, 63);
        font-size: 24px;
        font-weight: normal;
        margin: 0;
        line-height: 40px;
        margin-top:10px;

    }

    .about-me-button {
        font-size: 18px;
        margin-top: 25px;
    }

    .about-me-button button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .about-me-button button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141);
    }

    .about-me-img-mobile {
        opacity: 0;
        display: none;
    }

    .about-me-img {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        max-height: 540px;
        width: 100%;
        max-width: 420px;
        clip-path: circle(200px at 50% 40%);
        background-color: white;
        object-position: center center;
        position: relative;
        
    }

    .about-me-img img {
        height: 100%;
        max-height: 520px;
        width: 100%;
        max-width: 400px;
        clip-path: circle(190px at 50% 40%);
        background-color: ghostwhite;
        backdrop-filter: blur(5px);
    }

    .certifications {
        position: absolute;
        right: 20%;
        bottom: 30%;
        
    }

    .certificates-button button {
        
        background-color: #f2f5ff;
        border: none;
        width: 100%;
        max-width: 55px;
        height: 100%;
        max-height: 55px;
        box-shadow: 1px 1px 3px lightgray, 1px 1px 3px inset lightgray, 1px 1px 3px inset lightgray, 1px 1px 3px inset lightgray, 1px 1px 3px inset lightgray;
        object-position: center center;
        place-self: center center;
        place-items: bottom center;
        cursor: pointer;
    }

    .certificates-button img {
        width: 85%;
        height: 85%;
        margin-top: 3px;
        
        

    }

    .certifications-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100vw;
        height: 100%;
        background-color: rgba(173, 216, 230, 0.489);
        backdrop-filter: blur(8px);
        opacity: 0;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;

    }

    .isCertifications {
        opacity: 1;
        display: initial;
    }

    .certificates {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        row-gap: 10px;
        background-color: white;
        width: 60vw;
        padding-top: 10px;
        padding-left: 30px;
        place-self: center center;
        position: relative;

    }

    .pop-up-close button {
        background-color: transparent;
        border: none;
        position: absolute;
        top:0;
        right: 0;

    }

    .pop-up-close button p {
        font-family: poppins;
        font-size: 23px;
        color: dimgray;
        margin: 0;

    }

    .pop-up-close p:hover {
        transform: scale(1.1);
        color: red;
    }


    .certificate-title {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 5px;
        border-bottom: 0.5px lightgray solid;
    }

    .certificate-title img {
        width: 25px;
        height: 25px;
    }

    .certificate {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        border-bottom: 0.5px lightgray solid;
    }

    .certificates h5 {
        font-size: 25px;
        color: rgb(56, 63, 63);
        margin: 0;
    }

    .certificates h6 {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 5px;
    }

    .certificates p {
        font-size: 18px;
        color: dimgray;
        margin: 0;
        margin-bottom: 15px;
    }

    .certificates li {
        font-size: 16px;
        color: rgb(59, 59, 59);
        margin: 0;
        line-height: 25px;
        margin-left: 15px;
    }
    
    /* More About- Journey */

    .my-journey {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        background-color: ghostwhite;
        backdrop-filter: blur(5px);
        row-gap: 30px;
        padding: 30px 0px;
    }

    .journey-title h4 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .journey-text {
        width: 100%;
        max-width: 1340px;
    }

    .journey-text p {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 40px;
        margin-bottom: 20px;
    }
    /* About me- Skills Section */

    .skills-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        width: 100vw;
        padding: 40px 0px;

    }

    .skills-section-title h4 {
        font-size: 35px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .skills-mobile {
        opacity: 0;
        display: none;
    }

    .skills {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        max-width: 1350px;
        column-gap: 80px;
        place-self: center;
        place-content: center center;
        margin-top: 40px;
    }


    .skill-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        place-self: center;
        box-shadow: 1px 1px 2px rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239), 1px 1px 2px inset rgb(239, 239, 239);
        width: 100%;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.735);
        backdrop-filter: blur(5px);
        border-radius: 5px;
        padding: 15px;
        row-gap: 30px;

    }
    .skill-content-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .skill-title-h5 h5 {
        color: rgb(9, 10, 10);
        margin: 0;
        font-size: 25px;
        
    }

    .skill-image img {
        width: 80px;
        height: 80px;
        
    }

    .skill-content-text li {
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 40px;
        margin-left: 20px;
        
    }

    .skills-contact-me {
        font-size: 18px;
        margin-top: 35px;
        margin-bottom: 35px;
    }

    .skills-contact-me button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .skills-contact-me button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    /* Projects Page */

    /* Latest Projects */

    .latest-projects {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-top: -5%;
        /*background: linear-gradient(120deg, rgb(217, 217, 237), white, ghostwhite, white, rgb(210, 210, 240), white, rgb(204, 204, 240));
        */
        background: linear-gradient(130deg, #283456, #283456, #0d1017, #283456, #39456d, #283456, #283456);
        mix-blend-mode: multiply;
    }

    .latest-projects-title {
        margin-top: 12%;
    }

    .latest-projects-title h1 {
        font-size: 65px;
        color: #c9d2ee;
        margin: 0;
        
    }

    .latest-projects-subtitle h6 {
        color: #abb4ce;
        font-size: 32px;
        font-weight: normal;
        margin: 0;
        line-height: 50px;
        margin-bottom: 20px;
    }

    .latest-projects-details {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 1350px;
        height: 510px;
        place-content: center center;
        place-self: center;
        column-gap: 40px;
        margin-top: 30px;
        margin-bottom: 60px;
        
    }

    .latest-projects-details-mobile {
        opacity: 0;
        display: none;
    }

    

    .latest-projects-contents {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        place-self: center;
        height: 100%;
        max-height: 550px;
        width: 100%;
        max-width: 400px;
        border-radius: 10px;
        box-shadow: 1px 1px 2px #c5cde3, 1px 1px 2px inset #c5cde3, 1px 1px 2px inset #c5cde3;
        position: relative;
        cursor: pointer;
        background-color: rgb(253, 253, 254);
        
        
    }

    

    .latest-projects-contents img {
        height: 100%;
        max-height: 520px;
        width: 100%;
        max-width: 370px;
        border-radius: 10px;
        cursor: pointer;
        

    }

    .business-intelligence img {
        height: 100%;
        max-height: 240px;
        width: 100%;
        max-width: 370px;
        border-radius: 10px;
        cursor: pointer;
        margin-top: 5px;
        filter: blur(2px);
    }


    .projects-content-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 100%;
        max-height: 200px;
        width: 100%;
        max-width: 330px;
        min-width: 100px;
        position: absolute;
        background-color: rgb(253, 253, 254);
        padding: 20px;
        border-radius: 0px 0px 5px 5px;
        bottom: 0px;
        

    }

    
    .projects-content-text h5 {
        font-size: 22px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        opacity: 1;
        display: initial;
    }
    
    .js-ml-project-content-h5 {

        opacity: 1;
        display: initial;
        margin-bottom: 20px;
    }

    .removeH5 {
        opacity: 0;
        display: none;
    }

    .projects-content-text p {
        font-size: 16px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        
    }

    .projects-content-text li {
        font-size: 15px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        margin-left: 10px;
    }

    .zoomP p {
        font-size: 20px;
        color: rgb(117, 59, 59);
        margin: 0;
        line-height: 25px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .zoomP li {
        font-size: 17px;
        color: rgb(117, 59, 59);
        margin: 0;
        line-height: 25px;
        margin-left: 10px;
    }

    .projects-content-text button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  #2f3a55;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 16px;
        margin-top: 20px;
        border-radius: 5px;
    }

    .projects-content-text button:hover {
        background-color:  #3b4b75;
        box-shadow: none;
    }


    .have-project-idea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        padding: 40px 0px;
        background: linear-gradient(125deg, ghostwhite, ghostwhite, white, ghostwhite, ghostwhite, ghostwhite), linear-gradient(125deg, ghostwhite, ghostwhite, white, ghostwhite, ghostwhite, ghostwhite);
        mix-blend-mode: multiply;
        height: 1fr;
        row-gap: 30px;
    }

    .project-idea-title h4 {
        color: rgb(56, 63, 63);
        margin: 0;
        font-size: 30px;
    }

    .project-idea-text p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
    }

    .project-idea-button button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  #2f3a55;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 16px;
        border-radius: 5px;
    }

    .project-idea-button button:hover {
        background-color:  #3b4b75;
        box-shadow: none;
    }


    /* Services Page */

    .service-projects-details /* For services page */{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        max-width: 1350px;
        height: 510px;
        place-content: center center;
        place-self: center;
        column-gap: 40px;
        margin-top: 50px;
        margin-bottom: 60px;
        
    }

    .service-projects-details-mobile {
        opacity : 0;
        display: none;
    }

    .services-projects-contents /* For services page */{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        place-self: center;
        height: 100%;
        max-height: 600px;
        width: 100%;
        max-width: 320px;
        border-radius: 10px;
        box-shadow: 1px 1px 2px #c5cde3, 1px 1px 2px inset #c5cde3, 1px 1px 2px inset #c5cde3;
        position: relative;
        cursor: pointer;
        
        /* background-color: rgb(253, 253, 254);*/
        background: linear-gradient(120deg, rgb(237, 237, 244), white, rgb(237, 237, 244), rgb(237, 237, 244)), linear-gradient(120deg, rgb(237, 237, 244), white, rgb(237, 237, 244), rgb(237, 237, 244));
        

        
        
    }

    .services-projects-contents img /* For services page */{
        height: 100%;
        max-height: 180px;
        width: 100%;
        max-width: 250px;
        border-radius: 10px;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 10px;

    }

    .services-content-text /* For services page */ {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100%;
        max-height: 300px;
        width: 100%;
        max-width: 260px;
        min-width: 100px;
        padding: 20px;
        border-radius: 0px 0px 5px 5px;
        row-gap: 15px;
        
        

    } 

    .services-content-text h5 /* For services page */{
        font-size: 20px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 0px;
    }
    .services-content-text-p {
        height: 210px;
        overflow-y: auto;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
    }

    .services-content-text-p p/* For services page */{
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        
    }

    .services-content-text-li li /* For services page */ {
        font-size: 17px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 25px;
        margin-top: 0px;
        margin-left: 15px;
        margin-bottom: 10px;
    }     

    .tools /* For services page */{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(206, 206, 206, 0.207);
        backdrop-filter: blur(10px);
        column-gap: 8px;
        margin-left: -6%;
        margin-bottom: -5%;
        width: 290px;
        
    }

    .tools p {
        font-size: 11px;
        color: rgb(56, 63, 63);
        margin: 0;
    }
    
    .toolicon,
    .toolicon-sklearn {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .toolicon img {
        width: 20px;
        height: 20px;
    }

    .toolicon-sklearn img {
        width: 35px;
        height: 30px;
    }

    .more p {
        
        color: rgb(56, 63, 63);
        margin: 0;
        margin-left: 5px;
    }

    /* Project- Service App Page */

    .service-app {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 100vw;
        background: linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite ), linear-gradient(120deg, lightblue, ghostwhite, rgb(199, 233, 245), ghostwhite, rgb(199, 233, 245), ghostwhite );
        margin-top:-5%;
        column-gap: 70px;
        padding-bottom: 15%;

    }

    .service-app-details {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        max-width: 700px;
        margin-top: 15%;
        row-gap: 40px;
        
    }

    .service-app-title h3 {
        font-size: 55px;
        color: rgb(9, 10, 10);
        margin: 0;
    }

    .service-app-desc {
        width: 90%;
    }

    .service-app-desc p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 30px;
    }

    .service-app-nav-buttons button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  black;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 16px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .service-app-nav-buttons button:hover {
        background-color:  dimgray;
        box-shadow: none;
    }

    .js-tools-button-mobile {
        opacity: 0;
        display: none;
    }

    .js-demo-video-button-mobile {
        opacity: 0;
        display: none;
    }

    .js-key-features  {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 95%;
        row-gap: 20px;
        opacity:0;
        display: none;
        
        
    }

    .key-features h5 {
        font-size: 25px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;

    }

    .key-features a {
        text-decoration: none;
    }

    .key-features-buttons button {
        color: white;
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  black;
        box-shadow: 2px 2px 4px dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px inset dimgray, 2px 2px 4px dimgray;
        border: none;
        font-size: 14px;
        border-radius: 5px;
        margin-right: 5px;
        margin-bottom: 10px;
    }

    .key-features-buttons button:hover {
        background-color:  dimgray;
        box-shadow: none;
    }

    .js-tools-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 95%;
        row-gap: 20px;
        opacity: 1;
        display: initial;
        animation: appear 2s ease;
        
    }

    .js-tools-list h5 {
        font-size: 25px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        
    }

    .tools-used-buttons button {
        padding: 10px 25px;
        margin:0;
        cursor: pointer;
        background-color:  ghostwhite;
        box-shadow: 2px 2px 4px white, 2px 2px 4px inset white, 2px 2px 4px inset white, 2px 2px 4px white;
        border: none;
        font-size: 14px;
        border-radius: 5px;
        margin: 0;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .tools-used-buttons p {
        margin: 0;
        font-size: 14px;
        color: rgb(56, 63, 63);

    }


    .tools-used-buttons img {
        width: 35px;
        height: 35px;
        object-position: center center;
    }

    .notKeys {
        opacity: 1;
        display: initial;
        animation: appear 2s ease;
        
    }

    

    .isTools {
        opacity: 0;
        display: none;

    }

    .key-feature-name h5 {
        font-size: 23px;
        color: rgb(56, 63, 63);
        margin: 0;
        margin-bottom: 20px;
        margin-top: 20px;
        animation: appear 2s ease;
    }

    .key-feature-description p {
        font-size: 16px;
        color: rgb(56, 63, 63);
        margin: 0;
        line-height: 30px;
        animation: appear 2s ease;
    }

    .js-key-features-elaborate {
        animation: appear 2s ease;
    }



    .service-app-video-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 650px;
        margin-top: 20%;

    }

    .service-app-video-img-mobile {
        opacity: 0;
        display: none;
    }

    .service-app-visuals {
        opacity: 1;
        display: initial;
    }

    .service-app-images {
        width: 100%;
        max-width: 550px;
        
        
    }

    .service-app-images img {
        width: 100%;
        max-width: 450px;
        height: 100%;
        max-height: 600px;
        animation: appear 2s ease infinite;
    }

    .js-service-app-demo-video {
        opacity: 0;
        display: none;
    }

   

    .service-app-demo-video {
        width: 100%;
        max-width: 500px;
        height: 100%;
        max-height: 500px;
        animation: appear 2s ease;
        
    }

    .video-visible {
        opacity: 1;
        display: initial;
    }

    .image-invisible {
        opacity: 0;
        display: none;
    }

    /* Ecommerce app page */

    .ecommerce-app-video-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 650px;
        margin-top: 20%;
    }

    .ecommerce-app-video-img-mobile {
        opacity: 0;
        display: none;
    }

    .ecommerce-app-visuals {
        opacity: 1;
        display: initial;
    }

    .ecommerce-app-images {
        width: 100%;
        max-width: 550px;
        
        
    }

    .ecommerce-app-images img {
        width: 100%;
        max-width: 450px;
        height: 100%;
        max-height: 600px;
        animation: appear 2s ease infinite;
    }

    .js-ecommerce-app-demo-video {
        opacity: 0;
        display: none;
    }

    .ecommerce-app-demo-video {
        width: 100%;
        max-width: 500px;
        height: 100%;
        max-height: 500px;
        animation: appear 2s ease;
    }

    .video1-visible {
        opacity: 1;
        display: initial;
    }

    .image1-invisible {
        opacity: 0;
        display: none;
    }


    /* Contact Page */


    .Contact {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 15%;
        margin-bottom: 260px;
        
    }

    .Contact .sub-heading h2 {
        font-size: 45px;
        color: rgb(9, 10, 10);
        font-weight: bold;
        margin-bottom: 40px;
    }
      

    .Contact .sub-content p {
        font-size: 18px;
        color: rgb(56, 63, 63);
        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;
    }

    /* Bottom content */

    .footer-mobile {
        opacity: 0;
        display: none;
    }
    .footer-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
        background: linear-gradient(130deg, #283456, #283456, #0d1017, #283456, #39456d, #283456, #283456);
        width: 100vw;
        font-family: poppins;
        padding-top: 50px;
        margin-bottom: -10px;
        
    }

    .footer-flex1 {
        background-color: rgba(255, 255, 255, 0.014);
        backdrop-filter: blur(5px);
        width: 100vw;
        padding-top:50px;
        padding-bottom: 30px;
        margin-top: -50px;
    }
    
    .footer-flex1 h4 {
        margin: 0;
        color: #abb4ce;
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
        font-weight: normal;

        
    }

    .footer-flex p {
        margin: 0;
        color: #4D556E;
        font-size: 14px;
        text-align: center;
    }

    .footer-flex span {
        margin: 0;
        color: #abb4ce;
        font-size: 14px;
        font-weight: normal;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 90vw;
        height: 260px;
        /*background-color: #283456;*/
        border-bottom: 0.2px solid #646b835c;
        
     
    }
    .grid1 {
        margin-left: 80px;
        width: 100%;
        font-weight: normal;


    }
    .grid1 h5 {
        color: #abb4ce;
        font-size: 16px;
        margin: 0;
        font-weight: normal;
        margin-top: 20px;
        
    }

    .grid1 li {
        color: #6b7695;
        margin: 0;
        margin-top: 15px;
        font-size: 14px;
        margin-left: 5px;
        
    }

    .grid2 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 10px;
        border-left: 0.2px solid #646b835c;
        border-right: 0.2px solid #646b835c;
        padding-left: 20px;
    }

    .grid2 h5 {
        font-size: 15px;
        font-weight: normal;
        color: #abb4ce;
        margin: 0;
        margin-top: 20px;
    }

    .grid2 p {
        margin: 0;
        color: #6b7695;
        font-size: 14px;
        
    }

    .mail-id {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 5px;
        cursor: pointer;
    }

    .mail-id img {
        width: 25px;
        height: 25px;
        cursor: pointer;
    }

    .location {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 5px;
        cursor: pointer;
    }

    .location img {
        width: 32px;
        height: 32px;
        cursor: pointer;
        
    }

    .icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 30%;
        cursor: pointer;
    }
    .linkedin img {
        width: 34px;
        height: 34px;
        cursor: pointer;
        pointer-events: all;
        

    }

    .github img {
        width: 27px;
        height: 27px;
        cursor: pointer;
        pointer-events: all;
        

    }

    .mail-box img {
        width: 27px;
        height: 27px;
        cursor: pointer;
        pointer-events: all;
        

    }

    .grid3 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 10px;
        padding-left: 20px;
        margin-top: 20px;
    }

    .grid3-title h5 {
        font-size: 15px;
        font-weight: normal;
        color: #abb4ce;
        margin: 0;
    }

    .grid3-content p {
        margin: 0;
        color: #6b7695;
        font-size: 14px;
    }

    .grid3-button button {
        color: white;
        padding: 10px 20px;
        margin:0;
        cursor: pointer;
        background-color: rgb(19, 80, 101);
        border: none;
    }

    .grid3-button {
        font-size: 14px;
         margin-top: 20px;
    }

    .grid3-button button:hover {
        box-shadow: 1px 1px 2px lightgray, 1px 1px 2px inset lightgray;
        background-color: rgb(27, 112, 141)
    }

    .footer-flex3 p {
        margin: 0;
        color: #6b7695;
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

}










    /*
    
    @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);
        
    }
}


    */