Bootstrap cards

Question

so this part of my code is not working properly and I am using bootstrap 5 the card section. I tried changing the margin with the css but the result was that the cards and the section were only responsive on the specified screen size. Can someone please suggest and edit :so this part of my code is not working properly and I am using bootstrap 5 the card section. I tried changing the margin with the css but the result was that the cards and the section were only responsive on the specified screen size. Can someone please suggest and edit :

'''

           <section style="background-color: #7fbcdc; padding: 3.33rem;">
        <div class="container">
            <div class="row">
                <div class="col-sm">
                    <div class="d-md-flex justify-content-between align-items-center">
                        <h3 class="mb-3 mb-md-0">Sign up for our newsletter</h3>

                        <form class="col-md-8 mt-3 mt-md-0" action="details_entry.php" method="post">
                            <div class="input-group">
                                <input type="email" class="form-control" name="email" placeholder="Enter Email" required
                                    style="max-width: 300px;">
                                <button class="btn btn-success btn-lg" type="submit" name="subscribe"
                                    value="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!--  dark-themed section -->
    <section class="bg-success text-light p-5">
        <div class="container">
            <h2 class="text-center mb-5">Explore Our Zoo</h2>
    
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <img src="Images/zoo-safari.webp" class="img-fluid mb-3" alt="Safari Zoo">
                            <h3 class="card-title mb-3">Safari Zoo</h3>
                            <p class="card-text">Experience the magic of wildlife at RZA's safari-style zoo, with hundreds
                                of animals,
                                Come explore and connect with nature like never before </p>
                            <a href="#" class="btn btn-warning">Book Now</a>
                        </div>
                    </div>
                </div>
    
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <img src="Images/zoo-safari.webp" class="img-fluid mb-3" alt="Safari Zoo">
                            <h3 class="card-title mb-3">On-Site Hotel</h3>
                            <p class="card-text">Want to spend more time with the animals? Stay at our on-site hotel with
                                friends or family and feel how its like to live with the animals</p>
                            <a href="#" class="btn btn-warning">Book Now</a>
                        </div>
                    </div>
                </div>
    
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <img src="Images/zoo-safari.webp" class="img-fluid mb-3" alt="Safari Zoo">
                            <h3 class="card-title mb-3">RZA Education</h3>
                            <p class="card-text">We offer range of educational workshops and activities for the students to
                                learn in a real wildlife environement</p>
                            <a href="#" class="btn btn-warning">Explore Now</a>
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    </section>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<?php
// Establishing connection to MySQL database
$servername = "localhost"; // Change this to your database server name
$username = "root"; // Change this to your database username
$password = ""; // Change this to your database password
$dbname = "websitedb"; // Change this to your database name

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Check if form is submitted
if (isset($_POST['subscribe'])) {
    // Sanitize and validate email input
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    
    // Prepare SQL statement to insert email into the database using parameterized query
    $sql_query = "INSERT INTO subscribe (Email) VALUES (?)";
    
    // Prepare the SQL statement
    $stmt = $conn->prepare($sql_query);

    // Bind parameters
    $stmt->bind_param("s", $email);

    // Execute the statement
    if ($stmt->execute()) 
    { 
        // echo Success sweetalert
        ?>

        <script type = "text/javascript">
           $(function (){
            Swal.fire(
                'Congrats!',
                'Email submitted successfully.',
                'success'
                )
            });

        </script>
        <?php

        include ('index.php'); // Including a file after successful insertion
    } else {
        // echo Error sweetalert
        ?>

        <script type = "text/javascript">
           $(function (){
            Swal.fire(
                'Oops!',
                'Something went wrong. Please try again',
                'error'
                )
            });

        </script>
        <?php
    }
    
    // Close statement
    $stmt->close();
}

// Close connection
$conn->close();
?>