/* ================= FONTS ================= */

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

body{
font-family:'Poppins',sans-serif;
line-height:1.7;
}

/* HERO */

.about-banner{
background:linear-gradient(135deg,#0a5ea3,#084a87);
color:white;
padding:90px 10%;
text-align:center;
}

.about-banner h1{
font-family:'Lora',serif;
font-size:48px;
font-weight:700;
letter-spacing:1px;
margin-bottom:15px;
}

.about-banner p{
max-width:720px;
margin:auto;
font-size:18px;
font-family:'Montserrat',sans-serif;
font-weight:400;
opacity:0.95;
}

.about-intro{
padding:80px 10%;
background:#f8fbff;
}

.about-intro-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.about-intro-text h2{
font-family:'Lora',serif;
font-size:34px;
font-weight:700;
color:#1b2a4e;
margin-bottom:18px;
}

.about-intro-text p{
font-size:16px;
font-family:'Poppins',sans-serif;
color:#444;
}

.about-intro-image img{
width:100%;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.about-features{
padding:80px 10%;
text-align:center;
}

.section-title{
font-family:'Lora',serif;
font-size:34px;
margin-bottom:45px;
color:#1b2a4e;
}

.features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.feature-card{
background:#fff;
padding:35px 25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:.3s;
}

.feature-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

.feature-card i{
font-size:38px;
color:#0a5ea3;
margin-bottom:14px;
}

.feature-card h3{
font-family:'Montserrat',sans-serif;
font-size:20px;
font-weight:700;
margin-bottom:8px;
color:#1b2a4e;
}

.feature-card p{
font-size:14.5px;
color:#555;
}

.about-stats{
background:#0a5ea3;
color:white;
padding:70px 10%;
}

.stats-container{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
}

.stat-box h3{
font-family:'Lora',serif;
font-size:42px;
font-weight:700;
margin-bottom:6px;
}

.stat-box p{
font-family:'Montserrat',sans-serif;
font-size:15px;
opacity:0.9;
}

.about-process{
padding:80px 10%;
background:#f7f9fb;
text-align:center;
}

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.process-card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:.3s;
}

.process-card:hover{
transform:translateY(-5px);
}

.process-card span{
display:inline-block;
width:42px;
height:42px;
line-height:42px;
background:#0a5ea3;
color:white;
border-radius:50%;
margin-bottom:12px;
font-weight:600;
}

.process-card h3{
font-family:'Montserrat',sans-serif;
font-size:19px;
font-weight:700;
margin-bottom:6px;
color:#1b2a4e;
}

.process-card p{
font-size:14px;
color:#555;
}

.about-cta{
text-align:center;
padding:80px 10%;
background:#eaf4ff;
}

.about-cta h2{
font-family:'Lora',serif;
font-size:34px;
color:#1b2a4e;
margin-bottom:10px;
}

.about-cta p{
font-size:16px;
color:#555;
}

.cta-btn{
display:inline-block;
margin-top:20px;
background:#0a5ea3;
color:white;
padding:13px 30px;
border-radius:8px;
text-decoration:none;
font-family:'Montserrat',sans-serif;
font-weight:600;
transition:.3s;
}

.cta-btn:hover{
background:#084a87;
}

@media(max-width:900px){

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

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

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

.stats-container{
grid-template-columns:1fr 1fr;
}

.about-banner h1{
font-size:36px;
}

}

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

/* Large Tablets / Small Laptops */
@media (max-width:1200px){

.features-grid{
grid-template-columns:repeat(3,1fr);
}

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

.stats-container{
grid-template-columns:repeat(3,1fr);
}

}


/* Tablets */
@media (max-width:992px){

.about-banner{
padding:70px 8%;
}

.about-banner h1{
font-size:40px;
}

.about-banner p{
font-size:16px;
}

.about-intro{
padding:60px 8%;
}

.about-intro-container{
grid-template-columns:1fr;
gap:35px;
}

.about-intro-image{
order:-1;
}

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

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

.stats-container{
grid-template-columns:repeat(2,1fr);
gap:30px;
}

}


/* Mobile */
@media (max-width:768px){

.about-banner{
padding:60px 6%;
}

.about-banner h1{
font-size:34px;
}

.about-banner p{
font-size:15px;
}

.section-title{
font-size:28px;
}

.about-intro-text h2{
font-size:28px;
}

.feature-card{
padding:28px 20px;
}

.process-card{
padding:24px 20px;
}

.stat-box h3{
font-size:36px;
}

.about-cta h2{
font-size:28px;
}

}


/* Small Mobile */
@media (max-width:480px){

.about-banner{
padding:50px 20px;
}

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

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

.about-intro{
padding:50px 20px;
}

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

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

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

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

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

.stats-container{
grid-template-columns:1fr;
}

.feature-card{
padding:24px 18px;
}

.process-card{
padding:22px 18px;
}

.stat-box h3{
font-size:32px;
}

.cta-btn{
padding:12px 24px;
font-size:14px;
}

}

.about-highlights{
padding:80px 10%;
background:#f7f9fb;
text-align:center;
}

.highlights-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

.highlight-box{
background:white;
padding:35px 25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:.3s;
}

.highlight-box:hover{
transform:translateY(-6px);
}

.highlight-box i{
font-size:38px;
color:#0a5ea3;
margin-bottom:12px;
}

.highlight-box h3{
font-family:'Montserrat',sans-serif;
font-size:20px;
margin-bottom:8px;
}

.highlight-box p{
font-size:14px;
color:#555;
}

@media(max-width:900px){
.highlights-grid{
grid-template-columns:1fr 1fr;
}
}

@media(max-width:480px){
.highlights-grid{
grid-template-columns:1fr;
}
}