/* General styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Describing the madia query for mobile screen */
@media (min-width: 375px) and (max-width: 768px) {
  .logo a {
    font-size: 25px;
    text-decoration: none;
    color: #36b37e;
    margin: 10px;
  }

  .desktop_menu {
    display: none;
  }

  .desktop_menu.active {
    display: flex;
    position: absolute;
    background-color: white;
  }

  .desktop_menu ul {
    z-index: 1000;
  }

  .social_icons ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 15px;
    margin-right: 50px;
    list-style: none;
    width: 300px;
  }

  .project_card ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 10px;
  }

  .about_card ul {
    flex-direction: row;
    list-style: none;
    width: 327px;
    flex-wrap: wrap;
    gap: 5px;
  }

  .desktop_menu.active ul {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 28px;
    width: 550px;
    height: 550px;
    border-radius: 9px;
  }

  .modal_links a {
    text-decoration: none;
    font-weight: 500;
  }

  .desktop_menu ul li a {
    text-decoration: none;
    display: flex;
  }

  .desktop_menu ul li {
    display: flex;
  }

  .project_card ul li {
    background-color: #d0d9d4;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
  }

  .about_card ul li {
    background-color: #fff;
    border: none;
    max-width: 327px;
    font-size: 18px;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .desktop_menu.active ul li {
    font-weight: bold;
    font-size: 40px;
  }

  .desktop_menu.active ul li a {
    color: #42526e;
  }

  .mobile_menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: end;
    margin: 10px 15px;
  }

  /* footer paragraph styling */
  footer p {
    padding: 3px 15px;
    background-color: black;
    width: 100px;
    border-radius: 3px;
  }

  .mobile_menu p {
    padding: 1.5px 10px;
    background-color: black;
  }

  .projects_title p {
    padding: 2px 30px;
    background-color: #36b37e;
    border-radius: 1px;
  }

  .about_text p {
    font-size: 18px;
    text-align: center;
    margin: 10px 3px;
  }

  .contact p {
    text-align: center;
    font-size: 38px;
    padding: 10px 50px;
    font-weight: bold;
  }

  .mobile_menu.active p:nth-child(1) {
    rotate: 45deg;
    top: 6px;
    position: relative;
  }

  .mobile_menu.active p:nth-child(2) {
    opacity: 0;
  }

  .mobile_menu.active p:nth-child(3) {
    rotate: -45deg;
    top: -6px;
    position: relative;
  }

  .hero {
    background: url(./assets/images/header-illsutration-mobile.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 45px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
  }

  .first,
  .second {
    text-align: center;
    font-size: 45px;
    font-weight: bold;
  }

  .first {
    margin: 25px 0 0 0;
    padding: 10px 50px;
  }

  .second {
    color: #36b37e;
    margin-top: -40px;
  }

  .hero_paragraph {
    font-size: 25px;
    text-align: center;
    margin: 10px 15px;
  }

  .action {
    margin-top: 20px;
  }

  /* Projects styling */
  .projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .projects_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
  }

  .projects_title h2 {
    font-size: 40px;
    font-weight: bold;
    margin: 3px 90px;
    text-align: center;
  }

  .projects_cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }

  .project_card {
    border: 1px solid #ebf0ee;
    width: 327px;
    height: 474px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 20px 0;
  }

  .modal {
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgb(134, 129, 129);
    z-index: 1000;
    top: 0;
  }

  .modal_links {
    display: flex;
    gap: 30px;
    padding-top: 20px;
    padding-bottom: 5px;
    justify-content: center;
  }

  .modal_content {
    background-color: white;
    padding: 5px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin: 20px;
    color: #172b4d;
  }

  .modal_image {
    width: 100%;
    height: 80%;
    border-radius: 15px;
    margin-bottom: 6px;
    padding: 8px;
  }

  .close_btn {
    position: absolute;
    top: 22px;
    right: 32px;
    font-size: 32px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
  }

  #modaltechnologies {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
  }

  #modaltechnologies li {
    background-color: #d0d9d4;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: bold;
  }

  .project_card img {
    height: 100%;
    width: 327px;
    background-color: #d0d9d4;
  }

  .project_card h3 {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
  }

  .project_card button,
  .abt_btn {
    background-color: #36b37e;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .about,
  .about_text,
  .about_cards,
  .about_card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 0;
  }

  .about_text {
    background: url(./assets/images/abt_me_left_mobile.svg) no-repeat left bottom, url(./assets/images/abt_mobile_right.svg) right top no-repeat;
  }

  .about_cards {
    gap: 10px;
  }

  .about_card {
    border-radius: 8px;
    width: 327px;
    height: 316px;
    background-color: #d0d9d4;
    gap: 10px;
  }

  .about_card img {
    width: 100px;
    height: auto;
  }

  .about_card h3 {
    font-size: 27px;
  }

  /* contact Section */
  .contact {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 0 30px 0;
    display: flex;
    gap: 20px;
    background: url(./assets/images/illustration-contact-form.svg) bottom right;
    background-repeat: no-repeat;
    color: #172b4d;
  }

  form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    margin: 10px;
  }

  form input,
  form textarea {
    width: 327px;
    margin: 5px 0;
    border-radius: 8px;
  }

  form input {
    padding: 10px 15px;
    border: 1px solid #d0d9d4;
  }

  form textarea {
    padding: 35px 0;
    border: 1px solid #36b37e;
  }

  form textarea::placeholder {
    padding: 0 0 0 18px;
  }

  .contact_form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .email {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 23px;
  }

  /* footer styling */
  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px;
  }
}

/* TABLET SECTION */
@media (min-width: 769px)and (max-width: 1025px) {
  .projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .projects_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
  }

  .projects_title h2 {
    font-size: 40px;
    font-weight: bold;
    margin: 3px 90px;
    text-align: center;
  }

  .projects_title p {
    padding: 2px 30px;
    background-color: #36b37e;
    border-radius: 1px;
  }

  .projects_cards {
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    grid-template-columns: auto auto;
  }

  .project_card {
    border: 1px solid #ebf0ee;
    width: 327px;
    height: 474px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 20px 0;
  }

  .project_card img {
    height: 100%;
    width: 327px;
    background-color: #d0d9d4;
  }

  .project_card h3 {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
  }

  .project_card ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 10px;
  }

  .project_card ul li {
    background-color: #d0d9d4;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
  }

  .project_card button,
  .abt_btn {
    background-color: #36b37e;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .logo a {
    font-size: 25px;
    text-decoration: none;
    color: #36b37e;
    margin: 10px;
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .desktop_menu {
    display: none;
  }

  .mobile_menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: end;
    margin: 10px 15px;
  }

  .mobile_menu p {
    padding: 1.5px 10px;
    background-color: black;
  }

  .hero {
    background: url(./assets/images/header-illsutration-mobile.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 45px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
  }

  .first,
  .second {
    text-align: center;
    font-size: 45px;
    font-weight: bold;
  }

  .first {
    margin: 25px 0 0 0;
    padding: 10px 50px;
  }

  .second {
    color: #36b37e;
    margin-top: -40px;
  }

  .hero_paragraph {
    font-size: 25px;
    text-align: center;
    margin: 10px 15px;
  }

  .action {
    margin-top: 20px;
  }

  .about,
  .about_text,
  .about_card,
  .about_card ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 0;
  }

  .about_text {
    background: url(./assets/images/abt_me_left_mobile.svg) no-repeat left bottom, url(./assets/images/abt_mobile_right.svg) right top no-repeat;
  }

  .about_text h2 {
    font-size: 28px;
    font-weight: bold;
  }

  .about_text p {
    font-size: 25px;
    text-align: center;
    margin: 10px 3px;
  }

  .about_cards {
    gap: 10px;
    display: grid;
    grid-template-columns: auto auto;
  }

  .about_card {
    border-radius: 8px;
    width: 327px;
    height: 316px;
    background-color: #d0d9d4;
    gap: 10px;
  }

  .about_card img {
    width: 100px;
    height: auto;
  }

  .about_card h3 {
    font-size: 27px;
  }

  .about_card ul {
    flex-direction: row;
    list-style: none;
    width: 327px;
    flex-wrap: wrap;
    gap: 5px;
  }

  .about_card ul li {
    background-color: #fff;
    border: none;
    max-width: 327px;
    font-size: 18px;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 0 30px 0;
  }

  .contact p {
    font-size: 30px;
    padding: 10px 50px;
    font-weight: bold;
    color: #172b4d;
  }

  form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    margin: 10px;
  }

  form input,
  form textarea {
    width: 327px;
    margin: 5px 0;
    border-radius: 8px;
  }

  form input {
    padding: 10px 15px;
    border: 1px solid #d0d9d4;
  }

  form textarea {
    padding: 35px 0;
    border: 1px solid #36b37e;
    width: 327px;
    margin: 5px 0;
    border-radius: 8px;
  }

  form textarea::placeholder {
    padding: 0 0 0 18px;
  }

  .contact_form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 20px;
  }

  .email {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 23px;
  }

  .social_icons ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 15px;
    list-style: none;
    width: 300px;
    margin-left: 250px;
    margin-right: 250px;
  }
}

/* DESKTOP SECTION */
@media (min-width: 1025px) {
  .projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .projects_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
  }

  .projects_title h2 {
    font-size: 40px;
    font-weight: bold;
    margin: 3px 90px;
    text-align: center;
  }

  .projects_title p {
    padding: 2px 30px;
    visibility: hidden;
    background-color: #36b37e;
    border-radius: 1px;
  }

  .projects_cards {
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    grid-template-columns: auto auto auto;
  }

  .project_card {
    border: 1px solid #ebf0ee;
    width: 327px;
    height: 474px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 20px 0;
  }

  .modal {
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #39527d;
    z-index: 1000;
    top: 0;
  }

  .modal_image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
  }

  .modal_links {
    display: flex;
    gap: 30px;
    padding-top: 20px;
    justify-content: center;
  }

  .modal_links a {
    text-decoration: none;
    font-weight: 500;
  }

  .modal_content {
    background-color: white;
    padding: 25px;
    width: 40%;
    height: auto;
    position: absolute;
  }

  .close_btn {
    position: absolute;
    top: 25px;
    right: 32px;
    font-size: 32px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
  }

  #modaltechnologies {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
  }

  .project_card ul li {
    background-color: #d0d9d4;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
  }

  .desktop_menu ul li {
    justify-content: center;
    display: flex;
  }

  .about_card ul li {
    background-color: #fff;
    border: none;
    max-width: 327px;
    font-size: 18px;
    padding: 2px 5px;
    border-radius: 3px;
  }

  #modaltechnologies li {
    background-color: #d0d9d4;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: bold;
  }

  .modal_description {
    text-align: center;
  }

  .project_card img {
    height: 100%;
    width: 327px;
    background-color: #d0d9d4;
  }

  .project_card h3 {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
  }

  .project_card ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 10px;
  }

  .project_card button,
  .abt_btn {
    background-color: #36b37e;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .logo a {
    font-size: 25px;
    text-decoration: none;
    color: #36b37e;
    margin: 10px;
    flex-direction: row;
    align-items: center;
    display: flex;
    visibility: hidden;
  }

  .desktop_menu {
    display: grid;
  }

  .desktop_menu ul li a {
    text-decoration: none;
    display: flex;
    color: black;
    font-weight: bold;
    font-size: 25px;
  }

  .desktop_menu ul {
    text-decoration: none;
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
  }

  .mobile_menu {
    display: none;
  }

  .hero {
    background: url(/assets/images/Header-llustration-desktop.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 300px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
  }

  .first,
  .second {
    text-align: center;
    font-size: 45px;
    font-weight: bold;
  }

  .first {
    margin: 25px 0 0 0;
    padding: 10px 50px;
  }

  .second {
    color: #36b37e;
    margin-top: -40px;
  }

  .hero_paragraph {
    font-size: 25px;
    text-align: center;
    margin: 10px 15px;
  }

  .action {
    margin-top: 20px;
    margin-right: 35px;
  }

  .about,
  .about_text,
  .about_card,
  .about_card ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 0;
  }

  .about {
    background: url(./assets/images/illustration-about-me-2-desktop.svg) top left, url(assets/images/illustration\ about\ me\ desktop.svg) top right;
    background-repeat: no-repeat;
    margin-top: 150px;
  }

  .about_text h2 {
    font-size: 28px;
    font-weight: bold;
  }

  .about_text p {
    text-align: center;
    margin: 10px 3px;
    width: 600px;
    line-height: 32px;
    color: #42526e;
    font-size: 20px;
  }

  .about_cards {
    gap: 10px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
  }

  .about_card {
    border-radius: 8px;
    width: 327px;
    height: 316px;
    background-color: #d0d9d4;
    gap: 10px;
  }

  .about_card img {
    width: 100px;
    height: auto;
  }

  .about_card h3 {
    font-size: 27px;
  }

  .about_card ul {
    flex-direction: row;
    list-style: none;
    width: 327px;
    flex-wrap: wrap;
    gap: 5px;
  }

  .contact {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin: 10px 0 30px 0;
    width: 89.5%;
    padding: 40px 170px;
    background: url(assets/images/illustration-1-contact-form-desktop.svg), url(assets/images/illustration-2-contact-form-desktop.svg) bottom, url(assets/images/contact\ form-illustratoin-3-desktop.svg) bottom right;
    background-repeat: no-repeat;
  }

  .contact p {
    font-size: 30px;
    padding: 10px 55px;
    color: #172b4d;
    line-height: 40px;
    font-weight: 520;
    margin: 5px;
  }

  form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  form input,
  form textarea {
    width: 327px;
    margin: 5px 0;
    border-radius: 8px;
  }

  form input {
    padding: 10px 15px;
    border: 1px solid #d0d9d4;
  }

  form textarea {
    padding: 35px 0;
    border: 1px solid #36b37e;
    width: 327px;
    margin: 5px 0;
    border-radius: 8px;
  }

  form textarea::placeholder {
    padding: 0 0 0 18px;
  }

  .contact_form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .email {
    display: none;
  }

  .social_icons ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 5px;
    margin-left: 570px;
    list-style: none;
    width: 300px;
    margin-right: 600px;
  }
}