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

.service-hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:630px !important;
    padding:60px 0;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,23,44,.95) 0%,
            rgba(7,23,44,.90) 45%,
            rgba(7,23,44,.25) 70%,
            rgba(7,23,44,.05) 100%
        ),
        var(--hero-image);

    background-repeat:no-repeat;
    background-position:left top,right center;
    background-size:100% 100%,auto 88%;
}

.service-hero::before{
    display:none;
}

.service-hero .container{
    position:relative;
    z-index:2;
}

.hero-content{
    max-width:560px;
}

.hero-content,
.hero-content h1,
.hero-content p{
    color:#fff;
}

.hero-badge{
    color:#62BCC9;
}

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}
/* ===========================
   LARGE DESKTOP
=========================== */
@media(max-width:1400px){

.service-hero{
    min-height:520px;
    background-size:100% 100%,auto 82%;
}

}

@media(max-width:1200px){

.service-hero{
    min-height:470px;
    background-size:100% 100%,auto 78%;
}

}

@media(max-width:991px){

.service-hero{

    padding:70px 0;

    background:
        linear-gradient(
            rgba(7,23,44,.82),
            rgba(7,23,44,.82)
        ),
        var(--hero-image);

    background-size:cover,cover;
    background-position:center center;
}

.hero-content{
    max-width:100%;
    text-align:center;
}

.hero-buttons{
    justify-content:center;
}

}

@media(max-width:575px){

.service-hero{

    min-height:auto;
    padding:60px 0;

}

.hero-buttons .btn{

    width:100%;

}

}
/*--------------------------*/
.about-service{
padding:25px 0;
}

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

.section-description{
max-width:750px;
margin:auto;
}

.premium-about{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:70px;
align-items:center;
}

.about-left p{
font-size:18px;
line-height:1.9;
margin-bottom:25px;
color:#555;
}

.about-right{
display:flex;
flex-direction:column;
gap:25px;
}

.value-card{
display:flex;
gap:20px;
padding:12px;
background:#fff;
border-radius:20px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
transition:.3s;
}

.value-card:hover{
transform:translateY(-8px);
}

.value-icon{
width:55px;
height:55px;
background:#62BCC9;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:700;
flex-shrink:0;
}

.value-card h3{
margin-bottom:2px;
color:#1E2F4D;
}

.value-card p{
margin:0;
color:#666;
}

@media(max-width:991px){

.premium-about{
grid-template-columns:1fr;
}

}
.why-scs{
padding:20px 0;
background:#f8fafc;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:70px;
}

.why-card{
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
transition:.3s;
position:relative;
overflow:hidden;
}

.why-card:hover{
transform:translateY(-10px);
}

.why-number{
font-size:30px;
font-weight:700;
color:#62BCC9;
opacity:.2;
margin-bottom:2px;
}

.why-card h3{
margin-bottom:20px;
color:#1E2F4D;
}

@media(max-width:991px){

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

}

@media(max-width:768px){

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

}
.benefits-section{
padding:25px 0;
}

.benefits-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:70px;
}

.benefit-card{
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 15px 50px rgba(0,0,0,.08);
transition:.3s;
border-top:4px solid #62BCC9;
}

.benefit-card:hover{
transform:translateY(-10px);
}

.benefit-icon{
width:40px;
height:40px;
border-radius:50%;
background:#1E2F4D;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
margin-bottom:18px;
}

.benefit-card h3{
margin-bottom:15px;
color:#1E2F4D;
}

.benefit-card p{
margin:0;
line-height:1.8;
}

@media(max-width:991px){

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

}

@media(max-width:768px){

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

}
.process-section{
padding:25px 0;
background:#f8fafc;
}

.process-timeline{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;
margin-top:80px;
position:relative;
}

.process-box{
background:#fff;
padding:40px 30px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
text-align:center;
transition:.3s;
}

.process-box:hover{
transform:translateY(-10px);
}

.step-number{
width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
background:#62BCC9;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:700;
}

.process-box h3{
color:#1E2F4D;
margin-bottom:15px;
}

.process-box p{
line-height:1.8;
margin:0;
}

@media(max-width:1200px){

.process-timeline{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:768px){

.process-timeline{
grid-template-columns:1fr;
}

}
/*=========================
INDUSTRIES SECTION
==========================*/

.industries-section{
    padding:25px 0;
}

.industries-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;
}

.industry-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
    border-top:4px solid #62BCC9;
}

.industry-card:hover{
    transform:translateY(-10px);
}

.industry-card h3{
    color:#1E2F4D;
    margin-bottom:15px;
}

.industry-card p{
    margin:0;
    color:#666;
    line-height:1.8;
}
/*=========================
STATISTICS
==========================*/

.stats-section{
    background:#1E2F4D;
    padding:20px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.stat-box{
    text-align:center;
    color:#fff;
}

.stat-box h2{
    font-size:60px;
    color:#62BCC9;
    margin-bottom:15px;
}

.stat-box p{
    color:#fff;
    margin:0;
    letter-spacing:1px;
}
/*=========================
CTA
==========================*/

.cta-banner{
    padding:25px 0;
    background:
    linear-gradient(rgba(30,47,77,.90),rgba(30,47,77,.90)),
    url('../images/cta-bg.webp') center center/cover;
    text-align:center;
}

.cta-content{
    max-width:900px;
    margin:auto;
}

.cta-content h2{
    color:#fff;
    font-size:52px;
    margin-bottom:25px;
}

.cta-content p{
    color:#fff;
    font-size:20px;
    margin-bottom:40px;
}
.cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    margin-top:40px;
    flex-wrap:wrap;
}

.cta-buttons .btn{
    min-width:240px;
    text-align:center;
}
/*=========================
FAQ
==========================*/

.faq-section{
    padding:25px 0;
}

.faq-item{
    background:#fff;
    padding:35px;
    border-radius:20px;
    margin-bottom:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.faq-item h3{
    color:#1E2F4D;
    margin-bottom:15px;
}

.faq-item p{
    margin:0;
    line-height:1.9;
}
/*=========================
RELATED SERVICES
==========================*/

.related-services{
    padding:20px 0;
    background:#f8fafc;
}

.related-services .grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:70px;
}

.related-services .card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.related-services .card a{
    color:#62BCC9;
    font-weight:600;
}
/*=========================
top right
==========================*/
/*=========================================================
GLOBAL MOBILE OPTIMIZATION
=========================================================*/

@media (max-width:768px){

/*----------------------------
SECTION SPACING
----------------------------*/

section{

    padding:60px 0;

}

/*----------------------------
HEADINGS
----------------------------*/

.section-heading{

    margin-bottom:40px;

}

.section-heading h2{

    font-size:34px;

    line-height:1.3;

}

.section-description{

    font-size:16px;

}

/*----------------------------
ABOUT
----------------------------*/

.premium-about{

    display:block;

}

.about-right{

    margin-top:35px;

}

/*----------------------------
VALUE CARDS
----------------------------*/

.value-card{

    padding:22px;

    margin-bottom:18px;

}

/*----------------------------
WHY SCS
----------------------------*/

.why-grid{

    grid-template-columns:1fr;

    gap:22px;

}

/*----------------------------
BENEFITS
----------------------------*/

.benefits-grid{

    grid-template-columns:1fr;

    gap:22px;

}

/*----------------------------
PROCESS
----------------------------*/

.process-timeline{

    grid-template-columns:1fr;

    gap:22px;

}

/*----------------------------
INDUSTRIES
----------------------------*/

.industries-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.industry-card{

    min-height:auto;

    padding:28px;

}

.industry-card h3{

    font-size:28px;

    line-height:1.4;

}

.industry-card p{

    font-size:17px;

}

/*----------------------------
RELATED CERTIFICATIONS
----------------------------*/

.grid-4{

    grid-template-columns:1fr;

    gap:22px;

}

.grid-4 .card{

    min-height:auto;

    padding:28px;

}

.grid-4 .card h3{

    font-size:28px;

}

.grid-4 .card p{

    font-size:17px;

}

/*----------------------------
STATS
----------------------------*/

.stats-grid{

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

    gap:20px;

}

.stat-box{

    padding:30px 15px;

}

.stat-box h2{

    font-size:54px;

}

.stat-box p{

    font-size:17px;

}

/*----------------------------
CTA
----------------------------*/

.cta-content{

    text-align:center;

}

.cta-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.cta-buttons .btn{

    width:100%;

}

}