body {
    background-image: url("bg-img-2.jpg");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-left: 10%;
    margin-right: 10%;
    /* background-size: 90%; */
  }
  h1{
    font-size: medium;
    color: black;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  .bg-image {
    /* Adjust background image properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60vh;
  }

  p, a {
    /* Customize text styles */
    color: white;
    text-align: center;
    /* Add additional styles as needed */
  }
  .profile_contact{
    background-color: black;
  }
  .content-wrapper {
    /* max-width: 64%; */
    margin: 0 auto;
}

.card-area {
    background-color: #f1f1f1;
    color: black;
    padding: 20px;
}
.card-p{
    color: black;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.home-p{
    color: black;
    font-size: medium;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    text-align: left;
}
.projects-p{
    color: black;
    font-size: medium;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.navbar {
    grid-column: 1 / -1; /* Span the entire width of the grid */
  }

  .main-content {
    width: 100%;
  }

  .main-content img {
    width: 100%;
    height: auto;
  }


  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    /* padding-top: 70px; Adjust the padding-top value to provide enough space for the navbar */
    
  }

  .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .card-img-top {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
  }

    .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    color: rgb(95, 176, 223);
  }

  .fa:hover {
    opacity: 0.7;
  }
.footer{
    grid-column: 1 / -1; /* Span the entire width of the grid */
    /* max-height: 3%; */
}
.a-index:link {
    color: rgb(93, 64, 170);
}

.a-index:visited {
    color: rgb(93, 64, 170);
}

.a-index:hover {
    color: rgb(95, 10, 52);
}

.a-index:active {
    color: hotpink;
}