@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: Ubuntu;
}

*::selection {
    background-color: white;
    color: black;
}



:root {
    --primary-color: #121212;
    --secondary-color: #EB323A;
    --font-color: #ffffff;
}

body,
html {
    width: 100%;
    height: 100%;
    cursor: none;
}

body {
    overflow: hidden;
}

#welcomeanim {
    position: fixed;
    z-index: 100;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: var(--font-color);

    h1 {
        font-size: 4vw;
        text-transform: uppercase;

        span {
            display: inline-block;
        }
    }
}

#circle {
    position: fixed;
    height: 6vw;
    width: 6vw;
    background: rgba(91, 91, 91, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 99;
    pointer-events: none;
    mix-blend-mode: difference;
    opacity: 0;

}

#innercircle {
    z-index: 99;
    position: fixed;
    transform: translate(100%, 100%);
    height: 2vw;
    width: 2vw;
    background: rgba(224, 224, 224, 0.278);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

#main {
    width: 100%;
    min-height: 100%;
    background-color: var(--primary-color);
    color: var(--font-color);
    position: relative;

    #navbar {
        height: 10vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        h1 {
            font-size: 2.5vw;
            font-weight: 800;
        }

        span {
            color: var(--secondary-color);
        }

        ul {
            display: flex;
            justify-content: space-evenly;
            gap: 2vw;

            li {
                list-style: none;
                padding: 0.5vw 0;
                position: relative;
                overflow: hidden;
                border-radius: 1.5vw;
                z-index: 10;
                transition: all 0.4s ease;
                transform: translateY(-100px);

                a {
                    color: var(--font-color);
                    text-decoration: none;
                    font-size: 1.3vw;
                    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                    padding: 0.6vw 1.4vw;
                    border-radius: 1.5vw;
                    position: relative;
                    z-index: 10;
                }

            }

            li::after {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                top: 100%;
                left: 0;
                border-radius: 50%;
                background-color: white;
                transition: all 0.4s ease;
                z-index: 1;
            }

            li:hover::after {
                top: 0;
                border-radius: 0;
            }

            li:hover a {
                color: #000000;
            }

            li:hover {
                box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color);
            }
        }
    }

    #page1 {
        height: 99vh;
        width: 100%;
        display: flex;

        .leftSection {
            width: 50%;
            font-size: 4vw;
            font-weight: 500;
            padding-left: 10vw;
            padding-top: 6vw;

            span {
                color: var(--secondary-color);
            }

            h5 {
                font-size: 1.2vw;
                font-weight: 400;
                color: rgb(81, 81, 81);
                margin-top: 0.5vw;
            }

            .handles {
                height: 4vw;
                margin-top: 4vw;
                display: flex;
                align-items: center;
                gap: 2vw;

                .fb {
                    height: 3vw;
                    width: 3vw;
                    transition: all 0.3s ease;
                    border-radius: 1vw;
                    overflow: hidden;
                    display: flex;
                    padding: 0.4vw;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .x {
                    height: 3vw;
                    width: 3vw;
                    border-radius: 1vw;
                    transition: all 0.3s ease;
                    overflow: hidden;
                    display: flex;
                    padding: 0.4vw;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .in {
                    height: 3vw;
                    width: 3vw;
                    border-radius: 1vw;
                    overflow: hidden;
                    display: flex;
                    padding: 0.4vw;
                    transition: all 0.3s ease;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .gram {
                    height: 3vw;
                    transition: all 0.3s ease;
                    width: 3vw;
                    border-radius: 1vw;
                    overflow: hidden;
                    display: flex;
                    padding: 0.4vw;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .fb:hover {
                    cursor: pointer;
                    box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color);
                    transform: translateY(-0.5vw);

                }

                .in:hover {
                    cursor: pointer;
                    box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color);
                    transform: translateY(-0.5vw);

                }

                .gram:hover {
                    cursor: pointer;
                    transform: translateY(-0.5vw);
                    box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color);

                }

                .x:hover {
                    cursor: pointer;
                    box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color);
                    transform: translateY(-0.5vw);

                }
            }

            .buttons {
                .btn {
                    padding: 1vw;
                    border-radius: 1vw;
                    border: 3px solid white;
                    background: linear-gradient(to left, rgba(77, 79, 79, 0.36), transparent);
                    cursor: pointer;
                    transition: scale 0.3s ease;

                    a {
                        font-size: 1.2vw;
                        font-weight: 600;
                        text-decoration: none;
                        color: white;
                    }
                }

                .btn:hover {
                    scale: 1.1;
                    background: #000;
                }
            }
        }

        .rightSection {
            width: 50%;
            height: 80%;
            overflow: hidden;
            border-radius: 50%;
            pointer-events: none;

            iframe {
                width: 100%;
                height: 100%;
            }

        }
    }

    #liner {
        height: 10vw;
        position: relative;
        top: -8vw;
    }

    #page2 {
        width: 100%;
        min-height: 100vh;
        color: white;

        .heading {
            display: flex;
            align-items: center;
            width: fit-content;
            text-align: center;
            margin: auto;
            border-radius: 1vw;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            transform: translateY(-200px);
            scale: 0;
            opacity: 0;

            h1 {
                font-size: 6vw;
                transition: all 0.4s ease;
                position: relative;
                z-index: 10;

            }
        }

        .heading::before {
            content: "";
            left: -100%;
            height: 10%;
            width: 100%;
            bottom: 0;
            position: absolute;
            background: red;
            transition: all 0.4s ease;
            z-index: 11;
        }

        .heading:hover::before {
            box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color);
            left: 0;
        }


        .skillcont1 {
            height: 15vw;
            margin-top: 2vw;
            max-width: 95%;
            overflow: hidden;
            margin: auto;
            padding-top: 3vw;


            .first {
                height: 100%;
                min-width: 90%;
                margin: auto;
                display: flex;
                transition: all ease;

                .logo {
                    height: 100%;
                    flex-shrink: 0;
                    width: 12%;
                    border-radius: 1vw;
                    padding: 1vw;

                    img {
                        height: 82%;
                        width: 100%;
                        object-fit: contain;
                    }

                    h3 {
                        text-align: center;
                        font-weight: 600;
                        font-size: 1vw;
                    }
                }
            }

            .first {
                transform: translateX(0%);
            }
        }

        .skillcont2 {
            height: 15vw;
            max-width: 95%;
            margin: auto;
            overflow: hidden;
            padding-top: 3vw;


            .second {
                height: 100%;
                transition: all ease;
                min-width: 90%;
                margin: auto;
                display: flex;

                .logo {
                    height: 100%;
                    flex-shrink: 0;
                    width: 12%;
                    border-radius: 1vw;
                    padding: 1vw;

                    img {
                        height: 82%;
                        width: 100%;
                        object-fit: contain;
                    }

                    h3 {
                        text-align: center;
                        font-weight: 600;
                        font-size: 1vw;
                    }
                }
            }

            .second {
                transform: translateX(-90%);
            }
        }

        .skillcont3 {
            min-height: 40vw;
            width: 100%;
            display: flex;

            .tech {
                height: 100%;
                width: 50%;


                .head {
                    text-align: center;
                    padding-top: 8vw;
                    margin-bottom: 4vw;
                    text-transform: uppercase;
                }

                .skill {
                    height: 5vw;
                    width: 80%;
                    margin: auto;
                    padding: 1vw;

                    .image {
                        height: 1.5vw;
                        width: 1.5vw;

                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }

                    .text {
                        font-size: 1vw;
                    }

                    .loader {
                        margin-top: 0.5vw;
                        width: 100%;
                        height: 0.5vw;
                        background: gray;
                        border-radius: 2vw;
                        overflow: hidden;

                    }
                }

                .html {
                    .loader {
                        position: relative;
                        overflow: visible;

                        .inloader {
                            height: 100%;
                            width: 92%;
                            background: red;
                            border-radius: 4vw;
                            position: relative;
                            overflow: visible;

                            .perc {
                                position: absolute;
                                top: -250%;
                                right: 0;
                                font-size: 1vw;
                                font-weight: 600;
                            }
                        }
                    }
                }

                .css {
                    .loader {
                        position: relative;
                        overflow: visible;

                        .inloader {
                            position: relative;
                            overflow: visible;
                            height: 100%;
                            width: 87%;
                            background: red;
                            border-radius: 4vw;

                            .perc {
                                position: absolute;
                                top: -250%;
                                right: 0;
                                font-size: 1vw;
                                font-weight: 600;
                            }
                        }
                    }
                }

                .js {
                    .loader {
                        position: relative;
                        overflow: visible;

                        .inloader {
                            height: 100%;
                            width: 73%;
                            background: red;
                            border-radius: 4vw;
                            position: relative;
                            overflow: visible;

                            .perc {
                                position: absolute;
                                top: -250%;
                                right: 0;
                                font-size: 1vw;
                                font-weight: 600;
                            }
                        }
                    }
                }

                .react {
                    .loader {
                        position: relative;
                        overflow: visible;

                        .inloader {
                            height: 100%;
                            position: relative;
                            overflow: visible;
                            width: 63%;
                            background: red;
                            border-radius: 4vw;

                            .perc {
                                position: absolute;
                                top: -250%;
                                right: 0;
                                font-size: 1vw;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }

            .prof {
                height: 100%;
                width: 50%;

                .head {
                    text-align: center;
                    padding-top: 8vw;
                    text-transform: uppercase;
                }

                .container {
                    display: flex;
                    gap: 6.9vw;
                    margin-top: 6.5vw;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    .skiller {
                        height: 8vw;
                        width: 8vw;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        border: 0.4vw solid rgba(255, 255, 255, 0.498);
                        font-size: large;
                        font-weight: 700;
                        position: relative;
                        overflow: hidden;

                        .text {
                            position: relative;
                            z-index: 10;
                        }
                    }

                    .comm {
                        .filler {
                            position: absolute;
                            height: 69%;
                            width: 100%;
                            background: var(--secondary-color);
                            bottom: 0;
                            border-radius: 1vw;
                            scale: 1
                        }
                    }

                    .creat {
                        .filler {
                            position: absolute;
                            height: 74%;
                            width: 100%;
                            background: var(--secondary-color);
                            bottom: 0;
                            border-radius: 1vw;
                            scale: 1
                        }
                    }

                    .prob {
                        .filler {
                            position: absolute;
                            height: 88%;
                            width: 100%;
                            background: var(--secondary-color);
                            bottom: 0;
                            border-radius: 1vw;
                            scale: 1
                        }
                    }

                    .team {
                        .filler {
                            position: absolute;
                            height: 50%;
                            width: 100%;
                            background: var(--secondary-color);
                            bottom: 0;
                            border-radius: 1vw;
                            scale: 1
                        }
                    }

                    .text1,
                    .text2,
                    .text3,
                    .text4 {
                        font-size: 1vw;
                        font-weight: 700;
                        position: absolute;
                        text-transform: uppercase;
                    }

                    .text1,
                    .text3 {
                        left: 26%;
                        bottom: -25%;
                    }

                    .text2,
                    .text4 {
                        right: 28.5%;
                        bottom: -25%;
                    }
                }
            }
        }
    }

    #liner1 {
        height: 10vw;
        position: relative;
        top: 7vw;
    }

    #page3 {
        height: 70vw;
        width: 100vw;
        margin-top: 15vw;

        .header {
            font-size: 4vw;
            font-weight: 600;
            text-align: center;
            position: relative;

            h2:hover {
                font-style: italic;
            }

            h2 {
                position: relative;
                z-index: 10;
            }

            .wheel {
                display: flex;
                position: absolute;
                height: 30%;
                width: 100%;
                top: 40%;
                background: var(--secondary-color);
                opacity: 0;
                transition: all 0.3s ease;

                .cont {
                    color: #000;
                    display: flex;
                    align-self: center;
                    gap: 1vw;
                    margin-left: 2vw;
                    margin-right: 2vw;
                    overflow: hidden;
                    flex-shrink: 0;
                    opacity: 0;
                    scale: 0;
                    transition: all 0.3s ease;

                    h4 {
                        font-size: 1vw;
                    }
                }

                .hidder {
                    position: absolute;
                    height: 100%;
                    width: 50%;
                    margin: auto;
                    left: 25%;
                    background: linear-gradient(to left, rgba(255, 0, 0, 0.415), var(--secondary-color), rgba(255, 0, 0, 0.457));
                }
            }

        }

        .header:hover .cont {
            animation: scroller 15s infinite forwards linear;
            opacity: 1;
            scale: 1;
        }

        .header:hover .wheel {
            opacity: 1;
            scale: 1
        }

        .pinner {
            height: 100%;
            min-width: 400vw;
            display: flex;
            gap: 10vw;
            margin-bottom: 10vw;

            .projectCont2,
            .projectCont1,
            .projectCont3,
            .projectCont4,
            .projectCont5,
            .projectCont6 {
                height: 40vw;
                width: 70vw;
                margin-top: 10vw;
                margin-left: 15vw;
                transform: rotate(-7deg);
                border-radius: 1vw;
                flex-shrink: 0;
                transition: all 0.3s ease;

                .image {
                    margin-top: 3vw;
                    box-shadow: 0 0 10px rgba(23, 255, 2, 0.351), 0 0 20px rgba(0, 0, 0, 0.523), 0 0 40px rgb(255, 0, 0);
                    position: relative;
                    height: 100%;
                    width: 100%;
                    border-radius: 1vw;
                    overflow: hidden;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .likha {
                    width: 100%;
                    text-align: center;
                    /* transform: rotate(7deg); */

                    a {
                        text-decoration: none;
                        color: white;
                        font-size: 3vw;
                        font-weight: 700;
                    }
                }
            }
        }


    }

    #page4 {
        height: 100vh;
        width: 100%;
        margin-top: 15vw;
        display: flex;
        align-items: center;
        justify-content: center;

        #actualpage4 {
            min-height: 100vh;
            /* margin-bottom: 50vw; */
            width: 100%;
            background: #1a1a1a;
            clip-path: circle(var(--clip) at 50% 50%);

            h3 {
                font-size: 2vw;
                font-weight: 700;
                text-transform: uppercase;
                color: rgb(255, 255, 255);
                position: relative;
                z-index: 10;
                top: 48%;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                position: relative;
                top: 25vw;
            }

            .headop {
                width: 100%;
                text-align: center;
                font-size: 2vw;
                font-weight: 500;
                margin-top: 2vw;
                margin-bottom: 3vw;
                display: none;
                opacity: 0;

                h1 {
                    position: relative;
                    z-index: 12;
                }

                .wheel {
                    display: flex;
                    position: absolute;
                    height: 30%;
                    width: 100%;
                    top: 40%;
                    background: var(--secondary-color);
                    opacity: 0;
                    transition: all 0.3s ease;

                    .cont {
                        color: #000;
                        display: flex;
                        align-self: center;
                        gap: 1vw;
                        margin-left: 2vw;
                        margin-right: 2vw;
                        overflow: hidden;
                        flex-shrink: 0;
                        opacity: 0;
                        scale: 0;
                        transition: all 0.3s ease;

                        h4 {
                            font-size: 1vw;
                        }
                    }

                    .hidder {
                        position: absolute;
                        height: 100%;
                        width: 50%;
                        margin: auto;
                        left: 25%;
                        background: linear-gradient(to left, rgba(255, 0, 0, 0.415), var(--secondary-color), rgba(255, 0, 0, 0.457));
                    }
                }
            }

            .headop:hover .cont {
                animation: scroller 15s infinite forwards linear;
                opacity: 1;
                scale: 1;
            }

            .headop:hover .wheel {
                opacity: 1;
                scale: 1
            }

            .topmovs {
                width: 100%;
                display: flex;
                flex-direction: column;
                display: none;
                opacity: 0;
                padding-bottom: 2vw;


                .topmov {
                    color: rgba(255, 255, 255, 0.594);
                    position: relative;
                    height: 8vw;
                    width: 100%;
                    border-bottom: 2px solid #000;
                    display: flex;
                    align-items: center;
                    text-align: left;
                    gap: 4vw;
                    /* overflow: hidden; */
                    justify-content: space-between;

                    h2 {
                        font-size: 4vw;
                        position: relative;
                        z-index: 3;
                    }

                    .photu {
                        height: 12vw;
                        width: 24vw;
                        position: absolute;
                        border-radius: 2vw;
                        overflow: hidden;
                        opacity: 0;
                        /* border: 1px solid #000; */
                        overflow: hidden;
                        transition: all 0.3s ease;
                        z-index: 3;
                        scale: 0;

                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }
                }

                .topmov::after {
                    z-index: 1;
                    content: "";
                    position: absolute;
                    left: -100%;
                    height: 8vw;
                    width: 100%;
                    opacity: 0;
                    background-color: black;
                    transition: all 0.5s ease;
                }

                .topmov:hover::after {
                    left: 0;
                    opacity: 1;

                }

                .topmov:hover {
                    color: white
                }

                .topmov:hover .photu {
                    opacity: 1;
                    scale: 1
                }
            }
        }
    }

    footer {
        padding: 3vw;
        justify-content: space-between;
        background-color: #000000;
        height: 10vw;

        .footer-first {
            font-size: 1.5vw
        }

        .flex {
            display: flex;
            justify-content: space-around;

            ul {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 0.5vw;

                li {
                    color: rgba(255, 255, 255, 0.517);
                    cursor: pointer;
                }

                li:hover {
                    color: white;
                    text-decoration: underline;
                }
            }
        }

        .text-center {
            color: gray;
            margin: 50px;
            text-align: center;
        }
    }
}






.particle {
    position: absolute;
    font-size: 24px;
    user-select: none;
    animation: fly 700ms ease-out forwards;
    pointer-events: none;
}

@keyframes fly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.5) rotate(360deg);
    }
}

@keyframes scroller {
    from {}

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