body{
margin:0;
font-family: 'Segoe UI', sans-serif;
background:#f7f9f7;
color:#2e2e2e;
line-height:1.6;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}
.hero{
background:linear-gradient(to right, rgba(46,125,50,0.9), rgba(139,195,74,0.85)), url('technology-bg.jpg') center/cover no-repeat;
color:#fff;
padding:80px 0;
}
.hero h1{
font-size:42px;
margin-bottom:15px;
font-weight:600;
}
.hero p{
max-width:650px;
font-size:16px;
opacity:0.95;
}
.platforms{
margin-top:30px;
background:#ffffffd9;
padding:20px 25px;
border-radius:12px;
color:#2e2e2e;
max-width:520px;
}
.platforms ul{
padding-left:18px;
margin:0;
}
.platforms li{
margin-bottom:6px;
font-size:14px;
}
/* ===============================
   SECTION
================================ */
.section-technology{
  padding-top:130px;
  padding-bottom:130px;
}

/* ===============================
   TABS
================================ */
.tech-tabs{
  position:relative;
  display:flex;
  gap:42px;
  padding-bottom:16px;
  margin-bottom:44px;
  align-items:flex-end;
}

/* Base horizontal line */
.tech-tabs::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(0,0,0,0.15);
}

/* Tab buttons */
.tech-tab{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-size:15px;
  color:#777;
  position:relative;
  white-space:nowrap;
  will-change:transform;
  transition:
  font-size 0.35s ease,
  color 0.35s ease,
  transform 0.35s ease;
}

/* Inactive tabs */
.tech-tab:not(.active){
  transform:scale(0.94);
}

/* Active tab */
.tech-tab.active{
  font-size:20px;
  font-weight:600;
  color:#111;
  transform:scale(1);
}

/* Animated underline */
.tech-tab::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-16px;
  height:3px;
  width:0%;
  background:linear-gradient(to right, rgba(46,125,50,0.9), rgba(139,195,74,0.85));
  transition:width 0.35s ease;
}

.tech-tab.active::after{
  width:100%;
}

/* Hover */
.tech-tab:hover{
  color:#000;
}

/* ===============================
   CONTENT PANELS
================================ */
.tech-content{
  margin-top:20px;
}

.tech-panel{
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition:0.4s ease;
}

.tech-panel.active{
  display:block;
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   PANEL INNER LAYOUT
================================ */
.tech-panel-inner{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:40px;
  align-items:center;
}

/* Text */
.tech-text ul{
  padding-left:18px;
}

.tech-text li{
  margin-bottom:12px;
  line-height:1.6;
  color:#444;
  font-size:15px;
}

/* Image */
.tech-image img{
  width:100%;
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:768px){
  .tech-tabs{
    gap:28px;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .tech-tabs::-webkit-scrollbar{
    display:none;
  }

  .tech-tab.active{
    font-size:18px;
  }

  .tech-panel-inner{
    grid-template-columns:1fr;
  }

  .tech-image{
    order:-1;
  }
}


.tech-circle-row{
  display:flex;
  justify-content:center;
  gap:50px;
  margin-top:40px;
  flex-wrap:nowrap;
}

.tech-circle{
  width:110px;
  height:110px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  /* White blurry glow */
  box-shadow:
    0 0 0 12px rgba(255,255,255,0.35),
    0 0 40px 18px rgba(255,255,255,0.45);
}

.tech-circle img{
  width:65%;
  height:65%;
  object-fit:contain;
  z-index:2;
}