/* inner header start */
.inner-case-study .wk_logo svg path[fill="white"] {
  fill: var(--color-deep);
}

.inner-case-study .zf-pill {
  background: none;
  box-shadow: none;
  border: 1px solid #8f8f8f4a;
}

.inner-case-study .zf-rail a {
  color: var(--color-ink);
}

.inner-case-study .zf-lang {
  background-color: #000;
}
.inner-case-study .has-sub .zf-sub {
  background: #ffffff;
}

/* inner header end */

/* top info section start */
.wk_container.wk_pading.top-info-con {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-img img,
.col2-img img,
.info-img.zoom-img {
  width: 100%;
  border-radius: 16px;
  transition: 0.8s;
  overflow: hidden;
}

.top-info-section {
  background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/top-info-bg.webp");
  background-size: auto;
  background-repeat: no-repeat;
  padding-bottom: 0;
  background-position: top right;
}

.info-img.zoom-img:hover img{
  transform: scale(1.1);
}

/* strategy  Sec start */
.strategy {
  background: var(--color-surface-soft);
  position: relative;
}

.strategy-con {
  align-items: start;
  gap: 50px;
}
.wk-col.strategy-col {
    width: 70%;
    position: sticky;
    top: 50px;
}   

.strategy-col-img {
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

.strategy-col-img img {
  border-radius: 16px;
  width: 100%;
  transition: 0.8s;
}
.strategy {
    background: var(--color-surface-soft);
    position: relative;
    padding: 80px 0;
}

/* strategy  Sec End */

/* The Work Solution Start  */

.wk_col.the_work-col1 {
  background: rgb(254, 249, 228);
  border-radius: 16px;
  padding: 50px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.the_work-col1 p {
    margin: 0;
}
.wk_container.wk_flex.work-color-con {
  gap: 50px;
  align-items: stretch;
  color: var(--color-ink);
  gap: 30px;
}
.work-color-con img {
  max-width: 100%;
}
p.f-txt {
  font-size: 30px;
  overflow-wrap: anywhere;
}
.wk_flex.work_flow {
  padding: 30px;
  align-items: stretch;
  gap: 30px;
  background: var(--color-surface-alt);
  margin: 60px auto;
  border-radius: 20px;
}
.wk_flex.work_flow img {
  width: 100%;
  border-radius: 20px;
}
.wk_col.col2img {
  width: 39.5%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 30px;
}
.imp_sec {
  background: #1f152a;
  padding-bottom: 0 !important;
}

/* The Work Solution End  */

/* impact sec start  */

.wk-site-btn {
  width: max-content;
}

.live-site-con {
  background-image: url(https://www.zafrelodesign.ae/assets/inner-case-img/livebg.webp);
  border-radius: 20px;
  margin: 60px 0;
  background-size: cover;
  position: relative;
  text-align: center;
  /*padding-top: 140px;*/
}
.live-site-con img {
  width: 100%;
  /* opacity: 0; */
}
p.live-label {
  color: var(--color-ink);
  max-width: fit-content;
  margin: 30px auto;
  padding: 10px 30px !important;
  border-radius: 30px;
  border: 1px solid #fff;
  backdrop-filter: blur(10px);
  margin-top: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0px -1px 20px -10px #00000033;
}
/* iframe#sites {
  position: absolute;
  height: 59vh;
  width: 48%;
  margin: auto;
  left: 7px;
  border-radius: 4px;
  right: 0;
  top: 150px;
} */
iframe#sites {
  position: absolute;
  height: 55.4%;
  width: 48.1%;
  margin: auto;
  left: 7px;
  border-radius: 4px;
  right: 0;
  top: 17.8%;
  border-radius: 8px 8px 0px 0px;
}
.laptop_screen {
  position: absolute;
  height: 452px;
  width: 695px;
  margin: auto;
  left: 7px;
  border-radius: 4px;
  right: 0;
  top: 143px;
  border-radius: 8px 8px 0px 0px;
}

::selection {background: red; color: #fff; text-shadow: none; }
::-webkit-scrollbar {width: 0px; background-color: red; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: none; }
::-webkit-scrollbar-track-piece {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #ddd; }
::-webkit-scrollbar-thumb:vertical {border-radius: 10px; background-color: red; }


/* case slider */
section.wk-case {
  background: var(--color-surface-alt);
  overflow: hidden;
}
.wk-case .swiper-button-next img,
.wk-case .swiper-button-prev img {
  width: 13px;
}
.wk-case .swiper-button-next,
.wk-case .swiper-button-prev {
  border: 1px solid #0000003b;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: no-repeat;
  transition: 0.5s;
  top: 191px;
}
.wk-case button.swiper-button-prev {
  right: 120px !important;
  left: auto;
}
.wk-case button.swiper-button-next {
    right: 50px;
}
.wk-case-slide .swiper-wrapper {
    padding-left: 185px;
}

section.wk-case .wk_container {
    margin-right: 0;
    margin-left: 50px;
    max-width: 100%;
}
/* inner contact cta  */
/* No background-image here on purpose. All five case-study pages now set their
   own CTA artwork inline (ready-to-transform.jpg), which lets zf_optimize_html()
   rewrite the url() to the CDN in production while it still loads from disk
   locally — a hardcoded CDN url() in a stylesheet cannot do that.
   What used to sit here pointed at .../uae-image.png, and the R2 object under
   that name is still the OLD Dubai Frame photo even though the local file at
   that path is not. So this one class was silently repainting the very image
   the pages were trying to move away from. Sizing/colour stay shared. */
.inner-contact-cta {
  background-size: auto 90%;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-color: var(--color-surface-soft);
  box-shadow: 0px -15px 35px 0px var(--color-brand-15);
}

/* Below 575px responsive.css@v33.css:479 forces `background-size: cover
   !important`, which on a portrait photo blows the artwork up until it sits
   behind the heading and the copy becomes unreadable. Every other CTA on the
   site drops its artwork on small screens for the same reason (see
   am_responsive.css@v1.css:516 for .cta-contact), so do the same here.
   !important and the extra `section` are both needed to outrank that rule. */
@media (max-width: 575px) {
  section.inner-contact-cta {
    background-image: none !important;
  }
}
section.inner-contact-cta .primary-pera {
    /*padding-right: 30%;*/
}
.swiper.wk-case-slide.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
  position: unset;
}

.cta_col {
  background: linear-gradient(180deg, var(--color-deep) 0%, #0d4a63 55%, var(--color-brand) 100%);
  border-radius: 20px;
  height: 450px;
  gap:0;
}
.inner-contact-cta .wk_flex {
  gap: 50px;
}
.cta_col p:nth-child(1) {
    margin-bottom: 0;
}
.cta_col a {
    margin: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}
.cta_col img {
  width: 100%;
}
.cta_col p {
  width: 70%;
  margin: auto;
}
.cta_col p {
  text-align: center;
  font-size: 25px;
}

/* ============================ app inner Case start here */

.peralax {
  width: 100%;
  background: #ffffff;
  position: relative;
}
.app-inner-case .wk_container.wk_pading.top-info-con {
  padding-bottom: 0;
}
.app_main_img {
  width: 97%;
  margin-top: -8%;
  position: sticky;
  top: 0;
}
ul.wk_chips {
  list-style-type: none;
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 505px;
  gap: 10px;
}
ul.wk_chips li {
  padding: 10px 30px;
  background: var(--color-brand-15);
  border-radius: 30px;
  color: var(--color-ink);
  font-weight: bold;
  transition: 0.5s;
}
ul.wk_chips li:hover {
  background: var(--color-brand-30);
}
.info-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.info-item {
  text-align: left;
  padding: 0 20px;
  border-left: 1px solid var(--color-line);
  font-size: 20px;
}

.info-item:first-child {
  border-left: none;
}

.info-item span {
  display: block;

  letter-spacing: 1px;
  color: var(--color-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.info-item strong {
  color: var(--color-ink);
}
section.strategy-app2 {
  background: var(--color-surface-soft);
}
.hh3 {
  display: block;
  font-size: 40px;
  color: var(--fColor);
}
ul.wk_app_ul {
  padding-left: 20px;
}
ul.wk_app_ul li {
  color: var(--fColor);
  font-size: var(--psize);
}

.wk_container.app-img-cont {
  display: flex;
  gap: 20px;
  padding-top: 30px;
}

.wk_container.app-img-cont img {
  width: 100%;
}

/*App work section start   */

.user-sec {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center 15px !important;
  position: sticky;
  top: 0;
  background-color: #fff !important;
}

img.font-img {
  max-width: fit-content;
}
.the_color {
  background: var(--color-surface-soft);
}

.wk_col.the_work-col1.the-color-col {
  background: #fff;
}
.full_img {
  max-width: 100%;
}

/* complex sec start */
.reward-card-con {
  gap: 20px;
  display: flex;
  flex-wrap: wrap;
}
/* Card */
.feature-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 32%;
}

/* Icon circle */
.icon-wrap {
  /* width: 40px;
    height: 40px; */
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-brand-08); /* soft trophy glow */
  border: 1px solid var(--color-brand-30);
  flex: 0 0 40px;
}

/* Text */
.text-block {
  line-height: 1.25;
}
.title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 4px 0;
}
.subtitle {
  font-size: 14px;
  color: var(--color-ink);
  margin: 0;
}

section.ful_height_img {
  height: 100vh;
  background-attachment: fixed !important;
  background-size: cover !important;
}

.app_imp {
  text-align: center;
}
.app_imp .zf-cta.wk-site-btn,
.app_imp .cases__title.wk_white {
  margin: auto;
}

.imp_sec .cases__title img {
    filter: brightness(0) invert(1);
}
.inner-contact-cta.wk_pading .wk-col {
    width: 40%;
}



.cta_col img {
    width: 70%;
}

.veracity_page .primary-title {
    font-size: 48px;
}

section.stickySection {
    margin-top: -60px;
}
.veracity_page .ve_secondary_title {
    font-size: 45px;
}

.threeD_animated .ve_work_contentBox {
    bottom: 0px;
}
.bold_new .ve_work_contentBox {
    bottom: 200px;
}
.ve-work-img-3-before {
    width: 1130px !important;
    top: -210px;
    right: -250px;
    height: 170%;
}

.vc_work .wk_container.wk_flex.work-color-con:before {
    content: "";
    width: 81px;
    position: absolute;
    height: 100%;
    background-color: #fff;
    right: -48px;
    top: 0;
    opacity: 0;
}

.veracity_page .imp_sec p.primary-pera.wk_white {
    padding-right: 40%;
}

/*.veracity_page .live-site-con {
    background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/veracity-tablet-bg.png");
}
*/


section.the_work .ve_sub_title {
    margin: 7px 0px;
    font-size: 21px;
    font-weight: 600 !important;
    text-transform: uppercase;
}
.ve_work-video {
    background-color: #f3f3f3;
    padding: 0px 0px;
    border-radius: 20px;
}
section.the_work .ve_work_contentBox .primary-pera {
    padding-right: 23%;
}



img.vc_banner_img {position: absolute; right: 0; left: 15%; width: 63%; margin: auto; bottom: 5px; }
img.vc_banner_bg {border-radius: 40px; margin-top: 70px; }
.ve_top_banner_img {padding-bottom: 0; }



/***********KLENSA CASE CSS*/
section.strategy-app {
    padding-top: 125px;
}
.app-inner-case .primary-title {
    font-size: 3.646vw;
}

section.app-work-sec .hh3 {
    font-weight: 500;
}
section.app-work-sec .hh3 {
    font-weight: 500;
}
ul.wk_app_ul li {
    margin-bottom: 10px;
}
section.app-work-sec .user-sec {
    padding: 50px 0px;
}
.crew_screen {
    position: relative;
    top: 100px;
}
.justify-content-center {
    justify-content: center;
}
section.imp_sec p {
    padding: 0 20% 0% 0%;
}
.kl-img img {
    width: 100%;
}
.full_img {
    max-width: 100%;
    width: 100%;
} 
section.app-work-sec .cases__title , section.the_work .cases__title , section.complex .cases__title{
    margin-bottom: 20px;
}
section.complex .primary-title {
    margin-bottom: 30px;
}



/***********KLENSA CASE CSS*/

/***********GULF EVENT CONNECTION CSS*/
.gec_pin_element img.ve_banner_img1 {
    top: -20px;
}
.gec_pin_element img.ve_banner_img2 {
    bottom: 40px;
    top: unset;
    right: 130px;
    padding: 17px;
    max-width: 117px;
}
.gec_approch .strategy:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
    height: 760px;
    background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/approch-bg.png");
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}
.col_gap_50px{
  column-gap: 50px;
}
section.solutions {
    background-color: #EBFAFF;
    /*padding: 50px 0 80px;*/
    position: relative;
    background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/solutions-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0;
}
section.solutions img.heading_img {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    padding: 30px 30px;
}

section.solutions .cases__title {
    margin-bottom: 50px;
    margin-top: 100px;
}
.solution_clm {
    background-color: #ffffff9c;
    padding: 25px;
    border-radius: 8px;

}
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6, .light a, .light p, .light i, .light span, .light li, .light {color: #fff; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark a, .dark p, .dark i, .dark span, .dark, .black {color: var(--color-ink);}
.heading40px {
    font-size: 40px;
    font-weight: 100;
}
section.solutions {
    overflow: hidden;
}

img.get_approch_img {
    width: 100%;
}

.tag_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag_wrap .tag {
    background-color: #F2F5F6;
    display: inline-block;
    padding: 10px 12px;
    border-radius: 7px;
    border: 1px solid #fff;
}

.solution_clm ul {
    margin: 0;
    padding-left: 22px;
}


.solution_clm ul li {
    margin: 12px 0px;
}
section.the_work {
    padding-top: 100px;
    background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/636-bg.png");
    background-repeat: no-repeat;
    background-position: right -10px;
    background-size: 200px;
}
section.get_work .cases__title {
    margin-bottom: 50px;
}
section.solutions .wk_container:nth-child(4) .solution_clm {
    margin-top: 29px;
}
.teck_clm {
    padding: 50px 20px;
    background-size: 110% 110%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    /*height: 100%;*/
}

section.teck_stack {
    background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/tech-stack-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    /*background-position: center;*/
    text-align: center;
    position: relative;
    padding:80px 0px; 
}
section.teck_stack .heading30px {
    margin-top: 0;
}
.tech_icon {
    background-color: #fff;
    padding: 20px;
    border-radius: 25px;
    width: 100px;
    height: 100px;
    object-fit: contain;
    object-position: center;
    box-shadow: -5px 0px 14px 0px #0000000d;
    margin: 0 auto 7px;
}
.heading30px {font-size: 30px; font-weight: 500; }

.teck_stack_img {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    margin:auto;
    width: 100%;
}
.stack_img_wrap {
    display: inline-block;
}
section.teck_stack .col_4 {
    margin-bottom: 40px;
}

.impact_clm1 {
    width: 35%;
}
.impact_clm2 {
    width: 65%;
    text-align: end;
}

.impact_img {
    position: relative;
    left: 70px;
    width: 100%;
}
section.strategy {
    /*overflow: hidden;*/
}

section.the_impect {
    overflow: hidden;
    padding: 100px 0;
    background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/the-impect-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}
section.the_impect .cases__title {
    margin-bottom: 50px;
}
.points .heading30px {
    margin: 0;
}

.points {
    margin-top: 30px;
    position: relative;
    padding-left: 30px;
}

.points:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    background-color: #000;
    border-radius: 50%;
    top: 15px;
    left: 0;
}
section.conclusion {
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}
section.conclusion .cases__title {
    filter: brightness(0) invert(1);
    margin-top: 50px;
}
.gec_tablet_bg{
	background-image: url("https://cdn.360kreations.us/casestudies/assets/inner-case-img/gec-tab-bg.png");
    padding-top: 140px;
}
body.gulf-event-connect_page .primary-title {
    font-size: 55px;
}
body.gulf-event-connect_page .ve_topInfo_col1 {
    gap: 130px;
}
section.conclusion .heading30px {
    font-weight: 100;
}
.live-site-con .btn-primary {
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.owl-dots {
  text-align: center;
  /*margin-top: 15px;*/
}

.owl-dot {
  display: inline-block;
  margin: 0 1px;
}

.owl-dot span {
  width: 7px;
  height: 7px;
  display: block;
  background: #d8d8d8;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.owl-dot.active span {
  background: var(--color-brand);
  /*transform: scale(1.1);*/
}
section.teck_stack_.owl-dots {
    margin-top: -10px;
}
.zf-burger {gap: 8px; justify-content: end; padding: 0; width: auto !important; background-color: transparent; color: #000; }


.case__video {object-position: top; }
/***********GULF EVENT CONNECTION CSS*/




/**********CUSTOM BOOTSTRAP*/
.col_4 {width: 33%; padding: 15px; } 
.my_row {display: flex; flex-wrap: wrap; }

.mt_100px{margin-top: 100px;}
.mt_90px{margin-top: 90px;}
.mt_80px{margin-top: 80px;}
.mt_70px{margin-top: 70px;}
.mt_60px{margin-top: 60px;}
.mt_50px{margin-top: 50px;}
.mt_40px{margin-top: 40px;}
.mt_30px{margin-top: 30px;}
.mt_20px{margin-top: 20px;}
.mt_10px{margin-top: 10px;}

.mb_100px{margin-bottom: 100px;}
.mb_90px{margin-bottom: 90px;}
.mb_80px{margin-bottom: 80px;}
.mb_70px{margin-bottom: 70px;}
.mb_60px{margin-bottom: 60px;}
.mb_50px{margin-bottom: 50px;}
.mb_40px{margin-bottom: 40px;}
.mb_30px{margin-bottom: 30px;}
.mb_20px{margin-bottom: 20px;}
.mb_10px{margin-bottom: 10px;}

.pt_100px{padding-top: 100px;}
.pt_90px{padding-top: 90px;}
.pt_80px{padding-top: 80px;}
.pt_70px{padding-top: 70px;}
.pt_60px{padding-top: 60px;}
.pt_50px{padding-top: 50px;}
.pt_40px{padding-top: 40px;}
.pt_30px{padding-top: 30px;}
.pt_20px{padding-top: 20px;}
.pt_10px{padding-top: 10px;}

.pb_100px{padding-bottom: 100px;}
.pb_90px{padding-bottom: 90px;}
.pb_80px{padding-bottom: 80px;}
.pb_70px{padding-bottom: 70px;}
.pb_60px{padding-bottom: 60px;}
.pb_50px{padding-bottom: 50px;}
.pb_40px{padding-bottom: 40px;}
.pb_30px{padding-bottom: 30px;}
.pb_20px{padding-bottom: 20px;}
.pb_10px{padding-bottom: 10px;}


/**********CUSTOM BOOTSTRAP*/