/* BRAMY GROUP — About / Company section */
.bramy-about-section{
  position:relative;
  width:100%;
  min-height:440px;
  overflow:hidden;
  font-family:"Heebo",Arial,sans-serif;
  color:#fff;
  background-color:#051c33;
  background-image:var(--bramy-about-bg);
  background-size:cover;
  background-position:left center;
  background-repeat:no-repeat;
}

.bramy-about-section *,
.bramy-about-section *::before,
.bramy-about-section *::after{box-sizing:border-box}

/* Photo stays visible on the LEFT; navy dominates the RIGHT */
.bramy-about-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(5,28,51,.05) 0%,
      rgba(5,28,51,.18) 28%,
      rgba(5,28,51,.78) 45%,
      rgba(5,28,51,.96) 58%,
      rgba(5,28,51,.99) 100%
    );
}

.bramy-about-inner{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1450px;
  min-height:440px;
  margin:0 auto;
  display:grid;
  /* Physical order matches mockup: image | content | benefits */
  direction:ltr;
  grid-template-columns:
    minmax(260px,.9fr)
    minmax(420px,1.25fr)
    minmax(300px,.95fr);
  align-items:stretch;
}

.bramy-about-image-space{min-height:1px}

.bramy-about-content{
  direction:rtl;
  padding:45px 40px 45px 28px;
  text-align:right;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bramy-about-number{
  font-size:13px;
  color:rgba(255,255,255,.75);
  letter-spacing:1px;
  margin-bottom:8px;
}

.bramy-about-number::before{
  content:"";
  display:inline-block;
  width:42px;
  height:1px;
  background:rgba(255,255,255,.45);
  vertical-align:middle;
  margin-left:12px;
}

.bramy-about-content h2{
  margin:0;
  font-size:48px;
  line-height:1.05;
  font-weight:800;
  color:#fff;
}

.bramy-about-subtitle{
  margin-top:12px;
  font-size:24px;
  line-height:1.2;
  font-weight:500;
  color:#fff;
}

.bramy-about-description{
  margin:22px 0 0;
  max-width:600px;
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  color:rgba(255,255,255,.88);
}

.bramy-about-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:28px;
  align-self:flex-start;
  min-width:235px;
  height:54px;
  padding:0 25px;
  background:#fff;
  color:#0B2347;
  font-family:"Heebo",Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border:0;
  border-radius:2px;
  transition:transform .25s ease, box-shadow .25s ease;
}

.bramy-about-button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  color:#0B2347;
}

.bramy-about-button-arrow{
  font-size:21px;
  line-height:1;
}

.bramy-about-benefits{
  direction:rtl;
  height:100%;
  min-height:440px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-left:1px solid rgba(255,255,255,.16);
}

.bramy-benefit{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px 16px;
  border-left:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}

.bramy-benefit:nth-child(odd){border-left:0}
.bramy-benefit:nth-child(3),
.bramy-benefit:nth-child(4){border-bottom:0}

.bramy-benefit-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:13px;
  color:#fff;
}

.bramy-benefit-icon svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bramy-benefit h3{
  margin:0;
  font-size:17px;
  line-height:1.35;
  font-weight:700;
  color:#fff;
}

@media(max-width:1100px){
  .bramy-about-inner{
    grid-template-columns:1.2fr .95fr;
  }
  .bramy-about-image-space{display:none}
  .bramy-about-content{padding:42px 28px}
  .bramy-about-section{
    background-position:30% center;
  }
  .bramy-about-section::before{
    background:
      linear-gradient(
        90deg,
        rgba(5,28,51,.55) 0%,
        rgba(5,28,51,.9) 35%,
        rgba(5,28,51,.98) 100%
      );
  }
}

@media(max-width:700px){
  .bramy-about-section{
    min-height:auto;
    background-position:left center;
  }
  .bramy-about-section::before{
    background:
      linear-gradient(
        90deg,
        rgba(5,28,51,.7),
        rgba(5,28,51,.97)
      );
  }
  .bramy-about-inner{
    width:100%;
    display:block;
    min-height:auto;
  }
  .bramy-about-content{
    padding:55px 25px 35px;
  }
  .bramy-about-content h2{font-size:36px}
  .bramy-about-subtitle{font-size:20px}
  .bramy-about-description{
    font-size:16px;
    line-height:1.65;
  }
  .bramy-about-button{
    width:100%;
    align-self:stretch;
  }
  .bramy-about-benefits{
    border-left:0;
    min-height:260px;
  }
  .bramy-benefit{min-height:130px}
}

@media(max-width:420px){
  .bramy-about-content{padding:45px 20px 30px}
  .bramy-about-content h2{font-size:32px}
  .bramy-benefit h3{font-size:15px}
}


@media (max-width:700px){
  .bramy-about-section{overflow:hidden}
  .bramy-about-content{padding:48px 18px 28px}
  .bramy-about-content h2{font-size:clamp(28px,8.5vw,34px)}
  .bramy-about-subtitle{font-size:18px}
  .bramy-about-description{font-size:15px;line-height:1.65}
  .bramy-about-button{
    width:100%;
    min-width:0;
    height:48px;
    font-size:15px;
  }
  .bramy-about-benefits{min-height:0}
  .bramy-benefit{
    min-height:118px;
    padding:18px 12px;
  }
  .bramy-benefit-icon{width:40px;height:40px;margin-bottom:10px}
  .bramy-benefit-icon svg{width:28px;height:28px}
  .bramy-benefit h3{font-size:14px;line-height:1.3}
}
@media (max-width:360px){
  .bramy-about-content{padding:40px 14px 24px}
  .bramy-benefit{min-height:108px;padding:14px 8px}
  .bramy-benefit h3{font-size:13px}
}