@import url("https://fonts.googleapis.com/css?family=Be+Vietnam+Pro:wght@300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Be Vietnam pro", sans-serif;
}
#wrapper {
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 10px;
  padding-right: 10px;
}
:root {
  --bgOrange: #e84949;
}

/* //screen */
@media only screen and (min-width: 1200px) {
    .container {
        width: 1200px;
        margin: 0 auto;
      }
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
      
        padding-top: 1rem;
      }
      .logo {
        width: 40px;
      }
      .logo-container {
        display: flex;
        align-items: center;
        justify-content: baseline;
      }
      .logo-text {
        margin-left: -0.2rem;
        font-size: 28px;
      }
      .nav-item {
        display: flex;
        gap: 2rem;
        padding: 0 4rem;
      }
      .nav-item div {
        font-size: 20px;
        font-weight: 500;
        cursor: pointer;
      }
      .nav-item div a {
        color: black;
      }
      
      a {
        text-decoration: none;
      }
      .nav-item div:hover {
        font-weight: bold;
        transition: all 0.8s;
      }
      
      .hero-section {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: baseline;
        gap: 5rem;
        margin: 4rem auto;
        padding: 0 10rem;
        padding-bottom: 8rem;
      }
      .faded-text {
        padding: 0 10rem;
        position: absolute;
        user-select: none;
        /* font-size: 5em; */
        font-size: 7em;
      
        color: rgb(231, 231, 231);
        bottom: -17%;
        left: -5%;
        font-weight: bold;
        transition: all 3s;
      }
      .hero-section-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
      }
      .hero-section-heading {
        font-size: 35px;
        color: #343d68;
        font-weight: 500;
      }
      .role {
        color: #4e45d4;
        font-weight: 800;
      }
      .hero-section-sub-heading {
        font-size: 45px;
        line-height: 45px;
      }
      .hero-section-description {
        margin-top: 1rem;
        width: 70%;
        font-weight: 500;
      }
      .btn-pink {
        position: relative;
        background-color: #e84949;
        padding: 0.8rem 2.3rem;
        color: white;
        font-size: 18px;
        box-shadow: 5px 5px 7px 0px #8a37373f;
        z-index: 1;
        width: 11rem;
        display: flex;
        justify-content: center;
      }
      .btn-pink:hover {
        color: black;
        border: solid 3px var(--bgOrange);
        transition: all 0.8s;
      }
      .btn-pink::before {
        content: "";
        background-color: #e4e2e2;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: scaleX(0);
        transform-origin: left;
        /* transform-origin: right;    */
      
        transition: transform 0.8s;
        z-index: -1;
      }
      .btn-pink:hover::before {
        transform: scaleX(1);
      }
      .hero-section-right {
        position: relative;
      }
      .absolute {
        position: absolute;
      }
      .user-image {
        padding: 2.5rem;
        filter: grayscale(1);
        transition: all 1s;
        animation: scaleImage 5s linear infinite;
      }
      .user-image img {
        z-index: -9;
      }
      @keyframes scaleImage {
        0% {
          box-shadow: 3px 3px 10px black;
          filter: grayscale(0);
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
          filter: grayscale(1);
        }
        100% {
          box-shadow: 3px 3px 10px black;
          transform: scale(1);
          filter: grayscale(0);
        }
      }
      .icons-dots {
        z-index: 9;
        bottom: -1rem;
        right: 0;
        animation-name: dotsAnimation;
        animation-duration: 5s;
        animation-iteration-count: infinite;
      }
      @keyframes dotsAnimation {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-15px);
        }
        100% {
          transform: translateY(0px);
        }
      }
      .icons-cube {
        z-index: 9;
        top: -2em;
        right: 1em;
        animation-name: cubeRotate;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      @keyframes cubeRotate {
        0% {
          transform: rotatey(0deg) translateY(0px);
        }
        50% {
          transform: rotatey(180deg) translateY(-12px);
        }
        100% {
          transform: rotatey(360deg) translateY(0px);
        }
      }
      .icons-circle {
        z-index: 9;
        left: 0;
        bottom: 0;
        animation-name: shakeEffect;
        animation-duration: 6s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
      @keyframes shakeEffect {
        50% {
          left: 5%;
          bottom: 10%;
        }
      }
      .icons-zigzag {
        z-index: 9;
        top: 1.5rem;
        left: -0.3rem;
        animation: zigzagAnimation 5s ease-in infinite;
      }
      @keyframes zigzagAnimation {
        50% {
          left: 5%;
          top: 2%;
        }
      }
      .icons-plus {
        z-index: 9;
        top: -0.8rem;
        left: 50%;
        animation: plusAnimation 5s ease-in infinite;
      }
      @keyframes plusAnimation {
        50% {
          top: 3%;
          left: 48%;
        }
      }
      
      .project-section {
        background-color: rgb(231 231 231);
        margin: 4rem;
      }
      .page-header {
        color: var(--bgOrange);
        font-size: 90px;
        text-align: center;
        padding-top: 30px;
      }
      .project-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem 0;
      
        display: flex;
        flex-direction: column;
        gap: 120px;
      }
      .project-card {
        width: 90%;
        height: 550px;
        background-image: url(Project1.png);
      
        background-size: cover;
        position: relative;
        box-shadow: 0px 0px 40px #1f1f1f;
      }
      .project-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #1f1f1f9a;
        /* transform: scaleX(1); */
        z-index: 0;
      }
      .project-card::before {
        content: "";
        position: absolute;
        background: linear-gradient(45deg, #343d68, #343d68be, #343d687c);
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      
        transform: scaleX(0);
        transform-origin: left;
        transition: all 0.4s;
      }
      .project-card:hover::before {
        transform: scaleX(1);
      }
      
      .project-number {
        position: absolute;
        font-size: 200px;
        font-weight: 600;
        color: white;
        z-index: 10;
        /* display: none; */
        opacity: 0;
      }
      .project-card:hover .project-number {
        /* display: block; */
        opacity: 1;
      }
      .project-number-left {
        right: -40px;
        top: -45px;
      }
      .project-number-right {
        left: -40px;
        top: -45px;
      }
      .project-content {
        position: absolute;
        display: flex;
        flex-direction: column;
        color: white;
        padding: 2em;
        bottom: 20%;
        z-index: 5;
        gap: 1em;
        transition: all 1s;
      }
      
      .project-content-left {
        right: 10%;
      }
      .project-content-right {
        left: 10%;
      }
      .project-skill-container {
        width: 60%;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .project-skill {
        width: 40px;
      }
      .project-heading {
        font-size: 50px;
        font-weight: bold;
        line-height: 3rem;
      }
      .project-sub-heading {
        width: 70%;
        font-size: 16px;
        font-style: italic;
      }
      .btn-group {
        display: flex;
        gap: 0.9rem;
        align-items: center;
      }
      .btn-project:hover {
        border: none;
      }
      .icon {
        cursor: pointer;
        color: white;
        font-size: 35px;
      }
      .icon:hover {
        color: var(--bgOrange);
      }
      .project-card:hover .project-content {
        transform: scale(1.1);
      }
      
      #project1 {
        background-image: url(Project1.png);
      }
      #project2 {
        margin-left: 120px;
        background-image: url(Project2.png);
      }
      #project3 {
        background-image: url(Project3.png);
      }
      #project4 {
        margin-left: 120px;
        background-image: url(Project4.png);
      }
      /* .skills-logo
      {
          width: 60px;
      } */
      .skills-container {
        position: relative;
        display: flex;
        padding: 5rem;
        margin: 10rem auto;
        gap: 30px;
      }
      .skill-container-left {
        width: 50%;
        display: flex;
        flex-direction: column;
      }
      .skill-container-right {
        display: flex;
        flex-wrap: wrap;
        width: 35%;
        position: relative;
        gap: 2rem;
        justify-content: center;
        left :10%;
      }
      .skill-faded-text {
        position: absolute;
        font-size: 15em;
        font-style: bold;
        color: rgb(231, 231, 231);
        bottom: -29.5%;
        right: -12%;
        user-select: none;
        overflow-y: hidden;
      }
      .blob-style {
        z-index: -5;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: blobAnimation 3s linear infinite;
      }
      @keyframes blobAnimation {
        50% {
          top: 54%;
          left: 46%;
        }
      }
      .skills-logo {
        width: 90px;
        transition: all 0.5s;
      }
      .skills-logo:hover {
        transform: scale(1.2);
      }
      .skill-heading {
        font-size: 50px;
        font-style: bold;
        color: var(--bgOrange);
        line-height: 50px;
      }
      .caps {
        font-size: 90px;
      }
      .skill-sub-heading {
        margin-top: 1rem;
        width: 85%;
        text-align: justify;
      }
      .skill-sub-heading p {
        margin: 15px 0;
      }
      .contactus-form-container {
        width: 100%;
        background-color: rgb(231, 231, 231);
      }
      .contactus-heading {
        font-size: 5em;
        color: var(--bgOrange);
        padding-top: 2rem;
      }
      .contactus-sub-heading {
        font-size: 3rem;
        color: #343d68aa;
        text-transform: capitalize;
      }
      .contactus-form-container {
        margin-top: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .form {
        display: flex;
        flex-direction: column;
        gap: 30px;
        width: 70%;
        margin: 2rem 5rem;
      }
      .formfield-container {
        width: 100%;
      }
      .formfield {
        width: 100%;
        height: 42px;
        padding: 0 2rem;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #1f1f1f;
        font-weight: 500;
        border: none;
        margin-top: 27px;
      }
      .formfield-textarea {
        height: auto;
        padding-top: 1rem;
      }
      #submit-btn {
        border: none;
        font-size: 1.4rem;
        margin: 1rem 0;
        width: auto;
      }
      #submit-btn:hover {
        scale: 0.9;
      }
      .submit-icon {
        padding: 0 1rem;
        font-size: 1.5rem;
      }
      footer {
        position: relative;
        margin-top: -1px;
        background-color: #343d68;
        padding: 5rem;
      }
      .footer-wrapper {
        display: flex;
        gap: 1rem;
        padding: 1.2rem;
        justify-content: space-between;
        align-items: center;
      }
      .footer-faded-text {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #535c87;
        user-select: none;
        font-size: 5em;
      }
      .link-wrapper {
        display: flex;
        gap: 1.2rem;
      }
      .link-wrapper div a {
        color: white;
        text-decoration: none;
      }
      .link-wrapper div a:hover {
        color: var(--bgOrange);
      }
      .icon-wrapper {
        display: flex;
        gap: 1rem;
      }
      
  }





  /* //phone */
  @media only screen and (min-width: 100px) and (max-width: 1200px) 
  {
    .container {
        width: 100vw;
        display: flex;
        margin-bottom: 20px;
      }
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.2rem;
      }
      .logo {
        width: 15px;
      }
      .logo-container {
        display: flex;
        align-items: center;
        justify-content: baseline;
      }
      .logo-text {
        margin-left: -0.2rem;
        font-size: 10px;
      }
      .nav-item {
        display: flex;
        gap: 0.5rem;
        padding-left:4rem;
      }
      .nav-item div {
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
      }
      .nav-item div a {
        color: black;
      }
      
      a {
        text-decoration: none;
      }
      .nav-item div:hover {
        font-weight: bold;
        transition: all 0.8s;
      }
      .hero-section {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        justify-content: baseline;
        padding-bottom: 2rem;
      }
      .faded-text {
        display:none;
      }
      .hero-section-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .hero-section-heading {
        font-size: 30px;
        color: #343d68;
        font-weight: 700;
        margin-bottom: 20px;
        align-items: center;
      }
      .role {
        margin-top:3rem ;
        color: #4e45d4;
        font-weight: 800;
        font-size: 20px;
      }
      .hero-section-sub-heading {
        font-size: 30px;
        line-height: 35px;
        text-align: center;
      }
      .hero-section-description {
        display: flex;
        margin-top: 1rem;
        font-size: small;
        width: 70%;
        font-weight: medium;
        margin-bottom: 20px;
        text-align: center;
        align-items:center;
        
      }
      .btn-pink {
        position: relative;
        border-radius: 20px;
        background-color: #e84949;
        padding: 0.8rem 2.3rem;
        color: white;
        font-size: 18px;
        box-shadow: 5px 5px 7px 0px #8a37373f;
        z-index: 1;
        width: 11rem;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
      }
      .btn-pink:hover {
        color: black;
        border: solid 3px var(--bgOrange);
        transition: all 0.8s;
        border-radius:20px;
      }
      .btn-pink::before {
        content: "";
        background-color: #e4e2e2;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.8s;
        z-index: -1;
        border-radius:20px;
      }
      .btn-pink:hover::before {
        transform: scaleX(1);
        border-radius:20px;
      }
      .hero-section-right {
        position: relative;
        z-index: -20;
        opacity: 0.9;
      }
      .absolute {
        position: absolute;
      }
      .user-image {
        padding: 2.5rem;
        filter: grayscale(1);
        transition: all 1s;
        max-width: fit-content;
        animation: scaleImage 5s linear infinite;
      }
      .user-image img {
        z-index: -29;
      }
      @keyframes scaleImage {
        0% {
          box-shadow: 3px 3px 10px black;
          filter: grayscale(0);
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
          filter: grayscale(1);
        }
        100% {
          box-shadow: 3px 3px 10px black;
          transform: scale(1);
          filter: grayscale(0);
        }
      }
      .icons-dots {
        z-index: 9;
        bottom: -1rem;
        right: 0;
        animation-name: dotsAnimation;
        animation-duration: 5s;
        animation-iteration-count: infinite;
      }
      @keyframes dotsAnimation {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-15px);
        }
        100% {
          transform: translateY(0px);
        }
      }
      .icons-cube {
        z-index: 9;
        top: -2em;
        right: 1em;
        animation-name: cubeRotate;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      @keyframes cubeRotate {
        0% {
          transform: rotatey(0deg) translateY(0px);
        }
        50% {
          transform: rotatey(180deg) translateY(-12px);
        }
        100% {
          transform: rotatey(360deg) translateY(0px);
        }
      }
      .icons-circle {
        z-index: 9;
        left: 0;
        bottom: 0;
        animation-name: shakeEffect;
        animation-duration: 6s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
      @keyframes shakeEffect {
        50% {
          left: 5%;
          bottom: 10%;
        }
      }
      .icons-zigzag {
        z-index: 10;
        top: 1.5rem;
        left: -0.3rem;
        animation: zigzagAnimation 5s ease-in infinite;
      }
      @keyframes zigzagAnimation {
        50% {
          left: 5%;
          top: 2%;
        }
      }
      .icons-plus {
        z-index: 9;
        top: -0.8rem;
        left: 50%;
        animation: plusAnimation 5s ease-in infinite;
      }
      @keyframes plusAnimation {
        50% {
          top: 3%;
          left: 48%;
        }
      }

      .project-section {
        background-color: rgb(231 231 231);
        margin-top: 4rem;
        width: 100vw;
      }
      .page-header {
        color: var(--bgOrange);
        font-size: 40px;
        font-weight: bold;
      }
      .project-container {
      
        display: flex;
        flex-direction: column;
        gap:50px;
      }
      .project-card {
        width: 100%;
        height: 300px;
        background-image: url(Project1.png);
      
        background-size: cover;
        position: relative;
        box-shadow: 0px 0px 40px #1f1f1f;
      }
      .project-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #1f1f1f9a;
        z-index: 0;
      }
      .project-card::before {
        content: "";
        position: absolute;
        background: linear-gradient(45deg, #343d68, #343d68be, #343d687c);
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      
        transform: scaleX(0);
        transform-origin: left;
        transition: all 0.4s;
      }
      .project-card:hover::before {
        transform: scaleX(1);
      }
      .project-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        color: white;
        padding: 2em;
        position: absolute;
        z-index: 5;
        transition: all 0.4s;
      }
      
      .project-skill-container {
        max-width: 60%;
        width: fit-content;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        transition: all 0.2s;
        border-radius: 5px;
    }

      .project-skill {
        width: 15px;
      }
      .project-heading {
        font-size: 20px;
        font-weight: bold;
      }
      .project-sub-heading {
        font-size: 16px;
        font-style: italic;
      }
      .btn-group {
        display: flex;
        align-items: center;
      }
      .btn-project:hover {
        border: none;
      }
      .icon {
        cursor: pointer;
        color: white;
        font-size: 15px;
      }
      .icon:hover {
        color: var(--bgOrange);
      }
      .project-card:hover .project-content {
        transform: scale(1.1);
      }
      
      #project1 {
        background-image: url(Project1.png);
      }
      #project2 {
        background-image: url(Project2.png);
      }
      #project3 {
        background-image: url(Project3.png);
      }
      #project4 {
        background-image: url(Project4.png);
      }


      /* ***************skillll********* */
   
       .skills-container {
        flex-direction: column;
        position: relative;
        display: flex;
        margin-top: 15px;
      }
      .skill-container-left {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .skill-container-right {
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        position: relative;
        gap: 1rem;
        justify-content: center;
      }
      .skill-faded-text {
        display: none;
      }
      .blob-style {
        height: 200px;
        z-index: -5;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: blobAnimation 3s linear infinite;
      }
      @keyframes blobAnimation {
        50% {
          top: 54%;
          left: 46%;
        }
      }
      .skills-logo {
        width: 60px;
        transition: all 0.5s;
      }
      .skills-logo:hover {
        transform: scale(1.2);
      }
      .skill-heading {
        font-size: 50px;
        font-style: bold;
        color: var(--bgOrange);
        line-height: 50px;
      }
      .caps {
        font-size: 50px;
      }
      .skill-sub-heading {
        margin-top: 0.5rem;
        width: 85%;
        font-size: small;
        text-align: justify;
      }
      .skill-sub-heading p {
        margin: 15px 0;
      }

      /* //contact me */

      .contactus-form-container {
        width: 100%;
        background-color: rgb(231, 231, 231);
        
      }
      .contactus-form-container .container{
        display: flex;
        flex-direction: column;
       
      }
      .contactus-heading {
        font-size: 2em;
        color: var(--bgOrange);
        padding-top: 1rem;
        margin: 0 auto;
        margin-bottom: 10px;
        
      }
      .contactus-sub-heading {
        width: 90%;
        font-size: 1rem;
        color: #343d68aa;
        text-transform: capitalize;
        margin: auto;
        text-align: center;
      }
      .form {
        display: flex;
        flex-direction: column;
        max-width: 90%;
        min-width: none;
      }
      .formfield-container {
        width: 100%;
      }
      .formfield {
        width: 100%;
        height: 42px;
        padding: 0 2rem;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #1f1f1f;
        font-weight: 500;
        border: none;
        margin-top: 27px;
      }
      .formfield-textarea {
        height: auto;
        padding-top: 0.5rem;
        margin-bottom:10px ;
      }
      #submit-btn {
        border: none;
        font-size: 1.4rem;
        width: 100%;
        margin:0 auto;
      }
      #submit-btn:hover {
        scale: 0.9;
      }
      .submit-icon {
        padding: 0 1rem;
        font-size: 1.5rem;
      }
      footer {
        width: 100%;
        position: relative;
        display: flex;
        background-color: #343d68;
        padding: 5rem;
        margin: 0 auto;
        height: 200px;
        flex-wrap: wrap;
      }
      .footer-faded-text {
        display:none;
      }
      .link-wrapper {
        display: flex;
        gap: 1rem;
       flex-wrap: wrap;
      }
      .link-wrapper div a {
        color: white;
        text-decoration: none;
        margin-bottom: 10px;
      }
      .link-wrapper div a:hover {
        color: var(--bgOrange);
      }
      .icon-wrapper {
        margin-top: 10px;
        display: flex;
        gap: 0.5rem;
       flex-wrap: wrap;
      left: 10px;
      margin-left: 60px;
      }
      

    }