/* ==========================================
SERVICE PAGE
Nadhim Decor
==========================================*/


/*==========================================
ABOUT SERVICE
==========================================*/

.about-service{

    padding:110px 0;

    background:
        linear-gradient(
            to bottom,
            #FBF8F3,
            #F4EEE6
        );

}

.about-service-content{

    max-width:1100px;

    margin:auto;

}

.about-service-content p{

    font-size:18px;

    line-height:2.1;

    color:var(--text);

    margin-bottom:28px;

    text-align:justify;

}

.about-service-content strong{

    color:var(--primary);

    font-weight:700;

}



/*==========================================
WORK PROCESS
==========================================*/

.work-process{

    padding:110px 0;

    background:#fff;

}

.process-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:70px;

}

.process-card{

    background:#fff;

    border-radius:24px;

    padding:45px 30px;

    position:relative;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

    border:1px solid var(--border);

}

.process-card:hover{

    transform:translateY(-10px);

}

.process-number{

    width:62px;

    height:62px;

    margin:auto;

    margin-bottom:22px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            #6F4428,
            #8B5E3C,
            #B07A4F
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:22px;

}

.process-card i{

    font-size:44px;

    color:var(--primary);

    margin-bottom:22px;

}

.process-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:var(--dark);

}

.process-card p{

    line-height:1.9;

    color:var(--text);

}



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

.faq-section{

    padding:110px 0;

    background:

        linear-gradient(
            to bottom,
            #F7F2EC,
            #FBF8F3
        );

}

.faq-container{

    max-width:1050px;

    margin:auto;

}

.faq-item{

    background:#fff;

    border-radius:20px;

    padding:28px 35px;

    margin-bottom:22px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:.3s;

}

.faq-item:hover{

    transform:translateY(-5px);

}

.faq-item h3{

    color:var(--primary);

    font-size:24px;

    margin-bottom:16px;

}

.faq-item p{

    line-height:2;

    color:var(--text);

}



/*==========================================
SERVICE AREAS
==========================================*/

.areas-section{

    padding:110px 0;

    background:#fff;

}

.areas-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:60px;

}

.area-card{

    background:

        linear-gradient(
            to bottom,
            #FBF8F3,
            #F3EBE2
        );

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    border:1px solid var(--border);

}

.area-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.area-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:22px;

}

.area-card h3{

    font-size:24px;

    color:var(--dark);

    margin-bottom:18px;

}

.area-card p{

    color:var(--text);

    line-height:1.9;

}

.areas-bottom{

    margin-top:70px;

    text-align:center;

}

.areas-bottom h3{

    font-size:36px;

    margin-bottom:20px;

    color:var(--dark);

}

.areas-bottom p{

    max-width:900px;

    margin:auto;

    line-height:2;

    color:var(--text);

    margin-bottom:35px;

}



/*==========================================
CTA NOTE
==========================================*/

.cta-note{

    margin-top:60px;

    text-align:center;

}

.cta-note h3{

    color:#fff;

    font-size:36px;

    margin-bottom:18px;

}

.cta-note p{

    color:

        rgba(255,255,255,.88);

    max-width:850px;

    margin:auto;

    line-height:2;

}



/*==========================================
ANIMATIONS
==========================================*/

.process-card,
.area-card,
.faq-item{

    opacity:0;

    transform:translateY(50px);

    animation:

        fadeUp .8s ease forwards;

}

.process-card:nth-child(2){

    animation-delay:.1s;

}

.process-card:nth-child(3){

    animation-delay:.2s;

}

.process-card:nth-child(4){

    animation-delay:.3s;

}

.process-card:nth-child(5){

    animation-delay:.4s;

}

.process-card:nth-child(6){

    animation-delay:.5s;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



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

@media(max-width:992px){

.about-service,
.work-process,
.faq-section,
.areas-section{

    padding:80px 0;

}

.process-card{

    padding:35px 25px;

}

.area-card{

    padding:35px 25px;

}

}



@media(max-width:768px){

.about-service-content p{

    text-align:right;

    font-size:17px;

}

.process-card h3,
.area-card h3{

    font-size:22px;

}

.faq-item{

    padding:22px;

}

.faq-item h3{

    font-size:20px;

}

.areas-bottom h3{

    font-size:28px;

}

.cta-note h3{

    font-size:28px;

}

}



@media(max-width:576px){

.process-grid,
.areas-grid{

    gap:20px;

}

.process-card,
.area-card{

    padding:28px 20px;

}

.process-number{

    width:52px;

    height:52px;

    font-size:18px;

}

.process-card i{

    font-size:36px;

}

}