/* =====================================================
   SERVICE PAGE STYLES
   Project : Caravan Custom Canvas
   Brand   : #EA8F24
===================================================== */


/* =====================================================
   Main Wrapper
===================================================== */

.service-content{
    width:100%;
    max-width:1400px;
    margin:-100px auto 120px;
    padding:60px;
    background:#F7F7F7;
    border-radius:20px;
    box-sizing:border-box;
}


/* =====================================================
   Section
===================================================== */

.service-section{
    margin-bottom:80px;
}

.service-section:last-child{
    margin-bottom:0;
}


/* =====================================================
   Section Heading
===================================================== */

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

.section-heading h2{
    font-size:38px;
    font-weight:700;
    color:#EA8F24;
    line-height:1.2;
    margin:0 0 18px;
}

.section-heading h2::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:#EA8F24;
    margin:20px auto 0;
    border-radius:50px;
}

.section-intro{
    max-width:950px;
    margin:30px auto 0;
    font-size:18px;
    line-height:1.9;
    color:#555;
}


/* =====================================================
   Paragraphs
===================================================== */

.service-section p{
    font-size:17px;
    line-height:1.9;
    color:#555;
    margin-bottom:20px;
}

.service-section strong{
    color:#222;
}


/* =====================================================
   Two Column Layout
===================================================== */

.two-column{
    display:flex;
    gap:45px;
    align-items:flex-start;
}

.content-column{
    flex:2;
}

.feature-card{
    flex:1;
}


/* =====================================================
   White Cards
===================================================== */

.feature-card,
.info-box,
.warning-box,
.maintenance-box,
.cta-box,
.process-card,
.faq-item{

    background:#FFFFFF;
    padding:30px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);

}


/* =====================================================
   Feature Card
===================================================== */

.feature-card{

    border-left:5px solid #EA8F24;

}

.feature-card h3{

    margin:0 0 22px;
    color:#EA8F24;
    font-size:24px;

}


/* =====================================================
   Check List
===================================================== */

.check-list{

    margin:0;
    padding:0;
    list-style:none;

}

.check-list li{

    position:relative;
    padding-left:30px;
    margin-bottom:18px;
    color:#555;
    line-height:1.8;

}

.check-list li:last-child{

    margin-bottom:0;

}

.check-list li::before{

    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:#EA8F24;
    font-weight:bold;

}


/* =====================================================
   Information Box
===================================================== */

.info-box{

    margin-top:35px;
    border-left:5px solid #EA8F24;
    background:#FFF8EF;

}

.info-box h3{

    color:#EA8F24;
    margin-top:0;

}


/* =====================================================
   Replacement Process
===================================================== */

.process-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin:40px 0;

}

.process-card{

    border-top:4px solid #EA8F24;

}

.process-card h4{

    margin:0 0 12px;
    color:#EA8F24;
    font-size:22px;

}

.process-card p{

    margin:0;

}


/* =====================================================
   Warning Box
===================================================== */

.warning-box{

    background:#FFF8EF;
    border-left:5px solid #EA8F24;

}

.warning-box h3{

    color:#EA8F24;
    margin-top:0;

}


/* =====================================================
   Maintenance Box
===================================================== */

.maintenance-box{

    margin-top:40px;

}

.maintenance-box h3{

    margin-top:0;
    color:#EA8F24;

}


/* =====================================================
   CTA Box
===================================================== */

.cta-box{

    margin-top:40px;
    background:#EA8F24;
    color:#FFFFFF;
    text-align:center;

}

.cta-box h3{

    color:#FFFFFF;
    margin-top:0;
    font-size:30px;

}

.cta-box p{

    color:#FFFFFF;

}


/* =====================================================
   FAQ
===================================================== */

.faq-section{

    margin-top:90px;

}

.faq-item{

    margin-bottom:22px;
    border-left:5px solid #EA8F24;

}

.faq-item:last-child{

    margin-bottom:0;

}

.faq-item h3{

    margin:0 0 15px;
    color:#EA8F24;
    font-size:22px;

}

.faq-item p{

    margin:0;

}


/* =====================================================
   Hover Effects
===================================================== */

.feature-card:hover,
.process-card:hover,
.faq-item:hover{

    transform:translateY(-5px);
    transition:.3s ease;
    box-shadow:0 18px 40px rgba(0,0,0,.08);

}


/* =====================================================
   Tablet
===================================================== */

@media(max-width:1024px){

.service-content{

    padding:45px;

}

.section-heading h2{

    font-size:32px;

}

.two-column{

    flex-direction:column;

}

.process-grid{

    grid-template-columns:1fr;

}

}


/* =====================================================
   Mobile
===================================================== */

@media(max-width:767px){

.service-content{

    padding:30px 20px;
    margin-top:-60px;

}

.section-heading h2{

    font-size:28px;

}

.section-intro{

    font-size:16px;

}

.service-section p{

    font-size:16px;

}

.feature-card,
.info-box,
.warning-box,
.maintenance-box,
.process-card,
.cta-box,
.faq-item{

    padding:22px;

}

.process-card h4{

    font-size:20px;

}

.cta-box h3{

    font-size:24px;

}

}