/* base rules */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}

/* resetting html font-size */

html {
  font-size: 62.5%; /* 10px = 1rem */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* setting up the body */

body {
  background: #f7f7f7;
  font-family: 'Poppins', sans-serif;
}

/* styling the header */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
}

p,
li,
a {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.6rem;
  /*16px=1.6rem*/
  /*line-height: 1.6;*/
  font-weight: 400;
  letter-spacing: 0.1rem;
  text-transform: capitalize;
}

a {
  text-decoration: none;
  /* color: black; */
}

li {
  list-style: none;
}

/* theme */

:root {
  --main-color: #000000;
  --span-color: #dda853;
  --supporting-color: #ebf3fe;
  --heading-span-color: #ff6c00;
  --font-color: #424242;
  --bg-color: #f7fcff;
  --heading-color: #000a19;
  --para-color: #504e4d;
  --h-color: #003b99;
  --btn-bg-color: #2506ad;
  --white-color: #ffffff;
  --btn-hover-bg-color: #1a047e;
  --footer-bg-color: #040d12;
  --btn-box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6);
}

/* layout */
.favicon {
  border-radius: 50%;
}

/* module/reusable */

.section-heading {
  color: var(--heading-color);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px;
  text-transform: capitalize;
  letter-spacing: 0.1rem;
}

.section-subheading {
  color: var(--heading-color);
}

.btn {
  margin-top: 1rem;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: 4em;
  color: var(--white-color);
  background: var(--btn-bg-color);
  box-shadow: var(--btn-box-shadow);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-family: 'Nunito', sans-serif;
}
/* scrollbar styling */
::-webkit-scrollbar {
  width: 1rem;
}
/* Track */
::-webkit-scrollbar-track {
  background: var(--supporting-color);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main-color);
  border-radius: 50px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--heading-color);
}
/* scrollbar styling ends */
/* header section starts here*/
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 6.5rem;
  background: var(--bg-color);
  box-shadow: 0 1px 4px rgba(146, 161, 176, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;

  & .logo {
    font-size: 1.9rem;
    font-weight: 750;
    text-decoration: none;
    color: var(--heading-color);
    display: flex;
    align-items: center;

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

    &:hover {
      color: var(--heading-span-color);
    }
  }

  & .navbar {
    padding-right: 5rem;

    & ul {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;

      & li {
        margin-left: 2.5rem;

        & a {
          font-weight: 700;
          position: relative;
          padding: 0.5rem 1.5rem;
          color: var(--main-color);
          -webkit-transition: color 0.2s ease;
          -moz-transition: color 0.2s ease;
          -ms-transition: color 0.2s ease;
          -o-transition: color 0.2s ease;
          transition: color 0.2s ease;

          &:hover,
          &.active {
            color: var(--h-color);
            border-bottom: 0.3rem solid var(--h-color);
            padding-bottom: 0.6rem 0;
          }
        }
      }
    }
  }
}
/* menu icon */
#menu {
  display: none;
  font-size: 3rem;
  color: var(--heading-color);
  cursor: pointer;
}
/* responsive media queries for header section */
@media (max-width: 768px) {
  #menu {
    display: block;
  }

  header {
    & .logo {
      font-size: 1.5rem;
    }
    & .navbar {
      position: fixed;
      top: 6.5rem;
      right: -120%;
      width: 70%;
      height: 100%;
      text-align: left;
      justify-content: flex-start;
      background: var(--btn-bg-color);

      & ul {
        flex-flow: column;
        padding: 1rem;

        & li {
          text-align: center;
          width: 100%;
          margin: 1rem 0;
          border-radius: 0.5rem;
          max-width: 26rem;

          & a {
            display: block;
            padding: 1.5rem;
            font-size: 1.5rem;
            text-align: left;
            color: var(--bg-color);

            &:hover,
            &.active {
              padding: 1rem;
              color: var(--white-color);
              -webkit-border-radius: 0.5rem;
              -moz-border-radius: 0.5rem;
              -ms-border-radius: 0.5rem;
              -o-border-radius: 0.5rem;
              border-radius: 0.5rem;
              border-bottom: 0.5rem solid var(--main-color);
            }
          }
        }
      }

      &.fa-times {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
      }

      &.nav-toggle {
        right: 0;
      }
    }
  }
}
/* responsive ends */
/* header section ends here */
/* home section starts here */

section {
  min-height: 100vh;
  padding: 2rem 9%;
}

.home {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  min-height: 100vh;

  & #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  & .content {
    flex: 1 1 40rem;
    z-index: 1;

    &::before {
      content: 'HELLO AND WELCOME';
      font-size: 24px;
      letter-spacing: 6px;
      font-weight: 600;
      color: var(--btn-hover-bg-color);
    }
    & h1 {
      font-size: 5rem;
      font-weight: 800;
      color: var(--btn-hover-bg-color);
      padding: 1rem 0;

      & span {
        color: var(--heading-span-color);
      }
    }

    & p {
      font-weight: 600;
      color: var(--heading-color);
      padding: 1rem 0;
      line-height: 1.5;

      & span {
        font-size: 2.5rem;
        color: var(--btn-bg-color);
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.04rem;
        padding: 1rem 0;
      }
    }

    & .btn {
      margin-top: 1rem;
      position: absolute;

      & i {
        margin-left: 0.3rem;
        font-size: 1.2rem;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
      }

      &:hover {
        background: var(--btn-hover-bg-color);
        cursor: pointer;

        & i {
          -webkit-transform: translateX(0.5em);
          -moz-transform: translateX(0.5em);
          -ms-transform: translateX(0.5em);
          -o-transform: translateX(0.5em);
          transform: translateX(0.5em);
        }
      }
    }
  }
  & .social {
    position: absolute;
    top: 73%;

    & .social-icons {
      padding: 0;
      margin: 0;

      & li {
        display: inline-block;
        padding: 0 1rem;
        margin-bottom: 1.4rem;

        & a {
          padding-top: 1.5rem;
          font-size: 3rem;
          display: inline-block;
          line-height: 0.44rem;
          color: var(--heading-color);
          width: 6rem;
          height: 6rem;
          text-align: center;
          margin-right: 0.625rem;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
            rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          -webkit-transition: all 0.2s linear;
          -moz-transition: all 0.2s linear;
          -ms-transition: all 0.2s linear;
          -o-transition: all 0.2s linear;
          transition: all 0.2s linear;

          &:hover,
          &:active,
          &:focus {
            color: var(--white-color);
          }
        }
      }
      & .linkedin:hover {
        background-color: #0a66c2;
      }
      & .github:hover {
        background-color: #333333;
      }
      & .twitter:hover {
        background-color: #1da1f2;
      }
      & .telegram:hover {
        background-color: #0088cc;
      }
      & .instagram:hover {
        background: linear-gradient(
          45deg,
          #f09433 0%,
          #e6683c 25%,
          #dc2743 50%,
          #cc2366 75%,
          #bc1888 100%
        );
      }
    }
  }
  & .image {
    flex: 1 1 40rem;
    z-index: 1;

    & img {
      gap: 1rem;
      width: 70%;
      /* height: auto; */
      margin-left: 6rem;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;

      &:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
      }
    }
  }
}
/* responsive  home section  */

@media only screen and (max-width: 1024px) {
  .home {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 3rem;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    width: 100%;
    text-align: center;

    & .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: -4rem;

      &::before {
        font-size: 1.8rem;
      }

      & h1 {
        font-size: 2.5rem;

        & span {
          font-size: 2.5rem;
        }
      }
      & p {
        font-size: 1.5rem;

        & span {
          font-size: 1.5rem;
        }
      }

      & .btn {
        margin-top: 20rem;
      }
    }

    & .social {
      padding: 0 1.5rem 0 1.5rem;
      position: relative;
      top: 100%;
    }
    & .image img {
      margin: -3rem 0 0 0;
    }
  }
}
/* responsive  home section ends */
/* home section ends here */
/* about section */

.about {
  min-height: 100vh;

  & .heading {
    font-size: 3rem;
    margin-top: 6rem;
    letter-spacing: 0.5rem;
    display: flex;
    justify-content: center;
  }

  & .row {
    display: flex;
    flex-direction: row;
    padding: 4rem;
    flex-wrap: wrap;
    gap: 2rem;

    & .image {
      text-align: center;
      flex: 1 1 35rem;

      & img {
        margin: 4rem;
        width: 30rem;
        height: auto;
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
        -webkit-border-radius: 5%;
        -moz-border-radius: 5%;
        -ms-border-radius: 5%;
        -o-border-radius: 5%;
        border-radius: 5%;
        mix-blend-mode: luminosity;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          mix-blend-mode: normal;
        }
      }
    }

    & .content {
      padding: 3rem;
      flex: 1 1 45rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      & h2 {
        font-size: 3rem;
        font-weight: 600;
        color: var(--heading-color);
      }

      & .tag {
        font-size: 2rem;
        font-weight: 500;
        color: var(--heading-color);
      }

      & p {
        margin-top: 1.5rem;
        color: var(--heading-color);
        font-weight: 500;
        line-height: 1.8;
      }

      & .box-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-weight: 400;

        & .box p {
          text-transform: none;

          & span {
            color: var(--btn-bg-color);
          }
        }
      }
    }
  }

  & .resumebtn {
    margin-top: 6rem;

    & .btn {
      padding: 1.5rem 3rem;
      background: var(--btn-bg-color);
      color: var(--white-color);
      box-shadow: var(--btn-box-shadow);
      -webkit-border-radius: 0.5em;
      -moz-border-radius: 0.5em;
      -ms-border-radius: 0.5em;
      -o-border-radius: 0.5em;
      border-radius: 0.5em;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;

      & span {
        font-weight: 600;
        letter-spacing: 0.05rem;
        text-transform: uppercase;
        font-size: 1.8rem;
      }

      & i {
        margin-left: 0.3rem;
        font-size: 1.2rem;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
      }

      &:hover {
        background: var(--btn-hover-bg-color);
        cursor: pointer;

        & i {
          -webkit-transform: translateX(0.5em);
          -moz-transform: translateX(0.5em);
          -ms-transform: translateX(0.5em);
          -o-transform: translateX(0.5em);
          transform: translateX(0.5em);
        }
      }
    }
  }
}

/* responsive about section */

@media only screen and (max-width: 1024px) {
  .about {
    padding: 2rem 1.5rem;

    & .row {
      flex-direction: column;
      gap: 2rem;
      padding: 0.5rem;
      margin-bottom: 7rem;

      & .image {
        margin-top: 2rem;

        & img {
          margin: 0 auto;
          width: 80%;
          height: auto;
          mix-blend-mode: normal;
        }
      }
      & .content {
        padding: 1rem;
        gap: 0.5rem;

        & .box-container {
          gap: 0.2rem;
        }
      }
    }
  }
}

/* responsive about section ends */

/* skills section  */
.skills {
  min-height: 100vh;
  background: linear-gradient(to bottom, #57059e, #4a00e0);

  & .heading {
    font-size: 3rem;
    color: var(--white-color);
    letter-spacing: 0.5rem;
    text-align: center;
    margin-top: 6rem;

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

  & .container {
    background: rgba(0, 0, 22, 0.4);
    color: var(--white-color);
    padding: 2rem;
    width: 90%;
    margin: 2rem auto;
    border-radius: 1rem;
    box-shadow: var(--box-shadow);

    & .skills-categories {
      display: flex;
      gap: 2.5rem;
      align-items: center;
      justify-content: center;
      margin: 0 0 2rem 30rem;
      height: 5rem;
      width: 45%;
      background-color: var(--heading-color);
      -webkit-border-radius: 0.5rem;
      -moz-border-radius: 0.5rem;
      -ms-border-radius: 0.5rem;
      -o-border-radius: 0.5rem;
      border-radius: 0.5rem;
    }

    & button {
      background: none;
      color: var(--white-color);
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      font-size: 1.5rem;
      font-weight: 600;
      cursor: pointer;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;

      &:hover {
        background-color: var(--btn-hover-bg-color);
        box-shadow: rgb(0, 2, 161) 0px 9px 38px, rgb(0, 2, 161) 0px 5px 2px;
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
      }
    }

    & .row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      flex-wrap: wrap;
      gap: 2rem;
    }

    & .bar {
      margin: 1rem 0;
      padding: 1rem;
      background: var(--heading-color);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
      -webkit-border-radius: 1rem;
      -moz-border-radius: 1rem;
      -ms-border-radius: 1rem;
      -o-border-radius: 1rem;
      border-radius: 1rem;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: rgb(0, 2, 161) 0px 19px 38px, rgb(0, 2, 161) 0px 15px 12px;
        background-color: var(--main-color);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }

      & .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 0.5rem;

        & img {
          font-size: 5.5rem;
        }
        & span {
          font-size: 1.5rem;
          font-weight: 500;
          color: var(--white-color);
          text-transform: uppercase;
          margin-top: 0.5rem;
        }
      }
    }
  }
}

/* skills section ends */

/* responsive skills section */
@media only screen and (max-width: 1024px) {
  /* skills section */
  .skills {
    margin: 0;
    padding: 1rem;

    & .container {
      width: 95%;
      padding: 1rem;
      margin: 1rem auto;

      & .skills-categories {
        margin: 0 auto;
        width: 100%;
      }

      & .row {
        grid-template-columns: repeat(2, 1fr);
        margin: 1rem auto;
        padding: 2rem 1.2rem 2rem 1.2rem;
        gap: 1rem;
      }
    }
  }
}

/* responsive skills section ends */

/* Education section */
.education {
  min-height: 100vh;

  & .heading {
    font-size: 3rem;
    margin-top: 6rem;
    display: flex;
    justify-content: center;

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

  & .quote {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 500;
    margin-top: 0.5rem;
  }

  & .box-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;

    & .box {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2rem;
      width: 75%;
      height: 15rem;
      padding: 1rem;
      margin: 1rem auto;
      box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
      -webkit-border-radius: 0.5rem;
      -moz-border-radius: 0.5rem;
      -ms-border-radius: 0.5rem;
      -o-border-radius: 0.5rem;
      border-radius: 0.5rem;
      position: relative;
      overflow: hidden;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      background: var(--bg-color);

      &:hover {
        box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
      }

      & .image {
        margin-right: 1rem;

        & img {
          width: 100%;
          height: 150px;
          object-fit: cover;
          position: relative;
        }
      }

      & .content {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        flex-wrap: wrap;
        flex: 1 1 70rem;

        & h3 {
          font-size: 1.5rem;
          margin-bottom: 0.5rem;
          font-weight: 600;
          color: var(--h-color);
          position: relative;
          text-align: left !important;
        }

        & p {
          font-size: 1.2rem;
          margin-bottom: 0.5rem;
          font-weight: 400;
          color: var(--p-color);
          position: relative;
          text-align: left !important;
        }

        & h4 {
          font-size: 1.2rem;
          margin-top: 0.5rem;
          color: green;
          position: relative;
          text-decoration: none;
        }
      }
    }
  }
}

/* education responsive */

@media only screen and (max-width: 1024px) {
  .education {
    margin: 0;

    & .box-container {
      & .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 30rem;
      }
    }
  }
}

/* project section */
.project {
  min-height: 100vh;
  background: linear-gradient(to bottom, #0a192f, #00002c);
  padding: 20px;

  & .heading {
    font-size: 3rem;
    letter-spacing: 0.5rem;
    margin-top: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;

    & span {
      color: #64ffda;
    }
  }

  & .quote {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 500;
    margin-top: 0.5rem;
    color: #d3d3d3;
  }

  & .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }

  & .projects {
    background: #112240;
    border-radius: 10px;
    overflow: hidden;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    & :hover {
      -webkit-transform: translateY(-5px);
      -moz-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      -o-transform: translateY(-5px);
      transform: translateY(-5px);
    }

    & img {
      width: 100%;
      height: 250px;
      object-fit: fill;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  }

  & .project-info {
    padding: 20px;
    /* text-align: center; */
    color: #ffffff;

    & h3 {
      font-size: 1.5rem;
      margin-bottom: 10px;
      color: #64ffda;
    }

    & p {
      font-size: 1rem;
      color: #a8b2d1;
      margin-bottom: 15px;
    }

    & a {
      display: inline-block;
      padding: 10px 15px;
      margin-right: 10px;
      font-size: 1rem;
      font-weight: bold;
      color: #ffffff;
      text-decoration: none;
      border-radius: 5px;
      background: #64ffda;
      transition: background 0.3s ease-in-out;

      &:hover {
        background: #52e0c4;
      }
    }
  }
}

.view-all-container {
  text-align: center;
  margin-top: 20px;
}

.view-all-btn {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.view-all-btn:hover {
  background-color: #45a049;
}

@media only screen and (max-width: 1024px) {
  .heading {
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
    margin-top: 4rem;
  }

  .quote {
    font-size: 1.2rem;
  }

  .box-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }

  .project img {
    height: 180px;
  }

  .info {
    padding: 15px;

    & h3 {
      font-size: 1.3rem;
    }

    & p {
      font-size: 1rem;
    }

    & a {
      padding: 8px 12px;
      font-size: 0.9rem;
    }
  }
}

/* contact section */
.contact {
  background: #e5ecfb;
  min-height: 60vh;

  & .heading {
    font-size: 3rem;
    letter-spacing: 0.5rem;
    margin-top: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--h-color);
    font-weight: 700;
    text-align: center;

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

  & .quote {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 500;
    margin-top: 0.5rem;
    color: var(--p-color);
  }
  & .container {
    max-width: 105rem; /* Set maximum width for the form */
    width: 100%;
    background: #fff;
    border-radius: 1.5rem;
    margin: 2rem 5rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);

    & .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2.5rem 2rem;

      & .image-box {
        max-width: 60%;
        margin-left: 4rem;

        & img {
          width: 100%;
          height: 40rem;
          position: relative;
        }
      }
      & form {
        width: 45%;
        margin-right: 3.5rem;

        & .form-group {
          display: flex;
          flex-direction: column;
          justify-content: center;

          & .field {
            position: relative;
            height: 5rem;
            display: flex;
            align-items: center;
            margin: 1rem 0;
            width: 100%;
          }
        }

        & i {
          position: absolute;
          top: 50%;
          left: 1.8rem;
          color: rgb(51, 51, 51);
          font-size: 1.7rem;
          pointer-events: none;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }

        & .field input,
        & .message textarea {
          width: 100%;
          height: 100%;
          outline: none;
          padding: 0 1.6rem 0 4.8rem;
          font-size: 1.6rem;
          font-family: 'Poppins', sans-serif;
          border-radius: 5px;
          border: 0.1rem solid rgb(51, 51, 51);
          background: #e5ecfb;

          &::placeholder {
            color: rgb(51, 51, 51);
          }
          &:focus {
            padding-left: 4.7rem;
            border: 0.2rem solid rgb(115, 3, 167);

            & ~ i {
              color: rgb(115, 3, 167);
            }
          }
        }
      }

      & .message {
        position: relative;
        margin: 1rem 0;
        width: 100%;

        & i {
          top: 2.5rem;
          font-size: 2rem;
          left: 1.5rem;
        }

        & textarea {
          min-height: 13rem;
          max-height: 23rem;
          max-width: 100%;
          min-width: 100%;
          padding: 1.2rem 2rem 0 4.8rem;

          &::-webkit-scrollbar {
            width: 0px;
          }
        }
      }
      & .button-area {
        display: flex;
        float: right;
        flex-direction: row-reverse;

        & button {
          color: var(--bg-color);
          border: none;
          outline: none;
          font-size: 1.8rem;
          cursor: pointer;
          border-radius: 5px;
          padding: 1.3rem 2.5rem;
          background: #2506ad;
          box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6);
          font-family: 'Nunito', sans-serif;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          transition: all 0.3s ease;

          & span {
            font-size: 1.7rem;
            padding: 1rem;
            display: none;
          }
          & i {
            position: relative;
            top: 0.6rem;
            left: 0.2rem;
            font-size: 1.5rem;
            color: var(--bg-color);
            cursor: pointer;
            margin-left: 0.3rem;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
          }

          &:hover {
            background: #421cecf5;

            & i {
              left: 0.8rem;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 900px) {
  .contact {
    min-height: 70vh;

    & .container {
      margin: 3rem 0 2rem 0;

      & .content {
        padding: 18px 12px;

        & .image-box {
          display: none;
        }

        & form {
          width: 100%;
          margin-right: 2rem;
        }
      }
    }
  }
}

/* footer section starts */
.footer {
  min-height: 0;
  padding-top: 0;
  background: var(--btn-bg-color);

  .box-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .box {
      flex: 1 1 25rem;
      margin: 2.5rem;

      h3 {
        font-size: 2.5rem;
        color: var(--white-color);
        padding-bottom: 1rem;
        font-weight: normal;
      }

      p {
        font-size: 1.5rem;
        color: var(--white-color);
        padding: 0.7rem 0;
        text-transform: none;

        i {
          padding-right: 1rem;
          color: var(--white-color);
        }
      }

      a {
        font-size: 1.5rem;
        color: rgb(238, 238, 238);
        padding: 0.3rem 0;
        display: block;

        &:hover {
          color: var(--white-color);
        }
      }

      .share {
        display: flex;
        flex-wrap: wrap;
        padding: 1rem 0;

        a {
          height: 4rem;
          width: 4rem;
          padding: 1rem;
          text-align: center;
          border-radius: 5rem;
          font-size: 1.7rem;
          margin-right: 1rem;
          transition: 0.2s;
          background: var(--bg-color);
          color: #02094b;
          border: none;

          &:hover {
            background: transparent;
            transform: scale(0.98);
            border: 0.1rem solid;
            color: var(--heading-span-color);
          }
        }
      }
    }
  }

  .credit {
    padding: 1rem 0 0 0;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: var(--white-color);
    border-top: 0.1rem solid;

    a {
      color: var(--white-color);
    }
  }

  .fa {
    color: #e90606;
    margin: 0 0.3rem;
    font-size: 1.5rem;
    animation: pound 0.35s infinite alternate;
  }
}

@-webkit-keyframes pound {
  to {
    transform: scale(1.1);
  }
}

@keyframes pound {
  to {
    transform: scale(1.1);
  }
}

@media (max-width: 450px) {
  .footer {
    .box-container {
      .box {
        margin: 1.5rem;

        p {
          padding: 0.7rem;
        }

        .share a {
          padding: 1.2rem;
        }
      }
    }
  }
}

/* footer section ends */