@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;

    }


   *, body,
    html {
      font-family: "Lexend", sans-serif;
      font-weight: 310;
      font-style: normal;
      font-size: 16px;
    }
    .fw-410{
        font-weight: 410;
    }
    .fw-510{
        font-weight: 510;
    }
     .fw-610{
        font-weight: 610;
    }
.text-center{
    text-align:center;
}
    .header-part {
      background-color: var(--color-lightwhite);
      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
      padding: 6px 0;
    }

    .homebanner .title,
    .brandingBanner .title{
      font-size: 56px;
      font-weight: 510;
      color: var(--primary-blue);
    }

    .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);
    }
    
    .btn_primary .wp-element-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;
    }

    .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;
    }

    .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;
    }

    .brand-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      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);
      margin-top: 40px;
      font-weight:510;
    }
    
    
    
    
    /* Dynamic case study styles */
    .brand-overlay-content .para a{
      font-size: 22px;
      color: var(--tertiary-orange);
      margin-top: 40px;
      font-weight:510;
    }
    /*.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-20 {
      column-gap: 20px;
    }

    .brand-overlayfullwidth {
      position: absolute;
      top: 0;
      left: 0;
      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;
    }

    .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-grey);
    }
    .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 .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;
}
.industryCardshow figure img{
    width: 160px;
    height: 90px;
    object-fit: contain;
}
.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: 10px;
    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 48px;
}

.worktabsRow .tabsWrapper p {
    white-space: nowrap;
    color: var(--color-grey);
    font-size: 16px;
    font-weight: 410;
}


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

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

.banner-contentwrapper .messageCard {
    background: rgba(26, 26, 26, 0.60);
    padding: 20px 16px;
}
.banner-contentwrapper .messageCard .title,
.banner-contentwrapper .bannermessage-card .title{
    font-size: 28px;
    font-weight: 410;
    line-height: 38px;
    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{
    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;
             height: 390px;
        }

        .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);
        }
        .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:65px;
        }

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


.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: 410;
            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: 65fr 35fr;
  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;
}
.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;
}
.ms-choice>span{
    left: 18px !important;
}
.blogs-list{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Responsive — tablet */
@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;
  }
}