/*==================================
            HERO SECTION
===================================*/

.heroSection{
    width:95%;
    max-width:1500px;
    margin:80px auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;

    padding:70px;

    background:#fff;

    border-radius:30px;

    box-shadow:0 15px 50px rgba(0,0,0,.08);

    min-height:700px;
}


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

.heroIntro{
    flex:1;
}

.heroTag{

    display:inline-block;

    padding:10px 22px;

    background:#fff4e5;

    color:#e67e00;

    border-radius:40px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.heroIntro h1{

    font-size:4rem;

    line-height:1.1;

    color:#222;

    margin-bottom:30px;

    font-weight:800;

}

.heroIntro h1 span{

    color:#e67e00;

    display:block;

}

.heroIntro p{

    color:#666;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:40px;

    max-width:600px;

}

.heroBtn{

    padding:18px 40px;

    border:none;

    border-radius:50px;

    background:#e67e00;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.heroBtn:hover{

    background:#c96b09;

    transform:translateY(-4px);

}


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

.heroImg{

    flex:1;

    height:600px;

    border-radius:25px;

    overflow:hidden;

}

.heroImg img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*==================================
LARGE DESKTOPS
===================================*/

@media(min-width:1600px){

.heroSection{

    max-width:1700px;

    min-height:800px;

}

.heroIntro h1{

    font-size:5rem;

}

.heroIntro p{

    font-size:1.25rem;

}

.heroImg{

    height:700px;

}

}


/*==================================
TABLETS
===================================*/

@media(max-width:1100px){

.heroSection{

    gap:50px;

    padding:50px;

}

.heroIntro h1{

    font-size:3rem;

}

.heroImg{

    height:500px;

}

}


/*==================================
MOBILE
===================================*/

@media(max-width:850px){

.heroSection{

    flex-direction:column-reverse;

    text-align:center;

    padding:40px 25px;

    min-height:auto;

    gap:40px;

}

.heroIntro{

    width:100%;

}

.heroIntro h1{

    font-size:2.5rem;

}

.heroIntro p{

    max-width:100%;

    font-size:1rem;

}

.heroBtn{

    width:100%;

    max-width:320px;

}

.heroImg{

    width:100%;

    height:450px;

}

}


/*==================================
SMALL PHONES
===================================*/

@media(max-width:500px){

.heroSection{

    width:92%;

    padding:25px 20px;

}

.heroTag{

    font-size:.8rem;

}

.heroIntro h1{

    font-size:2rem;

}

.heroIntro p{

    font-size:.95rem;

}

.heroImg{

    height:350px;

}

.heroBtn{

    width:100%;

    padding:16px;

}
}
/*=========================================
SUB MAIN SECTION
=========================================*/

.subMain{
width:95%;
max-width:1450px;
margin:100px auto;
}

.subTitle{
text-align:center;
margin-bottom:70px;
}

.subTitle span{
display:inline-block;
color:#e67e00;
font-size:.95rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:15px;
}

.subTitle h1{
font-size:3.3rem;
font-weight:800;
color:#222;
line-height:1.2;
}

/*=========================
MAIN GRID
=========================*/

.subGrid{
display:grid;
grid-template-columns:420px 1fr;
grid-template-rows:auto auto;
gap:45px;
align-items:start;
}

.subMainImg1{
grid-column:1;
grid-row:1/span 2;
display:flex;
flex-direction:column;
align-items:flex-start;
}

.subMainImg1 img{
width:100%;
height:560px;
object-fit:cover;
border-radius:25px;
display:block;
box-shadow:0 18px 45px rgba(0,0,0,.12);
}

#smallPoint{
width:290px;
margin-top:25px;
margin-left:30px;
padding:22px 24px;
display:flex;
align-items:center;
gap:18px;
background:#fff;
border-radius:20px;
border:1px solid #f4e1c6;
box-shadow:0 20px 45px rgba(0,0,0,.08);
transition:.35s ease;
cursor:pointer;
}

#smallPoint:hover{
transform:translateY(-10px);
box-shadow:0 28px 55px rgba(230,126,0,.25);
background:#fff8ef;
}
#smallPoint span{
font-size:3rem;
font-weight:800;
color:#e67e00;
line-height:1;
}

#smallPoint p{
font-size:1rem;
font-weight:600;
line-height:1.5;
color:#444;
}
#smallPoint i{
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fff3e6;
color:#e67e00;
font-size:24px;
flex-shrink:0;
transition:.35s;
}

#smallPoint:hover i{
background:#e67e00;
color:#fff;
transform:rotate(10deg);
}

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

.rightContent{
grid-column:2;
grid-row:1;
}

.contentSection{
display:grid;
grid-template-columns:1.3fr .9fr;
gap:45px;
align-items:start;
}

.point1{
padding-right:40px;
border-right:2px solid #ececec;
}

.point1 h3{
font-size:2rem;
margin-bottom:20px;
color:#222;
}

.point1 p{
color:#666;
line-height:2;
margin-bottom:35px;
}

.point1 button{
padding:16px 35px;
border:none;
border-radius:50px;
background:#e67e00;
color:#fff;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.point1 button:hover{
background:#c96b09;
}

.point2 h3{
font-size:2rem;
margin-bottom:25px;
color:#222;
}

.point2 ul{
list-style:none;
padding:0;
margin:0;
}

.point2 li{
display:flex;
align-items:center;
gap:18px;
margin-bottom:22px;
font-weight:600;
color:#444;
}

.point2 i{
width:48px;
height:48px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:#fff3e6;
color:#e67e00;
font-size:18px;
flex-shrink:0;
transition:.3s;
}

.point2 li:hover i{
background:#e67e00;
color:#fff;
transform:scale(1.1);
}

.subMainImg2{
grid-column:2;
grid-row:2;
}

.subMainImg2 img{
width:100%;
height:400px;
object-fit:cover;
border-radius:25px;
display:block;
}

/*=========================
TABLET
=========================*/

@media(max-width:1100px){

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

.subMainImg1,
.rightContent,
.subMainImg2{
grid-column:auto;
grid-row:auto;
}

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

.point1{
padding-right:0;
padding-bottom:35px;
border-right:none;
border-bottom:2px solid #ececec;
}

.point2{
margin-top:35px;
}

.subMainImg1 img{
height:500px;
}

.subMainImg2 img{
height:300px;
}

}

/*=========================
MOBILE
=========================*/

@media(max-width:768px){

.subTitle h1{
font-size:2.3rem;
}

.subMainImg1 img{
height:380px;
}

.subMainImg2 img{
height:240px;
}

#smallPoint{
position:relative;
left:0;
bottom:0;
width:100%;
margin-top:20px;
}

.point1 h3,
.point2 h3{
font-size:1.6rem;
}

.point1 button{
width:100%;
}

.point2 i{
width:42px;
height:42px;
font-size:16px;
}

}

/*=========================
SMALL PHONES
=========================*/

@media(max-width:480px){

.subMain{
width:92%;
}

.subTitle h1{
font-size:1.9rem;
}

.subMainImg1 img{
height:320px;
}

.subMainImg2 img{
height:200px;
}

#smallPoint span{
font-size:2.2rem;
}

}
/*==================================
SERVICES SECTION
==================================*/

.satisfied{
width:95%;
max-width:1450px;
margin:120px auto;
}

.satisfiedTitle{
width:700px;
margin-bottom:60px;
}

.satisfiedTitle h1{
display:inline;
font-size:3.3rem;
font-weight:800;
line-height:1.15;
color:#222;

text-decoration-color:#e67e00;
text-decoration-thickness:7px;
text-underline-offset:12px;
}
.underliner{
position:relative;
display:inline-block;
}

.underliner::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:6px;
background:#e67e00;
border-radius:10px;
}


/*==================================
GRID
==================================*/

.serviceGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

/*==================================
SERVICE CARD
==================================*/

.serviceCard{
display:flex;
align-items:flex-start;
gap:20px;
padding:32px;
background:#fff;
border:1px solid #ececec;
border-radius:18px;
transition:.35s;
}

.serviceCard:hover{
transform:translateY(-8px);
border-color:#e67e00;
box-shadow:0 18px 40px rgba(230,126,0,.12);
}

.serviceCard i{
font-size:42px;
color:#e67e00;
flex-shrink:0;
margin-top:5px;
transition:.35s;
}

.serviceCard:hover i{
transform:scale(1.1) rotate(8deg);
}

.serviceCard h4{
font-size:1.35rem;
font-weight:700;
color:#222;
margin-bottom:10px;
}

.serviceCard p{
font-size:.98rem;
line-height:1.8;
color:#666;
}

/*==================================
VIEW ALL
==================================*/

.viewServices{
display:flex;
justify-content:center;
align-items:center;
}

.viewServices button{
display:flex;
align-items:center;
gap:15px;
padding:18px 35px;
border:none;
border-radius:50px;
background:#e67e00;
color:#fff;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:.35s;
}

.viewServices button:hover{
background:#c96b09;
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(230,126,0,.25);
}

.viewServices button i{
font-size:.9rem;
transition:.35s;
}

.viewServices button:hover i{
transform:translateX(5px);
}

/*==================================
LARGE SCREENS
==================================*/

@media(min-width:1600px){

.satisfiedTitle h1{
font-size:4rem;
}

.serviceCard{
padding:38px;
}

}

/*==================================
TABLETS
==================================*/

@media(max-width:1100px){

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

.satisfiedTitle{
width:100%;
}

.satisfiedTitle h1{
font-size:2.9rem;
}

}

/*==================================
MOBILE
==================================*/

@media(max-width:768px){

.serviceGrid{
grid-template-columns:1fr;
gap:20px;
}

.satisfiedTitle{
width:100%;
margin-bottom:45px;
}

.satisfiedTitle h1{
font-size:2.2rem;
}

.serviceCard{
padding:25px;
gap:18px;
}

.serviceCard i{
font-size:34px;
}

.serviceCard h4{
font-size:1.2rem;
}

.serviceCard p{
font-size:.95rem;
}

.viewServices button{
width:100%;
justify-content:center;
}

}

/*==================================
SMALL PHONES
==================================*/

@media(max-width:480px){

.satisfied{
width:92%;
}

.satisfiedTitle h1{
font-size:1.9rem;
}

.serviceCard{
padding:22px;
}

.serviceCard i{
font-size:30px;
}

}
/*==================================
LEADERS SECTION
==================================*/

.leadersSect{
width:95%;
max-width:1450px;
margin:120px auto;
}

.leadersTitle{
text-align:center;
margin-bottom:90px;
}

.leadersTitle h5{
font-size:.95rem;
letter-spacing:3px;
color:#e67e00;
margin-bottom:15px;
font-weight:700;
}

.leadersTitle h1{
font-size:3.5rem;
font-weight:800;
color:#222;
line-height:1.15;
}

/*==================================
LEADER CARD
==================================*/

.leaderCard{
display:flex;
align-items:center;
gap:70px;
margin-bottom:90px;
position:relative;
}

.leaderCard.reverse{
flex-direction:row-reverse;
}

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

.leaderImg{
width:790px;
height:400px;
flex-shrink:0;
overflow:hidden;
border-radius:30px;
background:#fff;
box-shadow:0 20px 50px rgba(0,0,0,.12);
transition:.4s;
}

.leaderImg:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(230,126,0,.2);
}

.leaderImg img{
width:10%;
height:50%;
object-fit:cover;
transition:.5s;
display:block;
}

.leaderImg:hover img{
transform:scale(1.08);
}

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



.leaderContent h2{
font-size:2.4rem;
font-weight:800;
color:#222;
margin-bottom:12px;
}

.leaderContent h4{
display:inline-block;
padding:10px 22px;
background:#e67e00;
color:#fff;
border-radius:40px;
margin-bottom:25px;
font-size:1rem;
font-weight:700;
}

.leaderContent p{
font-size:1rem;
line-height:2;
color:#666;
max-width:650px;
}

/*==================================
DECORATIVE LINE
==================================*/



.leaderCard.reverse .leaderContent::before{
left:auto;
right:-35px;
}

/*==================================
LARGE DESKTOP
==================================*/

@media(min-width:1600px){

.leadersTitle h1{
font-size:4.3rem;
}

.leaderImg{
width:440px;
height:550px;
}

.leaderContent{
padding:60px;
}

.leaderContent h2{
font-size:2.5rem;
}

}

/*==================================
LAPTOPS
==================================*/

@media(max-width:1200px){

.leaderCard{
gap:45px;
}

.leaderImg{
width:330px;
height:430px;
}

.leaderContent{
margin-left:-70px;
padding:35px;
}

.leaderCard.reverse .leaderContent{
margin-right:-70px;
}

}

/*==================================
TABLETS
==================================*/

@media(max-width:900px){

.leaderCard,
.leaderCard.reverse{
flex-direction:column;
gap:30px;
margin-bottom:70px;
}

.leaderImg{
width:100%;
max-width:500px;
height:420px;
}

.leaderContent,
.leaderCard.reverse .leaderContent{
margin:0;
width:100%;
padding:35px;
}
.leaderContent{
margin-left:-60px;
}

.leaderCard.reverse .leaderContent{
margin-right:-60px;
}

.leaderContent::before,
.leaderCard.reverse .leaderContent::before{
display:none;
}

.leadersTitle h1{
font-size:2.7rem;
}

}

/*==================================
PHONES
==================================*/

@media(max-width:600px){

.leadersSect{
width:92%;
}

.leadersTitle{
margin-bottom:60px;
}

.leadersTitle h5{
font-size:.85rem;
letter-spacing:2px;
}

.leadersTitle h1{
font-size:2rem;
}

.leaderImg {
    width: 50%;
    max-width: 100%;
    height: 320px;
    border-radius: 20px;
}

.leaderContent{
padding:28px;
border-radius:20px;
}

.leaderContent h2{
font-size:1.7rem;
}

.leaderContent h4{
font-size:.9rem;
padding:8px 18px;
}

.leaderContent p{
font-size:.95rem;
line-height:1.8;
}

}












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

.leaderImg {
    width: 400px;
    height: 400px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
    transition: .4s;
}

.leaderImg:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(230,126,0,.2);
}

.leaderImg img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    display:block;
    transition: .5s;
}

.leaderImg:hover img {
    transform: scale(1.08);
}


/*==================================
LARGE DESKTOP
==================================*/

@media (min-width:1600px) {

    .leaderImg {
        width: 440px;
        height: 550px;
    }
}


/*==================================
LAPTOPS
==================================*/

@media (max-width:1200px) {

    .leaderImg {
        width: min(330px, 40vw);
        height: 430px;
    }
}


/*==================================
TABLETS
==================================*/

@media (max-width:900px) {

    .leaderImg {
        width: 100%;
        max-width: 500px;
        height: 420px;
    }
}


/*==================================
PHONES
==================================*/

@media (max-width:600px) {

    .leaderImg {
        width: 100%;
        
        height: 100%;
        border-radius: 20px;
    }

    .leaderImg img {
        width: 100%;
        height: 100%;
        object-fit:cover;
        object-position: 50% 30%;
    }
}


/*==================================
SMALL PHONES
==================================*/

@media (max-width:400px) {

    .leaderImg {
        width: 100%;
        height: 270px;
        border-radius: 16px;
    }
}


/*==================================
JOHN CHEGE IMAGE
==================================*/

.johnLeaderImg {
    display: flex;
    align-items:safe;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

/* John's actual image */
.johnLeaderImg img {
    width: 100%;
    height: 150%;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/*==================================
JOHN CHEGE - MOBILE
==================================*/

@media (max-width: 600px) {

    .johnLeaderImg {
        width: 100%;
        height: auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #fff;
    }

    .johnLeaderImg img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center center;
        display: block;
    }
}