/* ------------------------- Components -------------------------------------------------- */

/* ------------------------- Span Lines H4 -------------------------------------------------- */

.span-lines.animate .span-line {
   position: relative;
   display: inline-flex;
   overflow: hidden;
}

.span-lines.animate .span-line .span-line-inner {
   position: relative;
   display: block;
}

/* ------------------------- Arrow -------------------------------------------------- */

.arrow {
   position: relative;
   width: clamp(.9em, 1.1vw, 1.1em);
}

.arrow.big {
   position: relative;
   width: clamp(1.1em, 1.3vw, 1.25em);
}

.arrow svg {
   display: block;
   width: 100%;
}

/* ------------------------- PF -------------------------------------------------- */

.profile-picture {
   position: relative;
   display: inline-flex;
   border-radius: 50%;
   background: url("../img/DSC07033-Cut-Color-1080.jpg") center center no-repeat;
   background-size: cover;
   width: clamp(4.5em, 6.5vw, 8em);
   height: clamp(4.5em, 6.5vw, 8em);
}


.dots {
   top: 0;
   right: 0;
   height: 100%;
   width: 100%;
   pointer-events: none;
   background: url("../img/dotted.svg") bottom right;
   background-size: 1.25em 1.25em;
   position: absolute;
}

/* ------------------------- Media Grid (case study gallery) -------------------------------------------------- */

.media-grid-row {
   display: flex;
   gap: 1.5em;
}

.media-grid-item {
   flex: 1;
   position: relative;
   overflow: hidden;
   border-radius: 0.75em;
   background: rgba(100, 100, 100, 0.1);
}

.media-grid-item::before {
   content: "";
   display: block;
   padding-top: 78%;
}

.media-grid-item .overlay-image {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}

.media-grid-video {
   position: relative;
   overflow: hidden;
   border-radius: 0.75em;
}

.media-grid-video video {
   width: 100%;
   display: block;
}

.media-grid-row-mobile {
   display: flex;
   gap: 1.5em;
}

.media-grid-item-mobile {
   flex: 1;
   position: relative;
   overflow: hidden;
   border-radius: 0.75em;
   background: rgba(100, 100, 100, 0.1);
}

.media-grid-item-mobile::before {
   content: "";
   display: block;
   padding-top: 168%;
}

.media-grid-item-mobile .overlay-image {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}

@media screen and (max-width: 640px) {

   .media-grid-row,
   .media-grid-row-mobile {
      flex-direction: column;
   }
}

/* ------------------------- Device Frame Scaling (devices.css responsive wrapper) -------------------------------------------------- */

.device-scale-wrap {
   position: relative;
   width: 100%;
   display: flex;
   justify-content: center;
   overflow: hidden;
}

.device-scale-wrap .device {
   transform-origin: top center;
}

.device-scale-wrap .device-screen {
   background-size: contain !important;
   background-position: center center;
   background-repeat: no-repeat;
   background-color: #000;
}

.device-scale-wrap .device-screen video {
   width: 100%;
   height: 100%;
   object-fit: contain;
   background-color: #000;
}

.mobile-frames-row {
   flex-wrap: nowrap;
   gap: 1em;
   align-items: center;
   justify-content: center;
}

.mobile-frames-row .flex-col {
   width: 33.333%;
   flex: 0 0 33.333%;
   min-width: 0;
}

@media screen and (max-width: 640px) {
   .mobile-frames-row {
      flex-wrap: wrap;
      gap: 0.5em;
   }

   .mobile-frames-row .flex-col {
      width: 100%;
      flex: 0 0 100%;
   }
}

/* ------------------------- Rounded Div -------------------------------------------------- */

.rounded-div-wrap {
   width: 100%;
   top: 0;
   position: relative;
   height: 10vh;
   overflow: hidden;
}

.rounded-div {
   width: 150%;
   content: "";
   display: block;
   position: absolute;
   background: var(--color-white);
   height: 750%;
   left: 50%;
   border-radius: 50%;
   transform: translate(-50%, -86.666%);
   z-index: 1;
}

/* ------------------------- Default Header -------------------------------------------------- */

.default-header {
   padding-top: calc(var(--section-padding) * 1.33);
   padding-bottom: calc(var(--section-padding) * .66);
}

.default-header.theme-dark {
   background: var(--color-dark);
}

.default-header h1 span {
   display: block;
}

@media screen and (max-width: 720px){ 
   
   .default-header {
      padding-top: calc(var(--section-padding) * 1.95);
      padding-bottom: calc(var(--section-padding) * .75);
   }

   .default-header h1 span {
      display: unset;
   }
}

@media screen and (max-width: 460px){ 
   .default-header h1 {
      font-size: 10vw;
      font-size: calc(clamp(3.25em, 7vw, 8em) * .875);
   }
}