:root {
  --elastic: transform 0.6s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}

/* General */
.background-before:before {content:""; position:absolute; left:0; top:0; right:0; height:100px; background-color:var(--awb-color7);}

/* Fusion button */
.fusion-button > i {transform: rotate(-10deg);}
.fusion-button:hover > i {transform: rotate(0deg);}

.button-column > .fusion-column-wrapper {gap:32px;}

/* Scaling video */
#main .scaling-video {width: 1400px;max-width: 1400px;display: flex;align-items: center;justify-content: center; border-radius:24px; overflow:hidden}

/* Services */
.services-wrapper {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);gap: 16px;}
  
.services-wrapper > a {background:var(--awb-color1); color:#fff; padding: 40px; border-radius:16px; display:flex; flex-direction: column; position:relative; overflow:hidden; transition: var(--elastic)}
.services-wrapper > a .service-content {position:relative;; display: flex; flex-direction: column; z-index: 1;}
.services-wrapper > a .service-content p {color:#fff; margin:0px}
.services-wrapper > a .service-content h3 {color:#fff; margin-top:0px; margin-bottom:32px;}

.services-wrapper > a:nth-child(1) {grid-column: span 2 / span 2; grid-row: span 2 / span 2;}
.services-wrapper > a:nth-child(1) .service-content {width:60%;}

.services-wrapper > a:nth-child(2) {grid-row: span 3 / span 3; grid-column-start: 3; min-height:600px; justify-content: center}
.services-wrapper > a:nth-child(2) .service-content {margin-top:auto}

.services-wrapper > a:nth-child(3) {grid-row: span 3 / span 3; grid-row-start: 3;}
.services-wrapper > a:nth-child(3) .service-content {margin-top:auto}

.services-wrapper > a:nth-child(4) {grid-row: span 3 / span 3; grid-row-start: 3;}

.services-wrapper > a:nth-child(5) {grid-row: span 2 / span 2; grid-column-start: 3; grid-row-start: 4; background:var(--awb-color7); justify-content: center;}
.services-wrapper > a:nth-child(5) .service-content p,
.services-wrapper > a:nth-child(5) .service-content h3 {color:var(--awb-color1)}

.services-wrapper > a:after {content:""; position:absolute; background-size:contain; background-position: center; background-repeat: no-repeat; pointer-events:none; transition: var(--elastic)}

.services-wrapper > a:nth-child(1):after {background-image: url('../media/shapes?type=rocket&color=6'); width:400px; height:400px; top:0; right:0; transform: translateX(20%) translateY(-1%) rotate(30deg);}
.services-wrapper > a:nth-child(2):after {background-image: url('../media/shapes?type=nugget&color=5&flip=true'); width:400px; height:400px; top:0; left:0; transform: translateX(-5%) translateY(-50%) rotate(-15deg);}
.services-wrapper > a:nth-child(3):after {background-image: url('../media/shapes?type=flare&color=4'); width:400px; height:400px; top:0; left:0; transform: translateX(-15%) translateY(-45%) rotate(-24deg)}
.services-wrapper > a:nth-child(4):after {background-image: url('../media/shapes?type=blockhead&color=2&flip=true'); width:400px; height:400px; bottom:0; right:0; transform: translateX(10%) translateY(50%) rotate(-5deg)}


.services-wrapper > a:nth-child(1):hover {transform:rotate(1deg)}
.services-wrapper > a:nth-child(2):hover {transform:rotate(1deg)}
.services-wrapper > a:nth-child(3):hover {transform:rotate(-1deg)}
.services-wrapper > a:nth-child(4):hover {transform:rotate(1deg)}
.services-wrapper > a:nth-child(5):hover {transform:rotate(-1deg)}

.services-wrapper > a:nth-child(1):hover:after {
  transform: translateX(20%) translateY(-1%) rotate(30deg) scale(1.1);
}

.services-wrapper > a:nth-child(2):hover:after {
  transform: translateX(-5%) translateY(-50%) rotate(-15deg) scale(1.1);
}

.services-wrapper > a:nth-child(3):hover:after {
  transform: translateX(-15%) translateY(-45%) rotate(-24deg) scale(1.1);
}

.services-wrapper > a:nth-child(4):hover:after {
  transform: translateX(10%) translateY(50%) rotate(-5deg) scale(1.1);
}

/* Custom cursor */
.custom-cursor {cursor: none;}
.custom-cursor *{cursor: none;}
.custom-cursor a{color: #fff !important; z-index: 100 !important;}
.custom-cursor-wrapper{ width: 80px; height: 80px; display: flex; align-items: center; justify-self: center; color: #fff; flex-wrap: wrap; border-radius: 100%; background-color: var(--awb-color3); transition: all 150ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; transform: translate(calc(-50% + 15px), -50%); z-index: 100000; cursor: none; opacity: 0; pointer-events: none; user-select: none;}
.custom-cursor-wrapper.active{ opacity: 1;}
.custom-cursor-wrapper span {max-width: 52px; text-align: center; margin: 0 auto; font-size: 32px; transform:rotate(-10deg); transition:.3s;} 

.custom-cursor-wrapper.active.press {background:var(--awb-color2); transition:.3s;}
.custom-cursor-wrapper.active.press span{transform:rotate(0deg)}