@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

    :root {
      --primary-blue: #204042;
      --tertiary-orange: #F19937;
      --white: #fff;
      --color-grey: #AFAEAE;
      --color-secondary: #FBFBFB;
      --color-lightwhite: #FEFEFE;
      --color-creamwhite:#F6F6F6;
     --bg-light: #f0f5f4;


   *, body,
    html {
      font-family: "Lexend", sans-serif;
      font-weight: 310;
      font-style: normal;
      font-size: 16px;
    }
    body{
         background:var(--color-secondary);
    }
    .fs-18{
        font-size: 18px;
    }
    .fw-410{
        font-weight: 410;
    }
    .fw-510{
        font-weight: 510;
    }
     .fw-610{
        font-weight: 610;
    }
    header{
        position:sticky;
        top:0;
        z-index:999;
    }
    .py-60{
        padding:60px 0;
    }
.text-center{
    text-align:center;
}
    .header-part,
    .lp-header{
      background-color: var(--color-lightwhite);
      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
      padding: 6px 0;
    }

    .homebanner .title,
    .brandingBanner .title,
    .bannerTitle{
      font-size: 56px;
      font-weight: 510;
      color: var(--primary-blue);
    }
    .bannerTitle span{
         font-size: 56px;
      font-weight: 510;
       /*color:var(--tertiary-orange)*/
    }

    .homebanner .para,
    .workbanner .para,
    .brandingBanner .para{
      font-size: 18px;
      font-weight: 410;
      color: var(--primary-blue);
    }
    .workbanner .title {
      font-size: 56px;
      font-weight: 510;
      color: var(--primary-blue);
    }
   .brandingBanner .about_brand{
        font-size: 18px;
        font-weight: 410;
        color: var(--tertiary-orange);
    }
    .heading2{
        font-size: 40px;
        font-weight: 510;
        color:var(--color-secondary);
    }
    .heading3{
         font-size: 40px;
        font-weight: 510;
        color:var(--primary-blue);
    }
    .heading2 span,
    .heading3 span{
         color: var(--tertiary-orange);
         font-size: 40px;
        font-weight: 510;
    }
    .btn_primary .wp-element-button,
    .wp-load-more__button{
      border-radius: 32px;
      background: var(--tertiary-orange);
      color: var(--color-secondary);
      padding: 12px 24px !important;
      font-size: 16px;
      min-width: 140px;
      font-weight:410;
    }
    .wp-load-more__button span{ 
         font-weight:410;
    }
   .wp-load-more__button .wp-block-query-pagination__arrow{
        display:none;
    }

    .headernavbar-links .main-menu-navbar li a {
      color: var(--primary-blue) !important;
      font-weight: 410;
      font-size: 18px;
    }

    .aboutus-section .title {
      font-size: 40px;
      line-height: 44px;
      color: var(--primary-blue);
      font-weight: 510;
    }
    .text_italic{
            font-style: italic;
    }
.text_grey{
    color:#DFE2E3;
}
    .aboutus-section {
      border-top: 0.5px solid var(--color-grey);
    }
.text-center{
    text-align:center;
}
    .default-para {
      color: var(--primary-blue);
      font-weight: 410;
      font-size: 18px;
    }

    .homebanner .bgvideo {
      position: absolute;
      right: 0;
      top: 0;
    }
.aboutus-section .title span {
    font-size: 40px;
    font-weight: 510;
    color: var(--tertiary-orange);
}
    .arrowicon {
      display: flex;
      gap: 8px;
    }

        .imagecard-hover:hover .brand-overlay,
    .imagecard-hover:hover .brand-overlayfullwidth {
      transform: translateX(0);
    }

    .imagecard-hover {
      position: relative;
      overflow: hidden;
      height:100%;
    }

    .brand-overlay {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 100%;
      background: rgba(32, 64, 66, 0.90);
      display: flex;
      align-items: center;
      transform: translateX(-100%);
      transition: transform 0.4s ease-in-out;
      -webkit-transition: transform 0.4s ease-in-out;
      -moz-transition: transform 0.4s ease-in-out;
      -o-transition: transform 0.4s ease-in-out;
      margin-top: 0;
      padding: 0 60px;
      align-items:center;
     
    }
    .ourwork-column{
         background: var(--primary-blue);
         padding: 64px 49px 63px 48px;
         transition: all 0.4s ease-in-out;
         -webkit-transition: all 0.4s ease-in-out;
         opacity: 0;
         backface-visibility: hidden;
    }

    .brand-overlay-content .title,
    .ourwork-column .title{
      color: var(--color-lightwhite);
      font-size: 40px;
      font-weight:410;
    }

    .brand-overlay-content .para{
      font-size: 22px;
      color: var(--tertiary-orange) !important;
      margin-top: 40px;
      font-weight:510;
        display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }
    
    
    
    
    /* Dynamic case study styles */
    .brand-overlay-content .para a{
      font-size: 18px;
      color: var(--tertiary-orange);
      margin-top: 12px;
      font-weight:510;
      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }
    /*.blog-published-query-loop ul.wp-block-post-template.is-layout-flow.wp-container-core-post-template-is-layout-fc3cf4cf.wp-block-post-template-is-layout-flow {*/
    /*gap: 24px;*/
    /*    align-items: start;*/
    /*    margin: 0;*/
    /*    display: -ms-flexbox;*/
    /*    display: flex;*/
    /*    -ms-flex-wrap: wrap;*/
    /*    flex-wrap: wrap;*/
    /*}*/
    /*.blog-published-query-loop ul.wp-block-post-template.is-layout-flow.wp-container-core-post-template-is-layout-fc3cf4cf.wp-block-post-template-is-layout-flow li.wp-block-post.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-blogs {*/
    /*    -ms-flex: 0 0 23.4%;*/
    /*    flex: 0 0 23.4%;*/
    /*    max-width: 23.4%;*/
    /*    margin:0px;*/
    /*}*/
    /*.blog-published-query-loop ul.wp-block-post-template.is-layout-flow.wp-container-core-post-template-is-layout-fc3cf4cf.wp-block-post-template-is-layout-flow h2 {*/
    /*    display: -webkit-box;*/
    /*    -webkit-line-clamp: 2;*/
    /*    -webkit-box-orient: vertical;*/
    /*    overflow: hidden;*/
    /*}*/
    /*.blog-published-query-loop ul.wp-block-post-template.is-layout-flow.wp-container-core-post-template-is-layout-fc3cf4cf.wp-block-post-template-is-layout-flow li.wp-block-post.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-blogs {*/
    /*        -ms-flex: 0 0 100%;*/
    /*        flex: 0 0 100%;*/
    /*        max-width: 100%;*/
    /*}*/
    /*.published-query-loop-wapper ul.wp-block-post-template.is-layout-flow.wp-block-post-template-is-layout-flow li.wp-block-post.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-news {*/
        /*width: 33.33%;*/
    /*    display: block;*/
    /*    margin: 0;*/
    /*    padding-bottom: 15px;*/
    /*}*/
    /*.published-query-loop-wapper ul.wp-block-post-template.is-layout-flow.wp-block-post-template-is-layout-flow {*/
    /*       display: grid ;*/
    /*    grid-template-columns: repeat(auto-fit, minmax(31.33%, 1fr));*/
    /*    gap: 24px;*/
    /*}*/
    /*.published-query-loop-wapper ul.wp-block-post-template.is-layout-flow.wp-block-post-template-is-layout-flow {*/
    /*       grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));*/
    /*}*/
    
    
    
    
    
    .ourwork-column .para{
      font-size: 18px;
      color: var(--tertiary-orange);
      margin-top: 40px;
      font-weight:510;
    }
    .g-0{
        gap: 0px;
    }

    .g-20 {
      column-gap: 20px;
      row-gap: 20px;
    }

    .brand-overlayfullwidth {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 100%;
      background: rgba(32, 64, 66, 0.90);
      display: flex;
      align-items: center;
      transform: translateX(-100%);
      transition: transform 0.4s ease-in-out;
      margin-top: 0;
      padding: 0 60px;
      -webkit-transition: transform 0.4s ease-in-out;
      -moz-transition: transform 0.4s ease-in-out;
      -o-transition: transform 0.4s ease-in-out;
      /*pointer-events:none;*/
    }

    .brand-overlay-content {
      margin-left: 0px !important;
      max-width:540px;
    }

    .brand-overlay-content a{
      color: var(--color-secondary);
      font-size: 18px;
    }

    .btnhover-primary,
    .btnhover-secondary{
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      background: transparent;
      padding: 0;
      outline: none;
      border: 0;
      width: max-content;
    }

    .circle,
    .circle-white{
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      right: 0;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 1.625rem;
      z-index: 0;
    }
    .circle{
      background:var(--tertiary-orange);
    }
    .circle-white{
        background:var(--color-secondary);
    }

    .icon.arrow,
    .icon.arrow-orange{
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      top: 50%;
      right: 0.75rem;
      transform: translateY(-50%);
      width: 1.125rem;
      height: 0.125rem;
      background: none;
      z-index: 1;
    }

    .icon.arrow:before,
    .icon.arrow-orange:before{
      position: absolute;
      content: "";
      top: -9px;
      right: 0px;
      width: 20px;
      height: 20px;
    }
    .icon.arrow::before{
        background: url(https://dev.narrative.asia/wp-content/uploads/2026/02/arrowleft.svg);
    }
    .icon.arrow-orange:before{
        background:url(https://dev.narrative.asia/wp-content/uploads/2026/02/arrow-orange.svg);
    }

    .primaryButton,
    .secondaryButton{
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: relative;
      z-index: 1;
      padding: 12px 56px 12px 0px;
      font-weight: 410;
      line-height: 1.6;
      white-space: nowrap;
      font-size: 16px;
    }
    .primaryButton{
         color: var(--tertiary-orange);
    }
    .secondaryButton{
        color:var(--color-secondary);
    }

    /* Hover */
    .btnhover-primary:hover .circle,
    .btnhover-secondary:hover .circle-white{
      width: 100%;
    }

    .btnhover-primary:hover .icon.arrow,
    .btnhover-secondary:hover .icon.arrow{
      transform: translateY(-50%) translateX(-0.75rem);
    }

    .btnhover-primary:hover .primaryButton {
      color: #fff;
      padding: 12px 56px 12px 16px;
    }
    .btnhover-secondary:hover .secondaryButton{
        color: var(--tertiary-orange);
        padding: 12px 56px 12px 16px;
    }

    .scrollspy-tabs {
      /*border-bottom: 1px solid var(--color-grey);*/
      padding: 16px 0px;
      position: sticky;
      top: 0%;
      background: white;
      z-index: 5;
    }

    .scrollspy-tabs .wp-block-heading a.active {
      color: var(--primary-blue) !important;
      border-bottom: 1px solid var(--primary-blue);
      padding-bottom: 16px;
    }

    .servicesTab .communicationTab h2 {
      font-size: 22px;
      color: var(--primary-blue);
      font-weight: 510;
    }

    .servicesTab h2 a {
      font-size: 28px;
      color: var(--color-grey) !important;
      font-weight: 410;
      text-decoration: none;
      outline: none;
    }
    .servicesTab h2 a:hover{
         color: var(--primary-blue) !important;
    }

    .position-relative {
      position: relative;
    }

    #creativeCommunication,
    #webDevelopment {
      margin-top: 60px;
      border-bottom: 1px solid var(--color-grey);
     padding-bottom: 36px;
    }
     #brandFilms {
      margin-top: 60px;
     padding-bottom: 36px;
    }

    #creativeCommunication h2,
    #webDevelopment h2,
    #brandFilms h2 {
      font-size: 22px;
      font-weight: 510;
    }

    .video-row {
      position: relative;
      width: 100%;
      max-width: 1100px;
      height: 460px;
      margin: 80px auto;
      overflow: hidden;
    }

    /* Common figure */
    .video-row figure {
      position: absolute;
      top: 0;
      width: 80%;
      height: 100%;
      margin: 0;
      transition: all 0.6s ease-in-out;
    }

    .video-row video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
 /*.video-post-1  video{*/
 /*    height:410px;*/
 /*}*/
    /* Position Classes */
    .video-post-1 {
      left: 0%;
      z-index: 3;
    }

    .video-post-2 {
      left: 10%;
      z-index: 2;
    }

    .video-post-3 {
      left: 20%;
      z-index: 1;
    }
    .headernavbar-links li.mega-menu-item a{
        font-weight:410;
    }
    .logo-gridColumns{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    }
   .logo-gridColumns .wp-block-group{
       margin-top:0;
   }
   .headernavbar-links ul .mega-menu-item a{
       font-weight: 410 !important;
   }
   .cardBadge,
   .cardBadge-opacity-accent{
       font-size: 16px;
 font-weight:410;
 border-radius:24px;
 padding:2px 16px;
 width:fit-content;
 margin-left:0 !important;
 gap:8px;
 height:32px;
   }
    .cardBadge{
        color: var(--tertiary-orange);
         border:1px solid var(--tertiary-orange);
   }
 .cardBadge-opacity-accent{
       color:rgba(241, 153, 55, 0.80);
       border:1px solid rgba(241, 153, 55, 0.80);
   }
   .cardBadge figure,
   .cardBadge-opacity-accent figure{
       display:flex;
   }
   .cardBadge-white,
   .cardBadgewhite-opacity{
       font-size: 16px;
 font-weight:410;
 border-radius:24px;
 padding:2px 16px;
 width:fit-content;
 margin-left:0 !important;
   }
    .cardBadge-white{
        color: var(--color-secondary);
         border:1px solid var(--color-creamwhite);
    }
    .cardBadgewhite-opacity{
        color:var(--color-grey);
         border:1px solid var(--color-grey);
    }
    
    
   .place-center{
        place-content: center;
   }
   
   .industryCardhover{
     background: var(--color-secondary);
    border: 1px solid rgba(175, 174, 174, 0.50);
    padding: 84px 16px 50px 16px;
    text-align: center;
    width:100%;
    min-height: 287px;
    max-height: 100%;
        transition: all 0.4s ease-in-out;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      cursor:pointer;
   }
   .industryCardhover h2{
      font-size:22px; 
      font-weight:410;
       color: var(--primary-blue);
   }
   .industryCardhover:hover,
   .industryCardhover.active{
    background: var(--primary-blue);
    border: 1px solid #75888A;
    padding: 66px 16px 60px 16px;
}

.industryCardhover:hover h2,
.industryCardhover.active h2{
    color: var(--color-secondary);
}

.industryCardhover:hover figure,
.industryCardhover.active figure{
    filter: brightness(0) invert(1) contrast(0.98);
}
.industryCardhover:hover figure img,
.industryCardhover.active figure img{
    width: 90px;
    height: 90px;
}
.industryRow{
        height: calc(50% - 8px);
}
.logo-wrapper .title{
    font-size: 40px;
    font-weight: 510;
}
.logo-wrapper .para{
    font-size: 18px;
    font-weight: 410;
}
.industryCardshow{
    height: 100%;
    text-align: center;
    border: 1px solid rgba(175, 174, 174, 0.50);
    background: var(--primary-blue);
        padding: 60px 16px 16px 20px;
    flex-direction: column;
    justify-content: space-between;
    display:none;
opacity:0;
transition:all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;
}
.blogCard{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.blogCard .date{
    color: #605F5F;
    font-size: 14px;
}
.blogCard .title{
   font-weight:410;
}
.blogCard .para{
    font-weight:310;
}
.getin-touch .title{
    font-size: 40px;
    font-weight:510;
}
.industryCardshow h2{
    font-size:22px;
    font-weight:510;
}

.industryCardshow.active{
display:flex;
opacity:1;
justify-content: space-between;
flex-direction: column;
}
.industryCardshow figure img{
    width: 160px;
    height: 90px;
    object-fit: contain;
    padding:14px;
}
.footersection .wp-block-navigation .wp-block-navigation-item{
    color:var(--color-lightwhite);
}
/*.onscroll-horizontal:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 1px;*/
/*    background: #AFAEAE;*/
/*    left: 0;*/
/*    top: 52%;*/
/*}*/

.pin-spacer{
    margin-left:0 !important;
}
 .processwrap {
      overflow: hidden
    }

    .h-track {
      display: flex;
      width: max-content;
      will-change: transform;
      max-width:87vw;
    }
.h-track:after {
    position: absolute;
    content: '';
    background: var(--color-grey);
    width: 153vw;
    height: 0.5px;
    left: -10%;
    top: 42%;
    z-index:-2;
}
    .processCard {
      width: 26vw;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      padding: 0 3rem 0 0;
      position: relative;
      overflow: hidden;
    }
    .processCard .para {
    font-weight: 410;
}
    .worksTab .wp-block-ub-tabbed-content-tabs-content{
        padding:0;
    }
    .tabsWrapper{
            outline: 0px;
    }
    .tabs_Row{
        display:flex;
        gap:40px;
        transition:all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;
  backface-visibility: hidden;
  cursor:pointer;
    }
    .tabs_Row .brandImage{
        height:100%;
        object-fit: cover;
         backface-visibility: hidden;
    }
    .tabs_Row .brandImage img{
        height:100%;
        object-fit:cover;
        max-width: 810px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    backface-visibility: hidden;
    }
    .tabs_Row:hover .ourwork-column {
    opacity:1;
     backface-visibility: hidden;
    }
    .tabs_Row:hover .brandImage img {
    width: 100%;
    backface-visibility: hidden;
}
.tabs_Row.rowReverse .brandImage img{
    margin-left:-26%;
}
.tabs_Row.rowReverse:hover .brandImage img{
    margin-left:unset;
}
.tabsRow .wp-block-ub-tabbed-content-tab-title-wrap {
    padding: 8px 48px;
    background: transparent;
    margin-right: 0px;
    color:var(--color-grey);
    outline:0;
}
.tabsRow .wp-block-ub-tabbed-content-tab-title-wrap.active{
    background: transparent;
    outline:0;
    border-bottom: 1px solid var(--primary-blue);
}
.tabsRow .wp-block-ub-tabbed-content-tab-title-wrap .wp-block-ub-tabbed-content-tab-title {
    font-weight: 410;
}
p.badgebutton {
    border: 1px solid var(--primary-blue);
    display: inline-block;
    width: fit-content;
    padding: 4px 20px;
    border-radius: 25px;
    font-size: 16px;
}
.badgebutton.active {
    background: var(--primary-blue);
    color: var(--white);
}
p.verticalLine {
    position: relative;
    background: var(--color-grey);
       width: 0.5px;
    height: 90px;
    left: 6%;
    top: 5%;
}
.verticalLine:before {
    position: absolute;
    content: '';
    border: 1px solid var(--color-grey);
    width: 11px;
    height: 11px;
    border-radius: 25px;
    left: -5px;
    top: -6px;
    z-index: 3;
    background: var(--color-lightwhite);
}
.verticalLine.active:before {
    background: var(--tertiary-orange);
    border: 0;
}
.processIcon img{
    margin-left:15px;
     transition: transform 0.4s ease-in-out;
      -webkit-transition: transform 0.4s ease-in-out;
      -moz-transition: transform 0.4s ease-in-out;
      -o-transition: transform 0.4s ease-in-out;
}
.processIcon.active img{
    transform: scale(1.5);
}
.footerTitle{
    font-weight:410;
}
.footersection,
main{
    margin-top:0;
}
.workDetailbanner{
    background-color:var(--primary-blue);
    text-align:center;
}
.workDetailbanner .yoast-breadcrumbs{
    color:var(--color-secondary);
    font-size: 14px;
    text-align:center;
}
.workDetailbanner h1{
    font-size:56px;
     color:var(--color-secondary);
     text-align:center;
     font-weight: 510;
}
.workDetailbanner .about_brand{
    font-weight:510;
     color:var(--color-secondary);
     font-size:22px;
}
.workDetailbanner .moreInfo{
    font-weight:410;
    color:var(--color-grey);
    max-width:1024px;
    margin:20px auto 40px auto;
}
.workDetailbanner .banner-wrapper{
    max-width:1040px;
    margin:0 auto;
}

.problemstatement-wrapper h2{
    font-size:40px;
    font-weight:510;
}
.left-column h2,
.talkto-us h2{
    font-size: 40px;
    font-weight: 510;
}
.rightColumn .heading {
    font-size: 28px;
    font-weight: 410;
    color: var(--tertiary-orange);
}
.listTitle {
    font-size: 18px;
    font-weight: 410;
}
.mission-wrapper,
.talkto-us{
    background-color:var(--primary-blue);
}
.contentbox{
    color: var(--white);
    position: absolute;
    max-width: 440px;
    text-align: center;
    top: 22%;
    left: 33%;
}
.d-none{
    display:none;
}
.logo-overimg{
    position:absolute;
    right:0;
    top:-1%;
}
.video-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999;
}

/* Modal */
.video-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
}

/* Responsive iframe */
.video-modal iframe {
    width: 100%;
    height: 450px;
    display: block;
    border-radius: 8px;
    padding:0;
    margin:0;
}

/* Close button */
.close-video {
    position: absolute;
    top: -12px;
    right: -12px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}
.blogCard:hover figure img{
    transform: scale(1.2);
}
.blogCard figure img{
 -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}
.blogCard figure {
width:100%;
overflow:hidden;
}
.tabsBadge {
    background: var(--primary-blue);
    color: var(--color-secondary);
    display: inline-block;
     padding: 4px 16px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 310;
    min-width:176px;
}
.list-points {
    position: absolute;
    left: 51%;
    translate: -55% -35%;
    top: 47%;
    text-align: left;
}
.listTabs li{
    font-size:14px;
}
.dots:before {
    content: '';
    background: var( --tertiary-orange);
    width: 8px;
    height: 8px;
    position: absolute;
    top: -1%;
    border-radius: 50px;
    left: 50%;
}


.circle-rightcol .rightdot:before {
    content: '';
    background: var(--color-grey);
    position: absolute;
    left: 22%;
    width: 8px;
    height: 8px;
    bottom: 42%;
    border-radius: 50px;
}
.circle-rightcol .leftdot:before {
    content: '';
    background: var(--color-grey);
    position: absolute;
    right: 22%;
    width: 8px;
    height: 8px;
    bottom: 41%;
    border-radius: 50px;
}
   .accordionContent {
            display: none;
        }

     .accordion-branddiscoverwrapper h2,
        .accordion-strategywrapper h2,
        .accordion-voicemessagewrapper h2,
        .accordion-visualdesignwrapper h2 {
            color:var(--color-grey);
            transition: all 0.2s ease-in-out;
            font-size:22px;
            font-weight:410;
        }
     
     .accordion-branddiscoverwrapper.active h2,
        .accordion-strategywrapper.active h2,
        .accordion-voicemessagewrapper.active h2,
        .accordion-visualdesignwrapper.active h2 {
            font-size: 28px;
           font-weight: 510;
           color: var(--primary-blue);
        }
   
        .accordion-branddiscoverwrapper.active .accordionContent,
        .accordion-strategywrapper.active .accordionContent,
        .accordion-voicemessagewrapper.active .accordionContent,
        .accordion-visualdesignwrapper.active .accordionContent {
            display: block;
        }
        
         .accordion-branddiscoverwrapper.active,
        .accordion-strategywrapper.active,
        .accordion-voicemessagewrapper.active,
        .accordion-visualdesignwrapper.active {
            height: 305px;
        }
        
        .accordion-branddiscoverwrapper
        .accordion-strategywrapper,
        .accordion-voicemessagewrapper,
        .accordion-visualdesignwrapper{
    transition: all .4s ease-in-out;
    min-height: 63px;
}
        /* ── Right col: always relative ── */
        .circle-rightcol {
            position: relative;
        }

/* ── Base: all icons transition smoothly ── */
.branddiscoveryImg,
.strategypositioningImg,
.voiceMessagingImg,
.visualDesignImg {
    margin-top: 0;
    position: absolute;
    transition: all 0.4s ease-in-out;
}

/* ══════════════════════════════
   DISCOVERY ACTIVE
   BD=12, SP=3, VM=6, VD=9
══════════════════════════════ */
.circle-rightcol.discovery-active .branddiscoveryImg {
    top: -19%;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* restore full size for active */
    filter: none;
}
.circle-rightcol.discovery-active .strategypositioningImg {
    right: 14%;
    left: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.discovery-active .voiceMessagingImg {
    left: 51%;
    top: 102%;
    transform: translateX(-50%);
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.discovery-active .visualDesignImg {
    left: 14%;
    right: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}

/* ══════════════════════════════
   STRATEGY ACTIVE
   SP=12, VM=3, BD=6, VD=9
══════════════════════════════ */
.circle-rightcol.strategy-active .strategypositioningImg {
    top: -19%;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: auto;
    filter: none;
}
.circle-rightcol.strategy-active .voiceMessagingImg {
    right: 14%;
    left: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.strategy-active .branddiscoveryImg {
    left: 51%;
    top: 102%;
    transform: translateX(-50%);
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.strategy-active .visualDesignImg {
    left: 14%;
    right: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}

/* ══════════════════════════════
   VOICE ACTIVE
   VM=12, VD=3, SP=6, BD=9
══════════════════════════════ */
.circle-rightcol.voice-active .voiceMessagingImg {
    top: -19%;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: auto;
    filter: none;
}
.circle-rightcol.voice-active .visualDesignImg {
    right: 14%;
    left: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.voice-active .strategypositioningImg {
    left: 51%;
    top: 102%;
    transform: translateX(-50%);
    right: auto;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.voice-active .branddiscoveryImg {
    left: 14%;
    right: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}

/* ══════════════════════════════
   VISUAL ACTIVE
   VD=12, BD=3, VM=6, SP=9
══════════════════════════════ */
.circle-rightcol.visual-active .visualDesignImg {
    top: -19%;
    left: 49%;
    transform: translateX(-50%);
    right: auto;
    width: auto;
    filter: none;
}
.circle-rightcol.visual-active .branddiscoveryImg {
    right: 14%;
    left: auto;
    top: 50%;
    transform: none;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.visual-active .voiceMessagingImg {
    left: 51%;
    top: 102%;
    transform: translateX(-50%);
    right: auto;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}
.circle-rightcol.visual-active .strategypositioningImg {
    left: 14%;
    right: auto;
    top: 50%;
    transform: translateX(0);
    width: 24px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(3%) saturate(92%) hue-rotate(314deg) brightness(96%) contrast(89%);
}

        /* ── Hide utility ── */
        .hide {
            display: none !important;
        }

        /* ── Badge visibility ── */
        .tabsBadge {
            display: none;
        }

        .circle-rightcol.discovery-active .tabsBadge.brandDiscovery,
        .circle-rightcol.strategy-active .tabsBadge.strategypositioning,
        .circle-rightcol.voice-active .tabsBadge.voiceMessaging,
        .circle-rightcol.visual-active .tabsBadge.visualDesign {
            display: inline-block;
            margin:0;
        }
        .accordion-strategywrapper {
    padding: 20px 0;
    border-top: 1px solid var(--color-grey);
   }
        .accordion-voicemessagewrapper{
            padding:20px 0;
            border-top:1px solid var(--color-grey);
            border-bottom:1px solid var(--color-grey);
        }
.brandsSection .heading {
    font-size: 28px;
    font-weight: 510;
}
.brandsSection p{
    letter-spacing:0.03px;
}
.brandsSection .creativeCommunication,
.brandsSection .websiteDevelopment,
.brandsSection .brandfilms{
    position: sticky;
    top: 100px;
    background: var(--color-secondary);
}
.brandsSection .creativeCommunication{
    z-index:9;
}
.brandsSection .websiteDevelopment{
    z-index:10;
}
.brandsSection .brandfilms{
    z-index:11;
}
.worktabsRow {
    border-bottom: 1px solid var(--color-grey);
    justify-content:center;
}

.worktabsRow .tabsWrapper {
    padding: 4px 44px;
}

.worktabsRow .tabsWrapper p {
    white-space: nowrap;
    color: var(--color-grey);
}


.worktabsRow .tabsWrapper.active-tab p {
    color:var(--tertiary-orange);
}

.worktabsRow .tabsWrapper.active-tab a {
    color:var(--tertiary-orange);
}
.worktabsRow .tabsWrapper a{
    text-decoration:none;
    font-size: 16px;
    font-weight: 410;
}
.worktabsRow .tabsWrapper.active-tab{
    border-bottom:1px solid #204042;
}
.banner-contentwrapper .messageCard {
    background: rgba(26, 26, 26, 0.60);
    padding: 24px;
    border-left:2px solid var(--tertiary-orange);
    margin-top:26px;
}
.banner-contentwrapper .messageCard .title,
.banner-contentwrapper .bannermessage-card .title{
    font-size: 18px;
    font-weight: 410;
    line-height: 26px;
    color: var(--color-secondary);
}
.solutionCard .title {
    font-size: 28px;
    font-weight: 410;
}
.left-col-image{
    height:460px;
}
.solutionsCopy {
    font-weight: 410;
    line-height: 26px;
    letter-spacing: 0.032px;
}
.justify-content-center{
    justify-content:center;
}
.brandcore-wrapper {
    background: rgba(26, 26, 26, 0.70);
    padding: 40px;
    text-align: center;
}
.brandcore-wrapper .brandcore-col .box h2 {
    font-weight: 510;
}
.brandcore-wrapper .brandcore-col .box p {
    line-height: 26px; 
    letter-spacing: 0.032px;
    font-weight: 410;
}
.brandPersonalityrow {
    display: flex;
    justify-content: center;
    gap: 30px;
    color: var( --color-secondary);
}
.video-marfing-wapper {
    display: none;
}
.video-marfing-wapper-cover .wp-block-cover__inner-container{
    align-self:center;
    cursor:pointer;
}
.text-center{
    text-align:center;
}
.ourWorkslider .title,
.ourWorkslider .title span{
    font-size: 22px;
    font-weight: 510;
    line-height:30px;
}
.ourWorkslider .title span{
   color:var(--tertiary-orange);
}
/*.ourWorkslider .swiper-slide figure { display: none; }*/
/*.ourWorkslider .swiper-slide figure:first-of-type { display: block; }*/

/*.ourWorkslider figure img {*/
/*  transition: opacity 0.5s ease;*/
/*}*/
/*.ourWorkslider figure img.fading {*/
/*  opacity: 0;*/
/*}*/
.ourWorkslider .swiper-slide,
.testimonialsSlider .swiper-slide{
    margin-top:0;
}
.align-self-center{
    align-self:center;
}
 .slider-wrapper {
            overflow: hidden;
        }
        .slider {
            display: flex;
            transition: transform 0.5s ease;
        }

        .slider-item {
            min-width: 100%;
             cursor: pointer;
        }

        /*.slider-item img {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    object-fit: cover;*/
        /*    display: block;*/
        /*}*/

        .slider-indicators {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
             position: absolute;
            bottom: 20px;
            left: 38%;
        }

        .indicator {
            width: 20px;
            height: 2px;
            background: #DFE2E3;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: var(--tertiary-orange);
            transform: scale(1.3);
        }
        .slider-indicators:has(.indicator:only-child) {
        display: none;
        }
        .works-menu-wapper ul {
           margin-bottom:30px;
        }
        
        .works-menu-wapper ul li {
            border: 0 !important;
            margin: 0px 18px;
            white-space: nowrap;
        }
        .works-menu-wapper ul li.current-menu-item a {
            color: #dd5f22 !important;
        }
        .h-100{
            height:100%;
        }
        .vectorRighttop{
    position: absolute;
    right: 0;
    top: -18px;
        }
        /*.events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow {*/
        /*    display: flex;*/
        /*    gap: 24px;*/
        /*}*/
        /*.events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow li.wp-block-post a:hover {*/
        /*    text-decoration: none;*/
        /*}*/
        /*.events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow li.wp-block-post h2 a {*/
        /*    display: -webkit-box;*/
        /*    -webkit-line-clamp: 3;*/
        /*    -webkit-box-orient: vertical;*/
        /*    overflow: hidden;*/
        /*}*/
        /*.events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow {*/
        /*    gap: 24px;*/
        /*    display: grid;*/
        /*    grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));*/
        /*}*/
        /*.events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow {*/
        /*    display: block;*/
        /*}*/
        .events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow li.wp-block-post {
            margin: 0;
        }
        /*.events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow li.wp-block-post:last-child{*/
        /*    margin-bottom:20px;*/
        /*}*/
        .aboutus-story .title{
            font-size:40px;
            font-weight:510;
        }
      .aboutus-story .para{
             font-size:18px;
            font-weight:410;
        }
        
        .aboutflow-wrap {
            position: relative;
            max-width: 680px !important;
            margin: 0 auto;
            height:1397px;
        }

        .aboutflow-wrap>figure {
            display: block;
        }

       .aboutflow-wrap>.flowSteps {
            display: grid !important;
            padding: 4rem 0 !important;
            align-items: start;
            position: relative;
            top:5%;
        }

        .aboutflow-wrap span.step-number {
            font-size: 56px;
            font-weight:510;
        }


.aboutflow-wrap>.flowSteps:nth-child(even) {
    grid-template-columns: 1fr 2fr;
}

.aboutflow-wrap>.flowSteps:nth-child(odd) {
    grid-template-columns: 1.5fr 1fr;
}
        .aboutflow-wrap>.flowSteps.active::before {
            background: var(--primary-blue);
        }


        .aboutflow-wrap>.flowSteps:nth-child(odd) .step-title {
            grid-column: 1;
            grid-row: 1;
            text-align: right;
            padding-right: 2rem;
            align-self: end;
        }

        .aboutflow-wrap>.flowSteps:nth-child(odd) .step-desc {
            grid-column: 1;
            grid-row: 2;
            /*text-align: right;*/
            /*padding-right: 5rem;*/
        }



        .aboutflow-wrap>.flowSteps:nth-child(even) .step-title {
            grid-column: 2;
            grid-row: 1;
            padding-left: 2rem;
            align-self: end;
        }

        .aboutflow-wrap>.flowSteps:nth-child(even) .step-desc {
            grid-column: 2;
            grid-row: 2;
            padding-left: 2rem;
        }


        .step-title {
            font-size: 16px;
            font-weight: 510;
            color: var(--primary-blue);
            margin: 0 0 .4rem !important;
            opacity: 0;
        }

        .step-desc {
            font-size: 14px;
            font-weight: 310;
            line-height: 22px;
            color: var(--primary-blue);
            margin: 0 !important;
            opacity: 0;
        }

        .curveImg {
            position: absolute;
            left: 20%;
            top: -4%;
        }
        .profileCard .personal-info{
padding: 24px 20px 28px 20px;
    background: #F6F6F6;
}
.personal-info .name {
    font-size: 22px;
    font-weight: 510;
}
.personal-info .designation{
    font-size: 16px;
    font-weight: 410;
}
.profileCard{
    background: #F6F6F6;
    height: 100%;
}
   .contact-form-row    span.wpcf7-form-control-wrap input {
    border-radius: 8px;
    border: 1px solid  var(--color-grey);
    background: var(--color-secondary);
    padding: 12px 24px;

}
.contact-form-row textarea.wpcf7-form-control.wpcf7-textarea {
    border-radius: 8px;
    border: 1px solid var(--color-grey);
    background: var(--color-secondary);
    padding: 12px 20px;
 
}
.bg-transparent img{
    background-color:transparent;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu {
  z-index: 999;
  position: absolute;
   width: unset; 
  padding: 12px 20px;
  border: 0;
  background-color: var( --color-secondary);
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  display: block;
  background-color: var( --color-secondary);
   color: var(--primary-blue);
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  padding: 8px 16px 8px 12px;
  text-wrap: nowrap;
  line-height: unset;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
  background-color: unset;
  color:var(--tertiary-orange);
}
.yoast-breadcrumbs {
    padding: 10px 0px;
    min-width: 100%;
}

span.breadcrumb_last {
    color: var(--tertiary-orange);
}
ul.featuredCase-study {
  display: grid !important;
  grid-template-columns: 35fr 36.2fr;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Cards 1, 4, 7 … (every 3rd starting from 1st) — full width */
ul.featuredCase-study > li:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

/* Cards 2, 5, 8 … — 65% column */
ul.featuredCase-study > li:nth-child(3n + 2) {
  grid-column: 1 / 2;
}

/* Cards 3, 6, 9 … — 35% column */
ul.featuredCase-study > li:nth-child(3n) {
  grid-column: 2 / 3;
}

/* Featured image fills the card */
ul.featuredCase-study > li .case-studyfeaturedImg,
ul.featuredCase-study > li .case-studyfeaturedImg a,
ul.featuredCase-study > li .case-studyfeaturedImg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Full-width card image height */
ul.featuredCase-study > li:nth-child(3n + 1) .case-studyfeaturedImg {
  /*height: 640px !important;*/
  min-width:100%;
}

/* 65% and 35% card image height */
ul.featuredCase-study > li:nth-child(3n + 2) .case-studyfeaturedImg,
ul.featuredCase-study > li:nth-child(3n) .case-studyfeaturedImg {
  /*height: 390px !important;*/
   min-width:100%;
}
.bottomCasestudies{
    display:flex;
    gap:24px
}

.contact-form-row.options{
    width:27.5vw;
    margin-top:-14px;
}
.ms-choice{
    border-radius:8px !important;
    height:46px !important;
    line-height:44px !important;
}
.modalTop-strap{
    background: var(--white);
    padding: 24px 40px;
    border-bottom: 0.5px solid #AFAEAE;
}
#flex-block-modal-wapper .get-you-invite-modal-wapper {
    max-width: 944px;
    margin: 0 auto;
    pointer-events:auto;
}
#flex-block-modal-wapper{
    pointer-events:none;
}
.popupHeading{
    font-size:28px;
    font-weight:410;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: var( --tertiary-orange);
    border: 0px;
    padding: 12px 32px;
    border-radius: 32px;
    color: var(--white);
    font-weight: 410;
    cursor:pointer;
    width:100%;
}
.ms-choice>span{
    left: 18px !important;
}
.blogs-list{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.logo-gridColumns.logoImg figure img{
    filter: invert(1);
    width: 260px;
    height: 85px;
    padding: 14px 54px;
}
.text-decoration-none{
    text-decoration:none;
}
.tabsWrapper a:where(.wp-site-blocks *:focus) {
	outline: none;
}
.logo-swiper-row .swiper-wrapper{
  transition-timing-function: linear !important;
  display:flex;
  align-items:center;
}
.logo-swiper-row .logoImg figure img {
    filter: invert(1);
    width: 260px;
    height: 90px;
    padding: 14px 54px;
    object-fit: fill;
}
.logo-slider-section{
  overflow:hidden;
  position:relative;
}
.logo-slider-section .swiper-slide{
  width:auto !important;
  margin-top:0;
}
.taxonomy-category a {
    font-size: 16px;
    font-weight: 310;
}
.cardclick{
    cursor:pointer;
}
.brandVideo{
    height:100%;
}
.brandVideo video{
     height:303px;
}
.overflow-hidden{
    overflow:hidden;
}
.brand-overlay-content a:hover{
    outline:none !important;
    text-decoration:none;
}
.tag_style a{
    font-weight:410;
}
.founder{
    color:var(--tertiary-orange);
    font-weight:410;
    font-size: 18px;
}
.founder span{
    font-size:12px;
}

.contact-form-row.options, 
.contact-form-row span.wpcf7-form-control-wrap input[type="text"], 
.contact-form-row span.wpcf7-form-control-wrap input[type="email"], 
.contact-form-row textarea.wpcf7-form-control.wpcf7-textarea{
    width: -webkit-fill-available;
}
.taxonomy-post_tag a{
    pointer-events:none;
}
.wp-block-post-author-name {
    text-transform: capitalize;
}
.whybrandingCards{
    background-color:var(--color-creamwhite);
    padding:20px;
    color:var(--primary-blue);
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.whybrandingCards h3,
.whybrandingCards-primary h3{
    font-size:28px;
    font-weight:410;
}
.whybrandingCards figure,
.whybrandingCards-primary figure{
    text-align:end;
}
.whybrandingCards-primary{
    background-color:var(--primary-blue);
    padding:20px;
    color:var(--white);
     height:100%;
     display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.brandingservicesTab.active .number{
    background: var(--tertiary-orange);
}
.brandingservicesTab .number{
    background-color:var(--primary-blue);
    width: 56px;
    height: 56px;
    place-content: center;
    text-align: center;
    font-weight: 410;
    color: white;
}
.brandingservicesTab.active{
    background: linear-gradient(90deg, var(--Color-Brand_Primary, #204042) 58.61%, var(--Color-Brand_Tertiary, #F19937) 197.28%);
}
.brandingservicesTab{
    padding: 12px;
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--white);
  background:var(--color-secondary);
  cursor:pointer;
        transition: all  0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all  0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
}
.brandingservicesTab .content h3{
    color:var(--primary-blue);
    font-weight:410;
    font-size:18px;
    margin-top:3px;
}
.brandingservicesTab.active .content h3,
.brandingservicesTab.active .content p{
    color:var(--color-secondary);
}
.brandingservicesTab .content p{
    color:var(--primary-blue);
    font-weight:410;
    font-size:12px;
}
.brandingservicesTab .number p{
    font-size: 28px;
    font-weight: 410;
    color: var(--color-secondary);
}
.brandserviceImg figure{
   opacity:0;
   display:none;
}
.brandserviceImg.active figure{
    opacity:1;
    display:block;
}

.swiper-button-prev:after,
.swiper-rtl, .swiper-button-next:after {
    content: "" !important;
    background: url(https://dev.narrative.asia/wp-content/uploads/2026/04/previcon.svg) no-repeat;
    width: 48px;
    height: 48px;
}
.swiper-button-next, .swiper-button-prev{
    width:unset !important;
}
.swiper-button-next:after{
    transform: rotate(180deg) ;
}
.swiper-button-next, .swiper-button-prev{
    color:transparent !important;
}
 .marquee-strip {
    background: var(--color-secondary);
    overflow: hidden;
    position: relative;
  }

  .marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
  }

  .marquee-item {
    font-size: 16px;
    letter-spacing: 0.032px;
    color: var(--primary-blue);
    padding: 0 60px;
    display: inline-flex;
    align-items: center;
    position:relative;
    white-space:nowrap;
    font-weight:410;
    margin-top:0;
  }

  .marquee-item::after {
    content: '';
    background:var(--primary-blue);
    width:1px;
    height:16px;
    left: 0;
    position: absolute;
  }
    @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-150%); }
  }
  .businessObj-cards{
      padding:24px;
      border-radius:12px;
      background-color:var(--primary-blue);
  }
 .businessObj-cards .text{
      font-size:18px;
      font-weight:410;
      color:var(--color-secondary);
  }
  .text_gradient{
opacity: 0.6;
background: linear-gradient(180deg, var(--Color-Primary-10, #DFE2E3) -37.63%, var(--Color-Brand_Primary, #204042) 112.03%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }
  .b2b-Card{
      padding:40px 30px;
    border-right: 1px solid #DFE2E3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
       transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
    
  }
 .last-card .b2b-Card:last-of-type  {
    border-right: unset;
}
  .b2b-Card .number{
      font-size:52px;
      font-weight:410;
      margin-bottom:50px;
      position:relative;
  }
  .b2b-Card .number:after{
     content:'';
     background:#DFE2E3;
     position:absolute;
     bottom:-32%;
     left:0;
     width:120px;
     height:1px;
  }
  .b2b-Card .para{
      color:#4B6466;
      letter-spacing: 0.032px;
  }
 .b2b-Card .heading{
      font-size: 28px;
    font-weight: 410;
  }
  .outcometext{
      visibility:hidden;
      margin-top:40px;
  }
  .outcometext .text{
      color:var(--tertiary-orange);
      font-size:18px;
      font-weight: 410;
  }
  .b2b-Card:hover{
    border-radius: 24px;
    background: var(--primary-blue);
  }
 .b2b-Card:hover .number{
      background: linear-gradient(180deg,  #DFE2E3 -3.91%,  #F19937 112.5%);
opacity:1;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }
   .b2b-Card:hover .heading{
       color:var(--color-secondary);
   }
     .b2b-Card:hover .para{
         color:#DFE2E3;
     }
     .b2b-Card:hover .outcometext{
         visibility:visible;
     }
     .testimonialBox,
     .testimonialBox-primary{
         padding:24px;
        height: 392px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
     }
    .testimonialBox .message{
         font-size:16px;
         font-weight:410;
         letter-spacing: 0.032px;
         color:var(--primary-blue);
     }
      .testimonialBox .name,
      .testimonialBox-primary .name{
           font-size:18px;
           font-weight:510;
           border-top: 1px solid #AFAEAE;
          padding-top: 16px;

       }
         .testimonialBox .designation
         .testimonialBox-primary .designation{
             font-size:14px;
         }
         .testimonialBox-primary p{
             color:var(--color-secondary);
         }
           .testimonialBox .message{
              font-size:16px;
         font-weight:410;
         letter-spacing: 0.032px;  
           }
       .section-agency  .cards{
          padding: 16px 16px 20px 16px;
          border-bottom: 1px solid rgba(175, 174, 174, 0.60);
       }
       .moreBranding .heading{
           font-size:28px;
           font-weight:410;
       }
       .justify-content-between{
           justify-content:space-between;
       }
    .faq-accordion  .wp-block-ub-content-toggle-accordion .wp-block-ub-content-toggle-accordion-title {
    padding: 24px;
    font-size: 22px;
    font-weight: 410;
   
}
 .faq-accordion  .wp-block-ub-content-toggle-accordion-content-wrap{
    background-color:var(--color-secondary);
    
}
.faq-accordion > .wp-block-ub-content-toggle-accordion:nth-child(n+7) {
  display: none;
}
.wp-block-ub-content-toggle-accordion-title-wrap{
     outline:none ;
}
.contact-form-lp .contact-form-row span.wpcf7-form-control-wrap input,
.contact-form-lp .ms-choice,
.contact-form-lp .contact-form-row textarea.wpcf7-form-control.wpcf7-textarea{
border: 1px solid rgba(175, 174, 174, 0.20);
background: rgba(223, 226, 227, 0.10);
color:var(--color-secondary);
border-radius:0px !important;
}
.contact-form-lp .contact-form-row span.wpcf7-form-control-wrap input::placeholder{
    color: rgba(246, 246, 246, 0.70);
}
.contact-form-lp label.contact-form-row{
    color:var(--color-secondary);
    font-weight:410;
    line-height: 41px;
}
.contact-form-lp .wpcf7 form.invalid .wpcf7-response-output, 
.contact-form-lp .wpcf7 form.unaccepted .wpcf7-response-output, 
.contact-form-lp .wpcf7 form.payment-required .wpcf7-response-output{
    color:var(--color-secondary);
}
/* ─── SCROLL REVEAL ─── */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  
   @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
 
.clientswork-img:hover figure img{
    transform: scale(0.95);
}
.clientswork-img figure img{
 -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}
.clientswork-img figure {
width:100%;
overflow:hidden;
cursor:pointer;
}
.testimonialsSlider .swiper-button-prev,
 .testimonialsSlider .swiper-button-next {
     top: 56% !important;
}
.featuredNews{
    position:sticky;
    top:110px;
    z-index:11;
}
.wp-block-ub-content-toggle-accordion-title-wrap .wp-block-ub-content-toggle-accordion-toggle-wrap{
    align-items:center;
}
.faq-accordion{
    position:relative;
}
.faq-accordion:after {
    content: "";
    background: linear-gradient(358deg, #F6F6F6 1.67%, rgba(246, 246, 246, 0.50) 87.07%);
    bottom: 0px;
    z-index: 1;
    width: 100%;
    height: 210px;
    left: 0;
    position: absolute;
    pointer-events: none;
}
 .faq-accordion.show-all > .wp-block-ub-content-toggle-accordion:nth-child(n+7){
    display: block;
  }
  .faq-accordion.show-all:after{
      background:unset;
  }
  .viewFaq{
      z-index: 9;
    position: relative;
  }
  

  
/* Responsive — tablet */
@media (max-width: 1299px) {
     .worktabsRow{
      justify-content:start;
      flex-wrap:wrap;
  }
}
@media (max-width: 1023px) {
  ul.featuredCase-study {
    grid-template-columns: 1fr 1fr;
  }

  ul.featuredCase-study > li:nth-child(3n + 1),
  ul.featuredCase-study > li:nth-child(3n + 2),
  ul.featuredCase-study > li:nth-child(3n) {
    grid-column: 1 / -1;
  }
 
}


@media (min-width: 1800px) {
    .h-track{
        max-width:50vw;
    }
    .processCard {
    width: 19vw;
    }
    .h-track:after{
        top:40%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .video-modal iframe {
        height: 240px;
    }
     ul.featuredCase-study {
    grid-template-columns: 1fr;
  }

  ul.featuredCase-study > li:nth-child(3n + 1),
  ul.featuredCase-study > li:nth-child(3n + 2),
  ul.featuredCase-study > li:nth-child(3n) {
    grid-column: 1 / -1;
  }
  .homebanner .bgvideo{
      right:-30%;
  }
  .homebanner .title,
  .brandingBanner .title,
  .bannerTitle,
  .bannerTitle span{
      font-size:30px;
     
  }
  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle{
      background-color:unset;
  }
  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
  width: 40px;
  height: 3px;
  background-color: var(--primary-blue);
}
.popupDesktop-btn .wp-block-button{
    display:none;
}
.aboutus-section .title,
.aboutus-section .title span,
.aboutus-story .title{
         font-size: 28px;
        line-height: normal;
}
 #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1 {
    background-color: var(--primary-blue);
    width: 90%;
  }
  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator{
      float:unset;
  }
  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link{
      font-size:16px;
  }
    #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_1 {
    padding: 30px 16px;
  }
   .processCard {
      width: fit-content;
      padding: 0 2rem 0 0;
   }
   #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
        background-color: var(--primary-blue);
   }
    .homebanner .para,
    .workbanner .para,
    .brandingBanner .para{
      font-size: 16px;
    }
    .h-track:after {
    width: 550%;
    top: 40%;
}
.brandsSection .creativeCommunication,
.brandsSection .websiteDevelopment,
.brandsSection .brandfilms{
    top: 90px;
    flex-direction: column-reverse;
}
.logo-swiper-row .logoImg figure img {
    width: 240px;
    padding: 24px 34px;
}
.logo-slider-section{
    padding-top:0 !important;
}
.industryRow{
    flex-wrap:wrap;
}
.desktopIndustries.industryCardshow{
    display:none;
}
.getin-touch .title{
    font-size:28px;
}
#creativeCommunication, #webDevelopment{
    margin-top:30px;
}
.onscroll-horizontal{
    padding-top:30px !important;
}
.btnhover-primary, .btnhover-secondary{
    width:auto;
}
.primaryButton, .secondaryButton{
    white-space:normal;
}
.brand-overlay,
.brand-overlayfullwidth{
      position: static;
      transform: translateX(0%);
      padding: 16px;
      align-items:center;
      height:unset;
    }
      .brand-overlay-content .title,
    .ourwork-column .title,
    .heading2,
    .heading3,
    .heading2 span, 
    .heading3 span{
      font-size: 28px;
     line-height: normal;
    }
    .brand-overlay-content .para{
        font-size:16px;
        margin-top:16px;
    }
    .badgeGroup{
        display:none;
    }
    .footerTitle{
        font-size:22px !important;
        margin-bottom: 10px !important;
    }
    .getin-touch .wp-block-column figure img{
            width: 220px;
    }
    .worktabsRow{
    border-bottom: unset; 
    justify-content:center;
    flex-wrap: wrap;
    }
    .imagecard-hover{
        height:unset;
    }
    ul.featuredCase-study,
    .bottomCasestudies{
        display:unset !important;
    }
    .tag_style a{
       font-size: 28px !important;
        font-weight:510;
    }
      .brand-overlay-content .para a{
      font-size: 18px;
      margin-top: 0px;
       
      }
      .workbanner .title{
          font-size:30px;
      }
      .events-list-wapper ul.wp-block-post-template.wp-block-post-template-is-layout-flow li.wp-block-post,
      .bottomCasestudies li{
          margin-bottom:20px;
      }
      .wp-block-button {
          width:100%;
      }
      .worksTab{
          padding-top:unset !important;
      }
      .banner-contentwrapper .messageCard .title,
.banner-contentwrapper .bannermessage-card .title{
    font-size: 20px;
    line-height: 26px;
}
    .cardBadge-white p, .cardBadgewhite-opacity p, .cardBadge-opacity-accent p {
    font-size: 14px;
      }
      .problemstatement-wrapper h2{
          font-size:28px;
          line-height: normal;
      }
      .coverHrdwyr {
          min-height:350px !important;
      }
      .coverHrdwyr img{
          object-position:right !important;
      }
      .gifImg img{
          width:210px;
      }
      .brandcore-wrapper .box img {
    width: 140px;
}

.brandcore-wrapper .box {
    margin-bottom: 34px;
}
.brandcore-wrapper{
    padding:40px 14px;
}
.conceptWrapper .wp-block-group-is-layout-flex{
    flex-wrap: wrap;
    padding: 16px 0;
}

.conceptWrapper .wp-block-group-is-layout-constrained{
    border: unset !important;
    padding-left:unset !important;
}
.conceptWrapper .conceptdata-first {
    margin-bottom: 24px;
}
.brandingBanner {
    background-position:unset !important;
}
.blogs-list{
    display:flex;
     flex-wrap: wrap;
}
.teamgroup-photo,
.quotIcon{
    display:none;
}
.b2b-Card{
        padding: 24px;
        border-right:unset;
}
.b2b-Card .heading,
.moreBranding .heading{
    font-size:24px;
}
.btn_primary .wp-element-button{
    padding: 10px !important;
    font-size: 14px;
}
.faq-accordion .wp-block-ub-content-toggle-accordion .wp-block-ub-content-toggle-accordion-title{
    padding:18px;
    font-size:18px;
}
.footerlogo img{
    width:150px;
    margin-bottom:30px;
}
.mb-40{
    margin-bottom:40px;
}
/*.industryCardhover:hover, .industryCardhover.active{*/
/*    padding:24px;*/
/*}*/
/*  .industryCardhover:hover figure img, .industryCardhover.active figure img{*/
/*      width:140px;*/
/*  } */
  /*.flip-card {*/
  /*    width: 100%;*/
  /*    aspect-ratio: 1 / 1;*/
  /*    perspective: 1000px;*/
  /*  }*/

  /*  .flip-card-inner {*/
  /*    position: relative;*/
  /*    transform-style: preserve-3d;*/
  /*    transition: transform 0.6s;*/
  /*  }*/

  /*  .flip-card:hover .flip-card-inner {*/
  /*    transform: rotateY(180deg);*/
  /*  }*/

  /*  .flip-card-front,*/
  /*  .flip-card-back {*/
  /*    position: absolute;*/
  /*    width: 100%;*/
  /*    height: 100%;*/
  /*    backface-visibility: hidden;*/
  /*      top: 0;*/
  /*      place-content: center;*/
  /*      left: 0;*/
  /*      border: 0;*/
  /*  }*/


  /*  .flip-card-back {*/
  /*   margin-top:0;*/
  /*    transform: rotateY(180deg);*/
  /*  }*/
}