What browser are you using? I’ve run your code, and it’s not overlapping (I’m using Opera/Google Chrome).
Also, you can add height: auto to the divisions div, it may help 🙂
EDIT:
(I finally got what you mean)
Just play with the z-index. Here is the code:
CSS
#home,
#about,
#projects,
#contact {
position: relative;
}
#projects .botp {
z-index: 1;
bottom: 0;
left: 0;
position: absolute;
}
#contact {
z-index: 10;
}
#projects {
z-index: 10;
}
.botc{
position: absolute;
z-index: 1;
left: 0;
bottom: 200px;
}
#card-text {
z-index: 10000;
}
.botp {
position: absolute;
z-index: 1;
left: 0;
bottom: 500px;
z-index: 1;
}
.col-md-6 {
z-index: 10;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid vh-100 " id="projects">
<!-- <div class="container d-flex h-100 " id="pwrap"> -->
<div class="row align-items-center mx-auto " id="cards">
<div class="col-sm-6 col-lg-4 ">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" style="z-index: 10;">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<svg class="botp" viewBox="0 0 1440 320">
<path fill="#FFB9B9" fill-opacity="1"
d="M0,192L48,165.3C96,139,192,85,288,96C384,107,480,181,576,218.7C672,256,768,256,864,245.3C960,235,1056,213,1152,218.7C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
<!-- </div> -->
<!-- /projects -->
<!-- contact -->
<div class="container-fluid w-100 vh-100 my-auto d-flex justify-content-center align-items-center " id="contact">
<!--Section: Contact v.2-->
<div id="border-shadow">
<div class="border border-success p-3" id="bordercustom">
<section class="mb-4 " id="formcustom">
<!--Section heading-->
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact Me</h2>
<div class="row justify-content-center">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Your name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Your email</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2"
class="form-control md-textarea"></textarea>
<label for="message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left d-flex justify-content-center">
<a class="button mt-3" onclick="validateForm();">
<span class="default">Send</span>
<span class="success">Sent</span>
<div class="left"></div>
<div class="right"></div>
</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
</div>
</div>
</section>
<!--Section: Contact v.2-->
</div>
</div>
<!-- /contact -->
<svg class="botc" viewBox="0 0 1440 320">
<path fill="#363C62" fill-opacity="1"
d="M0,288L60,272C120,256,240,224,360,224C480,224,600,256,720,277.3C840,299,960,309,1080,293.3C1200,277,1320,235,1380,213.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
</path>
</svg>
</body>
</html>
Hope this helps 🙂