@charset "utf-8";

/* =================================================================================== //

 .d8888b.  888b     d888 8888888b.       88888888888 888                                           
d88P  Y88b 8888b   d8888 888  "Y88b          888     888                                           
Y88b.      88888b.d88888 888    888          888     888                                           
 "Y888b.   888Y88888P888 888    888          888     88888b.   .d88b.  88888b.d88b.   .d88b.       
    "Y88b. 888 Y888P 888 888    888          888     888 "88b d8P  Y8b 888 "888 "88b d8P  Y8b      
      "888 888  Y8P  888 888    888          888     888  888 88888888 888  888  888 88888888      
Y88b  d88P 888   "   888 888  .d88P          888     888  888 Y8b.     888  888  888 Y8b.          
 "Y8888P"  888       888 8888888P"           888     888  888  "Y8888  888  888  888  "Y8888       
                                                                                                   
                                                                                                   
                                                                                                   
d8b           .d888                                                                                
Y8P          d88P"                                                                                 
             888                                                                                   
888 88888b.  888888 .d88b.                                                                         
888 888 "88b 888   d88""88b                                                                        
888 888  888 888   888  888                                                                        
888 888  888 888   Y88..88P                                                                        
888 888  888 888    "Y88P" 


 Theme Name: Custom website developed by Somdow
 Theme URI: somdow.com
 Author URI: somdow.com
 Description: A custom SMD Theme for me by me. Hey if you are back here looking at my code...well.....WELCOME! hope you like what you see and yeah. If you need me for anything, give me a holler. I'm always around.
 Author: Somdow
 Version: 1.0

 */

/* =================================================================================== //

 .d8888b.   .d8888b.   .d8888b.                                         888    
d88P  Y88b d88P  Y88b d88P  Y88b                                        888    
888    888 Y88b.      Y88b.                                             888    
888         "Y888b.    "Y888b.        888d888 .d88b.  .d8888b   .d88b.  888888 
888            "Y88b.     "Y88b.      888P"  d8P  Y8b 88K      d8P  Y8b 888    
888    888       "888       "888      888    88888888 "Y8888b. 88888888 888    
Y88b  d88P Y88b  d88P Y88b  d88P      888    Y8b.          X88 Y8b.     Y88b.  
 "Y8888P"   "Y8888P"   "Y8888P"       888     "Y8888   88888P'  "Y8888   "Y888 
// ==================================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0px;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/*! NORMALIZE CSS RESET 4.1.1 */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */


/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* =================================================================================== //
8888888 888b    888 8888888 88888888888                         
  888   8888b   888   888       888                             
  888   88888b  888   888       888                             
  888   888Y88b 888   888       888                             
  888   888 Y88b888   888       888                             
  888   888  Y88888   888       888                             
  888   888   Y8888   888       888                             
8888888 888    Y888 8888888     888                             
                                                                
                                                                
                                                                
 .d8888b. 88888888888 Y88b   d88P 888      8888888888 .d8888b.  
d88P  Y88b    888      Y88b d88P  888      888       d88P  Y88b 
Y88b.         888       Y88o88P   888      888       Y88b.      
 "Y888b.      888        Y888P    888      8888888    "Y888b.   
    "Y88b.    888         888     888      888           "Y88b. 
      "888    888         888     888      888             "888 
Y88b  d88P    888         888     888      888       Y88b  d88P 
 "Y8888P"     888         888     88888888 8888888888 "Y8888P"  
// ==================================================================================== */
:root{
    --websiteMainWidth: 1200px;
    --websiteBrandColors: #fff;
    --websiteBrandcolors2: #fff;
    --websiteBrandColors3: #fff;
    --SMDorange: #f15a25;
    --siteWidth1000: 1000px;
    --siteWidth1200: 1200px;
    --siteWidth1600: 1600px;
    --siteBgColor: #16181d;
    --cardsBackgroundColor: rgba(63, 63, 63, 0.85);
    --emailCardBackgroundColor: rgba(0,0,0,0.74);
    --attentionFocusColor: #F5F3C2; 
    --regularFontColor: #a9a9a9;
}

html {
   scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    height: 100%;
    font-size: 62.5%;
    font-size:1.1rem;
    background-color: #d1d0d0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background:var(--siteBgColor); 
    color: #fff;
}

.sideWidth1200{
  max-width: var(--siteWidth1200);
  margin:0px auto;
  padding:0px 6px;
}

.sideWidth1600{
  max-width: var(--siteWidth1600);
  margin:0px auto;
  padding:0px 6px;
}

.siteWidth1000{
  max-width: var(--siteWidth1000);
  margin: 0px auto;
  padding:0px 6px;
}



a {
  text-decoration: none;
  color:#fff;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearEm {
  clear: both;
}

.clearEmL {
  clear: left;
}

.clearEmR {
  clear: right;
}

.mainSiteWidth {
  max-width: var(--websiteMainWidth);
  margin: 0px auto;
}

.squareBox{
    position:absolute;
    width:10px;
    height:3px;
    background-color: var(--SMDorange);
    z-index: 11;
}

.squareBoxTopLeft{
    top:20px;
    left:20px;
}

.squareBoxBottomLeft{
    bottom:20px;
    left:20px;
}

.squareBoxTopRight{
    top:20px;
    right:30px;
}

.squareBoxBottomRight{
    bottom:20px;
    right:30px;
}

.SMDbutton{
    background-color: var(--SMDorange);
    border-radius: 10px;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
}

h1, h2, h3{
  font-family: "eczar", serif;
  font-weight: bold;
  color: var(--attentionFocusColor);
  font-size: clamp(1.4rem, 3vw, 3rem);
}

/* h1{
  font-size: clamp(1.4rem, 3vw, 3rem);
}

h2{
  font-size: clamp(1.4rem, 2.6vw, 2.5rem);
} */

.oragenGlow{
  box-shadow: 0px 0px 25px -2px rgba(241,91,37,0.9);
  transition: 200ms ease-in-out;
}



/* =========================================================  custom scrollbar design */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb {
    background-color: #f15a25;
    /* outline: 1px solid slategrey; */
}
/* =========================================== end custom scrollbar */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MY GEN STYLES INIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* =================================================================================== //
888    888 8888888888        d8888 8888888b.  8888888888 8888888b.  
888    888 888              d88888 888  "Y88b 888        888   Y88b 
888    888 888             d88P888 888    888 888        888    888 
8888888888 8888888        d88P 888 888    888 8888888    888   d88P 
888    888 888           d88P  888 888    888 888        8888888P"  
888    888 888          d88P   888 888    888 888        888 T88b   
888    888 888         d8888888888 888  .d88P 888        888  T88b  
888    888 8888888888 d88P     888 8888888P"  8888888888 888   T88b 
// ==================================================================================== */
header{
  display:flex;
  justify-content: space-between;
  padding-top:30px;
  flex-wrap: nowrap;
}

nav{
  margin-left:auto;
  display:flex;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 2px 0px;
}

nav ul{
  display:flex;
  gap:28px;
  list-style: none;
  justify-content: center;
  align-items: center;
}

#mobileMenuButton {
    margin-right:14px;
    border-radius: 50%;
    display: none;
}

#primary-mobile-menu {
    border: none;
    background-color: #d9d9d9;
    padding: 4px 10px 4px 30px;
    color: #000000;
    height:100%;
}

.close {
    display: none;
}

#mainLogo{
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

#mainLogoForMobileOnly{
  width:100%;
  text-align: center;
  display:none;
  padding-top: 40px;
}

#heroSectionWrapperRow1{
  background:url("images/herobg.png") no-repeat top;
  background-size: cover;
  height: 100%;
  min-height:900px;
  position:relative;
  padding:0px 20px;
}

#heroSectionTextWrapper{
  margin:10% auto;
  flex-basis:65%;
}

#heroSectionRightColumn{
  flex-basis: 50%;
  pointer-events: none;
}

#heroSectionRightColumn img{
  width: 100%;
  height: auto;
  display: block;
  margin-left: 20%;
}

#heroSectionColumnWrappers{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:20px;
}

#heroSectionTextWrapper .SMDbutton{
  display: inline-block;
  margin-top:60px;
}

#heroSectionTextInnerWrapper{
  flex-basis:60%;
  margin:0px auto;
}

#heroSectionRightWrapper{
  margin-left:auto;
  flex-basis: 48%;
}

#heroSectionRightWrapper img{
  width: 100%;
  height: auto;
  display: block;
  margin-top:-135px;
  margin-left:124px;
}

#mobileMenuWrapper{
    position: fixed;
    z-index: 99;
    overflow: hidden;
    position:fixed;
    width:100%;
    height:100%;
    display:none;
    background-color: #fff;
    transition: 300ms ease-in-out;
    color:#fff;
    font-size:2rem;
}

#mobileMenuWrapper ul li{
    margin-left:27px;
    list-style-type: none;
    margin-bottom:20px;
}

#mobileMenuWrapper a {
    color:#000;
    
    border-bottom: 1px solid #dadada;
}

#mobileMenuFooterButton {
    position: fixed;
    bottom: 27px;
}

.preloaderW {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
}

#scrollDownLottieWrapper{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    overflow: hidden;
    cursor: pointer;
}

#ipadSizedMenubuttonForMobileOnly{
  display:none;
  font-size:1.5rem;
}

/* =================================================================================== //

 .d8888b. 8888888 8888888b.  8888888888 888888b.         d8888 8888888b.  
d88P  Y88b  888   888  "Y88b 888        888  "88b       d88888 888   Y88b 
Y88b.       888   888    888 888        888  .88P      d88P888 888    888 
 "Y888b.    888   888    888 8888888    8888888K.     d88P 888 888   d88P 
    "Y88b.  888   888    888 888        888  "Y88b   d88P  888 8888888P"  
      "888  888   888    888 888        888    888  d88P   888 888 T88b   
Y88b  d88P  888   888  .d88P 888        888   d88P d8888888888 888  T88b  
 "Y8888P" 8888888 8888888P"  8888888888 8888888P" d88P     888 888   T88b 

 // ==================================================================================== */


 /* =================================================================================== //
888b     d888 8888888 8888888b.                                           
8888b   d8888   888   888  "Y88b                                          
88888b.d88888   888   888    888                                          
888Y88888P888   888   888    888                                          
888 Y888P 888   888   888    888                                          
888  Y8P  888   888   888    888                                          
888   "   888   888   888  .d88P                                          
888       888 8888888 8888888P"                                           
                                                                          
                                                                          
                                                                          
 .d8888b.  8888888888 .d8888b. 88888888888 8888888 .d88888b.  888b    888 
d88P  Y88b 888       d88P  Y88b    888       888  d88P" "Y88b 8888b   888 
Y88b.      888       888    888    888       888  888     888 88888b  888 
 "Y888b.   8888888   888           888       888  888     888 888Y88b 888 
    "Y88b. 888       888           888       888  888     888 888 Y88b888 
      "888 888       888    888    888       888  888     888 888  Y88888 
Y88b  d88P 888       Y88b  d88P    888       888  Y88b. .d88P 888   Y8888 
 "Y8888P"  8888888888 "Y8888P"     888     8888888 "Y88888P"  888    Y888 
// ==================================================================================== */
#websiteInnerMainWrapper{
  margin:0px auto;
}

#whatWeDoWrapper{
  padding:0px 0px 60px 0px;  
  /* border-bottom:solid rgb(53, 53, 53) 1px; */
}

.videoWrapper{
  flex-basis: 25%;
}

.videoWrapper p{
  color: #a9a9a9;
}


.videoWrapper img, .videoWrapper video{
  display:block;
  width:100%;
  height:auto;
}

#seeItInActionWrapperInner{
  /* background:Red; */
}

.seeItInActionLeftColumn h2{
  font-size:1vw;
}

#seeItInActionWrapperInner h3{
  font-size: clamp(1rem, 1vw, 3rem);
}

#seeItInActionWrapperInner .smallGrayText{
  font-size:.7vw;
  color:#fff;
}

#seeItInActionHeaderText{
  text-align: center;
  padding:20px 0px;

}




#whatWeDoLeftCol{
  /* background:red; */
  flex-basis: 40%;  
}
#whatWeDoRightCol{
  /* background:blue; */
  flex-basis: 50%;
  margin-left: auto;
  display:flex;
  gap:6px;
}

#whatWeDoLeftCol ul{
  padding-left:20px;
}

#servicesIntroText{
  width: 80%;
  text-align: center;
  margin:6px auto 20px auto;
}

#whatWeDoOutroText{
  margin:0px auto;
  width:60%;
  text-align: center;
  /* border-bottom:solid rgb(53, 53, 53) 1px; */
  padding:60px;
}


.smallGrayText{
  font-size:.7rem;
  color:gray;
  font-style: italic;
  margin-top:6px;
}


#emailCardWrapper{
    display:none;
    width: 100%;
    height: 100%;
    background:var(--emailCardBackgroundColor);
    position:fixed;
    top:50%;
    transform: translateY(-50%);
    transition: 100ms ease-in-out;
    opacity:0;
    z-index: 10;
    overflow: hidden;
}

#emailCardInnerWrapper {
    background: #262626;
    padding: 22px 22px 60px 22px;;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    margin: 0px auto;
    z-index:11;
}

.formFields {
    background-color: transparent;
    border: none;
    outline: none;
    border-bottom: solid #999999 1px;
    margin-bottom: 20px;
    width: 100%;
    font-size: clamp(1.5rem, 1.8rem, 5vw);
    color: #fff;
    transition: 300ms ease-in-out;
}


#formCloseButton {
    color: #fff;
    font-size: 130px;
    cursor: pointer;
    position: fixed;
    top: 2%;
    right: 4%;
    z-index: 12;
}

#submitMainFormBTN {
    color: var(--attentionFocusColor);
    width: 100%;
    padding: 40px 0px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    background-color: transparent;
}

.showHideMasterContentCards{
    opacity:1 !important;
    top: 50% !important;    
}

#whatWeDoServicesBreakdownWrapper{
  display:flex;

  gap:20px;
  justify-content: center;
  align-items:flex-start;
  padding:2% 0px 10% 0px;
}

#whatWeDoServicesBreakdownWrapper p{
  color:var(--regularFontColor);
}

#whatWeDoServicesBreakdownWrapper h2{
  font-size:1.6rem;
  color:#fff;
}

.servicesBreakdownBox{
  flex-basis: 20%;
}

.serviceBox1{
  border-top:8px solid var(--SMDorange);
}

.serviceBox2{
  border-top:8px solid yellow;
}

.serviceBox3{
  border-top:8px solid purple;
}

.serviceBox4{
  border-top:8px solid lightblue;
}

.serviceBox5{
  border-top:8px solid coral;
}




/*
 .d8888b.   .d88888b.  888b    888 88888888888 8888888888 888b    888 88888888888    
d88P  Y88b d88P" "Y88b 8888b   888     888     888        8888b   888     888        
888    888 888     888 88888b  888     888     888        88888b  888     888        
888        888     888 888Y88b 888     888     8888888    888Y88b 888     888        
888        888     888 888 Y88b888     888     888        888 Y88b888     888        
888    888 888     888 888  Y88888     888     888        888  Y88888     888        
Y88b  d88P Y88b. .d88P 888   Y8888     888     888        888   Y8888     888        
 "Y8888P"   "Y88888P"  888    Y888     888     8888888888 888    Y888     888        
                                                                                     
                                                                                     
                                                                                     
 .d8888b.  888      8888888 8888888b.  8888888888 .d88888b.  888     888 88888888888 
d88P  Y88b 888        888   888  "Y88b 888       d88P" "Y88b 888     888     888     
Y88b.      888        888   888    888 888       888     888 888     888     888     
 "Y888b.   888        888   888    888 8888888   888     888 888     888     888     
    "Y88b. 888        888   888    888 888       888     888 888     888     888     
      "888 888        888   888    888 888       888     888 888     888     888     
Y88b  d88P 888        888   888  .d88P 888       Y88b. .d88P Y88b. .d88P     888     
 "Y8888P"  88888888 8888888 8888888P"  8888888888 "Y88888P"   "Y88888P"      888     
                                                                                     
                                                                                     
                                                                                     
8888888b.     d8888 888b    888 8888888888 888                                       
888   Y88b   d88888 8888b   888 888        888                                       
888    888  d88P888 88888b  888 888        888                                       
888   d88P d88P 888 888Y88b 888 8888888    888                                       
8888888P" d88P  888 888 Y88b888 888        888                                       
888      d88P   888 888  Y88888 888        888                                       
888     d8888888888 888   Y8888 888        888                                       
888    d88P     888 888    Y888 8888888888 88888888 
*/

#slideOutPanelBG{
    display:none;
    width: 100%;
    height: 100%;
    background:var(--cardsBackgroundColor);
    position:fixed;
    top:50%;
    transform: translateY(-50%);
    transition: 100ms ease-in-out;
    opacity:0;
    z-index: 20;
    overflow: hidden;
}


#slideOutPanelInsideWrapper{
    display:block;
    width: 46%;
    height: 100%;
    background:#262626;
    color:#fff;
    position:absolute;
    right:-50%;
    top:50%;
    transform: translateY(-50%);
    transition: 300ms ease-in-out;
    z-index: 21;

    overflow-y: scroll;
    overflow-x: hidden;
}

#slideOutPanelInsideWrapper p{
  color: #969696;
}

.slideoutCardContentWrapper:last-child{
  padding-bottom:100px;
}


.fadeInOutContentPanelBG{
    opacity: 1 !important;
}

.slidePanelInOut{
    right:0 !important;
}

.closeButton {
  color: #000;
  font-size: 1rem;
  position: absolute;
  right: 1%;
  top: 2%;
  cursor: pointer;
  z-index: 22;
  background-color: #fff;
  
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  
  border-radius: 50%; /* Make it a circle */
  width: 32px; /* Set the width and height to the same value */
  height: 32px; 
}

#sliderPanelCharacterImage{
  position: absolute;
  right: 4%;
  top: 0%;
  z-index: 2;
  width:40%;
}

#sliderPanelCharacterImage img{
  display:block;
  width:100%;
  height:auto;
}

.sliderPanelHeroImage{
    position:relative;
}

.sliderPanelHeroImage img{
    display:block;
    width:100%;
    height:auto;
}

#slideoutPanelLogosTogether{
  width:383px;
  position:absolute;
  left:10px;
  top:76%;
  transform: translateY(-50%);
  color:#fff;

  z-index: 2;

}

#slideoutPanelLogosTogether img{
  display:block;
  width:100%;
  height:auto;
}

#slideoutPanelTitle{
  position:absolute;
  left:10px;
  top:50%;
  transform: translateY(-50%);
  color:#fff;
  z-index: 2;
  font-size: clamp(1.4rem, 3vw, 3rem);
}

.slideoutCardContentWrapper{
    margin:0px 20px;
    font-size:1.2rem;
}

.slideoutCardContentWrapper ul{
    list-style-type:disc;
    margin-left: 20px;;
}

.slideoutCardContentWrapper h1{
    font-size:5.0rem;
    margin: 0px 0px 20px 0px;
}

.slideoutCardContentWrapper:last-child{
  padding-bottom:100px;
}

.slideoutPanelLabel{
  color:var(--attentionFocusColor);
}


/* =================================================================================== //
8888888 888b    888 88888888888 8888888888 8888888b.  8888888 .d88888b.  8888888b.  
  888   8888b   888     888     888        888   Y88b   888  d88P" "Y88b 888   Y88b 
  888   88888b  888     888     888        888    888   888  888     888 888    888 
  888   888Y88b 888     888     8888888    888   d88P   888  888     888 888   d88P 
  888   888 Y88b888     888     888        8888888P"    888  888     888 8888888P"  
  888   888  Y88888     888     888        888 T88b     888  888     888 888 T88b   
  888   888   Y8888     888     888        888  T88b    888  Y88b. .d88P 888  T88b  
8888888 888    Y888     888     8888888888 888   T88b 8888888 "Y88888P"  888   T88b 
                                                                                    
                                                                                    
                                                                                    
8888888b.     d8888  .d8888b.  8888888888                                           
888   Y88b   d88888 d88P  Y88b 888                                                  
888    888  d88P888 888    888 888                                                  
888   d88P d88P 888 888        8888888                                              
8888888P" d88P  888 888  88888 888                                                  
888      d88P   888 888    888 888                                                  
888     d8888888888 Y88b  d88P 888                                                  
888    d88P     888  "Y8888P88 8888888888                                           
// ==================================================================================== */



/* =================================================================================== //

8888888888 .d88888b.   .d88888b. 88888888888 8888888888 8888888b.  
888       d88P" "Y88b d88P" "Y88b    888     888        888   Y88b 
888       888     888 888     888    888     888        888    888 
8888888   888     888 888     888    888     8888888    888   d88P 
888       888     888 888     888    888     888        8888888P"  
888       888     888 888     888    888     888        888 T88b   
888       Y88b. .d88P Y88b. .d88P    888     888        888  T88b  
888        "Y88888P"   "Y88888P"     888     8888888888 888   T88b 
                                                                   
// ==================================================================================== */
.footerCopyRightText{
  font-size:.8rem;
  text-align: center;
  padding:20px 0px;
}

#footerFadedBgTopRow {
    position:fixed;
    bottom:0px;
    background: linear-gradient(0deg, #000, transparent);
    margin-bottom: -2px;
    height: 100px;
    width:100%;
    display: block;
    pointer-events: none;
    z-index:9;
}

#footerBusinessLinksInnerWrapper{
  display:flex;
  gap:20px;
  justify-content: center;
  align-items: center;
  font-size:.9rem;
}

/* =================================================================================== //

888b     d888 8888888888 8888888b. 8888888        d8888                    
8888b   d8888 888        888  "Y88b  888         d88888                    
88888b.d88888 888        888    888  888        d88P888                    
888Y88888P888 8888888    888    888  888       d88P 888                    
888 Y888P 888 888        888    888  888      d88P  888                    
888  Y8P  888 888        888    888  888     d88P   888                    
888   "   888 888        888  .d88P  888    d8888888888                    
888       888 8888888888 8888888P" 8888888 d88P     888                    
                                                                           
                                                                           
                                                                           
 .d88888b.  888     888 8888888888 8888888b.  8888888 8888888888 .d8888b.  
d88P" "Y88b 888     888 888        888   Y88b   888   888       d88P  Y88b 
888     888 888     888 888        888    888   888   888       Y88b.      
888     888 888     888 8888888    888   d88P   888   8888888    "Y888b.   
888     888 888     888 888        8888888P"    888   888           "Y88b. 
888 Y8b 888 888     888 888        888 T88b     888   888             "888 
Y88b.Y8b88P Y88b. .d88P 888        888  T88b    888   888       Y88b  d88P 
 "Y888888"   "Y88888P"  8888888888 888   T88b 8888888 8888888888 "Y8888P"  
       Y8b                                                                 
                                                                           
// ==================================================================================== */
@media all and (max-width: 1000px){
  header{
    gap:10px;
  }

  .mainHeaderLogoForMobileMenu{
    margin:10px 0px 10px 20px;
  }

    #slideOutPanelInsideWrapper{
        width: 80%;    
    }
}

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

  #mainLogo{
    display:none;
  }

  #heroSectionRightColumn{
    display:none;
  }

  #mainLogo img{
    display: block;
    margin:0px auto;
    width:100%;
    height:auto;
  }

  #heroSectionColumnWrappers{
    display:initial;
  }

  nav{
    display:none;
  }

  #scrollDownLottieWrapper{
      display:none;
    }

  #heroSectionWrapperRow1{
    text-align: center;
    min-height:80%;
  }

  #heroSectionWrapperRow1, #whatWeDoWrapper, footer{
    padding:0px 6px;
  }
  
  .columnWrappers{
      display:block;
      height:initial;
  }
  
  #heroSectionTextInnerWrapper{
    flex-basis: initial;
  }

  .sideWidth1200, .sideWidth1600{
    max-width: initial;
    width: 100%;
    padding:0px;
  }

  #heroSectionTextInnerWrapper h1{
    margin:20px 0px;
    line-height: 27px;
  }

  h1, h2, h3{
    font-size: 1.4rem;
  }

  .leftColumnIntro{
      position:initial;
      transform: initial;
      min-width:320px;
      margin-bottom:56px;
  }
  .leftColumnIntro h1{
      font-size: 1.5rem;
      margin-bottom: 28px;
  }
  .SMDhighlight{
      font-size:1.25rem;
  }

  .rightColumnWrapper{
      margin-bottom:32px;
  }
  .contentRowInnerWrapper{
      justify-content: center;
  }
  footer{
      bottom: -1px; 
  }

  #mainLogoForMobileOnly{
    display:block;
  }

  header{
      top: -1px;
      pointer-events: none;
  }

  #footerCopyrightText p{
      display:none;
  }





  .slideoutCardContentWrapper {
      font-size:1.2rem;    
  }

  .slideoutCardContentWrapper p:first-of-type{
      margin-top:150px;
  }

  #sliderPanelCharacterImage{
      width:60%;
      right:-8%;
  }

  .heroIntroText{
      font-size:1rem;
  }

  #slideOutPanelInsideWrapper{
      width: 90%;    

  }

  #heroSectionTextWrapper{
    margin-top: 10%;
  }

  #slideoutPanelTitle{
      font-size: 2rem;
      left:20px;
      top:60%;
  }

  .cardBookFeaturesWrapper{
      font-size:.8rem;
      position:absolute;
      left:20px;
      top:186px;
      z-index: 3;
      width:200px;
  }

  .videoWrapper{
    flex-basis: 80%;
    margin-bottom:20px;
  }

  #servicesIntroText, #whatWeDoOutroText{
    width: initial;
    height:initial;
  }

  #whatWeDoOutroText{
    padding: 40px 10px 10px 10px;
  }



  



  #slideoutPanelLogosTogether{
      display:none;
  }

  .squareBoxTopRight{
      top:20px;
      right:24px;
  }


  .squareBoxBottomRight{
      bottom:20px;
      right:24px;
  }

  #mainNav{
      display:none;
  }

  .slideoutCardContentWrapper h1{
      font-size:2rem;
  }

  ::-webkit-scrollbar {
      width: 3px;
  }

  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }

  ::-webkit-scrollbar-thumb {
      background-color: #f15a25;
      outline: 1px solid slategrey;
  }

  #emailCardInnerWrapper{
      width:80%;
      padding:6%;
      height: 80%;
      transform: translate(-50%, -50%);
      top:50%;
  }

}

@media all and (min-width: 501px) and (max-width: 1000px){
  #heroSectionColumnWrappers{
    position:relative;
  }



  #ipadSizedMenubuttonForMobileOnly{
    display:block;
  }

  nav{display:none;}

  #heroSectionRightColumn{
    position:absolute;
    top:-6%;
    right:-100px;
    width:84%;
  }

  #heroSectionTextWrapper{
    margin: 10% auto 10% 10px;
  }
}

@media all and (width < 1200px){

    #whatWeDoServicesBreakdownWrapper{
      flex-wrap: wrap;
      padding:10px;
      margin-bottom:80px;
      text-align: center;
    }

    .servicesBreakdownBox{
        flex-basis: 100%;
        padding:10px;
    }
}

@media (hover: hover) {
  a:hover, #submitMainFormBTN:hover {
    color:var(--SMDorange) ;
  }

  .oragenGlow:hover{
    box-shadow: 0px 0px 25px 4px rgba(241,91,37,0.9);
    color:#fff;
  }
}
/* =================================================================================== //

 .d88888b.  888     888 8888888888 8888888b.  8888888b.  8888888 8888888b.  8888888888 .d8888b.  
d88P" "Y88b 888     888 888        888   Y88b 888   Y88b   888   888  "Y88b 888       d88P  Y88b 
888     888 888     888 888        888    888 888    888   888   888    888 888       Y88b.      
888     888 Y88b   d88P 8888888    888   d88P 888   d88P   888   888    888 8888888    "Y888b.   
888     888  Y88b d88P  888        8888888P"  8888888P"    888   888    888 888           "Y88b. 
888     888   Y88o88P   888        888 T88b   888 T88b     888   888    888 888             "888 
Y88b. .d88P    Y888P    888        888  T88b  888  T88b    888   888  .d88P 888       Y88b  d88P 
 "Y88888P"      Y8P     8888888888 888   T88b 888   T88b 8888888 8888888P"  8888888888 "Y8888P"  
                                                                                                 
// ==================================================================================== */

/* =================================================================================== //

88888888888 8888888888 .d8888b. 88888888888 8888888 888b    888  .d8888b.  
    888     888       d88P  Y88b    888       888   8888b   888 d88P  Y88b 
    888     888       Y88b.         888       888   88888b  888 888    888 
    888     8888888    "Y888b.      888       888   888Y88b 888 888        
    888     888           "Y88b.    888       888   888 Y88b888 888  88888 
    888     888             "888    888       888   888  Y88888 888    888 
    888     888       Y88b  d88P    888       888   888   Y8888 Y88b  d88P 
    888     8888888888 "Y8888P"     888     8888888 888    Y888  "Y8888P88 
                                                                           
// ==================================================================================== */

/* .websiteContentCard{
    display:none;
    pointer-events: none;

}


#emailSectionWrapper{
    display:block;
    opacity: 1;
    top:50%;
} */