/*==================================================
CENTURY CARGO
PARCEL SERVICE NEW CSS

PART 1
HEADER + HERO
==================================================*/


:root{

--primary:#0057D9;
--secondary:#062B63;
--blue:#00B8D9;
--orange:#FF7A00;
--green:#25D366;

--white:#ffffff;
--light:#F5FAFF;
--text:#5B6475;
--dark:#172033;

--border:#E5EDF7;

--shadow:0 15px 45px rgba(0,87,217,.12);

}





*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:'Poppins',sans-serif;

color:var(--dark);

overflow-x:hidden;

}



a{

text-decoration:none;

}



ul{

list-style:none;

}





.parcel-container{

width:100%;

max-width:1280px;

margin:auto;

padding:0 20px;

}







/*==============================
HEADER
==============================*/


.parcel-header{

background:#fff;

padding:18px 0;

position:sticky;

top:0;

z-index:999;

box-shadow:0 5px 25px rgba(0,0,0,.06);

}





.parcel-header .parcel-container{

display:flex;

align-items:center;

justify-content:space-between;

}





.parcel-logo{

font-size:30px;

font-weight:800;

color:var(--secondary);

display:flex;

align-items:center;

gap:10px;

}



.parcel-logo i{

color:var(--primary);

}





.parcel-nav ul{

display:flex;

align-items:center;

gap:25px;

}



.parcel-nav a{

color:#344054;

font-size:15px;

font-weight:600;

display:flex;

align-items:center;

gap:8px;

}



.parcel-nav a:hover{

color:var(--primary);

}







/*==============================
CALL BUTTON
==============================*/


.parcel-call-btn{

background:var(--primary);

color:#fff;

padding:14px 25px;

border-radius:50px;

font-weight:700;

display:flex;

gap:10px;

align-items:center;

}



.parcel-call-btn:hover{

background:var(--orange);

color:#fff;

}







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


.parcel-menu-btn{

display:none;

background:none;

border:0;

}



.parcel-menu-btn span{

display:block;

width:30px;

height:3px;

background:var(--secondary);

margin:6px;

}








/*==============================
BREADCRUMB
==============================*/


.parcel-breadcrumb{

background:#F7FBFF;

padding:18px 0;

}



.parcel-breadcrumb p{

color:#667085;

font-size:14px;

}



.parcel-breadcrumb i{

margin:0 10px;

color:var(--primary);

}







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


.parcel-hero{

padding:100px 0;

background:

linear-gradient(
135deg,
#062B63,
#0057D9,
#00B8D9
);

overflow:hidden;

}




.parcel-hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:60px;

align-items:center;

}







/*==============================
HERO CONTENT
==============================*/


.parcel-badge{

display:inline-flex;

align-items:center;

gap:10px;

background:rgba(255,255,255,.15);

padding:12px 22px;

border-radius:50px;

color:#fff;

font-weight:600;

margin-bottom:25px;

}



.parcel-badge i{

color:#8EF0FF;

}




.parcel-hero-content h1{

font-size:60px;

line-height:1.15;

font-weight:800;

color:#fff;

margin-bottom:20px;

}



.parcel-hero-content h1 span{

display:block;

color:#8EF0FF;

}





.parcel-hero-content p{

font-size:17px;

line-height:1.8;

color:#EAF5FF;

margin-bottom:30px;

}








/*==============================
FEATURES
==============================*/


.parcel-features{

display:grid;

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

gap:15px;

margin-bottom:30px;

}



.parcel-features div{

background:rgba(255,255,255,.14);

padding:16px;

border-radius:15px;

color:#fff;

font-weight:600;

display:flex;

align-items:center;

gap:12px;

}



.parcel-features i{

color:#8EF0FF;

font-size:22px;

}







/*==============================
BUTTONS
==============================*/


.parcel-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}



.parcel-primary-btn,
.parcel-secondary-btn{

padding:16px 35px;

border-radius:50px;

font-weight:700;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

}



.parcel-primary-btn{

background:var(--orange);

color:#fff;

}



.parcel-secondary-btn{

background:#fff;

color:var(--primary);

}



.parcel-primary-btn:hover,
.parcel-secondary-btn:hover{

transform:translateY(-5px);

}







/*==============================
HERO ICON
==============================*/


.parcel-hero-icon{

display:flex;

justify-content:center;

}



.parcel-hero-icon i{

height:300px;

width:300px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(255,255,255,.15);

font-size:130px;

color:#8EF0FF;

}







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


@media(max-width:991px){


.parcel-nav{

display:none;

}


.parcel-menu-btn{

display:block;

}



.parcel-hero-grid{

grid-template-columns:1fr;

text-align:center;

}



.parcel-buttons{

justify-content:center;

}



}



@media(max-width:600px){


.parcel-container{

padding:0 15px;

}



.parcel-hero{

padding:70px 0;

}



.parcel-hero-content h1{

font-size:36px;

}



.parcel-features{

grid-template-columns:1fr;

}



.parcel-primary-btn,
.parcel-secondary-btn{

width:100%;

}



.parcel-hero-icon i{

height:220px;

width:220px;

font-size:90px;

}

}






/*==================================================
PARCEL SERVICE NEW CSS

PART 2

TRUST + SERVICES + BUSINESS
==================================================*/



/*==============================
SECTION TITLE
==============================*/


.parcel-title{

text-align:center;

max-width:850px;

margin:0 auto 50px;

}



.parcel-title span{

display:inline-block;

padding:8px 20px;

background:#EAF8FF;

border-radius:50px;

color:var(--primary);

font-weight:700;

font-size:14px;

margin-bottom:15px;

}



.parcel-title h2{

font-size:40px;

font-weight:800;

color:var(--secondary);

line-height:1.3;

}





.parcel-title p{

color:var(--text);

font-size:16px;

line-height:1.8;

}







/*==============================
TRUST SECTION
==============================*/


.parcel-trust{

padding:90px 0;

background:#F7FBFF;

}




.parcel-trust-grid{

display:grid;

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

gap:25px;

}




.parcel-card{

background:#fff;

padding:35px 25px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}



.parcel-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,87,217,.18);

}




.parcel-card i{

height:80px;

width:80px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 20px;

border-radius:50%;

background:#EAF8FF;

color:var(--primary);

font-size:35px;

}





.parcel-card h3{

font-size:22px;

color:var(--secondary);

margin-bottom:12px;

}





.parcel-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
CATEGORY SECTION
==============================*/


.parcel-category{

padding:90px 0;

background:#fff;

}




.parcel-category-grid{

display:grid;

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

gap:25px;

}




.parcel-service-card{

background:#F7FBFF;

padding:35px 25px;

border-radius:25px;

text-align:center;

transition:.35s;

border:1px solid #EAF0F8;

}



.parcel-service-card:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-8px);

}




.parcel-service-card i{

font-size:45px;

color:var(--primary);

margin-bottom:18px;

}




.parcel-service-card h3{

font-size:21px;

color:var(--secondary);

margin-bottom:12px;

}




.parcel-service-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
BUSINESS SECTION
==============================*/


.parcel-business{

padding:80px 0;

background:#F7FBFF;

}




.parcel-business-box{

display:flex;

align-items:center;

gap:40px;

padding:50px;

border-radius:35px;

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

color:#fff;

}




.parcel-business-box > div:first-child{

height:120px;

width:120px;

flex-shrink:0;

border-radius:50%;

background:rgba(255,255,255,.15);

display:flex;

align-items:center;

justify-content:center;

}



.parcel-business-box i{

font-size:55px;

color:#8EF0FF;

}




.parcel-business-box h2{

font-size:36px;

margin-bottom:15px;

}





.parcel-business-box p{

font-size:16px;

line-height:1.8;

color:#EAF5FF;

margin-bottom:25px;

}




.parcel-business-box a{

display:inline-block;

background:#FFB800;

color:#111;

padding:14px 32px;

border-radius:50px;

font-weight:700;

}







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


@media(max-width:1100px){


.parcel-trust-grid,
.parcel-category-grid{

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

}



}



@media(max-width:600px){


.parcel-trust-grid,
.parcel-category-grid{

grid-template-columns:1fr;

}



.parcel-title h2{

font-size:30px;

}



.parcel-business-box{

flex-direction:column;

text-align:center;

padding:35px 20px;

}



.parcel-business-box h2{

font-size:28px;

}

}









/*==================================================
PARCEL SERVICE NEW CSS

PART 3

PRICE + DELIVERY + PACKING + PROCESS + AREA
==================================================*/



/*==============================
PRICE SECTION
==============================*/


.parcel-price{

padding:90px 0;

background:#fff;

}



.parcel-price-table{

background:#fff;

border-radius:25px;

overflow-x:auto;

box-shadow:var(--shadow);

}



.parcel-price-table table{

width:100%;

min-width:700px;

border-collapse:collapse;

}



.parcel-price-table th{

background:

linear-gradient(
135deg,
#0057D9,
#00B8D9
);

color:#fff;

padding:18px;

text-align:left;

font-size:16px;

}



.parcel-price-table td{

padding:18px;

border-bottom:1px solid #E5EDF7;

color:var(--text);

}



.parcel-price-table tr:hover td{

background:#F7FBFF;

}







/*==============================
DELIVERY OPTIONS
==============================*/


.parcel-delivery{

padding:90px 0;

background:#F7FBFF;

}



.parcel-delivery-grid{

display:grid;

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

gap:25px;

}







/*==============================
PACKING SECTION
==============================*/


.parcel-packing{

padding:90px 0;

background:#fff;

}



.parcel-packing-box{

display:grid;

grid-template-columns:.5fr 1.5fr;

gap:40px;

align-items:center;

background:#F7FBFF;

padding:45px;

border-radius:30px;

}



.parcel-packing-icon{

height:130px;

width:130px;

border-radius:50%;

background:#EAF8FF;

display:flex;

align-items:center;

justify-content:center;

}



.parcel-packing-icon i{

font-size:60px;

color:var(--primary);

}



.parcel-packing h2{

font-size:35px;

color:var(--secondary);

margin-bottom:15px;

}



.parcel-packing p{

font-size:16px;

line-height:1.8;

color:var(--text);

}



.parcel-packing ul{

margin-top:20px;

}



.parcel-packing li{

margin-bottom:12px;

font-weight:600;

color:#344054;

}



.parcel-packing li i{

color:#25D366;

margin-right:10px;

}







/*==============================
PROCESS SECTION
==============================*/


.parcel-process{

padding:90px 0;

background:#F7FBFF;

}



.parcel-process-grid{

display:grid;

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

gap:25px;

}







/*==============================
AREA SECTION
==============================*/


.parcel-area{

padding:90px 0;

background:#fff;

}



.parcel-area-grid{

display:grid;

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

gap:30px;

}



.parcel-area-box{

background:#F7FBFF;

padding:40px;

border-radius:25px;

}



.parcel-area-box i{

height:75px;

width:75px;

display:flex;

align-items:center;

justify-content:center;

background:#EAF8FF;

border-radius:50%;

color:var(--primary);

font-size:35px;

margin-bottom:20px;

}



.parcel-area-box h3{

font-size:25px;

color:var(--secondary);

margin-bottom:20px;

}



.parcel-area-box li{

padding:8px 0;

color:var(--text);

border-bottom:1px dashed #ddd;

}







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


@media(max-width:1100px){


.parcel-delivery-grid{

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

}



.parcel-process-grid{

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

}



.parcel-packing-box{

grid-template-columns:1fr;

text-align:center;

}



}




@media(max-width:600px){


.parcel-delivery-grid,
.parcel-process-grid,
.parcel-area-grid{

grid-template-columns:1fr;

}



.parcel-packing-box{

padding:25px;

}



.parcel-packing h2{

font-size:28px;

}

}













/*==================================================
PARCEL SERVICE NEW CSS

PART 4 FINAL

FAQ + FORM + FOOTER
==================================================*/



/*==============================
WHY CHOOSE
==============================*/


.parcel-why{

padding:90px 0;

background:#F7FBFF;

}



.parcel-why-grid{

display:grid;

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

gap:25px;

}







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


.parcel-faq{

padding:90px 0;

background:#fff;

}



.parcel-faq-list{

max-width:900px;

margin:auto;

}



.parcel-faq-item{

background:#F7FBFF;

padding:25px;

border-radius:20px;

margin-bottom:18px;

}



.parcel-faq-item h3{

font-size:19px;

color:var(--secondary);

margin-bottom:10px;

}



.parcel-faq-item p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







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


.parcel-quote{

padding:90px 0;

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

}



.parcel-quote-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.parcel-quote-content h2{

font-size:42px;

color:#fff;

margin-bottom:20px;

}



.parcel-quote-content p{

color:#EAF5FF;

font-size:16px;

line-height:1.8;

}



.parcel-contact-points{

margin-top:25px;

}



.parcel-contact-points div{

color:#fff;

font-weight:600;

margin-bottom:15px;

}



.parcel-contact-points i{

color:#8EF0FF;

margin-right:10px;

}





.parcel-form{

background:#fff;

padding:35px;

border-radius:30px;

}



.parcel-form input,
.parcel-form select,
.parcel-form textarea{

width:100%;

padding:14px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:12px;

font-family:inherit;

}



.parcel-form textarea{

height:100px;

resize:none;

}



.parcel-form button{

width:100%;

padding:15px;

border:0;

border-radius:50px;

background:var(--orange);

color:#fff;

font-size:17px;

font-weight:700;

}







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


.parcel-cta{

padding:80px 0;

background:#fff;

}



.parcel-cta-box{

background:

linear-gradient(
135deg,
#0057D9,
#00B8D9
);

padding:60px 30px;

border-radius:35px;

text-align:center;

color:#fff;

}



.parcel-cta-box i{

font-size:70px;

color:#8EF0FF;

margin-bottom:20px;

}



.parcel-cta-box h2{

font-size:38px;

margin-bottom:15px;

}



.parcel-cta-box p{

margin-bottom:25px;

}



.parcel-cta-box a{

display:inline-block;

background:#FFB800;

color:#111;

padding:15px 35px;

border-radius:50px;

font-weight:700;

}







/*==============================
CONTACT
==============================*/


.parcel-contact{

padding:70px 0;

background:#F7FBFF;

}



.parcel-contact-grid{

display:grid;

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

gap:20px;

}



.parcel-contact-card{

background:#fff;

padding:30px 20px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

}



.parcel-contact-card i{

font-size:38px;

color:var(--primary);

margin-bottom:15px;

}



.parcel-contact-card h3{

color:var(--secondary);

margin-bottom:8px;

}







/*==============================
RELATED SERVICES
==============================*/


.parcel-related{

padding:90px 0;

background:#fff;

}



.parcel-related-grid{

display:grid;

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

gap:20px;

}



.parcel-related-grid a{

background:#F7FBFF;

padding:30px 15px;

border-radius:20px;

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

font-weight:700;

color:var(--secondary);

text-align:center;

}



.parcel-related-grid i{

font-size:30px;

color:var(--primary);

}








/*==============================
FLOATING BUTTONS
==============================*/


.parcel-floating-call,
.parcel-floating-whatsapp{

position:fixed;

bottom:25px;

height:60px;

width:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

color:#fff;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}



.parcel-floating-call{

right:90px;

background:#0057D9;

}



.parcel-floating-whatsapp{

right:20px;

background:#25D366;

}







/*==============================
FOOTER
==============================*/


.parcel-footer{

background:#06152F;

padding:70px 0 20px;

color:#fff;

}



.parcel-footer-grid{

display:grid;

grid-template-columns:1.5fr 1fr 1fr 1fr;

gap:35px;

}



.parcel-footer h3{

margin-bottom:18px;

}



.parcel-footer p,
.parcel-footer li{

color:#CBD5E1;

line-height:1.8;

font-size:15px;

}



.parcel-copyright{

border-top:1px solid rgba(255,255,255,.2);

margin-top:40px;

padding-top:20px;

text-align:center;

color:#CBD5E1;

}







/*==============================
FINAL MOBILE FIX
==============================*/


@media(max-width:1100px){


.parcel-why-grid{

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

}



.parcel-contact-grid{

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

}



.parcel-related-grid{

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

}



.parcel-footer-grid{

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

}



.parcel-quote-grid{

grid-template-columns:1fr;

}


}




@media(max-width:600px){


.parcel-why-grid,
.parcel-contact-grid,
.parcel-related-grid,
.parcel-footer-grid{

grid-template-columns:1fr;

}



.parcel-quote-content h2{

font-size:30px;

}



.parcel-form{

padding:25px;

}



.parcel-cta-box h2{

font-size:30px;

}



.parcel-floating-call,
.parcel-floating-whatsapp{

height:55px;

width:55px;

bottom:20px;

}


.parcel-floating-call{

right:85px;

}



}