/* ====================================
ABOUT HERO
==================================== */

.about-hero{

padding-top:120px;
padding-bottom:40px;

}

.about-hero-card{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

align-items:center;

padding:20px;

background:#ffffff;

border-radius:30px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

}

.about-left h1{

font-size:48px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

}

.about-left p{

font-size:20px;

line-height:1.8;

color:#555;

margin-bottom:35px;

}

.about-right img{

width:100%;

height:auto;

display:block;

border-radius:24px;

}

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

.philosophy,
.how-we-work,
.vision-mission,
.commitment,
.who-we-are,
.what-we-do{

padding-top:25px;

}

.philosophy .container,
.how-we-work .container,
.vision-mission .container,
.commitment .container,
.who-card,
.what-we-do .container,
.about-intro-card{

background:#ffffff;

padding:45px;

border-radius:30px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

animation:
floating 4.5s ease-in-out infinite;

}

.about-intro-card::after,
.who-card::after,
.what-we-do .container::after,
.philosophy .container::after,
.how-we-work .container::after,
.vision-mission .container::after,
.commitment .container::after{

content:"";

position:absolute;

top:-160%;

left:-140%;

width:90px;

height:380%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:rotate(28deg);

animation:
shineMove 8s linear infinite;

pointer-events:none;

}

.commitment-card{

background:#efefef;

padding:50px;

border-radius:14px;

text-align:center;

min-height:260px;

display:flex;

flex-direction:column;

justify-content:center;

position:relative;

card-shadow:
0 8px 18px rgba(0,0,0,.04),
0 2px 8px rgba(0,0,0,.03);

transition:
transform .25s ease,
background .25s ease,
box-shadow .25s ease;

}

.commitment-card:hover{

background:#ffffff;

border:1px solid #111;

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

box-shadow:
0 24px 55px rgba(0,0,0,.12),
0 10px 24px rgba(0,0,0,.08);

}



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

.section-main-title{

text-align:center;

font-size:34px;

font-weight:800;

margin-bottom:18px;

}

.section-subtitle{

text-align:center;

font-size:15px;

color:#666;

max-width:700px;

margin:0 auto 50px;

line-height:1.8;

}

/* ====================================
ABOUT INTRO
==================================== */

.about-intro{

padding-top:120px;
padding-bottom:0px;

}

.about-intro-card{

background:#ffffff;

padding:45px;

border-radius:30px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

text-align:center;

position:relative;

overflow:hidden;

animation:
floating 4.5s ease-in-out infinite;

}



.about-intro-card h1{

font-size:42px;

font-weight:800;

line-height:1.25;

margin-bottom:20px;

max-width:800px;

margin-left:auto;
margin-right:auto;

}

.about-intro-card p{

font-size:17px;

line-height:1.8;

color:#555;

max-width:850px;

margin:0 auto 16px;

}

.about-badges{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.about-badges span{

background:#efefef;

padding:14px 24px;

border-radius:10px;

font-weight:700;

}

/* ====================================
WHO WE ARE
==================================== */

.who-we-are{

padding-top:40px;

}

.who-card{

background:#ffffff;

padding:45px;

border-radius:30px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

animation:
floating 4.5s ease-in-out infinite;

}

.who-card h2{

font-size:34px;

font-weight:800;

margin-bottom:25px;

text-align:center;

}

.who-card p{

font-size:16px;

line-height:1.9;

color:#555;

max-width:950px;

margin:0 auto 20px;

text-align:center;

}

/* ====================================
WHAT WE DO
==================================== */

.what-we-do{

padding-top:40px;

}

.what-we-do .container{

background:#ffffff;

padding:45px;

border-radius:30px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

animation:
floating 4.5s ease-in-out infinite;

}

.services-grid-about{

display:grid;

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

gap:22px;

margin-top:50px;

}

.service-about-box{

background:#efefef;

padding:40px;

border-radius:14px;

text-align:center;

min-height:240px;

display:flex;

flex-direction:column;

justify-content:center;

box-shadow:

0 8px 18px rgba(0,0,0,.04),

0 2px 8px rgba(0,0,0,.03);

transition:

transform .25s ease,

background .25s ease,

box-shadow .25s ease;

}

.service-about-box:hover{

transform:scale(1.04);

background:#ffffff;

box-shadow:

0 24px 55px rgba(0,0,0,.12),

0 10px 24px rgba(0,0,0,.08);

}

.service-about-box h3{

font-size:22px;

font-weight:800;

margin-bottom:18px;

}

.service-about-box p{

font-size:15px;

line-height:1.9;

color:#555;

}

/* ====================================
PHILOSOPHY
==================================== */

.philosophy-grid{

display:grid;

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

gap:20px;

}

.philosophy-box{

background:#efefef;

padding:35px;

border-radius:14px;

text-align:center;

position:relative;

box-shadow:
0 8px 18px rgba(0,0,0,.04),
0 2px 8px rgba(0,0,0,.03);

transition:
transform .25s ease,
background .25s ease,
box-shadow .25s ease;

}

.philosophy-box:hover{

background:#ffffff;

border:1px solid #111;

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

box-shadow:
0 24px 55px rgba(0,0,0,.12),
0 10px 24px rgba(0,0,0,.08);

}

.philosophy-box h3{

transition:all .25s ease;

font-size:20px;

font-weight:800;

margin-bottom:15px;

}

.philosophy-box:hover h3{

font-size:22px;

text-shadow:
0 0 12px rgba(0,0,0,.18);

}

.philosophy-box p{

font-size:15px;

line-height:1.8;

color:#555;

}

/* ====================================
HOW WE WORK
==================================== */

.process-grid{

display:grid;

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

gap:20px;

}

.process-box{

background:#efefef;

padding:30px;

border-radius:14px;

text-align:center;

position:relative;

box-shadow:
0 8px 18px rgba(0,0,0,.04),
0 2px 8px rgba(0,0,0,.03);

transition:
transform .25s ease,
background .25s ease,
box-shadow .25s ease;

}

.process-box:hover{

transform:scale(1.04);

background:#ffffff;

box-shadow:
0 24px 55px rgba(0,0,0,.12),
0 10px 24px rgba(0,0,0,.08);

}

.process-number{

display:block;

font-size:30px;

font-weight:800;

margin-bottom:18px;

}

.process-box h3{

font-size:18px;

font-weight:800;

margin-bottom:15px;

}

.process-box p{

font-size:15px;

line-height:1.8;

color:#555;

}

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

.vision-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:stretch;

gap:30px;

}

.vision-box{

background:#efefef;

padding:50px;

border-radius:14px;

text-align:center;

min-height:260px;

display:flex;

flex-direction:column;

justify-content:center;

position:relative;

box-shadow:
0 8px 18px rgba(0,0,0,.04),
0 2px 8px rgba(0,0,0,.03);

transition:
transform .25s ease,
background .25s ease,
box-shadow .25s ease;

}

.vision-box:hover{

background:#ffffff;

border:1px solid #111;

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

box-shadow:
0 24px 55px rgba(0,0,0,.12),
0 10px 24px rgba(0,0,0,.08);

}

.vision-box h3{

font-size:26px;

font-weight:800;

margin-bottom:20px;

}

.vision-box:hover h3{

text-shadow:
0 0 12px rgba(0,0,0,.18);

}

.vision-box p{

font-size:16px;

line-height:1.9;

color:#555;

}

/* ====================================
COMMITMENT
==================================== */

.commitment{

padding-bottom:40px;

}

.commitment-card{

text-align:center;

}

.commitment-card h2{

font-size:34px;
font-weight:800;
margin-bottom:20px;

}

.commitment-card p{

max-width:850px;
margin:0 auto 20px;
font-size:17px;
line-height:1.9;
color:#555;

}


.commitment-card p{

max-width:850px;

margin:0 auto 20px;

font-size:17px;

line-height:1.9;

color:#555;

}

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

@media (max-width:1000px){

.about-hero-card{
grid-template-columns:1fr;
}

.services-grid-about{
grid-template-columns:1fr 1fr;
}

.philosophy-grid{
grid-template-columns:repeat(2,1fr);
}

.process-grid{
grid-template-columns:repeat(2,1fr);
}

.vision-grid{
grid-template-columns:1fr;
}

}



@media (max-width:768px){

.about-hero{

padding-top:100px;
padding-bottom:20px;

}

.about-hero-card{

grid-template-columns:1fr;

padding:25px;

}

.about-left{

text-align:center;

}

.about-left h1{

font-size:32px;

margin-bottom:18px;

}

.about-left p{

font-size:17px;

margin-bottom:25px;

}

.about-right{

order:-1;

}

.about-right img{

border-radius:18px;

}

.about-intro{

padding-top:100px;

}

.about-intro-card{

padding:25px;

}

.about-intro-card h1{

font-size:30px;

}

.about-intro-card p{

font-size:16px;

}

.about-badges{

gap:12px;

}

.about-badges span{

width:100%;

text-align:center;

}

.who-card{

padding:25px;

}

.who-card h2{

font-size:28px;

}

.who-card p{

font-size:15px;

}

.what-we-do .container,
.philosophy .container,
.how-we-work .container,
.vision-mission .container,
.commitment .container{

padding:25px;

}

.services-grid-about,
.philosophy-grid,
.process-grid,
.vision-grid{

grid-template-columns:1fr;

}

.service-about-box{

padding:25px;

min-height:auto;

}

.philosophy-box{

padding:25px;

}

.process-box{

padding:25px;

}

.vision-box{

padding:25px;

min-height:auto;

}

.section-main-title{

font-size:28px;

}

.section-subtitle{

font-size:15px;

margin-bottom:30px;

}

.commitment-card h2{

font-size:28px;

}

.commitment-card p{

font-size:16px;

}

}



@media (max-width:480px){

.about-left h1{

font-size:28px;

}

.about-intro-card h1{

font-size:26px;

}

.section-main-title{

font-size:24px;

}

.service-about-box h3{

font-size:20px;

}

.philosophy-box h3{

font-size:18px;

}

.process-number{

font-size:24px;

}

.vision-box h3{

font-size:22px;

}

.about-left p,
.about-intro-card p,
.who-card p,
.service-about-box p,
.philosophy-box p,
.process-box p,
.vision-box p,
.commitment-card p{

font-size:15px;

line-height:1.7;

}

}

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

@media (max-width:768px){

.about-hero{

padding-top:100px;
padding-bottom:20px;

}

.about-hero-card{

grid-template-columns:1fr;
padding:20px;
gap:25px;

}

.about-left{

text-align:center;

}

.about-left h1{

font-size:30px;
margin-bottom:15px;

}

.about-left p{

font-size:16px;
line-height:1.7;
margin-bottom:20px;

}

.about-right img{

border-radius:18px;

}

/* Cards */

.about-intro-card,
.who-card,
.what-we-do .container,
.philosophy .container,
.how-we-work .container,
.vision-mission .container,
.commitment .container{

padding:22px;
border-radius:20px;

}

/* Titles */

.section-main-title{

font-size:28px;

}

.section-subtitle{

font-size:15px;
margin-bottom:30px;

}

/* Intro */

.about-intro-card h1{

font-size:28px;

}

.about-intro-card p{

font-size:15px;

}

.about-badges{

gap:10px;

}

.about-badges span{

width:100%;
text-align:center;
padding:12px;

}

/* Services */

.services-grid-about{

grid-template-columns:1fr;
gap:15px;

}

.service-about-box{

padding:25px;
min-height:auto;

}

.service-about-box h3{

font-size:20px;

}

.service-about-box p{

font-size:15px;

}

/* Philosophy */

.philosophy-grid{

grid-template-columns:1fr;
gap:15px;

}

.philosophy-box{

padding:25px;

}

/* Process */

.process-grid{

grid-template-columns:1fr;
gap:15px;

}

.process-box{

padding:25px;

}

/* Vision */

.vision-grid{

grid-template-columns:1fr;
gap:15px;

}

.vision-box{

padding:25px;
min-height:auto;

}

.vision-box h3{

font-size:22px;

}

/* Who */

.who-card h2{

font-size:28px;

}

.who-card p{

font-size:15px;

}

/* Commitment */

.commitment-card h2{

font-size:28px;

}

.commitment-card p{

font-size:15px;

}

}

/* ===================================
DESKTOP / MOBILE VISIBILITY
=================================== */

.desktop-only{
    display:block;
}

.mobile-only{
    display:none;
}

@media (max-width:768px){

.desktop-only{
    display:none !important;
}

.mobile-only{
    display:block !important;
}

}