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

.why-choose-section{

padding:90px 0;

background:#f8fbff;

overflow:hidden;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}


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

.why-content .section-tag{

display:inline-block;

padding:8px 20px;

background:#E56A08;

color:white;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

}

.why-content h2{

font-size:42px;

font-weight:700;

color:#003366;

line-height:1.3;

margin-bottom:20px;

}

.why-content>p{

font-size:16px;

line-height:30px;

color:#666;

margin-bottom:35px;

}


/*=========================================================
FEATURE LIST
=========================================================*/

.why-list{

display:grid;

gap:22px;

margin-bottom:35px;

}

.why-item{

display:flex;

gap:20px;

align-items:flex-start;

background:#fff;

padding:20px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:.35s;

}

.why-item:hover{

transform:translateY(-6px);

box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.why-icon{

width:65px;

height:65px;

border-radius:50%;

background:#E56A08;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

color:#fff;

flex-shrink:0;

transition:.35s;

}

.why-item:hover .why-icon{

background:#003366;

transform:rotateY(180deg);

}

.why-item h4{

font-size:21px;

color:#003366;

margin-bottom:8px;

}

.why-item p{

font-size:15px;

color:#666;

line-height:26px;

}


/*=========================================================
BUTTON
=========================================================*/

.why-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 35px;

background:#E56A08;

color:#fff;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.35s;

}

.why-btn:hover{

background:#003366;

transform:translateY(-3px);

}

.why-btn i{

transition:.35s;

}

.why-btn:hover i{

transform:translateX(6px);

}


/*=========================================================
RIGHT SIDE
=========================================================*/

.why-right{

position:relative;

}

.why-image img{

width:100%;

height:560px;

object-fit:cover;

border-radius:25px;

display:block;

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

}


/*=========================================================
FLOATING BOXES
=========================================================*/

.why-boxes{

display:grid;

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

gap:20px;

margin-top:-70px;

padding:0 30px;

position:relative;

z-index:5;

}

.info-box{

background:#fff;

padding:28px 20px;

border-radius:18px;

text-align:center;

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

transition:.35s;

}

.info-box:hover{

background:#E56A08;

transform:translateY(-8px);

}

.info-box h3{

font-size:36px;

font-weight:700;

color:#003366;

margin-bottom:10px;

transition:.35s;

}

.info-box p{

font-size:16px;

font-weight:500;

color:#666;

transition:.35s;

}

.info-box:hover h3,

.info-box:hover p{

color:#fff;

}


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

@media(max-width:1100px){

.why-grid{

grid-template-columns:1fr;

gap:50px;

}

.why-image img{

height:500px;

}

}

@media(max-width:768px){

.why-choose-section{

padding:70px 0;

}

.why-content h2{

font-size:32px;

}

.why-image img{

height:380px;

}

.why-boxes{

grid-template-columns:1fr 1fr;

padding:0;

margin-top:25px;

}

.why-btn{

width:100%;

justify-content:center;

}

}

@media(max-width:576px){

.why-choose-section{

padding:60px 0;

}

.why-content h2{

font-size:27px;

}

.why-content>p{

font-size:15px;

line-height:26px;

}

.why-item{

flex-direction:column;

text-align:center;

}

.why-icon{

margin:auto;

}

.why-item h4{

font-size:20px;

}

.why-boxes{

grid-template-columns:1fr;

gap:18px;

}

.why-image img{

height:280px;

border-radius:18px;

}

.info-box h3{

font-size:30px;

}

}