.proj-img-container{
    height: 300px;
    width: 100%; /* This ensures the image takes the full width of the container */
    overflow: hidden; /* Hides any overflow beyond the container */
    padding:0;
    margin-bottom:0;
   }

   .proj-img-container img {
    height: 300px;
    width: 100%; /* Takes full width of the container */

   }

   @media (max-width: 768px) {
    /* Styles for medium screens */
    .proj-img-container {
    height: 300px;
    }
   }

   @media (max-width: 480px) {
    /* Styles for small screens */
    .proj-img-container {
    height: 200px;
    }
   }

   button.btn.demo-btn {
    width: 300px;
    background: #00AFEF;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
   }
/* footer css */

.footer{
  font-size:14px;
  line-height:1.6;
  background: linear-gradient(360deg, #000051 0%, #00afef 100%);}
.footer ul li{
  margin-bottom:8px;
}
.footer ul li a:hover{
  text-decoration:underline;
  color:#f8f9fa !important;
}
.footer .form-control{
  max-width:250px;
  border-radius:5px;
}
img.footer-logo{
  height:70px !important;
}
.footer .btn{
  border-radius:5px;
}
.footer img{
  max-width:100%;
  height:auto;
}

@media (max-width: 576px){
  .footer .form-control{
    max-width:100%;
  }
  .footer form{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .footer form .btn{
    width:100%;
    margin-top:0.5rem;
  }
}

/* portfolio modal */
/*  Edit remark & Cancel remark model */
.modal-header {
    padding: 0.25rem 0.5rem !important;
    background: linear-gradient(360deg, #000051 0%, #00afef 100%);
    color: #fff;
}