Problem with making the hero section of this site responsive

Question

I'm experiencing problems on why the hero section which I'm building isn't responsive, I'm using bootstrap and the grid system, the image I the hero section is responsive as I'm using the class img-fluid but the text and buttons don't follow suit I'm really confused to where I've gone wrong and help would be massively appreciated as I've been banging my head against a wall for an hour on end now.

here's the HTML:

<!-- ======= Header ======= -->
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center">

      <a href="index.html"><img src="assets/img/logo.png"></a>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo mr-auto"><img src="assets/img/logo.png" alt=""></a>-->

      <nav class="nav-menu d-none d-lg-block">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#team">Team</a></li>
          <li class="drop-down"><a href="">Drop Down</a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="drop-down"><a href="#">Deep Drop Down</a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 2</a></li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
            </ul>
          </li>
          <li><a href="#contact">Contact</a></li>

        </ul>
      </nav><!-- .nav-menu -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex align-items-center">

    <div class="container" data-aos="zoom-out" data-aos-delay="100">
    <div class="hero-image">
    <img src="assets/img/hero-img.png" class="img-fluid">
    </div>

    <div class="hero-textbox">
      <h2 class="hero-heading-text">WINNING WITH DATA:<br> 
CRM AND ANALYTICS FOR THE BUSINESS OF <br>SPORTS</h2>
<p class="hero-description-text">Suitable for beginners, intermediaries or digital marketers who haven't yet included data-driven decision making in their approach. Our book provides a fantastic start for those looking to understand the role of CRM and Business Intelligence for the sports industry.</p>
<a href="#" class="btn btn-block btn-primary btn-default"><span class="glyphicon glyphicon-shopping-cart"></span> Order Now</a>
    
    </div>
  </div>
  </section><!-- End Hero -->

here's the CSS: https://pastebin.com/F3ghpywz

Thank you so much in advance for helping me solve this problem.

Kind regards, Josh.