/* =========================
   INTERACTIVE SERVICES
========================= */

.services-interactive{

  min-height:100vh;

  padding:140px 0;

  background:
    linear-gradient(
      135deg,
      #031224 0%,
      #051B35 45%,
      #07284A 100%
    );

  position:relative;

  overflow:hidden;
}


/* HEADER */

.section-header{

  text-align:center;

  max-width:850px;

  margin:0 auto 90px;
}

.section-badge{

  display:inline-block;

  padding:12px 22px;

  border-radius:999px;

  background:
    rgba(249,115,22,0.12);

  border:
    1px solid rgba(249,115,22,0.2);

  color:#FDBA74;

  font-size:0.82rem;

  font-weight:700;

  letter-spacing:1.5px;

  margin-bottom:24px;
}

.section-header h2{

  font-size:4rem;

  line-height:1.1;

  color:white;

  margin-bottom:24px;

  font-family:"Merriweather", serif;
}

.section-header h2 span{

  color:#00C2D1;
}

.section-header p{

  color:
    rgba(255,255,255,0.72);

  line-height:1.9;

  font-size:1.15rem;
}


/* LAYOUT */

.services-layout{

  display:grid;

  grid-template-columns:
    360px 1fr;

  gap:40px;

  align-items:start;
}


/* LEFT TABS */

.services-tabs{

  display:flex;

  flex-direction:column;

  gap:18px;
}

.service-tab{

  display:flex;

  align-items:center;

  gap:16px;

  padding:22px 24px;

  border-radius:24px;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.04);

  color:
    rgba(255,255,255,0.82);

  font-size:1rem;

  cursor:pointer;

  transition:0.35s ease;

  backdrop-filter:blur(10px);
}

.service-tab i{

  font-size:1.2rem;

  color:#F97316;
}

.service-tab:hover{

  transform:
    translateX(6px);

  border-color:
    rgba(0,184,196,0.35);
}

.service-tab.active{

  background:
    linear-gradient(
      135deg,
      rgba(0,184,196,0.16),
      rgba(255,255,255,0.05)
    );

  border:
    1px solid rgba(0,184,196,0.45);

  box-shadow:
    0 10px 30px rgba(0,184,196,0.12);
}


/* RIGHT DISPLAY */

.service-display{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:34px;

  padding:52px;

  backdrop-filter:blur(18px);

  min-height:540px;

  transition:0.4s ease;
}


/* ICON */

.service-display-icon{

  width:90px;
  height:90px;

  border-radius:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  font-size:2rem;

  margin-bottom:34px;

  box-shadow:
    0 12px 35px rgba(249,115,22,0.28);
}


/* TITLE */

.service-display h3{

  font-size:3rem;

  color:white;

  margin-bottom:24px;

  font-family:"Merriweather", serif;
}


/* DESC */

.service-display p{

  color:
    rgba(255,255,255,0.74);

  line-height:2;

  font-size:1.1rem;

  max-width:720px;

  margin-bottom:38px;
}


/* FEATURES */

.service-features{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

  gap:18px;

  margin-bottom:50px;
}

.feature-item{

  padding:18px 20px;

  border-radius:18px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.06);

  color:
    rgba(255,255,255,0.82);
}


/* BUTTON */

.service-btn{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:16px 28px;

  border-radius:18px;

  text-decoration:none;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  font-weight:600;

  transition:0.3s ease;
}

.service-btn:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 30px rgba(249,115,22,0.28);
}


/* MOBILE */

@media(max-width:992px){

  .services-layout{

    grid-template-columns:1fr;
  }

  .services-tabs{

    overflow-x:auto;

    flex-direction:row;
  }

  .service-tab{

    min-width:280px;
  }
}

@media(max-width:768px){

  .section-header h2{

    font-size:2.7rem;
  }

  .service-display{

    padding:34px 24px;
  }

  .service-display h3{

    font-size:2.2rem;
  }
}