/* scrool css */

/* scrool css */

:root {
    --gold: #f2cb57;
    --gold2: #caa73a;
    --txt: #eaeaea;
    --muted: #bfbfbf;
    --bg: #000;
    --glass: #131313cc;
    --ring: #ffffff12;
    --bd: #ffffff1a;
    --max: 1440px;
    --pad: clamp(16px, 4vw, 40px);
    --fColor: #1B1B1B;
    --hsize: 65px;
    --r: 10px;
    --pad: clamp(16px, 4vw, 36px);
    --psize: 20px;
    --spading: 80px 0;
      --primaryBtnBgColor: linear-gradient(0deg,rgba(255, 232, 156, 1) 0%, rgba(222, 176, 25, 1) 100%);;

}

* {
    box-sizing: border-box
}





html,
body {
    margin: 0
}

body {

    color: var(--txt);
    font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.wk_pading {
    padding: var(--spading);
}
/* header start00 */
  /* header shell */
.zf-header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 50;
    /* backdrop-filter: saturate(1.1) blur(6px); */
    /* background: linear-gradient(180deg, #000000d0 0%, #000000a0 100%); */
}

.zf-header .zf-wrap.wk_container {
    justify-content: space-between;
}

.zf-wrap {

    margin: 0 auto;
    padding: 20px 0;
    /* display: grid;
     */
    display: flex;
    justify-content: center;
     grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}

.wk_container , .container{

    max-width: var(--max);
    position: relative;

    /* max-width: 90%; */
    margin: auto;
}

.wk-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 48.3%;
}

.wk_pading {
    padding: var(--spading);
}

/* brand */
.zf-brand img {
    /* height: 34px; */
    width: auto;
    display: block
}

/* center pill nav */
.zf-center {
    display: block;

    /* margin: auto; */
}

   .zf-pill {
        position: relative;
        border-radius: 999px;
        background: linear-gradient(180deg, #1a1a1aee, #0f0f0fe6);
        border: 1px solid var(--bd);
        box-shadow: inset 0 1px 0 #ffffff22, 0 12px 30px #00000066;
        display: flex;
        min-height: 60px;
    }

.zf-rail {
    margin: 0;
    padding: 12px 24px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 42px);
}

.zf-rail a {
    /* color: var(--muted); */
    color: #fff;
    text-decoration: none; 
    font-size: 18px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: color .2s ease, background .2s ease;
}

.zf-rail a:hover {
    color: #fff;
    background: #ffffff08
}

.p {
    opacity: .6
}

/* moving gold glow under the pill */
/*  
    .zf-pill::after {

        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(180px 10px at var(--sx, 50%) 0%, rgb(242 203 87), transparent 70%);
        mix-blend-mode: screen;
        opacity: .7;
        animation: slide-glow 10s ease-in-out infinite;
    }

    .zf-pill::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(180px 10px at var(--sx, 50%) 100%, rgb(242 203 87), transparent 70%);
        mix-blend-mode: screen;
        opacity: .7;
        animation: slide-glow 10s ease-in-out infinite;
        animation-delay: -2.5s;
    }
    @keyframes slide-glow {
        0% {
            transform: translateX(-30%);
        }

        50% {
            transform: translateX(30%);
        }

        100% {
            transform: translateX(-30%);
        }
    } */

    /* animate */
/* moving gold glow under the pill end*/






/* right actions */
.zf-actions {
    display: flex;
    align-items: center;
    gap: 14px
}

/* lang button */
.zf-lang {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 18px;
    border-radius: 100px;
    color: #fff;
    background: #0e0e0eb8;
    border: 1px solid var(--bd);
    cursor: pointer;
    width: 120px;
    justify-content: center;
    font-size: 18px;
}

.zf-lang:hover {
    background: #131313
}

.car {
    opacity: .6
}

/* CTA */
/* CTA */
.zf-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 22px;
    border-radius: 222px;
    text-decoration: none;
    color: #1a1200;
    font-weight: 600;
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, #FFE89C 0%, #DEB019 52%, #FFDA60 100%), rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 26px rgba(202, 167, 58, .35), inset 0 1px 0 #fff6;
    transition: .5s;
    position: relative;
    border: none;
    font-size: 16px;
    
}

.zf-header .zf-actions .btn-primary.arrow {
    font-size: 18px;
}
span.dot:before {
    content: "";
    height: 0px;
    width: 0px;
    background: #fff;
    margin: auto;
    bottom: 0;
    transition: .7s;
    position: absolute;
     border-radius: 100%;
    left: 0;
    right: 0;
    opacity: 0;
}
.zf-cta:hover .arr , .gold-btn:hover  .arr ,
a.case__cta:hover .arr {
    transform: rotate(360deg);
}

.zf-cta .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}

  .arr {
    font-size: 18px;
    transition: .8s;
}
span.txt {
    z-index: 1;
}
.zf-cta:hover .dot:before {
height: 100%;
width: 100%;
    opacity: 1;
    z-index: 0;
        border-radius: 222px;
}
/* cta end */


/* btn-primary */
.btn-primary
{
    display: inline-block;
    background: var(--primaryBtnBgColor);
    color: var(--primaryBtnTextColor);
    /* border-radius:  var(--btnRadius); */
    border-radius:  30px;
    
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding: 13px 25px 13px 35px;
    
    overflow: clip;

    border:1px solid #FFDA60;


    &::after
    {
        transition: all .7s;
        content:'';
        position: absolute;
        width: 8px;
        height: 8px;
        left:20px;
        top: 22px;
        border-radius: 100%;
        background-color: white;
        

    }

    div
    {
        transition: all .7s;
        color: #000 !important;
        z-index: 1;
    }


    &:hover
    {
        border:1px solid #888;
        &::after
        {
            width: 500px;
            height: 500px;
            left: -25%;
            top: -250px;
        }

        & div
        {
            transform: translateX(-13px);
        }
       
      
           
      

    
    }
   
    &.arrow
    {
        padding: 13px 50px 13px 35px;
    }

    &.arrow::before
    {
        content: '';
        transition: all .5s ease-in-out;
        position: absolute;
        width: 12px; 
        height: 12px;
        right: 25px;
        /* top: 18px; */
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.38348 10.6164L10.6161 1.38379' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M1.38348 1.38379L10.6161 1.38379V10.6164' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    }


    &.partner
    {
        background: #fff;
        padding: 13px 25px 13px 55px;
        border: 1px solid transparent;
        box-shadow: 0px 1.68px 22.65px 0px #00000040;

        &:after
        {
            background-color: #000;
            width: 36px;
            height: 36px;
            top: 6px;
            left: 6px;
        }

        &:before
        {
            content: "";
            position: absolute;
            width: 21px;
            height: 20px;
            left: 13px;
            top: 14px;
            z-index: 1;
            background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 27 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4287 17.8131V21.9124H12.5262V17.8131H18.3579C19.4068 17.8131 20.3262 17.3852 21.0115 16.6996C21.6968 16.014 22.1245 15.0942 22.1245 14.0448V7.87942C22.1245 6.83005 21.6968 5.91022 21.0115 5.2246C20.3262 4.53898 19.4068 4.11112 18.3579 4.11112H12.1953C11.1464 4.11112 10.227 4.53898 9.54168 5.2246C8.8459 5.91022 8.4287 6.83005 8.4287 7.87942V13.7138H0.232422V17.8131H8.4287ZM4.32991 13.7124V7.86765C4.32991 5.7048 5.21793 3.73559 6.61995 2.29108C8.06512 0.877963 10.0334 0 12.1953 0H18.3579C20.5197 0 22.4881 0.88843 23.9319 2.29108C25.3444 3.73559 26.2324 5.7061 26.2324 7.86765V14.033C26.2324 16.1959 25.3444 18.1651 23.9424 19.6096C22.4985 21.0227 20.5289 21.9007 18.3683 21.9007H12.5262V26H8.4287V21.9007H4.33121V13.7111L4.32991 13.7124ZM16.5282 8.18952H14.0354C13.6392 8.18952 13.2547 8.36093 12.9865 8.65009C12.687 8.90655 12.5262 9.303 12.5262 9.69946V13.7033H16.5282C16.9245 13.7033 17.309 13.5319 17.5771 13.2427C17.8766 12.9863 18.0375 12.5898 18.0375 12.1933V9.69946C18.0375 9.303 17.8661 8.91832 17.5771 8.65009C17.3208 8.36093 16.9245 8.18952 16.5282 8.18952Z' fill='url(%23paint0_linear_873_9117)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_873_9117' x1='3.98464' y1='24.4194' x2='23.0344' y2='1.72778' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2364F1FA'/%3E%3Cstop offset='1' stop-color='%232F59D1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");

        }

        &:hover
        {
            &:after
            {
                width: 400px;
                height: 400px;
                left: -200px;
                top: -200px;
               

            }

            div
            {
              
                color: #fff !important;
            }

            
        }


    }




}
/* btn-primary */



/* burger (visible on mobile) */
.zf-burger {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    background: #0e0e0e;
    border: 1px solid var(--bd);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
}

.zf-burger .b,
.zf-burger .b::before,
.zf-burger .b::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: #000;
    border-radius: 2px;
}

.zf-burger .b {
    position: relative
}

.zf-burger .b::before {
    position: absolute;
    top: -6px
}

.zf-burger .b::after {
    position: absolute;
    top: 6px
}
/* =========================
   NAVBAR DROPDOWN (ADD-ON)
   ========================= */

/* let the dropdown render outside the pill */
.zf-pill { overflow: visible !important; }

/* base */
.zf-rail li { position: relative; }

/* dropdown panel */
.has-sub .zf-sub {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 240px;

  background: #0f0f0fe6;
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 12px 30px #00000066, inset 0 1px 0 #ffffff22;

  display: flex;
  flex-direction: column;
  padding: 8px;

  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}

/* show on hover and keyboard focus */
.has-sub:hover .zf-sub,
.has-sub:focus-within .zf-sub {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* dropdown links */
.has-sub .zf-sub a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  padding: 12px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.has-sub .zf-sub a:hover,
.has-sub .zf-sub a:focus { background: #ffffff10; }

/* mobile drawer sublinks (optional indent) */
#zfMobile .zf-sublink {
  padding-left: 24px;
  opacity: .85;
  font-size: 15px;
}

/* responsive: keep desktop nav hidden on small screens (matches your JS breakpoint) */
@media (max-width: 1100px){
  .zf-center { display: none; }
}

/* header end */


/* --- Hero Start --- */
.hero-swiper {
    position: relative;
    height: 850px;
    background: #000;
    overflow: hidden;
}


.hero-swiper .swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    height: 100%;
}

.hero-swiper .swiper-slide {
    position: relative;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(.98);
}

/* soft top/bottom dark fade */
.hero-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 25%),
        linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 35%);
}

/* bullets bottom-right as small bars */
.hero-swiper .swiper-pagination {
    position: absolute;
    right: 36px;
    bottom: 22px;
    left: auto;
    width: auto;
}

.hero-swiper .swiper-pagination-bullet {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    margin: 0 4px !important;
    background: rgba(255, 255, 255, .28);
    opacity: 1;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #fff;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    text-align: right;
    /* max-width: var(--max); */
    margin: auto;
     padding: 30px 70px;
    max-width: 100%;
}

/* --- Hero End --- */

/* impact start */
section.impact {

    /* background: url(/assets/img/bgbg.jpg); */
    background: url(/assets/img/bgbg.jpg);
    background-size: 93% 100%;
    padding: var(--spading);
    background-repeat: no-repeat;
    background-position: right center;
        background-color: #f4f4f4;
}

.wk_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.impact__wrap {
    margin: auto;

}


.primary-title {
    color: var(--fColor);
    font-size: var(--hsize);
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    margin: 0;
    letter-spacing: -2px;
}

.primary-pera {
    color: var(--fColor);
    font-size: var(--psize);

}

h2.impact__title.primary-title,
.impact__num {
    font-weight: 500;
      letter-spacing: -3px;
}
.impact__num.primary-title{
    font-size: 90px;
}
/* .impact__label {
      color: var(--fColor);
} */
.impact__stat {
    display: flex;
    /* gap: 20px; */
    gap: 30px;
    align-items: center;
}

/* impact End */


/* ===== tabs */

.cases {
    background: #fff;
    padding: var(--spading)
}

.cases__top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(16px, 4vw, 40px);
    margin-bottom: clamp(20px, 4vw, 36px);
}

.cases__title {
    margin: 0;
    font: 800 clamp(14px, 1.2vw, 16px)/1.2 DM Sans, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing: .12em;
    color: #222;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* tabs */
.cases__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.tab {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid #E4E4E4;
    background: #fff;
    color: #333;
    font: 600 14px/40px DM Sans, system-ui;
    transition: .5s;
    min-width: 125px;
}

.tab:hover {
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, #FFE89C 0%, #DEB019 52%, #FFDA60 100%), rgba(0, 0, 0, 0.08);
}

.tab.is-active {
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, #FFE89C 0%, #DEB019 52%, #FFDA60 100%), rgba(0, 0, 0, 0.08);
    color: #1a1200;
    border-color: transparent;
    font-weight: 800;
}

/* panels + grid */
/* .cases__panels {
    max-width: 1400px;
    margin: 0 auto
} */

.panel {
    display: none
}

.panel.is-active {
    display: block
}

.cases__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 3.2vw, 40px);
}

@media (max-width: 920px) {
    .cases__top {
        grid-template-columns: 1fr
    }

    .cases__grid {
        grid-template-columns: 1fr
    }
}

/* card */
.case {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: #000;
    /* min-height: 460px; */
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    isolation: isolate;
    aspect-ratio: 16 / 11;
}

.case__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(.98);
    transform: scale(1.1);
    transition: .6s;
}

.case__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, 0) 35% 65%, rgba(0, 0, 0, .55) 100%);
    transition: opacity .35s ease;
    opacity: .85;
}

.case:hover .case__shade {
    opacity: 1
}

.case:hover .case__video {
    transform: scale(1);

}

/* tags (fade-in DOWN) */
.case__tags {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 80%;
}

.chip {
    background: #ffffffe0;
    color: #111;
    font: 700 12px/1 DM Sans, system-ui;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid #ffffffcc;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
}

.case:hover .chip {
    opacity: 1;
    transform: translateY(0)
}

.case:hover .chip:nth-child(1) {
    transition-delay: .05s
}

.case:hover .chip:nth-child(2) {
    transition-delay: .12s
}

.case:hover .chip:nth-child(3) {
    transition-delay: .19s
}

/* CTA (fade-in UP) */
.case__cta {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font: 800 16px/54px DM Sans, system-ui;
    color: #1a1200;
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, #FFE89C 0%, #DEB019 52%, #FFDA60 100%), rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 24px rgba(202, 167, 58, .35), inset 0 1px 0 #fff6;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
    z-index: 9;
}

.case__cta i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: inline-block
}

.case__cta b {
    font-weight: 800
}

.case:hover .case__cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .18s
}

/* focus */
.case:focus-within .chip,
.case:focus-within .case__cta {
    opacity: 1;
    transform: translateY(0)
}
.case__title {
    position: absolute;
    left: 16px;
    bottom: 16px;
     color: #fff;
       opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
    font-size: 50px;
    font-weight: 400;
    z-index: 9;
}

/* Reveal on hover */
.case:hover .case__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s; /* slight delay for smooth effect */
}


/* Contact CTA CSS */
a.zf-cta.wk-btn {
    width: 300px;
}

section.contact-cta {
    padding: var(--spading);
    /* background: url(/assets/img/cta-bbg.webp); */
    background: url(../img/case-studies/uae-image.png);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: #FFFCF3;
}

.qa_contact_cta {
    padding: 130px 0 !important;
}
.qa_contact_cta .cases__title {
    margin-bottom: 16px;
}
.qa_contact_cta .primary-pera {
    max-width: 707px;
    margin: 10px 0 16px;
}
section.contact-hero .wk_container {
    align-items: end;
}

/* Contact CTA CSS End */

/* testimonial css start  */
section.stories {
    padding: var(--spading);
}
.wk-col.stories-col-2 {
    width: 45%;
}

.tst .swiper {
    max-width: 1100px;
    margin: 0 auto;
    /* padding: clamp(24px, 6vw, 56px) clamp(20px, 6vw, 56px) clamp(36px, 8vw, 72px); */
}

.tst .swiper-slide {
    display: grid;
    /* gap: clamp(16px, 3vw, 28px); */
}

/* stars */
.tst__stars {
    display: flex;
    gap: 8px;
}


.qa_stories .cases__title {
    color: #666666;
}
.qa_stories .primary-title {
    max-width: 690px;
}
.qa_stories_slider {
    max-width: 100% !important;
}

.star {
    width: 28px;
    height: 28px;
    fill: url(#gold-grad);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .08));
}

/* gold gradient via CSS paint */
.star {
    fill: #f2cb57
}

.star:nth-child(odd) {
    fill: #e9c146
}



/* author row */
.tst__author {
    display: flex;
    align-items: center;
    gap: 14px;
    /* margin-top: clamp(8px, 1.5vw, 16px); */
    margin-top: 40px;
}

.tst__avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.tst__name {
    color: #1D0833;
    font-size: 22.237px;
    font-style: normal;
    font-weight: 400;
    line-height: 37.062px;
    /* 166.667% */
    letter-spacing: 0.445px;
}

.tst__role {
    color: #6b6a78;
    font-weight: 500;
    font-size: clamp(13px, 1.2vw, 16px)
}

/* pagination */
.tst .swiper-pagination {
    text-align: left;
    padding-left: clamp(20px, 6vw, 56px);
}

.tst .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d2d0dc;
    opacity: 1;
    margin: 0 6px !important;
}

.tst .swiper-pagination-bullet-active {
    background: #1a1530
}

.wk-case .swiper-button-next:after,
.wk-case .swiper-button-prev:after,
.stories .swiper-button-next:after,
.stories .swiper-button-prev:after {
    display: none;
}

 


.stories div#tstSwiper {
    position: unset;
}

.qa_stories .wk_flex.wk_container {
    align-items: start;
}

.stories button.swiper-button-prev,
.stories button.swiper-button-next {
    top: 100%;
    border: 1px solid #0000003b;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: no-repeat;
    transition: .5s;
}

.stories button.swiper-button-prev:hover,
.stories button.swiper-button-next:hover {
    background: #DEB019;
}

.stories button.swiper-button-next {
    left: 80px;
}

/*  */


/* Logo Slider start  */

/* section look */
.logo-strip {
    background: #fff;
    padding: var(--spading)
}

/* continuous linear motion */
.logo-strip .swiper-wrapper {
    align-items: center;
    transition-timing-function: linear !important;
}

/* each slide width (so slidesPerView:'auto' isn’t needed) */
.logo-strip .swiper-slide {
    width: clamp(180px, 18vw, 280px);
}

/* card style like your SS */
.logo-card {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    box-shadow: 0 1px 0 #ffffff inset;
    padding: 18px 22px;
}

/* logos */
.logo-card img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    transition: .5s;
}

/* hover to color */
.logo-card:hover img {

    transform: scale(1.02);
}


/* contact form section */


/* ===== Section background ===== */
.contact-hero {
    background-color: #caa73a;
    background-image: url(../img/contactbg.webp);
    padding: var(--spading);
    height: 1050px;
    display: flex;
    background-size: cover;
}

.wk_white {
    color: #fff;
}


/* ===== Left content ===== */

.contact-title {
    margin: 0 0 10px 0;
    font: 800 clamp(30px, 5vw, 54px)/1.04 "DM Sans", system-ui;
}

.contact-copy {
    margin: 0 0 22px 0;
    max-width: 48ch;
    font: 500 clamp(14px, 1.25vw, 18px)/1.65 "DM Sans", system-ui;
    opacity: .92;
}

/* Map card with gold glow */
.map-card {
    /* margin-top: clamp(10px,1.5vw,16px); */
    width: min(620px, 95%);
    /* background: linear-gradient(180deg, rgba(242,203,87,.2) 0%, rgba(242,203,87,.08) 70%, rgba(0,0,0,0) 100%); */
    border-radius: 18px;
    /* border: 1px solid rgba(255,255,255,.25); */
    box-shadow: 0 15px 40px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
    overflow: hidden;
    /* backdrop-filter: blur(2px); */

    background-image: url(../img/map.jpg);
    background-size: cover;
}

.map-embed {
    position: relative;
    height: 240px;
}

/* .map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: saturate(.95) contrast(.98);
} */

.map-info {
    padding: 18px 20px 22px;
    color: #111;
    /* background: linear-gradient(180deg, #f2cb57, #caa73a); */
}

.map-info h3 {
    margin: 0 0 6px;
 font-weight: 400;
 font-size: 40px;
}

.map-info p {
    margin: 0;
    font-size: 20px;
}

/* ===== Right / Glass Form ===== */
.contact-right {
    display: flex;
    justify-content: flex-end
}

.glass-form {
    width: min(640px, 100%);
  /* background: linear-gradient(180deg, rgba(248, 248, 248, 0.95) 0%, rgba(255, 255, 255, 0.95) 51.77%, rgba(248, 248, 248, 0.95) 100%); */

    /* background: #ffffffa6;
    border: 1px solid rgba(255, 255, 255, .6);
    backdrop-filter: blur(17px); */

    background: rgba(255, 255, 255, 0.8);
  border: 3px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(17px);

    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
    color: #141414;
    padding: 50px 40px;
    display: flex;  
    flex-direction: column;
    gap: 10px;
    
}

.form-title {
    margin: 0 0 18px;
    color: #2b2b2b;
    font: 800 clamp(22px, 2.6vw, 30px)/1.1 "DM Sans", system-ui;
}

/* inputs */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.field-row.single {
    grid-template-columns: 1fr;
}

 
.glass-form input, .glass-form textarea {
    width: 100%;
    /* border: 1px solid #e7e7e7; */
    border: 1px solid #d9d9d9;
    border-radius: 30px;
    background: transparent;
    padding: 16px 16px;
    /* color: #2b2b2b; */
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    color: #7E7E81;
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

.glass-form textarea {
    resize: vertical;
        border-radius: 16px !important;
}
 

.glass-form input::placeholder,
.glass-form textarea::placeholder {
    font-weight: 400;
    color: #7E7E81;
    font-family: "Inter", sans-serif;
}

.glass-form input:focus,
.glass-form textarea:focus {
    border-color: #caa73a;
    box-shadow: 0 0 0 3px rgba(202, 167, 58, .2);
}


/* submit row */
.submit-row {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.gold-btn {
    height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, #FFE89C 0%, #DEB019 52%, #FFDA60 100%), rgba(0, 0, 0, 0.08);
    color: #1a1200;
    font: 800 16px/54px "DM Sans", system-ui;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 28px rgba(202, 167, 58, .35), inset 0 1px 0 #fff6;
}

.gold-btn i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: inline-block
}

.gold-btn span {
    font-weight: 800
}

.mail-hint {
    color: #5b5b5b;
    font: 700 13px/1 "DM Sans", system-ui;
    text-align: right;
}

.mail-hint a {
    color: #1a1200;
    text-decoration: none
}

.mail-hint a:hover {
    text-decoration: underline
}

/* stack form fields for small screens */
@media (max-width: 680px) {
    .field-row {
        grid-template-columns: 1fr
    }

    .contact-right {
        justify-content: stretch
    }
}




/* chips */
/* group + title */
.svc-select {
    border: 0;
    padding: 0;
    margin: 0;

}

.svc-title {
    font: 800 20px/1.2 "DM Sans", system-ui;
    color: #111;
    margin: 0 0 14px
}

/* two-column grid like the screenshot */
.svc-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
 

/* hide checkbox accessibly */
.svc-item {
    position: relative
}

.svc-input {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
}

/* button look */
.svc-btn {
    display: flex;
    align-items: center;

    padding: 12px 22px;
    border-radius: 999px;
    /* background: #fff; */
    color: #5c5c5c;
    /* border: 1px solid #e7e7e7; */
    border: 1px solid #c7c7c7;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
        color: #7E7E81;
    font-family: "Inter", sans-serif;
}

.svc-btn:hover {
    border-color: #d9d9d9;
    background: #caa73a;
    color: #000;
}

/* focus ring when tabbing onto the checkbox */
.svc-input:focus-visible+.svc-btn {
    box-shadow: 0 0 0 3px rgba(202, 167, 58, .25);
    border-color: #caa73a;
}

/* selected pill (gold) */
.svc-input:checked+.svc-btn {
    color: #1a1200;
    border-color: transparent;
    background: linear-gradient(180deg, #f2cb57, #caa73a);
    box-shadow: 0 10px 22px rgba(202, 167, 58, .3), inset 0 1px 0 #fff6;
}

.qa_contact-hero .wk_flex {
    gap: 16px;
}

.qa_contact-hero .cases__title {
    font-weight: 600;
    margin-bottom: 20px;
}
.qa_contact-hero .primary-pera {
    max-width: 760px;
    margin-bottom: 40px;
}
.qa_contact-hero .glass-form{
    margin: 0 auto;
}
.qa_contact-hero .map-card {
    max-width: 768px;
    width: auto;
}
.qa_contact-hero .map-info p {
    max-width: 540px;
}

.qa_contact-hero .form-title{
    font-weight: 400;
}

/* footer */
/* ===== Footer ===== */
:root {
    --gold: #f2cb57;
    --gold-d: #caa73a;
}

footer.site-footer {
    background-color: #000;
    background-image: url(../img/footerbg.jpg);
    background-size: cover;
    /* padding: var(--spading);
     */
  
}



/* top grid */


/* brand/intro */

.ft-intro {
    margin: 16px 0 0;
    max-width: 48ch;
    color: #cfcfcf;
    /* font-weight: 500; */
    line-height: 1.65;
}

/* columns */
.ft-title {
    margin: 8px 0 16px;
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 28px);
    color: #fff;
}

.ft-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ft-list li {
    margin: 12px 0;
}

.ft-list a {
    color: #cfcfcfb9;
    text-decoration: none;
    /* font-weight: 600; */
    transition: color .2s ease, text-shadow .2s ease;
}

.ft-list a:hover {
    color: #fff;
    text-shadow: 0 0 1px #fff2;
}

/* bottom bar */

.ft-copy {
    color: #C9A028;
    /* font-weight: 700; */
}

.ft-legal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-wrap: wrap
}

.ft-legal-links a {
    color: #a7a7a7;
    /* font-weight: 600; */
    text-decoration: none;
    margin-right: 16px;
}

.ft-legal-links a:hover {
    color: #fff
}

/* socials */
.ft-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-follow {
    color: #dcdcdc;
    font-weight: 800;
    margin-right: 6px
}

.soc {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #f1f1f1;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.soc:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, var(--gold), var(--gold-d));
    color: #fff;
    border-color: transparent;
}

/* spacing tweak for brand col */
.ft-brand {
    padding-right: clamp(0px, 3vw, 30px)
}

footer.site-footer .wk_flex.wk_container.wk_pading {
    align-items: start;
}

.qa_ze_footer  .ft-list li a {
    font-size: 20px;
}

.qa_ze_footer .ft-social svg {
    width: 25px;
    height: 25px;
}

.qa_ze_footer  .ft-legal-links a {
    color: #fff;
}
.qa_ze_footer  .ft-copy,
.qa_ze_footer  .ft-copy b{
    color: #C9A028;
}



 
/* === ZF Pill  border animation */

/* pill: dropdowns must escape, so keep visible */
.zf-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 999px;
  background: linear-gradient(180deg,#1a1a1aee,#0f0f0fe6);
  border: 1px solid #333;
  overflow: visible; /* keep menus visible */
  box-shadow:
    inset 0 1px 0 #ffffff22,
    0 12px 30px #00000066,
    0 0 12px rgba(242,203,87,.18);
  color:#f4f4f4;
  text-decoration:none;
  z-index: 10;
}
.zf-pill:hover{ color:#fff; }

/* clip layer: traps the animated glow inside rounded shape */
.zf-pill .zf-clip{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;          /* the key: only this layer clips */
  pointer-events: none;
  z-index: 0;                /* behind nav text */
}

/* keep nav content above the clip layer */
.zf-pill > :not(.zf-clip){
  position: relative;
  z-index: 1;
}

/* moving glow lives on the clip layer */
.zf-pill .zf-clip::after,
.zf-pill .zf-clip::before{
  content:"";
  position:absolute; inset:0;
  width:180px; height:6px;
  border-radius:999px;
  background: radial-gradient(180px 50px at center, rgb(255 191 0), transparent 70%);  
     mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(242,203,87,.55)); /* safe now — clipped */
  transform: translate(-50%, -50%);
  offset-path: inset(0 round 999px);
  offset-rotate: auto;
  offset-distance: 0%;
  animation: pill-run 10s linear infinite;
}





.zf-pill .zf-clip::before{ animation-delay:-5s; }

@keyframes pill-run { to { offset-distance: 100%; } }

/* fallback if motion-path unsupported */
@supports not (offset-path: inset(0 round 10px)) {
  .zf-pill .zf-clip::after,
  .zf-pill .zf-clip::before{
    inset:-2px;
    transform:none;
    background: radial-gradient(180px 10px at 50% 0%, rgba(242,203,87,.9), transparent 70%);
    animation: slide-glow 10s ease-in-out infinite;
  }
  .zf-pill .zf-clip::before{
    background: radial-gradient(180px 10px at 50% 100%, rgba(242,203,87,.9), transparent 70%);
    animation-delay:-5s;
  }
  @keyframes slide-glow{
    0%   { transform: translateX(-40%); }
    50%  { transform: translateX(40%); }
    100% { transform: translateX(-40%); }
  }
}

/* dropdown on top */
.has-sub{ position: relative; }
.has-sub .zf-sub{
  position: absolute;
  z-index: 50;
}



/* header new btn css */
a
{
    color: #1B1B1B;
}
.btn-primary
{
    display: inline-block;
    background: var(--primaryBtnBgColor);
    color: #000;
    border-radius:  30px;
    
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding: 13px 25px 13px 35px;
    
    overflow: clip;

    border:1px solid #FFDA60;


    &::after
    {
        transition: all .7s;
        content:'';
        position: absolute;
        width: 8px;
        height: 8px;
        left:20px;
        top: 22px;
        border-radius: 100%;
        background-color: white;
        

    }

    div
    {
        transition: all .7s;
        color: #000 !important;
        z-index: 2;
        position: relative;
    }


    &:hover
    {
        border:1px solid #888;
        &::after
        {
            width: 500px;
            height: 500px;
            left: -25%;
            top: -250px;
        }

        & div
        {
            transform: translateX(-13px);
        }
       
      
           
      

    
    }
   
    &.arrow
    {
        padding: 13px 50px 13px 35px;
    }

    &.arrow::before
    {
        content: '';
        transition: all .5s ease-in-out;
        position: absolute;
        width: 12px; 
        height: 12px;
        right: 25px;
        /* top: 18px; */
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.38348 10.6164L10.6161 1.38379' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M1.38348 1.38379L10.6161 1.38379V10.6164' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    }


    &.partner
    {
        background: #fff;
        padding: 13px 25px 13px 55px;
        border: 1px solid transparent;
        box-shadow: 0px 1.68px 22.65px 0px #00000040;

        &:after
        {
            background-color: #000;
            width: 36px;
            height: 36px;
            top: 6px;
            left: 6px;
        }

        &:before
        {
            content: "";
            position: absolute;
            width: 21px;
            height: 20px;
            left: 13px;
            top: 14px;
            z-index: 1;
            background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 27 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4287 17.8131V21.9124H12.5262V17.8131H18.3579C19.4068 17.8131 20.3262 17.3852 21.0115 16.6996C21.6968 16.014 22.1245 15.0942 22.1245 14.0448V7.87942C22.1245 6.83005 21.6968 5.91022 21.0115 5.2246C20.3262 4.53898 19.4068 4.11112 18.3579 4.11112H12.1953C11.1464 4.11112 10.227 4.53898 9.54168 5.2246C8.8459 5.91022 8.4287 6.83005 8.4287 7.87942V13.7138H0.232422V17.8131H8.4287ZM4.32991 13.7124V7.86765C4.32991 5.7048 5.21793 3.73559 6.61995 2.29108C8.06512 0.877963 10.0334 0 12.1953 0H18.3579C20.5197 0 22.4881 0.88843 23.9319 2.29108C25.3444 3.73559 26.2324 5.7061 26.2324 7.86765V14.033C26.2324 16.1959 25.3444 18.1651 23.9424 19.6096C22.4985 21.0227 20.5289 21.9007 18.3683 21.9007H12.5262V26H8.4287V21.9007H4.33121V13.7111L4.32991 13.7124ZM16.5282 8.18952H14.0354C13.6392 8.18952 13.2547 8.36093 12.9865 8.65009C12.687 8.90655 12.5262 9.303 12.5262 9.69946V13.7033H16.5282C16.9245 13.7033 17.309 13.5319 17.5771 13.2427C17.8766 12.9863 18.0375 12.5898 18.0375 12.1933V9.69946C18.0375 9.303 17.8661 8.91832 17.5771 8.65009C17.3208 8.36093 16.9245 8.18952 16.5282 8.18952Z' fill='url(%23paint0_linear_873_9117)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_873_9117' x1='3.98464' y1='24.4194' x2='23.0344' y2='1.72778' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2364F1FA'/%3E%3Cstop offset='1' stop-color='%232F59D1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");

        }

        &:hover
        {
            &:after
            {
                width: 400px;
                height: 400px;
                left: -200px;
                top: -200px;
               

            }

            div
            {
              
                color: #fff !important;
            }

            
        }


    }




}
/* header new btn css */


.col2-img {
    margin: 15px 0px;
}
.col2-img:last-child {
    margin-bottom: 0;
}

.pluto_logo_img {
    height: 949px;
    object-fit: cover;
}

.pluto_img {
    height: 460px;
    object-fit: cover;
}