/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Made this style sheet to allow easy 
 * migration of sector pages.
 * Therefore modules can stay in old theme
 *                                       */
/*****************************************/

.specialism-links-section h2{
   font-size: clamp(26px, 3.6vw, 200px);
    font-weight: 500;
  margin-top: 1em;
  margin-bottom: 2em;
}
.specialism-links-section .wrapper{
  padding: 0px 3.5vw;
}
.specialism-links-section .sl-header-row{
  max-width: 60%;
}
.sl-link-row{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em .5em
}
.sl-link-col{
  width: fit-content
  
}
.sl-link-col a{
  font-size: clamp(20px, 1.5vw, 100px);
  font-weight: 500;
  border-color: var(--switch-color-2);
  border-radius: clamp(38px, 1em, 169px);
  border-style: solid;
  border-width: clamp(1px, .04em, 3.38px);
  padding: .5em 1.5em;
  transition: .4s all
}
.sl-link-col a:hover{
  font-weight: 500;
  background-color: var(--switch-color-2) !important;
  border-color: var(--switch-color-2);
  color: var(--switch-color-1) !important;
}
.sl-link-col a:after, .spsm-cta a:after{
  content: "↘"
}
.spsm-cta a{
  font-size: clamp(20px, 1.5vw, 100px);
  font-weight: 700;
  border-color: var(--switch-color-2);
  border-radius: clamp(38px, 1em, 169px);
  border-style: solid;
  border-width: clamp(1px, .04em, 3.38px);
  padding: .5em 1.5em;
  transition: .4s all;
  text-transform: uppercase;
}
.spsm-cta a:hover{
  font-weight: 700;
  background-color: var(--switch-color-2) !important;
  border-color: var(--switch-color-2);
  color: var(--switch-color-1) !important;
}
.job-two-col .wrapper{
  padding: 0px 3.5vw;
}
.two-job-row{
  display: flex;
  gap: clamp(50px, 3.6vw, 180px)
}
.two-job-col{
  width: 50%;
}
.job-two-col h3{
  font-size: clamp(50px, 3.6vw, 200px);
  font-weight: 500;
}
.two-job-decription{
  display: flex;
}
.spsm-top-content{
  text-align: center;
  padding: 0px 10vw;
  z-index: 1;
  position: relative;
}
.spsm-top-icons, .tj-icon{
  display: none;
}
.two-job-row .orb{
  margin-right: clamp(15px, 2.29vw, 125px);
  min-width: clamp(40px, 3.61vw, 197px);
  height: clamp(40px, 3.61vw, 197px);
}
.two-job-row .two-job-col:first-of-type .orb{

  background-color: rgba(var(--color1));
  border-radius: 100%;
  position: relative;
}
.two-job-row .two-job-col:first-of-type .orb .g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: center center;
  animation: moveVertical 10s ease infinite;
  opacity: 1;
}

.two-job-row .two-job-col:first-of-type .orb .g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: 25%;
  animation: moveInCircle 14s reverse infinite;
  opacity: 1;
}

.two-job-row .two-job-col:first-of-type .orb .g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: 75%;
  animation: moveInCircle 10s linear infinite;
  opacity: 1;
}

.two-job-row .two-job-col:first-of-type .orb .g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: 50% 50%;
  animation: moveHorizontal 20s ease infinite;
  opacity: 0.7;
}

.two-job-row .two-job-col:first-of-type .orb .g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: calc(var(--circle-size));
  height: calc(var(--circle-size));
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: 30% 50%;
  animation: moveInCircle 20s ease infinite;
  opacity: 1;
}

.two-job-row .two-job-col:nth-of-type(2) .orb{

  background-color: rgba(var(--color3));
  border-radius: 100%;
  position: relative;
}
.two-job-row .two-job-col:nth-of-type(2) .orb .g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: center center;
  animation: moveVertical 10s ease infinite;
  opacity: 1;
}

.two-job-row .two-job-col:nth-of-type(2) .orb .g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: 25%;
  animation: moveInCircle 14s reverse infinite;
  opacity: 1;
}

.two-job-row .two-job-col:nth-of-type(2) .orb .g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: 75%;
  animation: moveInCircle 10s linear infinite;
  opacity: 1;
}

.two-job-row .two-job-col:nth-of-type(2) .orb .g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: 50% 50%;
  animation: moveHorizontal 20s ease infinite;
  opacity: 0.7;
}

.two-job-row .two-job-col:nth-of-type(2) .orb .g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 90%) no-repeat;
  mix-blend-mode: var(--blending);
  width: calc(var(--circle-size));
  height: calc(var(--circle-size));
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: 30% 50%;
  animation: moveInCircle 20s ease infinite;
  opacity: 1;
}
@media(max-width: 768px){
  .specialism-links-section .sl-header-row{
    max-width: 100%;
  }
  .sl-link-col{
    width: 100%;
  }
  .two-job-row{
    flex-direction: column;
  }
  .two-job-col{
    width: 100%;
  }
})