:root{
    --al-dark:#0d3d33;
    --al-dark-2:#0f4a3d;
    --al-green:#0f7a5c;
    --al-green-hover:#0c5f47;
    --al-orange:#f0a63a;
    --al-text:#1f2d2a;
    --al-muted:#6c7a76;
    --al-bg-soft:#f6f8f7;
    --al-border:#e5e9e7;
  }

  *{box-sizing:border-box;}

  body{
    font-family:'Inter', sans-serif;
    color:var(--al-text);
    background:#fff;
  }

  h1,h2,h3,h4,h5,.brand-name,.font-heading{
    font-family:'Poppins', sans-serif;
  }

  a{text-decoration:none;}

  /* ===== Top bar ===== */
  .topbar{
    background:var(--al-dark);
    color:#dce8e4;
    font-size:.82rem;
    padding:8px 0;
  }
  .topbar a{color:#dce8e4;}
  .topbar .divider{opacity:.35; margin:0 .5rem;}
  .topbar .social-icons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;height:26px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    margin-left:6px;
    color:#fff;
    font-size:.75rem;
    transition:.2s;
  }
  .topbar .social-icons a:hover{background:var(--al-orange); color:#0d3d33;}

  /* ===== Navbar ===== */
  .navbar-al{
    padding:16px 0;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
  .navbar-al .navbar-brand{display:flex; align-items:center; gap:10px;}
  .logo-mark{
    width:42px;height:42px;
    background:var(--al-dark);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .brand-text {
    margin-top: 8px;
    }
  .logo-mark::after{
    content:"";
    position:absolute;
    bottom:6px;left:50%;
    transform:translateX(-50%);
    width:10px;height:10px;
    background:#fff;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  .brand-text .brand-name{
    font-weight:700;
    font-size:1.25rem;
    color:var(--al-dark);
    line-height: 5px;
    display: block;
  }
  .brand-text small{
    color:var(--al-muted);
    font-size:.68rem;
    letter-spacing:.03em;
  }
  .navbar-al .nav-link{
    color:var(--al-text);
    font-weight:500;
    font-size: 12px;
    padding:10px 14px !important;
  }
  .navbar-al .nav-link.active{
    color:var(--al-dark);
    font-weight:600;
    position:relative;
  }
  .navbar-al .nav-link.active::after{
    content:"";
    position:absolute;
    left:.9rem; right:.9rem; bottom:0;
    height:2px;
    background:var(--al-dark);
  }
  .btn-al-primary{
    background:var(--al-dark);
    color:#fff;
    border:none;
    padding:.65rem 1.4rem;
    border-radius:6px;
    font-weight:600;
    font-size:.92rem;
    transition:.2s;
    white-space:nowrap;
  }
  .btn-al-primary:hover{background:var(--al-green-hover); color:#fff;}
  .btn-al-outline{
    background:#fff;
    color:var(--al-dark);
    border:1.5px solid var(--al-dark);
    padding:.6rem 1.4rem;
    border-radius:6px;
    font-weight:600;
    font-size:.92rem;
    transition:.2s;
  }
  .btn-al-outline:hover{background:var(--al-dark); color:#fff;}

  /* ===== Hero ===== */
  .hero{
    position:relative;
    padding:90px 0 50px;
    background-image:
      linear-gradient(90deg, rgba(6,26,21,.92) 0%, rgba(6,26,21,.78) 38%, rgba(6,26,21,.35) 62%, rgba(6,26,21,.15) 100%),
      url('https://loremflickr.com/1600/900/medical,laboratory,instrument');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
  }
  .hero h1{
    font-size:2rem;
    font-weight:600;
    line-height:1.2;
    color:#000;
  }
  .hero h1 .line-accent{color:#0d3d33;}
  .hero p.lead-text{
    color: #000;
    font-size:1.02rem;
    max-width:520px;
  }
  .hero .btn-al-outline{
    background:transparent;
    color: #0d3d33;
  }
  .hero .btn-al-outline:hover{
    background:#fff;
    color:var(--al-dark);
    border-color:#fff;
  }
  .hero-features .ft-title,
  .hero-features .ft-sub{color:#fff;}
  .hero-features .ft-sub{color:#cfe0da;}
  .hero-features i{color:var(--al-orange);}
  /* .hero-image-wrap{
    position:relative;
    min-height:380px;
  } */
  .contact-float-card{
    position:absolute;
    top:100px; right:20px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    padding:16px;
    width:220px;
  }
  .contact-float-card .item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:8px 4px;
  }
  .contact-float-card .item + .item{
    border-top:1px solid var(--al-border);
  }
  .contact-float-card .icon-circle{
    width:32px;height:32px;
    border-radius:50%;
    background:var(--al-bg-soft);
    color:var(--al-green);
    display:flex;align-items:center;justify-content:center;
    font-size:.85rem;
    flex-shrink:0;
  }
  .contact-float-card .label{
    font-weight:600;
    font-size:.82rem;
    color:var(--al-text);
    display:block;
  }
  .contact-float-card .sub{
    font-size:.75rem;
    color:var(--al-muted);
  }

  .hero-features{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
  .hero-features i{
    color:var(--al-dark);
    font-size: 24px;
    margin-top:2px;
  }
  .hero-features .ft-title{
    font-weight:600;
    font-size:.88rem;
    color:var(--al-text);
    display:block;
  }
  .hero-features .ft-sub{
    font-size:.78rem;
    color:var(--al-muted);
  }

  /* ===== Section heading ===== */
  .section-heading{
    text-align:center;
    margin-bottom:40px;
  }
  .section-heading h2{
    font-weight:700;
    font-size:1.9rem;
    color:var(--al-text);
    margin-bottom:10px;
  }
  .heading-divider{
    width:70px;
    height:3px;
    background:var(--al-dark);
    margin:0 auto;
    position:relative;
  }
  .heading-divider::before{
    content:"\f0c3";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    top:-9px; left:50%;
    transform:translateX(-50%);
    background:#fff;
    color:var(--al-dark);
    padding:0 8px;
    font-size:.75rem;
  }
  

  section{padding:60px 0;}
  .bg-soft{background:var(--al-bg-soft);}

  /* ===== Category cards ===== */
  .cat-card{
    background:#fff;
    border:1px solid var(--al-border);
    border-radius:10px;
    overflow:hidden;
    text-align:center;
    height:100%;
    transition:.25s;
    cursor:pointer;
    display: block;
  }
  .cat-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 28px rgba(13,61,51,.12);
    border-color:transparent;
  }
  .cat-card .cat-icon{
    width:46px;height:46px;
    margin:16px auto 8px;
    border-radius:10px;
    background:var(--al-bg-soft);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;
    color:var(--al-dark);
  }
  .cat-card .cat-title{
    font-weight:600;
    font-size:.85rem;
    padding:0 8px 12px;
    color:var(--al-text);
    min-height:38px;
  }
  .cat-card img{
    width:100%;
    height:110px;
    object-fit:cover;
    border-top:1px solid var(--al-border);
  }
  
  .cat-icon img {
        width: 30px;
        height: unset;
    }

  /* ===== Featured products ===== */
  .filter-tabs .btn{
    border-radius:6px;
    font-weight:600;
    font-size:.85rem;
    padding:.5rem 1rem;
    margin-right:8px;
    border:1px solid var(--al-border);
    background:#fff;
    color:var(--al-text);
  }
  .filter-tabs .btn.active-filter{
    background:var(--al-dark);
    color:#fff;
    border-color:var(--al-dark);
  }
  .search-box{
    position:relative;
  }
  .search-box input{
    border-radius:6px;
    padding:.5rem 2.2rem .5rem .9rem;
    border:1px solid var(--al-border);
    font-size:.85rem;
    width:200px;
  }
  .search-box i{
    position:absolute;
    right:12px; top:50%;
    transform:translateY(-50%);
    color:var(--al-muted);
    font-size:.8rem;
  }
  .arrow-btn{
    width:34px;height:34px;
    border-radius:6px;
    border:1px solid var(--al-border);
    background:#fff;
    color:var(--al-text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .product-card{
    background:#fff;
    border:1px solid var(--al-border);
    border-radius:10px;
    overflow:hidden;
    height:100%;
    transition:.25s;
    display:flex;
    flex-direction:column;
  }
  .product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 30px rgba(13,61,51,.14);
  }
  .product-card .thumb{
    position:relative;
    height:170px;
  }
  .product-card .thumb img{
    width:100%;height:100%;object-fit:cover;
  }
  .badge-status{
    position:absolute;
    top:10px; left:10px;
    font-size:.68rem;
    font-weight:700;
    padding:.32rem .6rem;
    border-radius:20px;
    letter-spacing:.02em;
  }
  .badge-ready{background:#e4f6ec; color:#1c8a4f;}
  .badge-pre{background:#fdf0da; color:#c8811a;}

  .product-card .body{
    padding:14px 14px 8px;
    flex:1;
  }
  .product-card .title{
    font-weight:600;
    font-size:.82rem;
    color:var(--al-text);
    min-height:44px;
  }
  .product-card .link-row{
    display:flex;
    gap:8px;
    padding:0 14px 10px;
  }
  .product-card .link-row a{
    flex:1;
    text-align:center;
    font-size:.76rem;
    font-weight:600;
    color:var(--al-dark);
    border:1px solid var(--al-border);
    border-radius:5px;
    padding:.4rem 0;
  }
  .product-card .link-row a:hover{background:var(--al-bg-soft);}
  .product-card .price-btn{
    margin:0 14px 14px;
    background:var(--al-dark);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:.55rem 0;
    font-weight:600;
    font-size:.86rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .product-card .price-btn:hover{background:var(--al-green-hover);}

  /* ===== Info strip ===== */
  .info-strip{
    border-top:1px solid var(--al-border);
    border-bottom:1px solid var(--al-border);
    padding:36px 0;
  }
  .info-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
  .info-item .ic{
    width:44px;height:44px;
    border-radius:10px;
    background:var(--al-bg-soft);
    color:var(--al-dark);
    display:flex;align-items:center;justify-content:center;
    font-size:1.15rem;
    flex-shrink:0;
  }
  .info-item .ttl{
    font-weight:600;
    font-size: 12px;
    color:var(--al-text);
    display:block;
  }
  .info-item .sub{
    font-size:.78rem;
    color:var(--al-muted);
  }

  /* ===== Brands ===== */
  .brand-box{
    border:1px solid var(--al-border);
    border-radius:10px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    font-weight:700;
    color:var(--al-text);
    transition:.2s;
  }
  .brand-box:hover{box-shadow:0 10px 22px rgba(13,61,51,.1); transform:translateY(-3px);}

  /* ===== Stats bar ===== */
  .stats-bar{
    background:var(--al-dark);
    color:#fff;
    padding:36px 0;
  }
  .stat-item{
    display:flex;
    align-items:center;
    gap:14px;
    justify-content:center;
  }
  .stat-item i{
    font-size:1.8rem;
    color: #fff;
  }
  .stat-item .num{
    font-weight:700;
    font-size:1.5rem;
    line-height:1;
  }
  .stat-item .lbl{
    font-size:.8rem;
    color:#cfe0da;
  }

  /* ===== Footer ===== */
  footer{
    background:var(--al-dark-2);
    color:#cfe0da;
    padding-top:50px;
  }
  footer h6{
    color:#fff;
    font-weight:700;
    font-size:.95rem;
    margin-bottom:18px;
  }
  footer a{
    color:#b9d2c9;
    font-size:.87rem;
    display:block;
    margin-bottom:10px;
    transition:.2s;
  }
  footer a:hover{color:#fff;}
  footer .foot-about p{
    font-size:.85rem;
    color:#b9d2c9;
    line-height:1.7;
  }
  footer .foot-social a{
    display:inline-flex;
    width:32px;height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    align-items:center;
    justify-content:center;
    margin-right:8px;
    color:#fff;
  }
  footer .foot-social a:hover{background:var(--al-orange); color:#0d3d33;}
  .foot-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:36px;
    padding:16px 0;
    text-align:center;
    font-size:.8rem;
    color:#9db8ae;
  }
  .contact-row{
    display:flex;
    gap:10px;
    margin-bottom:12px;
    font-size:.86rem;
    color:#b9d2c9;
  }
  .contact-row i{color:fff; margin-top:3px;}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ---------------- Breadcrumb / Page header ---------------- */
.breadcrumb-strip {
  background-color: unset;
  padding: 12px 0;
  font-size: 14px;
}
.page-hero p {
    max-width: 550px;
}
.breadcrumb-strip a {
  color: var(--alab-text);
}

.breadcrumb-strip a:hover {
  color: var(--alab-accent);
}

.breadcrumb-strip .sep {
  margin: 0 8px;
  color: #b7c1bd;
}

.page-hero {
  padding: 46px 0 40px;
}

.page-hero h1 {
    font-size: 32px;
    font-weight: 500;
}

.hero-underline {
  width: 60px;
  height: 4px;
  background: var(--alab-accent);
  border-radius: 3px;
  margin-top: 10px;
}

/* ---------------- Eyebrow ---------------- */
.eyebrow {
  color: var(--alab-accent);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 13.5px;
  text-transform: uppercase;
}

/* ---------------- Buttons ---------------- */
.btn-alab {
  background-color: var(--alab-dark);
  color: #fff;
  padding: 12px 26px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
}

.btn-alab:hover {
  background-color: var(--alab-accent);
  color: #fff;
}

/* ---------------- About Hero Image Card ---------------- */
.about-media {
  position: relative;
}

.about-media img {
  border-radius: var(--alab-radius);
  width: 100%;
}

.badge-float {
 position: absolute;
    left: -60px;
    bottom: 9px;
    background: #fff;
    border-radius: var(--alab-radius);
    box-shadow: 0 12px 30px rgba(20, 60, 45, 0.18);
    padding: 14px 12px;
    text-align: center;
    width: 210px;
}

.badge-float .icon-box {
  width: 50px;
  height: 50px;
  background: var(--alab-green-light);
  color: var(--alab-dark);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 22px;
}

.badge-float .line {
  width: 34px;
  height: 3px;
  background: var(--alab-accent);
  margin: 8px auto 0;
  border-radius: 2px;
}

/* ---------------- Feature Icon Strip ---------------- */
.feature-strip {
  background: #fff;
    border-radius: var(--alab-radius);
    box-shadow: 0 8px 30px rgba(20, 60, 45, 0.07);
    padding: 10px 10px;
    margin: 30px 0;
    border: 1px solid lightgray;
}

.feature-item {
    text-align: center;
    padding: 10px 5px;
    border-right: 1px solid lightgray;
    min-height: 200px;

}
/* Remove border from the last item */
.feature-strip .row > div:last-child .feature-item {
    border-right: none;
}
.feature-item .icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--alab-green-light);
  color: var(--alab-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px;
}

.feature-item h6 {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 12px;
  margin-bottom: 0;
  color: #7a8a84;
}

/* ---------------- Mission / Vision ---------------- */
.mv-image img {
  border-radius: var(--alab-radius);
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.mv-item {
  display: flex;
  gap: 20px;
  margin-bottom: 26px;
}

.mv-item .icon-circle {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--alab-green-light);
  color: var(--alab-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.mv-item h5 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.mv-item p {
  margin-bottom: 0;
  font-size: 14.5px;
}

/* ---------------- Brands ---------------- */
.brands-section h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 34px;
}

.brand-card {
  border: 1px solid var(--alab-border);
  border-radius: var(--alab-radius);
  padding: 26px 10px;
  text-align: center;
  height: 100%;
  transition: all 0.25s ease;
}

.brand-card:hover {
  box-shadow: 0 10px 24px rgba(20,60,45,0.1);
  transform: translateY(-3px);
  border-color: transparent;
}

.brand-card .brand-logo {
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 14px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-card .brand-name {
  font-size: 13px;
  color: #8a9a94;
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--alab-dark-2);
  color: #c4d6cd;
  padding-top: 60px;
  font-size: 14px;
}

.site-footer h6 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 16px;
}

.site-footer a {
  color: #c4d6cd;
}

.site-footer a:hover {
  color: var(--alab-accent);
}

.site-footer ul {
  list-style: none;
  padding-left: 0;
}

.site-footer ul li {
  margin-bottom: 10px;
}

.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.site-footer .footer-brand .brand-text-title,
.site-footer .footer-brand .logo-mark {
  color: #fff;
}

.site-footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  margin-right: 8px;
  font-size: 14px;
}

.site-footer .social-icons a:hover {
  background: var(--alab-accent);
}

.site-footer .contact-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.site-footer .contact-item i {
  color: var(--alab-accent);
  margin-top: 4px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 30px;
  padding: 18px 0;
  font-size: 13px;
  text-align: center;
  color: #9db3aa;
}

.whatsapp-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: #25D366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  z-index: 999;
}

.whatsapp-float:hover {
  color: #fff;
  background: #1ebc59;
}

/* ---------------- Contact Page ---------------- */
.contact-hero {
  position: relative;
  padding: 50px 0;
}

.contact-hero-img {
  height: 220px;
  border-radius: var(--alab-radius);
  overflow: hidden;
}

.contact-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--alab-border);
  border-radius: var(--alab-radius);
  padding: 34px;
  box-shadow: 0 10px 30px rgba(20,60,45,0.06);
  height: 100%;
}

.contact-card h4 {
  font-weight: 700;
  margin-bottom: 6px;
}

.contact-card .sub {
  font-size: 14px;
  color: #8a9a94;
  margin-bottom: 26px;
}

.form-control, .form-select {
  border: 1px solid var(--alab-border);
  border-radius: 6px;
  padding: 11px 14px 11px 42px;
  font-size: 14.5px;
}

.form-control:focus, .form-select:focus {
  border-color: var(--alab-accent);
  box-shadow: 0 0 0 3px rgba(22,167,101,0.12);
}

.input-icon-group {
  position: relative;
}

.input-icon-group i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #9db3aa;
  font-size: 14px;
}

.form-select.input-icon-group,
.form-select {
  padding-left: 14px;
}

.privacy-note {
  font-size: 12.5px;
  color: #8a9a94;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.privacy-note i {
  color: var(--alab-accent);
}

.info-list .info-row {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--alab-border);
}

.info-list .info-row:last-child {
  border-bottom: none;
}

.info-list .info-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--alab-green-light);
  color: var(--alab-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.info-list h6 {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 15px;
}

.info-list p {
  margin-bottom: 0;
  font-size: 14px;
}

.map-panel {
  background: #fff;
  border: 1px solid var(--alab-border);
  border-radius: var(--alab-radius);
  padding: 30px;
  height: 100%;
}

.map-embed {
  border-radius: var(--alab-radius);
  overflow: hidden;
  height: 100%;
  min-height: 260px;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

.mini-features {
  border-top: 1px solid var(--alab-border);
  padding: 40px 0;
}

.mini-features .feature-item .icon-circle {
  width: 54px;
  height: 54px;
  font-size: 20px;
}

@media (max-width: 991px) {
  .badge-float {
    position: static;
    width: 100%;
    margin-top: -20px;
  }
  .page-hero h1 {
    font-size: 30px;
  }
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  /* ===== Responsive ===== */
  @media (max-width: 991.98px){
    .hero h1{font-size:2rem;}
    .hero{
      padding:48px 0 32px;
      background-image:
        linear-gradient(180deg, rgba(6,26,21,.88) 0%, rgba(6,26,21,.88) 100%),
        url('https://loremflickr.com/1600/900/medical,laboratory,instrument');
    }
    .hero-image-wrap{min-height:auto;}
    .contact-float-card{
      position:static;
      width:100%;
      margin-top:24px;
    }
    section{padding:42px 0;}
    .search-box input{width:150px;}
  }
  @media (max-width: 767.98px){
    .hero h1{font-size:1.7rem;}
    .navbar-al .btn-al-primary{padding:.5rem 1rem; font-size:.85rem;}
    .filter-tabs{overflow-x:auto; white-space:nowrap; padding-bottom:8px;}
    .filter-tabs .btn{margin-bottom:8px;}
    .stats-bar .stat-item{margin-bottom:20px; justify-content:flex-start;}
  }