.quality{

padding:100px 10%;
background:#f7fbff;
text-align:center;

}

.quality-sub{

color:#0b6ed0;
margin-bottom:50px;

}

.quality-container{

display:flex;
gap:40px;
justify-content:center;
align-items:flex-start;

}

/* left */

.quality-left{

flex:1;
text-align:left;

}

.qa-item{

display:flex;
gap:10px;
background:white;
padding:15px 20px;
margin-bottom:12px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);

opacity:0;
transform:translateY(20px);
animation:qaFade 0.6s forwards;

}

.qa-item span{

color:#0b6ed0;
font-size:20px;

}

/* right */

.quality-right{

flex:1;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
text-align:left;

opacity:0;
transform:translateY(20px);
animation:qaFade 0.8s forwards;

}

.quality-right ul{

margin-top:20px;

}

.quality-right li{

margin-bottom:10px;

}

/* animation delay */

.qa-item:nth-child(1){animation-delay:0.2s;}
.qa-item:nth-child(2){animation-delay:0.4s;}
.qa-item:nth-child(3){animation-delay:0.6s;}
.qa-item:nth-child(4){animation-delay:0.8s;}
.qa-item:nth-child(5){animation-delay:1s;}

/* animation */

@keyframes qaFade{

to{

opacity:1;
transform:translateY(0);

}

}
@media(max-width:768px){

.quality-container{

flex-direction:column;

}

.quality-left,
.quality-right{

width:100%;

}

}
.pharma{

padding:100px 10%;
background:white;
text-align:center;

}

.pharma-sub{

color:#0b6ed0;
margin-bottom:50px;

}

.pharma-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.pharma-card{

background:#f7fbff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;

opacity:0;
transform:translateY(20px);
animation:pharmaFade 0.8s forwards;

}

.pharma-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);

}

.pharma-icon{

font-size:40px;
margin-bottom:15px;

}

.pharma-card h3{

margin-bottom:15px;
font-size:20px;

}

.pharma-card ul{

text-align:left;

}

.pharma-card li{

margin-bottom:8px;
color:#444;

}

/* animation delay */

.pharma-card:nth-child(1){animation-delay:0.2s;}
.pharma-card:nth-child(2){animation-delay:0.4s;}
.pharma-card:nth-child(3){animation-delay:0.6s;}
.pharma-card:nth-child(4){animation-delay:0.8s;}

@keyframes pharmaFade{

to{

opacity:1;
transform:translateY(0);

}

}
@media(max-width:1024px){

.pharma-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.pharma-grid{

grid-template-columns:1fr;

}

}
.qc{

padding:100px 10%;
background:#f7fbff;
text-align:center;

}

.qc-sub{

color:#0b6ed0;
margin-bottom:50px;

}

.qc-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.qc-card{

background:white;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;

opacity:0;
transform:translateY(30px);
animation:qcFade 0.8s forwards;

}

.qc-card:hover{

transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);

}

.qc-icon{

font-size:45px;
margin-bottom:15px;
color:#0b6ed0;

}

.qc-card h3{

margin-bottom:15px;
font-size:20px;

}

.qc-card p{

color:#555;
line-height:1.6;

}

/* animation delay */

.qc-card:nth-child(1){animation-delay:0.2s;}
.qc-card:nth-child(2){animation-delay:0.4s;}
.qc-card:nth-child(3){animation-delay:0.6s;}
.qc-card:nth-child(4){animation-delay:0.8s;}

@keyframes qcFade{

to{

opacity:1;
transform:translateY(0);

}

}
@media(max-width:1024px){

.qc-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.qc-grid{

grid-template-columns:1fr;

}

}
.supply{

padding:100px 10%;
background:white;
text-align:center;

}

.supply-sub{

color:#0b6ed0;
margin-bottom:50px;

}

.supply-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.supply-card{

background:#f7fbff;
padding:35px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;

opacity:0;
transform:translateY(30px);
animation:supplyFade 0.8s forwards;

}

.supply-card:hover{

transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);

}

.supply-icon{

font-size:45px;
margin-bottom:15px;

}

.supply-card h3{

margin-bottom:15px;

}

.supply-card p{

color:#555;
line-height:1.6;

}

/* warehouse box */

.warehouse{

margin-top:60px;
background:#0b6ed0;
color:white;
padding:35px;
border-radius:10px;
max-width:600px;
margin-left:auto;
margin-right:auto;

}

.warehouse-icon{

font-size:40px;
margin-bottom:10px;

}

.warehouse-text{

opacity:0.9;

}

/* animation delays */

.supply-card:nth-child(1){animation-delay:0.2s;}
.supply-card:nth-child(2){animation-delay:0.4s;}
.supply-card:nth-child(3){animation-delay:0.6s;}

@keyframes supplyFade{

to{

opacity:1;
transform:translateY(0);

}

}
@media(max-width:1024px){

.supply-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.supply-grid{

grid-template-columns:1fr;

}

}