@media only screen and (max-width: 1222px) {
    .pr-images {
        gap: 1vw;
    }
    .sp-name h1 {
        font-size: 45px;
    }
    .sp-name h2 {
        font-size: 20px;
    }
    .sp-profession h2 {
        font-size: 26px;
    }
    .contact-me-btn a {
        font-size: 18px;
    }

    .skills-box {
        width: 150px;
        height: 150px;
    }
    .sk-hide {
        display: none;
    }
}

@media only screen and (max-width: 1020px) {
    .cursor-div {
        display: none;
    }
    .btn-shine {
        display: none;
    }
    .logo img {
        display: block;
    }
    
    .front-section {
        display: grid;
        gap: 60px;
        overflow: hidden;
    }
    .navbar {
        top: -30px;
    }
    .navbar nav {   
        display: grid;
        justify-content: center;
        gap: 20px;
    }
    .logo {
        width: 115%;
        text-align: center;
        display: grid;
        justify-content: center;
    }
    .search-box {
        justify-content: right;
    }
    .search-box #search-input {
        display: none;
    }

    .search-box input::placeholder {
        color: transparent;
    }

    .resp-search-box {
        display: block;
    }

    .win-full-i {
        position: relative;
        right: 0;
        background-color: #3D3E42;
        padding: 10px 11px;
        border-radius: 50%;
    }

    .search-cover-show {
        display: block !important;
    }
    nav span {
        display: flex;
    }
    .search-btn-click {
        display: none;
    }
    .search-btn-hide {
        display: none;
    }
    .search-close-btn {
        display: block;
    }

    .header-center {
        flex-direction: column;
    }
    .header-center .front-details {
        width: 100%;
        justify-items: center;
        padding: 0;
        z-index: 2;
    }
    .front-details .sp-name {
        display: flex;
        gap: 0;
    }
    .sp-name h1 {
        font-size: 8vmin;
    }
    .sp-name h2 {
        font-size: 4vmin;
    }
    .front-details .sp-profession h2 {
        font-size: 4.5vmin;
    }
    .contact-me-btn a{
        font-size: 4vmin;
    }
    .my-pic {
        top: 44px;
        width: auto;
        text-align: center;
        height: fit-content;
    }
    .my-pic img {
        width: 85%;
    }

    .about-sec {
        width: 90%;
    }
    .about-span {
        display: grid;
    }

    .skills-box {
        width: 120px;
        height: 120px;
    }

    .project-body {
        width: auto ;
    }

    .pr-images {
        gap: 10vw;
        row-gap: 6vw;
    }
    .pr-boxes {
        width: 95%;
    }
    
    ::-webkit-scrollbar {
        width: 0;
    }

}
@media only screen and (max-width: 960px) {
    .pr-images {
        justify-items: center;
        grid-template-columns: auto;
        gap: 0;
        row-gap: 20px;
    }
    .pr-flip-box {
        width: 60%;
    }
    .skills-box p {
        font-size: 15px;
    }
    .project-box {
        display: flex;
        justify-content: center;
    }
}

@media only screen and (max-width: 845px) {
    .l-line, .r-line {
        width: 31%;
    }
    .l-line-2, .r-line-2 {
        width: 32%;
    }


    /* Project Details */
    .project-details div {
        flex-direction: column;
        width: 100%;
    }
    .p-description {
        position: relative;
    }

    .on-hover-img {
        display: none;
    }
}

@media only screen and (max-width: 720px) {
    .pr-mid-line {
        display: none;
    }
    .snowA,
    .snowA::after {
        background-image: 
        radial-gradient(4px 4px at 100px 50px, #fff , transparent),
        radial-gradient(6px 6px at 319px 400px, #fff, transparent);
    }
    .snowA::before {
        animation-duration: 12s;
        background-image: radial-gradient(6px 6px at 549px 330px, #fff, transparent);
        filter: blur(2px);
    }
    .snowA::after{
        filter: blur(4px);
    }

    .skills-box {
        width: 92px;
        height: 92px;
        gap: 15px;
    }
    .skills-box p {
        font-size: 12px;
    }
}

@media only screen and (max-width: 650px) {
    .logo {
        width: 100%;
    }
    .logo img {
        width: 60px;
    }
    .search-box {
        display: none;
    }
    .p-section {
        padding: 40px 40px;
    }
    .social-icons {
        display: none;
    }

    .up-arrow-btn {
        display: none;
    }
    
    .pr-images {
        width: 80%;
    }
    .skills-grid-view, .skills-grid-view .skills-row {
        gap: 10px;
    }
}

@media only screen and (max-width: 570px) {
    .pr {
        flex-direction: column;
    }
    
    .c-links .div {
        flex-direction: column;
        align-items: center;
    }

    .l-line {
        display: none;
    }
    .l-line-2 {
        display: none;
    }
    .c-heading, .c-footer {
        justify-content: center;
        flex-direction: column;
    }
    .footer-social-icons {
        align-self: center;
        margin-bottom: 10px;
    }

    .other-pr-details {
        grid-template-columns: auto;
    }
    .skills-grid-view .skills-row {
        display: grid;
        gap: 14px;
        grid-template-columns: auto auto;
    }
    .skills-box {
        gap: 15px;
        width: 100px;
        height: 100px;
    }
}

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

    .project-section {
        overflow: hidden;
    }
    
    .pr-flip-box {
        width: 80%;
    }

    .project-details::before {
        padding: 0;
    }
    
}

@media only screen and (max-width: 400px) {
    .navbar nav {
        display: flex;
    }
    nav ul {
        position: fixed;
        top: 0;
        right: 0;
        gap: 25px;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.733);
        backdrop-filter: blur(10px);
        flex-direction: column;
        z-index: 2;
        transition: 0.2s all;
    }
    .menu-bar {
        display: block;
    }

    .resp-search-box {
        display: none;
    }
    .menu-inner-search {
        display: flex;
    }   

    .contact-me-btn a {
        padding: 10px 20px;
        border: 3px solid var(--font-color);
    }

    .about-sec h1 {
        text-align: center;
        font-size: 30px;
    }
    .h-line {
        justify-self: center;
    }
    .skills-sec h1 {
        font-size: 30px;
    }


    .pr-images {
        row-gap: 0;
    }

    .pr-flip-box:nth-child(2) {
        position: relative;
        top: 15px;
        left: -10px;
    }
    .pr-flip-box:nth-child(3) {
        position: relative;
        top: 30px;
        right: -15px;
    }
    .pr-flip-box:nth-child(4) {
        position: relative;
        top: 42px;
        left: 0px;
    }


    .c-links .contact {
        display: grid;
        gap: 10px;
        padding: 12px 14px;
        text-align: center;
    }
    .contact i {
        font-size: 18px;
    }
    .contact p {
        font-size: 16px;
    }
    .c-footer {
        margin-top: 15px;
    }
    /* Global Class */
    .r-hide {
        transform: translateX(100%)
    }

}

@media only screen and (max-width: 325px) {
    .contact-boxes {
        padding: 0 !important;
    }
    .contact-section {
        gap: 20px;
    }
}