* {scrollbar-width: thin;scrollbar-color: #333 transparent;}
*::-webkit-scrollbar {width: 10px;height: 10px;}
*::-webkit-scrollbar-track {background: transparent;}
*::-webkit-scrollbar-thumb {background-color: #333;border-radius: 10px;border: 2px solid transparent;}
*::-webkit-scrollbar-thumb:hover {background-color: #444;}

/* Utilities */
    .display-4 { line-height: 1; }
    .pt-90 { padding-top: 90px; }
    h1 {font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: -1px;}
    h2 {font-family: 'Bebas Kai', sans-serif;}
    .crimson {color:crimson;}
    .lead {font-size: 1.5rem;}
    .lineheight{line-height: 1.7rem;}
    .text-justify {text-align: justify !important;}
    .bg-mid {background-color:rgb(255 255 255 / 85%);}
    .red-bg { background-color: #dc143c; }
    .btn-primary {background-color: transparent; border-color: gray;}
    .btn-primary:hover {background-color: transparent; border-color: crimson;}
    .btn:active {background-color: crimson; border-color: crimson;}
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {background-color: crimson; border-color: crimson;}
    .form-control {background: rgba(0, 0, 0, 0.05); border-color: gray; color:#727272;backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);}
    .form-control:focus {background: rgba(0, 0, 0, 0.05); border-color: gray; color:#727272; box-shadow: 0px 0px 27px -12px crimson !important;backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);}

/* Scroll */
    .scroll-container{height:100vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
    #maincontent{
        margin:0;
        height:100vh;
        display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;z-index:5;
    }
    svg#logo{width:1200px;height:auto;overflow:visible;background:none;display:block;transition:filter .1s ease;z-index:10;}
    #gdksvg{fill:transparent;stroke:url(#gkd-gradient);stroke-width:.3px;stroke-linejoin:round;opacity:1;}
    
    #who {background:radial-gradient(circle at 50% 100%,rgba(220, 20, 60, 0.1) 0%,#000 70%);}
    #work {background:radial-gradient(circle at 50% 0%,rgba(220, 20, 60, 0.1) 0%,#000 70%);}
    #about {border-radius: 0px 0px 70px 70px; max-width: 99%; margin: 0 auto;}

/* Frame */
    .svg-frame-container{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999;}
    .grid-container{display:grid;grid-template-columns:auto 30px;grid-template-rows:auto 30px;width:fit-content;height:fit-content;position:fixed;top:6px;left:6px;transform:rotate(0);z-index:99;cursor:pointer;}
    .grid-container2{display:grid;grid-template-columns:auto 30px;grid-template-rows:auto 30px;width:fit-content;height:fit-content;position:fixed;top:6px;right:6px;transform:rotate3d(0,1,0,180deg);z-index:99;}
    .grid-container3{display:grid;grid-template-columns:auto auto;grid-template-rows:15px auto;width:fit-content;height:fit-content;position:fixed;bottom:6px;right:6px;z-index:99;}

    .item1{background:#000;border-radius:0 0 30px 0;width:120px;height:60px;min-width:70px;min-height:60px;transition:.3s;}
    .item5{background:#000;border-radius:0 0 30px 0;width:60px;height:60px;min-width:60px;min-height:60px;transition:.3s;}
    .item6{background:#000;border-radius:15px 0 0 0;width:auto;height:30px;min-width:30px;min-height:30px;transition:.3s;display:flex;align-items:center;}

    #navcontainer:has(.menu-button:hover) .item5 { width: 80px; height: 80px;}
    #navcontainer { z-index: 5;}

    .item7 { display: flex; justify-content: flex-end; }
    .item8 { display: flex; align-items: end; }
    .item1:hover { width: 120px; height: 120px; }
    .item2 img,.item3 img { width: 30px; height: 30px; }
    .item7 img,.item8 img { width: 15px; height: 15px; transform: rotate3d(0,0,1,180deg);}

    .logo-container{overflow:hidden;clip-path:inset(0% 60% 0% 0%);transform:rotate(90deg);transition:.3s;}
    .logo-container:hover { clip-path: inset(0); transform: translateX(0); }
    

/* Menu */
    .menu-button{position:fixed;top:5px;right:5px;width:54px;height:54px;display:flex;flex-direction:column;
        justify-content:center;align-items:center;gap:6px;cursor:pointer;z-index:999999;mix-blend-mode:difference;transition:.4s;}
    .menu-button:hover { transform: scale(1.1); top: 15px; right: 15px; transition: 0.3s; }
    .menu-line {width: 24px;height: 2px;background: #fff;transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
    .menu-button.active .line-1 { transform: translateY(8px) rotate(45deg); }
    .menu-button.active .line-2 { opacity: 0; }
    .menu-button.active .line-3 { transform: translateY(-8px) rotate(-45deg); }
    .menu-overlay{position:fixed;inset:0;background:#000;z-index:100000;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;}
    .nav-link{font-size:clamp(3rem,8vw,4rem);font-weight:700;color:#fff;margin:.5rem 0;text-decoration:none;transition:color .3s;opacity:0;transform:translateY(30px);}
    .nav-link:hover { color: #555; }
    
/* Modal */
    .modal {z-index: 9999999;}
    .modal-body {z-index: 2;}
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.95);backdrop-filter:blur(20px);z-index:9999999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .5s cubic-bezier(.16,1,.3,1);}
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-content {padding:30px;}
    .modal-content-terms {background:#000;width:100%;height:100%;padding: 20px;position:relative;overflow:hidden;transform:scale(1.05);transition:transform .6s cubic-bezier(.16,1,.3,1);}
    .modal-overlay.active .modal-content { transform: scale(1);}
    .modal-close{position:fixed;top:20px;right:20px;background:#fff;color:#000;width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:100003;transition:transform .3s ease;}
    .modal-close:hover { transform: scale(1.1) rotate(90deg);}
    .patbg { 
        background-image: url('img/pattern.svg');
        background-repeat: no-repeat;
        opacity: 0.03;
        background-position: 110% 113%;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }


/* Project */
    .project-modal-grid{display:grid;grid-template-columns:1fr;height:100%;width:100%;}
    .project-gallery{width:100%;height:100%;background:#050505;overflow:hidden;display:flex;align-items:center;}
    .project-info{height:100%;overflow-y:auto;padding:40px;background:#000;border-top:1px solid rgba(255,255,255,.1);}


/* Reveal */
    .reveal,.about-reveal,.contact-reveal{opacity:0;transform:translateY(40px);}


/* Hero */
    .hero-fade {position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 80%,#000 100%),radial-gradient(ellipse at 50% 160%,transparent 80%,#000 100%);z-index:5;pointer-events:none;}
    .fadetoblack {background:#000;width:100vw;height:100vh;position:absolute;top:0;left:0;z-index:999;pointer-events:none;opacity:0.4;}
    .parallax-wrapper {perspective: 1000px;}
    .p-layer {
        position: absolute;
        top: -5%;
        left: -5%;
        width: 110%;
        height: 110%;
        object-fit: cover;
        pointer-events: none;
        will-change: transform;
        transition: transform 0.1s ease-out;
    }
    .opshift { animation: opacityPulse 4.5s ease-in-out infinite;}
    @keyframes opacityPulse {
        0%   { opacity: 1; transform: scale(1); }
        50%  { opacity: 0.5; transform: scale(0.98); }
        100% { opacity: 1; transform: scale(1); }
    }
    #hercontainer { z-index: 99; }
    .heroheading {font-size: clamp(0.6rem, 2rem, 3rem);}



/*Projects*/
    .project-dim {background: rgba(0,0,0,0);transition: background .4s ease;pointer-events: none;}
    #projectsGrid:hover .project-dim {background: rgba(0,0,0,.6);}
    #projectsGrid .project-item:hover .project-dim {background: rgba(0,0,0,0);}
    .project-overlay {opacity: 0;transition: opacity .4s ease;pointer-events: none;
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.5) 40%,
            rgba(0,0,0,0.1) 70%,
            rgba(0,0,0,0) 100%
        );
    }
    .project-item:hover .project-overlay {opacity: 1;}


/*statusindicator*/
    @keyframes pulse-scale {
        0%   { transform: scale(0.1); opacity: 1; }
        70%  { transform: scale(2.4); opacity: 0; }
        100% { transform: scale(2.4); opacity: 0; }
      }
    .pulse {transform-origin: 25px 25px; animation: pulse-scale 2.8s linear infinite;}
    .pulse:nth-of-type(2) {animation-delay: -1.4s;}


/*Contact*/
    .seambg { background-image: url('img/seamlesspattern.webp');
        background-repeat: repeat;
        background-size: 70px;
        mix-blend-mode: color-dodge;
        opacity: 0.03;
        background-attachment: fixed;
    }
    #za-svg-module {height: 150px;width: 150px;display: flex;align-items: center;justify-content: center;}
    #za-svg-module svg {width: 90%;height: auto; overflow: visible;}



/*MosselBayMall*/
    .objbg { background-image: url('img/showcase/mbm/MosselBayMall1.webp');
        background-repeat: no-repeat;
        background-position: 50% 50%; 
        background-attachment: cover;
    }
    .overlay {background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: inherit;
        position: absolute;
        z-index: 1;}




/*Partner logos*/
    #logoContainer_Unique {display: flex;gap: 60px;width: max-content;}
    .logo-item-wrapper {flex: 0 0 auto;}
    .logo-item {height: 90px;width: auto;object-fit: contain;opacity: 0.8;transition: 0.3s ease;}
    .logo-item:hover {opacity: 1;}



/*About*/
    #image-track {display: flex;flex-wrap: nowrap;width: max-content;align-items: center;}
    #image-track-2 {display: flex;flex-wrap: nowrap;width: max-content;align-items: center;}
    .icon-circle {
        position: relative;
        width: 90px;
        height: 90px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(12, 12, 12, 1);
        border-radius: 50%;
        border: 6px solid black;
        z-index: 1;
        overflow: visible;
        box-shadow: 0px 0px 10px -12px crimson;
    }
    .glassbg {
        position: relative;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border-radius: 25px;
        z-index: 0;
    }
    .glassbg::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(
            200deg,
            rgba(0,0,0,0.6),
            rgba(220, 20, 60, 0.3)
        );
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }



/*Testimonials*/
    .carousel-inner {display: flex;align-items: center;}
    .testimonial-card {
        background: #000;
        border-radius: 1.5rem;
        /*border: 1px solid #eee;*/
        box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
        padding: 3rem;
        margin: 2rem auto;
        max-width: 800px;
        position: relative;
        overflow: hidden;
    }
    .quote-icon {
        position: absolute;
        top: 1rem;
        left: 1rem;
        font-size: 4rem;
        color: rgb(188 8 62 / 30%);
        line-height: 1;
    }
    .carousel-indicators [data-bs-target] {
        background-color: #dee2e6;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        margin: 0 5px;
        transition: all 0.3s ease;
    }
    .carousel-indicators .active {background-color: crimson;width: 30px;border-radius: 10px;}
    .carousel-control-prev, .carousel-control-next {
        width: 50px;
        height: 50px;
        background: #000;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        border: 1px solid #eee;
        color: #fff;
        transition: 0.3s ease;
    }
    .carousel-control-prev:hover, .carousel-control-next:hover {
        background: black;
        color: crimson;
        border-color: crimson;
        transition: 0.3s ease;
    }
    .testimonial-text {
        font-size: 1.25rem;
        font-style: italic;
        color: #495057;
        margin-bottom: 1.5rem;
    }
    .testimonial-author {font-weight: 700;color: #464c51;margin-bottom: 0.25rem;}
    .testimonial-role {color: crimson;font-weight: 500;}





.form-floating > label {color: white !important;}
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {background-color: transparent;}




.profile-photo {
    width: 110px;
    height: 110px;
    position: absolute;
    right: 0;
    overflow: visible;
    border: 1px solid #8f1d2c;
    border-radius: 50%;
    animation: crimsonPulse 3s ease-in-out infinite;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}



.profile-abilities {
    position: absolute;
    left: -8px;
    bottom: 4px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8f1d2c;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    box-shadow:0 0 0 3px #111,0 0 8px rgba(143, 29, 44, 0.5);
    transition:transform 0.25s ease,background 0.25s ease,box-shadow 0.25s ease;}

    .profile-abilities:hover {
        transform: scale(1.12) rotate(-8deg);
        background: #8f1d2c;
        box-shadow:
            0 0 0 3px #111,
            0 0 14px rgba(143, 29, 44, 0.8);
    }

    .b-left {border-left:2px solid #4d565f; margin-right:4px;}
    .desktop-tabs > button {
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #fff !important;
        opacity: .55;
      }

      .desktop-tabs > button.active {background: transparent !important;border-bottom-color: crimson !important;opacity: 1;}
      .desktop-tabs > button:hover {background: transparent !important;opacity: 1;}
      .card > i {color: crimson !important;}








.gkd-toolkit {
    --gkd-bg: ;
    --gkd-card: #212529;
    --gkd-border: rgba(255,255,255,.08);
    --gkd-text: #fff;
    --gkd-muted: rgba(255,255,255,.58);
    --gkd-accent: #8f1d2c;
    background: var(--gkd-bg);
    color: var(--gkd-text);
}

.gkd-toolkit .gkd-bento-card {
    position: relative;
    min-height: 160px;
    height: stretch;
    padding: 2rem;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        ),
        var(--gkd-card);
    border: 1px solid var(--gkd-border);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gkd-toolkit .gkd-bento-number {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 4rem;
    line-height: 1;
    font-weight: 700;
    color: rgba(255,255,255,.035);
    pointer-events: none;
}

.gkd-toolkit h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 .65rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.gkd-toolkit p {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: var(--gkd-muted);
    font-size: .95rem;
    line-height: 1.7;
}






.heronav {transition: color 0.3s ease, transform 0.3s ease;}
.heronav:hover {color:crimson;transform: translateY(-10px);border-bottom:1px solid crimson;}




#creativeCapacityNotice {
  position: fixed !important;
  left: 20px !important;
  bottom: 20px !important;
  z-index: 1040 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 230px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 10px 12px !important;
  /*background: #212529 !important;*/
  color: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 25px rgba(0,0,0,.3) !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border-radius: 25px;
    transition-duration: 0.3s;
}


#creativeCapacityNotice::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(
            200deg,
            rgba(0,0,0,0.8),
            rgba(220, 20, 60, 0.5)
        );
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
#creativeCapacityNotice .notice-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}

/*#creativeCapacityNotice .notice-close {
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}*/
#creativeCapacityNotice:hover {
  position: fixed !important;
  left: 20px !important;
  bottom: 30px !important;
  z-index: 1040 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 230px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 10px 12px !important;
  /*background: #212529 !important;*/
  color: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 25px rgba(0,0,0,.3) !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(220, 20, 60, 0.8);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border-radius: 25px;
}



/* Responsive */
    @media (max-width:640px){
        .heroheading {font-size: clamp(0.6rem, 2rem, 3rem);}
        .footer-left,.footer-right{font-size:8px;letter-spacing:.1em;}
        /*h1{font-size:3.5rem!important;}*/
        h2{font-size:2.5rem!important;}
        .nav-link{font-size:2rem!important;}
        #projectsGrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
        #projectsGrid::-webkit-scrollbar{display:none;}
        .project-item{flex:0 0 100%;scroll-snap-align:start;border-right:none!important;}
        .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:.3s;cursor:pointer;}
        .dot.active{background:#fff;transform:scale(1.2);}

    }

    @media (min-width:1024px){
        .modal-content-terms {width:90%;height:85%;border:1px solid rgba(255,255,255,.1);border-radius:4px;}
        .project-modal-grid{grid-template-columns:1.4fr 1fr;}
        .project-info{padding:80px;border-left:1px solid rgba(255,255,255,.1);border-top:none;}
        .swiper-slide{padding:60px;}
        .project-item .aspect-video{aspect-ratio:1/1;}
    }

    @media (max-width:768px){
        .testimonial-card {padding: 2rem;}
        .testimonial-text {font-size: 1.1rem;}
        .hero-fade{background:linear-gradient(to bottom,transparent 92%,#000 100%),radial-gradient(ellipse at 50% 160%,transparent 50%,#000 100%);}
        .profile-photo {
            right: unset;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom:25px;
        }
        #creativeCapacityNotice {display:none !important;}

        .gkd-toolkit {padding: 3rem 0;}
        .gkd-toolkit .gkd-bento-card,
        .gkd-toolkit .gkd-bento-design,
        .gkd-toolkit .gkd-bento-motion,
        .gkd-toolkit .gkd-bento-3d,
        .gkd-toolkit .gkd-bento-web,
        .gkd-toolkit .gkd-bento-ai {min-height: 190px;}
        .gkd-toolkit .gkd-bento-card {padding: 1.5rem;}
        .gkd-toolkit .gkd-bento-number {font-size: 3rem;}

        [role="tablist"] > button {
            border: 0 !important;
            border-bottom: 2px solid transparent !important;
            border-radius: 0 !important;
            background: transparent !important;
            opacity: .5;
          }

          [role="tablist"] > button.active {
            border-bottom-color: crimson !important;
            background: transparent !important;
            opacity: 1;
          }

          [role="tablist"] > button i {
            transition: transform .2s ease;
          }

          [role="tablist"] > button:hover i,
          [role="tablist"] > button.active i {
            transform: translateY(-2px);
          }

          [role="tablist"] > button small {
            font-size: .7rem;
            letter-spacing: .08em;
          }
    }