/* ===============================
GLOBAL
================================= */

:root{
--primary:#01a8a3;
--dark:#222;
--light:#f8f9fa;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Jost',sans-serif;
background:#fff;
color:var(--dark);
line-height:1.6;
overflow-x:hidden;
}

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

@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}

@keyframes scaleUp{
0%{
opacity:0;
transform:scale(.9);
}
100%{
opacity:1;
transform:scale(1);
}
}

/* ===============================
PAGE HEADER
================================= */

.about-header{
padding:60px 0 40px;
text-align:center;
animation:fadeUp 1s ease;
}

.about-header h1{
font-weight:700;
margin-bottom:15px;
color:#085458;
}

.about-header p{
color:#666;
max-width:650px;
margin:auto;
}

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

.about-section{
padding:80px 0;
}

.about-image{
position:relative;
animation:scaleUp 1s ease;
}

.about-image img{
width:100%;
height:450px;
object-fit:cover;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:.4s;
}

.about-image img:hover{
transform:scale(1.03);
}

/* EXPERIENCE BOX */

.experience-box{
position:absolute;
bottom:-25px;
right:40px;
background:var(--primary);
color:#fff;
padding:20px 35px;
border-radius:15px;
text-align:center;
box-shadow:0 10px 20px rgba(0,0,0,0.2);
animation:fadeUp 1.2s ease;
transition:.3s;
}

.experience-box:hover{
transform:translateY(-5px);
}

.experience-box h2{
font-size:28px;
margin:0;
}

.experience-box p{
margin:0;
font-size:14px;
}

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

.mission-points{
margin-top:25px;
}

.mission-points .col-md-6{
margin-bottom:20px;
animation:fadeUp 1s ease;
}

.mission-points h5{
font-size:18px;
font-weight:600;
margin-bottom:5px;
color:#090909;
}

.mission-icon{
color:#01a8a3;
font-size:20px;
background:#e6f7f6;
padding:8px;
border-radius:8px;
transition:.3s;
}

.mission-icon:hover{
background:var(--primary);
color:#fff;
transform:scale(1.1);
}

.mission-points p{
font-size:14px;
color:#555;
}

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

.location-section{
background:#f8fafc;
padding:80px 0;
}

.contact-item{
display:flex;
gap:15px;
margin-top:25px;
align-items:flex-start;
animation:fadeUp 1s ease;
}

.contact-icon{
background:#e6f7f6;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:20px;
color:var(--primary);
transition:.3s;
}

.contact-icon:hover{
background:var(--primary);
color:#fff;
transform:scale(1.1);
}

/* ===============================
MAP
================================= */

.map-box{
width:100%;
height:300px;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
animation:fadeIn 1.2s ease;
}

.map-box iframe{
width:100%;
height:100%;
border:none;
}

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

@media (max-width:991px){

.about-section{
padding:60px 20px;
}

.about-image img{
height:350px;
}

.experience-box{
right:20px;
}

}

@media (max-width:768px){

.about-header h1{
font-size:28px;
}

.about-header p{
font-size:14px;
}

.about-image img{
height:280px;
}

.experience-box{
bottom:-20px;
right:15px;
padding:15px 25px;
}

.experience-box h2{
font-size:22px;
}

.mission-points h5{
font-size:16px;
}

.contact-item{
flex-direction:row;
}

.map-box{
height:250px;
}

}

@media (max-width:576px){

.about-header{
padding:40px 15px;
}

.about-header h1{
font-size:24px;
}

.about-header p{
font-size:13px;
}

.about-section{
padding:40px 15px;
}

.about-image img{
height:220px;
}

.experience-box{
bottom:-15px;
right:10px;
padding:10px 15px;
}

.experience-box h2{
font-size:18px;
}

.experience-box p{
font-size:12px;
}

}