* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* transition: all 1s; */
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
}

.move {
    opacity: 0.5;
}

.move:hover {
    opacity: 1;
}

body {
    background-color: #000000;
}

.menu-main {
    padding-top: 1vw;
    padding-bottom: 1vw;
    margin-left: 14vw;
    margin-right: 14vw;
    border-radius: 48px;
    background-color: #1D1D1F;
    position: absolute;
    z-index: 999;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 2%;
}

.menu-full {
    margin-left: 2vw;
    margin-right: 2vw;
    display: flex;
    justify-content: space-between;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    font-size: 1.2vw;
}

.menu-right {
    display: flex;
}

.menu-right p {
    background-color: transparent;
    padding-left: 3.2vw;
}

.design-timeless {
    display: flex !important;
    align-items:center;
    text-align: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    color: #ffffff;
}

#timeless {
    margin-top: 40vh;
    margin-bottom: 40vh;
    font-size: 10vw;
}

.s1 {
    margin-left: 14vw;
    margin-right: 14vw;
}

.intro-box {
    border-radius: 48px;
    padding: 48px;
    width: 100%;
    margin-top: 3.2vw;
    background-image: linear-gradient(to bottom left, #7C3DA1, #264183);
    /* background-size: 300% 300%;
    animation: color 12s ease-in-out infinite; */
}

@keyframes color {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

.intro-box h1 {
    font-family: henriette;
    font-weight: bold;
    color: #ffffff;
    font-size: 4vw;
}

.intro-box h1 span {
    color: #BB8FF5;
}

.intro-box p {
    font-family: 'Poppins', sans-serif;
    font-weight: light;
    background-color: transparent;
    color: #ffffff;
    font-size: 1.6vw;
    padding-top: 1.6vw;
}

.social-box {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    padding-top: 8vw;
}

.social-box div {
    background-color: transparent;
}

#contact-me span {
    background-color: transparent;
    border: 2px solid #ffffff;
    padding: 1.6vw;
    border-radius: 40px;
}

#contact-me span:hover {
    cursor: pointer;
}

#contact-me:hover {
    -webkit-animation: swing 8s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1s;
    animation-iteration-count: 1;
}

.social-icons {
    display: flex;
    justify-content: space-between;
}

.social-icons img {
    width: 4vw;
    margin-right: 1.6vw;
}

@-webkit-keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    /* 30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    } */
}
@keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    /* 30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    } */
    
}
.social-icons img:hover
{
    -webkit-animation: swing 8s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1s;
}

.s2 {
    margin-left: 16vw;
    margin-right: 16vw;
    padding-top: 120px;
    display: flex;
    justify-content: space-between;
}

.s2 img {
    width: 16vw;
}

.s2 div p {
    text-align: center;
    font-family: henriette;
    font-weight: bold;
    font-size: 1.6vw;
    padding-top: 1.6vw;
    color: #A1A1A6;
}

.s3 {
    margin-left: 16vw;
    margin-right: 16vw;
    padding-top: 120px;
    position: relative;
    z-index: -10;
}

.jump-to-dribbble {
    font-size: 1.2vw !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: bold;
    padding-bottom: 1.6vw;
}

.project-heading {
    width: 100%;
    background-image: linear-gradient(to bottom left, #2C1E41, #0C133A, #3D6AA2);
    border-radius: 48px;
    padding: 48px;
}

.project-heading h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #ffffff;
    font-size: 4vw;
}

.project-heading p {
    font-family: 'Poppins', sans-serif;
    font-weight:100;
    color: #ffffff;
    font-size: 1.6vw;
    padding-top: 1.6vw;
    line-height: 2.4vw;
}

.project-cards-one,
.project-cards-two,
.project-cards-three {
    display: flex;
    justify-content: space-between;
    margin-left: 16vw;
    margin-right: 16vw;
    margin-top: 40px;
}

.project-cards-four {
    margin-left: 16vw;
    margin-right: 16vw;
    margin-top: 40px;
}

.card-left,
.card-right {
    padding: 48px;
    border-radius: 48px;
    background-color: #191724;
}

.card-left {
    margin-right: 1vw;
}

.card-right {
    margin-left: 1vw;
}

.card-left h1,
.card-right h1 {
    font-size: 2.4vw;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
}

.project-topic {
    display: flex;

}

.project-topic img {
    width: 2vw !important;
    margin-left: 1.6vw;
    opacity: 0.5;
}

.project-topic img:hover {
    cursor: pointer !important;
    opacity: 1;
}

.card-left p,
.card-right p {
    font-size: 1.2vw;
    padding-top: 1.6vw;
    padding-bottom: 1.6vw;
    line-height: 1.6vw;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

#project-tag {
    font-size: 1.2vw;
    padding-bottom: 3.2vw;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.card-left img,
.card-right img {
    width: 24vw;
    border-radius: 24px;
}

.show-iframe-clueshow,
.show-iframe-tidbids,
.show-iframe-mindspace {
    background-color: #000000;
    position: fixed;
    z-index: 1000;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 4vw;
    inset: 0;
    display: none;
    overflow: hidden;
}

.show-iframe-clueshow p span,
.show-iframe-tidbids p span,
.show-iframe-mindspace p span {
    color: #ffffff;
    margin-top: 1.6vw;
    padding: 1.6vw;
    font-family: 'Poppins', sans-serif;
}

.show-iframe-clueshow p:hover,
.show-iframe-tidbids p:hover,
.show-iframe-mindspace p:hover  {
    cursor: pointer;
}

.problems {
    margin-left: 16vw;
    margin-right: 16vw;
    margin-top: 120px;
    display: flex;
    position: relative;
    z-index: -10;
}

.problems-left {
    background-image: linear-gradient(to bottom left, #40805E, #5B5079);
    border-radius: 48px;
    padding: 48px;
}

.problems-left h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 4vw;
    background-color: transparent;
    color: #ffffff;
}

.problems-left h1 span {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 4vw;
    background-color: transparent;
    background: linear-gradient(to right, #40805E, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: color 8s linear infinite;
}

.problems-right {
    display: flex;
    padding: 48px;
    justify-content: center;
    align-items: center;
}

article {
    display: flex;
    background-color: transparent;
    justify-content: center;
  }
  
.letter {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 3.2vw;
    width: 3.2rem;
    height: 3.2rem;
    /* float: left; */
    /* display:block; */
    /* position:relative; */
    /* mix-blend-mode: lighten; */
    /*border-radius:50%;*/
    background-color: transparent;
  }

.s4 {
    margin-left: 16vw;
    margin-right: 16vw;
    margin-top: 120px;
    border-radius: 48px;
    background-image: linear-gradient(122deg,#671542,#C53017 51%,#FFAF2D) !important;
    background-size: 300% 300%;
    animation: color 12s ease-in-out infinite;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: -10;
}

.other-left {
    padding: 48px;
}

.other-left h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 4vw;;
    /* text-align: center; */
    color: #ffffff;
}

.other-right {
    padding: 48px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4vw 6vw;
}

/* .other-right div {
    text-align: center;
} */

.inticons {
    width: 3.2vw;
    margin-bottom: 1.6vw;
}

.inttext {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
}

footer {
    background-color: transparent;
}

.footer-box {
    margin-left: 16vw;
    margin-right: 16vw;
    margin-top: 120px;
}

.footer-social-icons {
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
    justify-content: center;
    display: flex;
}

.footer-icon {
    width: 3.2vw !important;
    margin: 0.8vw;
    cursor: pointer;
}

.footer-icon:hover
{
    -webkit-animation: swing 8s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1s;
}

.footer-para {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 40px;
}

@media (max-width: 1080px) {

    .problems {
        display: block;
    }

    .s4 {
        display: block;
    }

}

@media (max-width: 834px) {

    .project-cards-one,
    .project-cards-two,
    .project-cards-three {
        display: block;
    }

    .card-right {
        margin-top: 40px;
    }

    .social-icons {
        display:none;
    }

    .anim {
        display: none;
    }

}

@media (max-width: 744px) {

    .menu-main {
        margin-left: 4vw;
        margin-right: 4vw;
        top: 1%;
    }

    .menu-full {
        margin-left: 4vw;
        margin-right: 4vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
        font-size: 2.4vw;
    }

    .s1 {
        margin-left: 4vw;
        margin-right: 4vw;
        padding-top: 4.8vw;
    }

    .intro-box h1 {
        font-size: 4.8vw;
    }

    .intro-box p {
        font-size: 2.4vw;
    }

    .s2 {
        margin-left: 4vw;
        margin-right: 4vw;
        padding-top: 8vw;
        display: block;
    }

    .s2 div {
        text-align: center;
    }

    .s2 img {
        width: 40vw;
        text-align: center;
    }
    
    .s2 div p {
        font-size: 2.4vw;
        padding-top: 1.6vw;
        padding-bottom: 4.8vw;
    }

    .project-cards-one,
    .project-cards-two,
    .project-cards-three {
        margin-left: 4vw;
        margin-right: 4vw;
    }

    .project-cards-four {
        margin-bottom: 40px;
    }

    .project-cards-four {
        margin-left: 4vw;
        margin-right: 4vw;
    }

    .project-topic img {
        display: none;
    }
    
    .s3 {
        margin-left: 4vw;
        margin-right: 4vw;
        padding-top: 4px;
    }

    .s3 {
        margin-left: 4vw;
        margin-right: 4vw;
        padding-top: 8vw;
    }
    
    .project-heading h1 {
        font-size: 4.8vw;
    }
    
    .project-heading p {
        font-size: 2.4vw;
        line-height: 3.2vw;
    }
    
    .card-left h1,
    .card-right h1 {
        font-size: 4.8vw;
    }
    
    .card-left p,
    .card-right p {
        font-size: 2.4vw;
        line-height: 3.2vw;
    }
    
    #project-tag {
        font-size: 2vw;
        padding-bottom: 3.2vw;
    }
    
    .card-left img,
    .card-right img {
        width: 64vw;
        border-radius: 24px;
    }
    
    .other-left {
        padding: 48px;
    }
    
    .other-left h1 {
        font-size: 4.8vw;;
    }

    .problems {
        margin-left: 4vw;
        margin-right: 4vw;
        margin-top: 4vw;
    }

    .s4 {
        margin-left: 4vw;
        margin-right: 4vw;
        padding-top: 8vw;
    }

    .footer-box {
        margin-left: 4vw;
        margin-right: 4vw;
        margin-top: 4vw;
    }
    
    .footer-social-icons {
        padding-top: 4vw;
        padding-bottom: 2vw;
    }
    
    .footer-icon {
        width: 4.8vw !important;
        margin: 0.8vw;
    }
    
    .footer-para {
        font-size: 12px;
        line-height: 16px;
        padding-bottom: 40px;
    }

    .jump-to-dribbble {
        font-size: 1.6vw !important;
    }

}

.small-square {
    width: 18px;
    height: 18px;
    margin: 1px;
    background-color: #ffffff;
}

.staggering-grid-demo {
    width: 90px;
    display: flex;
    flex-wrap: wrap;
}

.anim svg {
    opacity: 0.2;
    position: fixed;
    z-index: -9;
}

.anim path {
    stroke-width: 1;
}