Carousel doesn't work (have 2 carousel one page) - css

Question

I have 2 Carousel in one page the fist one slides and indicators are working really good, but the second doesn't automatically slides and the buttons don't even work
tried a lot of stuff scripting didn't seem to work.
<header>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container first-item">
<h1>Welcome to my protfolio</h1>
<!-- About me -->
Contact Me
</div>
</div>
<div class="carousel-item">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-3 col-lg-3 col-xl-3 col-xxl-3"> Work Experience</div>
<div class="col-3 col-lg-3 col-xl-3 col-xxl-3">Education</div>
<div class="col-3 col-lg-3 col-xl-3 col-xxl-3">Skills</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<!-- About me -->
<h1>Third Item</h1>
</div>
</div>
</div>
</div>
</header>
<!-- #Main Body -->
<div class="container-fluid main">
<!-- #About -->
<div class="row section" id="about">
<div class="col-8">Column</div>
<div class="col-4">Column</div>
</div>
<!-- #Jobs -->
<div class="row section" id="jobs">
<div class="col-6 col-xl-6 col-xxl-6">
<div class="card">
<img src="StyleSheet/Working.jpg" class="card-img-top" />
<!---Card For Work Experience------------------>
<div class="card-body">
<h5 class="card-title">work experience</h5>
<p class="card-text "></p>
My Resume
</div>
</div>
</div>
<div class="col-6 col-xl-6 col-xxl-6 ">
<div class="container ">
<div class="row justify-content-center ">
<div class="col-12 ">
<h1>
<span class="material-icons-round "> work_history </span> Work Experience
</h1>
</div>
</div>
<div class="row ">
<figure>
<blockquote class="blockquote ">
<li>Bright Data ( former Luminati )</li>
</blockquote>
<figcaption class="blockquote-footer ">
( 2021 - Current )
</figcaption>
</figure>
</div>
<div class="row ">
<figure>
<blockquote class="blockquote ">
<li>Rafael Industry</li>
</blockquote>
<figcaption class="blockquote-footer ">
( 2017 - 2019 )
</figcaption>
</figure>
</div>
<div class="row ">
<figure>
<blockquote class="blockquote ">
<li>IDF</li>
</blockquote>
<figcaption class="blockquote-footer ">
( 2014 - 2017 )
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<!-- #Projects -->
<div class="row section justify-content-center">
<!-- #Projects-Carousel -->
<div id="projects-carousel " class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner ">
<!-- #Projects-1 -->
<div class="carousel-item active ">
<div class="container ">
<div class="row justify-content-center ">
<img class="col-lg-8 " src="StyleSheet/Working.jpg " />
<div class="col-xl-3 col-md-4 card ">
<div class="card-header text-center ">
Featured
</div>
<img src="StyleSheet/Working.jpg " class="card-img " />
<div class="card-body ">
<h5 class="card-title ">Special title treatment</h5>
<p class="card-text ">With supporting text below as a natural lead-in to additional content.</p>
<center>
<a class="github-ref ">
<i class="fa-brands fa-github fa-2x "></i>
</a>
</center>
</div>
<div class="card-footer text-muted text-center ">
2 days ago
</div>
</div>
</div>
</div>
</div>
<!-- #Projects-2-->
<div class="carousel-item ">
</div>
<!-- #Projects-3-->
<div class="carousel-item ">
</div>
</div>
<button class="carousel-control-prev" type="button " data-bs-target="#projects-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon " aria-hidden="true "></span>
<span class="visually-hidden ">Previous</span>
</button>
<button class="carousel-control-next" type="button " data-bs-target="#projects-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon " aria-hidden="true "></span>
<span class="visually-hidden ">Next</span>
</button>
</div>
</div>
</div>
<!-- #footer -->
<footer></footer>
<!-- Scripst-->
<script src="script.js "></script>
<!-- JavaScript Bundle with Popper -->
</body>
adding the css file maybe something is wrong there, it is my first website doing it all alone so kind of messy.
body {
background-image: url("Background.png");
background-repeat: no-repeat;
font-family: 'Arima Madurai', cursive;
background-size: cover;
}
header .carousel-item {
height: 48rem;
background-color: #e6f2ff;
position: relative;
border: 2px;
}
header .first-item {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 50px;
}
.carousel-indicators [data-bs-target] {
background-color: #131acf;
}
.main {
margin: 0;
}
.main>.row {
margin: 10px;
width: 100%;
border-radius: 25px;
}
.card {
box-shadow: 5px -10px rgba(0, 0, 0, 0.2);
margin: 5px;
border: solid 1px #555;
}
.container .col-12 {
background-color: #668cff;
border-radius: 25px;
color: #0033cc;
border: solid 1px #555;
box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.2);
-o-box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
.blockquote-footer {
color: #e6ffff;
font-size: 16px;
}
.section {
height: 46.5rem;
}
.row>figure {
background-color: #6675ff;
margin-top: 20px;
border: solid 1px #555;
box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.2);
-o-box-shadow: 10px -10px 5px rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
header .col-3 {
border-radius: 25px;
margin: 10px;
height: 45rem;
text-align: center;
background-color: #e6e5e5;
}
.section .card {
box-shadow: none;
}
.section .col-4>.card::before {
content: "";
position: absolute;
height: 40%;
width: 100%;
background-color: #0033cc;
}
.section .col-4 .card>img {
border-radius: 50%;
/* width: 10.5vw;
height: 10.5vw; */
align-self: center;
border: solid 3px blue;
z-index: 100;
margin-top: 10px;
}
.fa-brands {
cursor: pointer;
}
.carousel-item .card {
height: 450px;
margin-left: -25%;
margin-top: 45px;
width: 500px;
}
.carousel-item .card .card-img {
display: none;
}
#media screen and (max-width:790px) {
.carousel-item img {
display: none;
}
.carousel-item .card {
height: 520px;
align-self: center;
margin-top: 0;
margin-left: 0;
}
.carousel-item .card .card-body {
align-self: center;
}
.carousel-item .card .card-body {
align-self: center;
}
.carousel-item .card .card-img {
display: block;
}
.card .card-header {
display: none;
}
}
#media screen and (min-width:790px) and (max-width:990px) {
.carousel-item .card {
height: 320px;
align-self: center;
margin-top: -120px;
margin-left: 0;
}
.carousel-item .card .card-body {
align-self: center;
}
.carousel-item .card .card-body {
align-self: center;
}
}
carousel-control-next {
color: black
}