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

.home-about{

padding:90px 0;

background:#ffffff;

overflow:hidden;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}


/*=========================================================
ABOUT IMAGE
=========================================================*/

.about-image{

position:relative;

}

.about-image img{

width:100%;

height:560px;

object-fit:cover;

border-radius:25px;

display:block;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.experience-box{

position:absolute;

left:30px;

bottom:30px;

background:#E56A08;

color:#fff;

padding:25px 35px;

border-radius:18px;

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

text-align:center;

}

.experience-box h2{

font-size:46px;

font-weight:700;

margin:0;

line-height:1;

}

.experience-box p{

margin-top:8px;

font-size:16px;

font-weight:500;

}


/*=========================================================
CONTENT
=========================================================*/

.about-content{

padding-right:10px;

}

.section-tag{

display:inline-block;

padding:8px 20px;

background:#E56A08;

color:white;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:20px;

}

.about-content h2{

font-size:42px;

font-weight:700;

line-height:1.3;

color:#003366;

margin-bottom:20px;

}

.about-content p{

font-size:16px;

line-height:30px;

color:#666;

margin-bottom:35px;

}


/*=========================================================
FEATURES
=========================================================*/

.about-features{

display:grid;

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

gap:18px;

margin-bottom:40px;

}

.feature-item{

display:flex;

align-items:center;

gap:12px;

font-size:16px;

font-weight:500;

color:#333;

}

.feature-item i{

width:30px;

height:30px;

border-radius:50%;

background:#E56A08;

display:flex;

align-items:center;

justify-content:center;

font-size:13px;

color:#fff;

flex-shrink:0;

}


/*=========================================================
BUTTONS
=========================================================*/

.about-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.about-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 34px;

background:#E56A08;

color:#fff;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.3s;

}

.about-btn:hover{

background:#003366;

transform:translateY(-3px);

}

.about-btn i{

transition:.3s;

}

.about-btn:hover i{

transform:translateX(6px);

}

.about-btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border:2px solid #E56A08;

color:black;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.3s;

}

.about-btn-outline:hover{

background:#E56A08;

color:#fff;

}


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

@media(max-width:1100px){

.about-grid{

grid-template-columns:1fr;

gap:50px;

}

.about-image img{

height:500px;

}

}

@media(max-width:768px){

.home-about{

padding:70px 0;

}

.about-content h2{

font-size:32px;

}

.about-features{

grid-template-columns:1fr;

gap:15px;

}

.about-image img{

height:380px;

}

.experience-box{

left:20px;

bottom:20px;

padding:20px 25px;

}

.experience-box h2{

font-size:34px;

}

.about-buttons{

flex-direction:column;

}

.about-btn,

.about-btn-outline{

width:100%;

justify-content:center;

}

}

@media(max-width:480px){

.home-about{

padding:60px 0;

}

.section-tag{

font-size:13px;

padding:7px 16px;

}

.about-content h2{

font-size:26px;

}

.about-content p{

font-size:15px;

line-height:26px;

}

.about-image img{

height:300px;

border-radius:18px;

}

.experience-box{

padding:15px 20px;

}

.experience-box h2{

font-size:28px;

}

.experience-box p{

font-size:14px;

}

.feature-item{

font-size:15px;

}

}