:root {
    --font-one:'TikTok Sans';
    --font-two:'TikTok Sans';
    --font-three:'Raleway';
    --font-four:'Science Gothic';
    --color-one:rgba(172,30,35,1);
    --color-one-alt:rgb(126, 10, 16);
    --color-one-trans:rgba(172,30,35,.3);
    --color-one-trans-alt:rgba(160,12,20,.3);
    --gradient-one:linear-gradient(to bottom, var(--color-one), var(--color-one-alt));
  
    --gradient-one-trans:linear-gradient(to bottom, var(--color-one-trans), var(--color-one-trans-alt));
  
    
    --color-two:rgba(51,51,51,1);
    --color-two-alt:rgb(29, 29, 29);
    --color-two-trans:rgba(51,51,51,.3);
    --color-two-trans-alt:rgba(21,21,21,.3);
    --gradient-two:linear-gradient(to bottom, var(--color-two), var(--color-two-alt));
   
      --gradient-two-alt:linear-gradient(to bottom, var(--color-one), var(--color-two));
      --gradient-two-trans:linear-gradient(to bottom, var(--color-two-trans), var(--color-two-trans-alt));
  
  
    --color-three:rgba(174,174,174,1);
    --color-three-alt:rgba(134,134,134,1);
    --color-three-trans:rgba(174,174,174,.3);
    --color-three-trans-alt:rgba(174,174,174,.3);
    --gradient-three:linear-gradient(to bottom, var(--color-three), var(--color-three-alt));
  
      --gradient-three-alt:linear-gradient(to bottom, var(--color-two), var(--color-three));
  
  
      --gradient-light:linear-gradient(to bottom, var(--color-white), var(--color-light));
  
      --gradient-light-gray:linear-gradient(to bottom, #C0C0C0, var(--color-light));
  
      --color-white:rgba(255,255,255,1);
      --color-black:rgb(0, 0, 0);
      --color-light:rgba(245,245,245,1);
      --color-dark:rgb(57, 57, 57);
  
  --overlay-logo:url(/wp-content/themes/child-theme/images/cef-logo.gif);
  
  
    --fixheight-one:550px;
  
    --fixheight-two:600px; 
  
    --site-icon:url(/wp-content/themes/child-theme/images/hex-shapes.png);
  
    --icon-width:3.5em;
    --icon-height:3.5em;
    --icon-scale:1.3;
  --button-background:var(--gradient-three);
  --button-radius: 24px 4px 4px 24px;
  --background-icon:url(/wp-content/themes/child-theme/images/icon-border.png);
  
  --color-light-one:var(--color-light);
  --color-light-two:var(--color-white);
  --color-light-three:var(--color-white);
  
  --color-dark-one:var(--color-dark);
  --color-dark-two:var(--color-three-alt);
  --color-dark-three:var(--color-one);
  

  }

  .science-gothic-bold {
    font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
      "slnt" 0,
      "wdth" 100,
      "CTRS" 0;
  }

  .hero.services {
    background-image: var(--gradient-one);
}
   

  .main-navigation ul li a {
    font-family: var(--font-one);
    font-weight: 500 !important;
}

#ohio path{
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 150ms ease, filter 150ms ease, fill 150ms ease;
  fill: var(--color-one);
  pointer-events: visiblePainted;
}

#ohio path:hover{
  transform: translateY(-6px) scale(1.06);
  fill: var(--color-one-alt);
  filter: drop-shadow(0px 10px 10px rgba(0,0,0,.45));
  cursor: pointer;
}


.perspectiveon {
  perspective: 800px;
}


.state-wrapper.big {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: .2em;
  scale: 1;
  height: inherit;
  width: 100%;
  aspect-ratio: 1;
  max-width: 600px;
  transform: rotateY(-10deg);
  filter: drop-shadow(12px 4px 0px black);
  perspective-origin: center;
  perspective: none;
}
.state-wrapper.big svg {
  padding: 1em;
  overflow: visible;
}

.state-wrapper image {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 150%;
  height: 150%;
  display: flex; 
}

.tccolumn .backimg {
  z-index: -1;
}

.tccolumns .tccolumn.home-services {
  padding: 0px;
}

.tccolumn.home-services p, .tccolumn.home-services h2{
  padding: 2em;
}

.tccolumn.home-services h2 {
  margin-right:auto;
  color:white;
  background-image:var(--gradient-one);
}

.home-industries.tclist .service-list i
 {
    max-width: 60px;
    width: 60px;
    align-items: center;
}

.home-industries.tclist .service-list {
  width: 200px;
  display: flex;
  flex-wrap: nowrap;
  font-size: .5em;
  min-width: 300px;
  height: 80px;
  align-items: center;
  gap: 1em;
  justify-content: center;
  opacity: .5;
}

.home-industries.tclist .service-list:hover {
  opacity:1;
}

.home-industries.tclist {
  display: flex;
}

#service-section .tccolumn {
  background: white;
  border-radius: 0px;
  overflow: hidden;
   --row-shift: 0px;
}

#service-section .tccolumn {
 
  /* keep your skew here if you want, example: */
  --skew: 3deg;

  /* trnslate first, then skew (translateX is rightmost) */
  transform: skew(var(--skew)) translateX(var(--row-shift)) !important;
}

#service-section .hs-image {
  position: relative;
  height: 300px;
}

#service-section .tccolumn h2 span, #service-section .tccolumn p, #service-section .tccolumn img
 {
    transform: skewX(-3deg);
}


.tccolumn.home-services h2 span
 {
    scale: .9;
}

.tccolumn.home-services h2 {
    text-align: left;
    padding: .4em .6em;
    margin: 0px !important;
    font-family: var(--font-one) !important;
    font-weight: 700 !important;
    font-size: 1.3em !important;
    transform: skew(-3deg);
    position: relative;
    display: flex;
    justify-content: space-between;
    scale: 1.02;
}

#reason-section .tccolumns i {
  margin-top: -6em;
}

section#industry-section {
  padding-top: 5em;
  padding-bottom: 3em;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.servicons {
  display: flex;
  filter: drop-shadow(1px 1px 1px black);
  flex-wrap: wrap;
  position: absolute;
  right: 0px;
  flex-direction: column;
  width: fit-content;
  top: 2.3em;
  transform: skew(3deg);
}

nav#site-navigation * {
  font-family: var(--font-three) !important;
  font-weight: 800 !important;
  font-size: 1.01em;
}

button#search-button {
  display: none;
}

.main-navigation {
  text-align: right;
  padding-right: 1em;
}


.services .tccolumn i img {
  width: 50px;
  height: 50px;
  filter: drop-shadow(2px 2px 1px black);
}

.services .tccolumns .tccolumn i
 {
    background-image: var(--gradient-one);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1em;
    box-shadow: 2px 2px 10px inset #333333;
    border: solid 5px black;
    margin-top: -4em;
}
.services .tcboxinner {
  background: white;
  padding: 3em;
  background-color: white !important;
  font-size: 14px;
  margin: 3em;
}

.services .tccolumns .tccolumn i img {
  width: 50px;
  height: 50px;
  filter: drop-shadow(-2px 2px 1px black);
}

.processes {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 2em;
  justify-content: center;
  align-items: center;
}

.process-block {
  flex: 1 1 33%;
  width: 33%;
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.process-inner h3 {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

.processes {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 2em;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.process-block i {
  max-width: 150px;
}

.hero.services .left-box {
  flex: 1 1 40%;
  width: 40%;
  z-index: 12;
}

.hero.services .right-box {
  flex: 1 1 60%;
  width: 60%;
  margin-left: -20%;
  z-index: 1;
}

.services.hero .tcboxinner {
  filter: drop-shadow(2px 4px 6px black);
  padding: 4em;
}

.hero.services {
  background-image: var(--gradient-one);
  box-shadow: 1px 1px 10px #000000;
}

.tccolumn-inner p
 {
    padding: 0px;
}

.tccolumn-inner {
    background: white;
}

.services.industries .tccolumn {
  min-height: 400px;
  aspect-ratio: 1;
  padding: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.services.industries .tccolumn h3
 {
    background-image: var(--gradient-two);
    color: white;
    text-align: left;
    padding: .4em .8em;
    font-family: var(--font-two) !important;
}

.services.industries .tccolumn {
  height: 500px;
}

.services.industries .hsimage {
  height: 200px;
  position: relative;
}