/*==========================================================
ABOUT PAGE
==========================================================*/

.about-banner{

padding:50px 0 80px;

background:#faf7f2;

position:relative;

overflow:hidden;

}

.page-banner-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(22,87,58,.05),
rgba(193,154,107,.05)
);

}

.page-banner-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

position:relative;

z-index:2;

}

.page-banner-content h1{

font-size:3.2rem;

line-height:1.15;

margin:20px 0;

}

.page-banner-content h1 span{

color:var(--primary-color);

display:block;

}

.page-banner-content p{

font-size:1.1rem;

line-height:1.8;

margin-bottom:35px;

color:#555;

max-width:650px;

}

.page-banner-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.page-banner-image img{

width:100%;

border-radius:28px;

display:block;

box-shadow:0 25px 70px rgba(0,0,0,.12);

}

/*==========================================================
ABOUT PAGE RESPONSIVE
==========================================================*/

@media (max-width:991px){

.page-banner-grid{

grid-template-columns:1fr;

text-align:center;

}

.page-banner-content{

order:2;

}

.page-banner-image{

order:1;

}

.page-banner-content p{

margin-inline:auto;

}

.page-banner-buttons{

justify-content:center;

}

.page-banner-content h1{

font-size:2.4rem;

}

}

/*==========================================================
OUR STORY
==========================================================*/

.about-story{

padding:50px 0;

background:#fff;

}

.about-story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-story-image{

position:relative;

}

.about-story-image img{

width:100%;

display:block;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.10);

}

.story-badge{

position:absolute;

left:30px;

bottom:30px;

background:#fff;

padding:14px 22px;

border-radius:50px;

display:flex;

align-items:center;

gap:10px;

box-shadow:0 10px 30px rgba(0,0,0,.10);

font-weight:600;

}

.story-badge i{

color:var(--primary-color);

}

.about-story-content h2{

margin:20px 0;

font-size:2.8rem;

line-height:1.2;

}

.about-story-content h2 span{

color:var(--primary-color);

display:block;

}

.about-story-content p{

font-size:1.08rem;

line-height:1.9;

margin-bottom:20px;

color:#555;

}

.story-highlights{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:35px;

}

.story-item{

display:flex;

align-items:center;

gap:12px;

padding:16px 18px;

background:#faf7f2;

border-radius:16px;

font-weight:600;

}

.story-item i{

color:var(--primary-color);

font-size:20px;

}

/*==========================================================
ABOUT STORY RESPONSIVE
==========================================================*/

@media(max-width:991px){

.about-story{

padding:70px 0;

}

.about-story-grid{

grid-template-columns:1fr;

gap:40px;

}

.about-story-content{

text-align:center;

}

.about-story-content h2{

font-size:2.2rem;

}

.story-highlights{

grid-template-columns:1fr;

}

.story-badge{

left:50%;

transform:translateX(-50%);

bottom:20px;

}

}

/*==========================================================
MISSION & VISION
==========================================================*/

.mission-vision{

padding:50px 0;

background:#faf7f2;

}

.mission-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

margin-top:60px;

}

.mission-card{

background:#fff;

padding:45px;

border-radius:28px;

text-align:center;

transition:.35s ease;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.mission-card:hover{

transform:translateY(-8px);

box-shadow:0 22px 55px rgba(0,0,0,.12);

}

.mission-icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#16573a,#2e8b57);

color:#fff;

font-size:34px;

}

.mission-card h3{

margin-bottom:18px;

font-size:1.7rem;

}

.mission-card p{

color:#555;

line-height:1.9;

font-size:1.05rem;

}

/*==========================================================
MISSION RESPONSIVE
==========================================================*/

@media(max-width:991px){

.mission-vision{

padding:70px 0;

}

.mission-grid{

grid-template-columns:1fr;

gap:25px;

}

.mission-card{

padding:35px 28px;

}

}


/*==========================================================
WHY CHOOSE US
==========================================================*/

.about-why{

padding:50px 0;

background:#ffffff;

}

.about-why-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:60px;

}

.about-why-card{

background:#faf7f2;

padding:38px 30px;

border-radius:24px;

transition:.35s;

border:1px solid rgba(22,87,58,.08);

}

.about-why-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(0,0,0,.08);

background:#fff;

}

.about-why-card i{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(135deg,#16573a,#2e8b57);

color:#fff;

font-size:28px;

margin-bottom:22px;

}

.about-why-card h3{

margin-bottom:15px;

font-size:1.35rem;

}

.about-why-card p{

line-height:1.8;

color:#555;

font-size:1rem;

}


/*==========================================================
ABOUT WHY RESPONSIVE
==========================================================*/

@media(max-width:991px){

.about-why{

padding:70px 0;

}

.about-why-grid{

grid-template-columns:1fr;

gap:22px;

}

.about-why-card{

text-align:center;

}

.about-why-card i{

margin:0 auto 20px;

}

}

/*==========================================================
OUR VALUES
==========================================================*/

.our-values{

padding:50px 0;

background:#faf7f2;

}

.values-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:60px;

}

.value-card{

background:#fff;

padding:40px;

border-radius:24px;

position:relative;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.06);

transition:.35s;

}

.value-card:hover{

transform:translateY(-8px);

box-shadow:0 22px 55px rgba(0,0,0,.10);

}

.value-number{

font-size:3rem;

font-weight:700;

color:rgba(22,87,58,.10);

margin-bottom:20px;

line-height:1;

}

.value-card h3{

margin-bottom:16px;

font-size:1.5rem;

}

.value-card p{

line-height:1.9;

color:#555;

}


/*==========================================================
OUR VALUES RESPONSIVE
==========================================================*/

@media(max-width:991px){

.our-values{

padding:70px 0;

}

.values-grid{

grid-template-columns:1fr;

gap:22px;

}

.value-card{

padding:32px 26px;

}

.value-number{

font-size:2.4rem;

}

}

/*==========================================================
HYGIENE & QUALITY
==========================================================*/

.quality-section{

padding:50px 0;

background:#ffffff;

}

.quality-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.quality-image img{

width:100%;

display:block;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.10);

}

.quality-content h2{

margin:20px 0;

font-size:2.8rem;

line-height:1.2;

}

.quality-content h2 span{

display:block;

color:var(--primary-color);

}

.quality-content p{

line-height:1.9;

color:#555;

margin-bottom:30px;

}

.quality-list{

display:flex;

flex-direction:column;

gap:18px;

}

.quality-item{

display:flex;

align-items:center;

gap:14px;

padding:16px 18px;

background:#faf7f2;

border-radius:14px;

font-weight:600;

}

.quality-item i{

color:var(--primary-color);

font-size:20px;

}

/*==========================================================
QUALITY RESPONSIVE
==========================================================*/

@media(max-width:991px){

.quality-section{

padding:70px 0;

}

.quality-grid{

grid-template-columns:1fr;

gap:40px;

}

.quality-content{

text-align:center;

}

.quality-content h2{

font-size:2.2rem;

}

.quality-item{

justify-content:center;

}

}

/*==========================================================
ABOUT CTA
==========================================================*/

.about-cta{

padding:50px 0;
text-align:center;
background:linear-gradient(135deg,#16573a,#2d6a4f);

}

.about-cta-box{

max-width:900px;

margin:auto;

text-align:center;

color:#fff;

}

.about-cta .section-tag{

background:rgba(255,255,255,.15);

color:#fff;

}

.about-cta h2{

	font-size:clamp(2rem,5vw,3.6rem);
    line-height:1.15;
    color:#fff;
    margin-bottom:18px;
    letter-spacing:-0.5px;

}

.about-cta h2 span{

display:block;

color:#ffd166;

}

.about-cta p{

font-size:1.1rem;

line-height:2;

max-width:760px;

margin:0 auto 40px;

opacity:.95;

color:#fff;

}

.about-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

color:#fff;

}

/*==========================================================
ABOUT CTA RESPONSIVE
==========================================================*/

@media(max-width:991px){

.about-cta{

padding:70px 0;

}

.about-cta h2{

font-size:2.2rem;

}

.about-cta p{

font-size:1rem;

}

.about-cta-buttons{

flex-direction:column;

align-items:center;

}

.about-cta-buttons .btn{

width:100%;

max-width:320px;

}

}