/* Madar Al Arab — agency page isolated layout fix v4 (2026-09-18).
   Agency-only: the site header scrolls normally instead of sticking to the viewport. */
.site-header{
  position:relative!important;
  top:auto!important;
}
/* Madar Al Arab — agency page isolated layout fix v3 (2026-09-18).
   Goal: static section heading, compact spacing, balanced 2x2 + full-width fifth card. */
.page-hero{
  padding-bottom:24px;
}
.agency-benefits-section{
  padding-top:40px;
  scroll-margin-top:96px;
}
.agency-benefits-section .section-head{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  margin:0 0 30px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.agency-benefits-section .section-title{
  margin:0;
}
.agency-benefits{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.agency-benefits .benefit:nth-child(5){
  grid-column:1/-1;
}
@media(max-width:760px){
  .page-hero{padding-bottom:18px}
  .agency-benefits-section{
    padding-top:28px;
    scroll-margin-top:80px;
  }
  .agency-benefits-section .section-head{
    margin-bottom:22px !important;
  }
  .agency-benefits{
    grid-template-columns:1fr;
  }
  .agency-benefits .benefit:nth-child(5){
    grid-column:auto;
  }
}


/* v5 — definitive agency benefit card layout fix.
   Root cause: .card::before is absolutely positioned in the global stylesheet;
   .benefit::before reused the same pseudo-element for numbering without resetting position.
   The number therefore sat on top of the text instead of occupying layout space. */
.agency-benefits .benefit{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  column-gap:18px!important;
  align-items:start!important;
  align-content:start!important;
}
.agency-benefits .benefit::before{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  width:48px!important;
  height:48px!important;
  margin:0!important;
  flex:none!important;
}
.agency-benefits .benefit p{
  grid-column:2!important;
  grid-row:1!important;
  margin:2px 0 0!important;
  min-width:0!important;
  width:auto!important;
  text-align:right!important;
}
@media(max-width:760px){
  .agency-benefits .benefit{
    grid-template-columns:44px minmax(0,1fr)!important;
    column-gap:14px!important;
  }
  .agency-benefits .benefit::before{
    width:44px!important;
    height:44px!important;
  }
}