/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
*/


/* =====================================================
    TYPOGRAPHY
===================================================== */

h1 { font-size: clamp(18px, calc(18px + 3.5vw), 92px) !important; line-height: clamp(24px, calc(24px + 3.5vw), 100px) !important; }
h2 { font-size: clamp(16px, calc(16px + 2vw), 61px) !important; }
h3 { font-size: clamp(14px, calc(14px + 1.5vw), 50px) !important; }
h4 { font-size: clamp(13px, calc(13px + 1.2vw), 35px) !important; }
h5 { font-size: clamp(12px, calc(12px + 1vw), 24px) !important; }
h6 { font-size: clamp(10px, calc(10px + 0.75vw), 20px) !important; }

p, li, a, label, input { font-size: clamp(10px, calc(10px + 0.4vw), 18px) !important; }


h1,h2,h3,h4,h5,h6,p,li,a{

    color: white !important;
}

.hero h1 { font-size: clamp(18px, calc(18px + 3.5vw), 120px) !important; line-height: clamp(24px, calc(24px + 3.5vw), 100px) !important; }


input,
.acrylic h1,
.acrylic h2,
.acrylic h3,
.acrylic h4,
.acrylic h5,
.acrylic h6,
.acrylic p,
.acrylic li,
.acrylic a,
.ct-footer h1,
.ct-footer h2,
.ct-footer h3,
.ct-footer h4,
.ct-footer h5,
.ct-footer h6,
.ct-footer p,
.ct-footer li,
.ct-footer a,
.ct-footer label,
.acrylic-card h1,
.acrylic-card h2,
.acrylic-card h3,
.acrylic-card h4,
.acrylic-card h5,
.acrylic-card h6,
.acrylic-card p,
.acrylic-card li,
.acrylic-card a,
.wp-block-stackable-accordion h4 {
    color: #101720 !important;
}

a.ct-button{
    color: white !important;
}

.ct-footer a, .ct-footer p {
    font-size: clamp(10px, calc(10px + 0.4vw), 14px) !important;
}

span {
    position: relative;
}




/* =====================================================
    GLOBAL UTILITIES & RESETS
===================================================== */

.absolute { position: absolute; }
.zIndex10 { z-index: 10 !important; }
.scale07 { transform: scale(0.7); }
.contain img { object-fit: contain !important;}

.ct-container-full { padding: 0 !important; }
.entry-content { height: 100%; }
.entry-meta { display: none; }

.wp-block-stackable-column { height: 100% }
.wp-block-stackable-columns { height: 100% }

.disabled-link {
    cursor: default;
    pointer-events: none;
    position: relative;
}

.job-title {

    margin-top: auto !important;

}

.ct-footer .ct-widget:not(:first-child) {
    margin-top: 10px !important;
}

img {
    border-radius: 16px;
}

.hero-child-services > .stk-block-content {
    column-gap: 10vw !important;
}

.stk-img-wrapper{
    overflow: visible;
}

.wp-block-stackable-image span, .wp-block-stackable-image figure, .wp-block-stackable-image img {
   height: 100%;
   object-fit: cover;
}

.services-img-2 img, .services-img-3 img{
    box-shadow: rgba(0, 176, 219, 0.4) -5px 5px, rgba(0, 176, 219, 0.3) -10px 10px, rgba(0, 176, 219, 0.2) -15px 15px, rgba(0, 176, 219, 0.1) -20px 20px, rgba(0, 176, 219, 0.05) -25px 25px;
}

.services-img-1 img{
    box-shadow: rgba(0, 176, 219, 0.4) 5px 5px, rgba(0, 176, 219, 0.3) 10px 10px, rgba(0, 176, 219, 0.2) 15px 15px, rgba(0, 176, 219, 0.1) 20px 20px, rgba(0, 176, 219, 0.05) 25px 25px;

}

.services-img-1 img, .services-img-2 img, .services-img-3 img{
    height: auto !important;
    aspect-ratio: 8 / 5;
    width: auto !important;
}

.wrap-reverse > div {
    flex-wrap: wrap-reverse;
}

form {
    margin: 0 !important;
}

/* =====================================================
    HEADER
===================================================== */

.ct-header {
    position: fixed !important;
    width: 100vw;
    height: 100vh;
    z-index: 10000 !important;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: 0.3s ease;
}

.ct-header * {
    pointer-events: auto;
}

.ct-header:has(> div > div:hover) {
    background: rgba(0, 0, 0, 0.15);
}

.ct-header > div > div {
    transform-origin: top;
    margin-top: 2.5vh;
    transition: 0.3s ease;
}

.ct-header > div > div::before {
    border-radius: 16px;
    width: 95vw;
    left: 2.5vw;
    opacity: var(--before-opacity, 0);
    transition: opacity 0.3s ease;
}

.ct-header > div > div:hover::before {
    opacity: 1;
}

.ct-header-text {
    height: 100%;
}

.ct-header > div > div > .ct-container {
    height: 10vh !important;
}


/* =====================================================
    HERO
===================================================== */

.hero-section { display: none; }

.hero {
    width: 95vw !important;
    height: 95vh !important;
    margin-top: 2.5vh !important;
    margin-left: 2.5vw;
}

.hero-child {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.hero-child::before,
.hero-text-group::before {
    border-radius: 16px;
}

.hero-text-group { }

.hero-image {
    position: absolute;
    min-width: 100px;
    width: 12% !important;
    border-radius: 16px;
}

.hero-image-1 { top: 5%; left: 5%; aspect-ratio: 3/4; }
.hero-image-2 { bottom: 5%; left: 20%; aspect-ratio: 1/1; }
.hero-image-3 { bottom: 5%; right: 5%; aspect-ratio: 3/4; }
.hero-image-4 { top: 5%; right: 30%; aspect-ratio: 1/1; }

.hero-child video,
.hero-child > .wp-block-stackable-image img {
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    height: 100%;
    object-fit: cover;
}

.hero-child > .wp-block-video,
.hero-child > .stk-block-image {
    position: absolute;
    height: inherit;
    width: 100% !important;
    overflow: clip;
    border-radius: 16px;
}

.cover-video video {
    object-fit: cover;
    height: 100%;
    border-radius: 16px;
}

.cover-video {
    height: 100%;
}


.hero-services {
    height: 95vh !important;
}

.hero-child-services {
    display: flex;
    align-items: center;
}


.stats {

    padding: 3.5rem;

}

.is-layout-grid > div{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.is-layout-grid span{
    height: 75px;
}

.wp-image-2769 {
    border-radius: 0px;
}

/* =====================================================
    SERVICES / STAGE
===================================================== */

.services {
    position: absolute;
}

.service-content {
    padding-top: 20vh;
}


/*
.services-img-1 img {
    mask-image: url(https://pitstop.a21i8x.ap-southeast-2.wpstaqhosting.com/wp-content/uploads/2026/02/blob-2.svg);
}

.services-img-2 img {
    mask-image: url(https://pitstop.a21i8x.ap-southeast-2.wpstaqhosting.com/wp-content/uploads/2026/02/blob-3.svg);
}


.services-img-3 img {
    mask-image: url(https://pitstop.a21i8x.ap-southeast-2.wpstaqhosting.com/wp-content/uploads/2026/03/blob-1.svg);
}
*/

.image-block {
    height: 500px;
    margin-top: calc(100vh - 500px) !important;
}

.stage-wrap {
    position: sticky;
    top: 30vh;
    z-index: 1000;
    height: 500px;
    margin-bottom: 0;
    margin-block-end: 0 !important;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.stage {
    display: flex;
    position: relative;
    width: 260px;
    height: calc(150px + 10vw);
    z-index: 1000;
    transition: transform 0.3s ease, width 0.4s ease, height 0.4s ease;
}

.act {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 2.5vw;
}

.act > div { }

.wp-block-stackable-accordion{
    max-width: 700px;
}

.wp-block-stackable-accordion h4{
 font-size: clamp(12px, calc(12px + 1vw), 24px) !important;
}


.info-cards > div {
    row-gap: 30px;
}

/* =====================================================
    ACRYLIC / GLASS
===================================================== */

.acrylic {
    background: none !important;
    isolation: isolate !important;
    overflow: visible !important;
}

.acrylic::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
    background: rgba(255,255,255,.6);
    background-blend-mode: exclusion;
    box-shadow:
        rgba(50,50,93,0.25) 0px 13px 27px -5px,
        rgba(0,0,0,0.3) 0px 8px 16px -8px;
}

.acrylic-card {
    transform-style: preserve-3d;
    backdrop-filter: blur(1.25rem) !important;
    -webkit-backdrop-filter: blur(1.25rem) !important;
    background: rgba(255,255,255,.5) !important;
    background-blend-mode: exclusion !important;
    will-change: transform, filter !important;
    box-shadow:
        0px 4px 20px 7px rgba(0,0,0,0.12),
        0px 16px 64px 0px rgba(0,0,0,0.1);
}

.acrylic-photo img{
    transform: translateZ(50px);
    padding: 10px;
    backdrop-filter: blur(1.25rem) !important;
    -webkit-backdrop-filter: blur(1.25rem) !important;
    background: rgba(255,255,255,.5) !important;
    background-blend-mode: exclusion !important;
    will-change: transform, filter !important;
    box-shadow:
        0px 4px 20px 7px rgba(0,0,0,0.12),
        0px 16px 64px 0px rgba(0,0,0,0.1);
}

.acrylic-photo span{
    aspect-ratio: 1 / 1;
    height: auto;
}

.grid-cards .acrylic-card {
    width: 25vw;
    height: 30vw;
    min-width: 300px;
    max-width: 400px;
    min-height: 300px;
    max-height: 430px;
}

.info-cards .acrylic-card {
    min-width: 350px;
    max-width: 400px;
    min-height: 270px;
	padding: 25px;
	padding-left: 35px;
	padding-right: 35px;
	border-radius: 16px;
}


/* =====================================================
    MEGA MENU
===================================================== */

@media (min-width: 1000px) {

.acrylic-menu {
    background: none !important;
    isolation: isolate !important;
    overflow: visible !important;
}

.acrylic-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
    background: rgba(255,255,255,.6);
    background-blend-mode: exclusion;
    box-shadow:
        rgba(50,50,93,0.25) 0px 13px 27px -5px,
        rgba(0,0,0,0.3) 0px 8px 16px -8px;
}

.mega-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
}

.mega-menu > .menu-item {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.mega-menu > .menu-item > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 14px 20px;
    text-decoration: none;
    color: #222 !important;
    font-weight: 600;
    z-index: 10;
}

.mega-menu > .menu-item:hover > a {
    height: 130%;
}

.mega-menu > .menu-item > .sub-menu {
    position: absolute;
    left: 5vw;
    top: calc(100% + 15px);
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    border-radius: 16px;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    z-index: -1;
    transition: .35s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.mega-menu > .menu-item > .sub-menu::before {
    border-radius: 16px;
}

.mega-menu > .menu-item:hover > .sub-menu {
    opacity: 1;
    transform: scaleY(1);
}

.mega-menu > .menu-item > .sub-menu li {
    width: 12.5vw;
    margin-bottom: 10px;
    list-style-type: none;
    z-index: 10;
    border-radius: 26px;
}

.mega-menu > .menu-item > .sub-menu li::before {
    border-radius: 15px;
}

.mega-menu > .menu-item > .sub-menu li a {
    text-decoration: none;
    color: #333 !important;
    display: block;
    padding: 15px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.sub-menu {
    padding: 0;
    position: relative;
}

.sub-menu > .menu-item {
    position: relative;
}

.sub-menu > .menu-item > .sub-menu {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: calc(100% - 54px);
}

.sub-menu > .menu-item > .sub-menu::before {
    border-radius: 0 0 15px 15px;
}

.sub-menu > .menu-item > .sub-menu li {
    width: 88%;
    list-style-type: none;
    padding: 0;
    margin-left: 25px;
}

.sub-menu > .menu-item > .sub-menu img{
    height: 1.5rem;
    width:  auto;
}

.sub-menu > .menu-item > .sub-menu li a {
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
}

/* =====================================================
    STATS
===================================================== */

.stats-group > div {
    justify-content: space-evenly;
}

.stats-group > div > div {
    padding-top: 15px;
    min-width: 260px !important;
    max-width: 260px !important;
}

.stats-group > div > div > div {
    min-width: 250px !important;
}
  .alert-pill {
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50px;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }

  .pulse-dot {
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 1.5s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.4); opacity: 0.6; }
  }

  .alert-pill span {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
  }


/* =====================================================
    SECTOR SYSTEM
===================================================== */

.sector-button {
    cursor: pointer;
}

.sector-button.active {
    background-color: rgba(0,0,0,0.1);
}

.sector-info {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0, 0, 0, 1) !important;
    position: absolute;
    top: 0;
    display: block;
    height: 100%;
}

.sector-info.active {
    opacity: 1;
}


/* =====================================================
    FORMS
===================================================== */

.wpforms-field-large {
    border-color: transparent !important;
    border-radius: 16px !important;
    box-shadow:
        inset 10px 10px 33px #666666,
        inset -10px -10px 33px #ffffff;
}


/* =====================================================
    PARALLAX BACKGROUND
===================================================== */

.parallax-background {
    position: fixed;
    top: -100vh;
    height: 200vh;
    width: 100vw;
    background:
        linear-gradient(
            25deg,
            rgba(0,176,219,0.75) 0%,
            rgba(16, 23, 32,0.75) 25%,
            rgba(0,176,219,0.75) 44%,
            rgba(16, 23, 32,0.75) 64%,
            rgba(0,176,219,0.75) 87%,
            rgba(16, 23, 32,0.75) 100%
        ),
        url("https://media.istockphoto.com/id/1597475039/photo/abstract-colorful-glass-background.jpg?s=2048x2048&w=is&k=20&c=vJukprFS_dv237PFCexedM5PkoGZ_-nwtfS1ndBnx0M=")
        center / cover no-repeat;
    will-change: transform;
    filter: blur(30px);
    transform: scale(1.3) translateY(0%);
    z-index: -1;
}

/* =====================================================
    Team
===================================================== */

.team .stk-block-column {
     height: 70vh;
     border-radius: 15px;
}

.team .stk-block-content {
     height: 100%;
}

.bio {
     opacity: 0;
     position: absolute;
     top: -24px;
     left: -24px;
     width: calc(100% + 48px);
     background: rgba(256,256,256,0);
     z-index: 100;
     height: calc(100% + 48px);
     padding: 24px;
     display: flex;
     align-items: center;
     transition: 0.3s ease;
   
}

.bio p {
      color:#101720 !important;
}

.bio:hover {
     opacity: 1;
     background: rgba(256,256,256,0.65);
}


/* =====================================================
    FLIP TILES
===================================================== */

/*
Source - https://stackoverflow.com/a/35499596
Posted by L777, modified by community. See post 'Timeline' for change history
Retrieved 2026-04-01, License - CC BY-SA 3.0
*/

#tile-wrapper {
position: relative;
height:100%;
width:100%;
margin:auto;
display: flex;
}

.off {
  color: rgba(0, 0, 0, 0.0) !important;
  background: rgba(230, 230, 250, 0.0) !important;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
}

.tiles {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  perspective: 900px;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  margin-left: 10%;
  margin-right: 10%;
 }
 
.tiles .tile.flipped {
  -webkit-transform: rotatex(-180deg);
  -moz-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  height: 100%;
  z-index: 100;
}

.tiles .tile {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}

.tiles .tile .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  -moz-backface-visibility: hidden ;
  backface-visibility: hidden ;
  z-index: 2;
  font-size: 2em;
  font-family: arial, sans-serif;
  text-align: center;
  -webkit-transition: all 0.5s; /* Safari */
  transition: all 0.5s;
}

.tiles .tile .front {
  position: absolute;
  background: tomato;
  z-index: 1;
}

.tiles .tile .back {
  -webkit-transform: rotatex(-180deg);
  -moz-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  background: gold;
}

.tiles .tile .front,
.tiles .tile .back{
  cursor: pointer;
}

.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}

/* =====================================================
    RESPONSIVE
===================================================== */

.ct-panel-content [data-device="mobile"] p{
    colour: white !important;
}

@media (max-width: 1400px) {

    .is-layout-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .rmp-menu-item a {
       color: black !important;
    }
    .rmp-menu-title-image {
       object-fit: contain;
    }
    .disabled-link {
       pointer-events: auto;
       border-radius: 0px !important;
    }

    .mobile-menu .ct-menu-link {
        justify-content: start !important;
    }
     
    .mobile-menu li {
        align-items: start !important;
    }

    .mega-menu {
        flex-direction: column;
    }

    .sub-menu {
        position: static;
        width: 100%;
        display: none;
        flex-direction: column;
        padding: 10px;
        box-shadow: none;
    }

    .menu-item:hover > .sub-menu {
        display: flex;
    }

    .sub-menu li {
        width: 100%;
    }

    .info-cards .acrylic-card {
    min-height: 180px;
    }

    
    .stats {

        padding: 1.5rem;

    }

}


@media (max-width: 800px) {

    .contact{
       height: auto !important;
    }
    .contact > .hero-child > .stk-block-columns {
       padding-top: 10vh;
       padding-bottom: 10vh;

    }    
    .contact > .hero-child > .stk-block-columns > div {
       row-gap: 25px;
    }
    .hero-child video, .hero-child > .wp-block-stackable-image img {
       mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 129%);
    }
}