.col-lg-11{
  padding-top: 20px;
}

/* Container for the articles */
.articles-container {
    display: flex; /* Enables flex layout */
    flex-wrap: wrap; /* Ensures articles wrap to the next line if they don't fit */
    gap: 27.5px; /* Adds space between articles */
    justify-content: center; /* Centers articles within the container */
    padding-top: 20px;
    
  }
  
  /* Article/Card styles */
  .article-wrapper {
    width: 320px; /* Sets a fixed width for each card */
    
    -webkit-transition: 0.15s all ease-in-out;
    transition: 0.15s all ease-in-out;
    border-radius: 10px;
    padding: 5px;
    border: 4px solid transparent;
    cursor: pointer;
    background-color:#E6E6FA;
  }
  
  .article-wrapper:hover {
    -webkit-box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;
    box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;
    border-color: #0578c5;
    -webkit-transform: translate(-20px, -20px);
    -ms-transform: translate(-20px, -20px);
    transform: translate(-20px, -20px);
    transition: 0.90s;
  }
  
  .article-wrapper:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  
  /* Styling for the container holding the project image */
  .container-project {
    width: 100%; /* Full width of the card */
    height: 170px; /* Fixed height */
    background: rgb(175, 175, 175); /* Placeholder background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensures the image doesn't overflow */
    position: relative;
  
  }
  
  

  /* Project information styles */
.project-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

  .project-info {
    padding-top: 20px;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
  }
  
  .project-title {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
   
  }
  
  /* Flex alignment for project title and hover icon */
  .flex-pr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  /* Styling for project type badges */
  .project-type {
    background: #b2b2fd;
    color: #1a41cd;
    font-weight: bold;
    padding: 0.3em 0.7em;
    border-radius: 15px;
    font-size: 12px;
    letter-spacing: -0.6px;
  }
  
  .types {
    gap: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    place-content: flex-start;
  }
  
  /* Hover effect for the project hover icon */
  .project-hover {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 9px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  
  .article-wrapper:hover .project-hover {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #a6c2f0;
  }

.envelope-svg:hover {
    transform: scale(1.1) rotate(-2deg);
  }

   .envelope-svg {
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(160, 108, 213, 0.6));
    transition: transform 0.3s ease;
  }

  .flap {
    transform-origin: center bottom;
    animation: flapOpen 4s infinite ease-in-out;
  }

  @keyframes flapOpen {
    0%, 100% { transform: rotateX(0deg); }
    50% { transform: rotateX(-40deg); }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .newsletter-section {
  display: flex;
  justify-content: center;
  padding: 80px 20px;
  background: linear-gradient(to bottom, #4B0082 0%, #C6BCF0 100%);
}

.newsletter-container {
  background: linear-gradient(to bottom, #4B0082 0%, #C6BCF0 100%);
  border-radius: 20px;
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.newsletter-text {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.newsletter-text h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 15px;
}

.newsletter-text p {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 25px;
}

.newsletter-form {
  display: flex;
  width: 100%;
  max-width: 500px;
}

.newsletter-form input[type="email"] {
  padding: 15px 20px;
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 30px 0 0 30px;
  outline: none;
  font-size: 16px;
}

.newsletter-form button {
  padding: 15px 25px;
  background: linear-gradient(to bottom, #4B0082 0%, #C6BCF0 100%);
  color: white;
  border: none;
  border-radius: 0 30px 30px 0;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.newsletter-form button:hover {
  background-color: #8a6633;
}

.newsletter-image {
  flex-shrink: 0;
  margin-top: 30px;
  text-align: center;
  width: 100%;
}

.newsletter-image img {
  max-width: 280px;
  height: auto;
}

/* ✅ Mobile Responsive Fix */
@media (max-width: 768px) {
  .newsletter-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
    max-width: 100%;
  }

  .newsletter-form input[type="email"],
  .newsletter-form button {
    border-radius: 30px;
    width: 100%;
    margin-bottom: 10px;
  }

  .newsletter-form button {
    border-radius: 30px;
  }
}