body, html {
  overflow-x: hidden;
}
section {
  margin-bottom: 15%;
}

.footer {
  position: relative;
}

/* Blog post styles */
.card {
  margin: 5% auto;
  border: 1px solid #ffffff22;
  box-shadow: 0 7px 20px 5px #00000088;
  background-color: #362b126c;
  border-radius: 0.7rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  opacity: 0;
  transition: 0.5s all;
  animation: bottomAni 1s ease forwards;
  display: flex;
  padding: 5%;
}

.card:hover {
  border: 1px solid #ffffff71;
  box-shadow: 0 7px 50px 10px var(--primary-color-extra-dark);
}

@keyframes bottomAni {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.main {
  flex: 1; /* Take up remaining space */
  display: flex; /* Add display flex to the main container */
  flex-direction: column; /* Arrange content in a column */
  padding: 1rem;
}

.blog-image {
  border-radius: 0.5rem;
  width: 100%; /* Set width to 100% to make the image resize automatically */
  max-width: 100%; /* Ensure image doesn't exceed its original size */
  height: auto; /* Allow the image to adjust its height proportionally */
  margin: 1rem auto; /* Add some space between image and content */
}

.blog-content {
  margin-top: 1rem;
  color: white;
  flex-direction: column; /* Arrange content in a column */
  flex: 1; /* Take up remaining space */
}

.main h2 {
  font-size: 2rem;
  color: white;
}

.description {
  color: #dadada;
  margin-top: 0.2rem;
  font-size: 1rem;
}

h2.headings {
  font-size: 1.5rem;
  margin: 3% 0% 1% 0%;
}
h3.headings {
  font-size: 1.2rem;
  margin: 3% 0% 1% 0%;
}

p.blog_paragraph_text {
  font-size: 1.2rem;
  text-align: justify;
  text-justify: inter-word;
}

p.blog_paragraph_text_heading {
  margin-top: 2%;
  font-size: 1.1rem;
}

.blog_post-image {
  display: block;
  border-radius: 0.5rem;
  width: 70%; /* Set width to 100% to make the image resize automatically */
  max-width: 100%; /* Ensure image doesn't exceed its original size */
  height: auto; /* Allow the image to adjust its height proportionally */
  margin: 3% auto 3% auto; /* Add some space between image and content */
}

/* For medium screens (e.g., tablets) */
@media (min-width: 700px) and (max-width: 1000px) {
  .card {
    margin: 4% auto;
  }
  h2.headings {
    margin: 4% 0% 2% 0%;
  }
}

/* For smaller screens (e.g., phones) */
@media (max-width: 700px) {
  .blog {
    margin-top: 5%;
  }
  .card {
    margin-top: 10%;
    padding: 2%;
  }

  .main h2 {
    font-size: 1.7rem;
  }

  .main {
    flex-direction: column; /* Arrange items vertically */
    align-items: flex-start; /* Align items to the start */
  }

  .blog-image {
    max-width: 100%; /* Adjust width to fill the container */
    margin-bottom: 1rem; /* Add some space between image and content */
  }

  .blog_post-image {
    width: 95%;
  }

  h2.headings {
    margin: 6% 0% 2% 0%;
  }
}

@media screen and (min-height: 1000px) {
  .footer{
    position:fixed;
  }
}