
:root{
  --sym-navy:#0B2545;
  --sym-navy-soft:#12355B;
  --sym-blue:#0077B6;
  --sym-blue-soft:#00A6FB;
  --sym-aqua:#48CAE4;
  --sym-green:#16C784;
  --sym-bg:#F4F8FB;
  --sym-card:#FFFFFF;
  --sym-text:#5B6778;
  --sym-border:#E6EEF7;
}

.sym-tp-section{
  padding:35px 0;
  font-family:inherit;
}

.sym-tp-head{
  text-align:center;
  max-width:780px;
  margin:0 auto 28px;
}

.sym-tp-head span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 15px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(0,119,182,.10),rgba(72,202,228,.16));
  color:var(--sym-blue);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:12px;
}

.sym-tp-head h2{
  font-size:42px;
  line-height:1.12;
  margin:0;
  color:var(--sym-navy);
  font-weight:900;
}

.sym-tp-head p{
  margin:14px auto 0;
  color:var(--sym-text);
  font-size:17px;
  line-height:1.75;
}

.sym-tp-filter-wrap{
  margin:0 0 30px;
}

.sym-tp-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  background:linear-gradient(135deg,#F7FBFF,#EEF7FF);
  border:1px solid var(--sym-border);
  padding:14px;
  border-radius:24px;
  box-shadow:0 14px 35px rgba(11,37,69,.06);
}

.sym-tp-filter a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 17px;
  border-radius:999px;
  color:var(--sym-navy);
  background:#fff;
  border:1px solid var(--sym-border);
  font-size:14px;
  font-weight:850;
  text-decoration:none!important;
  transition:.22s ease;
  box-shadow:0 8px 18px rgba(11,37,69,.04);
}

.sym-tp-filter a:hover,
.sym-tp-filter a.active{
  background:linear-gradient(135deg,var(--sym-blue),var(--sym-blue-soft));
  color:#fff!important;
  border-color:var(--sym-blue);
  box-shadow:0 12px 24px rgba(0,119,182,.24);
}

.sym-tp-grid{
  display:grid;
  gap:26px;
}

.sym-tp-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sym-tp-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sym-tp-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* Services */
.sym-tp-service-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--sym-border);
  border-radius:26px;
  box-shadow:0 20px 45px rgba(11,37,69,.08);
  transition:.28s ease;
}

.sym-tp-service-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 60px rgba(11,37,69,.14);
}

.sym-tp-service-img{
  position:relative;
  display:block;
  height:235px;
  overflow:hidden;
  background:#EAF3FA;
}

.sym-tp-service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.sym-tp-service-card:hover .sym-tp-service-img img{
  transform:scale(1.07);
}

.sym-tp-service-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,37,69,.05),rgba(11,37,69,.62));
}

.sym-tp-service-body{
  position:relative;
  padding:28px;
}

.sym-tp-icon{
  position:absolute;
  right:24px;
  top:-31px;
  width:62px;
  height:62px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--sym-blue),var(--sym-blue-soft));
  color:#fff;
  font-size:26px;
  box-shadow:0 16px 30px rgba(0,119,182,.28);
}

.sym-tp-service-body h3{
  margin:0 0 12px;
  font-size:23px;
  line-height:1.22;
  font-weight:900;
  color:var(--sym-navy);
}

.sym-tp-service-body h3 a{
  color:inherit;
  text-decoration:none!important;
}

.sym-tp-service-body p{
  color:var(--sym-text);
  font-size:15px;
  line-height:1.7;
  margin:0 0 18px;
}

.sym-tp-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sym-blue)!important;
  font-weight:900;
  text-decoration:none!important;
}

/* Products */
.sym-tp-product-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--sym-border);
  border-radius:26px;
  box-shadow:0 20px 45px rgba(11,37,69,.08);
  transition:.28s ease;
}

.sym-tp-product-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 60px rgba(11,37,69,.14);
  border-color:#d6e6f4;
}

.sym-tp-product-img{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1.08/1;
  background:linear-gradient(180deg,#F8FBFF,#EEF5FC);
  overflow:hidden;
}

.sym-tp-product-img img{
  max-width:88%;
  max-height:86%;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:.32s ease;
  filter:drop-shadow(0 18px 18px rgba(11,37,69,.12));
}

.sym-tp-product-card:hover .sym-tp-product-img img{
  transform:scale(1.045);
}

.sym-tp-pill{
  position:absolute;
  left:16px;
  top:16px;
  z-index:2;
  display:inline-flex;
  max-width:calc(100% - 32px);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--sym-blue);
  border:1px solid #dce9f5;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 10px 22px rgba(11,37,69,.08);
}

.sym-tp-product-body{
  padding:23px;
}

.sym-tp-product-body h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
  color:var(--sym-navy);
  font-weight:900;
}

.sym-tp-product-body h3 a{
  color:inherit;
  text-decoration:none!important;
}

.sym-tp-product-body p{
  min-height:52px;
  color:var(--sym-text);
  font-size:15px;
  line-height:1.62;
  margin:0 0 18px;
}

.sym-tp-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sym-tp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 17px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  line-height:1;
  text-decoration:none!important;
  transition:.22s ease;
}

.sym-tp-btn-main{
  background:linear-gradient(135deg,var(--sym-blue),var(--sym-blue-soft));
  color:#fff!important;
  box-shadow:0 12px 24px rgba(0,119,182,.22);
}

.sym-tp-btn-wa{
  background:linear-gradient(135deg,var(--sym-green),#0BA360);
  color:#fff!important;
  box-shadow:0 12px 24px rgba(22,199,132,.22);
}

.sym-tp-btn:hover{
  transform:translateY(-2px);
  color:#fff!important;
}

.sym-tp-placeholder{
  width:100%;
  height:100%;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#EEF5FC;
  color:#7B8DA3;
  font-weight:900;
}

/* Theme service card soft override */
.services-area2 .services-box2,
.s-single-services,
.single-services{
  border-radius:22px!important;
  border-color:var(--sym-border)!important;
  box-shadow:0 20px 45px rgba(11,37,69,.08)!important;
}

.services-area2 .services-box2 .services-icon,
.services-area2 .s-single-services.active .services-icon{
  background:linear-gradient(135deg,var(--sym-blue),var(--sym-blue-soft))!important;
}

.s-single-services:hover,
.s-single-services.active{
  background:linear-gradient(135deg,var(--sym-blue),var(--sym-blue-soft))!important;
}

@media(max-width:1180px){
  .sym-tp-cols-4{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:900px){
  .sym-tp-cols-3,
  .sym-tp-cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sym-tp-head h2{font-size:34px;}
}

@media(max-width:600px){
  .sym-tp-section{padding:22px 0;}
  .sym-tp-head{text-align:left;margin-bottom:20px;}
  .sym-tp-head span{font-size:11px;padding:6px 11px;}
  .sym-tp-head h2{font-size:28px;}
  .sym-tp-head p{font-size:14px;line-height:1.55;}

  .sym-tp-filter-wrap{margin:0 -12px 20px;}
  .sym-tp-filter{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    border-radius:0;
    border-left:0;
    border-right:0;
    padding:12px;
    scrollbar-width:none;
  }
  .sym-tp-filter::-webkit-scrollbar{display:none;}
  .sym-tp-filter a{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:12px;
    padding:9px 13px;
  }

  .sym-tp-grid,
  .sym-tp-cols-2,
  .sym-tp-cols-3,
  .sym-tp-cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:13px;
  }

  .sym-tp-product-card,
  .sym-tp-service-card{border-radius:17px;}

  .sym-tp-product-img{aspect-ratio:1/1;}
  .sym-tp-product-img img{max-width:90%;max-height:88%;}

  .sym-tp-product-body,
  .sym-tp-service-body{
    padding:14px;
  }

  .sym-tp-product-body h3,
  .sym-tp-service-body h3{
    font-size:16px;
    min-height:38px;
    margin-bottom:7px;
  }

  .sym-tp-product-body p,
  .sym-tp-service-body p{
    font-size:12px;
    line-height:1.45;
    min-height:50px;
    margin-bottom:12px;
  }

  .sym-tp-actions{gap:6px;}
  .sym-tp-btn{
    flex:1 1 auto;
    font-size:12px;
    padding:9px 8px;
  }

  .sym-tp-pill{
    top:9px;
    left:9px;
    font-size:10px;
    padding:5px 8px;
  }

  .sym-tp-service-img{height:145px;}
  .sym-tp-icon{display:none;}
}

@media(max-width:360px){
  .sym-tp-grid{gap:10px;}
  .sym-tp-btn{font-size:11px;padding:8px 7px;}
}
