/* ==========================================================
   Creative Linkage responsive fixes — cleaned replacement
   Scope:
   - responsive/zoom safety
   - compact mobile/tablet header
   - right-side mobile drawer
   - phone hero/section spacing
   - light/day mobile readability
   - logo/footer/loader stability
   Load after style.css and before any final theme/logo override.
========================================================== */

/* ------------------------------
   01. Global safety
------------------------------ */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

main,
#smooth-wrapper,
#smooth-content,
section,
.container-fluid,
.row,
[class*="col-"],
.slick-slider,
.slick-list,
.slick-track {
  max-width: 100%;
}

main {
  display: block;
}

.row,
[class*="col-"],
.header-navigation .primary-menu,
.nav-right-item,
.site-branding,
.pf-nav-menu {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

p,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6,
span {
  overflow-wrap: break-word;
}

input,
textarea,
select,
button,
.theme-btn {
  max-width: 100%;
}

/* ------------------------------
   02. Container system
------------------------------ */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 1451px) {
  .container {
    max-width: 1314px;
  }
}

@media (min-width: 1200px) and (max-width: 1450px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 540px;
  }
}

/* ------------------------------
   03. Responsive media/content safety
------------------------------ */
.site-branding img {
  width: auto;
  max-width: clamp(115px, 18vw, 170px);
  height: auto;
}

.hero-wrapper-one {
  max-width: 100%;
  padding-top: clamp(100px, 10vw, 180px);
  padding-bottom: clamp(90px, 11vw, 200px);
}

.hero-wrapper-one .hero-content {
  margin-bottom: clamp(55px, 8vw, 130px);
}

.hero-wrapper-one .hero-content h1,
.hero-wrapper-one .hero-content .big-text {
  font-size: clamp(60px, 10.5vw, 200px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.hero-wrapper-one .hero-content .text-box {
  width: min(100%, 400px);
}

.hero-wrapper-one .hero-content .element img {
  width: clamp(45px, 8vw, 90px);
  height: auto;
}

.agenko-card-item.style-one,
.agenko-card-item.style-two,
.agenko-iconic-box.style-two,
.agenko-iconic-box.style-four,
.agenko-iconic-box.style-five,
.agenko-iconic-box.style-six,
.footer-widget .footer-content,
.shape,
.footer-widget,
.agenko-footer,
.hero-wrapper-two,
.hero-wrapper-three {
  max-width: 100%;
}

.shape img {
  max-width: min(100%, 420px);
  height: auto;
}

/* ------------------------------
   04. Tablet / zoomed desktop header
   Switches to compact off-canvas header at <=1199px.
------------------------------ */
@media (max-width: 1199px) {
  .header-navigation .container {
    max-width: min(100% - 24px, 960px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-navigation .primary-menu {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 28px !important;
  }

  .header-navigation .site-branding {
    flex: 0 1 120px !important;
    max-width: 120px !important;
    min-width: 88px !important;
    padding: 2px 4px !important;
  }

  .header-navigation .site-branding img {
    max-width: 112px !important;
    width: 100% !important;
    height: auto !important;
  }

  .header-navigation .nav-right-item {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-navigation .nav-right-item .nav-button {
    display: none !important;
  }

  .header-navigation .navbar-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    padding: 9px 8px !important;
    border-radius: 10px !important;
  }

  .header-navigation .navbar-toggler span {
    width: 26px !important;
  }

  .theme-toggle {
    width: 54px !important;
    height: 30px !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }

  .theme-toggle__track {
    width: 54px !important;
    height: 30px !important;
    padding: 0 7px !important;
  }

  .theme-toggle__thumb {
    width: 22px !important;
    height: 22px !important;
    top: 3px !important;
    left: 3px !important;
  }

  html[data-theme="light"] .theme-toggle__thumb,
  html[data-theme="day"] .theme-toggle__thumb {
    transform: translateX(25px) !important;
  }

  .header-navigation .pf-nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin-left: 0 !important;
    padding: 24px 20px 32px !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 100000 !important;
    border-radius: 24px 0 0 24px !important;
    border-left: 1px solid rgba(255, 255, 255, .14) !important;
    transform: translateX(105%) !important;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1) !important;
    will-change: transform !important;
    box-shadow: -24px 0 55px rgba(0, 0, 0, .38) !important;
  }

  .header-navigation .pf-nav-menu.menu-on {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
  }

  .header-navigation .pf-nav-menu .site-branding {
    max-width: 120px !important;
    margin: 0 auto 20px !important;
  }

  .header-navigation .pf-nav-menu .main-menu {
    margin-top: 24px !important;
  }

  .header-navigation .pf-nav-menu .main-menu ul {
    padding-left: 0 !important;
  }

  .header-navigation .pf-nav-menu .main-menu ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  .header-navigation .pf-nav-menu .main-menu ul li:not(:last-child) {
    border-bottom: 1px solid var(--border-color) !important;
  }

  .header-navigation .pf-nav-menu .main-menu ul li a {
    display: block !important;
    padding: 12px 34px 12px 0 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    border-radius: 0 !important;
    white-space: normal !important;
  }

  .header-navigation .pf-nav-menu .main-menu ul li .dd-trigger {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    z-index: 2 !important;
  }

  .header-navigation .pf-nav-menu .main-menu ul li .sub-menu {
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 0 8px 14px !important;
    margin-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .offcanvas__overlay.overlay-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99998 !important;
    background: rgba(0, 0, 0, .58) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ------------------------------
   05. Tablet/mobile base
------------------------------ */
@media (max-width: 991px) {
  .header-one.transparent-header {
    top: 12px !important;
  }

  .header-navigation .container {
    max-width: 720px;
  }

  .hero-wrapper-one .hero-content .big-text {
    text-align: left;
  }

  .hero-wrapper-one .hero-content .hero-button {
    margin-top: 35px;
  }
}

/* ------------------------------
   06. Phone layout
------------------------------ */
@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  #smooth-wrapper,
  #smooth-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  .row > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pf_fadeup,
  .pf_zoomIn,
  .text-anm,
  .text-anm *,
  .rotate360,
  .zoomInOut {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }

  .transparent-header,
  .header-area,
  .header-area.scroll-sticky,
  .header-area.header-hidden,
  .header-area.header-visible,
  .header-area.header-at-top {
    position: fixed !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }

  .header-navigation .container {
    max-width: calc(100% - 20px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-navigation .primary-menu {
    width: 100% !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .header-navigation .site-branding {
    flex: 0 1 110px !important;
    max-width: 110px !important;
    min-width: 82px !important;
    padding: 2px 4px !important;
    border-radius: 999px !important;
  }

  .header-navigation .site-branding img {
    max-width: 100px !important;
    width: 100% !important;
    height: auto !important;
  }

  .header-navigation .nav-right-item {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    margin-left: auto !important;
    min-width: 0 !important;
  }

  .header-navigation .nav-right-item .nav-button {
    display: none !important;
  }

  .theme-toggle {
    width: 54px !important;
    height: 30px !important;
    flex: 0 0 54px !important;
    margin-right: 0 !important;
  }

  .theme-toggle__track {
    width: 54px !important;
    height: 30px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
  }

  .theme-toggle__icon {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .theme-toggle__thumb {
    width: 22px !important;
    height: 22px !important;
    top: 3px !important;
    left: 3px !important;
    font-size: 10px !important;
  }

  html[data-theme="light"] .theme-toggle__thumb,
  html[data-theme="day"] .theme-toggle__thumb {
    transform: translateX(25px) !important;
  }

  .header-navigation .navbar-toggler {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 46px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    flex: 0 0 46px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .header-navigation .navbar-toggler span,
  .header-navigation .navbar-toggler span:not(:first-child) {
    display: block !important;
    position: relative !important;
    top: auto !important;
    width: 24px !important;
    height: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 3px !important;
    background-color: rgba(255, 255, 255, .78) !important;
    transform: none !important;
  }

  .header-navigation .navbar-toggler.active span:nth-of-type(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .header-navigation .navbar-toggler.active span:nth-of-type(2) {
    opacity: 0 !important;
  }

  .header-navigation .navbar-toggler.active span:nth-of-type(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  html[data-theme="light"] .header-navigation .primary-menu,
  html[data-theme="day"] .header-navigation .primary-menu {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(151, 125, 207, .28) !important;
    box-shadow: 0 10px 28px rgba(56, 38, 89, .10), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  }

  html[data-theme="light"] .theme-toggle__track,
  html[data-theme="day"] .theme-toggle__track {
    background: #ffffff !important;
    border-color: rgba(151, 125, 207, .45) !important;
  }

  html[data-theme="light"] .theme-toggle__icon,
  html[data-theme="day"] .theme-toggle__icon {
    color: #5f5274 !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] .theme-toggle__icon--sun,
  html[data-theme="day"] .theme-toggle__icon--sun {
    color: #8c78c8 !important;
  }

  html[data-theme="light"] .theme-toggle__thumb,
  html[data-theme="day"] .theme-toggle__thumb {
    background: #8c78c8 !important;
    color: #ffffff !important;
  }

  html[data-theme="light"] .header-navigation .navbar-toggler,
  html[data-theme="day"] .header-navigation .navbar-toggler {
    background: rgba(255, 255, 255, .82) !important;
    border-color: rgba(151, 125, 207, .50) !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .header-navigation .navbar-toggler span,
  html[data-theme="light"] .header-navigation .navbar-toggler span:not(:first-child),
  html[data-theme="day"] .header-navigation .navbar-toggler span,
  html[data-theme="day"] .header-navigation .navbar-toggler span:not(:first-child) {
    background-color: #241834 !important;
  }

  .agk-hero .hero-wrapper-one {
    padding-top: 112px !important;
    padding-bottom: 58px !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .hero-wrapper-one .hero-content {
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-wrapper-one .hero-content h1,
  .hero-wrapper-one .hero-content h1 span,
  .hero-wrapper-one .hero-content .big-text {
    display: block !important;
    font-size: clamp(42px, 15vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .hero-wrapper-one .hero-content .big-text {
    margin-top: 2px !important;
  }

  .hero-wrapper-one .hero-content .text-box {
    position: static !important;
    width: 100% !important;
    max-width: 330px !important;
    margin-top: 22px !important;
  }

  .hero-wrapper-one .hero-content .text-box p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
  }

  .hero-wrapper-one .hero-content .hero-button {
    margin-top: 22px !important;
  }

  .hero-wrapper-one .hero-content .hero-button .theme-btn {
    padding: 12px 24px !important;
    min-height: 44px !important;
  }

  .hero-wrapper-one .hero-content .element {
    top: 0 !important;
    right: 0 !important;
    opacity: .25 !important;
  }

  .hero-wrapper-one .shape.shape-blur_one {
    top: -120px !important;
    left: -160px !important;
  }

  .hero-wrapper-one .shape.shape-blur_two {
    top: -90px !important;
    right: -160px !important;
  }

  .hero-wrapper-one .shape.shape-blur_three {
    display: none !important;
  }

  html[data-theme="light"] .agk-hero,
  html[data-theme="day"] .agk-hero,
  html[data-theme="light"] .agk-hero .hero-wrapper-one,
  html[data-theme="day"] .agk-hero .hero-wrapper-one,
  html[data-theme="light"] .hero-wrapper-one,
  html[data-theme="day"] .hero-wrapper-one {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content,
  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content .text-box,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content .text-box {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    mix-blend-mode: normal !important;
    z-index: 5 !important;
  }

  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content h1,
  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content h1 span,
  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content .big-text,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content h1,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content h1 span,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content .big-text {
    color: #17111f !important;
    -webkit-text-fill-color: #17111f !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
  }

  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content .text-box p,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content .text-box p {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
  }

  html[data-theme="light"] .agk-hero .hero-wrapper-one .hero-content .text-box p span,
  html[data-theme="day"] .agk-hero .hero-wrapper-one .hero-content .text-box p span {
    color: #17111f !important;
    -webkit-text-fill-color: #17111f !important;
  }

  html[data-theme="light"] .hero-wrapper-one .shape,
  html[data-theme="day"] .hero-wrapper-one .shape {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  html[data-theme="light"] .hero-wrapper-one .hero-content .element,
  html[data-theme="day"] .hero-wrapper-one .hero-content .element {
    opacity: .16 !important;
  }

  html[data-theme="light"] .hero-wrapper-one .shape.shape-blur_one,
  html[data-theme="light"] .hero-wrapper-one .shape.shape-blur_two,
  html[data-theme="light"] .hero-wrapper-one .shape.shape-blur_three,
  html[data-theme="day"] .hero-wrapper-one .shape.shape-blur_one,
  html[data-theme="day"] .hero-wrapper-one .shape.shape-blur_two,
  html[data-theme="day"] .hero-wrapper-one .shape.shape-blur_three {
    opacity: .20 !important;
  }

  .phone-light-hero-title {
    display: none;
  }

  html[data-theme="light"] .hero-wrapper-one .hero-content > h1,
  html[data-theme="light"] .hero-wrapper-one .hero-content > .big-text,
  html[data-theme="day"] .hero-wrapper-one .hero-content > h1,
  html[data-theme="day"] .hero-wrapper-one .hero-content > .big-text {
    display: none !important;
  }

  html[data-theme="light"] .hero-wrapper-one .hero-content .phone-light-hero-title,
  html[data-theme="day"] .hero-wrapper-one .hero-content .phone-light-hero-title {
    display: block !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    color: #17111f !important;
    -webkit-text-fill-color: #17111f !important;
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    font-size: clamp(42px, 15vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
    position: relative !important;
    z-index: 10 !important;
  }

  html[data-theme="light"] .hero-wrapper-one .hero-content .phone-light-hero-title span,
  html[data-theme="day"] .hero-wrapper-one .hero-content .phone-light-hero-title span {
    display: block !important;
    color: #17111f !important;
    -webkit-text-fill-color: #17111f !important;
  }

  html[data-theme="light"] .hero-wrapper-one .hero-content .text-box,
  html[data-theme="day"] .hero-wrapper-one .hero-content .text-box {
    margin-top: 0 !important;
  }

  .agk-video {
    margin-top: 0 !important;
    padding-top: 24px !important;
  }

  .agk-video .agk-play-image-box,
  .agk-video .agk-play-image-box .agk-image {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .agk-video .agk-play-image-box .agk-image img {
    width: 100% !important;
    aspect-ratio: 1290 / 500 !important;
    min-height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    background: #c7c7c7 !important;
    border-radius: 16px !important;
  }

  .agk-video .agk-play-image-box .agk-image .play-box .video-popup {
    width: 54px !important;
    height: 54px !important;
    font-size: 16px !important;
  }

  section {
    max-width: 100% !important;
  }

  .pt-125,
  .pt-130,
  .pt-140,
  .pt-150 {
    padding-top: 70px !important;
  }

  .pb-125,
  .pb-130,
  .pb-140,
  .pb-150 {
    padding-bottom: 70px !important;
  }

  .section-title {
    margin-bottom: 26px !important;
  }

  .sub-title {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    padding: 8px 12px !important;
  }

  .section-title h2,
  .section-title h2 span,
  .agk-service-ca .section-title h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .agk-service-ca .text-box,
  .text-box {
    max-width: 100% !important;
    float: none !important;
  }

  .agk-service-ca .text-box p,
  .text-box p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .agenko-iconic-box.style-four,
  .agenko-iconic-box.style-four.mt-60,
  .agenko-iconic-box.style-four.mt-120,
  .agenko-iconic-box.style-two,
  .agenko-iconic-box.style-five,
  .agenko-iconic-box.style-six,
  .agenko-project-item,
  .agenko-team-item,
  .agenko-blog-item,
  .agenko-testimonial-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
  }

  .agenko-iconic-box.style-four {
    padding: 28px 22px 26px !important;
  }

  .agenko-iconic-box.style-four .icon {
    font-size: 46px !important;
    margin-bottom: 18px !important;
  }

  .agenko-iconic-box.style-four .content h4.title,
  .agenko-iconic-box .content h4.title {
    font-size: 23px !important;
    line-height: 1.25 !important;
  }

  .agenko-project-item img,
  .agenko-team-item img,
  .agenko-blog-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .footer-widget,
  .footer-content,
  .footer-copyright,
  .copyright-text,
  .copyright-nav {
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* ------------------------------
   07. Small phones
------------------------------ */
@media (max-width: 575px) {
  .theme-btn {
    white-space: normal;
    text-align: center;
  }

  .hero-wrapper-one .hero-content h1,
  .hero-wrapper-one .hero-content .big-text {
    font-size: clamp(38px, 14vw, 58px);
  }

  .agenko-iconic-box.style-one {
    max-width: 100%;
  }

  .header-navigation .container {
    max-width: calc(100% - 18px) !important;
  }

  .header-navigation .site-branding {
    max-width: 104px !important;
    min-width: 78px !important;
  }

  .header-navigation .site-branding img {
    max-width: 96px !important;
  }

  .header-navigation .navbar-toggler span {
    width: 24px !important;
  }
}

@media (max-width: 390px) {
  .container,
  .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .header-navigation .container {
    max-width: calc(100% - 14px) !important;
  }

  .header-navigation .site-branding {
    max-width: 96px !important;
    min-width: 74px !important;
  }

  .header-navigation .site-branding img {
    max-width: 90px !important;
  }

  .header-navigation .nav-right-item {
    gap: 7px !important;
  }

  .theme-toggle {
    width: 50px !important;
    flex-basis: 50px !important;
  }

  .theme-toggle__track {
    width: 50px !important;
  }

  html[data-theme="light"] .theme-toggle__thumb,
  html[data-theme="day"] .theme-toggle__thumb {
    transform: translateX(21px) !important;
  }

  .header-navigation .navbar-toggler {
    width: 42px !important;
    height: 40px !important;
    flex-basis: 42px !important;
  }

  .header-navigation .navbar-toggler span,
  .header-navigation .navbar-toggler span:not(:first-child) {
    width: 22px !important;
  }

  .hero-wrapper-one .hero-content h1,
  .hero-wrapper-one .hero-content h1 span,
  .hero-wrapper-one .hero-content .big-text {
    font-size: clamp(38px, 14vw, 52px) !important;
  }

  html[data-theme="light"] .hero-wrapper-one .hero-content .phone-light-hero-title,
  html[data-theme="day"] .hero-wrapper-one .hero-content .phone-light-hero-title {
    font-size: clamp(38px, 14vw, 52px) !important;
  }
}

/* ------------------------------
   08. Logo / loader / footer stability
------------------------------ */
.header-navigation .pf-nav-menu > .site-branding,
.header-navigation .pf-nav-menu .site-branding.d-block.d-lg-none {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.header-navigation .primary-menu > .site-branding {
  flex: 0 0 166px !important;
  width: 166px !important;
  min-width: 166px !important;
  max-width: 166px !important;
  margin-right: 18px !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-navigation .primary-menu > .site-branding .cl-brand-logo {
  position: relative !important;
  width: 151px !important;
  height: 40px !important;
  min-width: 151px !important;
  max-width: 151px !important;
  flex: 0 0 151px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  line-height: 0 !important;
}

.header-navigation .primary-menu > .site-branding .cl-brand-logo .cl-theme-logo,
.cl-footer-logo-link .cl-theme-logo,
#loading-icon.cl-loader-logo .cl-theme-logo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .22s ease, visibility .22s ease !important;
}

html[data-theme="dark"] .cl-theme-logo-dark,
html[data-theme="night"] .cl-theme-logo-dark,
html:not([data-theme]) .cl-theme-logo-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="light"] .cl-theme-logo-light,
html[data-theme="day"] .cl-theme-logo-light {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="light"] .cl-theme-logo-dark,
html[data-theme="day"] .cl-theme-logo-dark,
html[data-theme="dark"] .cl-theme-logo-light,
html[data-theme="night"] .cl-theme-logo-light {
  opacity: 0 !important;
  visibility: hidden !important;
}

#cl-header-logo.cl-header-logo-img {
  display: block !important;
  width: 100% !important;
  max-width: 151px !important;
  height: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#loading-icon.cl-loader-logo {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: transparent !important;
}

.footer-logo.cl-footer-logo,
.footer-logo.cl-footer-logo.cl-footer-logo-fixed,
html[data-theme="light"] .footer-logo.cl-footer-logo,
html[data-theme="day"] .footer-logo.cl-footer-logo,
html[data-theme="dark"] .footer-logo.cl-footer-logo,
html[data-theme="night"] .footer-logo.cl-footer-logo {
  width: 190px !important;
  height: 54px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.cl-footer-logo-link,
.cl-footer-logo-link.cl-footer-logo-link-fixed,
html[data-theme="light"] .cl-footer-logo-link,
html[data-theme="day"] .cl-footer-logo-link,
html[data-theme="dark"] .cl-footer-logo-link,
html[data-theme="night"] .cl-footer-logo-link {
  position: relative !important;
  width: 180px !important;
  height: 48px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.cl-footer-fixed-logo-img,
html[data-theme="light"] .cl-footer-fixed-logo-img,
html[data-theme="day"] .cl-footer-fixed-logo-img,
html[data-theme="dark"] .cl-footer-fixed-logo-img,
html[data-theme="night"] .cl-footer-fixed-logo-img {
  position: static !important;
  display: block !important;
  width: 180px !important;
  height: 48px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (min-width: 1200px) {
  .header-navigation .primary-menu {
    min-height: 72px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header-navigation .primary-menu > .site-branding {
    flex-basis: 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    margin-right: 14px !important;
  }

  .header-navigation .primary-menu > .site-branding .cl-brand-logo {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    flex-basis: 140px !important;
    height: 37px !important;
  }

  #cl-header-logo.cl-header-logo-img {
    max-width: 140px !important;
    height: 37px !important;
    max-height: 37px !important;
  }
}

@media (max-width: 991.98px) {
  .header-navigation .primary-menu > .site-branding {
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .header-navigation .primary-menu > .site-branding .cl-brand-logo {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex-basis: 128px !important;
    height: 34px !important;
  }

  #cl-header-logo.cl-header-logo-img {
    max-width: 128px !important;
    height: 34px !important;
    max-height: 34px !important;
  }
}

@media (max-width: 767px) {
  #loading-icon.cl-loader-logo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 16px !important;
  }

  .footer-logo.cl-footer-logo,
  .footer-logo.cl-footer-logo.cl-footer-logo-fixed,
  html[data-theme="light"] .footer-logo.cl-footer-logo,
  html[data-theme="day"] .footer-logo.cl-footer-logo,
  html[data-theme="dark"] .footer-logo.cl-footer-logo,
  html[data-theme="night"] .footer-logo.cl-footer-logo {
    width: 170px !important;
    height: 48px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cl-footer-logo-link,
  .cl-footer-logo-link.cl-footer-logo-link-fixed,
  .cl-footer-fixed-logo-img,
  html[data-theme="light"] .cl-footer-logo-link,
  html[data-theme="day"] .cl-footer-logo-link,
  html[data-theme="dark"] .cl-footer-logo-link,
  html[data-theme="night"] .cl-footer-logo-link,
  html[data-theme="light"] .cl-footer-fixed-logo-img,
  html[data-theme="day"] .cl-footer-fixed-logo-img,
  html[data-theme="dark"] .cl-footer-fixed-logo-img,
  html[data-theme="night"] .cl-footer-fixed-logo-img {
    width: 160px !important;
    height: 43px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    object-position: center center !important;
  }
}


/* Dark-only cleanup: remove theme switch UI on all breakpoints. */
.theme-toggle,
.theme-toggle__track,
#themeModeToggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   Final landing hero + loader alignment fixes
   - Uses uploaded 3D shard image as the landing header background
   - Keeps the hero responsive without stretching the artwork
   - Centers the loader logo inside the rotating ring
========================================================= */
.agk-hero .hero-wrapper-one {
  isolation: isolate !important;
  position: relative !important;
  min-height: clamp(640px, 100vh, 920px) !important;
  padding-top: clamp(132px, 12vw, 190px) !important;
  padding-bottom: clamp(88px, 9vw, 150px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 76%, rgba(19, 226, 255, 0.18) 0%, rgba(68, 31, 255, 0.10) 25%, rgba(0, 0, 0, 0) 54%),
    linear-gradient(180deg, #000000 0%, #02030a 48%, #000000 100%) !important;
}

.agk-hero .hero-wrapper-one::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("../images/creative-agency/hero/header-3d-background.png");
  background-image: image-set(
    url("../images/creative-agency/hero/header-3d-background.webp") type("image/webp"),
    url("../images/creative-agency/hero/header-3d-background.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: min(1720px, 116vw) auto;
  background-position: center bottom;
  opacity: 0.94;
  filter: drop-shadow(0 34px 64px rgba(0, 207, 255, 0.22)) drop-shadow(0 14px 34px rgba(90, 26, 255, 0.24));
  transform: translate3d(0, 0, 0) scale(1.01);
  transform-origin: center bottom;
  will-change: transform;
}

.agk-hero .hero-wrapper-one::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.58) 31%, rgba(0, 0, 0, 0.30) 54%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.92) 100%);
}

.agk-hero .hero-wrapper-one .hero-content {
  position: relative !important;
  z-index: 2 !important;
}

.agk-hero .hero-wrapper-one .shape {
  opacity: 0.18 !important;
  pointer-events: none !important;
}

.agk-hero .hero-wrapper-one .hero-content h1,
.agk-hero .hero-wrapper-one .hero-content h1 span,
.agk-hero .hero-wrapper-one .hero-content .big-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 16px 38px rgba(0, 0, 0, 0.64), 0 0 30px rgba(39, 215, 255, 0.12) !important;
}

.agk-hero .hero-wrapper-one .hero-content .text-box p {
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.72) !important;
}

.agk-hero .hero-wrapper-one .hero-content .text-box p span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 1199.98px) {
  .agk-hero .hero-wrapper-one::before {
    background-image: url("../images/creative-agency/hero/header-3d-background.png");
    background-image: image-set(
      url("../images/creative-agency/hero/header-3d-background-1400.webp") type("image/webp"),
      url("../images/creative-agency/hero/header-3d-background.png") type("image/png")
    );
    background-size: 1320px auto;
    background-position: center bottom;
  }
}

@media (max-width: 991.98px) {
  .agk-hero .hero-wrapper-one {
    min-height: 760px !important;
    padding-top: 124px !important;
    padding-bottom: 74px !important;
  }

  .agk-hero .hero-wrapper-one::before {
    background-size: 1120px auto;
    background-position: 50% bottom;
    opacity: 0.82;
  }

  .agk-hero .hero-wrapper-one::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.50) 42%, rgba(0, 0, 0, 0.88) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.38));
  }
}

@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one {
    min-height: 700px !important;
    padding-top: 112px !important;
    padding-bottom: 58px !important;
  }

  .agk-hero .hero-wrapper-one::before {
    background-image: url("../images/creative-agency/hero/header-3d-background.png");
    background-image: image-set(
      url("../images/creative-agency/hero/header-3d-background-900.webp") type("image/webp"),
      url("../images/creative-agency/hero/header-3d-background.png") type("image/png")
    );
    background-size: auto 62%;
    background-position: 52% bottom;
    opacity: 0.72;
    filter: drop-shadow(0 22px 42px rgba(0, 207, 255, 0.18));
  }

  .agk-hero .hero-wrapper-one::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.68) 43%, rgba(0, 0, 0, 0.90) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.48));
  }

  .agk-hero .hero-wrapper-one .hero-content .text-box {
    max-width: 345px !important;
  }
}

@media (max-width: 420px) {
  .agk-hero .hero-wrapper-one {
    min-height: 665px !important;
  }

  .agk-hero .hero-wrapper-one::before {
    background-size: auto 55%;
    background-position: 52% bottom;
  }
}

/* Loader logo: force true center inside the rotating ring. */
.preloader .loading-container {
  position: relative !important;
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  margin: 40px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

.preloader .loading-container .loading {
  position: absolute !important;
  inset: 0 !important;
  width: 100px !important;
  height: 100px !important;
  margin: 0 !important;
  border-radius: 50% !important;
}

.preloader #loading-icon,
.preloader #loading-icon.cl-loader-logo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
  border-radius: 50% !important;
  background: transparent !important;
  line-height: 0 !important;
}

.preloader #loading-icon img,
.preloader #cl-loader-icon.cl-loader-icon-img {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 767.98px) {
  .preloader .loading-container,
  .preloader .loading-container .loading {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
  }

  .preloader #loading-icon,
  .preloader #loading-icon.cl-loader-logo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .preloader #loading-icon img,
  .preloader #cl-loader-icon.cl-loader-icon-img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* =========================================================
   Header refinement v102
   - Better fit for the 3D background inside the landing hero
   - Restore the green/purple ambient gradient look
========================================================= */
.agk-hero .hero-wrapper-one {
  background:
    radial-gradient(circle at 16% 18%, rgba(202, 196, 38, 0.22) 0%, rgba(202, 196, 38, 0.12) 16%, rgba(202, 196, 38, 0) 38%),
    radial-gradient(circle at 82% 14%, rgba(138, 43, 226, 0.24) 0%, rgba(138, 43, 226, 0.13) 20%, rgba(138, 43, 226, 0) 42%),
    radial-gradient(circle at 50% 88%, rgba(83, 255, 227, 0.16) 0%, rgba(83, 255, 227, 0.08) 18%, rgba(83, 255, 227, 0) 40%),
    linear-gradient(180deg, #030406 0%, #05060c 52%, #020204 100%) !important;
}

.agk-hero .hero-wrapper-one::before {
  background-size: min(1540px, 108vw) auto;
  background-position: center 78%;
  opacity: 0.86;
  filter: drop-shadow(0 34px 64px rgba(0, 207, 255, 0.18)) drop-shadow(0 14px 34px rgba(90, 26, 255, 0.18));
}

.agk-hero .hero-wrapper-one::after {
  background:
    radial-gradient(circle at 14% 18%, rgba(181, 209, 55, 0.18) 0%, rgba(181, 209, 55, 0.08) 16%, rgba(181, 209, 55, 0) 36%),
    radial-gradient(circle at 82% 16%, rgba(144, 51, 255, 0.20) 0%, rgba(144, 51, 255, 0.10) 18%, rgba(144, 51, 255, 0) 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.56) 28%, rgba(0, 0, 0, 0.26) 52%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.20) 45%, rgba(0, 0, 0, 0.90) 100%);
}

.agk-hero .hero-wrapper-one .shape {
  opacity: 0.3 !important;
}

.agk-hero .hero-wrapper-one .hero-content {
  margin-bottom: clamp(82px, 10vw, 128px) !important;
}

@media (min-width: 1200px) {
  .agk-hero .hero-wrapper-one::before {
    background-position: center 82%;
  }
}

@media (max-width: 1199.98px) {
  .agk-hero .hero-wrapper-one::before {
    background-size: min(1360px, 118vw) auto;
    background-position: center 84%;
    opacity: 0.84;
  }
}

@media (max-width: 991.98px) {
  .agk-hero .hero-wrapper-one {
    min-height: 740px !important;
  }

  .agk-hero .hero-wrapper-one::before {
    background-size: min(1160px, 145vw) auto;
    background-position: center 90%;
    opacity: 0.78;
  }

  .agk-hero .hero-wrapper-one::after {
    background:
      radial-gradient(circle at 16% 14%, rgba(181, 209, 55, 0.16) 0%, rgba(181, 209, 55, 0.06) 14%, rgba(181, 209, 55, 0) 34%),
      radial-gradient(circle at 84% 14%, rgba(144, 51, 255, 0.18) 0%, rgba(144, 51, 255, 0.08) 16%, rgba(144, 51, 255, 0) 34%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.48) 40%, rgba(0, 0, 0, 0.88) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.30));
  }
}

@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one {
    min-height: 680px !important;
    padding-top: 104px !important;
    padding-bottom: 52px !important;
  }

  .agk-hero .hero-wrapper-one::before {
    background-size: auto 56%;
    background-position: center 92%;
    opacity: 0.74;
    filter: drop-shadow(0 18px 34px rgba(0, 207, 255, 0.14));
  }

  .agk-hero .hero-wrapper-one::after {
    background:
      radial-gradient(circle at 14% 12%, rgba(181, 209, 55, 0.10) 0%, rgba(181, 209, 55, 0.05) 14%, rgba(181, 209, 55, 0) 28%),
      radial-gradient(circle at 86% 10%, rgba(144, 51, 255, 0.12) 0%, rgba(144, 51, 255, 0.06) 14%, rgba(144, 51, 255, 0) 30%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.66) 42%, rgba(0, 0, 0, 0.88) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.42));
  }
}

/* =========================================================
   Header background blend refinement v103
   - Use transparent cutout of the 3D artwork
   - Remove visible box/borders and blend the artwork into the hero gradient
========================================================= */
.agk-hero .hero-wrapper-one::before {
  inset: -2% -2% 0 -2%;
  background-image: url("../images/creative-agency/hero/header-3d-background-transparent.png");
  background-image: image-set(
    url("../images/creative-agency/hero/header-3d-background-transparent.webp") type("image/webp"),
    url("../images/creative-agency/hero/header-3d-background-transparent.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: min(1580px, 110vw) auto;
  background-position: center 88%;
  opacity: 0.96;
  mix-blend-mode: screen;
  filter: drop-shadow(0 28px 56px rgba(0, 217, 255, 0.14)) drop-shadow(0 20px 44px rgba(103, 42, 255, 0.12));
}

.agk-hero .hero-wrapper-one::after {
  background:
    radial-gradient(circle at 14% 14%, rgba(186, 205, 59, 0.18) 0%, rgba(186, 205, 59, 0.08) 16%, rgba(186, 205, 59, 0) 34%),
    radial-gradient(circle at 86% 10%, rgba(130, 46, 255, 0.22) 0%, rgba(130, 46, 255, 0.10) 18%, rgba(130, 46, 255, 0) 36%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 28%, rgba(0, 0, 0, 0.14) 52%, rgba(0, 0, 0, 0.50) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.14) 42%, rgba(0, 0, 0, 0.84) 100%);
}

@media (max-width: 1199.98px) {
  .agk-hero .hero-wrapper-one::before {
    background-image: url("../images/creative-agency/hero/header-3d-background-transparent.png");
    background-image: image-set(
      url("../images/creative-agency/hero/header-3d-background-transparent-1400.webp") type("image/webp"),
      url("../images/creative-agency/hero/header-3d-background-transparent.png") type("image/png")
    );
    background-size: min(1400px, 118vw) auto;
    background-position: center 90%;
    opacity: 0.92;
  }
}

@media (max-width: 991.98px) {
  .agk-hero .hero-wrapper-one::before {
    background-size: min(1220px, 146vw) auto;
    background-position: center 94%;
    opacity: 0.88;
  }
}

@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one::before {
    background-image: url("../images/creative-agency/hero/header-3d-background-transparent.png");
    background-image: image-set(
      url("../images/creative-agency/hero/header-3d-background-transparent-900.webp") type("image/webp"),
      url("../images/creative-agency/hero/header-3d-background-transparent.png") type("image/png")
    );
    background-size: auto 54%;
    background-position: center 96%;
    opacity: 0.82;
    filter: drop-shadow(0 16px 30px rgba(0, 217, 255, 0.12));
  }
}


/* =========================================================
   Header cleanup v104
   - Remove green/purple gradient overlays
   - Keep only a clean dark background with merged 3D artwork
========================================================= */
.agk-hero .hero-wrapper-one {
  background: #020204 !important;
}

.agk-hero .hero-wrapper-one::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.32) 30%, rgba(0, 0, 0, 0.10) 54%, rgba(0, 0, 0, 0.40) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.10) 42%, rgba(0, 0, 0, 0.82) 100%) !important;
}

@media (max-width: 991.98px) {
  .agk-hero .hero-wrapper-one::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0.84) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.22)) !important;
  }
}

@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.54) 42%, rgba(0, 0, 0, 0.86) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.34)) !important;
  }
}


/* =========================================================
   Mobile-only gradient + scroll cleanup v105
   - Keep desktop/tablet dark and clean
   - Re-enable gradient only on phones
   - Eliminate mobile horizontal scrolling / overflow issues
========================================================= */

@media (max-width: 767.98px) {
  html,
  body,
  #smooth-wrapper,
  #smooth-content,
  main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
    overscroll-behavior-x: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .header-area,
  .header-navigation,
  .offcanvas__overlay,
  .agk-hero,
  .agk-hero .hero-wrapper-one,
  section,
  .container,
  .container-fluid {
    max-width: 100vw !important;
  }

  .agk-hero,
  .agk-hero .hero-wrapper-one,
  .agk-video,
  .agk-video .container,
  .agk-video .agk-play-image-box {
    overflow-x: clip !important;
  }

  .header-navigation .pf-nav-menu {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hero-wrapper-one .hero-content,
  .hero-wrapper-one .hero-content .text-box,
  .hero-wrapper-one .hero-content .hero-button,
  .agk-video .agk-play-image-box,
  .agk-video .agk-play-image-box .agk-image {
    max-width: 100% !important;
  }

  .agk-hero .hero-wrapper-one {
    background:
      radial-gradient(circle at 14% 16%, rgba(194, 206, 49, 0.22) 0%, rgba(194, 206, 49, 0.12) 18%, rgba(194, 206, 49, 0) 38%),
      radial-gradient(circle at 86% 12%, rgba(115, 34, 255, 0.28) 0%, rgba(115, 34, 255, 0.14) 20%, rgba(115, 34, 255, 0) 40%),
      linear-gradient(180deg, #030306 0%, #06060c 54%, #030306 100%) !important;
  }

  .agk-hero .hero-wrapper-one::before {
    background-size: auto 54% !important;
    background-position: center 96% !important;
    opacity: 0.84 !important;
  }

  .agk-hero .hero-wrapper-one::after {
    background:
      radial-gradient(circle at 16% 14%, rgba(194, 206, 49, 0.15) 0%, rgba(194, 206, 49, 0.08) 14%, rgba(194, 206, 49, 0) 30%),
      radial-gradient(circle at 86% 10%, rgba(115, 34, 255, 0.18) 0%, rgba(115, 34, 255, 0.08) 16%, rgba(115, 34, 255, 0) 30%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.50) 42%, rgba(0, 0, 0, 0.86) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.32)) !important;
  }
}


/* =========================================================
   Loader glow refinement v106
   - Add a clean glowing revolving circle around the loader logo
========================================================= */
.preloader .loading-container::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(94, 240, 255, 0.20) 0%, rgba(119, 72, 255, 0.18) 46%, rgba(0, 0, 0, 0) 72%);
  filter: blur(10px);
  opacity: 0.95;
  animation: clLoaderGlowPulse 2.2s ease-in-out infinite;
}

.preloader .loading-container .loading {
  border-width: 3px !important;
  border-style: solid !important;
  border-color: rgba(94, 240, 255, 0.14) rgba(94, 240, 255, 0.96) rgba(119, 72, 255, 0.14) rgba(119, 72, 255, 0.92) !important;
  box-shadow: 0 0 14px rgba(94, 240, 255, 0.30), 0 0 28px rgba(119, 72, 255, 0.22), inset 0 0 14px rgba(94, 240, 255, 0.12) !important;
  filter: drop-shadow(0 0 10px rgba(94, 240, 255, 0.32)) drop-shadow(0 0 16px rgba(119, 72, 255, 0.20));
}

.preloader #loading-icon,
.preloader #loading-icon.cl-loader-logo {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.16));
}

@keyframes clLoaderGlowPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.78;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  .preloader .loading-container::before {
    inset: 9px;
    filter: blur(8px);
  }

  .preloader .loading-container .loading {
    border-width: 2.5px !important;
    box-shadow: 0 0 12px rgba(94, 240, 255, 0.26), 0 0 20px rgba(119, 72, 255, 0.18), inset 0 0 12px rgba(94, 240, 255, 0.10) !important;
  }
}

/* =========================================================
   Native mobile scroll stabilizer v107
   - Desktop keeps the smooth GSAP scroll
   - Mobile/tablet uses native browser scroll to remove jumps/stuck scrolling
========================================================= */
@media (max-width: 991.98px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.mobile-menu-open) {
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  #smooth-wrapper,
  #smooth-content {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
    inset: auto !important;
  }

  #smooth-content {
    translate: none !important;
  }

  .pin-spacer {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .pf_fadeup,
  .pf_zoomIn,
  .text-anm,
  .text-anm *,
  .hero-wrapper-one .hero-content,
  .hero-wrapper-one .hero-content * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .header-area,
  .transparent-header {
    transform: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one {
    min-height: 650px !important;
    height: auto !important;
  }

  .agk-video {
    margin-top: 0 !important;
  }

  .agk-video .agk-play-image-box,
  .agk-video .agk-play-image-box .agk-image,
  .agk-video .agk-play-image-box .agk-image img {
    max-width: 100% !important;
  }
}


/* =========================================================
   Mobile hero button fix v107
   - Remove duplicate/ghost Learn More text on phones
   - Keep the button text stable instead of running hover text-flip animation
========================================================= */
@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one .hero-content .hero-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: max-content !important;
    overflow: visible !important;
  }

  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one {
    width: auto !important;
    min-width: 126px !important;
    max-width: max-content !important;
    min-height: 50px !important;
    padding: 13px 26px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one .text-flip {
    display: inline-block !important;
    position: relative !important;
    transform: none !important;
    transition: none !important;
    line-height: 1 !important;
    height: auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one .text-flip .text {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one .text-flip .text:nth-child(2) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:hover .text-flip,
  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:hover .text-flip .text:nth-child(1),
  .agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:hover .text-flip .text:nth-child(2) {
    transform: none !important;
  }
}


/* =========================================================
   Hero CTA stable button fix v108
   - Removes Learn More duplicate/ghost text on Android, tablets, and 1024px laptop previews
   - Disables the template's hover text-flip animation only for the hero CTA
========================================================= */
.agk-hero .hero-wrapper-one .hero-content .hero-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  overflow: visible !important;
}

.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one,
.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one.cl-hero-cta {
  width: auto !important;
  min-width: 132px !important;
  max-width: max-content !important;
  min-height: 52px !important;
  padding: 14px 28px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one .text-flip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  line-height: 1 !important;
  height: auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one .text-flip .text {
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  -webkit-transition: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one .text-flip .text:nth-child(n+2) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:hover .text-flip,
.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:focus .text-flip,
.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:active .text-flip,
.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:hover .text-flip .text,
.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:focus .text-flip .text,
.agk-hero .hero-wrapper-one .hero-content .hero-button .theme-btn.style-one:active .text-flip .text {
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
}

/* =========================================================
   Performance optimization v109
   - Fast LCP: AVIF/WebP hero image-set
   - Less expensive hero painting on mobile/Android
   - Keeps below-the-fold sections out of initial rendering
   - Auto-hides preloader quickly instead of waiting for all assets
========================================================= */
.preloader {
  animation: clFastPreloaderHide 0.16s ease 0.45s forwards !important;
}
@keyframes clFastPreloaderHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.agk-hero .hero-wrapper-one {
  min-height: max(720px, 100svh) !important;
  contain: layout paint style !important;
}

.agk-hero .hero-wrapper-one::before {
  background-image: image-set(
    url("../images/creative-agency/hero/header-3d-background-transparent.avif") type("image/avif"),
    url("../images/creative-agency/hero/header-3d-background-transparent.webp") type("image/webp"),
    url("../images/creative-agency/hero/header-3d-background-transparent.png") type("image/png")
  ) !important;
  will-change: auto !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 1199.98px) {
  .agk-hero .hero-wrapper-one::before {
    background-image: image-set(
      url("../images/creative-agency/hero/header-3d-background-transparent-1400.avif") type("image/avif"),
      url("../images/creative-agency/hero/header-3d-background-transparent-1400.webp") type("image/webp"),
      url("../images/creative-agency/hero/header-3d-background-transparent.png") type("image/png")
    ) !important;
  }
}

@media (max-width: 767.98px) {
  .agk-hero .hero-wrapper-one {
    min-height: max(720px, 100svh) !important;
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }
  .agk-hero .hero-wrapper-one::before {
    background-image: image-set(
      url("../images/creative-agency/hero/header-3d-background-transparent-900.avif") type("image/avif"),
      url("../images/creative-agency/hero/header-3d-background-transparent-900.webp") type("image/webp"),
      url("../images/creative-agency/hero/header-3d-background-transparent.png") type("image/png")
    ) !important;
    background-size: auto 52% !important;
    background-position: center 96% !important;
    opacity: 0.86 !important;
  }
  .agk-video,
  .agk-service-ca,
  .agk-project,
  .agk-process,
  .agk-company-ca,
  .agk-team,
  .agk-award-ca,
  .agk-testimonial-ca,
  .agk-blog {
    content-visibility: auto !important;
    contain-intrinsic-size: 900px !important;
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 991.98px) {
  .rotate360,
  .pf_fadeup,
  .pf_zoomIn,
  .text-anm,
  .text-anm * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}