/* ===================================
   GOOGLE FONT
=================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===================================
   RESET
=================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f8fafc;

color:#1f2937;

line-height:1.7;

overflow-x:hidden;

}

.container{

width:90%;

max-width:1280px;

margin:auto;

}

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

section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

font-weight:700;

margin:15px 0;

color:#0f172a;

}

.section-title p{

max-width:700px;

margin:auto;

color:#64748b;

font-size:17px;

}

.section-tag{

display:inline-block;

padding:8px 20px;

background:#dcfce7;

color:#0f766e;

border-radius:30px;

font-size:14px;

font-weight:600;

}

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

.about-hero{

background:

linear-gradient(rgba(15,23,42,.65),
rgba(15,23,42,.65)),

url("../assets/images/about/about-banner.jpg");

background-size:cover;

background-position:center;

padding:170px 0;

text-align:center;

color:#fff;

}

.about-hero h1{

font-size:60px;

font-weight:800;

line-height:1.2;

margin:25px 0;

}

.about-hero h1 span{

color:#5eead4;

}

.about-hero p{

max-width:720px;

margin:auto;

font-size:18px;

color:#e2e8f0;

}

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

.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.story-image img{

width:100%;

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.15);

transition:.4s;

}

.story-image img:hover{

transform:scale(1.03);

}

.story-content h2{

font-size:42px;

margin:20px 0;

color:#0f172a;

}

.story-content p{

color:#64748b;

margin-bottom:20px;

font-size:16px;

}

.story-features{

display:grid;

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

gap:18px;

margin-top:35px;

}

.story-item{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}

.story-item i{

color:#0f766e;

font-size:20px;

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

.why-choose{

background:#ffffff;

}

.choose-grid{

display:grid;

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

gap:30px;

}

.choose-card{

background:#ffffff;

padding:40px 30px;

border-radius:24px;

text-align:center;

box-shadow:0 15px 40px rgba(15,23,42,.08);

transition:.35s;

border:1px solid #eef2f7;

}

.choose-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(15,23,42,.15);

}

.choose-card i{

font-size:42px;

color:#0F766E;

margin-bottom:20px;

}

.choose-card h3{

font-size:24px;

margin-bottom:15px;

color:#0f172a;

}

.choose-card p{

font-size:15px;

color:#64748b;

line-height:1.7;

}

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

.mission-section{

background:#f8fafc;

}

.mission-grid{

display:grid;

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

gap:35px;

}

.mission-card{

background:#ffffff;

padding:45px;

border-radius:24px;

box-shadow:0 15px 40px rgba(15,23,42,.08);

transition:.35s;

}

.mission-card:hover{

transform:translateY(-8px);

}

.mission-card i{

font-size:46px;

color:#0F766E;

margin-bottom:22px;

}

.mission-card h3{

font-size:30px;

margin-bottom:18px;

color:#0f172a;

}

.mission-card p{

font-size:16px;

color:#64748b;

line-height:1.8;

}

/* ===================================
COMPANY STATS
=================================== */

.about-stats{

background:linear-gradient(135deg,#0F766E,#115E59);

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

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

backdrop-filter:blur(12px);

padding:40px;

border-radius:22px;

text-align:center;

border:1px solid rgba(255,255,255,.12);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

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

}

.stat-card h2{

font-size:52px;

font-weight:800;

color:#ffffff;

margin-bottom:12px;

}

.stat-card p{

font-size:17px;

color:#E2E8F0;

}
/* ===================================
   TEAM SECTION
=================================== */

.team-section{

background:#ffffff;

}

.team-grid{

display:grid;

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

gap:30px;

}

.team-card{

background:#ffffff;

border-radius:24px;

overflow:hidden;

text-align:center;

box-shadow:0 15px 40px rgba(15,23,42,.08);

transition:.35s;

}

.team-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(15,23,42,.15);

}

.team-card img{

width:100%;

height:320px;

object-fit:cover;

transition:.35s;

}

.team-card:hover img{

transform:scale(1.05);

}

.team-card h3{

margin-top:25px;

font-size:24px;

color:#0F172A;

}

.team-card span{

display:block;

padding:10px 0 30px;

font-size:15px;

color:#64748B;

}

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

.values-section{

background:#F8FAFC;

}

.values-grid{

display:grid;

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

gap:30px;

}

.value-card{

background:#ffffff;

padding:40px 30px;

border-radius:22px;

text-align:center;

box-shadow:0 15px 40px rgba(15,23,42,.08);

transition:.35s;

}

.value-card:hover{

transform:translateY(-10px);

}

.value-card i{

font-size:45px;

color:#0F766E;

margin-bottom:20px;

}

.value-card h3{

font-size:24px;

margin-bottom:15px;

color:#0F172A;

}

.value-card p{

font-size:15px;

color:#64748B;

line-height:1.8;

}

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

.about-cta{

background:linear-gradient(135deg,#0F766E,#115E59);

text-align:center;

color:#ffffff;

}

.cta-content{

max-width:760px;

margin:auto;

}

.cta-content h2{

font-size:52px;

margin-bottom:20px;

}

.cta-content p{

font-size:18px;

color:#E2E8F0;

margin-bottom:35px;

}

.cta-btn{

display:inline-block;

padding:16px 42px;

background:#ffffff;

color:#0F766E;

font-weight:700;

text-decoration:none;

border-radius:50px;

transition:.35s;

}

.cta-btn:hover{

background:#F1F5F9;

transform:translateY(-4px);

}

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

@media(max-width:1100px){

.choose-grid,
.values-grid,
.team-grid,
.stats-grid{

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

}

.story-grid,
.mission-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.about-hero{

padding:120px 0;

}

.about-hero h1{

font-size:42px;

}

.section-title h2{

font-size:34px;

}

.story-content h2{

font-size:34px;

}

.story-features{

grid-template-columns:1fr;

}

.choose-grid,
.values-grid,
.team-grid,
.stats-grid{

grid-template-columns:1fr;

}

.cta-content h2{

font-size:36px;

}

section{

padding:70px 0;

}

}

@media(max-width:480px){

.about-hero h1{

font-size:34px;

}

.cta-btn{

width:100%;

text-align:center;

}

}

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

.choose-card,
.mission-card,
.stat-card,
.team-card,
.value-card{

animation:fadeUp .7s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ===================================
   SCROLLBAR
=================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#E2E8F0;

}

::-webkit-scrollbar-thumb{

background:#0F766E;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#115E59;

}

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

::selection{

background:#0F766E;

color:#ffffff;

}