@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");


/*  LIFE AT WALKWEL STARTS HERE */

/* Video Background banner */

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

section.glimpse-wrapper {
  margin: 140px 0px 40px 0px;
}

.Walkwel-text {
  color:#2E3C91 !important ;
}

.glimpse-text {
  /* A Glimpse into Our Everyday Madness 📸 */
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 42px;
/* identical to box height */
text-align: center;
color: #333333;
}

.beyond-desk {
  background-color: #111111;
  padding: 120px 0px;
  color: #ffffff;
}

.ww-header {
  font-family: 'Tiempos Headline';
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 70px;
  color: #FFFFFF;
  text-align: center;
}

.beyond-desk img {
  height: 400px;
  width: 400px;
}

.ww-heading {
  font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 36px;
text-align: center;
color: #FFFFFF;
padding-top: 40px;
}

.ww-text {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 34px;
text-align: center;
color: #FFFFFF;
opacity: 0.7;
}

.leader_future_content .Walkwel-Vibe {
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 48px;
line-height: 70px;
color: #111111;
text-align: center;
}
.Walkwel-text video{
object-position: center;
}
.video-loop-bg {
    width: 100%;
  min-height: 1200px;
  margin-top: -80px;
  position: relative;
  background: url('../images/life-new-banner.png') center/cover no-repeat;
}


.life-slider-wrapper {
  width: 100%;
  padding: 20px 0 0px 0px;
  background: #f5f5f5;
}
.life-slider-wrapper .ad_sponsor div{
  padding-bottom: 0 !important;
}
.life-slider {
  overflow: hidden;
  margin-top: -140px;
}

.life-slider-wrapper .ad_sponsor {
  display: flex;
}

.life-slider-wrapper .ad_sponsor div {
  padding: 10px;
}

.life-slider-wrapper .ad_sponsor img {
  width: 455px;
  height: 370px;
  object-fit: cover;
  border-radius: 10px;
}

section.quark-city {
  background: #CAE1F2;
}

.quark-image {margin-top: -400px;
  position: relative;
}

.video-loop-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.content-loop{
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text-bg {

  font-size: 10.42vw;
  font-family: 'Knewave', cursive;
  font-weight:400;
  color: white;
  mix-blend-mode: multiply;
  background: url('../images/Walkwel-Life.gif');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 0px 30px;
  margin: 0 !important;
}

.content-loop .welcometext {
  /* Welcome to Walkwel */
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 64px;
line-height: 80px;
/* identical to box height, or 125% */
text-align: center;
color: #111111;
}

.content-loop .welcome-subtext {
 
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 26px;
text-align: center;
color: #111111;
  }


/* LIFE AT WALKWEL ENDS HERE */
 

/* Usability Testing Starts here */

.usability .user-heading h1 {
  /* Usability Testing */
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 48px;
line-height: 59px;
text-align: center;
color: #000000;
}

.usability .user-heading p {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
text-align: center;
color: #666666;
}

.usability .task-tab {
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 42px;
text-align: center;
color: #333333;
}

/* Navigation tabs */
.tabs-section .nav-tabs {
  border: none;
}

.tabs-section .nav-tabs .nav-link {
  border: none;
  color: #333;
  font-size: 35px;
  font-weight: 300;
  padding: 0.5rem 2rem;
  margin: 0 1rem;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.tabs-section .nav-tabs .nav-link.active {
  border: none;
  opacity: 1;
  color: #333;
  border-bottom: 4px solid #2e3c91;
}

.tabs-section .nav-tabs .nav-link:hover {
  border: none;
  opacity: 0.7;
  border-bottom: 4px solid #2e3c91;

}

/* Objective cards */
.tab-content .objective-card {
  padding: 1.5rem;
  transition: transform 0.3s ease;
}

.tab-content .objective-card:hover {
  transform: translateY(-5px);
}

.tab-content .objective-card .objective-number {
  width: 48px;
  height: 48px;
  background-color: #ededed;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #2e3c91;
  font-weight: 600;
  font-size: 22px;
  font-family: 'Inter';
}

.tab-content .objective-card p {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #666666;

}

/* Header content */
header .lead {
  color: #666;
  max-width: 636px;
  margin: 0 auto;
}

/* Task section */
#assigned-task .task-form {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#taskList .task-item {
  background: white;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Findings section */
#findings .findings-chart {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Usability testing ends here */

/*     <!-- Wireframes Section starts here --> */

.wireframe{
  padding: 120px 0px;
}
.ads_sponsors div img{
	width: 450px;
	height:350px;
  padding-top:40px;
}

.wireframe .highfi-content {
padding-top: 120px;
}

section.wireframe {
  margin:120px 0px;
  background-color: #040500;
}


.wireframe .lowfi-content h2 {
  /* Low-Fidelity Wireframes */

font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 48px;
line-height: 58px;
color: #FFFFFF;
}




.wireframe .lowfi-content p {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
color: #FFFFFF;
opacity: 0.8;
}

/************************** CASE STUDY PAGE BEGINS HERE *************************************/

.card_services h3,
.success-stories h3 {
  font-weight: 400 !important;
}

.case-study-section {
  background-image: url("../images/case-bg-new.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  min-height: 800px;
}

.case-study-section {
  padding-top: 160px;
  margin-top: -80px;
}

.role-service {
  padding-top: 40px;
}

section.our-role {
  margin: 160px 0px;
}

.real-story {
  color: #ffffff;
}

.real-story h1 {
  font-size: 64px;
}
.real-story p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991px) {
  /* CASE STUDY PAGE starts HERE */

  .case-study-section {
    padding-top: 130px;
    margin-top: -60px !important;

    /* CASE STUDY PAGE ENDS HERE */
  }

}

/* MOBILE */
@media (max-width: 767px) {
  /* CASE STUDY PAGE STARTS HERE  */

  section.case-study-section.success-stories {
    padding: 120px 15px 0px 15px !important;
    margin-top: -60px !important;
  }

  .case-study-section.success-stories h1 {
    font-size: 40px !important;
    line-height: 46px;
    margin-bottom: 16px !important;
  }

  .real-story p {
    font-size: 18px !important;
    line-height: 26px;
    margin-bottom: 10px !important;
  }

  /* CASE STUDY PAGE ENDS HERE */

}


/*************** CASE STUDY PAGE ENDS HERE ************************/







/*     <!-- Wireframes Section ends here --> */

/* Personas Section start  here */

.personas-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 53px;
  background-color: #ffffff;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 160px;
}

.personas-main-container {
  border: 1px solid #EDEDED;
  border-radius: 24px;
  padding: 34px;
  margin: 40px 0px;
}

.personas-section .personas-header {
  width: 100%;
}

.personas-section .header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.personas-section .title {
  /* User Personas */
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 48px;
line-height: 58px;
text-align: center;
color: #2E3C91;
margin-bottom: 0px;
}

@media (max-width: 991px) {
  .personas-section .title {
    font-size: 40px;
  }
}

@media (max-width: 640px) {
  .personas-section .title {
    font-size: 32px;
  }
}

.personas-section .description {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #666;
  margin: 0;
  font-family:'Inter';

}

@media (max-width: 991px) {
  .personas-section .description {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .personas-section .description {
    font-size: 16px;
  }
}

.personas-section .personas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.personas-section .persona-card {
  display: flex;
  width: 100%;
  max-width: 1440px;
  border-radius: 48px 24px 24px 24px;
  border: 1px solid #ededed;
  background-color: #ffffff;
  padding: 48px;
}

@media (max-width: 991px) {
  .personas-section .persona-card {
    padding: 32px;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .personas-section .persona-card {
    padding: 24px;
  }
}

.personas-section .persona-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-direction: column;
}

@media (max-width: 991px) {
  .personas-section .persona-content {
    flex-direction: column;
    gap: 32px;
  }
}

.personas-section .persona-profile {
  display: flex;
  width: 100%;
  max-width: 596px;
  gap: 24px;
}

.personas-section .profile-image {
  width: 205px;
  height: 205px;
  border-radius: 16px;
  overflow: hidden;
}

.personas-section .profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .personas-section .profile-image {
    width: 100%;
  }
}

.personas-section .profile-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.personas-section .info-container {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.personas-section .name-section {
  display: flex;
  flex-direction: column;
}

.personas-section .persona-name {
 /* James Carter */
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 42px;
color: #111111;
margin-bottom: 0px;
}

@media (max-width: 991px) {
  .personas-section .persona-name {
    font-size: 30px;
  }
}

@media (max-width: 640px) {
  .personas-section .persona-name {
    font-size: 26px;
  }
}

.personas-section .persona-title {
/* Independent Filmmaker */
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 34px;
color: #666666;
opacity: 0.7;
  margin: 0;
}

@media (max-width: 991px) {
  .personas-section .persona-title {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .personas-section .persona-title {
    font-size: 18px;
  }
}

.personas-section .details-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 640px) {
  .personas-section .details-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.personas-section .details-labels {
  font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 40px;
color: #111111;
opacity: 0.8;

}

.personas-section .details-values {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  color: #111111;
}

.personas-section dt,
.personas-section dd {
  margin: 0;
}

@media (max-width: 640px) {
  .personas-section .details-labels,
  .personas-section .details-values {
    font-size: 16px;
  }
}


.persona-insights .insight-item {
  font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
color: #585858;
}

.persona-insights .insights-title {
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 29px;
color: #111111;
margin-bottom: 16px;

}

.details-section dt {
  font-weight: 400 !important;
}

.personas-section .persona-description {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  color: #111111;
  opacity: 0.8;
  padding-top: 20px;
}

@media (max-width: 991px) {
  .personas-section .persona-description {
    font-size: 16px;
  }
}

.personas-section .persona-insights {
  display: flex;
  flex-direction: column;
  gap: 16px;
}



/* Persona section end here */

.role-service h1 {
    padding: 24px 0px;
}

.our-role .role-service p {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 34px;
color: #666666;
}


.our-role .section-heading h2 {
    /* Our Role */
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 300;
font-size: 48px;
line-height: 58px;
text-align: center;
color: #2E3C91;
}

.role-service {
    gap: 30px;
    flex-wrap: unset;
}

.our-role .role-service h1{
font-family: 'Tiempos Headline';
font-style: normal;
font-weight: 200;
font-size: 35px;
line-height: 42px;
color: #333333;
}

.role-one{
    background-image: url("../images/one.svg");
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;

}

.role-two{
    background-image: url("../images/two.svg");
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;

}

.role-three{
    background-image: url("../images/three.svg");
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;

}

.landing-container{
    background-image: url("../images/case-bg-new.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 800px;
  }
  
  .landing-container {
    padding-top: 160px !important;
      margin-top: -80px;
  
  }

/* Main container */
.landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 20px;
  color: #fff;
}

/* Header section */
.landing-container .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 1200px;
}

.landing-container .logo {
  width: 163px;
  height: 88px;
}

.landing-container .tagline {
  color: #fff;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  max-width: 490px;
}

.landing-container .platform-icons {
  display: flex;
  align-items: center;
  gap: 56px;
}

.landing-container .platform-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-container .platform-icon {
  height: 80px;
}

.landing-container .platform-icon.wordpress {
  width: 80px;
}

.landing-container .platform-icon.shopify {
  width: 115.357px;
}

.landing-container .platform-icon.react {
  width: 89.916px;
}

/* Hero banner */
.landing-container .hero-banner {
  width: 794px;
  height: 442px;
  border-radius: 24px;
  background: url("../images/DJ.png")
    center/cover no-repeat;
}

.landing-container .comparison-section ul {
    padding-left: 0px;
}

/* Main description */
.landing-container .main-description {
  color: #111;
  text-align: center;
  font-family: "Tiempos Headline", serif;
  font-size: 48px;
  font-weight: 300;
  max-width: 1278px;
  line-height: 60px;
}

/* Comparison section */
.landing-container .comparison-section {
  display: flex;
  align-items: center;
  gap: 60px;
}

.landing-container .problem-card,
.landing-container .solution-card {
  display: flex;
  width: 690px;
  height: 388px;
  padding: 40px 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border-radius: 24px;
}

.landing-container .problem-card {
  background-color: #edf6ff;
}

.landing-container .solution-card {
  background-color: #fefded;
}

.landing-container .section-title {
  color: #333;
  font-family: "Tiempos Headline", serif;
  font-size: 35px;
  font-weight: 300;
  padding: 10px 0;
}

.landing-container .feature-list {
  list-style-type: none;
}

.landing-container .feature-item {
  color: #111;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 34px;
  margin-bottom: 10px;
}

/* Design Process Section CSS Starts here */


.design-process p {

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
text-align: center;
color: #666666;
}

 /* Main container */
 .design-process {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    max-width: 1440px;
    margin: 0 auto;
  }
  
  /* Header section */
  .process-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  
  
  .design-process .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 649px;
    width: 100%;
  }
  
  .main-title {
    color: #2e3c91;
    font-family: "Tiempos Headline", serif;
    font-size: 48px;
    font-weight: 400 !important;
    text-align: center;
  }
  
  .main-description {
    color: #666;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
  }
  
  /* Process timeline */
  .process-timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 70px;
    height: 84px;
    border: 1px solid #eaedff;
    border-radius: 24px;
    width: 100%;
    background-color: #f2f4ff;
  }
  
  .timeline-step {
    color: #2e3c91;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
  }
  
  .timeline-divider {
    width: 1px;
    height: 74px;
    background-color: #dbe0fd;
  }
  
  /* Feature cards grid */
  .feature-cards {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 34px;
    gap: 32px;
    border-radius: 24px;
    min-height: 318px;
    margin-bottom: 20px;
  }
  
  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    text-align: center;
  }
  
  .card-title {
    color: #333;
    font-family: "Tiempos Headline", serif;
    font-size: 35px;
    font-weight: 400;
  }
  
  .card-description {
    color: #666;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    opacity: 0.7;
  }
  
  /* Card background colors */
  .blue-card {
    background-color: #edf6ff;
  }
  
  .yellow-card {
    background-color: #fefded;
  }
  
  .orange-card {
    background-color: #fbf0e6;
  }
  
  .light-blue-card {
    background-color: #ebfaff;
  }
  
  .green-card {
    background-color: #f0fff5;
  }
  
  .purple-card {
    background-color: #f2f4ff;
  }
  
/* Design Process Section CSS Ends here */


/* Responsive styles */
@media (max-width: 991px) {
  .landing-container .hero-banner {
    width: 100%;
    /* height: 150px; */
  }

  .landing-container .main-description {
    font-size: 36px;
    padding: 0 20px;
  }

  .landing-container .comparison-section {
    flex-direction: column;
    gap: 30px;
  }

  .landing-container .problem-card,
  .landing-container .solution-card {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  .landing-container .tagline {
    font-size: 18px;
  }

  .landing-container .platform-icons {
    flex-direction: column;
    gap: 10px;
  }

  .landing-container .main-description {
    font-size: 28px;
  }

  .landing-container .section-title {
    font-size: 28px;
  }

  .landing-container .feature-item {
    font-size: 18px;
    line-height: 28px;
  }

  .landing-container .problem-card,
  .landing-container .solution-card {
    padding: 20px 20px;
  }
}

/*MOBILE RESPONSIVE */

/* life header css */

.main_header.life_walkwel a.navbar-brand img,
.main_header.life_walkwel ul li .nav-link  {
  filter: invert(1);
}

section.wire_framing.border-line-ui{
  position: relative;
}

section.wire_framing.border-line-ui::before {
  content: "";
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  margin: auto;
  height: 11px;
  width: 100%;
  background-image: url("../images/career-line.png");
  background-repeat: no-repeat;
  background-position: top center;
}

/* BLOCKCHAIN SERVICE START HERE */
 
.blockchain-banner {
  margin-top: -100px;
  padding: 200px 0px 0px 0px;
  background-repeat: no-repeat;
  background-size: cover;
}
 
.blockchain-banner h2 {
  font-family: "Tiempos Headline";
  font-style: normal;
  font-weight: 300;
  font-size: 64px;
  line-height: 80px;
  color: #ffffff;
  margin-bottom: 16px !important;
}
 
.blockchain-banner p {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #ffffff;
}
 
.best-in-tech {
  margin-top: 200px;
}
 
.black-ww p {
  color: #111 !important;
}
 
.block-icon {
  height: 48px;
  width: 48px;
  margin: 48px 0px 25px 0px;
}
 
.blockchain-block {
  background-image: url(../images/Blockchain-Bg.png);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 530px;
  border-radius: 24px !important;
  background-size: cover;
  box-shadow: 0px 14px 54px 20px rgba(0, 0, 0, 0.02);  padding: 30px 30px 0px 0px;
}
 
.powering-icon {
  height: 36px;
  width: 36px;
  margin-top: 6px;
}
 
.content-blockchain {
  padding-left: 15px;
}
 
.blockchain-block .block-heading {
  font-family: "Tiempos Headline";
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 58px;
  text-align: right;
  color: #2e3c91;
}
 
.block-text {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  text-align: right;
  color: #666666;
}
 
/* Power future starts here */
.future-power-sec {
padding: 30px;
background: #FFFFFF;
box-shadow: 0px 14px 54px 20px rgba(0, 0, 0, 0.02);
border-radius: 24px;
margin-bottom: 20px;
}
 
.future-power-sec .content-blockchain h3 {
font-family: 'Tiempos Headline Regular';
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 35px;
color: #111111;
opacity: 0.85;
}
 
.future-power-sec .content-blockchain p {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 28px;
 
color: #333333;
opacity: 0.7;
}
 
/* Blockchain end here */


@media (min-width: 320px) and (max-width: 767px) {
  .case-study-section,
  .landing-container {
    background-size: cover;
}
   /* Blockchain start here  */
   .future-power-sec .content-blockchain h3 {
    font-size: 22px;
    line-height: 35px;
}

  .service_banner_box h2 {
    font-size: 42px !important;
    line-height: 50px !important;
    margin-bottom: 20px !important;
}
 
.best-in-tech {
  margin-top: 0px !important;
}
 
.block-icon {
  height: 32px;
  width: 32px;
  margin-top: 0px !important;
}
 
.blockchain-block {
  min-height: 400px;
}
.blockchain-block .block-heading {
  font-size: 28px;
  line-height: 36px;
}
 
.future-power-sec {
  padding: 20px;
  margin-top: 20px;
}
 
.content-blockchain {
  padding-left: 0px !important;
}
 
.powering-icon {
  height: 30px;
  width: 30px;
  margin-bottom: 10px;
}
.future-power-sec .content-blockchain p {
  font-size: 15px;
  line-height: 22px;
}
 /* ======================================life at walkwel css========================================== */
 .main_header.life_walkwel a.navbar-brand img,
.main_header.life_walkwel ul li .nav-link  {
  filter: unset  !important;
}
section.wire_framing.border-line-ui {
  padding: 0px 10px;
}
section.wire_framing.border-line-ui::before{
  content: unset !important;
}
 .video-loop-bg{
  background-image: url(../images/life-mobile-bg.png) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  min-height: 560px;
  background: #cae1f2;
  margin: 0 !important;
 }

 .content-loop {
  top: 50%;
}
.quark-image {
  margin-top: -19px;
}
.life-slider {
  margin-top: -54px;
}
section.quark-city {
  min-height: 270px;
}
 .content-loop p{
font-size: 78.9121px;
line-height: 123px;
 }
 .content-loop .welcometext {
  font-size: 52px;
  line-height: 58px;
}
.content-loop .welcome-subtext {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 19px;
}
.Walkwel-text {
  color: #2E3C91 !important;
  height: auto !important;
  padding: 30px 10px;
}
.Walkwel-text video {
  object-position: center;
  bottom: 0 !important;
  margin: auto;
}

.leader_future_content .Walkwel-Vibe {
  font-size: 32px;
  line-height: 46px;
  margin-bottom: 30px;
}
.beyond-desk {
  padding: 50px 10px;
}
.ww-header {
  font-size: 32px;
  line-height: 38px;
}
.ww-heading {
  font-size: 28px;
  line-height: 27px;
  padding-top: 20px;
}

.ww-text {
  font-size: 16px;
  line-height: 24px;
}
section.glimpse-wrapper {
  margin: 40px 0px 40px 0px;
}
.glimpse-text {
  font-size: 32px;
  line-height: 42px;
  margin-top: 20px;
}

.life_walkwel_building.lets_build_something {
  padding: 0px 15px 50px 15px;
}



  /* ============================inner case study css================================== */

  .usability .user-heading h1{
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 0px !important;
  }
  .tabs-section .nav-tabs .nav-link {
    font-size: 22px;
}
.tab-content .objective-card{
  padding: 10px !important;
}
.tab-content .objective-card p {
  font-size: 16px;
  line-height: 25px;
  margin: 0 !important;
}
  .usability .user-heading p {
    font-size: 16px;
    line-height: 27px;
}


  /* Case Study page starts here */
  .our-role .role-service {
    flex-wrap: wrap;
    padding: 20px;
  }

  .personas-section .name-section  {
    padding-top: 20px;
  }

  .feature-card {
    padding: 30px 20px;
    min-height: 100px;
    gap: 20px;
  }

  .personas-section .details-section {
    flex-direction: row !important;
  }

  .persona-insights .insight-item {
    font-size: 16px;
    line-height: 25px;
    margin: 0px 0px 10px;
  }

  .personas-section .persona-description {
    padding-top: 0px !important;
    line-height: 26px !important;
  }
  .wireframe .highfi-content {
    padding-top: 60px;
}
.landing-container .feature-item {
  font-size: 16px !important;
  line-height: 25px !important;
}
.ads_sponsors div img {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
  .personas-section {
    margin-top: 0px !important;
    padding: 0px 10px;
  }
  .wireframe .lowfi-content p {
    font-size: 16px;
    line-height: 27px;
}
  svg.card-icon {
    height: 36px;
    width: 36px;
}
.personas-section .persona-title {
  font-size: 16px !important;
}
.personas-section .persona-name{
  line-height: 28px !important;
}
.wireframe .lowfi-content h2 {
  font-size: 32px;
  line-height: 42px;
}

section.wireframe {
  margin: 0px !important;
  padding: 40px 5px !important;
  
}

.feature-card .card-title {
  font-size: 24px;
}

.personas-main-container {
  margin: 30px 0px !important;
  padding: 20px !important;
}

.landing-container .feature-item {
  margin-bottom: 15px;
}
  .landing-container .problem-card, .landing-container .solution-card {
    gap: 10px !important;
  }


  .landing-container .platform-icon {
    height: 70px;
    width: 70px !important;
  }

  .mobile-container {
    background-image: url(../images/Bg-header.png) !important;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 400px !important;
  }

  .landing-container {
    background-image: unset;
  }

  .design-process {
    padding: 20px !important;
  }

  .design-process p {
    font-size: 16px;
    line-height: 24px;
  }

  .design-process .main-title {
    font-size: 32px;
  line-height: 40px;
  }

  section.our-role {
    margin:0px !important;
}
.our-role .section-heading h2 {
  font-size: 32px;
  line-height: 40px;

}
.our-role .role-service h1 {
  font-size: 25px;
  line-height: 32px;
}

.role-service img {
  width: 40px;
  height: 40px;
}

.our-role .role-service p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.role-service {
gap: 30px !important;
}

.role-service h1 {
  padding: 20px 0px 0px 0px !important;
}

.innovation_tab .feature-cards {
  width: unset !important;
}















}
/* Case Study ends here */

/*TABLET RESPONSIVE */

@media (min-width: 768px) and (max-width: 991px) {
   /* Blockchain start here  */
   .future-power-sec .content-blockchain h3 {
    font-size: 25px;
    line-height: 35px;
}
.Walkwel-text p {
  font-size: 35px !important;
}
  .blockchain-block {
min-height: 370px;
  }

  .future-power-sec {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .content-blockchain {
    padding-left: 10px;
}

.black-ww p {
  font-size: 33px !important;
}

.best-in-tech {
margin-top: 100px !important;
}

.best-in-tech h1 {
font-size: 36px !important;
}

.blockchain-block .block-heading {
font-size: 36px;
line-height: 34px;
}

.success-stories h1 {
font-size: 36px;
line-height: 34px;
}
   /* ======================================life at walkwel css========================================== */
   section.wire_framing.border-line-ui::before{
    content: unset !important;
  }
   .main_header.life_walkwel a.navbar-brand img,
   .main_header.life_walkwel ul li .nav-link  {
     filter: unset  !important;
   }
 .video-loop-bg{
  background-image: url(../images/life-mobile-bg.png) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  min-height: 650px;
  background: #cae1f2;
  margin: 0 !important;
 }

 .content-loop {
  top: 50%;
}
.quark-image {
  margin-top: -19px;
}
.life-slider {
  margin-top: -54px;
}
section.quark-city {
  min-height: 270px;
}
 .content-loop p{
font-size: 78.9121px;
line-height: 123px;
text-align: center;
 }
.content-loop .welcome-subtext {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 19px;
}
.Walkwel-text {
  color: #2E3C91 !important;
  height: auto !important;
  padding: 30px 10px;
}
.Walkwel-text video {
  object-position: center;
  bottom: 0 !important;
  margin: auto;
}


.beyond-desk {
  padding: 50px 10px;
}

.ww-heading {
  font-size: 28px;
  line-height: 27px;
  padding-top: 20px;
}

.ww-text {
  font-size: 16px;
  line-height: 24px;
}
section.glimpse-wrapper {
  margin: 40px 0px 40px 0px;
}
.glimpse-text {
  font-size: 32px;
  line-height: 42px;
  margin-top: 20px;
}

.life_walkwel_building.lets_build_something {
  padding: 0px 15px 50px 15px;
}
  /* ====================inner case study ============================== */
  .landing-container .main-description {
    line-height: 38px  !important;
    padding: 0 !important;
    font-size: 25px !important;
}

.landing-container .problem-card, .landing-container .solution-card {
width: 100%;
  padding: 30px;
}
section.our-role {
  margin: 40px 0px;
}
.landing-container .section-title {
  font-size: 28px;
}
.landing-container .feature-item {
  font-size: 17px;
}
.our-role .role-service h1 {
  font-size: 20px;
  line-height: 26px;
}

.our-role .role-service p {
  font-size: 16px;
  line-height: 24px;
}
.role-service {
  gap: 0px;
}
.design-process h1.main-title {
  font-size: 48px !important;
  line-height: 58px;
}

.feature-card .card-title {
  font-size: 22px;
}

.feature-card .card-description{
  font-size: 16px !important;
  line-height: 24px;
}

.feature-card {
  padding: 20px 34px;
  min-height: 303px;
  justify-content: center;
}

.personas-section {
  margin-top: 0px;
}

.personas-section .details-values,
.personas-section .details-labels {
  
  font-size: 16px;
  line-height: 40px;
}
.persona-insights .insight-item {
  font-size: 16px;
  line-height: 32px;
}
.personas-main-container .info-container {
  padding-left: 15px;
}
section.wireframe {
  margin: 0px 0px;
}
.wireframe{
  padding: 60px 0px;
}
.wireframe .highfi-content {
  padding: 60px 0px 0px 0px;
}
.ads_sponsors div img {
  width: 100%;
  height: 100%;
  /* padding-top: 0 !important; */
}

.wireframe .slick-slide {
  margin: 0px 10px;
}
.tabs-section .nav-tabs .nav-link {
  border: none;
  color: #333;
  font-size: 24px;
  font-weight: 300;
  padding: 0.5rem 2rem;
  margin: 0 1rem;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.inner_case {
  padding: 0px 0px 60px 0px;
}

}


/*SMALL DESKTOP RESPONSIVE */

@media (min-width: 992px) and (max-width: 1199px) {
    /* Blockchain start here  */
    .future-power-sec .content-blockchain h3 {
      font-size: 25px;
      line-height: 35px;
  }
  .Walkwel-text {
    height: 54vh  !important;;
  }
  .Walkwel-text p {
    font-size: 35px !important;
  }
    .black-ww p {
      font-size: 33px !important;
  }
 
  .best-in-tech {
    margin-top: 140px;
}
 
.blockchain-block .block-heading {
  font-size: 36px;
  line-height: 41px;
}
 
    /* ======================================life at walkwel css========================================== */
    .video-loop-bg{
      margin-top: -100px !important;
     }
     .beyond-desk img {
      height: 100% !important;
      width: 100% !important;
  }
  .content-loop p{
    text-align: center;
     }
  .content-loop {
    top: 43%;
}

.life-slider {
  margin-top: -54px;
}
section.quark-city {
  min-height: 270px;
}
 
.Walkwel-text video {
  object-position: center;
  bottom: 0 !important;
  margin: auto;
}


.beyond-desk {
  padding: 50px 10px;
}

.ww-heading {
  font-size: 28px;
  line-height: 27px;
  padding-top: 20px;
}

.ww-text {
  font-size: 16px;
  line-height: 24px;
}
section.glimpse-wrapper {
  margin: 40px 0px 40px 0px;
}
.glimpse-text {
  font-size: 32px;
  line-height: 42px;
  margin-top: 20px;
}

.life_walkwel_building.lets_build_something {
  padding: 0px 15px 50px 15px;
}
 /* ====================inner case study ============================== */
 .landing-container .main-description {
  line-height: 38px  !important;
  padding: 0 !important;
  font-size: 25px !important;
}

.landing-container .problem-card, .landing-container .solution-card {
width: 100%;
padding: 30px;
}
section.our-role {
margin: 40px 0px;
}
.landing-container .section-title {
font-size: 28px;
}
.landing-container .feature-item {
font-size: 17px;
}
.our-role .role-service h1 {
font-size: 24px;
line-height: 28px;
}

.our-role .role-service p {
font-size: 16px;
line-height: 24px;
}
.role-service {
gap: 0px;
}
.design-process h1.main-title {
font-size: 48px !important;
line-height: 58px;
}

.feature-card .card-title {
font-size: 22px;
}

.feature-card .card-description{
font-size: 16px !important;
line-height: 24px;
}

.feature-card {
padding: 20px 34px;
min-height: 303px;
justify-content: center;
}

.personas-section {
margin-top: 0px;
}

.personas-section .details-values,
.personas-section .details-labels {

font-size: 16px;
line-height: 40px;
}
.persona-insights .insight-item {
font-size: 16px;
line-height: 32px;
}
.personas-main-container .info-container {
padding-left: 30px;
}
section.wireframe {
margin: 0px 0px;
}
.wireframe{
padding: 60px 0px;
}
.wireframe .highfi-content {
padding: 60px 0px 0px 0px;
}
.ads_sponsors div img {
width: 100%;
height: 100%;
/* padding-top: 0 !important; */
}

.wireframe .slick-slide {
margin: 0px 10px;
}
.tabs-section .nav-tabs .nav-link {
border: none;
color: #333;
font-size: 24px;
font-weight: 300;
padding: 0.5rem 2rem;
margin: 0 1rem;
opacity: 0.3;
transition: opacity 0.3s;
}

.inner_case {
padding: 0px 0px 60px 0px;
}


}


/*LARGE DESKTOP RESPONSIVE */

@media (min-width: 1200px) and (max-width: 1499px) {
   /* Blockchain start here  */
   .black-ww p {
    font-size: 40px !important;
}
  /* =========================life at walkwel============================ */
  .content-loop p{
    text-align: center;
     }
/* ====================inner case study========================= */
.ads_sponsors div img {
  width: 100%;
  height: 100%;
  /* padding-top: 0 !important; */
  }
  .landing-container .problem-card, .landing-container .solution-card {
    width: 100%;
    height: auto !important;
}
.landing-container .main-description {
  font-size: 35px;
  line-height: 50px;
}
.landing-container .feature-item {
  font-size: 20px;
  line-height: 37px;
}
.landing-container .comparison-section{
  align-items: unset !important;
}
section.our-role {
  margin: 80px 0px;
}
.our-role .role-service h1 {
  font-size: 30px;
  line-height: 42px;
}
.personas-section {
  margin-top: 20px;
}
.personas-section .info-container {
  padding-left: 12px;
}

section.wireframe {
  margin: 40px 0px;
  background-color: #040500;
}
section.wireframe .slick-slide{
  margin: 0 10px;
}
.wireframe {
  padding: 80px 0px;
}
section.lets_build_something.inner_case {
  padding-top: 0px !important;
}
.role-service {
  gap: 0;
}
.persona-insights .insight-item {
  margin-bottom: 15px;
}

}


@media (min-width:1400px) and (max-width:1920px){
  .blockchain_services{
padding-bottom: 200px !important;
  }
}