/*=========================================
BKTech About Page
=========================================*/

body{
font-family:Arial,Helvetica,sans-serif;
background:#f8f9fa;
color:#333;
}

.hero{
background:linear-gradient(135deg,#0d6efd,#004aad);
padding:90px 0;
color:#fff;
overflow:hidden;
}

.hero h1{
font-size:3rem;
font-weight:700;
}

.hero p{
font-size:1.1rem;
line-height:1.8;
}

.hero img{
width:100%;
max-width:500px;
border-radius:20px;
box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.section-title{
font-size:38px;
font-weight:700;
color:#0d47a1;
margin-bottom:20px;
position:relative;
}

.section-title::after{
content:"";
display:block;
width:80px;
height:4px;
background:#0d6efd;
margin-top:12px;
border-radius:10px;
}

.feature-card{
border:none;
border-radius:20px;
transition:.4s;
overflow:hidden;
background:#fff;
}

.feature-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.feature-card .card-body{
padding:35px;
}

.feature-card i{
font-size:45px;
margin-bottom:20px;
}

.card{
border:none;
border-radius:20px;
}

.card img{
border-radius:20px;
}

.btn{
border-radius:50px;
padding:12px 28px;
font-weight:600;
}

.btn-primary{
background:#0d6efd;
border:none;
}

.btn-primary:hover{
background:#004aad;
}

.btn-warning{
font-weight:bold;
}

.badge{
font-size:15px;
padding:10px 18px;
border-radius:30px;
}

footer{
background:#111827;
color:#fff;
}

footer h4,
footer h5{
font-weight:700;
}

footer a{
color:#ddd;
text-decoration:none;
transition:.3s;
}

footer a:hover{
color:#0d6efd;
padding-left:6px;
}

footer p{
color:#ccc;
line-height:1.8;
}

.shadow-lg{
box-shadow:0 20px 45px rgba(0,0,0,.15)!important;
}

.rounded-4{
border-radius:22px!important;
}

.bg-light{
background:#f7f9fc!important;
}

@media(max-width:992px){

.hero{
text-align:center;
padding:70px 0;
}

.hero h1{
font-size:2.3rem;
}

.hero img{
margin-top:35px;
}

.section-title{
font-size:30px;
text-align:center;
}

.section-title::after{
margin:auto;
margin-top:12px;
}

}

@media(max-width:576px){

.hero{
padding:60px 0;
}

.hero h1{
font-size:2rem;
}

.hero p{
font-size:16px;
}

.section-title{
font-size:26px;
}

.btn{
width:100%;
margin-bottom:12px;
}

.feature-card .card-body{
padding:25px;
}

}