/* 
==============================================================
|   Tred-Mark Communications | Developed by Javorsky Studio  |
|  Viewing File: ~/public-site/assets/css/pages/services.css |
| --- Styling/CSS for `~/public-site/apply/services.html --- |
============================================================== 
*/

   /* =========================================================
   Services Page
   ========================================================= */

.page-services{
  min-height:100vh;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(5,8,14,.9), rgba(7,10,18,.96)),
    radial-gradient(circle at top left, rgba(76,183,255,.16), transparent 38%),
    radial-gradient(circle at top right, rgba(138,92,255,.12), transparent 42%),
    url("/assets/media/services/page-bg.webp") center/cover fixed no-repeat;
}

.page-services-body{
  margin:0;
  background:#05080e;
}

.services-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(7rem, 12vw, 11rem) var(--space-5) clamp(4rem, 8vw, 7rem);
}

.services-hero-inner{
  position:relative;
  z-index:2;
  display:block;
}

.services-hero-copy{
  position:relative;
  z-index:3;
  max-width:760px;
}

.services-hero-map{
  position:absolute;
  z-index:1;

  width:min(980px, 78vw);
  max-width:none;

  top:50%;
  left:50%;
  transform:translate(-18%, -48%);

  opacity:.34;

  filter:
    drop-shadow(0 0 14px rgba(255,132,56,.25))
    drop-shadow(0 0 34px rgba(125,227,255,.12));

  pointer-events:none;
  user-select:none;
}

.services-hero h1{
  margin:0;
  max-width:720px;
  font-size:clamp(2.6rem, 4.8vw, 5.15rem);
  line-height:.92;
  letter-spacing:-.065em;
  text-transform:uppercase;

  overflow-wrap:normal;
  word-break:normal;
}

.services-hero h1 span{
  display:block;
  background:linear-gradient(135deg, #7de3ff, #4cb7ff 38%, #2fe3c2 72%, #8a5cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.services-hero-copy p{
  max-width:720px;
  color:rgba(232,241,255,.78);
  font-size:clamp(1rem, 1.6vw, 1.18rem);
  line-height:1.7;
}

.services-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.5rem;
}

.services-list-section{
  padding:clamp(3.5rem, 7vw, 6rem) var(--space-5);
}

.services-accordion{
  display:grid;
  gap:1rem;
}

.service-item{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow:0 18px 50px rgba(0,0,0,.24);
  overflow:hidden;
}

.service-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 1.35rem;
}

.service-item summary::-webkit-details-marker{
  display:none;
}

.service-item summary span{
  color:#fff;
  font-size:1.15rem;
  font-weight:850;
}

.service-item summary small{
  color:rgba(125,227,255,.72);
  font-weight:700;
  text-align:right;
}

.service-details{
  padding:0 1.35rem 1.35rem;
  color:rgba(232,241,255,.72);
  line-height:1.7;
}

.service-details p{
  margin-top:0;
}

.service-details ul{
  margin:.9rem 0 0;
  padding-left:1.2rem;
}

.service-details li{
  margin:.35rem 0;
}

.service-item[open]{
  border-color:rgba(125,227,255,.28);
  background:
    radial-gradient(circle at top left, rgba(76,183,255,.12), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}

@media (max-width:900px){
  .services-hero-inner{
    grid-template-columns:1fr;
  }

  .services-hero-map{
    width:900px;
    left:58%;
    opacity:.22;
  }
}

@media (max-width:560px){
  .service-item summary{
    flex-direction:column;
  }

  .service-item summary small{
    text-align:left;
  }
}