/* =============== 1240px ========== */
/* hero page */
@media (max-width: 78em) {
  .hero-back-grid-img {
    height: 15rem;
    width: 15rem;
  }

  .about-me-resume-a {
    font-size: 1.8rem;

    padding: 0.8rem 1.5rem;
  }
}

/* contact page */
@media (max-width: 1240px) {
  .contact-box-inner {
    width: 20rem;
  }
}

/* ======= 1140 ========== */

@media (max-width: 71em) {
  /* === hero ==== */
  .body {
    grid-template-columns: 22fr 78fr;
  }

  .hero-h1 {
    font-size: 4.8rem;
    font-weight: 400;
  }
  .hero-para {
    font-size: 4.2rem;
    font-variant: small-caps;
    /* line-height: 0.8; */
  }

  /* featured project */
  .featured-project-carosol {
    /* width: 70rem; */
    padding: 2rem 2rem;
  }
  /* about me */
  .about-me-grid {
    margin: 1.5rem auto;
  }

  .about-me-box {
    padding: 0;
  }
  .about-me-box-h3 {
    font-size: 3rem;
  }
  .about-me-box-p {
    font-size: 1.8rem;
  }

  /* contact page */
  .contact-box {
    margin: 4rem;
  }
  .contact-box-inner-ul {
    font-size: 1.5rem;
    border-radius: 5px;
    padding: 1.5rem 2rem;
  }

  .contact-box-inner:first-child {
    width: 30rem;
  }
}
/* ================================ */
/* ======= 1040px ===============*/
/* ============================= */

@media (max-width: 65em) {
  /* === nav ==== */
  .nav-img {
    height: 14rem;
  }

  .nav-text {
    font-size: 2rem;
  }

  .quick-links-text {
    font-size: 1.4rem;
  }
  .quick-links-icon {
    font-size: 3.2rem;
  }
  /* === hero ==== */

  .body {
    grid-template-columns: 22fr 78fr;
  }

  .hero {
    /* height: 80vh; */
    padding: 0 4rem;
  }

  .hero-back-grid-img {
    height: 12rem;
    width: 12rem;
  }

  .about-me-resume-a {
    font-size: 1.8rem;

    padding: 0.8rem 1.5rem;
  }

  .hero-h1 {
    font-size: 4.2rem;
    font-weight: 400;
  }
  .hero-para {
    font-size: 4rem;
    font-variant: small-caps;
  }
  .hero-button-p {
    font-size: 2rem;
  }

  /* featured project */
  .featured-project {
    margin-bottom: 5rem;
  }

  .featured-project-h2 {
    margin: 2rem 0;
    padding: 1.2rem 0.8rem;
  }

  .featured-project-carosol {
    width: 66rem;
    padding: 1rem 2rem;
  }

  .featured-project-carosol-fig {
    height: 25rem;
  }

  .featured-project-h3 {
    font-size: 2.2rem;
  }
  .featured-project-carosol-p {
    font-size: 1.4rem;
  }

  /* about me */

  .about-me-grid {
    grid-template-columns: 7fr 1fr;
    grid-template-rows: 5fr 1fr;

    margin: 1rem auto;
    padding: 0;
  }

  .about-me-box {
    padding: 0;
  }
  .about-me-box-h3 {
    font-size: 2.4rem;
  }
  .about-me-box-p {
    font-size: 1.5rem;
  }

  .about-me-skill {
    padding: 0;
  }
  .about-me-skill-li {
    height: 8rem;
    width: 8rem;
  }

  .about-me-resume-p {
    font-size: 1.2rem;
  }
  .about-me-resume-a {
    font-size: 1.2rem;
  }

  /* contact page */
  .contact-box {
    margin: 2rem;
  }
  .contact-box-inner {
    gap: 1.4rem;
  }
  .contact-box-inner-h4 {
    font-size: 1.4rem;
    letter-spacing: 0.6rem;
    padding: 1rem 0.6rem;
  }
  .contact-box-inner-ul {
    font-size: 1.2rem;
    border-radius: 5px;
    padding: 1rem 0.6rem;
  }
  .contact-box-inner-li {
    margin-top: 0.8rem;
  }

  .contact-links-icon {
    color: #000;
    font-size: 2.8rem;
  }

  .contact-box-inner:first-child {
    width: 25rem;
  }
}

/* ======= 900px ========== */

@media (max-width: 56em) {
  /* === nav ==== */
  .nav-img {
    height: 10rem;
  }

  .nav-list-item {
    gap: 1rem;
  }

  .nav-icon {
    font-size: 2.4rem;
  }

  .nav-text {
    font-size: 1.8rem;
  }

  .quick-links-text {
    font-size: 1rem;
  }
  .quick-links-icon {
    font-size: 2.8rem;
  }
  /* === hero ==== */

  .body {
    grid-template-columns: 22fr 78fr;
  }

  .hero {
    /* height: 80vh; */
    padding: 0 4rem;
  }

  .hero-back-grid-img {
    height: 10rem;
    width: 10rem;
  }

  /* .hero-h1 {
    font-size: 3rem;
  }
  .hero-para {
    font-size: 3rem;
  } */

  .hero-h1 {
    font-size: 4.2rem;
    font-weight: 400;
  }
  .hero-para {
    font-size: 4rem;
    font-variant: small-caps;
  }
  .hero-button-p {
    font-size: 2rem;
  }

  /* featured project */
  .featured-project {
    margin-bottom: 3rem;
  }

  .featured-project-h2 {
    margin: 1.6rem 0;
    padding: 1rem 0.6rem;
  }

  .featured-project-carosol {
    /* width: 55rem; */
    /* margin: 3rem 1rem; */
    padding: 2rem 2rem;
  }

  .featured-project-carosol-fig {
    height: 20rem;
  }

  .featured-project-h3 {
    font-size: 2rem;
  }
  .featured-project-carosol-p {
    font-size: 1rem;
  }

  .featured-project-carosol-btn {
    font-size: 2.4rem;
  }
  .featured-tags span {
    font-size: 0.6rem;
    letter-spacing: 0.2rem;
    padding: 0.4rem 0.4rem;
    border-radius: 3px;
  }
  /* about me */

  .about-me-grid {
    grid-template-columns: 6fr 1fr;
    grid-template-rows: 4fr 1fr;

    margin: 0 auto;
    padding: 0;
  }

  .about-me-box {
    padding: 0;
  }
  .about-me-box-h3 {
    font-size: 2.4rem;
  }
  .about-me-box-p {
    font-size: 1.2rem;
  }

  .about-me-skill {
    padding: 0;
  }
  .about-me-skill-li {
    height: 7rem;
    width: 7rem;
  }

  .about-me-resume-p {
    font-size: 1.2rem;
  }
  .about-me-resume-a {
    font-size: 1.2rem;

    padding: 0.8rem 1.5rem;
  }

  /* contact page */
  .contact-box {
    margin: 2rem;
  }
  .contact-box-inner {
    gap: 1rem;
    /* width: 15rem; */
  }
  .contact-box-inner-h4 {
    font-size: 1.2rem;
    letter-spacing: 0.4rem;
    padding: 0.8rem 0.6rem;
  }
  .contact-box-inner-ul {
    font-size: 1.2rem;
    border-radius: 5px;
    padding: 0.8rem 0.4rem;
  }
  .contact-box-inner-li {
    margin-top: 0.8rem;
  }

  .contact-links-icon {
    color: #000;
    font-size: 2rem;
  }

  .contact-box-inner:first-child {
    width: 25rem;
  }
}

/* ======= 700px - 44em ========== */
/* trail with 776 - 48.5 ==== this is fine*/
@media (max-width: 48.5em) {
  .body {
    display: block;
  }
  /* ======= for nav bar ============= */

  .nav {
    position: fixed;
    bottom: 0%;
    right: 0%;
    background-color: #fff;
    /* background-image: linear-gradient(#fff, #fff, #d0ddd5); */
    box-shadow: 0 0 0.8rem rgba(91, 135, 108, 0.4);
    /* border-right: 0.2rem solid rgba(91, 135, 108, 0.2); */
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    z-index: 999999 !important;

    transform: translate(-40%, -30%);
  }

  .nav-img {
    height: 4rem;
    border-radius: 50%;
    border: 2px solid #14532d;
  }

  .nav-img:hover {
    box-shadow: 0 0 0.5rem 1rem rgba(91, 135, 108, 0.1);
  }

  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  }

  .nav-text {
    display: none;
  }

  .nav-list-item {
    color: #333333;
    text-decoration: none;
    display: flex;

    align-items: center;
  }

  .nav-list .nav-list-item:hover,
  .nav-list .nav-list-item:active,
  .nav-list .current-indi {
    .nav-icon {
      color: #333;
      transform: none;
    }
  }
  /* .current-indi {
    display: inline-block !important;
  } */

  .nav-icon {
    font-size: 4rem;
  }

  .quick-links {
    display: none;
  }

  /* ======== remaining styles ============ */
  .hero {
    height: 100vh;
    padding: 0 3rem;
  }

  .hero-back-grid-img {
    height: 10rem;
    width: 10rem;
  }

  .hero-h1 {
    font-size: 3rem;
  }
  .hero-para {
    font-size: 3rem;
  }

  .hero-h1 {
    font-size: 4.2rem;
    font-weight: 400;
  }

  .hero-button:link,
  .hero-button:visited {
    gap: 1.8rem;
    padding: 0.8rem 1.2rem;
  }
  .hero-button-p {
    font-size: 1.8rem;
  }
  .hero-button-icon {
    font-size: 4rem;
  }

  /* featured project */
  .featured-project {
    margin: 2.5rem 0;
    padding: 1rem 0;
  }

  .featured-project-div {
    margin: 2rem;
    width: 100%;
  }

  .featured-project-h2 {
    margin: 2rem 0;
    padding: 1rem 0.6rem;
  }

  .featured-project-left-icon {
    font-size: 5rem;

    top: 100%;
    right: 50%;

    /* font-size: 4rem; */
    transform: translate(-100%, 0%);
  }
  .featured-project-right-icon {
    font-size: 5rem;

    top: 100%;
    right: 50%;

    /* font-size: 4rem; */
    transform: translate(100%, 0%);
  }

  .featured-project-carosol {
    /* width: 40rem; */
    margin: 5rem;
    /* padding: 2rem 2rem; */
    gap: 7rem;
  }
  .featured-project-carosol:first-child {
    margin-left: 6rem;
  }
  .featured-project-carosol:last-child {
    /* margin-right: 2rem; */
    padding-right: 1rem;
  }
  .featured-project-carosol-fig {
    height: 25rem;

    transform: scale(1.5);
  }

  .carosol-text {
    width: 35rem;
  }

  .featured-project-h3 {
    font-size: 2.8rem;
  }
  .featured-project-carosol-p {
    font-size: 1.6rem;
  }

  .featured-project-carosol-btn:link,
  .featured-project-carosol-btn:visited {
    font-size: 5rem;
  }
  .featured-tags span {
    font-size: 1rem;
    letter-spacing: 0.2rem;
    padding: 0.4rem 0.4rem;
    border-radius: 3px;
  }
  /* about me */
  .about-me {
    margin: 5rem 0;
  }
  .about-me-grid {
    grid-template-columns: 6fr 1fr;
    grid-template-rows: 4fr 1fr;

    row-gap: 1rem;
    column-gap: 1rem;

    margin: 0 auto;
    padding: 2rem 0;
  }

  .about-me-box {
    padding: 0;
    gap: 1rem;
  }
  .about-me-box-h3 {
    font-size: 2.8rem;
    transform: translateX(50%);
  }
  .about-me-box-p {
    font-size: 1.8rem;
  }

  .about-me-skill {
    padding: 0;
  }
  .about-me-skill-ul {
    gap: 0;
  }
  .about-me-skill-li {
    height: 10rem;
    width: 10rem;
  }

  .about-me-resume {
    justify-content: flex-start;
    padding: 0;
  }
  .about-me-resume-p {
    font-size: 1.4rem;
    padding-left: 0.8rem;
  }
  .about-me-resume-a:link,
  .about-me-resume-a:visited {
    font-size: 1.4rem;

    padding: 0.8rem 1.5rem;
  }

  /* contact page */
  .contact-box {
    margin: 3rem 2rem;
  }
  .contact-box-inner {
    gap: 1rem;
  }
  .contact-box-inner-h4 {
    font-size: 2rem;
    letter-spacing: 0.2rem;
    padding: 0.6rem 0.4rem;
  }
  .contact-box-inner-ul {
    font-size: 1.5rem;
    border-radius: 5px;
    padding: 0.8rem 0.4rem;
  }
  .contact-box-inner-li {
    margin-top: 0.8rem;
  }

  .contact-links-icon {
    color: #000;
    font-size: 3rem;
  }

  .contact-box-inner:first-child {
    /* width: 17rem; */
  }
}

/* ======= 400px - (exactly = 432px) ========== */

@media (max-width: 27em) {
  .body {
    display: block;
  }
  /* ======= for nav bar ============= */

  .nav {
    gap: 2rem;
    padding: 2rem 1rem;
    transform: translate(-20%, -20%);
  }

  .nav-img {
    height: 5rem;
    border-radius: 50%;
    border: 2px solid #14532d;
  }

  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  }

  .nav-text {
    display: none;
  }

  .nav-list-item {
    color: #333333;
    text-decoration: none;
    display: flex;

    align-items: center;
  }

  .nav-icon {
    font-size: 4rem;
  }

  .quick-links {
    display: none;
  }

  /* ======== remaining styles ============ */
  .hero {
    height: 100vh;
    padding: 0 2rem;
    /* align-content: center; */
  }

  .hero-back-grid {
    width: 15rem;
    grid-template-columns: repeat(4, 1fr);
    /* align-content: center; */
  }

  .hero-back-grid-img {
    height: 10rem;
    width: 10rem;
  }

  /* .hero-back-grid-img:nth-child(5), */
  /* .hero-back-grid-img:nth-child(6), */
  .hero-back-grid-img:nth-child(7),
  .hero-back-grid-img:nth-child(8) {
    display: none;
  }

  .hero-h1 {
    font-size: 4rem;
    font-weight: 500;
  }

  .hero-para {
    font-size: 3rem;
  }

  .hero-button:link,
  .hero-button:visited {
    gap: 1.8rem;
    padding: 0.8rem 1.2rem;
  }
  .hero-button-p {
    font-size: 1.8rem;
  }
  .hero-button-icon {
    font-size: 4rem;
  }

  /* featured project */

  .featured-project {
    margin: 0rem;
  }

  .featured-project-div {
    margin: 0;
    width: 100%;
  }

  .featured-project-h2 {
    font-size: 1.6rem;
    margin: 0.6rem 0.5rem;
    padding: 1rem 1rem;
  }

  .featured-project-left-icon {
    top: 100%;
    right: 50%;

    font-size: 5rem;
    /* transform: translate(-70%, 0%); */
  }
  .featured-project-right-icon {
    top: 100%;
    right: 40%;

    font-size: 5rem;
    /* transform: translate(70%, 0%); */
  }

  .featured-project-carosol {
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem;
    gap: 1.8rem;

    margin: 2rem 1rem 2rem 2rem;
  }

  .featured-project-carosol:first-child {
    margin-left: 4rem;
    /* padding-right: 1rem; */
  }
  .featured-project-carosol:last-child {
    margin-right: 4rem;
    padding: 2rem;
  }

  .featured-project-carosol-fig {
    height: 30rem;
    transform: scale(1);
  }

  .carosol-text {
    width: 25rem;
    gap: 1rem;
  }
  .featured-project-h3 {
    font-size: 2.4rem;
  }
  .featured-project-carosol-p {
    font-size: 1.4rem;
  }

  .featured-project-carosol-btn:link,
  .featured-project-carosol-btn:visited {
    font-size: 5rem;
    margin-left: 5rem;
  }
  .featured-project-carosol:last-child .featured-project-carosol-btn:link,
  .featured-project-carosol:last-child .featured-project-carosol-btn:visited {
    font-size: 5rem;
    margin-left: 2rem;
  }
  .featured-tags span {
    font-size: 1rem;
    letter-spacing: 0.15rem;
    padding: 0.3rem 0.3rem;
    border-radius: 3px;
  }

  /* about me */

  .about-me-grid {
    grid-template-columns: 6fr 1fr;
    grid-template-rows: 4fr 1fr;

    margin: 0 auto;
    padding: 0;
  }

  .about-me-box {
    padding: 0;
  }
  .about-me-box-h3 {
    font-size: 3rem;
    transform: translateX(20%);
  }
  .about-me-box-p {
    font-size: 1.4rem;
  }

  .about-me-skill {
    padding: 0;
  }
  .about-me-skill-li {
    height: 7rem;
    width: 7rem;
  }

  .about-me-resume-p {
    font-size: 1.4rem;
  }
  .about-me-resume-a:link,
  .about-me-resume-a:visited {
    font-size: 1.4rem;

    padding: 0.6rem 1.2rem;
  }

  /* contact page */
  .contact-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 2rem;
    row-gap: 2rem;
    column-gap: 2rem;
  }
  .contact-box-inner {
    width: 100%;
    height: 100%;
    gap: 1rem;
    /* margin-bottom: 2rem; */
  }
  .contact-box-inner:first-child {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
  }
  .contact-box-inner-h4 {
    font-size: 1.8rem;
    letter-spacing: 0.4rem;
    padding: 0.8rem 0.6rem;
  }
  .contact-box-inner-ul {
    height: 100%;
    font-size: 1.6rem;
    border-radius: 5px;
    padding: 0.8rem 0.4rem;
  }
  .contact-box-inner-li {
    margin-top: 0.8rem;
  }

  .contact-links-icon {
    color: #000;
    font-size: 2rem;
  }
}

/* ========= 416px - fix hero page background box */
@media (max-width: 26em) {
  .hero-back-grid-img {
    height: 8rem;
    width: 8rem;
  }
  .featured-project-carosol:first-child {
    margin-left: 1.5rem;
  }
  .featured-project-carosol:last-child {
    margin-right: 1.5rem;
  }
}

/* ========== 320px ========== small phones */

@media (max-width: 20em) {
  .nav {
    gap: 1.4rem;
    padding: 1.6rem 0.6rem;
    transform: translate(-20%, -20%);
  }

  .nav-img {
    height: 4rem;
    border-radius: 50%;
    border: 2px solid #14532d;
  }

  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  }

  .nav-text {
    display: none;
  }

  .nav-list-item {
    color: #333333;
    text-decoration: none;
    display: flex;

    align-items: center;
  }

  .nav-icon {
    font-size: 3rem;
  }

  .quick-links {
    display: none;
  }

  /* ---------- hero section ---------- */

  .hero-back-grid-img {
    height: 7rem;
    width: 7rem;
  }

  .hero-h1 {
    font-size: 3rem;
    font-weight: 500;
  }

  .hero-para {
    font-size: 2.6rem;
  }

  .hero-button:link,
  .hero-button:visited {
    gap: 1.2rem;
    padding: 0.8rem 1.2rem;
  }
  .hero-button-p {
    font-size: 1.4rem;
  }
  .hero-button-icon {
    font-size: 3rem;
  }

  /* ---- featured projects ---- */

  .featured-project {
    margin: 0rem;
  }

  .featured-project-div {
    margin: 0;
    width: 100%;
  }

  .featured-project-h2 {
    font-size: 1rem;
    margin: 0.6rem 0.5rem;
    padding: 1rem 1rem;
  }

  .featured-project-left-icon {
    top: 100%;
    right: 50%;

    font-size: 5rem;
    /* transform: translate(-70%, 0%); */
  }
  .featured-project-right-icon {
    top: 100%;
    right: 40%;

    font-size: 5rem;
    /* transform: translate(70%, 0%); */
  }

  .featured-project-carosol {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1.8rem;

    margin: 2rem 1rem 2rem 2rem;
  }

  .featured-project-carosol:first-child {
    margin-left: 2rem;
    /* padding-right: 1rem; */
  }
  .featured-project-carosol:last-child {
    margin-right: 2rem;
    padding: 1rem;
  }

  .featured-project-carosol-fig {
    height: 25rem;
    transform: scale(1);
  }

  .carosol-text {
    width: 25rem;
    gap: 1rem;
  }
  .featured-project-h3 {
    font-size: 2.4rem;
  }
  .featured-project-carosol-p {
    font-size: 1.4rem;
  }

  .featured-project-carosol-btn:link,
  .featured-project-carosol-btn:visited {
    font-size: 5rem;
    margin-left: 5rem;
  }
  .featured-project-carosol:last-child .featured-project-carosol-btn:link,
  .featured-project-carosol:last-child .featured-project-carosol-btn:visited {
    font-size: 5rem;
    margin-left: 0rem;
  }
  .featured-tags span {
    font-size: 0.6rem;
    letter-spacing: 0.15rem;
    padding: 0.3rem 0.3rem;
    border-radius: 3px;
  }

  /* ------ about me ---------*/

  .about-me-grid {
    grid-template-columns: 6fr 1fr;
    grid-template-rows: 4fr 1fr;

    margin: 0 auto;
    padding: 0;
  }

  .about-me-box {
    padding: 0;
  }
  .about-me-box-h3 {
    font-size: 3rem;
    transform: translateX(20%);
  }
  .about-me-box-p {
    font-size: 1.4rem;
  }

  .about-me-skill {
    padding: 0;
  }
  .about-me-skill-li {
    height: 7rem;
    width: 7rem;
  }

  .about-me-resume-p {
    font-size: 1.2rem;
  }
  .about-me-resume-a:link,
  .about-me-resume-a:visited {
    font-size: 1.2rem;

    padding: 0.6rem 1.2rem;
  }

  /* contact page */
  .contact-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 2rem;
    row-gap: 2rem;
    column-gap: 2rem;
  }
  .contact-box-inner {
    width: 100%;
    height: 100%;
    gap: 1rem;
    /* margin-bottom: 2rem; */
  }
  .contact-box-inner:first-child {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
  }
  .contact-box-inner-h4 {
    font-size: 1.4rem;
    letter-spacing: 0.4rem;
    padding: 0.8rem 0.6rem;
  }
  .contact-box-inner-ul {
    height: 100%;
    font-size: 1.2rem;
    border-radius: 5px;
    padding: 0.8rem 0.4rem;
  }
  .contact-box-inner-li {
    margin-top: 0.8rem;
  }

  .contact-links-icon {
    color: #000;
    font-size: 2rem;
  }
}