/* ============================= */
/* SECTION */
/* ============================= */

.advant-section{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
flex-wrap:wrap;
overflow:hidden;
margin-top: 50px;
}

/* ============================= */
/* TEXT */
/* ============================= */

.advant-text{
flex:1;
min-width:300px;
    padding: 30px
}

.advant-label{
background:#e8f4ff;
color:#1a73e8;
padding:6px 16px;
border-radius:30px;
font-size:14px;
display:inline-block;
margin-bottom:15px;
}

.advant-text h3{
font-size:34px;
margin-bottom:15px;
color:var(--primaryColor);
}

.advant-text p{
color:var(--primaryColor);
line-height:1.9;
max-width:420px;
}

/* ============================= */
/* IMAGE CONTAINER */
/* ============================= */

.advant-image{
flex:1;
min-width:320px;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

/* ============================= */
/* WORKER IMAGE */
/* ============================= */

.worker-img{
width:340px;
position:relative;
z-index:3;
opacity:0;
transform:translateY(60px);
animation:workerEnter 1s ease forwards;
animation-delay:.3s;
}

@keyframes workerEnter{

from{
opacity:0;
transform:translateY(60px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ============================= */
/* DECORATIVE CIRCLES */
/* ============================= */

.advant-circle{
position:absolute;
width:360px;
height:360px;
background:var(--primaryColor);
border-radius:50%;
z-index:1;
}

.advant-circle::after{
content:"";
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:#f4faff;
top:-30px;
left:-30px;
z-index:-1;
}

/* ============================= */
/* ICON CARDS */
/* ============================= */

.advant-icon{

position:absolute;

width:120px;
height:120px;

background:white;

border-radius:50%;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;

padding:10px;

box-shadow:
0 12px 25px rgba(0,0,0,0.12),
0 4px 10px rgba(0,0,0,0.08);

transition:.35s;

z-index:4;

opacity:0;
transform:translateY(60px);

animation:iconEnter .8s forwards;
}

/* ICON */

.icon-circle{
width:48px;
height:48px;
border-radius:50%;
background:var(--helperColor);
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
margin-bottom:6px;
}

/* TEXT */

.advant-icon p{

font-size:12px;
line-height:1.2;
color:var(--primaryColor);

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

overflow:hidden;

max-width:80px;

}

/* ============================= */
/* HOVER */
/* ============================= */

.advant-icon:hover{

transform:translateY(-8px) scale(1.05);

box-shadow:
0 20px 40px rgba(0,0,0,0.18),
0 6px 15px rgba(0,0,0,0.12);

}

/* ============================= */
/* POSITIONS */
/* ============================= */

.top-right{
top:40px;
right:60px;
animation-delay:.2s;
}

.top-left{
top:40px;
left:60px;
animation-delay:.4s;
}

.bottom-right{
bottom:40px;
right:60px;
animation-delay:.6s;
}

.bottom-left{
bottom:40px;
left:60px;
animation-delay:.8s;
}

/* ============================= */
/* ICON ANIMATION */
/* ============================= */

@keyframes iconEnter{

from{
opacity:0;
transform:translateY(80px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ============================= */
/* TABLET (600px → 1000px) */
/* ============================= */

@media (max-width:1000px){

.worker-img{
width:300px;
}

.advant-circle{
width:300px;
height:300px;
}

.advant-circle::after{
width:350px;
height:350px;
}

.advant-icon{
width:100px;
height:100px;
}

.icon-circle{
width:42px;
height:42px;
font-size:16px;
}

.top-right{
top:30px;
right:30px;
}

.top-left{
top:30px;
left:30px;
}

.bottom-right{
bottom:30px;
right:30px;
}

.bottom-left{
bottom:30px;
left:30px;
}

}

/* ============================= */
/* RESPONSIVE LAYOUT */
/* ============================= */

@media (max-width:992px){

.advant-section{
flex-direction:column;
text-align:center;
}

.advant-text p{
margin:auto;
}

}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width:600px){

.worker-img{
width:260px;
}

.advant-circle{
width:260px;
height:260px;
}

.advant-circle::after{
width:300px;
height:300px;
}

.advant-icon{

width:90px;
height:90px;

}

.icon-circle{
width:40px;
height:40px;
font-size:14px;
}

.advant-icon p{
font-size:11px;
max-width:70px;
}

.top-right{
right:20px;
}

.top-left{
left:20px;
}

.bottom-right{
right:20px;
}

.bottom-left{
left:20px;
}

}