CSS

Bootstrap Utility Example

p-4 m-auto position-relative overflow-hidden w-76

Css

Custom CSS Example

custom-image

Css

.custom-image {
}

Custom Callout Example

callout

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
       content: "";
    background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

Subheader border

orange_border

Css

.orange_border{
  border-bottom-style: solid;
  border-color: orange;
  border-width: thick;
 border-height: 5px;
}

Header borders

blue_border

Css

.blue_border{
  border-bottom-style: solid;
  border-color: #0073bd ;
  border-width: thick;
  border-height: 5px;
}

Header Gradient

headerSection

Css

.headerSection{
background: radial-gradient(circle at top left,#0073bd,#003976 80%);
background-width: 100%;
                }

Thumbnails

img-thumbnail

Css

Footer border

footer_orange_border

Css

.footer_orange_border{
  border-top-style: solid;
  border-color: orange;
  border-width: thick;
 border-height: 5px;
}

Footer Border white

footer_white_border

Css

.footer_white_border{
  border-top-style: solid;
  border-color: white;
  border-width: 1px ;
 border-height: 5px;
}

products_headers

productheader

Css

 .productheader{
                color: #003976;
                 background: linear-gradient(to bottom, #f8eb61, #efab00);
width:100%;
font-weight: 600;
                }

stripeblue

stripeblue

Css

.stripeblue{
                    background-color: #0073bd !important;
                    height: 4px;
                    width: 100%;
                }

about_us_border

about_us_border

Css

.about_us_border{
  border-border-2
  border-bottom-style: solid;
  border-bottom-color: #0073bd ;
  border-bottom-width: thick;
}

loginmodal-container

loginmodal-container

Css

@media only screen and (min-width: 1401px) {
  .loginmodal-container {
      max-width: 750px;
  }
}
.loginmodal-container {
  padding: 30px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0px auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

career

career

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
     content: "";
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

container

col-md-12 col-sm-12 col-xs-12

Css

Headings

yellowBgHeading

Css

.yellowBgHeading {
    background: linear-gradient(to bottom, #f8eb61, #efab00);
    width: 100%;
}
.yellowBgHeading h4 {
    font-weight: 600;
background: linear-gradient(to bottom, #f8eb61, #efab00);
    width: 100%;
}

Mighty Subheader border

red_border

Css

.red_border{
  border-bottom-style: solid;
  border-color: #ff3c00;
  border-width: thick;
}

Red background heading

red-bg

Css

.red-bg {
    background: linear-gradient(to bottom, #f5928f, #c60400);  
    width: 100%;
}
.red-bg h4 {
    color: white;
    margin: 7px 0;
    font-weight: 600;
    word-spacing: 0.08rem;
}

Full width footer

fullWidthFooter

Css

.fullWidthFooter {
    padding-top: 0 !Important;
    padding-bottom: 0 !Important;
    width: 100%;
}
.fullWidthFooter div.mw-75ch {
    max-width: unset !Important;
    width: 100%;
}

Mighty footer border

red_footer_border

Css

.red_footer_border {
  border-top-style: solid;
  border-color: #ff3c00;
  border-width: thick;
}

Might OffCanvas

mightyOffCanvas

Css

.cus-offcanvas__container .offcanvas-navigation .nav, .cus-offcanvas__container {
    background-color: var(--swift-background-color) !Important;
}

Industries Title

industriesContainer w-100

Css

.industriesContainer  {
    background: radial-gradient(circle at top left, #0073bd, #003976 80%);
}
.industriesContainer #topRow .itemTitle {
    font-size: 24px;
    text-transform: uppercase;
}
    .industriesContainer .mb-lg-4 {
        margin-bottom: 0 !important;
    }