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

.about-page-hero{

position:relative;

padding:120px 0;

background:linear-gradient(rgba(0,51,102,.82),rgba(0,51,102,.82)),
url("../images/about-banner.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

overflow:hidden;

}

.about-page-hero::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(135deg,rgba(229,106,8,.18),transparent);

pointer-events:none;

}

.about-page-hero-content{

position:relative;

z-index:2;

max-width:760px;

margin:auto;

text-align:center;

color:#fff;

}

.about-page-hero-content span{

display:inline-block;

padding:9px 22px;

background:#E56A08;

color:#fff;

font-size:14px;

font-weight:600;

border-radius:50px;

margin-bottom:20px;

letter-spacing:.5px;

}

.about-page-hero-content h1{

font-size:58px;

font-weight:700;

line-height:1.2;

margin-bottom:18px;

}

.about-page-hero-content p{

font-size:18px;

line-height:32px;

max-width:650px;

margin:auto;

opacity:.95;

}


/*=========================================================
BREADCRUMB
=========================================================*/

.about-page-breadcrumb{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

margin-top:35px;

flex-wrap:wrap;

}

.about-page-breadcrumb a{

color:#fff;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.about-page-breadcrumb a:hover{

color:#E56A08;

}

.about-page-breadcrumb span{

color:#FFD8B5;

font-weight:600;

}

.about-page-breadcrumb i{

font-size:12px;

color:#ffffff;

}


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

.about-page-story{

padding:100px 0;

background:#ffffff;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-heading span{

display:inline-block;

padding:8px 20px;

background:#E56A08;

color:#fff;

font-size:14px;

font-weight:600;

border-radius:50px;

margin-bottom:18px;

}

.section-heading h2{

font-size:42px;

color:#003366;

margin-bottom:20px;

font-weight:700;

}

.section-heading p{

font-size:17px;

line-height:30px;

color:#666;

}


/*=========================================================
STORY GRID
=========================================================*/

.about-page-story-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:60px;

align-items:center;

}

.about-page-story-left h2{

font-size:42px;

color:#003366;

margin-bottom:25px;

line-height:1.3;

}

.about-page-tag{

display:inline-block;

padding:8px 20px;

background:#E56A08;

color:#fff;

font-size:14px;

font-weight:600;

border-radius:50px;

margin-bottom:18px;

}

.about-page-story-left p{

font-size:16px;

line-height:31px;

color:#666;

margin-bottom:20px;

}


/*=========================================================
RIGHT SIDE CARDS
=========================================================*/

.about-page-story-right{

display:grid;

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

gap:25px;

}

.about-page-card{

background:#fff;

padding:35px 28px;

border-radius:18px;

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

transition:.35s;

border:1px solid #f3f3f3;

}

.about-page-card:hover{

transform:translateY(-10px);

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

}

.about-page-icon{

width:75px;

height:75px;

background:#E56A08;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:22px;

}

.about-page-icon i{

font-size:28px;

color:#fff;

}

.about-page-card h3{

font-size:22px;

font-weight:700;

color:#003366;

margin-bottom:14px;

}

.about-page-card p{

font-size:15px;

line-height:28px;

color:#666;

}

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

.about-page-why{

padding:100px 0;

background:#F8FAFD;

}

.about-why-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.why-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

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

transition:.35s;

border:1px solid #edf2f7;

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:#E56A08;

transform:scaleX(0);

transition:.35s;

}

.why-card:hover::before{

transform:scaleX(1);

}

.why-card:hover{

transform:translateY(-12px);

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

}

.why-card i{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#E56A08;

border-radius:50%;

font-size:34px;

color:#fff;

margin-bottom:25px;

transition:.35s;

}

.why-card:hover i{

background:#003366;

transform:rotate(8deg);

}

.why-card h3{

font-size:24px;

font-weight:700;

color:#003366;

margin-bottom:15px;

}

.why-card p{

font-size:15px;

line-height:28px;

color:#666;

}


/*=========================================================
STATISTICS
=========================================================*/

.about-stats{

padding:90px 0;

background:#003366;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-box{

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

padding:40px 25px;

border-radius:18px;

text-align:center;

backdrop-filter:blur(6px);

transition:.35s;

}

.stat-box:hover{

transform:translateY(-8px);

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

}

.stat-box h2{

font-size:48px;

font-weight:700;

color:#E56A08;

margin-bottom:12px;

}

.stat-box p{

font-size:17px;

font-weight:500;

color:#fff;

}


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

.mission-vision{

padding:100px 0;

background:#ffffff;

}

.mission-grid{

display:grid;

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

gap:35px;

}

.mission-card{

background:#fff;

padding:45px;

border-radius:20px;

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

transition:.35s;

border-left:6px solid #E56A08;

}

.mission-card:hover{

transform:translateY(-10px);

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

}

.mission-card i{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

background:#E56A08;

color:#fff;

border-radius:50%;

font-size:32px;

margin-bottom:25px;

}

.mission-card h3{

font-size:30px;

color:#003366;

margin-bottom:18px;

font-weight:700;

}

.mission-card p{

font-size:16px;

line-height:30px;

color:#666;

}


/*=========================================================
CALL TO ACTION
=========================================================*/

.about-cta{

padding:100px 0;

background:linear-gradient(135deg,#003366,#0B4D90);

}

.cta-box{

max-width:900px;

margin:auto;

text-align:center;

background:#fff;

padding:70px 60px;

border-radius:25px;

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.cta-box h2{

font-size:44px;

font-weight:700;

color:#003366;

margin-bottom:18px;

}

.cta-box p{

font-size:17px;

line-height:30px;

color:#666;

max-width:700px;

margin:0 auto 35px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

background:#E56A08;

color:#fff;

font-weight:600;

text-decoration:none;

border-radius:50px;

transition:.35s;

}

.cta-btn:hover{

background:#003366;



transform:translateY(-3px);



}

.cta-btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border:2px solid #E56A08;

color:#003366;

background:#E56A08;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.35s;

}

.cta-btn-outline:hover{

background:#E56A08;

color:#fff;

}

/*=========================================================
TABLET (1200px)
=========================================================*/

@media (max-width:1200px){

.about-page-hero-content h1{

font-size:48px;

}

.about-page-story-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-page-story-right{

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

}

.about-why-grid{

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

}

.stats-grid{

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

}

.mission-grid{

grid-template-columns:1fr;

}

}


/*=========================================================
TABLET (992px)
=========================================================*/

@media (max-width:992px){

.about-page-hero{

padding:100px 0;

}

.about-page-hero-content h1{

font-size:42px;

}

.about-page-hero-content p{

font-size:17px;

line-height:30px;

}

.section-heading h2{

font-size:36px;

}

.about-page-story-left h2{

font-size:36px;

}

.cta-box{

padding:55px 40px;

}

.cta-box h2{

font-size:36px;

}

}


/*=========================================================
MOBILE (768px)
=========================================================*/

@media (max-width:768px){

.about-page-hero{

padding:80px 0;

}

.about-page-hero-content h1{

font-size:34px;

}

.about-page-hero-content p{

font-size:16px;

line-height:28px;

}

.about-page-breadcrumb{

gap:8px;

}

.about-page-story{

padding:70px 0;

}

.about-page-story-right{

grid-template-columns:1fr;

}

.about-why-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.section-heading{

margin-bottom:45px;

}

.section-heading h2{

font-size:30px;

}

.about-page-story-left h2{

font-size:30px;

}

.about-page-card{

padding:30px 25px;

}

.why-card{

padding:35px 25px;

}

.mission-card{

padding:35px 28px;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:30px;

}

.cta-buttons{

flex-direction:column;

}

.cta-btn,

.cta-btn-outline{

width:100%;

}

}


/*=========================================================
SMALL MOBILE (576px)
=========================================================*/

@media (max-width:576px){

.about-page-hero{

padding:70px 0;

}

.about-page-hero-content span{

font-size:13px;

padding:8px 18px;

}

.about-page-hero-content h1{

font-size:28px;

line-height:1.35;

}

.about-page-hero-content p{

font-size:15px;

line-height:26px;

}

.section-heading span{

font-size:13px;

}

.section-heading h2{

font-size:26px;

}

.section-heading p{

font-size:15px;

line-height:27px;

}

.about-page-story-left h2{

font-size:26px;

}

.about-page-story-left p{

font-size:15px;

line-height:28px;

}

.about-page-card h3,

.why-card h3{

font-size:20px;

}

.stat-box h2{

font-size:38px;

}

.stat-box p{

font-size:15px;

}

.mission-card h3{

font-size:24px;

}

.mission-card p{

font-size:15px;

line-height:28px;

}

.cta-box h2{

font-size:26px;

}

.cta-box p{

font-size:15px;

line-height:27px;

}

}


/*=========================================================
EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:420px){

.about-page-hero-content h1{

font-size:24px;

}

.about-page-card,

.why-card,

.mission-card{

padding:25px 20px;

}

.about-page-icon{

width:65px;

height:65px;

}

.about-page-icon i{

font-size:24px;

}

.why-card i{

width:70px;

height:70px;

font-size:28px;

}

.cta-box{

padding:35px 20px;

}

}


/*=========================================================
SMOOTH ANIMATIONS
=========================================================*/

.about-page-card,
.why-card,
.mission-card,
.stat-box,
.cta-btn,
.cta-btn-outline{

transition:all .35s ease;

}

.about-page-card:hover,
.why-card:hover,
.mission-card:hover{

transform:translateY(-10px);

}

.about-page-card img,
.about-page-story img{

transition:transform .5s ease;

}

.about-page-story img:hover{

transform:scale(1.04);

}


/*=========================================================
UTILITY
=========================================================*/

.about-page-hero *,
.about-page-story *,
.about-page-why *,
.about-stats *,
.mission-vision *,
.about-cta *{

box-sizing:border-box;

}

.about-page-story img,
.about-page-card img{

max-width:100%;

display:block;

}

.about-page-card,
.why-card,
.mission-card{

overflow:hidden;

}