@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Sanchez:ital@0;1&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow: hidden;
}

:root {
    --translateZ-3D: 20vw;
}

.box-fixed {
    position: fixed;
    width: 100%;
    height: 77vh;
    z-index: -10;
}

.cursor-3d-carousel {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    z-index: 999;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f37e77 0%, #cd3b1a 55%, #ad3511 100%);
    opacity: 0;
    transform: scale(0) translate(-50%, -50%);
    transition: all 0.4s ease-in;
}

.cursor-3d-carousel-text {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0.099em;
    text-align: center;
    color: #fff;
    width: 50%;
}

.header-main {
    width: 100%;
    margin: 0 auto;
    background-color: black;
    padding: 3.5vw 3.5vw 2.1vw;
}

.header-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.manmeet-logo,
.menu-text {
    font-family: Sanchez;
    font-size: clamp(22px, 2.8vw, 60px);
    font-style: italic;
    font-weight: 400;
    line-height: 0.8em;
    color: #fff;
}

.cursor-change-logo {
    padding-left: 10px;
    color: #F26338;
}

.menu-icon {
    position: relative;
    width: 2.5vw;
    height: 2.5vw;
    cursor: pointer;
}

.menu-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.line {
    position: absolute;
    height: 2.5vw;
    border-radius: 5px;
    border: 1px solid #F26338;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1s ease-in;
}

span#line2 {
    transform: rotate(90deg) translate(-50%, -50%);
    left: 0;
    top: 0;
}

.hero-main {
    width: 100%;
    background-color: #000;
    margin: 0 auto;
    padding: 7.8vw 3.5vw 9.4vw;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.hero-wrapper {
    width: 100%;
    margin: 0 auto;
}

.hero-headings-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.47vw;
    margin-bottom: 11.1vw;
}

.hero-headings-box h1 {
    font-family: Raleway;
    font-size: clamp(65px, 10vw, 255px);
    line-height: 0.73em;
    font-weight: 500;
    text-align: center;
    color: #fff;

}

.owner-pic-box {
    display: flex;
    justify-content: center;
    gap: 3.1vw;
    align-items: center;
}

.owner-pic-1,
.owner-pic-2 {
    max-width: 7.3vw;
    min-height: 7.3vw;
    width: 100%;
    object-fit: cover;
}

.owner-pic-cont {
    max-width: 7.3vw;
    display: flex;
    align-items: center;
}

.animated-text span {
    position: relative;
}

.animated-text span::before {
    content: "DEVELOPER";
    color: #F26338;
    animation: words 60s infinite;
}

.animated-text span::after {
    content: "";
    position: absolute;
    font-family: Raleway;
    font-size: clamp(65px, 10vw, 200px);
    line-height: 0.73em;
    font-weight: 500;
    text-align: center;
    color: #fff;
    width: calc(100% + 1%);
    height: 85%;
    background-color: #000000;
    border-left: 2px solid #F26338;
    top: 1vw;
    right: -4px;
    animation: cursor .8s infinite, typing 60s steps(10) infinite;
}

@keyframes cursor {
    to {
        border-left: 2px solid #ff7f5000;
    }
}

@keyframes words {

    0%,
    33% {
        content: "DEVELOPER";
    }

    34%,
    66% {
        content: "DESIGNER";
    }

    67%,
    100% {
        content: "PROGRAMMER";
    }
}

@keyframes typing {

    8.25%,
    16.5%,
    41.25%,
    49.5%,
    75.25%,
    83% {
        width: 0;
    }

    0%,
    33%,
    34%,
    66%,
    67%,
    100% {
        width: calc(100% + 1%);
    }
}

.hero-dot {
    position: absolute;
    width: 22.27vw;
    top: 2.4vw;
    right: -0.01vw;
    z-index: -1;
}

.hero-htmlcode {
    position: absolute;
    width: 13.2vw;
    top: 31.35vw;
    left: 0.8vw;
    z-index: -1;
}

.three-d-slider-main-box {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 1.5vw;
    min-height: 10vw;
}

.description-work p {
    font-family: Poppins;
    font-size: clamp(20px, 2.4vw, 50px);
    font-weight: 400;
    line-height: 1.37em;
    color: #fff;
    width: 47vw;
}

.description-work {
    max-width: 1800px;
    width: 100%;
    display: flex;
    align-items: center;
    transform: translateY(2.5vw);
    opacity: 0;
}

.three-d-slider-cont {
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateY(5vw);
    opacity: 0;
}

.text-span-color {
    color: #F26338;
}

.wave-main {
    width: 100%;
    margin: 0 auto;
    background-color: #000;
}

.path-animation {
    animation: animatePaths 6s infinite;
    transform: scaleY(0.54) scaleX(1) translateX(-4%);
    transition: all 6s ease;
}

@keyframes animatePaths {

    0% {
        d: path("M1.539 100.403C98.16 180 277 185 471 78c268.025-119.593 438.83 171.506 795.35 68.995C2024.5-71 2108.5-6 2701.54 100.402");
    }

    50% {
        d: path("M1 66.62c96.5-33.906 242.368-122.024 469.475 0C703 191.556 918.55 214.135 1269 66.62c556.69-234.327 867.5 263.827 1432-.001");
    }

    100% {
        d: path("M1.539 100.403C98.16 180 277 185 471 78c268.025-119.593 438.83 171.506 795.35 68.995C2024.5-71 2108.5-6 2701.54 100.402");
    }

}

.blob-animation {
    animation: animate-Blobs 6s infinite;
    transition: all 6s ease;
}

@keyframes animate-Blobs {
    0% {
        d: path("M22.7769 108.076C29.8611 140.452 14.2277 178.731 5.52661 193.822C-8.07555 225.849 20.9336 248.401 37.1381 255.675C46.5042 261.667 71.0591 270.961 94.3479 260.206C117.637 249.451 130.454 215.588 133.952 200.003C138.748 184.969 145.929 176.964 148.919 174.841C162.904 164.514 173.226 152.25 176.639 147.41C193.567 127.395 193.068 103.033 190.703 93.3522C176.98 48.9191 149.524 57.5876 149.359 58.065C149.194 58.5424 146.889 57.6873 127.21 64.9335C107.532 72.1771 99.3791 60.0981 97.608 58.793C96.8948 58.2669 90.8467 44.7868 87.8624 37.3923C86.2299 29.6014 80.8325 12.3642 72.3061 5.75C61.6473 -2.51709 34.0984 3.4227 24.7829 18.2865C15.4662 33.1503 13.9228 67.606 22.7769 108.076Z");
    }

    25% {
        d: path("M19.7761 107.011C24.5013 136.5 2.5255 149.5 2.5255 183.863C-0.998574 222.5 17.9327 230.59 34.1375 237.62C43.5038 243.412 68.0592 249.985 91.3484 242C114.638 234.014 124.211 246.485 145.921 198.485C155.999 162.985 154.795 159.256 159.499 152.485C175.824 128.985 169.999 136.485 173.499 129.985C185.42 107.846 177.77 84.8305 176.999 82.9852C162.999 49.4852 148.999 58.6735 146.361 58.6735C144.499 58.6735 133.999 61.0002 124.499 70.0894C106.999 84.0002 99.2184 67.769 94.6086 59.3771C89.9988 50.9852 88.5528 34.557 86.4988 27.0894C83.9988 18.0002 80.4988 13.9851 69.3062 8.10966C47.4988 -3.33765 36.0792 2.50039 21.7821 20.2265C-7.00118 55.9132 2.5255 56.5 19.7761 107.011Z");
    }

    50% {
        d: path("M25.6857 101.8C19.5 166.499 18.9419 153.476 8.43504 178.652C-13.9997 232.409 23.8423 225.379 40.0471 232.409C68.5 243.999 65.5 245.999 97.258 236.789C120.547 228.803 145 245.999 151.83 193.274C155.558 164.499 157.401 155.152 165.408 147.274C179.408 133.499 174.313 130.499 179.408 124.774C191.22 111.499 183.68 79.6191 182.908 77.7737C170.465 47.9995 156.765 52.8619 152.27 53.462C147 54.1656 146 60.9996 130.408 64.8779C117.5 68.0887 101.536 59.3317 100.518 54.1656C99.5 48.9994 95.3842 28.6379 92.4084 21.8778C88.5 12.9994 88.5 6.49943 75.2158 2.89814C50.5 -0.50041 41.1496 1.62137 27.6917 15.015C-15.5 58 25.681 53.462 25.6857 101.8Z");
    }

    75% {
        d: path("M19.1832 103.333C39.5053 148.807 1.9323 158.999 1.93253 180.185C1.93284 207.999 9.50507 220.999 33.5445 233.942C62.5051 249.534 69.5059 242.702 90.7555 238.322C112.005 233.942 133.91 212.999 145.328 194.807C154.505 180.185 156.448 154.999 158.906 148.807C162.005 140.999 168.752 134.244 172.906 126.307C188.505 96.4991 178.898 86.6929 176.406 79.3071C165.505 46.9991 149.739 52.806 145.768 54.9953C138.505 58.9991 133.005 64.1479 123.906 66.4112C118.505 67.7546 97.0051 63.9991 94.0157 55.6989C91.0263 47.3986 86.8256 29.4469 85.9059 23.4112C85.0051 17.4991 84.8243 7.72926 68.7133 4.43146C49.5051 0.499686 36.2414 -2.11465 21.1892 16.5483C-7.00067 51.5001 -1.99469 66.4112 19.1832 103.333Z");
    }


    100% {
        d: path("M22.7769 108.076C29.8611 140.452 14.2277 178.731 5.52661 193.822C-8.07555 225.849 20.9336 248.401 37.1381 255.675C46.5042 261.667 71.0591 270.961 94.3479 260.206C117.637 249.451 130.454 215.588 133.952 200.003C138.748 184.969 145.929 176.964 148.919 174.841C162.904 164.514 173.226 152.25 176.639 147.41C193.567 127.395 193.068 103.033 190.703 93.3522C176.98 48.9191 149.524 57.5876 149.359 58.065C149.194 58.5424 146.889 57.6873 127.21 64.9335C107.532 72.1771 99.3791 60.0981 97.608 58.793C96.8948 58.2669 90.8467 44.7868 87.8624 37.3923C86.2299 29.6014 80.8325 12.3642 72.3061 5.75C61.6473 -2.51709 34.0984 3.4227 24.7829 18.2865C15.4662 33.1503 13.9228 67.606 22.7769 108.076Z");
    }
}

.blob-upper {
    position: absolute;
    top: 0%;
    left: -5%;
}

.blob-lower-animation {
    animation: blob-lower-animate-Paths 6s infinite;
    transition: all 6s ease;
    transform: scale(1.2);
}

@keyframes blob-lower-animate-Paths {
    0% {
        d: path("M151.157 79.1651C144.23 105.151 155.943 107.173 156.832 127.08C152.626 152.065 151.525 152.262 123.471 157.953C103.605 159.937 101.202 164.907 75.1763 171.147C62.5595 174.172 52.2031 175.756 32.8175 155.336C20.5436 142.407 14.402 130.648 20.5435 107.104C24.2152 79.4292 -0.100934 92.4073 -0.100935 62.8697C-0.102232 37.4073 11.2012 32.0601 22.4333 26.8484C41.702 17.9075 49.1129 29.6751 68.0322 12.0476C81.5039 -0.504395 100.004 1.31315 116.04 1.31302C135.002 1.31287 146.523 13.1329 150.187 29.3624C155.928 54.7873 158.084 53.179 151.157 79.1651Z");
    }

    25% {
        d: path("M153.956 79.0227C170.125 93.9862 168.625 106.961 159.631 126.938C154.737 137.807 152.986 139.486 126.27 157.811C99.5537 176.135 89.8253 171.004 77.9752 171.004C66.125 171.004 53.625 164.986 35.6164 155.194C17.6077 145.401 25.6031 119.486 23.3424 106.961C18.2993 79.0227 12.7993 90.8577 2.69791 62.7273C-5.87548 38.8497 14.6232 30.7113 25.2322 26.7061C53.6244 15.9862 50.8579 28.7768 70.831 11.9052C86.125 -1.01379 103.628 -1.01391 118.839 1.17064C130.934 2.90759 153.954 8.85762 152.986 29.22C148.799 53.3577 137.787 64.0593 153.956 79.0227Z");
    }

    50% {
        d: path("M152.157 79.1649C163.814 98.33 157.832 104.816 157.832 127.08C157.832 139 144.003 148.031 124.471 157.953C104.939 167.875 91.352 171.147 76.1762 171.147C61.0004 171.147 46.0914 168.265 33.8174 155.336C21.5434 142.407 27.1203 138 21.5434 107.104C16.5004 79.1649 11.0003 90.9998 0.898957 62.8695C-1.49965 36.9998 14.0014 46.4998 23.4332 26.8482C33.8179 12.0474 43.9999 4.49977 69.0321 12.0474C85.5014 17.0131 101.22 3.93692 117.04 1.31282C133.998 -1.49996 152.155 8.9998 151.187 29.3622C147 53.4999 140.5 59.9999 152.157 79.1649Z");
    }

    75% {
        d: path("M151.843 82.0363C153.051 107 135 102 157.518 129.951C161.276 134.617 150.873 169.5 124.157 160.824C97.4405 152.148 94.4996 180.917 75.8619 174.018C57.2243 167.119 45.7772 180.915 33.5032 158.207C21.2291 135.5 12.9996 134.5 21.2291 109.975C32.8484 75.3486 4.68604 109.975 0.58469 65.7409C-1.01389 48.4998 9.00171 32.2336 23.119 29.7196C62.0097 25.9999 59.5097 29.7196 68.7179 14.9187C77.8046 0.312988 103.121 11.6696 116.726 4.1842C142.507 -10.0003 157.512 21 150.873 32.2336C139.487 51.5 150.634 57.0726 151.843 82.0363Z");
    }

    100% {
        d: path("M151.157 79.1651C144.23 105.151 155.943 107.173 156.832 127.08C152.626 152.065 151.525 152.262 123.471 157.953C103.605 159.937 101.202 164.907 75.1763 171.147C62.5595 174.172 52.2031 175.756 32.8175 155.336C20.5436 142.407 14.402 130.648 20.5435 107.104C24.2152 79.4292 -0.100934 92.4073 -0.100935 62.8697C-0.102232 37.4073 11.2012 32.0601 22.4333 26.8484C41.702 17.9075 49.1129 29.6751 68.0322 12.0476C81.5039 -0.504395 100.004 1.31315 116.04 1.31302C135.002 1.31287 146.523 13.1329 150.187 29.3624C155.928 54.7873 158.084 53.179 151.157 79.1651Z");
    }
}

.blob-lower {
    position: absolute;
    top: 34%;
    right: -7%;
}

.owner-pic-1 {
    animation: animate-owner-pic-1 20s infinite;
}

.owner-pic-2 {
    animation: animate-owner-pic-2 20s infinite;
}

.owner-pic-cont {
    animation: animate-owner-pic-cont 20s infinite;
    transition: all 10s linear;
    width: 100%;
}

@keyframes animate-owner-pic-cont {
    0% {
        width: 100%;
    }

    25% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    75% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes animate-owner-pic-1 {
    0% {
        display: block;
    }

    25% {
        display: none;
    }

    50% {
        display: none;
    }

    75% {
        display: none;
    }

    100% {
        display: block;
    }
}

@keyframes animate-owner-pic-2 {
    0% {
        display: none;
    }

    25% {
        display: none;
    }

    50% {
        display: block;
    }

    75% {
        display: none;
    }

    100% {
        display: none;
    }
}


.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 5px;
    background: transparent;
}

.progress-bar {
    height: 5px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, #670500 0%, #B83C21 55%, #F26338 100%);
    width: 0%;
}

.cursor {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, #f37e77 0%, #cd3b1a 55%, #ad3511 100%);
    mix-blend-mode: difference;
    z-index: 99999;
    opacity: 100%;
}

.carousel-main {
    background-color: #2e3537;
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
}

.carousel-3d:hover {
    animation-play-state: paused;
}

.carousel-container {
    width: 53%;
    height: 300px;
    position: relative;
    right: 0%;
}

.carousel-3d {
    max-width: 35vw;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -3.7vw;
    left: 11vw;
    transform-style: preserve-3d;
    perspective: 10000px;
    animation: rotate-3D 70s linear infinite;
}

.pic-3d {
    position: absolute;
    left: 8vw;
    top: 8vw;
    width: 15.5vw;
    height: 9.5vw;
}

.pic-3d a img {
    border-radius: 5px;
    image-rendering: auto;
    filter: grayscale(1);
    width: 100%;
    aspect-ratio: 3/2;
}

.pic-3d a img:hover {
    filter: grayscale(0);
}

.pic-3d:nth-child(1) {
    transform: rotateY(0deg) translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(2) {
    transform: rotateY(45deg)translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(3) {
    transform: rotateY(90deg) translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(4) {
    transform: rotateY(135deg) translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(5) {
    transform: rotateY(180deg) translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(6) {
    transform: rotateY(225deg) translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(7) {
    transform: rotateY(270deg) translateZ(var(--translateZ-3D));
}

.pic-3d:nth-child(8) {
    transform: rotateY(315deg) translateZ(var(--translateZ-3D));
}

@keyframes rotate-3D {
    0% {
        transform: rotateX(-4deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(-4deg) rotateY(360deg);
    }
}


section.services-section {
    width: 100%;
    margin: 0 auto;
    background-color: #000;
    padding: 5vw 3.5vw;
    position: relative;
}

.services-wrapper {
    width: 100%;
    margin: 0 auto;
}

.services-wrapper h2 {
    font-family: Sanchez;
    font-size: clamp(20px, 6.3vw, 150px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2em;
    width: 57vw;
    text-align: left;
    color: #fff;
    margin-bottom: 2.2vw;
    transform: translateY(5vw);
    opacity: 0;
}

.half-circle {
    position: absolute;
    width: 6.3vw;
    top: 0;
    right: 0;
}

p.services-faq-number {
    font-family: Sanchez;
    font-size: clamp(30px, 2.78vw, 70px);
    font-style: italic;
    font-weight: 400;
    line-height: 0.5em;
    letter-spacing: 0.10em;
    text-align: left;
    color: #F26338;
}

p.services-faq-text {
    font-family: Poppins;
    font-size: clamp(30px, 2.78vw, 70px);
    font-weight: 500;
    line-height: 54px;
    letter-spacing: 0.05em;
    text-align: left;
    color: #fff;
}

.services-faq-main-cont {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.services-faq-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.7vw;
    border-bottom: 1px solid #696969;
    padding: 3.4vw 0px;
    max-width: 71vw;
    width: 100%;
    transform: translateY(2.5vw);
    opacity: 0;
}

.multipy-element {
    position: absolute;
    width: 9.723vw;
    left: 2.2vw;
    bottom: 5vw;
}

.curly-phrases {
    position: absolute;
    width: 8.335vw;
    top: 24.9vw;
    left: 2.9vw;
}

.contact-me {
    position: relative;
    top: 0.5vw;
    left: 58vw;
    width: 13.9vw;
    z-index: 99;
    transform: translateY(-100vw);
    opacity: 0;
    transition: opacity 0.2s linear, transform 2.5s linear, top 2.5s linear, left 2.5s linear !important;
}

.contact-me-pic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13.9vw;
    animation: rotate-contact 6s linear infinite;
}

@keyframes rotate-contact {
    0% {
        transform: translateY(-3vw) rotateZ(0deg);
    }

    25% {
        transform: translateY(0) rotateZ(90deg);
    }

    50% {
        transform: translateY(3vw) rotateZ(180deg);
    }

    75% {
        transform: translateY(0) rotateZ(270deg);
    }

    100% {
        transform: translateY(-3vw) rotateZ(360deg);
    }
}

.contact-me-arrow {
    position: absolute;
    top: 5.3vw;
    left: 12.1vw;
    transform: translate(-50%, -50%);
    width: 3.48vw;
    z-index: 99;
    animation: no-rotate-contact-arrow 6s linear infinite;
}

@keyframes no-rotate-contact-arrow {
    0% {
        transform: translateY(-3vw) rotateZ(0deg);
    }

    25% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(3vw) rotateZ(0deg);
    }

    75% {
        transform: translateY(0) rotateZ(0deg);
    }

    100% {
        transform: translateY(-3vw) rotateZ(0deg);
    }
}

.show {
    transform: translate(0, 0) !important;
    opacity: 1 !important;
}

.scroll-animate-element {
    transition: transform 1s linear, opacity 1s linear;
}

.show-manually {
    transition: all 1s linear;
}

.show-manually-animate {
    transform: translate(0, 0) !important;
    opacity: 1 !important;
}

.services-answer {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    padding: 2.7vw;
    flex-direction: column;
    width: 35.1vw;
    background: linear-gradient(180deg, #262626 0%, #111111 55%, #000000 100%) padding-box, linear-gradient(180deg, #670500 0%, #B83C21 45%, #F26338 100%) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
    transform: scale(0);
    opacity: 0;
    transition: all 0.5s linear;
}

.services-ans-no {
    font-family: Sanchez;
    font-size: clamp(25px, 2.3vw, 60px);
    font-style: italic;
    font-weight: 400;
    line-height: 0.55em;
    letter-spacing: 0.1em;
    text-align: left;
    color: #F26338;
}

.services-ans-pic {
    width: 20vw;
    margin: 2.3vw 0 2.1vw;
    border-radius: 20px;
}

.services-ans-para {
    font-family: Poppins;
    font-size: clamp(18px, 1.4vw, 45px);
    font-weight: 400;
    line-height: 1.4em;
    text-align: left;
    color: #fff;
}

.work-section {
    width: 100%;
    margin: 0 auto;
    padding: 4.32vw 3.5vw;
    background-color: #000;
    position: relative;
}

.work-wrapper {
    width: 100%;
    margin: 0 auto;
}

.work-wrapper h2 {
    font-family: Sanchez;
    font-size: clamp(20px, 6.3vw, 150px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2em;
    text-align: left;
    color: #fff;
    margin-bottom: 4.57vw;
    transform: translateY(5vw);
    opacity: 0;
}

.works-box {
    width: 93.1vw;
    height: 59.1vw;
    padding: 3.15vw 3.5vw;
    position: sticky;
    z-index: 99;
}

#work1 {
    background-image: url(Assets/INVOICE\ PROJECT\ Bg.png);
}

#work2 {
    background-image: url(Assets/PRACTICE\ PROJECT\ Bg.png);
}

#work3 {
    background-image: url(Assets/BUSINESS\ PROJECTS\ Bg.png);
}

#work4 {
    background-image: url(Assets/Case\ Converter\ PROJECT\ Bg.png);
}


#work1,
#work2,
#work3,
#work4 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.work-description-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.project-name {
    font-family: Raleway;
    font-size: clamp(27px, 2.23vw, 45px);
    font-weight: 700;
    line-height: 0.93em;
    letter-spacing: 0.05em;
    text-align: left;
    color: #F26338;
}

.project-type {
    font-family: Raleway;
    font-size: clamp(22px, 1.75vw, 37px);
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0.05em;
    text-align: left;
    color: #F26338;

}

.plus-element {
    position: absolute;
    top: 3.4vw;
    right: 2.0vw;
    width: 9.73vw;
}

.fixed-element {
    position: sticky !important;
    z-index: 10 !important;
    top: 0 !important;
}

.work-cursor {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9.45vw;
    height: 9.45vw;
    top: 50%;
    left: 50%;
    z-index: 9999;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(242, 99, 56, 0.7) 0%, rgba(184, 60, 33, 0.7) 55%, rgba(103, 5, 0, 0.7) 100%);
    transform: scale(0);
    opacity: 0;
    transition: all 0.5s linear;
}

.work-cursor-text {
    font-family: Raleway;
    font-size: clamp(18px, 1.62vw, 45px);
    font-weight: 600;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff;
}

.work-box-pop {
    position: fixed;
    padding: 3.2vw 4vw;
    z-index: 999;
    background: chocolate;
    width: 90vw;
    height: 50vw;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(180deg, #262626 0%, #111111 55%, #000000 100%) padding-box, linear-gradient(180deg, #670500 0%, #B83C21 45%, #F26338 100%) border-box;
    border-radius: 20px;
    border: 4px solid transparent;
    opacity: 0;
    transition: opacity 0.2s linear, transform 0.7s linear !important;
    box-shadow: 50px 200px 70px 400px #262626;
}

.work-pop-head {
    font-family: Sanchez;
    font-size: clamp(30px, 3.5vw, 60px);
    line-height: 1.1em;
    color: #fff;
    text-align: center;
    margin-bottom: 3vw;
}

.projects-box {
    width: 100%;
    display: none;
    justify-content: space-between;
    gap: 2.7vw;
}

.Frame-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.8vw;
}

.project-frame {
    width: 80%;
    height: 30vw;
    z-index: 1;
    position: relative;
}

.frame-btn {
    width: 14vw;
    height: 3.9vw;
    border-radius: 30px;
    font-size: clamp(16px, 1.3vw, 30px);
    color: #fff;
    background: linear-gradient(180deg, #262626 0%, #111111 55%, #000000 100%) padding-box, linear-gradient(180deg, #670500 0%, #B83C21 45%, #F26338 100%) border-box;
    border-radius: 100px;
    border: 2px solid transparent;
    transition: all 0.5s linear;
    cursor: pointer;
}

.frame-btn:hover {
    background: linear-gradient(180deg, #670500 0%, #B83C21 45%, #F26338 100%);
    border: none;
}

body.lp-pom-body {
    overflow-x: hidden !important;
}

.pop-active {
    transform: scale(1) translate(-50%, -50%) !important;
    opacity: 1 !important;
}

body:has(.pop-active) {
    overflow: hidden !important;
}

.close-pop {
    position: absolute;
    width: 2.5vw;
    height: 2.3vw;
    right: 3vw;
    top: 3vw;
    cursor: pointer;
}

.about-us-section {
    position: relative;
    z-index: 0;
    width: 100%;
    background-color: #000;
    margin: 0 auto;
    padding: 4.32vw 3.5vw 8vw;
}

.about-us-section h2 {
    font-family: Sanchez;
    font-size: clamp(20px, 6.3vw, 150px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2em;
    text-align: left;
    color: #fff;
    margin-bottom: 4.57vw;
    transform: translateY(5vw);
    opacity: 0;
}

.triple-circle-element {
    position: absolute;
    width: 7.1vw;
    top: 1.2vw;
    left: 0;
    z-index: -1;
}

.about-us-wrapper {
    width: 100%;
    margin: 0 auto;
}

.about-me-box {
    background: linear-gradient(289.41deg, #2C0301 1.63%, #281A1A 30.64%, #262626 64.48%, #111111 98.32%) padding-box, linear-gradient(90deg, #670500 0%, #B83C21 45%, #F26338 100%) border-box;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 3.5vw;
    width: 54.515vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    transform: translateY(3vw);
    opacity: 0;
}

.pic-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-face {
    width: 8.4vw;
    box-shadow: 0px 4px 4px 0px #CD4D4DD1;
    border-radius: 50%;
}

.about-name {
    font-family: Sanchez;
    font-size: clamp(30px, 3.13vw, 70px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.31em;
    text-align: left;
    color: #fff;
    width: 55%;
}

.about-name-color {
    color: #F26338;
}

p.about-info {
    font-family: Poppins;
    font-size: clamp(20px, 1.74vw, 40px);
    font-weight: 400;
    line-height: 1.48em;
    text-align: left;
    color: #fff;
}

.multi-layered-big-element {
    position: absolute;
    top: 1.8vw;
    right: 0;
    width: 59vw;
    z-index: -1;
}

.contact-me-2 {
    position: relative;
    top: 22.5vw;
    left: 63vw;
    width: 13.9vw;
    z-index: 99;
    transform: translateY(-27vw);
    opacity: 0;
    transition: opacity 0.2s linear, transform 2.5s linear, top 2.5s linear, left 2.5s linear !important;
}

.full-width-text-infinte-slider1,
.full-width-text-infinte-slider2 {
    width: 100%;
    margin: 0 auto;
    background-color: #000;
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.full-width-wrapper1 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2.8vw;
    height: 12.5vw;
    animation: infinite-text-slider-1 20s linear infinite;
    transform: translateY(5vw);
    opacity: 0;
}

.full-width-wrapper2 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.8vw;
    height: 12.5vw;
    animation: infinite-text-slider-2 20s linear infinite;
    transform: translateY(5vw);
    opacity: 0;
}

.full-width-text {
    font-family: Raleway;
    font-size: clamp(50px, 6.3vw, 155px);
    font-weight: 500;
    line-height: 1.11em;
    color: #fff;
    min-width: 72vw;
    text-align: center;
}

.full-width-text2 {
    font-family: Raleway;
    font-size: clamp(50px, 6.3vw, 155px);
    font-weight: 500;
    line-height: 1.11em;
    color: #fff;
    min-width: 34vw;
    text-align: center;
}

.full-width-dot {
    min-width: 1.75vw;
    height: 1.75vw;
    border-radius: 50%;
    background-color: #fff;
}

@keyframes infinite-text-slider-1 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes infinite-text-slider-2 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

.contact-me-section {
    width: 100%;
    margin: 0 auto;
    background-color: #000;
    padding: 7.2vw 3.5vw;
    position: relative;
}

.mail-icon {
    position: absolute;
    width: 16.2vw;
    top: 23.4vw;
    right: 13.5vw;
    transform: rotate(-15deg);
    opacity: 50%;
}

.contact-me-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 2vw;
    width: 100%;
    margin: 0 auto;
}

.social-icon {
    width: 1.75vw;
}

.border-text {
    min-width: max-content;
    height: 1px;
    border-radius: 2px;
    background: linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%);
}

.manmeet-footer {
    width: 100%;
    padding: 0.2vw 3.5vw 5vw;
    margin: 0px auto -100vw;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
}

.footer-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-hidden-box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: max-content;
    max-height: 1.53vw;
    cursor: pointer;
}

.text-hidden-box:hover .after-hover {
    transform: translateY(-100%);
}

.text-hidden-box:hover .before-hover {
    transform: translateY(-100%);
}

.hover-effect-text {
    font-family: Raleway;
    font-size: clamp(15px, 1.4vw, 28px);
    font-weight: 400;
    text-align: left;
    color: #fff;
    transition: all 0.5s linear;
}

.before-hover {
    color: #ffffff75;
    transform: translateY(0%);
}

.after-hover {
    color: #fff;
    transform: translateY(0%);
}

.menu-footer-box {
    display: flex;
    gap: 1.5vw;
    justify-content: center;
    align-items: center;
}

.footer-wrapper .manmeet-logo {
    font-size: clamp(20px, 2.1vw, 40px);
    width: 15vw;
}

.menu-footer-box a {
    text-decoration: none;
}

.contact-me-footer {
    display: flex;
    align-items: center;
    gap: 1.3vw;
}

.social-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 2.8vw;
    height: 2.8vw;
    border: 1px solid #262626;
    background: transparent;
    cursor: pointer;
}

.social-contact-btn:hover {
    border: 1px solid #ffffff;
    background: #fff;
}

.footer-social-contact {
    width: 1.2vw;
}

.input-style {
    background: linear-gradient(116.26deg, #262626 0.75%, #111111 70.22%, #000000 99.99%) padding-box, linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%) border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    width: 100%;
    padding: 1vw 1.2vw;
    outline: none;
    color: #fff;
    font-family: Poppins;
    font-size: clamp(14px, 0.9vw, 45px);
    line-height: 1.4em;

}

.contact-form-box {
    display: flex;
    gap: 0.75vw;
    align-items: flex-start;
    max-width: 30vw;
    overflow: visible;
    transform: translateX(0vw);
    transition: all 2s linear;
    margin-bottom: 4.5vw;
}

textarea#message,
.input-style {
    max-height: 3.5vw;
}

textarea#message {
    background: linear-gradient(116.26deg, #262626 0.75%, #111111 70.22%, #000000 99.99%) padding-box, linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%) border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    width: 100%;
    padding: 1vw 1.2vw;
    outline: none;
    color: #fff;
    font-family: Poppins;
    font-size: clamp(14px, 0.9vw, 45px);
    line-height: 1.4em;
}

.form-submit-btn {
    background: linear-gradient(90deg, #670500 0%, #B2381E 54%, #F26338 100%);
    box-shadow: 0px 5px 40px 0px #F2633845;
    border-radius: 100px;
    text-align: center;
    font-family: Poppins;
    font-size: clamp(16px, 1.35vw, 45px);
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    border: none;
    color: #fff;
    padding: 0.45vw 5.4vw;
    cursor: pointer;
    margin: 0 auto;
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
    text-transform: uppercase;
}

.form-submit-btn:hover {
    background: linear-gradient(116.26deg, #262626 0.75%, #111111 70.22%, #000000 99.99%) padding-box, linear-gradient(90deg, #670500 0%, #B2381E 54%, #F26338 100%) border-box;
    border: 1px solid transparent;
}

button:disabled {
    background: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)) !important;
    color: #fff !important;
    border: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

input::placeholder {
    font-family: Poppins !important;
    font-size: clamp(8px, 0.9vw, 20px) !important;
    color: #fff;
}

textarea::placeholder {
    font-family: Poppins !important;
    font-size: clamp(8px, 0.9vw, 20px) !important;
    color: #fff;
}

.contact-me-pic,
.contact-me-arrow {
    cursor: pointer;
}

.menu-active {
    transform: rotate(135deg);
}

.menu-icon {
    transition: all 1.4s ease-in;
    position: relative;
    z-index: 9998;
}

.menu-active #line2 {
    transform: rotate(90deg) translate(-50%, -50%);
    left: 0px;
    top: 1px;
}

.menu-links-main {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9997;
    display: flex;
    gap: 1.5vw;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    transform: translateX(100%);
    transition: all 1.4s ease-in;
}

.menu-show {
    transform: translateX(0%);
}

body:has(.menu-show) {
    overflow: hidden !important;
}

.menu-links-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.6vw;
}

.menu-links-wrapper a {
    text-decoration: none;
}

.menu-links-wrapper .hover-effect-text {
    font-size: clamp(60px, 6.3vw, 150px);
    color: #000;
}

.menu-links-wrapper .before-hover {
    color: #000000b8;
}

.menu-links-wrapper .text-hidden-box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: max-content;
    max-height: 6vw;
    cursor: pointer;
}

.menu-links-wrapper a {
    max-width: max-content;
}

.loading-main {
    position: fixed;
    z-index: 0;
    display: flex;
    justify-content: center;
    width: 0vw;
    height: 0vh;
    transition: all 2.5s ease-in;
}

.half-left-box,
.half-right-box {
    position: absolute;
    width: 50vw;
    height: 100vw;
    background-color: #fff;
}

.half-left-box {
    left: 0;
    transition: all 2s ease-in;
    transform: translateX(-300%);
}

.half-right-box {
    right: 0;
    transition: all 1.6s ease-in;
    transform: translateX(300%);
}

.loading-note {
    position: absolute;
    width: 0%;
    height: 0;
    text-align: center;
    font-family: 'Poppins';
    font-size: clamp(25px, 1.8vw, 70px);
    top: 93%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    transition: opacity 0.5s ease-in;
}

.loading-box {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: scale(0);
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.load-word {
    background: -webkit-linear-gradient(289.41deg, #2C0301 33.63%, #2C0301 30.64%, #c21c1c 64.48%, #000000 77.32%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Raleway';
    font-size: clamp(60px, 8vw, 140px);
    color: transparent;
}

.load-word {
    animation: infinite-text-loading 1.75s linear infinite;
}

.load-word:nth-child(2) {
    animation-delay: 0.25s;
}

.load-word:nth-child(3) {
    animation-delay: 0.5s;
}

.load-word:nth-child(4) {
    animation-delay: 0.75s;
}

.load-word:nth-child(5) {
    animation-delay: 1s;
}

.load-word:nth-child(6) {
    animation-delay: 1.25s;
}

.load-word:nth-child(7) {
    animation-delay: 1.5s;
}

@keyframes infinite-text-loading {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25%);
    }

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

.loading-show .loading-note {
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
}

.loading-show .loading-box {
    transform: scale(1) translate(-50%, -50%) !important;
    opacity: 1 !important;
}

.loading-show .half-left-box {
    transform: translateX(0%) !important;
}

.loading-show .half-right-box {
    transform: translateX(0%) !important;
}

.loading-main.loading-show {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
}

.contact-me-gif {
    width: 32vw;
}

.form-call-btn {
    border: none;
    padding: 1vw 2vw;
    border-radius: 5vw;
    color: #fff;
    background: linear-gradient(289.41deg, #2C0301 1.63%, #670500 30.64%, #F26338 92.48%, #F26338 98.32%);
    letter-spacing: 0.09em;
    cursor: pointer;
    font-size: clamp(13px, 1.44vw, 18px);
}

.contact-me-gif {
    transform: translateY(4.5vw);
    opacity: 0;
}

.contact-head {
    font-family: Sanchez;
    font-size: clamp(25px, 4.5vw, 70px);
    font-style: italic;
    font-weight: 400;
    line-height: 0.75em;
    text-align: center;
    color: #fff;
    margin-bottom: 3.5vw;
}

.contact-form-main {
    max-width: 54vw;
    padding: 2vw 0;
    width: 100%;
    border: 2px solid transparent;
    border-radius: 10px;
    transform: translateY(4.5vw);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 2px solid;
    border-image-source: linear-gradient(180deg, #670500 0%, #B83C21 55%, #C5A3A3 100%);
    border-image-slice: 1;
    border-image-repeat: stretch;
    border-image-width: 0 0 0 2px;
    justify-content: flex-start;
    gap: 1vw;
}

.contact-form-main-form-style {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-evenly !important;
    gap: 4.5vw !important;
}

.arrow-left-box,
.arrow-right-box {
    background: linear-gradient(116.26deg, #262626 0.75%, #111111 70.22%, #000000 99.99%) padding-box, linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%) border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.8vw;
    padding: 1vw;
    cursor: pointer;
}

.arrow-left-box:hover,
.arrow-right-box:hover {
    background: linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%);
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
}

.arrow-left,
.arrow-right {
    max-width: 1.16vw;
    width: 100%;
}

.form-field-box {
    display: flex;
    min-width: 100%;
    gap: 5%;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 3px;
}

.arrows-main {
    display: flex;
    gap: 10%;
    width: 39%;
}

.contact-form-cont {
    display: flex;
    flex-direction: column;
    transform: translateY(4.5vw);
    position: absolute;
    opacity: 0;
    transition: transform 1.5s linear, opacity 1.5s linear;
    overflow: hidden;
    z-index: -10;
    width: 0;
    height: 0;
}

.error-box {
    position: absolute;
    top: 4.32vw;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.45vw;
    z-index: -1;
    transform: scale(0);
    opacity: 0;
    transition: all 0.5s linear;
}

.error-box-show {
    position: absolute;
    z-index: 99 !important;
    transform: scale(1) !important;
    opacity: 1 !important;
}

.error-icon {
    max-width: 1.5vw;
}

p.error-text {
    color: #fff;
    font-family: Poppins;
    font-size: clamp(14px, 1.08vw, 20px);
    line-height: 1em;
}

.form-progress {
    position: absolute;
    z-index: -10;
    display: flex;
    flex-direction: column;
    gap: 4.1vw;
    margin-top: -0.27vw;
    transform: translateY(4.5vw);
    opacity: 0;
    transition: transform 1.5s linear, opacity 1.5s linear;
    width: 0;
    height: 0;
}

.show-form {
    position: relative !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    z-index: 99 !important;
    width: auto !important;
    height: auto !important;
}

.progress-number {
    position: relative;
    background: linear-gradient(116.26deg, #262626 0.75%, #111111 70.22%, #000000 99.99%) padding-box, linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%) border-box;
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.step-done {
    max-width: 3.2vw;
    position: absolute;
    z-index: 99;
    transition: all 0.5s linear;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.progrees-steps-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 100%;
    background: #262626;
}

.progrees-text {
    color: #fff;
    font-family: Sanchez;
    font-size: clamp(16px, 1.4vw, 22px);
    padding-right: 0.14vw;
}

.progress-bar-form {
    width: 2px;
    height: 0%;
    background: linear-gradient(90deg, #F26338 0%, #B83C21 55%, #670500 100%);
    transition: height 2s linear;
}

.step-done-show {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
}

.faq-btn {
    display: none !important;
}

button.faq-btn {
    border: none;
    background: none;
    display: flex;
}

img.minus,
img.plus {
    width: 3.8vw;
    position: absolute;
    right: 0;
    top: 50%;
    transition: all 0.5 linear;
}

.services-answer-mobile {
    display: none;
}

.services-faq-box-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.4vw;
    position: relative;
    width: 100%;
}

.work-cursor-mobile {
    display: none;
}

@media(max-width: 1024px) {

    .loading-note {
        font-size: clamp(23px, 1.8vw, 70px);
    }

    .load-word {
        font-size: clamp(60px, 10vw, 140px);
    }

    .header-main {
        padding: 4.8vw 3vw 4.4vw;
    }

    .menu-box {
        gap: 15px;
    }

    .hero-dot {
        right: -1.01vw;
    }

    .description-work p {
        font-size: clamp(18px, 2.4vw, 50px);
    }

    .cursor {
        display: none;
    }

    .hero-main {
        padding: 7.8vw 3vw 9.4vw;
    }

    .three-d-slider-main-box {
        gap: 1vw;
    }

    :root {
        --translateZ-3D: 24vw;
    }

    .pic-3d {
        width: 18.5vw;
    }

    .carousel-3d {
        left: 13vw;
    }

    .path-animation {
        transform: scaleY(0.45) scaleX(1) translateX(-4%);
    }

    .wave-main svg {
        height: 80px;
    }

    .services-wrapper h2 {
        font-size: clamp(20px, 5.3vw, 150px);
        margin-bottom: 5.2vw;
    }

    section.services-section {
        padding: 6vw 3vw;
    }

    .contact-me-pic {
        width: 15.9vw;
    }

    .contact-me-arrow {
        top: 5.8vw;
        left: 11.8vw;
        width: 4.8vw;
    }

    .contact-me-pic {
        left: 44%;
    }

    @keyframes rotate-contact {
        0% {
            transform: translateY(-2.3vw) rotateZ(0deg);
        }

        25% {
            transform: translateY(0) rotateZ(90deg);
        }

        50% {
            transform: translateY(2.3vw) rotateZ(180deg);
        }

        75% {
            transform: translateY(0) rotateZ(270deg);
        }

        100% {
            transform: translateY(-2.3vw) rotateZ(360deg);
        }
    }

    @keyframes no-rotate-contact-arrow {
        0% {
            transform: translateY(-2.3vw) rotateZ(0deg);
        }

        25% {
            transform: translateY(0) rotateZ(0deg);
        }

        50% {
            transform: translateY(2.3vw) rotateZ(0deg);
        }

        75% {
            transform: translateY(0) rotateZ(0deg);
        }

        100% {
            transform: translateY(-2.3vw) rotateZ(0deg);
        }
    }

    .services-faq-box {
        max-width: 78vw;
        gap: 0;
        padding: 2vw 0px;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .faq-btn {
        display: block !important;
    }

    .services-answer-mobile {
        display: block;
    }

    .active-faq .services-answer-mobile {
        max-height: 32vw;
        opacity: 1;
    }

    .active-faq .minus {
        opacity: 1;
    }

    .active-faq .plus {
        opacity: 0;
    }

    .plus {
        opacity: 1;
    }

    .minus {
        opacity: 0;
    }

    .services-answer-mobile .services-ans-para {
        margin-bottom: 1.5vw;
    }

    .services-answer-mobile {
        max-height: 0;
        opacity: 0;
        transition: all 1s linear;
    }

    p.services-faq-text {
        font-size: clamp(22px, 2.78vw, 70px);
    }

    p.services-faq-number {
        font-size: clamp(23px, 2.78vw, 70px);
        line-height: 0.8em;
    }

    .work-wrapper h2 {
        font-size: clamp(20px, 5.3vw, 150px);
    }

    .plus-element {
        top: 3vw;
    }

    .work-section {
        padding: 4.32vw 3vw;
    }

    .works-box {
        padding: 4vw 3vw;
        margin-bottom: 30px;
    }

    .project-name {
        font-size: clamp(23px, 2.23vw, 45px);
    }

    .project-type {
        font-size: clamp(20px, 1.75vw, 37px);
    }

    .about-us-section h2 {
        font-size: clamp(20px, 5.3vw, 150px);
        margin-bottom: 6.57vw;
    }

    .about-us-section {
        padding: 4.1vw 3vw 8vw;
    }

    .triple-circle-element {
        top: 0.2vw;
    }

    .about-me-box {
        border-radius: 20px;
        width: 62.515vw;
        padding: 3vw;
        gap: 2.6vw;
    }

    p.about-info {
        font-size: clamp(18px, 1.74vw, 40px);
        line-height: 1.48em;
    }

    .about-name {
        font-size: clamp(28px, 3.13vw, 70px);
        line-height: 1.2em;
    }

    .full-width-text,
    .full-width-text2 {
        font-size: clamp(45px, 6.3vw, 155px);
    }

    .contact-me-section {
        padding: 7.2vw 3vw;
    }

    .contact-head {
        margin-bottom: 3.2vw;
    }

    .contact-form-main {
        max-width: 56vw;
        padding: 2vw 5vw;
    }

    .progress-number {
        width: 4vw;
        height: 4vw;
    }

    .progrees-text {
        font-size: clamp(15px, 1.4vw, 22px);
    }

    .arrow-left-box,
    .arrow-right-box {
        width: 4vw;
    }

    .mail-icon {
        width: 17.2vw;
        top: 25vw;
        right: 19.5vw;
    }

    .contact-form-main-form-style {
        justify-content: space-between !important;
    }

    .error-box {
        top: 4.8vw;
        left: 0.5vw;
        gap: 0.8vw;
    }

    p.error-text {
        font-size: clamp(13px, 1.08vw, 20px);
    }

    .input-style {
        font-size: clamp(12px, 0.9vw, 45px);
        line-height: 1.6em;
    }

    textarea#message,
    .input-style {
        max-height: 4vw;
    }

    .form-submit-btn {
        font-size: clamp(15px, 1.35vw, 45px);
        padding: 0.45vw 7.4vw;
    }

    .step-done {
        max-width: 4.2vw;
    }

    .form-field-box {
        gap: 3.5%;
        padding: 0 2px;
    }

    .arrows-main {
        gap: 7%;
    }

    .contact-me-wrapper {
        gap: 7vw;
    }

    .text-hidden-box {
        max-height: 1.67vw;
    }

    .manmeet-footer {
        padding: 0.2vw 3vw 4vw;
    }

    .social-contact-btn {
        width: 3.4vw;
        height: 3.4vw;
    }

    .footer-social-contact {
        width: 1.35vw;
    }

    .hover-effect-text {
        font-size: clamp(14px, 1.4vw, 28px);
    }

    .contact-me-gif {
        width: 34vw;
    }

    .frame-btn {
        width: 16vw;
        height: 4.9vw;
    }

    .work-box-pop {
        height: 63vw;
        border: 3px solid transparent;
        padding: 4.2vw 4vw;
        justify-content: center;
    }

    .menu-links-wrapper .hover-effect-text {
        font-size: clamp(50px, 6.3vw, 150px);
    }

    .menu-links-wrapper .text-hidden-box {
        max-height: 7vw;
    }

    img.minus,
    img.plus {
        width: 2.5vw;
        position: absolute;
        right: -1vw;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .projects-box {
        flex-wrap: wrap;
        overflow: scroll;
    }

    .work-cursor-mobile {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14.45vw;
        height: 14.45vw;
        top: 50%;
        left: 50%;
        z-index: 9999;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(242, 99, 56, 0.7) 0%, rgba(184, 60, 33, 0.7) 55%, rgba(103, 5, 0, 0.7) 100%);
        transform: translate(-50%, -50%);
    }

    .work-cursor-text {
        font-size: clamp(14px, 1.62vw, 45px);
        letter-spacing: 0em;
    }
}

@media(max-width: 768px) {

    .owner-pic-1,
    .owner-pic-2 {
        max-width: 8vw;
        min-height: 8vw;
    }

    .owner-pic-cont {
        max-width: 8vw;
    }

    .blob-lower {
        top: 33%;
    }

    .hero-dot {
        right: -4.01vw;
    }

    .hero-htmlcode {
        top: 36.35vw;
    }

    span#line2 {
        left: -1px;
    }

    .menu-icon {
        width: 3vw;
        height: 3vw;
    }

    .line {
        height: 3vw;
    }

    .menu-links-wrapper .hover-effect-text {
        font-size: clamp(44px, 6.3vw, 150px);
    }

    .menu-links-wrapper {
        gap: 4.6vw;
    }

    .description-work p {
        width: 52vw;
    }

    .description-work p {
        font-size: clamp(16px, 2.4vw, 50px);
    }

    .hero-main {
        padding: 7.8vw 3vw 7.4vw;
    }

    .contact-me-pic {
        width: 14.9vw;
        left: 40%;
    }

    .contact-me-arrow {
        top: 5.6vw;
        left: 11vw;
        width: 4.2vw;
    }

    p.services-faq-text {
        font-size: clamp(18px, 2.78vw, 70px);
        line-height: 1.64em;
    }

    .curly-phrases {
        top: 24.9vw;
    }

    .multipy-element {
        bottom: 6vw;
    }

    p.services-faq-number {
        font-size: clamp(20px, 2.78vw, 70px);
        line-height: 0.8em;
    }

    .services-faq-box {
        gap: 1.5vw;
        padding: 3vw 3vw 2vw 0;
    }

    img.minus,
    img.plus {
        right: -3vw;
    }

    .services-ans-para {
        font-size: clamp(15px, 1.4vw, 45px);
        line-height: 1.4em;
    }

    .active-faq .services-answer-mobile {
        max-height: 35vw;
    }

    .project-type {
        font-size: clamp(16px, 1.75vw, 37px);
    }

    .project-name {
        font-size: clamp(18px, 2.23vw, 45px);
    }

    .frame-btn {
        width: 21vw;
        height: 5.9vw;
    }

    .Frame-cont {
        gap: 3.8vw;
    }

    .work-box-pop {
        height: 80vw;
        border-radius: 15px;
    }

    .project-frame {
        height: 45vw;
    }

    .about-us-section {
        padding: 2.1vw 3vw 8vw;
    }

    .half-left-box,
    .half-right-box {
        min-height: 100vh;
    }

    .load-word {
        font-size: clamp(60px, 13vw, 140px);
    }

    .triple-circle-element {
        top: -0.8vw;
    }

    .about-name {
        font-size: clamp(26px, 3.13vw, 70px);
    }

    .contact-me-2 {
        top: 30.5vw;
        left: 72vw;
    }

    .about-me-box {
        border-radius: 15px;
        width: 71.515vw;
    }

    p.about-info {
        font-size: clamp(16px, 1.74vw, 40px);
    }

    .full-width-text,
    .full-width-text2 {
        font-size: clamp(32px, 6.3vw, 155px);
    }

    .contact-head {
        font-size: clamp(25px, 5.5vw, 70px);
    }

    .contact-me-gif {
        width: 36vw;
    }

    .mail-icon {
        top: 27vw;
    }

    .form-call-btn {
        padding: 1.2vw 2vw;
    }

    .progress-number {
        width: 4.5vw;
        height: 4.5vw;
    }

    p.error-text {
        font-size: clamp(11px, 1.08vw, 20px);
    }

    .form-submit-btn {
        font-size: clamp(13px, 1.35vw, 45px);
        padding: 0.45vw 6.4vw;
    }

    .input-style {
        font-size: clamp(10px, 0.9vw, 45px);
    }

    .step-done {
        max-width: 4.52vw;
    }

    textarea#message {
        padding: 0.7vw 1vw;
        font-size: clamp(10px, 0.9vw, 45px);
    }

    .cursor-change-logo {
        padding-left: 5px;
        color: #F26338;
    }

    .contact-me-footer {
        gap: 1vw;
    }

    .hover-effect-text {
        font-size: clamp(13px, 1.4vw, 28px);
    }

    .text-hidden-box {
        max-height: 2vw;
    }

    .footer-wrapper .manmeet-logo {
        width: 19vw;
    }

    .box-fixed {
        height: 65vh;
    }

    .owner-pic-cont {
        animation: animate-owner-pic-cont 10s infinite;
        transition: all 5s linear;
    }

    .owner-pic-1 {
        animation: animate-owner-pic-1 10s infinite;
    }

    .owner-pic-2 {
        animation: animate-owner-pic-2 10s infinite;
    }

    .work-cursor-mobile {
        width: clamp(12vw, 15vw, 20vw);
        height: clamp(12vw, 15vw, 20vw);
    }

    .work-cursor-text {
        font-size: clamp(11px, 1.8vw, 45px);
    }
}

@media(max-width:600px) {

    .loading-note {
        font-size: clamp(16px, 1.8vw, 70px);
        line-height: 1.5em;
    }

    .header-main {
        padding: 35px 2.4vw 30px;
    }

    .hero-headings-box h1 {
        font-size: clamp(48px, 10vw, 255px);
        line-height: 0.75em;
    }

    .hero-dot {
        right: -9.01vw;
        width: 26.27vw;
        top: 2.4vw;
    }

    .hero-headings-box {
        gap: 3vw;
    }

    .hero-htmlcode {
        top: 40.35vw;
    }

    .three-d-slider-main-box {
        flex-wrap: wrap;
        gap: clamp(40px, 8.4vw, 100px);
    }

    .hero-headings-box {
        margin-bottom: 7.1vw;
    }

    .description-work p {
        width: 100vw;
    }

    .line {
        height: 4vw;
    }

    .line {
        height: 4.2vw;
    }

    .menu-icon {
        width: 4.2vw;
        height: 4.2vw;
    }

    .menu-links-wrapper .hover-effect-text {
        font-size: clamp(34px, 6.3vw, 150px);
    }

    .menu-links-wrapper {
        gap: 6.6vw;
    }

    .menu-links-wrapper .text-hidden-box {
        max-height: 7.5vw;
    }

    .description-work p {
        max-width: clamp(365px, 8vw, 450px);
        font-size: clamp(18px, 2.4vw, 50px);
    }

    .description-work {
        align-items: flex-start;
        max-height: max-content;
    }

    .hero-headings-box {
        margin-bottom: 13.1vw;
    }

    .three-d-slider-cont {
        min-height: 20vw;
    }

    .hero-main {
        padding: 7.8vw 3vw 14.4vw;
    }

    .pic-3d {
        width: 28.5vw;
    }

    .carousel-3d {
        left: 37vw;
    }

    :root {
        --translateZ-3D: 38vw;
    }

    .contact-me-pic {
        width: 16vw;
    }

    .contact-me-arrow {
        width: 5.2vw;
    }

    p.services-faq-text {
        line-height: 1.64em;
    }

    .services-faq-box {
        gap: 2.5vw;
        align-items: flex-start;
        max-width: 78.2vw;
        padding: 3vw 3vw 1vw 0;
    }

    .services-wrapper h2,
    .work-wrapper h2,
    .about-us-section h2 {
        margin-bottom: 6vw;
        font-size: clamp(28px, 5.3vw, 150px);
    }

    p.services-faq-number {
        font-size: clamp(18px, 2.78vw, 70px);
        line-height: 1.6em;
    }

    img.minus,
    img.plus {
        max-width: 16px;
        width: 100%;
    }

    .services-ans-pic {
        width: 40vw;
        border-radius: 10px;
    }

    .services-answer-mobile .services-ans-para {
        margin-bottom: 4vw;
    }

    .active-faq .services-answer-mobile {
        max-height: 65vw;
    }

    .services-faq-box-inner {
        align-items: flex-start;
        gap: 2.6vw;
    }

    section.services-section {
        padding: 7vw 3vw;
    }

    .work-section {
        padding: 7vw 3vw;
    }

    .project-name {
        font-size: clamp(14px, 2.23vw, 45px);
        line-height: 1.2em;
    }

    .project-type {
        font-size: clamp(14px, 1.75vw, 37px);
    }

    .about-me-box {
        border-radius: 10px;
        width: 74.515vw;
    }

    p.about-info {
        font-size: clamp(12px, 2.74vw, 40px);
        line-height: 1.5em;
    }

    .about-name {
        font-size: clamp(22px, 4.8vw, 70px);
        line-height: 1.2em;
        width: 65%;
    }

    .about-face {
        width: clamp(50px, 11.8vw, 68px);
    }

    .full-width-text,
    .full-width-text2 {
        font-size: clamp(24px, 6vw, 155px);
    }

    .contact-me-section {
        padding: 9vw 3vw;
        overflow: hidden;
    }

    .form-call-btn {
        padding: 1.6vw 2vw 1.2vw;
        font-size: clamp(10px, 1.44vw, 18px);
    }

    .box-fixed {
        height: 80vh;
    }

    .progrees-text {
        font-size: clamp(10px, 2.4vw, 22px);
    }

    p.error-text {
        font-size: clamp(10px, 1.08vw, 20px);
    }

    .contact-form-box {
        max-width: 38vw;
    }

    .input-style {
        font-size: clamp(9px, 1.5vw, 45px);
    }

    .arrow-left,
    .arrow-right {
        max-width: 2.16vw;
    }

    .arrow-left-box,
    .arrow-right-box {
        border-radius: 3px;
    }

    .error-box {
        top: 5.2vw;
    }

    textarea#message,
    .input-style {
        max-height: 4.2vw;
    }

    .mail-icon {
        top: 30vw;
    }

    .contact-head {
        font-size: clamp(22px, 5.5vw, 70px);
    }

    .form-submit-btn {
        font-size: clamp(11px, 1.35vw, 45px);
        padding: 0.45vw 6.4vw;
    }

    .input-style {
        border-radius: 3px;
    }

    .arrow-left-box,
    .arrow-right-box {
        width: 4.2vw;
    }

    .footer-wrapper {
        flex-wrap: wrap;
        gap: 5vw;
    }

    .manmeet-footer {
        padding: 1.2vw 3vw 5.5vw;
    }

    .footer-wrapper .manmeet-logo {
        width: 100%;
    }

    .menu-footer-box {
        gap: 2vw;
        justify-content: flex-start;
        width: 100%;
    }

    .contact-me-footer {
        gap: 1.5vw;
    }

    .social-contact-btn {
        width: 4vw;
        height: 4vw;
    }

    .footer-social-contact {
        width: 9px;
    }

    .social-contact-btn {
        width: 23px;
        height: 22px;
    }

    .text-hidden-box {
        max-height: 3vw;
    }

    .loading-note {
        top: 90%;
    }

    .frame-btn {
        width: 140px;
        height: 40px;
        font-size: clamp(15px, 1.3vw, 30px);
    }

    .projects-box {
        gap: 4.7vw;
    }

    .work-pop-head {
        font-size: clamp(26px, 4.5vw, 60px);
        margin-bottom: 25px;
    }

    .work-box-pop {
        padding: 35px 4vw;
        height: 110vw;
        width: 94vw;
        box-shadow: 380px 240px 650px 830px #262626;
    }

    .close-pop {
        width: 16px;
        height: 16px;
    }

    .project-frame {
        width: 100%;
        height: 50vw;
    }

    .work-cursor-mobile {
        width: clamp(12vw, 13vw, 20vw);
        height: clamp(12vw, 13vw, 20vw);
    }

    .work-cursor-text {
        font-size: clamp(6px, 1.5vw, 45px);
    }

    .works-box {
        margin-bottom: 25px;
    }
}

@media(max-width:425px) {
    .contact-me-wrapper {
        gap: 5vw;
    }

    span#line2 {
        left: -0.5px;
        top: 0.5px;
    }

    .hero-headings-box h1 {
        font-size: clamp(44px, 10vw, 255px);
        line-height: 0.75em;
    }

    .menu-active #line2 {
        transform: rotate(90deg) translate(-50%, -50%);
        left: -0.5px;
        top: 0.5px;
    }

    .menu-icon {
        width: 5.2vw;
        height: 5.2vw;
    }

    .line {
        height: 5.2vw;
    }

    .hero-htmlcode {
        top: 43.2vw;
        left: 2vw;
    }

    .hero-dot {
        right: -6.01vw;
        width: 21.27vw;
        top: 5.4vw;
    }

    .menu-links-wrapper {
        gap: 8.6vw;
    }

    .menu-links-wrapper .text-hidden-box {
        max-height: 9.5vw;
    }

    .owner-pic-cont {
        max-width: 9vw;
    }

    .owner-pic-1,
    .owner-pic-2 {
        max-width: 9vw;
        min-height: 9vw;
    }

    .blob-lower-animation {
        transform: scale(1.5);
    }

    .blob-lower {
        top: 30.5%;
    }

    .path-animation {
        transform: scaleY(0.38) scaleX(1) translateX(-4%);
    }

    .wave-main svg {
        height: 70px;
    }

    .half-circle {
        width: 8.3vw;
    }

    .curly-phrases {
        top: 29.9vw;
        width: 10.335vw;
        left: 1.9vw;
    }

    img.minus,
    img.plus {
        max-width: 14px;
    }

    img.minus,
    img.plus {
        right: -5vw;
    }

    p.services-faq-text {
        font-size: clamp(16px, 2.78vw, 70px);
        line-height: 1.5em;
    }

    p.services-faq-number {
        font-size: clamp(17px, 2.78vw, 70px);
        line-height: 1.5em;
    }

    .services-faq-box {
        gap: 2.5vw;
        padding: 4vw 3vw 2vw 0;
    }

    .services-ans-para {
        font-size: clamp(14px, 1.4vw, 45px);
        line-height: 1.4em;
    }

    .active-faq .services-answer-mobile {
        max-height: 70vw;
    }

    .project-type {
        font-size: clamp(11px, 1.75vw, 37px);
    }

    .project-name {
        font-size: clamp(11px, 2.23vw, 45px);
    }

    .services-wrapper h2,
    .work-wrapper h2,
    .about-us-section h2 {
        font-size: clamp(26px, 5.3vw, 150px);
    }

    .contact-me-arrow {
        top: 5.6vw;
    }

    .plus-element {
        top: 8vw;
        width: 8.73vw;
    }

    .about-name {
        font-size: clamp(20px, 4.8vw, 70px);
        line-height: 1.2em;
        width: 70%;
    }

    .about-face {
        width: clamp(47px, 11.8vw, 68px);
    }

    .about-me-box {
        gap: 4.6vw;
    }

    .full-width-text,
    .full-width-text2 {
        font-size: clamp(22px, 6vw, 155px);
    }

    .contact-me-wrapper {
        gap: 3vw;
    }

    .contact-head {
        margin-bottom: 5.2vw;
    }

    .mail-icon {
        top: 35vw;
        width: 16.2vw;
        right: 23.5vw;
    }

    .form-call-btn {
        padding: 7px 3vw 6px;
        font-size: clamp(10px, 1.44vw, 18px);
    }

    .form-submit-btn {
        font-size: clamp(11px, 1.35vw, 45px);
        padding: 0.7vw 7.4vw 0.5vw;
        margin-top: 7.5vw;
    }

    .contact-me-section {
        padding: 10vw 3vw;
    }

    .progrees-text {
        font-size: clamp(9px, 2.4vw, 22px);
        padding-right: 0vw;
    }

    textarea#message {
        padding: 0.4vw 1vw 0vw;
        font-size: clamp(9px, 0.9vw, 45px);
    }

    .error-icon {
        max-width: 2.5vw;
    }

    p.error-text {
        font-size: clamp(9px, 1.08vw, 20px);
    }

    .error-box {
        top: 6.2vw;
    }

    .hover-effect-text {
        font-size: clamp(12px, 1.4vw, 28px);
    }

    .text-hidden-box {
        max-height: 4vw;
    }

    .loading-note {
        font-size: clamp(15px, 1.8vw, 70px);
        line-height: 1.4em;
    }

    .loading-note {
        top: 86%;
    }

    .manmeet-footer {
        padding: 3.2vw 3vw 7.5vw;
    }

    .work-box-pop {
        height: 160vw;
        padding: 45px 3vw;
    }

    .project-frame {
        height: 90vw;
    }

    .close-pop {
        width: 15px;
        height: 15px;
        right: 4vw;
        top: 4vw;
    }

    .work-cursor-mobile {
        width: clamp(10vw, 11vw, 20vw);
        height: clamp(10vw, 11vw, 20vw);
    }

    .work-cursor-text {
        font-size: clamp(5px, 1.5vw, 45px);
    }

    .works-box {
        margin-bottom: 20px;
    }
}