:root{
  --abtbackground: linear-gradient(
    to right,
    #f3f8ea 0%,
    #eef5e2 25%,
    #e7f1d8 45%,
    #f6f9f1 70%,
    #ffffff 100%
  );

  --grass:#6e8f2f;
  --bronze:#b68b2a;
  --white:#ffffff;
  --bg:#f6f7fb;
  --text:#0f172a;
  --muted:#475569;
}

/* ===================== ACE SECTION ===================== */
.abt-ace-section{
  padding: 80px 5%;
  background: var(--abtbackground);
}

.abt-ace-container{
  display: flex;
  gap: 40px;
}

.abt-ace-left,
.abt-ace-right{
  flex: 1;
}

.abt-ace-left{
  background: #ffffff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.06);
}

.abt-ace-left h2{
  font-size: 2rem;
  margin: 14px 0 12px 0;
  color: var(--text);
}

.abt-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.abt-lg{
  height: 200px;
  width: 200px;
  object-fit: contain;
}

/* RIGHT COLUMN - TRIANGLE LAYOUT */
.abt-ace-right{
  position: relative;
  height: 420px;
}

/* Cards */
.abt-ace-card{
  position: absolute;
  width: 220px;
  padding: 30px 20px 25px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  text-align: left;

  opacity: 0;
  transform: translateY(26px);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.9s ease,
              box-shadow 0.3s ease;
}

.abt-ace-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

.abt-card-accuracy{
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(26px);
}

.abt-card-compassion{
  bottom: 0;
  left: 0;
}

.abt-card-excellence{
  bottom: 0;
  right: 0;
}

.abt-ace-icon{
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grass), var(--bronze));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* reveal on scroll */
.abt-inview .abt-ace-card{
  opacity: 1;
  transform: translateY(0);
}
.abt-inview .abt-card-accuracy{
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.05s;
}
.abt-inview .abt-card-compassion{ transition-delay: 0.18s; }
.abt-inview .abt-card-excellence{ transition-delay: 0.30s; }

/* Responsive ACE layout */
@media (max-width: 992px){
  .abt-ace-container{ flex-direction: column; }

  .abt-ace-right{
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .abt-ace-card{
    position: relative;
    width: 100%;
    transform: translateY(26px);
  }

  .abt-inview .abt-ace-card{ transform: translateY(0); }

  .abt-card-accuracy,
  .abt-card-compassion,
  .abt-card-excellence{
    top: auto; bottom: auto; left: auto; right: auto;
  }
}

/* ===================== ACCORDION ===================== */
/* IMPORTANT: since accordion is inside left column, keep padding small */
.abt-accordion-wrap{
  padding: 18px 0 0 0;
  background: transparent;
}

/* Container */
.abt-accordion{
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(182,139,42,0.25);
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.06);
  overflow: hidden;
}
.toggle-hd{ color: #253608;}

/* Slide-in on page load (for accordion only) */
.abt-slide-in{
  opacity: 0;
  transform: translateY(18px);
  animation: abtSlideIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
@keyframes abtSlideIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* Buttons */
.abt-acc-btn{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font: 600 1.05rem/1.2 "Inter", system-ui, sans-serif;
  color: var(--text);
}

.abt-acc-btn:not(:first-of-type){
  border-top: 1px solid rgba(15,23,42,0.08);
}

.abt-acc-btn i{
  color: var(--grass);
  transition: transform .25s ease;
}

/* Open state */
.abt-acc-btn.is-open{
  background: linear-gradient(
    to right,
    rgba(110,143,47,0.10),
    rgba(182,139,42,0.06),
    rgba(255,255,255,0)
  );
}
.abt-acc-btn.is-open i{ transform: rotate(180deg); }

/* Panels */
.abt-acc-panel{
  overflow: hidden;
  max-height: 0;           /* closed by default */
  padding: 0 18px;         /* side padding always */
  color: var(--muted);
  line-height: 1.65;
  transition: max-height .35s ease, padding .2s ease;
}

.abt-acc-btn.is-open + .abt-acc-panel{
  padding-bottom: 16px;
}

.abt-acc-panel p{
  margin: 12px 0 0 0;
}
/********************bottom row***********************************************/
.abt-two-col-flex{
  background-color: white;
  display: flex;
  min-height: 10vh;
  width: 100%;
}

.abt-left-col{
  flex: 0 0 66.666%;   /* 2/3 width */
  display: flex;
  align-items: center; /* vertical center */
  padding: 5%;
  
}

.abt-right-col{
  flex: 0 0 33.333%;   /* 1/3 width */
  display: flex;
  align-items: center; 
  justify-content: center; /* center content */
  background-image: url("http://localhost/ace5/assets/images/slide2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dir-two-col-flex{
  display: flex;
  width: 100%;
  min-height: 5vh;
  background-color: #ffffff;
}

.dir-left-col{
  flex: 0 0 33.333%;   /* 1/3 width */
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.dir-right-col{
  flex: 1;            /* remaining 2/3 */
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.abt-mapmap{
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(15,42,31,.10);
  background: var(--soft2);
  min-height: 360px;
}
.abt-map iframe{width:100%; height: 380px; border:0}