/*=========================================================
  MALWA COURIER SERVICE LTD.
  Premium Website v2.0
  Design & Development
==========================================================*/

/*=========================================================
 GOOGLE FONTS
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');


/*=========================================================
 ROOT VARIABLES
==========================================================*/

:root{

/* Brand Colors */

--primary:#162A46;
--primary-dark:#0D1B2F;
--secondary:#2EA8FF;
--secondary-dark:#1787dc;
--accent:#58BFFF;

--white:#ffffff;
--light:#F7FBFF;
--lighter:#FCFDFF;

--text:#374151;
--heading:#162A46;
--muted:#6B7280;

--border:#DCE7F3;


/* Gradients */

--gradient-primary:
linear-gradient(
135deg,
#162A46 0%,
#1E3A63 45%,
#2EA8FF 100%
);

--gradient-light:
linear-gradient(
135deg,
#ffffff,
#f8fbff
);

--gradient-blue:
linear-gradient(
135deg,
#2EA8FF,
#58BFFF
);


/* Shadows */

--shadow-xs:
0 2px 10px rgba(0,0,0,.04);

--shadow-sm:
0 8px 24px rgba(0,0,0,.08);

--shadow-md:
0 15px 35px rgba(0,0,0,.10);

--shadow-lg:
0 25px 60px rgba(0,0,0,.16);

--shadow-blue:
0 18px 40px rgba(46,168,255,.25);


/* Radius */

--radius-sm:8px;
--radius:16px;
--radius-lg:24px;
--radius-xl:36px;


/* Transition */

--transition:.35s ease;


/* Max Width */

--container:1320px;

}


/*=========================================================
 CSS RESET
==========================================================*/

*,
*::before,
*::after{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--white);

color:var(--text);

font-size:16px;

line-height:1.8;

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}


/*=========================================================
 SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EDF4FA;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary);

}


/*=========================================================
 TEXT SELECTION
==========================================================*/

::selection{

background:var(--secondary);

color:white;

}


/*=========================================================
 TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4,h5,h6{

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

font-weight:700;

color:var(--heading);

line-height:1.2;

margin-bottom:18px;

}

h1{

font-size:62px;

}

h2{

font-size:44px;

}

h3{

font-size:30px;

}

h4{

font-size:24px;

}

h5{

font-size:20px;

}

h6{

font-size:18px;

}

p{

margin-bottom:18px;

color:var(--text);

}

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}

img{

display:block;

max-width:100%;

}

ul{

list-style:none;

}


/*=========================================================
 CONTAINER
==========================================================*/

.container{

width:100%;

max-width:var(--container);

margin:auto;

padding-inline:20px;

}


/*=========================================================
 SECTION SPACING
==========================================================*/

section{

padding:110px 0;

position:relative;

}

.section-light{

background:var(--light);

}

.section-title{

text-align:center;

max-width:760px;

margin:auto auto 70px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:rgba(46,168,255,.12);

border-radius:100px;

color:var(--secondary);

font-weight:600;

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:18px;

}

.section-title h2{

margin-bottom:15px;

}

.section-title p{

font-size:18px;

color:var(--muted);

}


/*=========================================================
 UTILITIES
==========================================================*/

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.d-flex{

display:flex;

}

.align-center{

align-items:center;

}

.justify-between{

justify-content:space-between;

}

.grid{

display:grid;

gap:30px;

}


/*=========================================================
 BACKGROUND SHAPES
==========================================================*/

.bg-circle{

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(46,168,255,.06);

filter:blur(40px);

pointer-events:none;

}


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

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp 1s ease forwards;

}

.float{

animation:float 5s ease infinite;

}

.pulse{

animation:pulse 3s infinite;

}
/*=========================================================
MODULE 02
PREMIUM BUTTONS
=========================================================*/

.btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;

padding:16px 34px;

font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:600;

border-radius:60px;

cursor:pointer;

transition:all .35s ease;

border:none;

position:relative;

overflow:hidden;

z-index:1;

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transition:.8s;

z-index:-1;

}

.btn:hover::before{

left:120%;

}

.btn-primary{

background:var(--gradient-blue);

color:#fff;

box-shadow:var(--shadow-blue);

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:
0 25px 45px rgba(46,168,255,.35);

}

.btn-secondary{

background:#fff;

color:var(--primary);

border:2px solid rgba(46,168,255,.25);

box-shadow:var(--shadow-sm);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

}

.btn-outline{

background:transparent;

border:2px solid var(--secondary);

color:var(--secondary);

}

.btn-outline:hover{

background:var(--secondary);

color:#fff;

box-shadow:var(--shadow-blue);

}

.btn-lg{

padding:20px 42px;

font-size:17px;

}

.btn-sm{

padding:12px 24px;

font-size:14px;

}
/*=========================================================
MODULE 03A
PREMIUM HERO SECTION
=========================================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

background:
linear-gradient(
135deg,
rgba(13,27,47,.92),
rgba(22,42,70,.88),
rgba(46,168,255,.72)
),
url("../images/hero/hero-bg.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

padding-top:0;

padding-bottom:120px;

}

/*---------------------------------
Background Overlay
----------------------------------*/

.hero::before{

content:"";

position:absolute;

inset:0;

background:
radial-gradient(circle at top right,
rgba(88,191,255,.18),
transparent 45%);

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

bottom:-120px;

left:-120px;

width:420px;

height:420px;

border-radius:50%;

background:rgba(46,168,255,.08);

filter:blur(45px);

}

/*---------------------------------
Hero Container
----------------------------------*/

.hero-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:20px;
    padding-top: 50px;
}

/*---------------------------------
Hero Content
----------------------------------*/

.hero-content{

max-width:680px;

animation:fadeUp .9s ease;

}

.hero-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

border-radius:100px;

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

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.15);

color:#fff;

font-size:14px;

font-weight:600;

margin-bottom:28px;

}

.hero-tag i{

color:var(--secondary);

font-size:16px;

}

/*---------------------------------
Hero Heading
----------------------------------*/

.hero-title{

font-size:66px;

line-height:1.1;

font-weight:800;

color:#fff;

margin-bottom:28px;

}

.hero-title span{

background:linear-gradient(
90deg,
#58BFFF,
#2EA8FF,
#ffffff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*---------------------------------
Hero Description
----------------------------------*/

.hero-description{

font-size:18px;

line-height:1.9;

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

max-width:620px;

margin-bottom:42px;

}

/*---------------------------------
Hero Buttons
----------------------------------*/

.hero-buttons{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:45px;

}

/*---------------------------------
Trust Badges
----------------------------------*/

.hero-badges{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.hero-badge{

display:flex;

align-items:center;

gap:12px;

padding:14px 22px;

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

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.12);

border-radius:50px;

color:#fff;

font-size:14px;

font-weight:600;

transition:.35s;

}

.hero-badge:hover{

transform:translateY(-5px);

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

}

.hero-badge i{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(46,168,255,.18);

color:var(--secondary);

font-size:15px;

}

/*---------------------------------
Hero Right Side
----------------------------------*/

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

animation:float 6s ease-in-out infinite;

}

.hero-image img{
    width:650px;
    max-width:100%;
    height:auto;
    display:block;
    border-radius:25px;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}
/*=========================================================
MODULE 03B
PREMIUM HERO FLOATING ELEMENTS
=========================================================*/

/*=========================================
Hero Decorative Shapes
=========================================*/

.hero-shape{

position:absolute;

border-radius:50%;

pointer-events:none;

z-index:1;

}

.hero-shape.one{

top:12%;

right:8%;

width:180px;

height:180px;

background:rgba(46,168,255,.12);

filter:blur(35px);

animation:float 7s ease-in-out infinite;

}

.hero-shape.two{

bottom:10%;

left:-60px;

width:260px;

height:260px;

background:rgba(88,191,255,.08);

filter:blur(45px);

animation:float 9s ease-in-out infinite;

}

.hero-shape.three{

top:45%;

left:48%;

width:22px;

height:22px;

background:var(--secondary);

box-shadow:0 0 35px rgba(46,168,255,.7);

animation:pulse 2.5s infinite;

}

/*=========================================
Floating Shipment Card
=========================================*/

.floating-card{

position:absolute;

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.15);

border-radius:24px;

padding:22px;

box-shadow:0 20px 45px rgba(0,0,0,.20);

animation:float 6s ease-in-out infinite;

z-index:5;

}

.floating-card h5{

margin-bottom:6px;

color:#fff;

font-size:17px;

}

.floating-card p{

margin:0;

font-size:14px;

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

}

.card-tracking{

top:15%;

left:-30px;

width:250px;

}

.card-delivery{

bottom:12%;

right:-25px;

width:240px;

}

/*=========================================
Floating Card Icon
=========================================*/

.card-icon{

width:56px;

height:56px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:18px;

background:linear-gradient(
135deg,
var(--secondary),
var(--accent)
);

color:#fff;

font-size:22px;

box-shadow:var(--shadow-blue);

}

/*=========================================
Mini Statistics Card
=========================================*/

.hero-stats{

display:flex;

gap:18px;

margin-top:55px;

flex-wrap:wrap;

}

.hero-stat{

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

border-radius:20px;

padding:18px 24px;

min-width:170px;

transition:.35s;

}

.hero-stat:hover{

transform:translateY(-8px);

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

}

.hero-stat h3{

color:#fff;

font-size:30px;

margin-bottom:6px;

}

.hero-stat span{

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

font-size:14px;

}

/*=========================================
Floating Award Badge
=========================================*/

.award-badge{

position:absolute;

top:58%;

right:-35px;

width:120px;

height:120px;

border-radius:50%;

background:linear-gradient(
135deg,
#2EA8FF,
#58BFFF
);

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

color:#fff;

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

box-shadow:0 18px 45px rgba(46,168,255,.45);

animation:float 5s ease-in-out infinite;

}

.award-badge strong{

font-size:24px;

font-weight:700;

line-height:1;

}

.award-badge small{

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

margin-top:5px;

}

/*=========================================
Scroll Indicator
=========================================*/

.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

z-index:20;

}

.scroll-indicator span{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

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

}

.scroll-mouse{

width:34px;

height:58px;

border:2px solid rgba(255,255,255,.7);

border-radius:30px;

position:relative;

}

.scroll-mouse::before{

content:"";

position:absolute;

left:50%;

top:10px;

transform:translateX(-50%);

width:6px;

height:12px;

border-radius:20px;

background:#fff;

animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

0%{

opacity:1;

transform:translate(-50%,0);

}

100%{

opacity:0;

transform:translate(-50%,22px);

}

}

/*=========================================
Hero Image Glow
=========================================*/

.hero-image::before{

content:"";

position:absolute;

width:460px;

height:460px;

border-radius:50%;

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

filter:blur(60px);

z-index:-1;

}

.hero-image::after{

content:"";

position:absolute;

inset:18px;

border-radius:34px;

border:1px solid rgba(255,255,255,.15);

pointer-events:none;

}

/*=========================================
Hero Image Hover
=========================================*/

.hero-image img{

transition:.6s ease;

}

.hero-image:hover img{

transform:scale(1.03) rotate(-1deg);

}

/*=========================================================
ABOUT HOME SECTION
=========================================================*/

.about-home{
    padding:120px 0;
    background:#ffffff;
    position:relative;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:80px;
    align-items:center;
}

.about-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-image-card{
    width:460px;
    height:500px;
    border-radius:35px;
    background:linear-gradient(135deg,#0d3b8e,#1b66d1);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 35px 80px rgba(13,59,142,.25);
}

.about-image-card::before{
    content:'';
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    top:-250px;
    right:-200px;
}

.about-image-card::after{
    content:'';
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    bottom:-70px;
    left:-70px;
}

.about-image-card i{
    font-size:150px;
    color:#fff;
    z-index:2;
}

.section-tag{

    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#eaf2ff;
    color:#0d3b8e;
    font-weight:700;
    margin-bottom:25px;
    letter-spacing:.5px;
}

.about-content h2{

    font-size:48px;
    line-height:1.2;
    color:#08244d;
    margin-bottom:25px;
    font-weight:800;
}

.about-content h2 span{

    color:#1b66d1;
}

.about-content p{

    font-size:18px;
    color:#666;
    line-height:1.9;
    margin-bottom:35px;
}

.about-points{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-bottom:45px;
}

.about-points div{

    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
    color:#08244d;
}

.about-points i{

    width:42px;
    height:42px;
    background:#1b66d1;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-size:16px;
}

.about-content .btn{

    padding:16px 34px;
}

/*==========================
Responsive
==========================*/

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;
gap:60px;

}

.about-image-card{

width:100%;
max-width:420px;
height:430px;

}

.about-content{

text-align:center;

}

.about-points{

grid-template-columns:1fr;

}

.about-points div{

justify-content:center;

}

}

@media(max-width:576px){

.about-home{

padding:80px 0;

}

.about-content h2{

font-size:34px;

}

.about-content p{

font-size:16px;

}

.about-image-card{

height:340px;

}

.about-image-card i{

font-size:110px;

}

}
/* =================================
   SERVICES HERO SECTION
================================= */

.services-hero {
    min-height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
    linear-gradient(
        rgba(5,15,30,0.75),
        rgba(5,15,30,0.85)
    ),
    url('../images/services-hero.jpg');

    background-size: cover;
    background-position: center;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Smaller image, centered, not full-width banner */
.service-img-sm {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 25px auto 15px;
}

.service-img-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #eef3fb;
}

.service-icon {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(37,99,235,0.4);
  border: 2px solid #fff;
}

.service-info {
  padding: 0 20px;
  text-align: center;
  flex: 1;
}

.service-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.service-info p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.btn-block {
  margin: 0 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/*=========================================================
STATS / ACHIEVEMENTS SECTION
=========================================================*/
.stats-section{
  position:relative;
  padding:110px 0;
  background:linear-gradient(135deg,#071B33 0%,#0B3D91 60%,#2EA8FF 100%);
  overflow:hidden;
}

.stats-section::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:rgba(255,255,255,.05);
  border-radius:50%;
  top:-200px;
  right:-150px;
  filter:blur(50px);
}

.stats-section::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:rgba(46,168,255,.15);
  border-radius:50%;
  left:-150px;
  bottom:-150px;
  filter:blur(60px);
}

.stats-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:50px;
}

@media (max-width:992px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:576px){
  .stats-grid{ grid-template-columns:1fr; }
}

.stat-card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  padding:40px 25px;
  text-align:center;
  transition:.4s ease;
}

.stat-card:hover{
  transform:translateY(-12px);
  background:rgba(255,255,255,.15);
  box-shadow:0 25px 50px rgba(0,0,0,.25);
}

.stat-icon{
  width:70px;
  height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,#2EA8FF,#58BFFF);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
  box-shadow:0 15px 35px rgba(46,168,255,.4);
  transition:.4s ease;
}

.stat-card:hover .stat-icon{
  transform:scale(1.1) rotate(8deg);
}

.stat-card h3{
  font-size:42px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
  font-family:'Poppins',sans-serif;
}

.stat-card span{
  color:rgba(255,255,255,.8);
  font-size:15px;
  font-weight:500;
  letter-spacing:.5px;
}
.about-home {
  padding: 100px 0;
  overflow: hidden;
}

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

/* IMAGE SIDE */
.about-image-wrapper {
  position: relative;
  border-radius: 20px;
}

.about-main-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

/* decorative background shapes using your brand color */
.about-shape-1 {
  position: absolute;
  top: -25px;
  left: -25px;
  width: 140px;
  height: 140px;
  background: var(--primary);
  border-radius: 20px;
  z-index: 1;
  opacity: 0.15;
}

.about-shape-2 {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--primary);
  border-radius: 20px;
  z-index: 0;
  opacity: 0.25;
}

/* floating badge top-left */
.about-floating-badge {
  position: absolute;
  top: 25px;
  left: -25px;
  background: var(--primary);
  color: #fff;
  padding: 18px 22px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
  z-index: 3;
  animation: floatUpDown 3s ease-in-out infinite;
}

.about-floating-badge i {
  font-size: 26px;
}

.about-floating-badge strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.about-floating-badge span {
  font-size: 12px;
  opacity: 0.85;
}

/* stat card bottom-right */
.about-stat-card {
  position: absolute;
  bottom: 25px;
  right: -25px;
  background: #fff;
  color: var(--dark, #1a1a1a);
  padding: 16px 20px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  z-index: 3;
  border-left: 4px solid var(--primary);
}

.about-stat-card i {
  font-size: 24px;
  color: var(--primary);
}

.about-stat-card strong {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.about-stat-card span {
  font-size: 11px;
  color: #777;
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* CONTENT SIDE */
.about-content .section-tag {
  display: inline-block;
  background: rgba(var(--primary-rgb, 220, 20, 60), 0.1);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.about-content h2 {
  font-size: 38px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.about-content h2 span {
  color: var(--primary);
}

.about-content p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 30px;
}

.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 35px;
}

.about-points div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #333;
}

.about-points i {
  background: var(--primary);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.about-content .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.about-content .btn-primary:hover {
  transform: translateX(5px);
  box-shadow: 0 10px 25px rgba(var(--primary-rgb, 220, 20, 60), 0.35);
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-floating-badge, .about-stat-card { display: none; }
}
.services-section {
  position: relative;
  background: #f8fafc;
  background-image: radial-gradient(circle, #d1d9e6 1px, transparent 1px);
  background-size: 24px 24px;
  overflow: hidden;
  width: 100%;
}

.services-section::before,
.services-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  max-width: 100%;
}

.services-section::before {
  width: 500px;
  height: 500px;
  background: #2563eb;
  top: -150px;
  left: -100px;
}

.services-section::after {
  width: 600px;
  height: 600px;
  background: #1e3a8a;
  bottom: -200px;
  right: -150px;
}

.services-section .container {
  position: relative;
  z-index: 1;
}
footer .container > div {
  max-width: 100%;
}
body, 
.hero,
.about-home,
.services-section,
.section-light,
.stats-section,
footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
/* ===== FINAL HEADER / NAV / ROAD (consolidated) ===== */
.site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(7,27,51,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);
    margin:0;
    padding:0;
}

.site-header .navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:80px;
}

.site-header .logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    position:relative;
}
.site-header .logo img{
    height:46px;
    width:46px;
    object-fit:contain;
    border-radius:12px;
    padding:6px;
    background:linear-gradient(135deg,#3b82f6,#06b6d4);
    box-shadow:0 4px 18px rgba(59,130,246,.45);
    position:relative;
    z-index:2;
}
.site-header .logo-text h2{
    margin:0;
    font-size:1.25rem;
    font-weight:800;
    color:#fff;
}
.site-header .logo-text span{
    display:block;
    font-size:.7rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#7dd3fc;
    opacity:.85;
}

.site-header .nav-menu{
    display:flex;
    align-items:center;
    gap:34px;
    list-style:none;
    margin:0;
    padding:0;
}
.site-header .nav-menu li a{
    position:relative;
    color:#e5e9f5;
    text-decoration:none;
    font-weight:500;
    font-size:.95rem;
    padding:6px 2px;
}
.site-header .nav-menu li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:linear-gradient(90deg,#3b82f6,#06b6d4);
    transition:width .3s ease;
}
.site-header .nav-menu li a:hover,
.site-header .nav-menu li a.active{ color:#7dd3fc; }
.site-header .nav-menu li a:hover::after,
.site-header .nav-menu li a.active::after{ width:100%; }

.site-header .header-btn .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 26px;
    border-radius:50px;
    background:linear-gradient(135deg,#3b82f6,#06b6d4);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 6px 20px rgba(59,130,246,.4);
}

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:1001;
}
.menu-toggle span{
    width:26px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:.3s;
}
.menu-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Road strip */
.header-road{
    position:relative;
    width:100%;
    height:46px;
    max-height:46px;
    background:#1a1a1a;
    overflow:hidden;
    border-top:1px solid #333;
}
.road-lane{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:4px;
    transform:translateY(-50%);
    background-image:repeating-linear-gradient(90deg,#fff 0 26px,transparent 26px 48px);
    opacity:.85;
}
.road-pin{
    position:absolute;
    top:6px;
    font-size:20px;
    color:#ef4444;
}
.pin1{ left:15%; }
.pin2{ left:50%; }
.pin3{ left:85%; }
.road-truck{
    position:absolute;
    top:3px;
    left:-12%;
    width:90px;
    max-width:90px;
    z-index:3;
    animation:truckJourney 33s linear infinite;
}
.road-truck svg{ width:90px; height:auto; display:block; }
@keyframes truckJourney{
    0%      { left:-12%; }
    18.18%  { left:12%; }
    27.27%  { left:12%; }
    45.45%  { left:47%; }
    54.55%  { left:47%; }
    72.73%  { left:82%; }
    81.82%  { left:82%; }
    100%    { left:108%; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:991px){
    .site-header .nav-menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        flex-direction:column;
        gap:0;
        background:rgba(7,27,51,.98);
    }
    .site-header .nav-menu.active{ display:flex; }
    .site-header .nav-menu li{
        width:100%;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .site-header .nav-menu li a{ display:block; padding:16px 0; }
    .site-header .header-btn{ display:none; }
    .site-header .header-btn.active{
        display:block;
        width:100%;
        text-align:center;
        padding:12px 0;
    }
    .site-header .header-btn.active .btn-primary{ width:90%; justify-content:center; }
    .menu-toggle{ display:flex; }
    .header-road{ height:34px; max-height:34px; }
    .road-truck{ width:62px; max-width:62px; }
    .road-truck svg{ width:62px; }
    .road-pin{ font-size:15px; top:3px; }
}
@media (max-width:480px){
    .site-header .logo img{ height:38px; width:38px; }
    .site-header .logo-text h2{ font-size:1.05rem; }
    .site-header .logo-text span{ font-size:.6rem; }
}

/* ===== HERO RESPONSIVE FIX ===== */
@media (max-width:991px){
    .hero{ padding-bottom:60px; min-height:auto; }
    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        padding-top:60px;
    }
    .hero-content{ max-width:100%; margin:0 auto; }
    .hero-title{ font-size:42px; }
    .hero-buttons{ justify-content:center; }
    .hero-badges{ justify-content:center; }
    .hero-stats{ justify-content:center; }
    .hero-image{ margin-top:40px; }
    .hero-image img{ width:100%; max-width:480px; }
    .card-tracking, .card-delivery, .award-badge{ display:none; }
}
@media (max-width:576px){
    .hero-title{ font-size:32px; }
    .hero-description{ font-size:16px; }
    .hero-badge{ font-size:12px; padding:10px 16px; }
    .hero-stat{ min-width:130px; padding:14px 18px; }
}
@media (max-width:991px){
    .hero-shape.three,
    .hero-shape.one,
    .hero-shape.two {
        display: none;
    }
}
/* ===== FOOTER ===== */
.site-footer{
    background: linear-gradient(180deg, #050f1f 0%, #0a1f3d 100%);
    color: #cfe0f7;
    padding-top: 70px;
}

.footer-grid{
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding: 0 20px 50px;
}

.footer-col h4{
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-logo{
    height: 50px;
    margin-bottom: 18px;
}

.footer-col p{
    color: #b8c9e0;
    line-height: 1.7;
    font-size: 14.5px;
    margin-bottom: 20px;
}

.footer-col ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li{
    margin-bottom: 12px;
}

.footer-col ul li a{
    color: #b8c9e0;
    text-decoration: none;
    font-size: 14.5px;
    transition: .25s;
}

.footer-col ul li a:hover{
    color: #7dd3fc;
    padding-left: 4px;
}

.footer-contact li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #b8c9e0;
    font-size: 14.5px;
    line-height: 1.6;
}

.footer-contact li i{
    color: #7dd3fc;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-contact li a{
    color: #b8c9e0;
    text-decoration: none;
}

.footer-contact li a:hover{
    color: #7dd3fc;
}

.social-icons{
    display: flex;
    gap: 12px;
}

.social-icons a{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.social-icons a:hover{
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    transform: translateY(-3px);
}

.footer-bottom{
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 22px 20px;
    text-align: center;
}

.footer-bottom p{
    margin: 0;
    color: #9fb3d1;
    font-size: 13.5px;
}

/* Responsive */
@media (max-width: 991px){
    .footer-grid{
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }
}

@media (max-width: 576px){
    .footer-grid{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .social-icons{
        justify-content: center;
    }
    .footer-contact li{
        justify-content: center;
        text-align: left;
    }
}