@charset "UTF-8";
/* CSS Document */
body {
  background-color: #ffffff;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
}
a {
  color: #002856;
  -webkit-transition: all 200ms linear 0s !important;
  -moz-transition: all 200ms linear 0s !important;
  -ms-transition: all 200ms linear 0s !important;
  -o-transition: all 200ms linear 0s !important;
  transition: all 200ms linear 0s !important;
}
a:hover {
  color: #6b6c73;
  text-decoration: none !important;
}
h1 {
  color: #000;
  font-size: 36px;
  font-weight: 500;
  margin: 3px auto 10px;
  line-height: normal;
}
h2 {
  color: #333;
  font-size: 30px;
  font-weight: 500;
  margin: 3px auto 10px;
  line-height: normal;
}
h3 {
  color: #000;
  font-size: 24px;
  font-weight: 500;
  margin: 3px auto 10px;
  line-height: normal;
}
h4 {
  color: #888;
  font-size: 21px;
  font-weight: 600;
  margin: 3px auto 2px;
  line-height: normal;
}
h5 {
  color: #002856;
  font-size: 18px;
  font-weight: 600;
  margin: 3px auto 2px;
  line-height: normal;
}
.uppercase {
  text-transform: uppercase;
}
.heavy {
  font-weight: 700;
}
.micro-bull {
  list-style: none;
  margin: 6px 16px 10px;
  padding: 0;
}
.micro-bull li {
  background: url("/graphics/micro-bull.png") no-repeat scroll 0 9px transparent;
  line-height: 23px;
  padding-left: 14px;
  color: #5a5c52;
}
blockquote {
  background-color: #fafafa;
  border-left: 4px solid #3f7bad;
  color: #888;
  font-size: 15px;
  margin: 25px 0;
  padding: 10px 20px;
}
blockquote b {
  font-weight: 600;
}
.myContainer {
  margin: 0px auto;
  padding: 0 15px;
  background-color: transparent;
}
.microbutton {
  background-color: #448cb4;
  border-radius: 50px !important;
  color: #fff;
  padding: 10px 30px !important;
  text-transform: uppercase;
  box-shadow: none !important;
  text-shadow: none;
  border: none !important;
}
.microbutton:hover {
  background-color: #6b6c73;
  color: #fff !important;
}
/* Begin Topbar Styles */
.topbar-out {
  background-color: #e28251;
  border-bottom: 1px solid #8e796c;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 16;
}
.topbar {
  height: 54px;
  position: relative;
}
.hashtag {
  float: right;
  padding-right: 110px;
  position: relative;
  top: 16px;
  color: #25a7df;
}
.social {
  position: absolute;
  right: 0;
  top: 14px;
}
.social a {
  margin-right: 5px;
  opacity: 1;
  -webkit-transition: all 200ms linear 0s;
  -moz-transition: all 200ms linear 0s;
  -ms-transition: all 200ms linear 0s;
  -o-transition: all 200ms linear 0s;
  transition: all 200ms linear 0s;
}
.social a:hover {
  opacity: 0.6;
}
.social a:last-child {
  margin-right: 0;
}
.social i {
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  padding: 0px;
  text-align: center;
  width: 25px;
  height: 25px;
  line-height: 25px;
}
.social .fa-twitter {
  background-color: #25a7df;
}
.social .fa-instagram {
  background-color: #0178b5;
}
.social .fa-facebook-f {
  background-color: #3b5998;
}
/* Begin Header Styles */
.header-out {
  background-color: #e28251;
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.4);
  z-index: 16;
}
.header {
  height: 130px;
}
.logo {
  display: inline-block;
  margin-top: 18px;
  transition: none;
}
.logo img {
  width: 350px;
}
/* Begin Menu Styles */
.menu-out .myContainer {
  padding: 0;
}
.menu-out {
  background-color: transparent;
  position: fixed;
  top: 110px;
  width: 100%;
  z-index: 20;
}
#menu_row {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  margin-bottom: 0;
  min-height: auto;
}
#mainmenu .nav {
  float: right;
  width: auto;
  margin: -55px 0 0;
}
#mainmenu .navbar-nav li:last-child {
  border-radius: 50px;
  background-color: #448cb4;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
}
#mainmenu .navbar-nav li:last-child:hover {
  background-color: #6b6c73;
}
#mainmenu .navbar-nav li:last-child a:hover {
  color: #fff;
}
#mainmenu .navbar-nav li a {
  color: #fff;
  font-size: 18px;
  padding: 0 35px;
  font-weight: 500;
  text-transform: uppercase;
  -webkit-transition: all 200ms linear 0s;
  -moz-transition: all 200ms linear 0s;
  -ms-transition: all 200ms linear 0s;
  -o-transition: all 200ms linear 0s;
  transition: all 200ms linear 0s;
}
#mainmenu .navbar-nav li a:hover {
  color: #6b6c73;
}
#menu_row .navbar-toggle {
  background-color: #c4deea;
  border: 1px solid #c4deea !important;
  margin-top: -42px;
}
#menu_row .icon-bar {
  background-color: #fff;
}
/* Begin Footer Styles */
.footer-out {
  background-color: #e28251;
  padding: 60px 0 30px;
}
.footer {
  color: #fff;
  font-size: 14px;
}
.footer h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 15px;
}
.footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 25px;
}
.footer li {
  margin-bottom: 5px;
}
.footer a {
  color: #e6e7e8;
}
.footer a:hover {
  color: #6b6c73;
}
.footer .ft-logo {
  width: 150px;
  margin-bottom: 35px;
}
.footer .contact p {
  color: #e6e7e8;
}
.footer .contact p:last-child {
  padding-right: 15%;
}
.footer .contact a {
  color: #fff;
}
.footer .contact a:hover {
  color: #62b49e;
}
.footer .foot-social {
  margin-top: 20px;
}
.footer .foot-social a {
  color: #fff;
  font-size: 20px;
  margin-right: 15px;
}
.footer .foot-social a:hover {
  color: #62b49e;
}
.footer .col-sm-4:first-child {
  border-right: thin solid rgb(230 231 232 / 80%);
}
.footer .links {
  padding-left: 100px;
}
.copyright-out {
  background-color: #696A6D;
  padding: 13px 0;
}
.copyright {
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.copyright a {
  color: #fff;
}
.copyright a:hover {
  color: #62b49e;
}
.btn-cust {
  color: #fff;
  background-color: #62b49e;
  border-color: #62b49e !important;
  border-radius: 25px !important;
  padding: 10px 30px !important;
  text-transform: uppercase;
}
.btn-cust:hover {
  background-color: #3f7bad;
  border-color: #3f7bad;
  color: #fff !important;
}
/*Start HP CAROUSEL Style*/
.hero-image {
  background:  url(https://cdn.ymaws.com/aspenational.site-ym.com/resource/resmgr/summit2025/aspe-omaha_skyline_2025_vf-2.png) no-repeat scroll top center/ cover;
  margin-top: 130px;
  padding: 65px 0;
  color: #fff;
}
.hero-text {
  max-width: 675px;
}
.hero-text h1 {
  color: #fff;
  font-weight: 700;
  font-size: 4.4rem;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);
  margin: 0 auto 5px;
  text-transform: none;
}
.hero-text p {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 300;
}
/* START MICRO CTA STYLE */
.hpCtas-Out {
  background-color: #e28251;
  color: #fff;
  text-align: center;
  padding: 45px 5%; /* Keeps a balanced width */
}

.hpTitle {
  margin-bottom: 36px;
}

.hpTitle h1 {
  font-size: 4rem;
  font-weight: 700;
  color: #236384;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.hpCtas-Out .hpTitle h1 {
  color: #fff;
}

.cta-container {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Ensures equal height for columns */
  gap: 40px; /* Space between columns */
  flex-wrap: wrap; /* Keeps responsiveness */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.ctaBox {
  flex: 1 1 calc(50% - 40px); /* Keeps 2 equal columns with spacing */
  padding: 20px 38px;
  position: relative;
  text-align: center;
  color: #fff; /* Keep text color */
  min-width: 400px;
  max-width: 600px; /* Keeps it from getting too wide */
}

/* Make paragraphs wider inside ctaBox */
.ctaBox p {
  max-width: 100%; /* Makes the text take the full width of the box */
  font-size: 1.2rem; /* Slightly larger text for better readability */
  line-height: 1.6; /* Improves readability */
}

/* Ensure responsiveness while keeping 2 columns */
@media (max-width: 992px) {
  .cta-container {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .cta-container {
    flex-direction: column; /* Stacks columns on small screens */
  }

  .ctaBox {
    flex: 1 1 100%; /* Takes full width on smaller screens */
    max-width: 100%;
  }
}

/*START TITLE SECTION*/
.titleTop-Out {
  background-image:  url(https://cdn.ymaws.com/aspenational.site-ym.com/resource/resmgr/summit2025/aspe-omaha_skyline_2025_vf-2.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
  padding: 190px 0;
  color: #fff;
  text-align: center;

}
.titleTop-Out h1 {
  color: #fff;
  font-size: 4.4rem;
  font-weight: 700;
  margin: 0 auto;
  padding: 0 15px;
}

/*START MICRO VIDEO CAROUSEL STYLE*/
#videoCarousel {
  padding: 45px 0 60px;
  background-color: #e6e7e8;
}
#videoCarousel .carousel-indicators .active {
  background-color: #696A6D;
}
#videoCarousel .carousel-indicators li {
  background-color: #696A6D;
  border-color: #696A6D;
}
#videoCarousel .hpTitle {
  text-align: center;
}
#videoCarousel .course-item {
  padding: 15px 0;
  margin-bottom: 20px;
}
#videoCarousel .course-graphic {
  margin-bottom: 50px;
}
#videoCarousel .course-graphic img {
  box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.2);
}
#videoCarousel .course-text {
  text-align: center;
}
#videoCarousel .course-text a {
  color: #236384;
}
#videoCarousel .course-text a:hover {
  color: #6b6c73;
}
#videoCarousel .course-text h3 {
  color: #236384;
  font-size: 16px;
  font-weight: 700;
  margin: 0 auto 15px;
  line-height: normal;
}
#videoCarousel .course-text p {
  font-size: 13px;
  font-style: italic;
}

/*START TESTIMONIAL CAROUSEL STYLE*/
#testimonialCarousel {
  background-color: #709b7c;
  color: #fff;
  padding: 20px;
}
#testimonialCarousel .border {
  border: 2px solid #fff;
  padding: 45px 0;
}
#testimonialCarousel .hpTitle h1 {
  color: #fff;
}
#testimonialCarousel .carousel-indicators {
  bottom: 36px;
}
#testimonialCarousel .carousel-indicators li {
  background-color: #fff;
}
#testimonialCarousel .hpTitle {
  text-align: center;
}
#testimonialCarousel .testimonial {
  text-align: center;
}
#testimonialCarousel .testimonial p {
  color: #fff;
  font-size: 17px;
  margin: 0 auto 40px;
  max-width: 480px;
}
#testimonialCarousel .testimonial h3 {
  font-style: italic;
  font-size: 18px;
  margin-bottom: 45px;
  color: #fff;
  font-weight: 400;
}

/*START HP BOTTOM IMAGE STYLE*/
.btmImage-out {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://cdn.ymaws.com/aspenational.site-ym.com/resource/resmgr/microsite/images/bttm-img.jpg);
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 150px 0;
  color: #fff;
}
.btmImg-text {
  max-width: 580px;
}
.btmImg-text h1 {
  color: #fff;
  font-weight: 700;
  font-size: 4.4rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  margin: 0 auto 5px;
  text-transform: none;
}
.btmImg-text p {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 300;
}
/*START SP VIDEO CATALOG STYLE*/
.spCatalog-out {
  padding: 60px 0;
}
.catalog-item {
  padding: 15px;
  margin-bottom: 20px;
  -webkit-transition: all 200ms linear 0s !important;
  -moz-transition: all 200ms linear 0s !important;
  -ms-transition: all 200ms linear 0s !important;
  -o-transition: all 200ms linear 0s !important;
  transition: all 200ms linear 0s !important;
}
.catalog-item:hover {
  background-color: #002856;
  padding: 15px;
}
.catalog-item:hover {
  background-color: #a5bba9;
}
.catalog-graphic {
  margin-bottom: 30px;
}
.catalog-graphic img {
  box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.2);
}
.catalog-item:hover p {
  color: #fff;
}
.catalog-item:hover h3 {
  color: #fff;
}
.catalog-text {
  text-align: center;
}
.catalog-text p {
  font-size: 13px;
  font-style: italic;
}
.catalog-text a {
  color: #002856;
}
.catalog-text a:hover {
  color: #62b49e;
}
.catalog-text h3 {
  color: #002856;
  font-size: 14px;
  line-height: normal;
  font-weight: 600;
  margin: 0 auto 15px;
}
.catalog-item .catalog-call {
  text-align: center;
  min-height: 50px;
  margin-top: 20px;
}
.catalog-item .catalog-call .microbutton {
  display: none;
}
.catalog-item:hover .catalog-call .microbutton {
  display: inline-block;
}


/* Filter Page */
#filter-btns h6 {
    font-weight: normal;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 0;
}
#filter-btns .panel-default {
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
		margin: 0;
}
#filter-btns .panel-heading {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
		position: relative;
}
#filter-btns .panel-heading a {
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 100%;
    display: block;
    position: relative;
		text-decoration: none;
}
#filter-btns .panel-heading a:after {
    content: "+";
    position: absolute;
    right: 0;
    top: -2px;
    font-weight: bold;
    font-size: 16px;
}
#filter-btns .panel {
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    margin: 0;
}
#filter-btns .panel-body {
    padding: 15px 15px 10px;
}
#filter-btns .panel-body .btn {
    display: block;
    width: 100%;
    line-height: normal;
    font-weight: normal;
    text-align: left;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 13px;
    margin-top: 10px;
		outline: none;
}
#filter-btns .panel-body .btn:hover {
    color: #6b6c3;
}
#filter-selections {
    display: flex;
    flex-wrap: wrap;
}
.filterDiv {
    width: 33.33%;
    display: flex;
		display: none;
}

/* Course Detail Page */
.spCourseDetails-out {
    padding: 70px 0 50px;
}
.cd-desc {
    font-size: 16px;
    color: #236384;
}
.cd-desc h1 {
  color: #236384;
  font-size: 3.2rem;
  font-weight: 700;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  margin: 0 auto 30px;
  line-height: 4rem;
}
.cd-img {
  padding-left: 90px;
}
.cd-img img {
  box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.2);
}
.cd-desc .btn {
    margin-top: 15px;
}
.spCourseAccordions-out {
    padding: 0 0 30px;
}
.course-Accordion  .panel-group {
    margin-bottom: 0;
}
.course-Accordion .panel-group .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
		margin: 0 0 5px !important;
}
.course-Accordion .panel-default>.panel-heading {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.course-Accordion .panel-title a {
    color: #fff;
    font-size: 18px;
    text-decoration: none !important;
    text-transform: uppercase;
    background-color: #448cb4;
    padding: 13px 40px 13px 20px;
    display: block;
    position: relative;
    text-align: center;
}
.course-Accordion .panel-title a.collapsed {
    background-color: #448cb4;
}
.course-Accordion .panel-title a.collapsed:hover {
    background-color: #6b6c73;
}
.course-Accordion .panel-title a::after {
    content: "-";
    font-size: 32px;
    font-weight: 300;
    line-height: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
    opacity: 0.7;
}
.course-Accordion .panel-title a.collapsed::after {
    content: "+";
}
.course-Accordion .microbutton {
  margin: 10px auto 5px;
}


You said:
i would like css and html code to change this from 3 text columns to one graphic picture
ChatGPT said:

Here’s the HTML and CSS to change a three-text-column layout into a single graphic picture. Let me know if you need adjustments!

This code will display a single centered image instead of three text columns. Replace "your-image.jpg" with your actual image file. Let me know if you need any modifications!
You said:
does the css no change
ChatGPT said:

Yes, the CSS is already structured to display a single graphic image instead of three text columns. It centers the image in the viewport and ensures it scales properly within a container.

However, if your previous layout had three text columns, you might need to remove any unnecessary styles (like display: flex or grid settings that arranged text in columns). Let me know if you need further refinements!
You said:
this is the old html code : <!-- Earn Certificate Section -->
<div class="spEarnCertificate-Out">
    <div class="container">
        <div class="hpTitle">
            <h1>Who Should Earn This Certificate:</h1>
        </div>

        <!-- Start Certificate Row -->
        <div class="row">
            <!-- Certificate 1 -->
            <div class="col-sm-4">
                <div class="certBox" id="cert1">
                    <div class="title">Brand New Estimators</div>
                    <div class="cert-text">
                        <p>While there is no college degree in estimating, this certificate will educate you on all the ins-and-outs of the estimating profession so that you can jump into an exciting new career.</p>
                    </div>
                </div>
            </div>

            <!-- Certificate 2 -->
            <div class="col-sm-4">
                <div class="certBox" id="cert2">
                    <div class="title">Field Workers Looking for an Office Job</div>
                    <div class="cert-text">
                        <p>If you've been working in the field for any amount of time, you know how hard the day to day demands can be on your body. With this certificate, you can learn a new skill and enjoy a career indoors behind a desk.</p>
                    </div>
                </div>
            </div>

            <!-- Certificate 3 -->
            <div class="col-sm-4">
                <div class="certBox" id="cert3">
                    <div class="title">Seasoned Estimators</div>
                    <div class="cert-text">
                        <p>Has it been a while since you refreshed your basic skillset in estimating? Or are you looking to train your new estimators? This certificate will help remind you of the foundational elements of estimating and bring your team up
                            to speed.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
ChatGPT said:

Here’s the updated HTML and CSS that replaces the three text columns with a single graphic image:

The new code now replaces the three-column layout with a single centered graphic image. Let me know if you need any further modifications!
You said:
that did not work
ChatGPT said:

I see what happened! Let's make sure the new code properly replaces your existing structure. Here’s the correct update, transforming your three-column layout into a single graphic while keeping your container structure intact.

I've replaced your three-column text layout with a single graphic while maintaining your original container structure. Let me know if you need any tweaks!
You said:
it is changing the entire page and not jsut a section of the page
ChatGPT said:

Got it! You want to update only the section while keeping the rest of the page intact. Here’s an update that modifies only the .spEarnCertificate-Out section by replacing the three text columns with a single image while keeping everything else unchanged.

Now, only the .spEarnCertificate-Out section has been modified, replacing the three columns with a single image while keeping the rest of the page unchanged. Let me know if you need any further tweaks!
You said:
can you divide it our as to what needs to change in my html and on css 
ChatGPT said:

Here’s how you can modify your existing HTML and CSS to transition from three text columns to a single graphic:
HTML Changes:

    Remove the three .col-sm-4 divs that contained the text-based certificate information.
    Add a new div (graphic-container) to hold the image.
    Ensure your img tag has the correct source for your graphic.

Your updated HTML section should look like this:

<div class="spEarnCertificate-Out">
    <div class="container">
        <div class="hpTitle">
            <h1>Who Should Earn This Certificate:</h1>
        </div>
        <!-- Graphic replacing the three text columns -->
        <div class="graphic-container">
            <img src="your-image.jpg" alt="Graphic Picture" class="graphic">
        </div>
    </div>
</div>

CSS Changes:

    Remove styles related to .row, .col-sm-4, and .certBox (if they exist in your CSS file).
    Add styles for .graphic-container to center the image.
    Ensure the .graphic image is responsive and scales properly.

Your updated CSS should include:

.graphic-container {
    text-align: center;
    margin-top: 20px;
}

.graphic {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
}

Summary of Changes

✅ Removed: Three-column layout (.col-sm-4 divs)
✅ Added: A centered div.graphic-container with an img tag
✅ Updated CSS: Centered the image and made it responsive

Let me know if you need further refinements! 🚀
You said:
where does the above css go in this: /* Certificate in Construction Estimating Page */
.spEarnCertificate-Out {
  background-color: #709b7c;
  color: #fff;
  text-align: center;
  padding: 45px 0 60px;
}
.spEarnCertificate-Out .hpTitle h1 {
  color: #fff;
}
.certBox {
  margin-bottom: 20px;
  padding-left: 38px;
  padding-right: 38px;
}
.certBox .title {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
  min-height: 58px;
  line-height: 26px;
}

.spCertificateDetails-Out {
  padding: 70px 0 50px;
}
.certDetails-img img {
  margin: 0 auto;
}
.certDetails-desc {
  font-size: 16px;
  color: #334d46;
}
.certDetails-desc h1 {
  color: #334d46;
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0 auto 30px;
  line-height: 4rem;
}
ChatGPT said:

You should add the new CSS rules for .graphic-container and .graphic inside your existing stylesheet. The best place to insert them is right after the .spEarnCertificate-Out styles, since they are directly related to that section.
Updated CSS with New Rules:

/* Certificate in Construction Estimating Page */
.spEarnCertificate-Out {
  background-color: #709b7c;
  color: #fff;
  text-align: center;
  padding: 45px 0 60px;
}
.spEarnCertificate-Out .hpTitle h1 {
  color: #fff;
}

/* Add the new styles here */
.graphic-container {
  text-align: center;
  margin-top: 20px;
}

.graphic {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
}

/* Existing Styles */
.certBox {
  margin-bottom: 20px;
  padding-left: 38px;
  padding-right: 38px;
}
.certBox .title {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
  min-height: 58px;
  line-height: 26px;
}

.spCertificateDetails-Out {
  padding: 70px 0 50px;
}
.certDetails-img img {
  margin: 0 auto;
}
.certDetails-desc {
  font-size: 16px;
  color: #334d46;
}
.certDetails-desc h1 {
  color: #334d46;
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0 auto 30px;
  line-height: 4rem;
}

Why Place It Here?

    Since .spEarnCertificate-Out is the wrapper for this section, it's logical to place .graphic-container immediately after it.
    This ensures styles remain organized and easier to manage.

Let me know if you need more refinements! 🚀
You said:
it is not centered on the page
ChatGPT said:

If the image is not centering properly, you may need to ensure that the container is properly aligned. Try updating your CSS like this:
Updated CSS for Centering the Image

.graphic-container {
  display: flex;  /* Enables flexbox */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  width: 100%; /* Ensures it spans full width */
  min-height: 300px; /* Adjust based on your design */
  padding: 20px 0;
}

.graphic {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
}

Additional Fixes:

    If you want it centered vertically on the whole page, apply these styles to .spEarnCertificate-Out:

.spEarnCertificate-Out {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Makes it take the full viewport height */
}

If it's inside a smaller section, try adding text-align: center; to the .spEarnCertificate-Out:

    .spEarnCertificate-Out {
        text-align: center;
    }

Let me know if it's still off, and I can fine-tune it further! 🚀
You said:
please give complete css code
ChatGPT said:

Here is the complete CSS with all necessary modifications to ensure the image is properly centered both horizontally and vertically within the .spEarnCertificate-Out section.
Final Updated CSS:

/* Certificate in Construction Estimating Page */
.spEarnCertificate-Out {
  background-color: #709b7c;
  color: #fff;
  text-align: center;
  padding: 45px 0 60px;

  /* Center the section vertically if needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensures the section takes up the full viewport height */
}

.spEarnCertificate-Out .hpTitle h1 {
  color: #fff;
}

/* New styles for centering the image */
.graphic-container {
  display: flex;  /* Enables flexbox */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  width: 100%; /* Ensures it spans full width */
  min-height: 300px; /* Adjust based on your design */
  padding: 20px 0;
}

.graphic {
  width: 100%;
  max-width: 800px; /* Prevents it from getting too large */
  height: auto;
  display: block;
}

/* Existing Styles */
.certBox {
  margin-bottom: 20px;
  padding-left: 38px;
  padding-right: 38px;
}
.certBox .title {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
  min-height: 58px;
  line-height: 26px;
}

.spCertificateDetails-Out {
  padding: 70px 0 50px;
}
.certDetails-img img {
  margin: 0 auto;
}
.certDetails-desc {
  font-size: 16px;
  color: #334d46;
}
.certDetails-desc h1 {
  color: #334d46;
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0 auto 30px;
  line-height: 4rem;
}

/* Certificate in Construction Estimating Page */
.spEarnCertificate-Out {
  background-color: #ecce78;
  color: #fff;
  text-align: center;
  padding: 20px 0 35px;

  /* Remove full viewport height to prevent excessive space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Title styling remains unchanged */
.spEarnCertificate-Out .hpTitle h1 {
  color: #fff;
}

/* Adjust the image container to avoid excessive space */
.graphic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

/* Ensure the image is responsive and well-sized */
.graphic {
  width: 100%;
  max-width: 600px; /* Adjust this value if needed */
  height: auto;
  display: block;
}


.spCertCatalog-out {
  background-color: #a5bba9;
  padding: 70px 0 50px;
}
.spCertCatalog-out .hpTitle h1 {color: #fff;}

#certification-courses {
  display: flex;
  flex-wrap: wrap;
}
.certCourse {
  width: 33.33%;
  display: flex;
}
.certCourse-item {
  padding: 15px 30px;
  margin-bottom: 20px;
}
.certCourse-graphic {
  margin-bottom: 30px;
}
.certCourse-text {
  text-align: center;
  color: #fff;
  min-height: 140px;
}
.certCourse-text h3 {
  color: #fff;
  font-size: 14px;
  line-height: normal;
  font-weight: 600;
  margin: 0 auto 15px;
}
.certCourse-text p {
  font-size: 13px;
  font-style: italic;
}
.certCourse-item .certCourse-call {
  text-align: center;
  margin-top: 20px;
}



.spPolicyAccordions-out {
    padding: 70px 0 50px;
}
.policy-Accordion  .panel-group {
    margin-bottom: 0;
}
.policy-Accordion .panel-group .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
		margin: 0 0 5px !important;
}
.policy-Accordion .panel-default>.panel-heading {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.policy-Accordion .panel-title a {
    color: #fff;
    font-size: 18px;
    text-decoration: none !important;
    text-transform: uppercase;
    background-color: #3f7bad;
    padding: 13px 40px 13px 20px;
    display: block;
    position: relative;
    text-align: center;
}
.policy-Accordion .panel-title a.collapsed {
    background-color: #62b49e;
}
.policy-Accordion .panel-title a.collapsed:hover {
    background-color: #3f7bad;
}
.policy-Accordion .panel-title a::after {
    content: "-";
    font-size: 32px;
    font-weight: 300;
    line-height: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
    opacity: 0.7;
}
.policy-Accordion .panel-title a.collapsed::after {
    content: "+";
}
.policy-Accordion .microbutton {
  margin: 10px auto 5px;
}




/* Media Queries */
@media (min-width: 768px) {
  .myContainer {
    width: 750px
  }
}
@media (min-width: 992px) {
  .myContainer {
    width: 970px
  }
}
@media (min-width: 1200px) {
  .myContainer {
    width: 1170px
  }
}


    
    
@media all and (max-width:1199px) {
  .hero-text h1 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .hero-text p { line-height: 2.5rem; font-size: 1.5rem;}
  .btmImage-out {
    padding: 100px 0;
  }
  .footer .links {
    padding-left: 80px;
  }
  
.cd-img {
  padding-left: 50px;
}
}


@media (max-width: 991px) {
.ctaBox {
  padding-left: 15px;
  padding-right: 15px;
}
#videoCarousel .course-graphic {
  margin-bottom: 20px;
}
  .footer {
    text-align: center;
  }
  
.cd-desc {
  margin-bottom: 50px;
}
.cd-img {
  padding-left: 15px;
}
.certBox {
  padding-left: 15px;
  padding-right: 15px;
}
.certDetails-img {
  margin-bottom: 50px;
}

.certCourse-item {
  padding: 15px 12px;
}
}


@media all and (max-width: 959px) {
  .footer .links {
    padding-left: 5px;
  }
}


@media all and (max-width: 767px) {
  .topbar-out, .header-out, .menu-out {
    position: inherit;
  }
  #mainmenu .nav {
    margin: 0;
    width: 100%;
  }
  #menu_row .navbar-collapse {
    background-color: #3f7bad;
    border: none;
    padding: 0;
    text-align: left;
  }
  #menu_row .navbar-collapse .navbar-nav li:first-child {
    margin-top: 15px;
  }
  #menu_row .navbar-collapse .navbar-nav li:last-child {
    margin: 15px;
  }
	#mainmenu .navbar-nav li:last-child {
    padding: 0;
	}
  #menu_row .navbar-collapse .navbar-nav li a {
    background-color: transparent;
    color: #fff;
    text-align: center;
    font-weight: 400;
    line-height: 30px;
    padding: 5px 15px;
    position: relative;
    text-shadow: none;
    text-transform: none;
    -webkit-transition: all 200ms linear 0s;
    -moz-transition: all 200ms linear 0s;
    -ms-transition: all 200ms linear 0s;
    -o-transition: all 200ms linear 0s;
    transition: all 200ms linear 0s;
  }
  #mainmenu .navbar-nav li:last-child:hover {
    background-color: #002856;
  }
	
  .titleTop-Out {
    margin-top: 0px;
    padding: 60px 0;
  }
  .hero-image {
    margin-top: 0;
    text-align: center;
		height: auto;
    padding: 50px 0 70px;
  }
  .hero-text {
  max-width: 100%;
}
  .hero-text p {line-height: 2.1rem;}
  .ctaBox {
    max-width: 600px;
    margin: 0 auto 40px;
    padding-right: 0;
    padding-left: 0;
	}
	.ctaBox:after {
			display: none;
	}
  .ctaBox .title {
    margin-bottom: 10px;
    min-height: auto;
  }
  .cta-call {
    margin-top: 0px;
  }
	#videoCarousel {
    padding: 30px 0 60px;
	}
  #videoCarousel .course-item {
    padding: 0;
    background-color: #f4f4f4;
    box-shadow: 0px 2px 6px -1px rgba(0,0,0,0.2);
    max-width: 480px;
    margin: 0 auto 20px;
  }
  #videoCarousel .course-graphic {margin-bottom: 0;}
  #videoCarousel .course-graphic img {box-shadow: none;}
  #videoCarousel .course-text {
    padding: 15px;
  }
  .btmImage-out {
    text-align: center;
		height: auto;
    padding: 40px 0 70px;
  }
  .btmImg-text p {
    padding-right: inherit;
  }
	.spCourseDetails-out {
		padding: 30px 0 50px;
	}
	.cd-desc {
    margin-bottom: 35px;
	}
	.course-Accordion .panel-title a {
    font-size: 15px;
    text-align: left;
	}
  .footer-out {
    text-align: center;
  }
  .footer .ft-logo {
			width: 95px;
			margin: 0 auto 35px;
	}
  .footer .col-sm-4:first-child {
    border-right: none;
  }
  .footer .contact p:last-child {
    padding-right: inherit;
  }
  .footer .foot-social {
    margin-top: 35px;
    margin-bottom: 35px;
  }
  .footer .foot-social a:last-child {
    margin-right: 0;
  }
  .footer .links {
    padding-left: inherit;
  }
  
  #filter-selections {
    margin-top: 50px;
  }
  .certBox {
    max-width: 600px;
    margin: 0 auto 40px;
    padding-right: 0;
    padding-left: 0;
	}
  .certBox .title {
    margin-bottom: 10px;
    min-height: auto;
  }
  
.certCourse {
  width: 100%;
    margin-bottom: 60px;
}
.certCourse-graphic {
  margin-bottom: 20px;
}
.certCourse-graphic img {
  margin: 0 auto;
}
.certCourse-item {
  padding: 0;
  max-width: 480px;
  margin: 0 auto;
}
.certCourse-text h3 {
  margin-bottom: 8px;
}
.certCourse-text {
  min-height: auto;
}

 .policy-Accordion .panel-title a {
    font-size: 15px;
    text-align: left;
	}
  
}


@media all and (max-width: 600px) {
	.filterDiv {
			width: 100%;
	}
.catalog-item, .catalog-item:hover {
  background-color: #f0f0f0;
}
.catalog-graphic {
  margin-bottom: 15px;
}
.catalog-text h3 {
  margin-bottom: 5px;
}
.catalog-item:hover h3 {
  color: #002856;
}
.catalog-item:hover p {
  color: #000;
}
.catalog-item .catalog-call .microbutton {
  display: inline-block;
}
}


@media all and (max-width: 480px) {}


@media all and (max-width: 320px) {