/* ======================================== 
   Our Services
======================================== */ 
 
.ys-service-section, 
.ys-service-section *{ 
    box-sizing:border-box; 
} 
 
.ys-service-section{ 
    width:100%; 
    background:#ffffff; 
    padding:58px 28px 62px; 
    font-family: 
        Arial,
        "Helvetica Neue",
        sans-serif; 
    color:#10253d; 
} 
 
.ys-service-container{ 
    max-width:1480px; 
    margin:0 auto; 
} 
 
 
/* ======================================== 
   Header
======================================== */ 
 
.ys-service-header{ 
    text-align:center; 
    margin-bottom:44px; 
} 
 
.ys-service-title{ 
    margin:0; 
    font-size:40px; 
    line-height:1.25; 
    font-weight:700; 
    letter-spacing:1px; 
    color:#10253d; 
} 
 
.ys-service-title-line{ 
    width:58px; 
    height:3px; 
    margin:18px auto 20px; 
    background:#367bb7; 
    border-radius:3px; 
} 
 
.ys-service-subtitle{ 
    margin:0; 
    font-size:17px; 
    line-height:1.8; 
    color:#667b91; 
} 
 
 
/* ======================================== 
   Four Cards
======================================== */ 
 
.ys-service-grid{ 
    display:grid; 
    grid-template-columns:repeat(4, minmax(0,1fr)); 
    gap:24px; 
} 
 
 
/* Single Card */ 
 
.ys-service-card{ 
    position:relative; 
    background:#ffffff; 
 
    border:1px solid #e7edf2; 
    border-radius:10px; 
 
    overflow:hidden; 
 
    box-shadow: 
        0 8px 24px rgba(31,67,100,.055); 
 
    transition: 
        transform .28s ease, 
        box-shadow .28s ease, 
        border-color .28s ease; 
} 
 
 
/* Card Hover Effect */ 
 
.ys-service-card:hover{ 
    transform:translateY(-7px); 
 
    border-color:#d9e4ed; 
 
    box-shadow: 
        0 16px 36px rgba(31,67,100,.11); 
} 
 
 
/* ======================================== 
   Images
======================================== */ 
 
.ys-service-photo{ 
    width:100%; 
    height:330px; 
 
    position:relative; 
    overflow:hidden; 
 
    margin:0; 
 
    background:#edf2f5; 
 
    border-radius:9px 9px 6px 6px; 
} 
 
.ys-service-photo img{ 
    display:block; 
 
    width:100%; 
    height:100%; 
 
    object-fit:cover; 
 
    transition:transform .55s ease; 
} 
 
 
/* Image Hover Effect */ 
 
.ys-service-card:hover .ys-service-photo img{ 
    transform:scale(1.035); 
} 
 
 
/* ======================================== 
   Card Content
======================================== */ 
 
.ys-service-content{ 
    padding:27px 32px 32px; 
} 
 
 
/* Number */ 
 
.ys-service-number{ 
    font-size:47px; 
    line-height:1; 
    font-weight:300; 
 
    letter-spacing:-2px; 
 
    color:#cbd8e4; 
 
    margin-bottom:11px; 
} 
 
.ys-service-number-line{ 
    width:35px; 
    height:2px; 
 
    background:#cbd8e4; 
 
    margin-bottom:18px; 
} 
 
 
/* Title */ 
 
.ys-service-name{ 
    margin:0 0 13px; 
 
    font-size:23px; 
    line-height:1.45; 
 
    font-weight:700; 
 
    color:#10253d; 
} 
 
 
/* Description */ 
 
.ys-service-desc{ 
    margin:0; 
 
    font-size:15px; 
    line-height:1.85; 
 
    color:#62778c; 
} 
 
 
/* ======================================== 
   Tablet
======================================== */ 
 
@media(max-width:1200px){ 
 
    .ys-service-grid{ 
        grid-template-columns:repeat(2,1fr); 
        gap:26px; 
    } 
 
    .ys-service-photo{ 
        height:340px; 
    } 
} 
 
 
/* ======================================== 
   Mobile
======================================== */ 
 
@media(max-width:700px){ 
 
    .ys-service-section{ 
        padding:42px 15px 44px; 
    } 
 
    .ys-service-header{ 
        margin-bottom:32px; 
    } 
 
    .ys-service-title{ 
        font-size:30px; 
    } 
 
    .ys-service-title-line{ 
        width:48px; 
        margin:14px auto 16px; 
    } 
 
    .ys-service-subtitle{ 
        font-size:14px; 
        padding:0 10px; 
    } 
 
    .ys-service-grid{ 
        grid-template-columns:1fr; 
        gap:22px; 
    } 
 
    .ys-service-photo{ 
        height:310px; 
    } 
 
    .ys-service-content{ 
        padding:22px 25px 27px; 
    } 
 
    .ys-service-number{ 
        font-size:40px; 
    } 
 
    .ys-service-name{ 
        font-size:20px; 
    } 
 
    .ys-service-desc{ 
        font-size:14px; 
    } 
}