/* HERO */
#hero {
    background:black;
    color:white;
    position:relative;
    padding:0;
}
#hero .container {
    z-index:1;
    position:absolute;
    bottom:5%;
    left:50%;
    transform: translateX(-50%)
}
#hero .hero-slider {
    z-index:0;
}
#hero .swiper-slide {
    max-width:1400px;
}
#hero .swiper-slide-prev,
#hero .swiper-slide-next {
    opacity: 0.5;
}
#hero .custom {
    font-weight:bold;
    font-size:1.5rem;
    line-height: 1.3;
}
@media (max-width: 767px) {
    #hero .custom {
        font-size:1rem;
        line-height: 1.5;
    }
}

/* ABOUT */
#about {
    background: #E8E8E1;
}

/* CLIENTS */
#clients {
    background: #1B1F38;
    color:white;
    text-align:center;
    padding: 15px 0;
}
#clients h2 {
    color:#ADC6BF;
}
#clients .swiper {
    margin: 30px 0;
}
#clients .swiper-wrapper {
    transition-timing-function: linear !important;
}
#clients .swiper-slide {
    display:flex;
    flex-direction:column;
    gap:30px;
    width:240px;
}
#clients img {
    padding:10px 40px;
    border-radius:30px;
    height:75px;
    width:100%;
    object-fit:contain;
}

/* TEAM */
#team {
    background: #D4E2DE;
}
#team img.desktop {
    padding:30px;
}
#team img.mobile {
    padding-top:30px;
}

/* CAPABILITIES */
#capabilities .row > div {
    margin-bottom:30px;
}
#capabilities .wrapper {
    height:100%;
    padding:30px;
    border-radius:30px;
}
@media (max-width: 767px) {
    #capabilities .wrapper {
        height:auto;
    }
    #capabilities .wrapper.first {
        padding:0;
    }
    #capabilities h2 {
        margin-bottom:0;
    }
}
#capabilities img {
    max-width:45px;
    margin-bottom:15px;
}

/* APPROACH */
#approach {
    background:#D4E2DE;
}
#approach .ac {
    background:transparent;
    border:0;
    border-bottom: 1px solid #39586D;
    padding-bottom: 10px;
}
#approach .ac-trigger {
    color:#1B1F38;
    font-family:inherit;
    font-weight:400;
    font-size:1.5rem;
}
#approach .ac-trigger:focus {
    color: #1B1F38;
}
#approach .is-active .ac-trigger {
    color:#04A497;
}
#approach .is-active .ac-trigger:after {
    content: "\2013";
}

/* SECTORS */
#sectors {
    background:#F8F8F7;
}
#sectors .swiper {
    margin:30px;
    border-radius:30px;
}
@media (max-width: 767px) {
    #sectors .swiper {
        margin:0;
    }
}
#sectors .swiper-slide {
    height: auto;
}
#sectors .wrapper {
    padding:60px;
    height:100%;
}
@media (max-width: 991px) {
    #sectors .wrapper {
        padding:30px;
    }
} 
#sectors li {
    margin-bottom:15px;
    font-size:1.2rem;
}
@media (max-width: 991px) {
    #sectors li {
        font-size:1rem;
    }
} 
#sectors .callout {
    background: white;
    border-radius:10px;
    overflow:hidden;
    margin-top:30px;
    text-align:center;
}
#sectors .callout h4 {
    background:#39586D;
    color:white;
    padding:5px 10px;
}
#sectors .callout img {
    max-width:240px;
    padding:15px;
}
@media (max-width: 767px) {
    #sectors .callout img {
        max-width:180px;
        padding:5px 5px 10px;
    }
} 

/* TRANSACTIONS */
#transactions {
    text-align:center;
}
#transactions .filter-buttons {
  margin-bottom: 30px;
}
#transactions .filter-buttons button {
  margin: 5px;
  padding: 10px 20px;
  border: none;
  color:#39586D;
  background:transparent;
  border:1px solid #39586D;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}
#transactions .filter-buttons button.active,
#transactions .filter-buttons button:hover {
  background: #39586D;
  color: white;
}
#transactions .logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* default: mobile = 2 per row */
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  #transactions .logo-grid {
    grid-template-columns: repeat(4, 1fr); /* desktop = 4 per row */
  }
}
#transactions .load-more {
  margin: 0 auto 30px;
  cursor: pointer;
  border:0;
}

/* ----- Logo card ----- */
#transactions .logo {
  position: relative;
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  place-items: center;
  min-height: 120px;
  cursor: pointer;
  isolation: isolate;
}

/* main logo */
#transactions .logo > img {
    width: 100%;
  max-height:120px;
  max-width:240px;
  object-fit: contain;
  pointer-events: none;
}

/* INSIGHTS */
#insights {
    background:#E8E8E0;
}
#insights h3 {
    color:#39586D;
    border-bottom: 1px solid #39586D;
    padding: 10px 0;
    margin:0 15px;
}
#insights h3:first-child {
    border-top: 1px solid #39586D;
}
@media (max-width: 767px) {
    #insights h3 {
        margin:0;
    }
    #insights h3:first-child {
        margin-top:30px;
    }
}