styles.css

/* styles for banner template */

.bannerbox {display:flex; background:#f8f9fa; border-radius:6px}

.bannerbox .floatleft {margin:0;}

.banner-image { flex-grow:0;  flex-basis:auto;}

.banner-content {flex-grow:1; flex-shrink:1; flex-basis:60%}

.bannerbox .banner-title .bannerhd {font-size:1.6rem; font-weight:bold}

.bannerbox  h1.bannerhd  {font-size:1.6rem; font-weight:bold; margin:0; padding:0}

.bannerbox .banner-text {font-size:1.3rem;}

.banner-content {padding:10px;}

.bannerbox.bgicon1, .bannerbox.bgicon2, .bannerbox.bgicon3, .bannerbox.swoosh  {position:relative;overflow:hidden}

.bannerbox.bgicon1::before {color:white; opacity: 0.5; font-size:15em;font-family: "Font Awesome 6 Free";  font-weight: 900;  content: "\f0ac";

 position: absolute; top: -95px;right: 10px;}

.bannerbox.bgicon2::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "bootstrap-icons"; font-weight: 400;  content: "\f1dd"; position: absolute; top: -40px; right: 10px;}

.bannerbox.bgicon3::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "Font Awesome 6 Free"; font-weight: 900;  content: "\e592"; position: absolute; top: -38px; right: 5px;}

.bannerbox.swoosh {border-bottom: 1px solid #a6a6a7;border-radius: 0 0 80% 0%; overflow: hidden;position:relative;}

/*box swoosh*/

.swoosh-subtle-banner {

  position: relative;

  overflow: hidden;

}



/* wavy mist swoosh */

.swoosh-subtle-banner::after {

  content: "";

  position: absolute;

  top: -5%;

  left: 10%;

  width: 120%;

  height: 80%;

  transform: translate(-50%, -50%) rotate(-10deg);



  background:

    radial-gradient(

      ellipse at 30% 50%,

      rgba(200, 200, 200, 0.35) 10%,

      rgba(200, 200, 200, 0.18) 40%,

      transparent 10%

    ),



    radial-gradient(

      ellipse at 70% 60%,

      rgba(180, 180, 180, 0.30) 0%,

      rgba(200, 200, 200, 0.15) 45%,

      transparent 75%

    );



  border-radius: 50%;

}



@media only screen

  and (max-width: 600px) {

.bannerbox {flex-wrap:wrap;}

.banner-image {flex-basis:100%;}

.banner-image img{ width: 100%;}

.banner-content {flex-basis:100%}

}