/* =========================================
   CELES LIMITED
   SERVICES PAGE
========================================= */


/* =========================
   SERVICES PAGE HERO
========================= */

.services-page-hero{
    position:relative;
    min-height:75vh;
    padding:180px 6% 100px;
    display:flex;
    align-items:center;
    background:var(--primary);
    color:var(--white);
    overflow:hidden;
}


.services-page-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(7,26,53,.92) 0%,
            rgba(7,26,53,.78) 45%,
            rgba(7,26,53,.35) 100%
        );

    z-index:1;
}


.services-page-hero .hero-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:900px;
    margin:0 auto;

    text-align:center;
}


.services-page-hero .hero-badge{
    display:inline-flex;

    margin-bottom:20px;
    padding:8px 16px;

    border:1px solid rgba(212,175,55,.5);
    border-radius:50px;

    color:var(--secondary);

    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
}


.services-page-hero h1{
    margin-bottom:25px;

    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.05;
}


.services-page-hero h1 span{
    color:var(--secondary);
}


.services-page-hero .hero-text{
    max-width:700px;
    margin:0 auto 35px;

    color:rgba(255,255,255,.78);

    font-size:1.08rem;
    line-height:1.8;
}


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

.services{
    padding:110px 6%;
    background:var(--white);
}


.section-header{
    max-width:760px;
    margin:0 auto 65px;

    text-align:center;
}


.section-label{
    display:inline-block;

    margin-bottom:15px;

    color:var(--secondary);

    font-size:.78rem;
    font-weight:800;
    letter-spacing:2px;
}


.section-header h2{
    margin-bottom:18px;

    color:var(--primary);

    font-size:clamp(2.2rem,4vw,3.5rem);
    line-height:1.1;
}


.section-header h2 span{
    color:var(--secondary);
}


.section-header p{
    color:#64748B;

    font-size:1rem;
    line-height:1.8;
}


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

.services-grid{
    width:100%;
    max-width:1400px;
    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:25px;
}


.service-card{
    position:relative;

    padding:38px 32px;

    background:var(--white);

    border:1px solid #E5E7EB;
    border-radius:20px;

    box-shadow:
        0 10px 30px rgba(7,26,53,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.service-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:var(--secondary);

    border-radius:20px 20px 0 0;

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .3s ease;
}


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

    border-color:rgba(212,175,55,.45);

    box-shadow:
        0 20px 45px rgba(7,26,53,.10);
}


.service-card:hover::before{
    transform:scaleX(1);
}


.service-icon{
    width:58px;
    height:58px;

    margin-bottom:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(212,175,55,.12);

    border-radius:15px;

    color:var(--secondary);

    font-size:1.4rem;
}


.service-card h3{
    margin-bottom:14px;

    color:var(--primary);

    font-size:1.35rem;
}


.service-card p{
    min-height:95px;

    margin-bottom:24px;

    color:#64748B;

    font-size:.95rem;
    line-height:1.75;
}


.service-card a{
    display:inline-flex;
    align-items:center;
    gap:9px;

    color:var(--primary);

    font-size:.9rem;
    font-weight:700;

    transition:
        color .3s ease,
        gap .3s ease;
}


.service-card a:hover{
    color:var(--secondary);
    gap:13px;
}

/* =========================
   LOGISTICS QUOTE FORM
========================= */

.logistics-quote{
    padding:110px 6%;

    background:var(--light);
}


.logistics-quote-wrapper{
    width:100%;
    max-width:1050px;

    margin:0 auto;

    padding:45px;

    background:var(--white);

    border:1px solid #E5E7EB;
    border-radius:24px;

    box-shadow:
        0 18px 50px rgba(7,26,53,.07);
}


.logistics-quote-form{
    width:100%;
}


.form-section{
    margin-bottom:40px;
}


.form-section:last-of-type{
    margin-bottom:30px;
}


.form-section h3{
    margin-bottom:25px;

    color:var(--primary);

    font-size:1.25rem;
}


.form-grid{
    display:grid;

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

    gap:24px;
}


.form-group{
    display:flex;
    flex-direction:column;
}


.form-group label{
    margin-bottom:9px;

    color:var(--primary);

    font-size:.88rem;
    font-weight:700;
}


.form-group input,
.form-group textarea{
    width:100%;

    padding:14px 16px;

    background:#FAFAFA;

    border:1px solid #D9DEE7;
    border-radius:10px;

    color:var(--primary);

    font-family:inherit;
    font-size:.95rem;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.form-group textarea{
    min-height:125px;
    height:125px;
    resize:none;
}


.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#94A3B8;
}


.form-group input:focus,
.form-group textarea:focus{
    background:var(--white);

    border-color:var(--secondary);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.12);
}


.logistics-quote-form
.primary-btn{
    border:none;

    cursor:pointer;
}


.logistics-quote-form
.primary-btn:disabled{
    opacity:.65;

    cursor:not-allowed;
}


.form-message{
    min-height:24px;

    margin-bottom:20px;

    font-size:.9rem;
    line-height:1.6;
}


.form-message.success{
    color:#15803D;
}


.form-message.error{
    color:#B91C1C;
}


/* =========================
   LOGISTICS QUOTE MOBILE
========================= */

@media (max-width:768px){

    .logistics-quote{
        padding:80px 6%;
    }


    .logistics-quote-wrapper{
        padding:30px 22px;

        border-radius:18px;
    }


    .form-grid{
        grid-template-columns:1fr;

        gap:20px;
    }


    .form-section{
        margin-bottom:32px;
    }


    .form-section h3{
        margin-bottom:20px;
    }

}


@media (max-width:480px){

    .logistics-quote{
        padding:70px 5%;
    }


    .logistics-quote-wrapper{
        padding:25px 18px;
    }


    .form-group input,
    .form-group textarea{
        padding:13px 14px;
    }

}

/* =========================
   HOW IT WORKS
========================= */

.why-us{
    padding:110px 6%;

    background:var(--light);
}


.why-grid{
    width:100%;
    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:20px;
}


.why-card{
    position:relative;

    padding:32px 26px;

    background:var(--white);

    border:1px solid var(--gray);
    border-radius:18px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


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

    box-shadow:
        0 18px 40px rgba(7,26,53,.08);
}


.why-number{
    margin-bottom:25px;

    color:var(--secondary);

    font-size:2rem;
    font-weight:800;
}


.why-card h3{
    margin-bottom:12px;

    color:var(--primary);

    font-size:1.15rem;
}


.why-card p{
    color:#64748B;

    font-size:.92rem;
    line-height:1.7;
}


/* =========================
   SERVICES CTA
========================= */

.contact-cta{
    padding:110px 6%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #0B274B
        );

    color:var(--white);
}


.contact-cta-content{
    max-width:850px;

    margin:0 auto;

    text-align:center;
}


.contact-cta .section-label{
    color:var(--secondary);
}


.contact-cta h2{
    margin-bottom:20px;

    font-size:clamp(2.3rem,5vw,4rem);
    line-height:1.1;
}


.contact-cta h2 span{
    color:var(--secondary);
}


.contact-cta p{
    max-width:650px;

    margin:0 auto 35px;

    color:rgba(255,255,255,.75);

    line-height:1.8;
}


/* =========================
   SERVICES PAGE BUTTONS
========================= */

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


/* =========================
   SCROLL REVEAL
========================= */

.services-page-hero .hero-content,
.services .section-header,
.service-card,
.why-card,
.contact-cta-content{
    opacity:1;
}


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

@media (max-width:1100px){

    .services{
        padding:90px 5%;
    }


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


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

}


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

@media (max-width:768px){

    .services-page-hero{
        min-height:70vh;

        padding:150px 6% 80px;
    }


    .services-page-hero h1{
        font-size:3rem;
    }


    .services-page-hero .hero-text{
        font-size:.95rem;
    }


    .services{
        padding:80px 6%;
    }


    .section-header{
        margin-bottom:45px;
    }


    .services-grid{
        grid-template-columns:1fr;

        gap:18px;
    }


    .service-card{
        padding:30px 25px;
    }


    .service-card p{
        min-height:auto;
    }


    .why-us{
        padding:80px 6%;
    }


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

        gap:18px;
    }


    .why-card{
        padding:28px 24px;
    }


    .contact-cta{
        padding:80px 6%;
    }


    .contact-cta .hero-buttons{
        align-items:center;
    }

}


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

@media (max-width:480px){

    .services-page-hero{
        padding:135px 6% 70px;
    }


    .services-page-hero h1{
        font-size:2.45rem;
    }


    .services{
        padding:70px 5%;
    }


    .service-card{
        padding:27px 22px;
    }


    .service-icon{
        width:52px;
        height:52px;
    }


    .contact-cta{
        padding:70px 5%;
    }

}