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

/* ---------------- Base ---------------- */
body{
  font-family:"Quicksand",serif!important;
  font-optical-sizing:auto!important;
  font-style:normal!important;
  background:#ffffff;
}
h1,h2,h3,h4,h5{font-weight:700!important;}

/* ---------------- Header ---------------- */
.header-color{background-color:#142c3e;}
.nav-text{font-size:12px;}

/* ---------------- Unified OUTLINE Buttons (Prev/Next, Explore, Open App, .btn) ---------------- */
/* Default: white + outline; Hover/Active: filled brand */
.hero-nav a,
.cust-button,
.card-button,
.btn,
a.btn,
button {
  background:#fff !important;
  color:#aa322e !important;
  border:1px solid #aa322e !important;
  border-radius:30px !important;
  padding:.55rem 1.1rem !important;
  font-size:1rem !important;
  text-decoration:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease !important;
  box-shadow:none !important;
}
.hero-nav a:hover,
.cust-button:hover,
.card-button:hover,
.btn:hover,
a.btn:hover,
button:hover{
  background:#aa322e !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.hero-nav a:active,
.cust-button:active,
.card-button:active,
.btn:active,
a.btn:active,
button:active{
  background:#8b2328 !important;
  color:#fff !important;
  transform:none;
}

/* ---------------- Hero ---------------- */
.hero-nav{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.product-hero{
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%);
  border:1px solid #eceff3;border-radius:24px;padding:28px;
  box-shadow:0 4px 18px rgba(16,24,40,.06);
}
.product-hero h1{font-size:2rem}
.product-hero .hero-description{font-size:1.05rem;color:#505c65;margin:10px 0 18px}
.product-hero .brand-chip{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.product-hero .brand-chip img{
  height:60px;width:60px;object-fit:contain;border-radius:14px;
  background:#fff;border:1px solid #eef1f4;padding:8px
}
.product-hero .mockup{
  max-height:360px;object-fit:contain;background:#fff;
  border:1px solid #eef1f4;border-radius:18px
}

/* ---------------- Tabs ---------------- */
/* Strip */
.section-title{font-weight:700;margin-bottom:.75rem}
.nav-tabs{
  border:0;margin:12px 14px 0 14px;
  display:flex;flex-wrap:wrap;gap:12px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
  --bs-nav-tabs-border-width:0 !important;   /* kill bootstrap negative overlap */
  position:relative; z-index:1;
}
.nav-tabs::-webkit-scrollbar{display:none}

/* Pills: outline by default, filled on hover, filled on active */
.nav-tabs .nav-link{
  margin-bottom:0 !important;                /* avoid bootstrap hack */
  border-width:1px !important;
  border-style:solid !important;
  border-color:#aa322e !important;           /* OUTLINE */
  background:#fff !important;
  color:#aa322e !important;
  border-radius:999px !important;
  padding:.56rem 1.1rem !important;
  box-shadow:none !important;
  outline:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-tabs .nav-link:hover{
  background:#aa322e !important;             /* FILL on hover */
  color:#fff !important;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  border-color:#8b2328 !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  background:#aa322e !important;             /* SELECTED = FILL */
  color:#fff !important;
  border-color:#aa322e !important;
}

/* Content card under tabs */
.tab-content,
.modern-tab-content{
  position:relative;background:#fff;border:1px solid #eceff3;border-radius:20px;
  padding:20px;margin:10px 14px 16px 14px;box-shadow:0 4px 18px rgba(16,24,40,.05);overflow:hidden
}
.tab-content .card,
.modern-tab-content .card{
  border-radius:16px!important;border:1px solid #eceff3!important;box-shadow:0 2px 10px rgba(16,24,40,.05)
}

/* ---------------- Video (responsive) ---------------- */
.video-wrapper{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:16px;border:1px solid #e6eaee;background:#0001
}
.video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------- Cards (elevated, modern) ---------------- */
.card,.card-border,.custom-card{
  border-radius:18px!important;border:1px solid #eceff3!important;background:#fff!important;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover,.card-border:hover,.custom-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(16,24,40,.10)!important
}
.card-body .small, .card .small{color:#6b7780}

/* Optional legacy gradients */
.card-bg{background:linear-gradient(180deg,rgba(247,235,235,1) 0%,rgba(0,212,255,0) 100%)}
.user-card-bg{background:linear-gradient(180deg,rgba(255,229,229,1) 0%,rgba(255,229,229,0) 100%)}

/* Tiny doc dot */
.doc-dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,#8ec5fc 0%,#e0c3fc 100%);
  display:inline-block
}

/* ---------------- Imagery helpers ---------------- */
.image-container{position:relative;overflow:hidden;background:#fff;border-radius:12px 12px 0 0}
.image-container img{display:block;width:100%;height:auto;transition:transform .3s ease;border-radius:12px 12px 0 0}
.image-container:hover img{transform:scale(1.06)}

/* ---------------- PDFs ---------------- */
.pdf-container{display:flex;gap:20px;flex-wrap:wrap}
.pdf-card{
  display:flex;flex-direction:column;align-items:center;width:220px;border:1px solid #e7ebf0;border-radius:16px;
  padding:12px;background:#fff;text-align:center;box-shadow:0 2px 8px rgba(16,24,40,.05)
}
.pdf-details{display:flex;align-items:center;justify-content:space-between;width:100%}
.pdf-icon{font-size:20px;color:#d32f2f}
.pdf-filename{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- Misc (kept) ---------------- */
.card-border{padding:5px;background:#f8f5f5}
.cust-svg-icon{background:#fff;border-radius:14px;box-shadow:0 12px 16px 0 rgb(247 236 236),0 17px 50px 0 rgb(214 197 197)}
.bg-custom-green{background:#f4f8ec}
.container-svg:hover svg path{stroke:#132b3d}
#productVideo{filter:blur(50px);transition:filter .5s ease}
.nav-buttons{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap}
.nav-buttons p{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px;font-weight:700}

/* ---------------- Form kit (kept) ---------------- */
.contact-form-container{background:#fff;padding:2rem;border-radius:24px;box-shadow:0 4px 6px rgba(0,0,0,.1);max-width:400px;width:100%}
.contact-form-container h2{font-size:1.5rem;margin-bottom:1rem;color:#333}
.contact-form-container p{font-size:.9rem;color:#666;margin-bottom:1.5rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.9rem;color:#333;margin-bottom:.5rem}
.form-group input,.form-group textarea{width:100%;padding:.75rem 1.5rem;font-size:.9rem;border:1px solid #ccc;border-radius:96px;box-sizing:border-box;border-width:2px}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#657580;box-shadow:0 0 10px #657580}
.form-group textarea{resize:vertical}
.contact-form-container button{
  background:#fff;color:#aa322e;border:2px solid #aa322e;
  padding:.75rem 1.5rem;font-size:1rem;border-radius:96px;cursor:pointer;width:100%;transition:.2s
}
.contact-form-container button:hover{background:#aa322e;color:#fff}
.form-bg{display:flex;justify-content:center}
.contact-border{padding:5px;border-radius:24px;background:#f8f5f5;box-shadow:0 4px 8px 4px rgba(0,0,0,.2)}
.svg-icon{left:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666}
input.form-control{padding-left:40px}
input:-webkit-autofill{box-shadow:0 0 0px 1000px white inset;-webkit-text-fill-color:black;border:1px solid #657580;transition:background-color 5000s ease-in-out 0s}

/* ---------------- Fancy blur circles (kept) ---------------- */
.blur-circle,.blur-circle-green{
  position:absolute;width:320.19px;height:320.19px;filter:blur(170px);border-radius:50%;z-index:-1;animation:move-circle 40s ease-in-out infinite
}
.blur-circle{background:#aa322e}
.blur-circle-green{background:green;animation-name:move-circle-reverse}
@keyframes move-circle{
  0%{top:-52px;left:0}25%{top:20%;left:15%}50%{top:50%;left:30%}75%{top:80%;left:10%}100%{top:-150px;left:0}
}
@keyframes move-circle-reverse{
  0%{top:-52px;right:0}25%{top:20%;right:15%}50%{top:50%;right:30%}75%{top:80%;right:10%}100%{top:-150px;right:0}
}

/* ---------------- Responsive ---------------- */
@media (max-width: 992px){
  .product-hero{padding:22px}
  .product-hero h1{font-size:1.7rem}
  .product-hero .mockup{max-height:300px}
  .tab-content,.modern-tab-content{margin:10px 10px 16px 10px}
  .nav-tabs{margin:12px 10px 0 10px}
}
@media (max-width: 768px){
  .product-hero{padding:18px;border-radius:20px}
  .product-hero h1{font-size:1.45rem}
  .product-hero .hero-description{font-size:.98rem}
  .product-hero .brand-chip img{height:50px;width:50px;border-radius:12px}
  .nav-tabs{gap:8px}
  .nav-tabs .nav-link{padding:.5rem .9rem!important;font-size:.9rem!important}
  .tab-content,.modern-tab-content{padding:16px;border-radius:16px}
  .pdf-card{width:100%}
}