/* styles.css - ACROMED Healthcare Technologies */
:root{
  --primary:rgba(1, 44, 1, 0.943);
  --accent:#094e03;
  --muted:#022836;
  --text:#000000;
  --maxw:1100px;
}
*{
  box-sizing:border-box
}
body{
  font-family:Arial, sans-serif;
  margin:0;
  color:var(--text);
  background:var(--muted);
  line-height:1.5
}
.container{
  display: block;

  max-width:var(--maxw);
  margin:20px auto;
  padding:22px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(231, 228, 228, 0.06)
}
header{
  position: fixed;
  justify-self: center;
  width: 100%;
  max-width: 1050px;
  background:linear-gradient(90deg,var(--primary),rgb(129, 129, 28));
  color:#ffffff5d;
  border-radius:10px 10px 10px 10px;
  z-index: 2;
}
header .brand{
  display:flex;
  /* justify-content: space-between; */
  align-items:center;
  gap:20px;
  width: 100%;
  flex: 2;
  padding:  1rem;
}

header img.logo{
  position: relative;
  /* left: 1rem; */
  height:75px;
  width:auto;
  border-radius:20px;
  background:#fff;
  padding:2px
}
nav{
  margin-top:10px;
  position: relative;
  right: 1rem;
}
nav a{color:#fff;
  text-decoration:none;
  margin-right:16px;
  font-weight:600
}
nav a:hover{
  text-decoration:underline
}
.title-nav {
  width: 100%;
}
.title-nav h2{
  text-align: left;
}
.title-nav nav{
  text-align: right;
}
.hero{
  position: relative;
  top: 8rem;
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px
}
.hero .left{flex:1}
.hero .right{
  flex:1;
  text-align:center;
  z-index: 0;
}
.hero h1{
  margin:0;
  font-size:28px
}
.cta{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  margin-top:8px;
  margin-bottom:8px;
}
main {
  /* position:inherit; */
  margin: 8rem 1rem;
}

.row{
  display:flex;
  gap:18px;
  flex-wrap:wrap
}
.col{
  flex:1;
  min-width:260px
}
.products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-top:12px
}
.card {
  border:1px solid #eee;
  border-radius:8px;
  padding:12px;
  background:#fafafa;
}
.card img{
  width:100%;
  height: auto;
  object-fit:fill;
  border-radius:6px;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px
}
.gallery img{
  width:100%;
  height:85%;
  object-fit:cover;
  border-radius:8px
}
form input[type=text], 
form input[type=email], 
textarea, 
select{width:100%;
  padding:8px;
  margin-top:6px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:6px
}
button, 
input[type=submit]
{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  font-weight:700
}
table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px
}
th,td{
  padding:8px;
  border:1px solid #eee;
  text-align:left
}
th{
  background:#f3f8fb
}
footer{
  margin-top:18px;
  padding:12px;
  font-size:14px;
  color:#666;
  text-align:center;
  border-top:1px solid #eee;
  border-radius:0 0 10px 10px
}
.scroll-to-top {
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  color: #c1bebe;
  font-size: 14;
  background-color: green;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  align-content: center;
  opacity: 80%;
  box-shadow: #7e7c7c 0 0 10px 1px;
}
@media (max-width: 768px) {
  header {
    position: relative;
  }
  .hero {
    top:0px
  }
  .cta {
    margin-bottom: 0px;
  }
  main {
    margin: 0;
  }
}