:root{--aid-ink:#124149;--aid-teal:#168d8b;--aid-red:#c72d3c;--aid-mint:#eef9f8;--aid-muted:#6b8182}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Vazirmatn",Tahoma,sans-serif;color:var(--aid-ink);font-size:14px;background:#fff}.container-xl{max-width:1160px}.aid-header{height:68px;background:#fff;position:relative;z-index:10;border-bottom:1px solid #edf2f1}.aid-header .navbar{height:100%;padding-top:0;padding-bottom:0}.aid-brand{display:flex;align-items:center;gap:8px;color:#17464a!important;margin:0}.aid-brand b{display:block;font-size:15px;font-weight:900;white-space:nowrap}.aid-brand small{display:block;font-size:9px;color:#708485;margin-top:2px}.crescent{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#c82e3e;color:#fff;font-size:35px;position:relative;overflow:hidden}.crescent:after{content:"";position:absolute;width:25px;height:29px;border-radius:50%;background:#fff;right:-5px;top:0}.crescent i{position:relative;z-index:1;opacity:.1}.aid-header .nav-link{font-size:12px;font-weight:600;color:#52696a;padding:12px 12px!important;white-space:nowrap}.aid-header .nav-link.active{color:#b52e3d;position:relative}.aid-header .nav-link.active:after{content:"";position:absolute;bottom:3px;right:12px;width:42px;height:2px;background:#c33442;border-radius:4px}.header-tools{display:flex;align-items:center;gap:22px}.search-link{font-size:17px;color:#17474a}.login-link{font-size:12px;color:#216064;text-decoration:none;border:1px solid #8db8b7;border-radius:14px;padding:7px 14px;white-space:nowrap}.aid-hero{height:366px;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;background:#f1fbfa}.hero-photo{grid-column:1;grid-row:1;background-image:linear-gradient(90deg,transparent 68%,#f1fbfa 100%),url("assets/aid-hero.png");background-size:cover;background-position:center 53%;min-width:0}.hero-content{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:25px max(calc((100vw - 1160px)/2),35px) 25px 38px;text-align:right;direction:rtl}.hero-tag{background:#e2f4f2;color:#388a88;padding:7px 15px;border-radius:30px;font-size:12px;font-weight:600;margin-bottom:10px}.hero-content h1{font-size:33px;line-height:1.45;font-weight:900;color:#123c43;margin:0 0 11px}.hero-content h1 em{font-style:normal;color:var(--aid-red)}.hero-content p{font-size:15px;line-height:1.85;color:#33575c;margin:0 0 23px}.hero-buttons{display:flex;align-items:center;gap:12px}.red-button,.outline-button{border-radius:15px;padding:13px 22px;font-size:13px;font-weight:700;white-space:nowrap}.red-button{background:var(--aid-red);border-color:var(--aid-red);color:#fff;box-shadow:0 5px 12px #b9203026}.red-button i{margin-right:13px}.outline-button{border:1px solid #8dbab7;color:#206267;background:#eff9f8}.outline-button i{margin-left:8px;color:var(--aid-teal)}.skills-section{background:#eff9f8;padding:35px 0 38px}.section-title{display:flex;align-items:center;justify-content:center;gap:18px;text-align:center;margin:0 auto 24px}.section-title h2{font-size:21px;font-weight:900;margin:0;color:#14454b;white-space:nowrap}.section-title>span{height:1px;width:110px;background:linear-gradient(90deg,transparent,#77aaa8)}.section-title>span:last-child{transform:rotate(180deg)}.skill-list{padding-inline:10px}.skill-item{text-align:center;min-height:176px;color:#17494d;display:flex;flex-direction:column;align-items:center}.skill-ring{width:124px;height:124px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--progress) var(--percent),#d6e4e2 0);position:relative;transform:rotate(-45deg);margin-bottom:6px}.skill-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#eff9f8}.skill-ring span{z-index:1;transform:rotate(45deg);font-size:23px;font-weight:800;color:#19454b}.skill-item>i{font-size:19px;color:#197e7c;margin:-48px 0 37px;z-index:2;height:22px}.skill-item h3{font-size:13px;font-weight:800;line-height:1.55;margin:0;color:#193e43}.uses-section{padding:29px 0 34px;background:#fff}.uses-section .section-title{margin-bottom:24px}.use-list{padding-inline:4px}.use-card{height:267px;border-radius:18px;overflow:hidden;text-align:center;position:relative;box-shadow:0 7px 20px #2344410d;padding-bottom:14px}.red-card{background:linear-gradient(180deg,#fff 46%,#fdf1f2)}.teal-card{background:linear-gradient(180deg,#fff 46%,#eff8f7)}.use-photo{height:128px;background-image:var(--photo);background-size:cover;background-position:center;position:relative}.use-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#ffffff12,transparent 35%)}.use-icon{width:52px;height:52px;position:relative;margin:-27px auto 3px;border-radius:50%;display:grid;place-items:center;color:white;font-size:21px;z-index:1;box-shadow:0 4px 10px #14393a18}.red-card .use-icon{background:var(--aid-red)}.teal-card .use-icon{background:var(--aid-teal)}.use-copy{padding:0 13px}.use-copy h3{font-size:13px;font-weight:800;line-height:1.6;margin:7px 0 9px;color:#17444a}.use-copy p{font-size:11px;line-height:1.8;color:#718486;margin:0}.benefits-section{padding:31px 0 33px;background:#eff9f8}.benefits-section .section-title{margin-bottom:23px}.benefit-list{padding-inline:4px}.benefit-card{min-height:198px;border-radius:17px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 15px 17px;box-shadow:0 6px 18px #193e3d0a}.benefit-red{background:linear-gradient(145deg,#fff8f8,#fdf0f1)}.benefit-teal{background:linear-gradient(145deg,#fff,#f2f9f8)}.benefit-card>span{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;margin-bottom:9px}.benefit-red>span{background:var(--aid-red)}.benefit-teal>span{background:var(--aid-teal)}.benefit-card h3{font-size:13px;font-weight:800;line-height:1.6;margin:0 0 7px}.benefit-card p{font-size:11px;line-height:1.8;color:#738687;margin:0}.aid-footer{height:74px;position:relative;overflow:hidden;background:#eef9f8;display:flex;align-items:center;justify-content:center}.footer-ribbon{position:absolute;bottom:-49px;height:70px;width:58%;transform:skewY(-5deg)}.ribbon-teal{right:-3%;background:#15928e;transform:skewY(5deg)}.ribbon-red{left:-3%;background:#c92d3b;transform:skewY(-5deg)}.footer-line{display:flex;justify-content:center;align-items:center;gap:13px;z-index:1;margin-top:-28px;color:#52787a;font-size:12px}.footer-line span{height:1px;width:45px;background:#b5cecc}.register-anchor{position:absolute;bottom:0}
@media(max-width:991px){.aid-header{height:auto;min-height:66px}.aid-header .navbar{min-height:66px}.aid-header .navbar-collapse{background:white;padding:8px 14px 15px;border-top:1px solid #edf2f1}.aid-header .nav-link{padding:10px!important}.aid-header .nav-link.active:after{display:none}.header-tools{padding-top:8px}.aid-hero{height:auto;min-height:340px;grid-template-columns:1fr 1fr}.hero-content{padding:24px 25px}.hero-content h1{font-size:28px}.hero-content p{font-size:13px}.hero-photo{background-position:47% center}.section-title h2{font-size:19px}.section-title>span{width:75px}.skill-ring{width:112px;height:112px}.use-card{height:260px}}
@media(max-width:575px){.aid-hero{display:flex;flex-direction:column-reverse;min-height:0}.hero-content{padding:28px 22px 25px;align-items:flex-start}.hero-content h1{font-size:26px}.hero-content p{font-size:12px;margin-bottom:17px}.hero-buttons{gap:8px;flex-wrap:wrap}.red-button,.outline-button{font-size:11px;padding:11px 13px}.hero-photo{height:230px;width:100%;background-image:linear-gradient(0deg,#f1fbfa00 75%,#f1fbfa 100%),url("assets/aid-hero.png");background-position:center 56%}.skills-section{padding:27px 0}.section-title{gap:9px;margin-bottom:18px}.section-title h2{font-size:16px;white-space:normal}.section-title>span{width:26px;flex-shrink:0}.skill-list{row-gap:18px!important}.skill-item{min-height:155px}.skill-ring{width:100px;height:100px}.skill-ring span{font-size:20px}.skill-item>i{margin-top:-41px;margin-bottom:30px;font-size:17px}.skill-item h3{font-size:11px}.uses-section,.benefits-section{padding:25px 0}.use-list,.benefit-list{--bs-gutter-x:14px;--bs-gutter-y:14px}.use-card{height:250px;border-radius:14px}.use-photo{height:105px}.use-icon{width:45px;height:45px;font-size:18px;margin-top:-23px}.use-copy{padding:0 8px}.use-copy h3{font-size:11px}.use-copy p{font-size:10px}.benefit-card{min-height:186px;padding:13px 9px}.benefit-card>span{width:48px;height:48px;font-size:21px}.benefit-card h3{font-size:11px}.benefit-card p{font-size:10px}.aid-footer{height:70px}}

/* Reference-matched photo crops and proportions at the source 1000px layout. */
.aid-hero {
  height: 36.6vw;
  min-height: 0;
  grid-template-columns: 57.6% 42.4%;
}
.hero-photo {
    background-image: url("/FirstAidImages/aid-reference.jpeg");
    background-repeat: no-repeat;
    background-size: 100vw 150vw;
    background-position: left -6.8vw;
}
.use-photo {
  background-image: var(--photo);
  background-repeat: no-repeat;
  background-size: 100vw 150vw;
  background-position: var(--photo-pos);
}
@media (max-width: 991px) {
  .aid-hero {
    height: 36.6vw;
    min-height: 0;
    grid-template-columns: 57.6% 42.4%;
  }
}
@media (max-width: 575px) {
  .aid-hero {
    height: auto;
    min-height: 0;
  }
  .hero-photo {
    height: 63.5vw;
    background-size: 173.6vw 260.4vw;
    background-position: left -11.8vw;
  }
  .use-photo {
    background-size: 250vw 375vw;
    background-position: var(--photo-small);
  }
}

/* Crisp vector footer ribbons, matching the reference at every screen size. */
.aid-footer {
  height: 72px;
  min-height: 72px;
  background-color: #eef9f8;
  background-image: none;
}
.aid-footer .footer-ribbon {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 44%;
  transform: none;
}
.aid-footer .ribbon-teal {
  left: 0;
  right: auto;
  background: #15928e;
  clip-path: polygon(0 10%, 100% 100%, 0 100%);
}
.aid-footer .ribbon-teal::before,
.aid-footer .ribbon-teal::after {
  content: "";
  position: absolute;
  inset: 0;
}
.aid-footer .ribbon-teal::before {
  background: #e7f8f5;
  clip-path: polygon(0 52%, 100% 91%, 100% 96%, 0 57%);
}
.aid-footer .ribbon-teal::after {
  background: #08716e;
  clip-path: polygon(0 61%, 100% 100%, 0 100%);
}
.aid-footer .ribbon-red {
  right: 0;
  left: auto;
  background: #c92d3b;
  clip-path: polygon(100% 10%, 0 100%, 100% 100%);
}
.aid-footer .footer-line {
  position: relative;
  z-index: 2;
}