/* About page styles (extends style.css) */

/* Page banner */
.page-banner{position:relative;padding:0;background:var(--secondary) url("https://hadadelimited.com/assets/images/sliders/5.jpg") center/cover no-repeat;color:#fff}
.page-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,22,22,.93) 0%,rgba(22,22,22,.75) 55%,rgba(3,43,86,.6) 100%)}
.page-banner .container{position:relative;padding-top:110px;padding-bottom:110px}
.page-banner h1{color:#fff;font-size:clamp(34px,6vw,58px);font-weight:800;margin-bottom:16px}
.page-banner p{max-width:600px;color:#e2e2e2;font-size:clamp(16px,2vw,19px)}
.crumbs{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:9px 20px;border-radius:50px;font-size:14px;font-weight:500}
.crumbs a:hover{color:var(--accent)}
.crumbs span.cur{color:var(--accent)}

/* Overview */
.ov-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.ov-text p{margin-bottom:16px}
.ov-text .specialty{margin-bottom:0}
.ov-imgs{position:relative;padding-bottom:70px}
.ov-imgs .big{width:82%;aspect-ratio:4/4.6;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.ov-imgs .small{position:absolute;right:0;bottom:0;width:56%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--radius);border:8px solid #fff;box-shadow:var(--shadow)}
.ov-imgs::before{content:"";position:absolute;left:-16px;top:-16px;width:50%;height:46%;border:6px solid var(--primary);border-radius:var(--radius);z-index:-1}
.ov-imgs .badge-years{right:auto;left:-10px;bottom:auto;top:46%}

/* Strength stats */
.strengths{background:var(--secondary);padding:0}
.str-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.str{padding:42px 22px;text-align:center;border-right:1px solid rgba(255,255,255,.1);color:#cfcfcf;font-size:14.5px;transition:.3s}
.str:last-child{border-right:0}
.str:hover{background:var(--primary);color:#fff}
.str:hover .sn{background:var(--accent)}
.str .sn{width:56px;height:56px;border-radius:50%;background:var(--primary);color:var(--secondary);display:grid;place-items:center;margin:0 auto 16px;font-size:24px;transition:.3s}
.str .sn svg{color:#fff}
.str:hover .sn svg{color:var(--secondary)}
.str h4{color:#fff;font-size:17px;margin-bottom:8px}

/* Vision & Mission */
.vm{background:var(--bg-soft)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.vm-card{background:#fff;border-radius:var(--radius);padding:46px 40px;position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05);border-bottom:6px solid var(--primary);transition:.35s}
.vm-card:nth-child(2){border-bottom-color:var(--accent)}
.vm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vm-card::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:var(--primary-soft);opacity:.7}
.vm-card .vi{position:relative;z-index:1;width:72px;height:72px;border-radius:20px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:32px;margin-bottom:24px}
.vm-card:nth-child(2) .vi{background:var(--accent);color:var(--secondary)}
.vm-card h3{position:relative;z-index:1;font-size:28px;margin-bottom:14px}
.vm-card p{position:relative;z-index:1;font-size:17px}

/* Core values */
.values-head{max-width:700px;margin:0 auto 52px}
.val-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.val{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px 22px;text-align:center;transition:.35s;position:relative;overflow:hidden}
.val::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:var(--primary);transition:.35s;z-index:0}
.val>*{position:relative;z-index:1}
.val:hover::before{height:100%}
.val:hover{border-color:var(--primary);transform:translateY(-6px);box-shadow:var(--shadow)}
.val:hover h4,.val:hover p{color:#fff}
.val .vi2{width:64px;height:64px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin:0 auto 18px;font-size:28px;transition:.3s}
.val:hover .vi2{background:var(--accent);color:var(--secondary)}
.val h4{font-size:18px;margin-bottom:10px;transition:.3s}
.val p{font-size:14.5px;transition:.3s}

/* Services strip */
.core{position:relative;color:#fff;background:var(--secondary) url("https://hadadelimited.com/assets/images/about/2.jpg") center/cover fixed no-repeat}
.core::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,22,.92),rgba(3,43,86,.85))}
.core .container{position:relative}
.core h2{color:#fff}
.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.core-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:36px 30px;backdrop-filter:blur(4px);transition:.3s}
.core-card:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-6px)}
.core-card .ci{width:58px;height:58px;border-radius:16px;background:var(--accent);color:var(--secondary);display:grid;place-items:center;font-size:26px;margin-bottom:20px}
.core-card h4{color:#fff;font-size:20px;margin-bottom:6px}
.core-card p{color:#dcdcdc;font-size:15px}

/* Testimonials */
.testi{background:var(--bg-soft)}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px}
.tcard{background:#fff;border-radius:var(--radius);padding:38px 36px;position:relative;box-shadow:0 6px 20px rgba(0,0,0,.05);border-left:6px solid var(--primary);transition:.35s}
.tcard:nth-child(2){border-left-color:var(--accent)}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tcard .qm{font-family:"Sora",sans-serif;font-size:90px;line-height:.6;color:var(--primary-soft);font-weight:800;height:42px}
.tcard p{font-size:17px;color:var(--secondary);margin-bottom:24px}
.who{display:flex;align-items:center;gap:14px}
.who .av{width:54px;height:54px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-family:"Sora",sans-serif;font-weight:700;font-size:18px}
.tcard:nth-child(2) .av{background:var(--accent);color:var(--secondary)}
.who h5{font-size:16px}
.who small{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:6px}
.who small svg{color:var(--primary)}
.stars{color:#ffc400;letter-spacing:3px;font-size:16px;margin-bottom:12px}

/* Contact strip */
.contact-strip{background:var(--primary);padding:60px 0;color:#fff}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:26px;align-items:center}
.cs-item{display:flex;gap:16px;align-items:center}
.cs-item .ico{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:24px;flex:none}
.cs-item small{display:block;opacity:.85;font-size:13px}
.cs-item a,.cs-item span.v{font-family:"Sora",sans-serif;font-weight:600;font-size:16px;color:#fff;word-break:break-word}
.cs-item a:hover{color:var(--accent)}

@media (max-width:1080px){
  .str-grid{grid-template-columns:repeat(3,1fr)}
  .str{border-bottom:1px solid rgba(255,255,255,.1)}
  .val-grid{grid-template-columns:repeat(3,1fr)}
  .cs-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .page-banner .container{padding-top:80px;padding-bottom:80px}
  .ov-grid,.vm-grid,.testi-grid{grid-template-columns:1fr}
  .ov-grid{gap:50px}
  .ov-imgs{max-width:560px;margin:0 auto;width:100%}
  .core-grid{grid-template-columns:1fr}
  .core{background-attachment:scroll}
}
@media (max-width:640px){
  .str-grid{grid-template-columns:1fr 1fr}
  .str:last-child{grid-column:1/-1}
  .val-grid{grid-template-columns:1fr 1fr;gap:12px}
  .val{padding:26px 14px}
  .vm-card{padding:34px 26px}
  .tcard{padding:30px 24px}
  .cs-grid{grid-template-columns:1fr}
  .ov-imgs .badge-years{left:6px}
}
@media (max-width:420px){
  .val-grid{grid-template-columns:1fr}
}