.elementor-252638 .elementor-element.elementor-element-ce3e5e2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:84px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-252638 .elementor-element.elementor-element-b3c7dc3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}@media(min-width:768px){.elementor-252638 .elementor-element.elementor-element-b3c7dc3{--content-width:100%;}}/* Start custom CSS for container, class: .elementor-element-b3c7dc3 *//* ============================= */
/* HOW WE DO IT – SCREEN FIT */
/* ============================= */

body{
  margin:0;
  padding:0;
}

.how-we-do{
  width:100%;
  height:100vh;
  padding:60px 20px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

/* BACKGROUND IMAGE */
.how-we-do::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url("https://iqratechnology.com/wp-content/uploads/2026/02/abstract-data-flow-background-glowing-connections-.jpeg") center/cover no-repeat;
  z-index:0;
}

/* DARK OVERLAY */
.how-we-do::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

/* CONTENT ABOVE BG */
.how-we-do .container{
  max-width:1200px;
  margin:auto;
  width:100%;
  position:relative;
  z-index:2;
}

/* ============================= */
/* TITLE */
/* ============================= */

.section-title{
  text-align:center;
  margin-bottom:35px;
}

.section-title h2{
  font-size:30px;
  font-weight:700;
  color:#ffffff;
}

.section-title .line{
  width:80px;
  height:3px;
  margin:12px auto 0;
  background:linear-gradient(90deg,#162d8f,#c94b4b);
  border-radius:10px;
}

/* ============================= */
/* GRID */
/* ============================= */

.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* ============================= */
/* CARD */
/* ============================= */

.how-card{
  background:#ffffff;
  padding:22px;
  border-radius:0px;
  transition:all 0.35s ease;
  box-shadow:0 5px 18px rgba(0,0,0,0.05);
}

.how-card h3{
  font-size:18px;
  margin-bottom:8px;
  color:#111;
  transition:0.3s;
}

.how-card p{
  font-size:14px;
  line-height:1.5;
  color:#555;
  transition:0.3s;
}

/* ============================= */
/* ICON */
/* ============================= */

.how-card .icon{
  width:48px;
  height:48px;
  border-radius:10px;
  background:#eef1f7;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  font-size:18px;
  color:#162d8f;
  transition:all 0.3s ease;
}

/* ============================= */
/* HOVER */
/* ============================= */

.how-card:hover{
  background:linear-gradient(135deg,#162d8f,#c94b4b);
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(22,45,143,0.25);
}

.how-card:hover h3,
.how-card:hover p{
  color:#fff;
}

.how-card:hover .icon{
  background:rgba(255,255,255,0.2);
  color:#fff;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media(max-width:992px){
  .how-we-do{
    height:auto;
    padding:60px 20px;
  }

  .how-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .how-grid{
    grid-template-columns:1fr;
  }
}/* End custom CSS */