/* Header Background */
.header-style2 {
    position: relative;
    width: 100%;
    z-index: 999;
}

.navbar-default {
    background: #ffffff;
    box-shadow: 0 5px 25px rgba(0,0,0,.08);
}

/* Hero Banner */
.page-title-section,
.banner-section,
.hero-section {
    width: 100%;
    min-height: 650px;
    background: linear-gradient(135deg,#f8fbff,#eef6ff);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Remove White Gap */
section{
    position:relative;
}

.page-title-section{
    padding:120px 0 80px;
    margin:0;
}

/* Background Pattern */
.page-title-section:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:url("img/bg/pattern.png") repeat;
    opacity:.05;
}

/* Responsive */
@media(max-width:991px){

.page-title-section,
.hero-section{
    min-height:500px;
}

}

@media(max-width:767px){

.page-title-section,
.hero-section{
    min-height:380px;
    padding:80px 0 50px;
}

}


/*=========================
 PREMIUM TOP HEADER
==========================*/

.butn span{
    text-transform: capitalize;
}

.top-bar{

background:linear-gradient(90deg,#0561c4,#094fd1,#415a77);

padding:5px 0;

color:#fff;

font-size:14px;

font-weight:500;

}

.top-contact{

display:flex;

align-items:center;

gap:35px;

margin:0;

padding:0;

list-style:none;

}

.top-contact li{

display:flex;

align-items:center;

}

.top-contact i{

color:#ffb703;

margin-right:8px;

font-size:16px;

}

.top-right{

display:flex;

justify-content:flex-end;

align-items:center;

gap:20px;

}

.track-btn{

background:#ffb703;

color:#000;

padding:8px 18px;

border-radius:30px;

text-decoration:none;

font-weight:700;

transition:.4s;

}

.track-btn:hover{

background:#fff;

color:#0d1b2a;

}

.social-icons{

display:flex;

gap:10px;

}

.social-icons a{

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#fff;

transition:.4s;

}

.social-icons a:hover{

background:#ffb703;

color:#000;

transform:translateY(-4px);

}

@media(max-width:991px){

.top-contact{

flex-direction:column;

gap:10px;

text-align:center;

}

.top-right{

justify-content:center;

margin-top:15px;

}

}

@media(max-width:767px){

.top-bar{

padding:15px 0;

}

.track-btn{

display:none;

}

.social-icons{

justify-content:center;

}

}


/* =======================================navbar=================================== */


#nav > li > a,
#nav ul li a {
    text-transform: capitalize !important;
}


.butn.secondary.md:hover{
    background:#fa9406 !important;
    border-color:#e60023 !important;
    color:#fff !important;
}

.butn.secondary.md:hover span{
    color:#fff !important;
}

.butn.secondary.md:hover i{
    color:#fff !important;
}



/* ======================================slider ====================================== */


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

.hero-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.heroSwiper{
    width:100%;
    height:100vh;
}


.hero-slide{

    position:relative;

    width:100%;
    height:99vh;
  background-size: cover;  
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:contain;      /* cover se contain */
    background-position:center top; /* center center ki jagah */
    background-repeat:no-repeat;

    background-color:#fff;

}

.overlay{

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

}

.hero-content{

    position:relative;
    z-index:10;

    color:#fff;
    text-align:center;

}

.hero-content span{

    font-size:22px;
    letter-spacing:2px;
    text-transform:uppercase;

}

.hero-content h1{

    font-size:72px;
    line-height:1.2;
    margin:20px 0;

    font-weight:700;

}

.hero-btn{

    display:inline-block;

    padding:15px 45px;

    background:#ff6600;

    color:#fff;

    text-decoration:none;

    border-radius:40px;

    transition:.3s;

}

.hero-btn:hover{

    background:#0d6efd;

    color:#fff;

}


/* Swiper */

.swiper-button-next,
.swiper-button-prev{

    color:#fff;

}

.swiper-pagination-bullet{

    background:#fff;
    opacity:.5;

}

.swiper-pagination-bullet-active{

    opacity:1;
    background:#ff6600;

}



/*==============================
Large Desktop
==============================*/

@media(min-width:1600px){

.hero-content h1{

    font-size:90px;

}

.hero-content span{

    font-size:26px;

}

}



/*==============================
Desktop
==============================*/

@media(max-width:1400px){

.hero-content h1{

    font-size:60px;

}

}



/*==============================
Laptop
==============================*/

@media(max-width:1200px){

.heroSwiper,
.hero-slide{

    height:90vh;

}

.hero-content h1{

    font-size:54px;

}

}



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

@media(max-width:992px){

.heroSwiper,
.hero-slide{

    height:80vh;

}

.hero-content h1{

    font-size:42px;

}

.hero-content span{

    font-size:18px;

}

}



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

@media(max-width:768px){

.heroSwiper,
.hero-slide{

    height:55vh;
    background-size:contain;
    background-position:center top;

}

.hero-content h1{

    font-size:32px;

}

.hero-content span{

    font-size:16px;

}

.hero-btn{

    padding:12px 30px;

}

.swiper-button-next,
.swiper-button-prev{

    display:none;

}

}



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

@media(max-width:576px){

.heroSwiper,
.hero-slide{

    height:55vh;

}

.hero-content h1{

    font-size:26px;

}

.hero-content span{

    font-size:14px;

}

.hero-btn{

    font-size:14px;

    padding:10px 25px;

}

}



/*==============================
iPhone SE
==============================*/

@media(max-width:380px){

.heroSwiper,
.hero-slide{

    height:50vh;

}

.hero-content h1{

    font-size:22px;

}

}



/*==============================
4K TV / Projector
==============================*/

@media(min-width:2200px){

.heroSwiper,
.hero-slide{

    height:100vh;

}

.hero-content h1{

    font-size:120px;

}

.hero-content span{

    font-size:36px;

}

.hero-btn{

    font-size:26px;
    padding:22px 60px;

}

}


.hero-slide .container{
    height:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

.hero-slide .row{
    height:100%;
    margin:0;
}


.hero-slider,
.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{
    width:100%;
    height:100vh;
}

.slider-img{
    width:100%;
    height:100%;
    object-fit:contain;      /* Full image dikhegi */
    object-position:center;
    display:block;
    background:#fff;
}

@media (max-width:768px){
    .heroSwiper,
    .swiper-slide{
        height:60vh;
    }
}

@media (min-width:1920px){
    .heroSwiper,
    .swiper-slide{
        height:100vh;
    }
}



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

.hero-slider{
    width:100%;
    overflow:hidden;
    background:#fff;
}

.heroSwiper{
    width:100%;
    height:calc(100vh - 85px);
}

.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{
    width:100%;
    height:100%;
}

.heroSwiper .swiper-slide{

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

    overflow:hidden;

}

/* IMAGE */

.slider-img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;       /* Full Image */
    object-position:center center;

    background:#fff;

}

/* Navigation */

.swiper-button-next,
.swiper-button-prev{

    color:#fff;
    width:50px;
    height:50px;

}

.swiper-pagination-bullet{
    background:#fff;
    opacity:.6;
}

.swiper-pagination-bullet-active{
    background:#ff6600;
    opacity:1;
}


/* ===========================
4K TV
=========================== */

@media(min-width:2560px){

.heroSwiper{

    height:100vh;

}

.slider-img{

    object-fit:contain;

}

}


/* ===========================
1920 Desktop
=========================== */

@media(max-width:1920px){

.heroSwiper{

    height:88vh;

}

}


/* ===========================
Laptop
=========================== */

@media(max-width:1366px){

.heroSwiper{

    height:82vh;

}

}


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

@media(max-width:1024px){

.heroSwiper{

    height:65vh;

}

}


/* ===========================
iPad
=========================== */

@media(max-width:992px){

.heroSwiper{

    height:60vh;

}

}


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

@media(max-width:768px){

.heroSwiper{

    height:40vh;

}

.slider-img{

    object-fit:contain;

}

.swiper-button-next,
.swiper-button-prev{

    display:none;

}

}


/* ===========================
Vivo / Realme / Oppo
=========================== */

@media(max-width:480px){

.heroSwiper{

    height:32vh;

}

.slider-img{

    object-fit:contain;

}

}


/* ===========================
iPhone SE
=========================== */

@media(max-width:375px){

.heroSwiper{

    height:28vh;

}

}


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

@media(max-height:500px){

.heroSwiper{

    height:100vh;

}

}

.slider-img{

    width:100%;
    height:auto;

    max-width:100%;

    display:block;

    margin:auto;

}

.heroSwiper,
.swiper-slide{

    height:auto !important;

}






/* ===============================
   PREMIUM PROFESSIONAL NAV MENU
================================ */

.navbar a,
header nav a {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;

    color: #20242b !important;
    text-decoration: none !important;

    /* Better clickable area */
    padding: 8px 13px !important;

    line-height: 24px !important;

    border-radius: 4px;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

/* Hover */
.navbar a:hover,
header nav a:hover {
    color: #168f88 !important;
    background: rgba(22, 143, 136, 0.05);
}


/* ===============================
   NAVIGATION SPACING
================================ */

.navbar nav,
header nav {
    display: flex;
    align-items: center;
    gap: 5px !important;
}


/* ===============================
   DROPDOWN ARROW
================================ */

.navbar a svg,
header nav a svg {
    width: 13px !important;
    height: 13px !important;

    stroke-width: 1.7 !important;

    margin-left: 3px;
}


/* ===============================
   TRACK BUTTON
================================ */

.navbar .track-btn,
header nav .track-btn {
    margin-left: 18px !important;

    padding: 11px 24px !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    color: #fff !important;
    background: #1976e8 !important;

    border-radius: 5px !important;

    box-shadow: 0 3px 10px rgba(25, 118, 232, 0.18);

    transition: all 0.25s ease !important;
}

.navbar .track-btn:hover,
header nav .track-btn:hover {
    color: #fff !important;
    background: #1268d4 !important;
    transform: translateY(-1px);
}

header nav a::after,
.navbar a::after {
    position: relative;
    top: 17px !important;
}


/* =====================================================
   PRAJAPATI ABOUT HERO
===================================================== */

.pj-about-hero {

    position: relative;

    width: 100%;

    height: 435px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            110deg,
            #071d35 0%,
            #092845 55%,
            #173b59 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.pj-hero-shape {
    position: absolute;

    pointer-events: none;
}


/* Left curved shape */

.pj-shape-left {

    width: 270px;

    height: 520px;

    left: -150px;

    top: -45px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(16deg);
}


/* Right subtle glow */

.pj-shape-right {

    width: 500px;

    height: 500px;

    right: -280px;

    top: -250px;

    border-radius: 50%;

    background: rgba(255,255,255,.025);
}


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

.pj-about-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;

    height: 100%;
}


.pj-hero-content {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.pj-hero-left {

    position: relative;

    padding-top: 8px;
}


/* Company badge */

.pj-company-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.pj-company-badge span {

    width: 7px;

    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #f15a24;

    box-shadow:
        0 0 0 4px rgba(241,90,36,.10);
}


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

.pj-hero-left h1 {

    margin: 18px 0 0;

    color: #ffffff;

    font-size: 52px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.8px;
}


.pj-hero-left h1 strong {

    color: #f15a24;

    font-weight: 700;
}


/* Red underline */

.pj-title-line {

    width: 55px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


/* Subtitle */

.pj-hero-left p {

    margin: 10px 0 0;

    color: #c4d3e2;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: .2px;
}


/* Bottom decorative line */

.pj-bottom-line {

    width: 70px;

    height: 4px;

    margin-top: 76px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


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

.pj-hero-right {

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


.pj-breadcrumb {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 18px;

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

    border-radius: 10px;

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

    backdrop-filter: blur(8px);

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


.pj-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.pj-breadcrumb a i {

    color: #f15a24;

    font-size: 10px;
}


.pj-breadcrumb .arrow {

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

    font-size: 8px;
}


.pj-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 991px) {

    .pj-about-hero {

        height: 380px;
    }

    .pj-hero-left h1 {

        font-size: 46px;
    }

}


@media (max-width: 767px) {

    .pj-about-hero {

        height: auto;

        min-height: 380px;
    }

    .pj-hero-content {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 28px;

        padding: 55px 0;
    }

    .pj-hero-left {

        width: 100%;

        text-align: left;
    }

    .pj-hero-left h1 {

        font-size: 40px;
    }

    .pj-hero-right {

        justify-content: flex-start;
    }

    .pj-bottom-line {

        margin-top: 45px;
    }

}


@media (max-width: 480px) {

    .pj-about-hero {

        min-height: 350px;
    }

    .pj-hero-left h1 {

        font-size: 35px;
    }

    .pj-company-badge {

        font-size: 8px;

        letter-spacing: 1.2px;
    }

    .pj-hero-left p {

        font-size: 10px;
    }

}

.pj-hero-left h1 {
    font-size: 52px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .pj-hero-left h1 {
        font-size: 40px;
        white-space: normal;
    }
}



/* =====================================================
   AIR FREIGHT HERO
===================================================== */

.air-freight-hero {

    position: relative;

    width: 100%;

    height: 410px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #123b5d 100%
        );

    font-family: "Poppins", sans-serif;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.air-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -220px;

    border-radius: 50%;

    background: rgba(30, 117, 245, .10);

    box-shadow:
        0 0 0 60px rgba(255,255,255,.015),
        0 0 0 120px rgba(255,255,255,.01);
}


/* =====================================================
   DIAGONAL DECORATION
===================================================== */

.air-freight-hero::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 600px;

    right: 18%;

    top: -100px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Blue diagonal */

.air-freight-hero::after {

    content: "";

    position: absolute;

    width: 210px;
    height: 600px;

    right: 24%;

    top: -100px;

    background: #061d38;

    transform: rotate(28deg);

    opacity: .95;
}


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

.air-freight-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;

    height: 100%;
}


.air-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.air-hero-content {

    position: relative;

    z-index: 10;

    padding-top: 10px;
}


/* Badge */

.air-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.air-badge i {

    color: #f15a24;

    font-size: 11px;
}


/* Title */

.air-hero-content h1 {

    margin: 18px 0 0;

    color: #ffffff;

    font-size: 58px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.air-hero-content h1 span {

    color: #f15a24;
}


/* Description */

.air-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 12px;

    letter-spacing: .2px;
}


/* Red line */

.air-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


/* =====================================================
   PLANE VISUAL
===================================================== */

.air-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


/* Circle */

.air-plane-circle {

    position: relative;

    width: 185px;
    height: 185px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 65%
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);
}


/* Inner circle */

.air-plane-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.22);
}


/* Plane */

.plane-icon {

    position: relative;

    z-index: 5;

    color: #ffffff;

    font-size: 68px;

    transform: rotate(-15deg);

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.25));
}


/* =====================================================
   ROUTE LINE
===================================================== */

.plane-route-line {

    position: absolute;

    width: 145px;
    height: 65px;

    left: -75px;
    top: 15px;

    border-top: 2px dashed rgba(255,255,255,.35);

    border-radius: 50%;

    transform: rotate(-18deg);
}


/* Route dot */

.plane-route-line::before {

    content: "";

    position: absolute;

    left: 5px;
    top: -5px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f15a24;
}


/* =====================================================
   SPEED BADGE
===================================================== */

.air-speed {

    position: absolute;

    right: -35px;

    bottom: -15px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 9px 13px;

    background: #f15a24;

    color: #ffffff;

    border-radius: 5px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

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


.air-speed i {

    font-size: 10px;
}


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

.air-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.air-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.air-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.air-breadcrumb > i {

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

    font-size: 8px;
}


.air-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .air-hero-visual {

        right: 12%;
    }

    .air-breadcrumb {

        right: 15px;
    }

}


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

@media (max-width: 767px) {

    .air-freight-hero {

        height: auto;

        min-height: 430px;
    }

    .air-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .air-hero-content h1 {

        font-size: 42px;
    }

    .air-hero-visual {

        position: absolute;

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .air-plane-circle {

        width: 145px;
        height: 145px;
    }

    .plane-icon {

        font-size: 52px;
    }

    .air-breadcrumb {

        position: relative;

        top: auto;
        right: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .air-freight-hero {

        min-height: 440px;
    }

    .air-hero-content h1 {

        font-size: 36px;
    }

    .air-hero-content p {

        font-size: 10px;
    }

    .air-plane-circle {

        width: 125px;
        height: 125px;
    }

    .plane-icon {

        font-size: 45px;
    }

}


/* =====================================================
   CONTACT PAGE HERO
===================================================== */

.contact-page-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.contact-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.contact-shape-right {

    position: absolute;

    width: 450px;
    height: 450px;

    right: -230px;
    top: -220px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.contact-page-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Navy diagonal */

.contact-page-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.contact-page-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;

    height: 100%;
}


.contact-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.contact-hero-content {

    position: relative;

    z-index: 10;
}


.contact-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.contact-badge i {

    color: #f15a24;

    font-size: 11px;
}


/* Title */

.contact-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 58px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.contact-hero-content h1 span {

    color: #f15a24;
}


/* Line */

.contact-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


/* Subtitle */

.contact-hero-content p {

    margin: 12px 0 0;

    color: #c4d4e3;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   RIGHT CONTACT VISUAL
===================================================== */

.contact-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


.contact-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 65%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


.contact-circle::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


.contact-main-icon {

    position: relative;

    z-index: 5;

    color: #fff;

    font-size: 65px;

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.25));
}


/* Small mail icon */

.contact-small-circle {

    position: absolute;

    top: 5px;
    right: 4px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #f15a24;

    color: #fff;

    font-size: 15px;

    z-index: 10;

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


/* =====================================================
   PHONE CARD
===================================================== */

.contact-call-box {

    position: absolute;

    right: -45px;
    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 190px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.contact-call-box > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 11px;
}


.contact-call-box small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.contact-call-box strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.contact-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.contact-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.contact-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.contact-breadcrumb > i {

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

    font-size: 8px;
}


.contact-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .contact-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .contact-page-hero {

        height: auto;

        min-height: 440px;
    }

    .contact-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .contact-hero-content h1 {

        font-size: 42px;
    }

    .contact-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .contact-circle {

        width: 145px;
        height: 145px;
    }

    .contact-main-icon {

        font-size: 52px;
    }

    .contact-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .contact-page-hero {

        min-height: 450px;
    }

    .contact-hero-content h1 {

        font-size: 36px;
    }

    .contact-hero-content p {

        font-size: 10px;
    }

}


/* =====================================================
   DOCUMENT PAGE HERO
===================================================== */

.document-page-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


/* =====================================================
   BACKGROUND DECORATIONS
===================================================== */

.document-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.document-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.document-page-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.document-page-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.document-page-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.document-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.document-hero-content {

    position: relative;

    z-index: 10;
}


/* Badge */

.document-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.document-badge i {

    color: #f15a24;

    font-size: 11px;
}


/* Heading */

.document-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 54px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.document-hero-content h1 span {

    color: #f15a24;
}


/* Red line */

.document-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


/* Description */

.document-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   DOCUMENT VISUAL
===================================================== */

.document-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


/* Circle */

.document-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


/* Dashed circle */

.document-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* =====================================================
   PAPER ICON
===================================================== */

.document-paper {

    position: relative;

    width: 72px;
    height: 92px;

    padding: 22px 12px 12px;

    background: #fff;

    border-radius: 5px;

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

    transform: rotate(-5deg);

    z-index: 5;
}


/* Fold */

.document-paper::before {

    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 22px;
    height: 22px;

    background: #dfe8f0;

    clip-path: polygon(
        0 0,
        100% 100%,
        100% 0
    );
}


/* Text lines */

.paper-line {

    width: 100%;

    height: 4px;

    margin-bottom: 7px;

    background: #c8d4df;

    border-radius: 5px;
}


.paper-line.large {

    width: 75%;

    background: #1475f5;
}


.paper-line.short {

    width: 55%;
}


/* Check */

.paper-check {

    position: absolute;

    right: -12px;
    bottom: -12px;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    background: #f15a24;

    color: #fff;

    font-size: 12px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.20);
}


/* =====================================================
   DOCUMENT TYPE BOX
===================================================== */

.document-type-box {

    position: absolute;

    right: -45px;
    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 185px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.document-type-box > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 15px;
}


.document-type-box small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.document-type-box strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.document-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.document-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.document-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.document-breadcrumb > i {

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

    font-size: 8px;
}


.document-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .document-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .document-page-hero {

        height: auto;

        min-height: 440px;
    }

    .document-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .document-hero-content h1 {

        font-size: 42px;
    }

    .document-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .document-circle {

        width: 145px;
        height: 145px;
    }

    .document-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .document-page-hero {

        min-height: 450px;
    }

    .document-hero-content h1 {

        font-size: 36px;
    }

    .document-hero-content p {

        font-size: 10px;
    }

}


.pj-company-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    max-width: 100%;

    padding: 9px 16px;

    color: #fff;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 30px;

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

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.3px;
    text-transform: uppercase;

    white-space: nowrap;
}

.pj-company-badge span {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f15a24;

    box-shadow: 0 0 0 4px rgba(241, 90, 36, 0.12);
}

@media (max-width: 767px) {

    .pj-company-badge {
        font-size: 7px;
        letter-spacing: 0.8px;
        white-space: normal;
    }
}


/* =====================================================
   PICKUP REQUEST HERO
===================================================== */

.pickup-page-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.pickup-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.pickup-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.pickup-page-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.pickup-page-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.pickup-page-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.pickup-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.pickup-hero-content {

    position: relative;

    z-index: 10;
}


.pickup-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.pickup-badge i {

    color: #f15a24;

    font-size: 11px;
}


/* Heading */

.pickup-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 54px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.pickup-hero-content h1 span {

    color: #f15a24;
}


/* Line */

.pickup-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


/* Subtitle */

.pickup-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   PICKUP VISUAL
===================================================== */

.pickup-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


.pickup-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


/* Inner dashed circle */

.pickup-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* Location */

.pickup-location {

    position: absolute;

    top: 24px;
    left: 36px;

    color: #f15a24;

    font-size: 28px;

    z-index: 5;

    filter:
        drop-shadow(0 5px 8px rgba(0,0,0,.20));
}


/* Package */

.pickup-package {

    position: relative;

    z-index: 6;

    width: 76px;
    height: 76px;

    display: flex;

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

    background: #fff;

    border-radius: 12px;

    color: #1475f5;

    font-size: 38px;

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

    transform: rotate(-4deg);
}


/* =====================================================
   STATUS BOX
===================================================== */

.pickup-status {

    position: absolute;

    right: -50px;
    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 190px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.pickup-status > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 12px;
}


.pickup-status small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.pickup-status strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.pickup-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.pickup-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.pickup-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.pickup-breadcrumb > i {

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

    font-size: 8px;
}


.pickup-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .pickup-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .pickup-page-hero {

        height: auto;

        min-height: 450px;
    }

    .pickup-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .pickup-hero-content h1 {

        font-size: 42px;
    }

    .pickup-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .pickup-circle {

        width: 145px;
        height: 145px;
    }

    .pickup-package {

        width: 65px;
        height: 65px;

        font-size: 32px;
    }

    .pickup-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .pickup-page-hero {

        min-height: 460px;
    }

    .pickup-hero-content h1 {

        font-size: 36px;
    }

    .pickup-hero-content p {

        font-size: 10px;
    }

}



/* =====================================================
   RAIL FREIGHT HERO
===================================================== */

.rail-freight-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.rail-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.rail-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.rail-freight-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.rail-freight-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.rail-freight-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.rail-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.rail-hero-content {

    position: relative;

    z-index: 10;
}


.rail-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.rail-badge i {

    color: #f15a24;

    font-size: 11px;
}


/* Heading */

.rail-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 56px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.rail-hero-content h1 span {

    color: #f15a24;
}


/* Red line */

.rail-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


/* Description */

.rail-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   RAIL VISUAL
===================================================== */

.rail-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


/* Circle */

.rail-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


/* Dashed inner circle */

.rail-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* =====================================================
   RAIL TRACK
===================================================== */

.rail-track {

    position: absolute;

    width: 135px;

    height: 55px;

    bottom: 28px;

    border-bottom: 3px solid rgba(255,255,255,.30);

    border-radius: 50%;

    transform: rotate(-8deg);
}


.rail-track::before,
.rail-track::after {

    content: "";

    position: absolute;

    left: 0;

    width: 100%;

    height: 2px;

    background: rgba(255,255,255,.18);
}


.rail-track::before {
    bottom: 11px;
}


.rail-track::after {
    bottom: -9px;
}


/* =====================================================
   TRAIN
===================================================== */

.rail-train {

    position: relative;

    z-index: 5;

    color: #fff;

    font-size: 65px;

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.25));
}


/* =====================================================
   STATUS BOX
===================================================== */

.rail-status {

    position: absolute;

    right: -50px;

    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 190px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.rail-status > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 12px;
}


.rail-status small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.rail-status strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.rail-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.rail-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.rail-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.rail-breadcrumb > i {

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

    font-size: 8px;
}


.rail-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .rail-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .rail-freight-hero {

        height: auto;

        min-height: 450px;
    }

    .rail-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .rail-hero-content h1 {

        font-size: 42px;
    }

    .rail-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .rail-circle {

        width: 145px;
        height: 145px;
    }

    .rail-train {

        font-size: 52px;
    }

    .rail-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .rail-freight-hero {

        min-height: 460px;
    }

    .rail-hero-content h1 {

        font-size: 36px;
    }

    .rail-hero-content p {

        font-size: 10px;
    }

}


/* =====================================================
   ROAD FREIGHT HERO
===================================================== */

.road-freight-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.road-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.road-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.road-freight-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.road-freight-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.road-freight-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.road-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT
===================================================== */

.road-hero-content {

    position: relative;

    z-index: 10;
}


.road-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.road-badge i {

    color: #f15a24;

    font-size: 11px;
}


.road-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 56px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.road-hero-content h1 span {

    color: #f15a24;
}


.road-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


.road-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   TRUCK VISUAL
===================================================== */

.road-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


.road-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


.road-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* =====================================================
   ROAD
===================================================== */

.road-track {

    position: absolute;

    width: 145px;
    height: 60px;

    bottom: 22px;

    border-bottom: 4px solid rgba(255,255,255,.28);

    border-radius: 50%;

    transform: rotate(-8deg);
}


.road-track::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 12px;

    width: 100%;

    height: 2px;

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

    border-radius: 50%;
}


/* =====================================================
   TRUCK
===================================================== */

.road-truck {

    position: relative;

    z-index: 5;

    color: #fff;

    font-size: 66px;

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.25));
}


/* =====================================================
   STATUS
===================================================== */

.road-status {

    position: absolute;

    right: -50px;

    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 200px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.road-status > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 12px;
}


.road-status small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.road-status strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.road-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.road-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.road-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.road-breadcrumb > i {

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

    font-size: 8px;
}


.road-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .road-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .road-freight-hero {

        height: auto;

        min-height: 450px;
    }

    .road-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .road-hero-content h1 {

        font-size: 42px;
    }

    .road-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .road-circle {

        width: 145px;
        height: 145px;
    }

    .road-truck {

        font-size: 52px;
    }

    .road-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .road-freight-hero {

        min-height: 460px;
    }

    .road-hero-content h1 {

        font-size: 36px;
    }

    .road-hero-content p {

        font-size: 10px;
    }

}


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

.warehouse-page-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.warehouse-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.warehouse-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.warehouse-page-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.warehouse-page-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.warehouse-page-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.warehouse-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.warehouse-hero-content {

    position: relative;

    z-index: 10;
}


.warehouse-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.warehouse-badge i {

    color: #f15a24;

    font-size: 11px;
}


.warehouse-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 54px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.warehouse-hero-content h1 span {

    color: #f15a24;
}


.warehouse-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


.warehouse-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   WAREHOUSE VISUAL
===================================================== */

.warehouse-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


.warehouse-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


.warehouse-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* Warehouse icon */

.warehouse-icon {

    position: relative;

    z-index: 5;

    color: #fff;

    font-size: 65px;

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.25));
}


/* =====================================================
   BOXES
===================================================== */

.warehouse-boxes {

    position: absolute;

    left: 18px;

    bottom: 28px;

    z-index: 7;
}


.warehouse-boxes i {

    position: absolute;

    color: #f15a24;

    font-size: 25px;

    filter:
        drop-shadow(0 5px 8px rgba(0,0,0,.20));
}


.box-one {

    left: 0;
    bottom: 0;
}


.box-two {

    left: 19px;
    bottom: 19px;

    color: #1475f5 !important;
}


.box-three {

    left: 38px;
    bottom: 0;
}


/* =====================================================
   STATUS BOX
===================================================== */

.warehouse-status {

    position: absolute;

    right: -50px;

    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 190px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.warehouse-status > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 12px;
}


.warehouse-status small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.warehouse-status strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.warehouse-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.warehouse-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.warehouse-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.warehouse-breadcrumb > i {

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

    font-size: 8px;
}


.warehouse-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .warehouse-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .warehouse-page-hero {

        height: auto;

        min-height: 450px;
    }

    .warehouse-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .warehouse-hero-content h1 {

        font-size: 42px;
    }

    .warehouse-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .warehouse-circle {

        width: 145px;
        height: 145px;
    }

    .warehouse-icon {

        font-size: 52px;
    }

    .warehouse-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .warehouse-page-hero {

        min-height: 460px;
    }

    .warehouse-hero-content h1 {

        font-size: 36px;
    }

    .warehouse-hero-content p {

        font-size: 10px;
    }

}


/* =====================================================
   VOLUMETRIC PAGE HERO
===================================================== */

.volumetric-page-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.volumetric-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.volumetric-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.volumetric-page-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.volumetric-page-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.volumetric-page-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.volumetric-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.volumetric-hero-content {

    position: relative;

    z-index: 10;
}


.volumetric-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.volumetric-badge i {

    color: #f15a24;

    font-size: 11px;
}


.volumetric-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 54px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.volumetric-hero-content h1 span {

    color: #f15a24;
}


.volumetric-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


.volumetric-hero-content p {

    margin: 13px 0 0;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   VOLUMETRIC VISUAL
===================================================== */

.volumetric-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


.volumetric-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


.volumetric-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* =====================================================
   PARCEL BOX
===================================================== */

.volumetric-box {

    position: relative;

    width: 78px;
    height: 65px;

    z-index: 5;

    transform: perspective(160px) rotateX(5deg) rotateZ(-3deg);

    filter:
        drop-shadow(0 10px 12px rgba(0,0,0,.25));
}


/* Front */

.box-front {

    position: absolute;

    left: 8px;
    bottom: 0;

    width: 55px;
    height: 48px;

    background: #f15a24;

    border-radius: 2px;

    display: flex;

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

    padding-bottom: 6px;
}


/* Side */

.box-side {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 24px;
    height: 48px;

    background: #c94318;

    transform: skewY(-28deg);

    transform-origin: left bottom;

    display: flex;

    justify-content: center;

    align-items: center;
}


.box-side span {

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

    font-size: 8px;

    font-weight: 700;
}


/* Top */

.box-top {

    position: absolute;

    left: 8px;
    top: 5px;

    width: 55px;
    height: 20px;

    background: #ff7442;

    transform: skewX(-28deg);

    transform-origin: left bottom;

}


/* Length */

.box-front span {

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

    font-size: 8px;

    font-weight: 700;
}


/* =====================================================
   MEASUREMENT WIDTH
===================================================== */

.measure-width {

    position: absolute;

    width: 75px;
    height: 1px;

    left: 52px;
    top: 52px;

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

    z-index: 4;
}


.measure-width::before,
.measure-width::after {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-top: 1px solid #fff;
    border-left: 1px solid #fff;

    top: -3px;
}


.measure-width::before {

    left: 0;

    transform: rotate(-45deg);
}


.measure-width::after {

    right: 0;

    transform: rotate(135deg);
}


.measure-width span {

    position: absolute;

    left: 50%;
    top: -16px;

    transform: translateX(-50%);

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

    font-size: 8px;

    font-weight: 700;
}


/* =====================================================
   HEIGHT MEASUREMENT
===================================================== */

.measure-height {

    position: absolute;

    width: 1px;
    height: 68px;

    right: 45px;
    top: 57px;

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

    z-index: 4;
}


.measure-height::before,
.measure-height::after {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-top: 1px solid #fff;
    border-left: 1px solid #fff;

    left: -3px;
}


.measure-height::before {

    top: 0;

    transform: rotate(45deg);
}


.measure-height::after {

    bottom: 0;

    transform: rotate(225deg);
}


.measure-height span {

    position: absolute;

    right: 7px;
    top: 50%;

    transform: translateY(-50%);

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

    font-size: 8px;

    font-weight: 700;
}


/* =====================================================
   STATUS BOX
===================================================== */

.volumetric-status {

    position: absolute;

    right: -55px;

    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 205px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.volumetric-status > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 12px;
}


.volumetric-status small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.volumetric-status strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.volumetric-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.volumetric-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.volumetric-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.volumetric-breadcrumb > i {

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

    font-size: 8px;
}


.volumetric-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .volumetric-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .volumetric-page-hero {

        height: auto;

        min-height: 450px;
    }

    .volumetric-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .volumetric-hero-content h1 {

        font-size: 42px;
    }

    .volumetric-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .volumetric-circle {

        width: 145px;
        height: 145px;
    }

    .volumetric-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .volumetric-page-hero {

        min-height: 460px;
    }

    .volumetric-hero-content h1 {

        font-size: 36px;
    }

    .volumetric-hero-content p {

        font-size: 10px;
    }

}



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

.technology-page-hero {

    position: relative;

    width: 100%;
    height: 410px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            110deg,
            #061a31 0%,
            #092b4c 55%,
            #173e5d 100%
        );

    font-family: "Poppins", sans-serif;
}


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

.technology-shape-left {

    position: absolute;

    width: 300px;
    height: 550px;

    left: -175px;
    top: -70px;

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

    border-radius: 0 50% 50% 0;

    transform: rotate(15deg);
}


.technology-shape-right {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -240px;

    border-radius: 50%;

    background: rgba(20,117,245,.08);
}


/* Red diagonal */

.technology-page-hero::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 600px;

    right: 19%;
    top: -110px;

    background: rgba(215,25,32,.65);

    transform: rotate(28deg);

    opacity: .55;
}


/* Dark diagonal */

.technology-page-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 600px;

    right: 25%;
    top: -110px;

    background: #061d38;

    transform: rotate(28deg);
}


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

.technology-page-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;
}


.technology-hero-inner {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.technology-hero-content {

    position: relative;

    z-index: 10;
}


.technology-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

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

    border-radius: 30px;

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

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.technology-badge i {

    color: #f15a24;

    font-size: 11px;
}


.technology-hero-content h1 {

    margin: 18px 0 0;

    color: #fff;

    font-size: 56px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -.8px;
}


.technology-hero-content h1 span {

    color: #f15a24;
}


.technology-title-line {

    width: 70px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #f15a24
        );
}


.technology-hero-content p {

    margin: 13px 0 0;

    max-width: 470px;

    color: #c5d5e5;

    font-size: 11px;

    letter-spacing: .2px;
}


/* =====================================================
   TECHNOLOGY VISUAL
===================================================== */

.technology-hero-visual {

    position: absolute;

    right: 17%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 8;
}


.technology-circle {

    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(20,117,245,.20),
            rgba(20,117,245,.02) 68%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);
}


/* Inner circle */

.technology-circle::before {

    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.20);
}


/* =====================================================
   MAIN CHIP
===================================================== */

.technology-main-icon {

    position: relative;

    z-index: 10;

    width: 68px;
    height: 68px;

    display: flex;

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

    border-radius: 14px;

    background: #1475f5;

    color: #fff;

    font-size: 32px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.30);
}


.technology-main-icon::before {

    content: "";

    position: absolute;

    inset: -7px;

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

    border-radius: 18px;
}


/* =====================================================
   NETWORK LINES
===================================================== */

.tech-line {

    position: absolute;

    height: 1px;

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

    transform-origin: left center;

    z-index: 2;
}


.tech-line-one {

    width: 55px;

    left: 35px;
    top: 57px;

    transform: rotate(-28deg);
}


.tech-line-two {

    width: 55px;

    right: 31px;
    top: 57px;

    transform: rotate(28deg);
}


.tech-line-three {

    width: 58px;

    left: 62px;
    bottom: 39px;

    transform: rotate(18deg);
}


/* =====================================================
   NODES
===================================================== */

.tech-node {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f15a24;

    box-shadow:
        0 0 0 5px rgba(241,90,36,.10);

    z-index: 5;
}


.node-one {

    left: 27px;
    top: 45px;
}


.node-two {

    right: 23px;
    top: 45px;
}


.node-three {

    left: 54px;
    bottom: 27px;
}


/* =====================================================
   SMALL ICONS
===================================================== */

.tech-small-icon {

    position: absolute;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 8px;

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

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

    color: #fff;

    font-size: 12px;

    z-index: 8;
}


.tech-box-icon {

    left: 17px;
    top: 32px;
}


.tech-track-icon {

    right: 12px;
    top: 32px;
}


.tech-cloud-icon {

    left: 43px;
    bottom: 13px;
}


/* =====================================================
   STATUS CARD
===================================================== */

.technology-status {

    position: absolute;

    right: -55px;

    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 205px;

    padding: 10px 14px;

    background: #f15a24;

    color: #fff;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.technology-status > i {

    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 5px;

    font-size: 12px;
}


.technology-status small {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    opacity: .8;
}


.technology-status strong {

    display: block;

    font-size: 10px;

    font-weight: 600;
}


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

.technology-breadcrumb {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 9px;

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

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

    backdrop-filter: blur(8px);
}


.technology-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 500;
}


.technology-breadcrumb a i {

    color: #f15a24;

    font-size: 9px;
}


.technology-breadcrumb > i {

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

    font-size: 8px;
}


.technology-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .technology-hero-visual {
        right: 10%;
    }

}


@media (max-width: 767px) {

    .technology-page-hero {

        height: auto;

        min-height: 450px;
    }

    .technology-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 55px 0;
    }

    .technology-hero-content h1 {

        font-size: 42px;
    }

    .technology-hero-visual {

        right: 5px;

        bottom: 25px;

        top: auto;

        transform: none;

        opacity: .45;
    }

    .technology-circle {

        width: 145px;
        height: 145px;
    }

    .technology-main-icon {

        width: 58px;
        height: 58px;

        font-size: 27px;
    }

    .technology-breadcrumb {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .technology-page-hero {

        min-height: 460px;
    }

    .technology-hero-content h1 {

        font-size: 36px;
    }

    .technology-hero-content p {

        font-size: 10px;
    }

}


/* =========================================================
   EXPRESS WORLDWIDE - ADVANCED PROFESSIONAL FOOTER
   Paste this CSS at one place
========================================================= */

.footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%, rgba(241, 90, 36, 0.10), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(20, 117, 245, 0.09), transparent 30%),
        linear-gradient(135deg, #041525 0%, #071f36 48%, #061827 100%);
    color: #aebdcc;
    font-family: "Poppins", sans-serif;
    padding: 75px 0 0;
}


/* =========================================================
   TOP GLOW / DECORATION
========================================================= */

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #d71920,
        #f15a24,
        #1475f5,
        #f15a24,
        #d71920
    );
}

.footer::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -220px;
    top: -220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.04);
    box-shadow:
        0 0 0 60px rgba(255,255,255,.015),
        0 0 0 120px rgba(255,255,255,.01);
    pointer-events: none;
}


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

.footer-container {
    position: relative;
    z-index: 2;

    width: min(1200px, 92%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.45fr .8fr .9fr 1.15fr;

    gap: 45px;

    padding-bottom: 55px;
}


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

.footer-box {
    position: relative;
}


/* =========================================================
   COMPANY SECTION
========================================================= */

.footer-logo {
    width: 155px;
    max-width: 100%;
    height: auto;

    display: block;

    margin-bottom: 20px;

    object-fit: contain;
}


.footer-box h3.white {
    color: #ffffff !important;

    font-size: 17px;
    line-height: 1.45;

    font-weight: 700;

    letter-spacing: .1px;

    margin: 0 0 16px;

    max-width: 330px;
}


.footer-box > p {
    color: #9eafbf;

    font-size: 12px;
    line-height: 1.9;

    margin: 0 0 20px;

    max-width: 390px;
}


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

.footer .contact {
    margin-top: 20px;
}


.footer .contact p {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    color: #aebdcc;

    font-size: 11px;
    line-height: 1.7;

    margin: 0 0 13px;
}


.footer .contact p i {
    flex: 0 0 32px;

    width: 32px;
    height: 32px;

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

    border-radius: 8px;

    color: #f15a24;

    background: rgba(241,90,36,.09);

    border: 1px solid rgba(241,90,36,.15);

    font-size: 12px;

    transition: .3s ease;
}


.footer .contact p:hover i {
    color: #fff;

    background: #f15a24;

    transform: translateY(-2px);
}


/* =========================================================
   HEADINGS
========================================================= */

.footer-box h4.white {
    position: relative;

    color: #fff !important;

    font-size: 15px;

    font-weight: 600;

    margin: 4px 0 25px;

    padding-bottom: 12px;
}


.footer-box h4.white::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 34px;
    height: 3px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #f15a24,
        #d71920
    );
}


.footer-box h4.white::before {
    content: "";

    position: absolute;

    left: 38px;
    bottom: 1px;

    width: 18px;
    height: 1px;

    background: rgba(255,255,255,.18);
}


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

.footer-box ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


.footer-box ul li {
    margin: 0;
    padding: 0;
}


.footer-box ul li a {
    position: relative;

    display: inline-flex;
    align-items: center;

    color: #9eafbf !important;

    text-decoration: none !important;

    font-size: 11.5px;

    line-height: 1.4;

    padding: 7px 0 7px 0;

    transition:
        color .25s ease,
        transform .25s ease;
}


.footer-box ul li a::before {
    content: "›";

    color: #f15a24;

    font-size: 16px;

    margin-right: 8px;

    line-height: 0;

    opacity: .7;

    transition: .25s ease;
}


.footer-box ul li a:hover {
    color: #ffffff !important;

    transform: translateX(5px);
}


.footer-box ul li a:hover::before {
    color: #ffffff;

    opacity: 1;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.footer .newsletter {
    position: relative;

    display: flex;

    width: 100%;

    margin-top: 18px;

    padding: 5px;

    border-radius: 9px;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);
}


.footer .newsletter input {
    width: 100%;

    min-width: 0;

    height: 42px;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

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

    font-size: 10px;

    padding: 0 10px;
}


.footer .newsletter input::placeholder {
    color: #8496a8;
}


.footer .newsletter button {
    flex: 0 0 auto;

    height: 42px;

    padding: 0 17px;

    border: 0;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #f15a24,
            #d71920
        );

    color: #fff;

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

    font-size: 9px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;

    box-shadow:
        0 7px 18px rgba(215,25,32,.20);
}


.footer .newsletter button:hover {
    transform: translateY(-2px);

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


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer .social {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 23px;
}


.footer .social a {
    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 9px;

    color: #b9c7d4 !important;

    text-decoration: none !important;

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

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

    font-size: 11px;

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


.footer .social a:hover {
    color: #fff !important;

    background: #f15a24;

    border-color: #f15a24;

    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(241,90,36,.22);
}


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

.footer-bottom {
    position: relative;
    z-index: 2;

    width: min(1200px, 92%);

    margin: 0 auto;

    min-height: 70px;

    padding: 18px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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


.footer-bottom p {
    margin: 0;

    color: #7f92a5;

    font-size: 9.5px;

    line-height: 1.6;
}


.footer-bottom p:last-child {
    text-align: right;
}


.footer-bottom a {
    color: #f15a24 !important;

    font-weight: 600;

    text-decoration: none !important;

    transition: .25s ease;
}


.footer-bottom a:hover {
    color: #fff !important;
}


/* =========================================================
   WHITE CLASS OVERRIDE
========================================================= */

.footer .white {
    color: #fff !important;
}


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

@media (max-width: 991px) {

    .footer {
        padding-top: 60px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;

        gap: 40px 35px;
    }

    .footer-box:first-child {
        grid-column: span 2;
    }

}


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

@media (max-width: 767px) {

    .footer {
        padding-top: 50px;
    }

    .footer-container {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 32px;

        padding-bottom: 40px;
    }

    .footer-box:first-child {
        grid-column: auto;
    }

    .footer-box h3.white {
        font-size: 16px;
    }

    .footer-box > p {
        font-size: 11px;
    }

    .footer-bottom {
        width: 90%;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        padding: 20px 0;
    }

    .footer-bottom p:last-child {
        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .footer-container {
        width: 88%;
    }

    .footer .newsletter {
        flex-direction: column;

        gap: 5px;

        padding: 5px;
    }

    .footer .newsletter input {
        height: 40px;
    }

    .footer .newsletter button {
        width: 100%;
    }

    .footer .social {
        margin-top: 18px;
    }

}


/* =========================================================
   PROFESSIONAL TOP BAR
========================================================= */

.top-bar {
    position: relative;
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;

    background: #061827;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

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

    z-index: 999;
}


/* Subtle top accent */

.top-bar::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #d71920,
        #f15a24,
        #1475f5,
        #f15a24,
        #d71920
    );
}


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

.top-contact {
    display: flex;

    align-items: center;

    gap: 28px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.top-contact li {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #c5d2df;

    font-size: 10.5px;

    font-weight: 400;

    letter-spacing: .15px;

    white-space: nowrap;

    transition: .25s ease;
}


/* Icons */

.top-contact li i {
    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 6px;

    background: rgba(241, 90, 36, .10);

    border: 1px solid rgba(241, 90, 36, .15);

    color: #f15a24;

    font-size: 9px;

    transition: .25s ease;
}


.top-contact li:hover {
    color: #fff;
}


.top-contact li:hover i {
    color: #fff;

    background: #f15a24;

    border-color: #f15a24;

    transform: translateY(-1px);
}


/* =========================================================
   RIGHT AREA
========================================================= */

.top-right {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    height: 100%;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icons {
    display: flex;

    align-items: center;

    gap: 7px;
}


.social-icons a {
    width: 27px;
    height: 27px;

    display: flex;

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

    border-radius: 6px;

    color: #aebdca !important;

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

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

    text-decoration: none !important;

    font-size: 9px;

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


.social-icons a:hover {
    color: #fff !important;

    background: #f15a24;

    border-color: #f15a24;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px rgba(241, 90, 36, .22);
}


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

.top-bar .container-fluid {
    position: relative;

    z-index: 2;

    width: 100%;
}


/* Remove unwanted row spacing */

.top-bar .row {
    min-height: 42px;

    margin-left: 0;
    margin-right: 0;
}


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

@media (max-width: 991px) {

    .top-bar {
        min-height: 40px;
    }

    .top-bar .row {
        min-height: 40px;
    }

    .top-contact {
        gap: 18px;
    }

    .top-contact li {
        font-size: 9.5px;
    }

    .top-contact li i {
        width: 23px;
        height: 23px;
    }

}


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

@media (max-width: 767px) {

    .top-bar {
        padding: 7px 0;
    }

    .top-bar .row {
        min-height: auto;
    }

    .top-bar .col-lg-8,
    .top-bar .col-lg-4 {
        width: 100%;
    }

    .top-contact {
        justify-content: center;

        flex-wrap: wrap;

        gap: 7px 15px;

        margin-bottom: 7px;
    }

    .top-contact li {
        font-size: 9px;
    }

    .top-contact li:nth-child(3) {
        display: none;
    }

    .top-right {
        justify-content: center;
    }

    .social-icons a {
        width: 26px;
        height: 26px;
    }

}


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

@media (max-width: 480px) {

    .top-contact {
        gap: 5px 12px;
    }

    .top-contact li {
        font-size: 8.5px;
    }

    .top-contact li i {
        width: 21px;
        height: 21px;

        font-size: 8px;
    }

}


/* =========================================
   FIX LOGO SIZE
========================================= */

.navbar-header-custom {
    width: 210px !important;
    height: 70px !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
}

.navbar-header-custom .navbar-brand {
    width: 210px !important;
    height: 70px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 !important;
    margin: 0 !important;
}

.navbar-header-custom .responsive-logo {
    width: 210px !important;
    height: auto !important;

    max-width: none !important;
    max-height: 70px !important;

    object-fit: contain !important;

    display: block !important;
}


/* =========================================
   LOGO - BIGGER PROFESSIONAL SIZE
========================================= */

.navbar-header-custom {
    width: 225px !important;
    min-width: 225px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
}

.navbar-header-custom .navbar-brand {
    width: 225px !important;
    height: 72px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
}

.navbar-header-custom .responsive-logo {
    width: 225px !important;
    max-width: none !important;

    height: auto !important;
    max-height: 70px !important;

    object-fit: contain !important;

    display: block !important;
}


.top-bar {
    min-height: 56px !important;
    height: 56px !important;
}

.top-bar .row {
    min-height: 56px !important;
    height: 56px !important;
}

.top-contact li {
    font-size: 12px !important;
}

.top-contact li i {
    width: 32px !important;
    height: 32px !important;
}


/* =========================================================
   EXPRESS WORLDWIDE - MODERN ABOUT SECTION
========================================================= */

.ew-about-section {
    position: relative;
    padding: 95px 0;
    overflow: hidden;
    background: #f6f8fb;
    font-family: "Poppins", sans-serif;
}


/* Background decoration */

.ew-about-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -280px;
    top: 80px;
    border-radius: 50%;
    background: rgba(20, 117, 245, .035);
}

.ew-about-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -180px;
    bottom: -160px;
    border-radius: 50%;
    border: 60px solid rgba(241, 90, 36, .025);
}


/* =========================================================
   HEADING
========================================================= */

.ew-about-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 48px;
}


.ew-heading-left {
    max-width: 650px;
}


.ew-small-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #f15a24;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.ew-small-label i {
    font-size: 11px;
}


.ew-heading-left h2 {
    margin: 12px 0 0;

    color: #0b2945;

    font-size: 42px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.8px;
}


.ew-heading-left h2 span {
    display: block;
    color: #d71920;
}


.ew-heading-right {
    max-width: 390px;

    padding-left: 25px;

    border-left: 3px solid #f15a24;
}


.ew-heading-right p {
    margin: 0;

    color: #718092;

    font-size: 12px;
    line-height: 1.9;
}


/* =========================================================
   MAIN GRID
========================================================= */

.ew-about-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 47% 53%;

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(8, 34, 58, .10);
}


/* =========================================================
   IMAGE
========================================================= */

.ew-about-visual {
    position: relative;

    min-height: 620px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #071c31,
            #0b3658
        );
}


.ew-image-frame {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 580px;

    overflow: hidden;

    border-radius: 16px;
}


.ew-image-frame img {
    width: 100%;
    height: 100%;

    min-height: 580px;

    object-fit: cover;

    display: block;

    transition: transform .7s ease;
}


.ew-image-frame:hover img {
    transform: scale(1.045);
}


.ew-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(3, 19, 34, .72) 100%
        );
}


/* =========================================================
   EXPERIENCE
========================================================= */

.ew-experience {
    position: absolute;

    left: 30px;
    bottom: 30px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px 21px;

    border-radius: 12px;

    background: rgba(5, 25, 43, .90);

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

    backdrop-filter: blur(10px);

    color: #fff;
}


.ew-experience strong {
    font-size: 43px;

    line-height: 1;

    color: #f15a24;

    font-weight: 800;
}


.ew-experience sup {
    font-size: 20px;
}


.ew-experience span {
    color: #d5e1eb;

    font-size: 9px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   FLOATING SERVICE
========================================================= */

.ew-floating-service {
    position: absolute;

    top: 30px;
    right: 30px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 15px;

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}


.ew-floating-icon {
    width: 35px;
    height: 35px;

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

    border-radius: 8px;

    background: #f15a24;

    color: #fff;

    font-size: 13px;
}


.ew-floating-service strong {
    display: block;

    color: #122d46;

    font-size: 10px;
}


.ew-floating-service small {
    display: block;

    margin-top: 2px;

    color: #8b99a8;

    font-size: 8px;
}


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

.ew-about-content {
    padding: 55px 55px 48px;
}


.ew-content-label {
    display: inline-block;

    color: #1475f5;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.ew-about-content h3 {
    margin: 12px 0 18px;

    color: #0b2945;

    font-size: 32px;

    line-height: 1.25;

    font-weight: 600;
}


.ew-about-content h3 strong {
    color: #d71920;

    font-weight: 700;
}


.ew-main-description {
    color: #718092;

    font-size: 12px;

    line-height: 1.9;

    margin-bottom: 30px;
}


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

.ew-features {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.ew-feature {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px solid #edf1f5;

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


.ew-feature:hover {
    transform: translateY(-3px);

    background: #fff;

    box-shadow:
        0 10px 25px rgba(10,40,70,.08);
}


.ew-feature-icon {
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 8px;

    color: #f15a24;

    background: rgba(241,90,36,.08);

    font-size: 12px;
}


.ew-feature strong {
    display: block;

    color: #183650;

    font-size: 10px;

    font-weight: 600;
}


.ew-feature span {
    display: block;

    margin-top: 2px;

    color: #8a98a7;

    font-size: 8px;
}


/* =========================================================
   BOTTOM
========================================================= */

.ew-about-bottom {
    margin-top: 32px;

    padding-top: 25px;

    border-top: 1px solid #e9eef3;
}


.ew-mission {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 23px;
}


.ew-mission-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 10px;

    background: #0b2945;

    color: #fff;

    font-size: 13px;
}


.ew-mission small {
    display: block;

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.ew-mission p {
    margin: 3px 0 0;

    color: #6f7e8d;

    font-size: 9px;

    line-height: 1.5;
}


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

.ew-buttons {
    display: flex;

    gap: 10px;
}


.ew-btn {
    display: inline-flex;

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

    gap: 10px;

    min-height: 43px;

    padding: 0 21px;

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-btn-primary {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #1475f5,
            #0759c9
        );

    box-shadow:
        0 8px 20px rgba(20,117,245,.18);
}


.ew-btn-primary:hover {
    color: #fff !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 27px rgba(20,117,245,.25);
}


.ew-btn-outline {
    color: #183650 !important;

    background: #fff;

    border: 1px solid #dbe3ea;
}


.ew-btn-outline:hover {
    color: #fff !important;

    background: #0b2945;

    border-color: #0b2945;

    transform: translateY(-3px);
}


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

@media (max-width: 991px) {

    .ew-about-section {
        padding: 70px 0;
    }

    .ew-about-heading {
        display: block;
    }

    .ew-heading-right {
        margin-top: 20px;
    }

    .ew-about-grid {
        grid-template-columns: 1fr;
    }

    .ew-about-visual {
        min-height: 500px;
    }

    .ew-image-frame,
    .ew-image-frame img {
        min-height: 460px;
    }

}


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

@media (max-width: 767px) {

    .ew-about-section {
        padding: 55px 0;
    }

    .ew-about-heading {
        margin-bottom: 30px;
    }

    .ew-heading-left h2 {
        font-size: 31px;
    }

    .ew-heading-right {
        padding-left: 17px;
    }

    .ew-about-visual {
        min-height: 390px;
        padding: 12px;
    }

    .ew-image-frame,
    .ew-image-frame img {
        min-height: 365px;
    }

    .ew-about-content {
        padding: 35px 22px;
    }

    .ew-about-content h3 {
        font-size: 27px;
    }

    .ew-features {
        grid-template-columns: 1fr;
    }

    .ew-experience {
        left: 20px;
        bottom: 20px;
    }

    .ew-floating-service {
        right: 20px;
        top: 20px;
    }

    .ew-about-bottom {
        margin-top: 25px;
    }

}


@media (max-width: 480px) {

    .ew-heading-left h2 {
        font-size: 27px;
    }

    .ew-about-content h3 {
        font-size: 24px;
    }

    .ew-experience strong {
        font-size: 35px;
    }

    .ew-floating-service {
        padding: 9px 11px;
    }

    .ew-floating-service strong {
        font-size: 9px;
    }

    .ew-buttons {
        flex-direction: column;
    }

    .ew-btn {
        width: 100%;
    }

}



/* =========================================================
   EXPRESS WORLDWIDE - SERVICES SECTION
========================================================= */

.ew-services-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background: #f7f9fc;

    font-family: "Poppins", sans-serif;
}


/* Background decoration */

.ew-services-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -220px;
    top: -150px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-services-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -140px;

    border-radius: 50%;

    border: 55px solid rgba(241,90,36,.025);
}


/* =========================================================
   HEADING
========================================================= */

.ew-services-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;
}


.ew-services-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.ew-services-label i {
    font-size: 11px;
}


.ew-services-heading h2 {
    margin: 12px 0 0;

    color: #092b48;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.6px;
}


.ew-services-heading h2 span {
    color: #d71920;
}


.ew-services-heading > p {
    max-width: 390px;

    margin: 0;

    padding-left: 22px;

    color: #728294;

    font-size: 11.5px;

    line-height: 1.9;

    border-left: 3px solid #f15a24;
}


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

.ew-services-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 18px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.ew-service-card {
    position: relative;

    min-height: 265px;

    padding: 27px 27px 24px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e7edf3;

    border-radius: 15px;

    box-shadow:
        0 8px 30px rgba(8,35,58,.045);

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


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

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #1475f5,
            #f15a24
        );

    transform: scaleX(0);

    transform-origin: left;

    transition: .35s ease;
}


.ew-service-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);

    transition: .3s ease;
}


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

    border-color: rgba(20,117,245,.15);

    box-shadow:
        0 20px 45px rgba(8,35,58,.11);
}


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


.ew-service-card:hover::after {
    background: rgba(241,90,36,.06);

    transform: scale(1.3);
}


/* =========================================================
   CARD TOP
========================================================= */

.ew-service-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}


.ew-service-number {
    color: #d9e1e9;

    font-size: 26px;

    line-height: 1;

    font-weight: 700;

    transition: .3s ease;
}


.ew-service-card:hover .ew-service-number {
    color: #d71920;
}


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

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

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #1475f5;

    background:
        linear-gradient(
            135deg,
            rgba(20,117,245,.08),
            rgba(20,117,245,.025)
        );

    border: 1px solid rgba(20,117,245,.10);

    font-size: 18px;

    transition: .3s ease;
}


.ew-service-card:hover .ew-service-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1475f5,
            #075acb
        );

    border-color: transparent;

    transform: rotate(-4deg);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.ew-service-card h3 {
    position: relative;

    z-index: 2;

    margin: 0 0 10px;

    color: #14334d;

    font-size: 17px;

    font-weight: 650;
}


.ew-service-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    min-height: 52px;

    color: #788898;

    font-size: 10.5px;

    line-height: 1.75;
}


/* =========================================================
   LINK
========================================================= */

.ew-service-card a {
    position: relative;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 17px;

    color: #1475f5 !important;

    font-size: 9.5px;

    font-weight: 650;

    text-decoration: none !important;

    transition: .3s ease;
}


.ew-service-card a i {
    font-size: 9px;

    transition: .3s ease;
}


.ew-service-card a:hover {
    color: #d71920 !important;
}


.ew-service-card a:hover i {
    transform: translateX(5px);
}


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

.ew-services-cta {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 24px;

    padding: 19px 22px;

    border-radius: 13px;

    background:
        linear-gradient(
            110deg,
            #071d33,
            #0b3455
        );

    box-shadow:
        0 15px 35px rgba(5,30,55,.13);
}


.ew-cta-icon {
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 10px;

    background: rgba(241,90,36,.14);

    color: #f15a24;

    font-size: 14px;
}


.ew-cta-text {
    flex: 1;
}


.ew-cta-text strong {
    display: block;

    color: #fff;

    font-size: 11px;

    font-weight: 600;
}


.ew-cta-text span {
    display: block;

    margin-top: 3px;

    color: #9fb3c5;

    font-size: 9px;
}


.ew-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 17px;

    border-radius: 7px;

    color: #fff !important;

    background: #f15a24;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-cta-btn:hover {
    color: #fff !important;

    background: #d71920;

    transform: translateY(-2px);
}


.ew-cta-btn i {
    font-size: 8px;
}


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

@media (max-width: 991px) {

    .ew-services-section {
        padding: 70px 0;
    }

    .ew-services-heading {
        display: block;
    }

    .ew-services-heading > p {
        margin-top: 20px;
    }

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

}


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

@media (max-width: 767px) {

    .ew-services-section {
        padding: 55px 0;
    }

    .ew-services-heading {
        margin-bottom: 30px;
    }

    .ew-services-heading h2 {
        font-size: 31px;
    }

    .ew-services-heading > p {
        padding-left: 15px;

        font-size: 10.5px;
    }

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

        gap: 14px;
    }

    .ew-service-card {
        min-height: auto;

        padding: 23px;
    }

    .ew-services-cta {
        flex-wrap: wrap;
    }

    .ew-cta-text {
        min-width: calc(100% - 65px);
    }

    .ew-cta-btn {
        width: 100%;

        justify-content: center;

        margin-top: 4px;
    }

}


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

@media (max-width: 480px) {

    .ew-services-heading h2 {
        font-size: 27px;
    }

    .ew-service-card h3 {
        font-size: 16px;
    }

}


/* =========================================================
   WHY CHOOSE US - MODERN LOGISTICS SECTION
========================================================= */

.ew-why-section {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background: #fff;

    font-family: "Poppins", sans-serif;
}


/* Background decoration */

.ew-why-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    bottom: -250px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-why-wrapper {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 53% 47%;

    min-height: 610px;

    border-radius: 24px;

    overflow: hidden;

    background: #071d33;

    box-shadow:
        0 25px 70px rgba(6,30,50,.13);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.ew-why-content {
    padding: 65px 60px;

    background:
        linear-gradient(
            145deg,
            #071c31,
            #0b3455
        );
}


.ew-why-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.ew-why-label::before {
    content: "";

    width: 25px;
    height: 3px;

    border-radius: 4px;

    background: #f15a24;
}


.ew-why-content h2 {
    margin: 14px 0 16px;

    color: #fff;

    font-size: 39px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.5px;
}


.ew-why-content h2 span {
    display: block;

    color: #f15a24;
}


.ew-why-intro {
    max-width: 550px;

    margin-bottom: 30px;

    color: #a9bdce;

    font-size: 11px;

    line-height: 1.9;
}


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

.ew-faq-list {
    margin-top: 25px;
}


.ew-faq-item {
    margin-bottom: 8px;

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

    border-radius: 10px;

    overflow: hidden;

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

    transition: .3s ease;
}


.ew-faq-item.active {
    background: rgba(255,255,255,.075);

    border-color: rgba(241,90,36,.35);
}


.ew-faq-button {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 18px;

    border: 0;

    outline: none;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;
}


.ew-faq-number {
    flex: 0 0 28px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;
}


.ew-faq-title {
    flex: 1;

    font-size: 10.5px;

    font-weight: 550;

    color: #e8f0f6;
}


.ew-faq-arrow {
    width: 26px;
    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: #9fb3c5;

    font-size: 8px;

    transition: .3s ease;
}


.ew-faq-item.active .ew-faq-arrow {
    color: #fff;

    background: #f15a24;

    transform: rotate(45deg);
}


/* Answer */

.ew-faq-answer {
    padding: 0 55px 17px 60px;

    color: #9fb4c5;

    font-size: 9.5px;

    line-height: 1.8;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.ew-why-image {
    position: relative;

    min-height: 610px;

    background: #0b2945;
}


.ew-why-image-inner {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.ew-why-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .7s ease;
}


.ew-why-wrapper:hover .ew-why-image img {
    transform: scale(1.04);
}


.ew-image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,25,43,.05),
            rgba(5,25,43,.55)
        );
}


/* =========================================================
   TRUST CARD
========================================================= */

.ew-trust-card {
    position: absolute;

    right: 25px;
    top: 25px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 16px;

    border-radius: 11px;

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

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.ew-trust-icon {
    width: 37px;
    height: 37px;

    display: flex;

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

    border-radius: 9px;

    background: #0b2945;

    color: #fff;

    font-size: 12px;
}


.ew-trust-card strong {
    display: block;

    color: #17354e;

    font-size: 10px;

    font-weight: 650;
}


.ew-trust-card span {
    display: block;

    margin-top: 2px;

    color: #8493a1;

    font-size: 8px;
}


/* =========================================================
   EXPERIENCE CARD
========================================================= */

.ew-why-experience {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 19px;

    border-radius: 11px;

    background: rgba(7,29,51,.91);

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

    backdrop-filter: blur(8px);
}


.ew-why-experience strong {
    color: #f15a24;

    font-size: 38px;

    line-height: 1;

    font-weight: 800;
}


.ew-why-experience span {
    color: #d3e0ea;

    font-size: 8px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: .8px;
}


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

@media (max-width: 991px) {

    .ew-why-section {
        padding: 70px 0;
    }

    .ew-why-wrapper {
        grid-template-columns: 1fr;
    }

    .ew-why-content {
        padding: 50px 40px;
    }

    .ew-why-image {
        min-height: 450px;
    }

    .ew-why-image-inner {
        position: relative;

        min-height: 450px;
    }

}


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

@media (max-width: 767px) {

    .ew-why-section {
        padding: 55px 0;
    }

    .ew-why-wrapper {
        border-radius: 17px;
    }

    .ew-why-content {
        padding: 40px 22px;
    }

    .ew-why-content h2 {
        font-size: 30px;
    }

    .ew-why-intro {
        font-size: 10px;
    }

    .ew-faq-button {
        padding: 14px;
    }

    .ew-faq-title {
        font-size: 9.5px;
    }

    .ew-faq-answer {
        padding-left: 56px;

        font-size: 9px;
    }

    .ew-why-image {
        min-height: 360px;
    }

    .ew-why-image-inner {
        min-height: 360px;
    }

    .ew-trust-card {
        right: 15px;
        top: 15px;
    }

    .ew-why-experience {
        left: 15px;
        bottom: 15px;
    }

}


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

@media (max-width: 480px) {

    .ew-why-content h2 {
        font-size: 26px;
    }

    .ew-faq-number {
        display: none;
    }

    .ew-faq-answer {
        padding-left: 18px;
    }

}


/* =========================================================
   EXPRESS WORLDWIDE - SHIPPING PROCESS
========================================================= */

.ew-process-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 100%
        );

    font-family: "Poppins", sans-serif;
}


/* Background */

.ew-process-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -260px;
    top: -170px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


/* =========================================================
   HEADING
========================================================= */

.ew-process-heading {
    position: relative;

    z-index: 2;

    max-width: 680px;

    margin: 0 auto 55px;

    text-align: center;
}


.ew-process-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.ew-process-heading > span i {
    font-size: 11px;
}


.ew-process-heading h2 {
    margin: 12px 0 12px;

    color: #0b2945;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.5px;
}


.ew-process-heading h2 strong {
    color: #d71920;

    font-weight: 700;
}


.ew-process-heading p {
    max-width: 530px;

    margin: auto;

    color: #788898;

    font-size: 11px;

    line-height: 1.8;
}


/* =========================================================
   PROCESS WRAPPER
========================================================= */

.ew-process-wrapper {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 0;

    padding: 10px 0 20px;
}


/* Connecting line */

.ew-process-wrapper::before {
    content: "";

    position: absolute;

    left: 11%;

    right: 11%;

    top: 67px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #1475f5,
            #f15a24,
            #1475f5
        );

    opacity: .22;
}


/* =========================================================
   ITEM
========================================================= */

.ew-process-item {
    position: relative;

    padding: 0 18px;

    text-align: center;
}


.ew-process-line {
    display: none;
}


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

.ew-process-icon {
    position: relative;

    z-index: 3;

    width: 86px;
    height: 86px;

    margin: 0 auto 24px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0a2945,
            #0d4a76
        );

    border: 7px solid #fff;

    box-shadow:
        0 8px 25px rgba(7,40,68,.14);

    transition: .35s ease;
}


.ew-process-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px dashed rgba(20,117,245,.30);

    transition: .35s ease;
}


.ew-process-icon img {
    width: 32px !important;
    height: 32px !important;

    object-fit: contain;

    display: block;
}


.ew-process-icon span {
    position: absolute;

    right: -7px;
    top: -7px;

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

    background: #f15a24;

    border: 3px solid #fff;

    font-size: 7px;

    font-weight: 700;
}


.ew-process-item:hover .ew-process-icon {
    transform: translateY(-7px);

    background:
        linear-gradient(
            145deg,
            #1475f5,
            #0758c8
        );

    box-shadow:
        0 15px 35px rgba(20,117,245,.22);
}


.ew-process-item:hover .ew-process-icon::before {
    transform: rotate(90deg);

    border-color: rgba(241,90,36,.55);
}


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

.ew-process-content small {
    display: block;

    margin-bottom: 6px;

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.ew-process-content h3 {
    margin: 0 0 9px;

    color: #153650;

    font-size: 16px;

    font-weight: 650;
}


.ew-process-content p {
    max-width: 190px;

    margin: auto;

    color: #7a8998;

    font-size: 9.5px;

    line-height: 1.75;
}


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

.ew-process-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

    padding: 17px 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #071d33,
            #0b3455
        );

    box-shadow:
        0 15px 35px rgba(5,30,55,.12);
}


.ew-process-bottom-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 9px;

    color: #fff;

    background: #f15a24;

    font-size: 13px;
}


.ew-process-bottom div:nth-child(2) {
    flex: 1;
}


.ew-process-bottom strong {
    display: block;

    color: #fff;

    font-size: 10px;

    font-weight: 600;
}


.ew-process-bottom span {
    display: block;

    margin-top: 3px;

    color: #9db2c4;

    font-size: 8.5px;
}


.ew-process-bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: 6px;

    color: #fff !important;

    background: #1475f5;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-process-bottom > a:hover {
    background: #f15a24;

    transform: translateY(-2px);
}


.ew-process-bottom > a i {
    font-size: 8px;
}


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

@media (max-width: 991px) {

    .ew-process-section {
        padding: 70px 0;
    }

    .ew-process-wrapper {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 45px;
    }

    .ew-process-wrapper::before {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .ew-process-section {
        padding: 55px 0;
    }

    .ew-process-heading {
        margin-bottom: 35px;
    }

    .ew-process-heading h2 {
        font-size: 30px;
    }

    .ew-process-wrapper {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .ew-process-item {
        display: grid;

        grid-template-columns: 75px 1fr;

        column-gap: 15px;

        text-align: left;

        padding: 0 0 30px;
    }

    .ew-process-icon {
        grid-row: span 2;

        width: 68px;
        height: 68px;

        margin: 0;

        border-width: 5px;
    }

    .ew-process-icon img {
        width: 26px !important;
        height: 26px !important;
    }

    .ew-process-content p {
        margin: 0;

        max-width: none;
    }

    .ew-process-content h3 {
        margin-bottom: 5px;
    }

    .ew-process-bottom {
        flex-wrap: wrap;
    }

    .ew-process-bottom > a {
        width: 100%;

        justify-content: center;

        margin-top: 5px;
    }

}


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

@media (max-width: 480px) {

    .ew-process-heading h2 {
        font-size: 27px;
    }

    .ew-process-heading p {
        font-size: 10px;
    }

}


/* =========================================================
   EXPRESS WORLDWIDE - BLOG / INSIGHTS SECTION
========================================================= */

.ew-blog-section {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background: #f7f9fc;

    font-family: "Poppins", sans-serif;
}


/* Background decoration */

.ew-blog-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -250px;
    top: -180px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-blog-section::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: -150px;

    border-radius: 50%;

    border: 50px solid rgba(241,90,36,.025);
}


/* =========================================================
   HEADING
========================================================= */

.ew-blog-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;
}


.ew-blog-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.ew-blog-label i {
    font-size: 11px;
}


.ew-blog-heading h2 {
    margin: 12px 0 0;

    color: #0b2945;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.6px;
}


.ew-blog-heading h2 span {
    color: #d71920;
}


.ew-blog-heading > p {
    max-width: 390px;

    margin: 0;

    padding-left: 22px;

    color: #758595;

    font-size: 11px;

    line-height: 1.9;

    border-left: 3px solid #f15a24;
}


/* =========================================================
   MAIN BLOG LAYOUT
========================================================= */

.ew-blog-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 55% 45%;

    gap: 22px;
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.ew-featured-blog {
    position: relative;

    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #e5ebf1;

    box-shadow:
        0 15px 45px rgba(8,35,58,.07);

    transition: .35s ease;
}


.ew-featured-blog:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 55px rgba(8,35,58,.12);
}


/* Featured image */

.ew-featured-image {
    position: relative;

    height: 365px;

    overflow: hidden;
}


.ew-featured-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .7s ease;
}


.ew-featured-blog:hover .ew-featured-image img {
    transform: scale(1.05);
}


.ew-featured-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,25,43,.03) 35%,
            rgba(5,25,43,.70) 100%
        );
}


/* Featured badge */

.ew-blog-badge {
    position: absolute;

    left: 20px;
    top: 20px;

    padding: 7px 11px;

    border-radius: 5px;

    color: #fff;

    background: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* Date */

.ew-featured-date {
    position: absolute;

    right: 20px;
    top: 20px;

    width: 60px;

    padding: 9px 5px;

    text-align: center;

    border-radius: 8px;

    background: rgba(7,29,51,.88);

    color: #fff;

    backdrop-filter: blur(7px);
}


.ew-featured-date strong {
    display: block;

    color: #fff;

    font-size: 13px;
}


.ew-featured-date span {
    display: block;

    margin-top: 2px;

    color: #9fb4c6;

    font-size: 6px;

    letter-spacing: .8px;
}


/* Featured content */

.ew-featured-content {
    padding: 27px 30px 30px;
}


.ew-blog-category {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.ew-blog-category i {
    font-size: 9px;
}


.ew-featured-content h3 {
    margin: 10px 0 11px;

    color: #102f49;

    font-size: 24px;

    line-height: 1.3;

    font-weight: 700;
}


.ew-featured-content p {
    margin: 0;

    max-width: 600px;

    color: #778797;

    font-size: 10.5px;

    line-height: 1.8;
}


/* Read More */

.ew-read-more {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

    color: #1475f5 !important;

    font-size: 9.5px;

    font-weight: 650;

    text-decoration: none !important;

    transition: .3s ease;
}


.ew-read-more i {
    transition: .3s ease;
}


.ew-read-more:hover {
    color: #d71920 !important;
}


.ew-read-more:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT BLOG LIST
========================================================= */

.ew-blog-list {
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.ew-blog-item {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 103px;

    padding: 10px;

    border-radius: 12px;

    background: #fff;

    border: 1px solid #e6ecf1;

    box-shadow:
        0 6px 20px rgba(8,35,58,.035);

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


.ew-blog-item:hover {
    transform: translateX(5px);

    border-color: rgba(20,117,245,.18);

    box-shadow:
        0 12px 30px rgba(8,35,58,.08);
}


/* Thumbnail */

.ew-blog-thumb {
    position: relative;

    flex: 0 0 115px;

    width: 115px;
    height: 82px;

    overflow: hidden;

    border-radius: 8px;
}


.ew-blog-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .5s ease;
}


.ew-blog-item:hover .ew-blog-thumb img {
    transform: scale(1.08);
}


.ew-blog-thumb span {
    position: absolute;

    left: 6px;
    top: 6px;

    width: 22px;
    height: 22px;

    display: flex;

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

    border-radius: 5px;

    color: #fff;

    background: rgba(7,29,51,.85);

    font-size: 7px;

    font-weight: 700;
}


/* Blog content */

.ew-blog-item-content {
    flex: 1;

    min-width: 0;
}


.ew-blog-item-content small {
    display: block;

    color: #f15a24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ew-blog-item-content h4 {
    margin: 5px 0 4px;

    color: #173650;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 650;
}


.ew-blog-item-content p {
    margin: 0;

    color: #8a98a6;

    font-size: 8px;

    line-height: 1.5;
}


.ew-blog-item-content a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 5px;

    color: #1475f5 !important;

    font-size: 7.5px;

    font-weight: 600;

    text-decoration: none !important;
}


.ew-blog-item-content a i {
    font-size: 7px;

    transition: .25s ease;
}


.ew-blog-item-content a:hover {
    color: #d71920 !important;
}


.ew-blog-item-content a:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .ew-blog-section {
        padding: 70px 0;
    }

    .ew-blog-heading {
        display: block;
    }

    .ew-blog-heading > p {
        margin-top: 20px;
    }

    .ew-blog-layout {
        grid-template-columns: 1fr;
    }

    .ew-featured-image {
        height: 400px;
    }

}


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

@media (max-width: 767px) {

    .ew-blog-section {
        padding: 55px 0;
    }

    .ew-blog-heading {
        margin-bottom: 30px;
    }

    .ew-blog-heading h2 {
        font-size: 30px;
    }

    .ew-blog-heading > p {
        font-size: 10px;

        padding-left: 15px;
    }

    .ew-featured-image {
        height: 280px;
    }

    .ew-featured-content {
        padding: 22px;
    }

    .ew-featured-content h3 {
        font-size: 20px;
    }

    .ew-blog-item {
        min-height: 92px;
    }

    .ew-blog-thumb {
        flex: 0 0 95px;

        width: 95px;
        height: 72px;
    }

}


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

@media (max-width: 480px) {

    .ew-blog-heading h2 {
        font-size: 27px;
    }

    .ew-blog-item-content p {
        display: none;
    }

    .ew-blog-item-content h4 {
        font-size: 11px;
    }

    .ew-blog-thumb {
        flex-basis: 85px;

        width: 85px;
    }

}




/* =========================================================
   EXPRESS WORLDWIDE - ABOUT SECTION
========================================================= */

.ew-about-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background: #ffffff;

    font-family: "Poppins", sans-serif;
}


/* Background decoration */

.ew-about-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -240px;
    bottom: -200px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-about-wrapper {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    gap: 70px;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.ew-about-visual {
    position: relative;

    height: 560px;

    width: 100%;
}


.ew-about-image {
    position: absolute;

    overflow: hidden;

    border-radius: 16px;

    background: #eee;

    box-shadow:
        0 18px 45px rgba(7,30,50,.13);
}


.ew-about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}


.ew-about-image:hover img {
    transform: scale(1.06);
}


/* Main */

.image-main {
    left: 0;
    top: 35px;

    width: 58%;
    height: 365px;

    z-index: 2;
}


/* Small */

.image-small {
    left: 4%;
    bottom: 0;

    width: 43%;
    height: 205px;

    z-index: 3;

    border: 7px solid #fff;
}


/* Side image */

.image-side {
    right: 0;
    top: 0;

    width: 48%;
    height: 335px;

    z-index: 1;
}


/* =========================================================
   EXPERIENCE CARD
========================================================= */

.ew-about-experience {
    position: absolute;

    left: 42%;
    bottom: 45px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px 21px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #071d33,
            #0d456e
        );

    box-shadow:
        0 15px 35px rgba(4,25,45,.25);
}


.ew-about-experience strong {
    color: #f15a24;

    font-size: 38px;

    line-height: 1;

    font-weight: 800;
}


.ew-about-experience span {
    color: #d7e4ee;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .8px;
}


/* =========================================================
   TRUST CARD
========================================================= */

.ew-about-trust {
    position: absolute;

    left: 20px;
    top: 12px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    border-radius: 9px;

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

    box-shadow:
        0 10px 30px rgba(7,30,50,.14);
}


.ew-about-trust-icon {
    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 8px;

    background: #1475f5;

    color: #fff;

    font-size: 12px;
}


.ew-about-trust strong {
    display: block;

    color: #153650;

    font-size: 9px;

    font-weight: 700;
}


.ew-about-trust span {
    display: block;

    margin-top: 2px;

    color: #8796a4;

    font-size: 7px;
}


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

.ew-about-content {
    padding-right: 10px;
}


.ew-about-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.ew-about-label i {
    font-size: 11px;
}


.ew-about-content h2 {
    margin: 14px 0 18px;

    color: #092b48;

    font-size: 40px;

    line-height: 1.16;

    font-weight: 700;

    letter-spacing: -.7px;
}


.ew-about-content h2 span {
    display: block;

    color: #d71920;
}


.ew-about-intro {
    margin: 0 0 10px;

    color: #52697b;

    font-size: 12px;

    line-height: 1.9;

    font-weight: 500;
}


.ew-about-text {
    margin: 0;

    color: #7c8b98;

    font-size: 10.5px;

    line-height: 1.85;
}


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

.ew-about-features {
    display: grid;

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

    gap: 10px;

    margin-top: 28px;
}


.ew-about-feature {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 9px;

    background: #f7f9fc;

    border: 1px solid #e9eef3;

    transition: .3s ease;
}


.ew-about-feature:hover {
    background: #fff;

    border-color: rgba(20,117,245,.18);

    transform: translateY(-3px);

    box-shadow:
        0 9px 25px rgba(8,35,58,.06);
}


/* Feature icon */

.ew-feature-icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 8px;

    color: #1475f5;

    background: rgba(20,117,245,.08);

    font-size: 11px;
}


.ew-about-feature strong {
    display: block;

    color: #183850;

    font-size: 9px;

    font-weight: 650;
}


.ew-about-feature span {
    display: block;

    margin-top: 2px;

    color: #8b99a6;

    font-size: 7px;

    line-height: 1.3;
}


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

.ew-about-buttons {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 28px;
}


.ew-about-primary,
.ew-about-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 42px;

    padding: 0 20px;

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-about-primary {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #1475f5,
            #075ac8
        );

    box-shadow:
        0 8px 20px rgba(20,117,245,.18);
}


.ew-about-primary:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(20,117,245,.25);
}


.ew-about-primary i {
    font-size: 8px;

    transition: .3s ease;
}


.ew-about-primary:hover i {
    transform: translateX(4px);
}


.ew-about-secondary {
    color: #153650 !important;

    border: 1px solid #dce4eb;

    background: #fff;
}


.ew-about-secondary:hover {
    color: #fff !important;

    border-color: #f15a24;

    background: #f15a24;
}


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

@media (max-width: 991px) {

    .ew-about-section {
        padding: 75px 0;
    }

    .ew-about-wrapper {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .ew-about-visual {
        max-width: 650px;

        margin: auto;
    }

    .ew-about-content {
        padding-right: 0;
    }

}


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

@media (max-width: 767px) {

    .ew-about-section {
        padding: 55px 0;
    }

    .ew-about-visual {
        height: 430px;
    }

    .image-main {
        height: 280px;
    }

    .image-side {
        height: 260px;
    }

    .image-small {
        height: 150px;
    }

    .ew-about-experience {
        left: 35%;

        bottom: 30px;

        padding: 13px 16px;
    }

    .ew-about-experience strong {
        font-size: 30px;
    }

    .ew-about-content h2 {
        font-size: 31px;
    }

    .ew-about-features {
        gap: 8px;
    }

}


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

@media (max-width: 480px) {

    .ew-about-visual {
        height: 360px;
    }

    .image-main {
        width: 60%;

        height: 230px;
    }

    .image-side {
        width: 47%;

        height: 210px;
    }

    .image-small {
        width: 44%;

        height: 125px;
    }

    .ew-about-trust {
        left: 8px;

        padding: 8px 10px;
    }

    .ew-about-trust-icon {
        width: 30px;
        height: 30px;
    }

    .ew-about-content h2 {
        font-size: 27px;
    }

    .ew-about-features {
        grid-template-columns: 1fr;
    }

    .ew-about-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .ew-about-primary,
    .ew-about-secondary {
        width: 100%;
    }

}


/* =========================================================
   WORKING PROCESS
========================================================= */

.ew-working-section {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background: #f7f9fc;

    font-family: "Poppins", sans-serif;
}


/* Background circles */

.ew-working-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -260px;
    top: -190px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-working-section::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -150px;
    bottom: -150px;

    border-radius: 50%;

    border: 50px solid rgba(241,90,36,.025);
}


/* =========================================================
   HEADING
========================================================= */

.ew-working-heading {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.ew-working-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.ew-working-label i {
    font-size: 11px;
}


.ew-working-heading h2 {
    margin: 12px 0 13px;

    color: #0b2945;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.5px;
}


.ew-working-heading h2 span {
    color: #d71920;
}


.ew-working-heading p {
    max-width: 560px;

    margin: auto;

    color: #7a8998;

    font-size: 11px;

    line-height: 1.8;
}


/* =========================================================
   PROCESS WRAPPER
========================================================= */

.ew-working-process {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 18px;
}


/* Connecting line */

.ew-working-process::before {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;

    top: 49px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #1475f5,
            #f15a24,
            #1475f5
        );

    opacity: .18;
}


/* =========================================================
   ITEM
========================================================= */

.ew-working-item {
    position: relative;

    min-height: 255px;

    padding: 25px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #e5ebf1;

    border-radius: 15px;

    box-shadow:
        0 8px 30px rgba(8,35,58,.045);

    transition: .35s ease;
}


.ew-working-item:hover {
    transform: translateY(-8px);

    border-color: rgba(20,117,245,.20);

    box-shadow:
        0 20px 45px rgba(8,35,58,.10);
}


/* =========================================================
   NUMBER
========================================================= */

.ew-working-number {
    position: absolute;

    top: 15px;
    right: 17px;

    color: #e4eaf0;

    font-size: 25px;

    font-weight: 800;

    line-height: 1;

    transition: .3s ease;
}


.ew-working-item:hover .ew-working-number {
    color: #f15a24;
}


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

.ew-working-icon {
    position: relative;

    z-index: 3;

    width: 67px;
    height: 67px;

    margin: 0 auto 22px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0b2945,
            #0e4d7a
        );

    border: 5px solid #fff;

    box-shadow:
        0 8px 25px rgba(8,35,58,.15);

    font-size: 18px;

    transition: .35s ease;
}


.ew-working-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px dashed rgba(20,117,245,.28);

    transition: .35s ease;
}


.ew-working-item:hover .ew-working-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1475f5,
            #075ac8
        );

    transform: translateY(-4px);
}


.ew-working-item:hover .ew-working-icon::before {
    transform: rotate(90deg);

    border-color: rgba(241,90,36,.55);
}


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

.ew-working-content small {
    display: block;

    margin-bottom: 6px;

    color: #f15a24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.ew-working-content h3 {
    margin: 0 0 9px;

    color: #163750;

    font-size: 16px;

    font-weight: 650;
}


.ew-working-content p {
    max-width: 190px;

    margin: auto;

    color: #7d8c9a;

    font-size: 9.5px;

    line-height: 1.75;
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.ew-working-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

    padding: 17px 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #071d33,
            #0b3455
        );

    box-shadow:
        0 15px 35px rgba(5,30,55,.12);
}


.ew-working-bottom-left {
    display: flex;

    align-items: center;

    gap: 12px;
}


.ew-working-bottom-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 9px;

    color: #fff;

    background: #f15a24;

    font-size: 13px;
}


.ew-working-bottom strong {
    display: block;

    color: #fff;

    font-size: 10px;

    font-weight: 600;
}


.ew-working-bottom span {
    display: block;

    margin-top: 3px;

    color: #9db2c4;

    font-size: 8px;
}


.ew-working-bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: 6px;

    color: #fff !important;

    background: #1475f5;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-working-bottom > a:hover {
    background: #f15a24;

    transform: translateY(-2px);
}


.ew-working-bottom > a i {
    font-size: 8px;

    transition: .3s ease;
}


.ew-working-bottom > a:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .ew-working-section {
        padding: 70px 0;
    }

    .ew-working-process {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;
    }

    .ew-working-process::before {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .ew-working-section {
        padding: 55px 0;
    }

    .ew-working-heading {
        margin-bottom: 35px;
    }

    .ew-working-heading h2 {
        font-size: 30px;
    }

    .ew-working-heading p {
        font-size: 10px;
    }

    .ew-working-process {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ew-working-item {
        min-height: auto;

        padding: 23px;

        text-align: left;
    }

    .ew-working-icon {
        margin: 0 0 18px;
    }

    .ew-working-content p {
        margin: 0;

        max-width: none;
    }

    .ew-working-bottom {
        flex-direction: column;

        align-items: stretch;
    }

    .ew-working-bottom > a {
        justify-content: center;
    }

}


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

@media (max-width: 480px) {

    .ew-working-heading h2 {
        font-size: 27px;
    }

    .ew-working-item {
        padding: 20px;
    }

}


/* =========================================================
   EXPRESS WORLDWIDE - INSIGHTS / BLOG
========================================================= */

.ew-insights-section {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background: #ffffff;

    font-family: "Poppins", sans-serif;
}


/* Background */

.ew-insights-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -280px;
    top: -180px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-insights-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -170px;
    bottom: -170px;

    border-radius: 50%;

    border: 50px solid rgba(241,90,36,.025);
}


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

.ew-insights-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 42px;
}


.ew-insights-tag {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.ew-insights-tag i {
    font-size: 11px;
}


.ew-insights-header h2 {
    margin: 12px 0 0;

    color: #092b48;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.6px;
}


.ew-insights-header h2 span {
    color: #d71920;
}


.ew-insights-header > p {
    max-width: 390px;

    margin: 0;

    padding-left: 20px;

    color: #788898;

    font-size: 11px;

    line-height: 1.9;

    border-left: 3px solid #f15a24;
}


/* =========================================================
   LAYOUT
========================================================= */

.ew-insights-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 47% 53%;

    gap: 22px;
}


/* =========================================================
   FEATURED
========================================================= */

.ew-featured {
    min-height: 540px;

    overflow: hidden;

    border-radius: 18px;

    background: #071d33;

    box-shadow:
        0 20px 50px rgba(8,35,58,.12);
}


.ew-featured-img {
    position: relative;

    height: 100%;

    min-height: 540px;

    overflow: hidden;
}


.ew-featured-img img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .7s ease;
}


.ew-featured:hover img {
    transform: scale(1.06);
}


.ew-featured-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,25,43,.05) 20%,
            rgba(4,25,43,.90) 100%
        );
}


/* Featured tag */

.ew-featured-tag {
    position: absolute;

    left: 22px;
    top: 22px;

    padding: 7px 12px;

    border-radius: 5px;

    color: #fff;

    background: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* Featured content */

.ew-featured-info {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 28px;
}


.ew-featured-info > span {
    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.ew-featured-info h3 {
    max-width: 500px;

    margin: 10px 0;

    color: #fff;

    font-size: 27px;

    line-height: 1.25;

    font-weight: 700;
}


.ew-featured-info p {
    max-width: 490px;

    margin: 0;

    color: #b9cad7;

    font-size: 10px;

    line-height: 1.8;
}


.ew-featured-info a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-featured-info a i {
    color: #f15a24;

    transition: .3s ease;
}


.ew-featured-info a:hover {
    color: #f15a24 !important;
}


.ew-featured-info a:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT LIST
========================================================= */

.ew-insights-list {
    display: grid;

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

    gap: 12px;
}


.ew-insight-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 102px;

    padding: 10px;

    overflow: hidden;

    border: 1px solid #e5ebf1;

    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 6px 20px rgba(8,35,58,.035);

    transition: .3s ease;
}


.ew-insight-card:hover {
    transform: translateY(-4px);

    border-color: rgba(20,117,245,.20);

    box-shadow:
        0 13px 30px rgba(8,35,58,.08);
}


/* =========================================================
   THUMBNAIL
========================================================= */

.ew-insight-image {
    position: relative;

    flex: 0 0 90px;

    width: 90px;
    height: 80px;

    overflow: hidden;

    border-radius: 7px;
}


.ew-insight-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .5s ease;
}


.ew-insight-card:hover .ew-insight-image img {
    transform: scale(1.08);
}


.ew-insight-image span {
    position: absolute;

    left: 5px;
    top: 5px;

    width: 20px;
    height: 20px;

    display: flex;

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

    border-radius: 4px;

    color: #fff;

    background: rgba(7,29,51,.88);

    font-size: 6px;

    font-weight: 700;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.ew-insight-content {
    flex: 1;

    min-width: 0;
}


.ew-insight-content small {
    display: block;

    color: #f15a24;

    font-size: 6.5px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ew-insight-content h4 {
    margin: 4px 0;

    color: #153650;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 650;
}


.ew-insight-content p {
    margin: 0;

    color: #8493a1;

    font-size: 7.5px;

    line-height: 1.5;
}


.ew-insight-content a {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 5px;

    color: #1475f5 !important;

    font-size: 7px;

    font-weight: 600;

    text-decoration: none !important;
}


.ew-insight-content a i {
    font-size: 6px;

    transition: .25s ease;
}


.ew-insight-content a:hover {
    color: #d71920 !important;
}


.ew-insight-content a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   BOTTOM
========================================================= */

.ew-insights-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;

    padding: 16px 20px;

    border-radius: 11px;

    background: #f7f9fc;

    border: 1px solid #e5ebf1;
}


.ew-insights-bottom > div {
    display: flex;

    align-items: center;

    gap: 10px;
}


.ew-insights-bottom i {
    color: #f15a24;

    font-size: 14px;
}


.ew-insights-bottom span {
    color: #718292;

    font-size: 9px;
}


.ew-insights-bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #1475f5 !important;

    text-decoration: none !important;

    font-size: 8px;

    font-weight: 650;
}


.ew-insights-bottom > a i {
    font-size: 7px;

    transition: .25s ease;
}


.ew-insights-bottom > a:hover {
    color: #d71920 !important;
}


.ew-insights-bottom > a:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .ew-insights-section {
        padding: 70px 0;
    }

    .ew-insights-header {
        display: block;
    }

    .ew-insights-header > p {
        margin-top: 20px;
    }

    .ew-insights-layout {
        grid-template-columns: 1fr;
    }

    .ew-featured {
        min-height: 480px;
    }

    .ew-featured-img {
        min-height: 480px;
    }

}


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

@media (max-width: 767px) {

    .ew-insights-section {
        padding: 55px 0;
    }

    .ew-insights-header {
        margin-bottom: 30px;
    }

    .ew-insights-header h2 {
        font-size: 30px;
    }

    .ew-insights-header > p {
        padding-left: 15px;

        font-size: 10px;
    }

    .ew-featured,
    .ew-featured-img {
        min-height: 390px;
    }

    .ew-featured-info {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .ew-featured-info h3 {
        font-size: 21px;
    }

    .ew-insights-list {
        grid-template-columns: 1fr;
    }

    .ew-insight-card {
        min-height: 95px;
    }

}


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

@media (max-width: 480px) {

    .ew-insights-header h2 {
        font-size: 27px;
    }

    .ew-featured,
    .ew-featured-img {
        min-height: 350px;
    }

    .ew-featured-info h3 {
        font-size: 19px;
    }

    .ew-featured-info p {
        font-size: 9px;
    }

    .ew-insight-image {
        flex-basis: 82px;

        width: 82px;
    }

    .ew-insight-content p {
        display: none;
    }

    .ew-insights-bottom {
        align-items: flex-start;

        flex-direction: column;
    }

}



/* =========================================================
   EXPRESS WORLDWIDE - COMPANY / LEADERSHIP SECTION
========================================================= */

.ew-company-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background: #f7f9fc;

    font-family: "Poppins", sans-serif;
}


/* Decorative background */

.ew-company-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    top: -250px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-company-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -160px;
    bottom: -180px;

    border-radius: 50%;

    border: 45px solid rgba(241,90,36,.025);
}


/* =========================================================
   MAIN GRID
========================================================= */

.ew-company-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 47% 53%;

    align-items: center;

    gap: 65px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.ew-company-visual {
    position: relative;

    min-height: 570px;
}


.ew-company-main-image {
    position: absolute;

    left: 0;
    top: 15px;

    width: 88%;
    height: 475px;

    overflow: hidden;

    border-radius: 18px;

    background: #ddd;

    box-shadow:
        0 25px 55px rgba(7,30,50,.15);
}


.ew-company-main-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,30,50,0) 50%,
            rgba(5,30,50,.18)
        );
}


.ew-company-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .7s ease;
}


.ew-company-main-image:hover img {
    transform: scale(1.05);
}


/* =========================================================
   EXPERIENCE
========================================================= */

.ew-company-experience {
    position: absolute;

    right: 0;
    top: 70px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 19px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #071d33,
            #0c4772
        );

    box-shadow:
        0 15px 35px rgba(5,30,50,.25);
}


.ew-company-experience strong {
    color: #f15a24;

    font-size: 38px;

    line-height: 1;

    font-weight: 800;
}


.ew-company-experience span,
.ew-company-experience b {
    display: block;

    color: #fff;

    font-size: 7px;

    line-height: 1.4;

    letter-spacing: 1px;
}


.ew-company-experience b {
    color: #9db6c8;

    font-weight: 600;
}


/* =========================================================
   FLOATING SERVICE CARD
========================================================= */

.ew-company-floating {
    position: absolute;

    z-index: 5;

    left: 25px;
    bottom: 75px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px 15px;

    border-radius: 9px;

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

    box-shadow:
        0 12px 35px rgba(7,30,50,.15);
}


.ew-floating-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 8px;

    color: #fff;

    background: #1475f5;

    font-size: 13px;
}


.ew-company-floating strong {
    display: block;

    color: #173850;

    font-size: 9px;

    font-weight: 700;
}


.ew-company-floating span {
    display: block;

    margin-top: 2px;

    color: #8998a5;

    font-size: 7px;
}


/* =========================================================
   STATS
========================================================= */

.ew-company-stats {
    position: absolute;

    left: 35px;
    right: 45px;
    bottom: 0;

    z-index: 6;

    display: grid;

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

    overflow: hidden;

    border-radius: 10px;

    background: #fff;

    border: 1px solid #e5ebf1;

    box-shadow:
        0 12px 35px rgba(7,30,50,.09);
}


.ew-company-stats div {
    padding: 13px 10px;

    text-align: center;

    border-right: 1px solid #edf1f4;
}


.ew-company-stats div:last-child {
    border-right: 0;
}


.ew-company-stats strong {
    display: block;

    color: #1475f5;

    font-size: 15px;

    font-weight: 750;
}


.ew-company-stats span {
    display: block;

    margin-top: 2px;

    color: #8997a3;

    font-size: 7px;

    text-transform: uppercase;

    letter-spacing: .7px;
}


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

.ew-company-content {
    padding-right: 5px;
}


.ew-company-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.ew-company-label i {
    font-size: 11px;
}


.ew-company-content h2 {
    margin: 13px 0 17px;

    color: #092b48;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.6px;
}


.ew-company-content h2 span {
    display: block;

    color: #d71920;
}


.ew-company-intro {
    margin: 0;

    color: #65798a;

    font-size: 11px;

    line-height: 1.9;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.ew-performance {
    margin-top: 19px;
}


.ew-performance-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 7px;
}


.ew-performance-title span {
    color: #314c62;

    font-size: 8px;

    font-weight: 600;
}


.ew-performance-title strong {
    color: #1475f5;

    font-size: 8px;

    font-weight: 700;
}


.ew-progress {
    position: relative;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 20px;

    background: #e7edf2;
}


.ew-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #1475f5,
            #0a9de8
        );
}


/* =========================================================
   LEADER CARD
========================================================= */

.ew-leader-card {
    display: flex;

    gap: 17px;

    margin-top: 27px;

    padding: 15px;

    border-radius: 13px;

    background: #fff;

    border: 1px solid #e3eaf0;

    box-shadow:
        0 10px 30px rgba(7,30,50,.06);

    transition: .3s ease;
}


.ew-leader-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 35px rgba(7,30,50,.09);
}


/* Leader image */

.ew-leader-image {
    flex: 0 0 105px;

    width: 105px;
    height: 135px;

    overflow: hidden;

    border-radius: 9px;

    background: #edf2f5;
}


.ew-leader-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* Leader content */

.ew-leader-content {
    flex: 1;
}


.ew-leader-label {
    color: #f15a24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.ew-leader-content h3 {
    margin: 5px 0 1px;

    color: #123550;

    font-size: 17px;

    font-weight: 700;
}


.ew-leader-content h5 {
    margin: 0 0 8px;

    color: #1475f5;

    font-size: 8px;

    font-weight: 600;
}


.ew-leader-content p {
    margin: 0;

    color: #7b8b99;

    font-size: 8px;

    line-height: 1.65;
}


.ew-leader-short {
    margin-top: 5px !important;
}


.ew-leader-sign {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 9px;

    padding-top: 8px;

    border-top: 1px solid #edf1f4;
}


.ew-leader-sign strong {
    color: #153750;

    font-family: cursive;

    font-size: 14px;
}


.ew-leader-sign span {
    color: #929eaa;

    font-size: 6.5px;
}


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

.ew-company-button {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.ew-company-button a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 19px;

    border-radius: 6px;

    color: #fff !important;

    background: #1475f5;

    text-decoration: none !important;

    font-size: 8.5px;

    font-weight: 600;

    transition: .3s ease;
}


.ew-company-button a:hover {
    background: #f15a24;

    transform: translateY(-2px);
}


.ew-company-button a i {
    font-size: 7px;

    transition: .25s ease;
}


.ew-company-button a:hover i {
    transform: translateX(4px);
}


.ew-company-button a.secondary {
    color: #173750 !important;

    background: #fff;

    border: 1px solid #dce5ec;
}


.ew-company-button a.secondary:hover {
    color: #fff !important;

    background: #173750;

    border-color: #173750;
}


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

@media (max-width: 991px) {

    .ew-company-section {
        padding: 70px 0;
    }

    .ew-company-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .ew-company-visual {
        max-width: 650px;

        width: 100%;

        margin: auto;
    }

    .ew-company-content {
        padding-right: 0;
    }

}


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

@media (max-width: 767px) {

    .ew-company-section {
        padding: 55px 0;
    }

    .ew-company-visual {
        min-height: 440px;
    }

    .ew-company-main-image {
        width: 88%;

        height: 350px;
    }

    .ew-company-experience {
        top: 45px;
    }

    .ew-company-floating {
        bottom: 70px;
    }

    .ew-company-stats {
        left: 10px;
        right: 10px;
    }

    .ew-company-content h2 {
        font-size: 31px;
    }

    .ew-leader-card {
        align-items: flex-start;
    }

}


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

@media (max-width: 480px) {

    .ew-company-visual {
        min-height: 390px;
    }

    .ew-company-main-image {
        height: 300px;
    }

    .ew-company-experience {
        right: 0;

        padding: 12px 14px;
    }

    .ew-company-experience strong {
        font-size: 30px;
    }

    .ew-company-floating {
        left: 5px;

        bottom: 62px;
    }

    .ew-company-stats {
        bottom: 0;
    }

    .ew-company-stats strong {
        font-size: 13px;
    }

    .ew-company-content h2 {
        font-size: 27px;
    }

    .ew-leader-card {
        flex-direction: column;
    }

    .ew-leader-image {
        width: 100%;

        height: 190px;
    }

    .ew-company-button {
        flex-direction: column;
    }

    .ew-company-button a {
        width: 100%;
    }

}


/* =========================================================
   TECHNOLOGY SECTION
========================================================= */

.ew-tech-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background: #f6f9fc;

    font-family: "Poppins", sans-serif;
}


/* Background */

.ew-tech-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -280px;
    bottom: -250px;

    border-radius: 50%;

    background: rgba(20,117,245,.035);
}


.ew-tech-section::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -150px;
    top: -150px;

    border-radius: 50%;

    border: 45px solid rgba(241,90,36,.025);
}


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

.ew-tech-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 45% 55%;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.ew-tech-visual {
    position: relative;

    min-height: 560px;
}


.ew-tech-main-image {
    position: absolute;

    left: 0;
    top: 20px;

    width: 90%;
    height: 475px;

    overflow: hidden;

    border-radius: 20px;

    background: #102d46;

    box-shadow:
        0 25px 55px rgba(6,30,50,.16);
}


.ew-tech-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .7s ease;
}


.ew-tech-main-image:hover img {
    transform: scale(1.05);
}


.ew-tech-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(4,28,49,.68),
            rgba(4,28,49,.12) 60%,
            rgba(20,117,245,.35)
        );
}


/* =========================================================
   DIGITAL NUMBER
========================================================= */

.ew-tech-number {
    position: absolute;

    left: 25px;
    top: 25px;

    padding: 15px 18px;

    border-radius: 10px;

    background: rgba(5,29,50,.86);

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

    backdrop-filter: blur(8px);
}


.ew-tech-number strong {
    display: block;

    color: #fff;

    font-size: 27px;

    line-height: 1;
}


.ew-tech-number span {
    display: block;

    margin-top: 5px;

    color: #a9bfce;

    font-size: 7px;

    line-height: 1.5;

    letter-spacing: 1px;
}


/* =========================================================
   FLOATING CARD
========================================================= */

.ew-tech-floating {
    position: absolute;

    z-index: 5;

    right: 0;
    top: 95px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px 16px;

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 15px 35px rgba(7,30,50,.16);
}


.ew-tech-floating-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1475f5,
            #075ac8
        );

    font-size: 14px;
}


.ew-tech-floating strong {
    display: block;

    color: #153750;

    font-size: 9px;

    font-weight: 700;
}


.ew-tech-floating span {
    display: block;

    margin-top: 2px;

    color: #8998a5;

    font-size: 7px;
}


/* =========================================================
   SYSTEM STATUS
========================================================= */

.ew-tech-status {
    position: absolute;

    z-index: 5;

    left: 30px;
    bottom: 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    border-radius: 9px;

    background: #fff;

    box-shadow:
        0 12px 30px rgba(7,30,50,.13);
}


.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #16b364;

    box-shadow:
        0 0 0 4px rgba(22,179,100,.10);
}


.ew-tech-status strong {
    display: block;

    color: #173850;

    font-size: 8px;
}


.ew-tech-status small {
    display: block;

    margin-top: 2px;

    color: #8a99a6;

    font-size: 6.5px;
}


.ew-tech-status > i {
    margin-left: 15px;

    color: #16b364;

    font-size: 11px;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.ew-tech-content {
    padding-right: 5px;
}


.ew-tech-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.ew-tech-label i {
    font-size: 11px;
}


.ew-tech-content h2 {
    margin: 14px 0 18px;

    color: #092b48;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.7px;
}


.ew-tech-content h2 span {
    color: #d71920;
}


.ew-tech-intro {
    margin: 0 0 10px;

    color: #536b7d;

    font-size: 11px;

    line-height: 1.9;
}


.ew-tech-intro strong {
    color: #153850;

    font-weight: 650;
}


.ew-tech-description {
    margin: 0;

    color: #7c8c9a;

    font-size: 9.5px;

    line-height: 1.8;
}


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

.ew-tech-features {
    display: grid;

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

    gap: 10px;

    margin-top: 25px;
}


.ew-tech-feature {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border-radius: 9px;

    background: #fff;

    border: 1px solid #e5ebf0;

    transition: .3s ease;
}


.ew-tech-feature:hover {
    transform: translateY(-3px);

    border-color: rgba(20,117,245,.18);

    box-shadow:
        0 10px 25px rgba(7,30,50,.06);
}


.ew-tech-feature-icon {
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 8px;

    color: #1475f5;

    background: rgba(20,117,245,.08);

    font-size: 11px;
}


.ew-tech-feature strong {
    display: block;

    color: #173850;

    font-size: 8.5px;

    font-weight: 650;
}


.ew-tech-feature span {
    display: block;

    margin-top: 2px;

    color: #8a98a5;

    font-size: 6.5px;
}


/* =========================================================
   MESSAGE
========================================================= */

.ew-tech-message {
    display: flex;

    gap: 13px;

    margin-top: 25px;

    padding: 16px;

    border-left: 3px solid #f15a24;

    border-radius: 0 10px 10px 0;

    background: #fff;

    box-shadow:
        0 7px 25px rgba(7,30,50,.045);
}


.ew-tech-message-icon {
    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 7px;

    color: #fff;

    background: #092b48;

    font-size: 10px;
}


.ew-tech-message p {
    margin: 0;

    color: #748594;

    font-size: 8px;

    line-height: 1.7;
}


.ew-tech-sign {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 8px;
}


.ew-tech-sign strong {
    color: #153850;

    font-family: cursive;

    font-size: 13px;
}


.ew-tech-sign span {
    color: #8c99a5;

    font-size: 6.5px;
}


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

.ew-tech-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 20px;

    padding: 12px 19px;

    border-radius: 6px;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #1475f5,
            #075ac8
        );

    text-decoration: none !important;

    font-size: 8.5px;

    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(20,117,245,.16);

    transition: .3s ease;
}


.ew-tech-button:hover {
    color: #fff !important;

    background: #f15a24;

    transform: translateY(-2px);
}


.ew-tech-button i {
    font-size: 7px;

    transition: .3s ease;
}


.ew-tech-button:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .ew-tech-section {
        padding: 70px 0;
    }

    .ew-tech-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .ew-tech-visual {
        width: 100%;
        max-width: 650px;

        margin: auto;
    }

    .ew-tech-content {
        padding-right: 0;
    }

}


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

@media (max-width: 767px) {

    .ew-tech-section {
        padding: 55px 0;
    }

    .ew-tech-visual {
        min-height: 450px;
    }

    .ew-tech-main-image {
        height: 360px;
    }

    .ew-tech-floating {
        right: 0;
        top: 70px;
    }

    .ew-tech-content h2 {
        font-size: 30px;
    }

    .ew-tech-features {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 480px) {

    .ew-tech-visual {
        min-height: 390px;
    }

    .ew-tech-main-image {
        width: 92%;
        height: 300px;
    }

    .ew-tech-floating {
        top: 50px;

        padding: 9px 11px;
    }

    .ew-tech-status {
        left: 10px;
    }

    .ew-tech-content h2 {
        font-size: 27px;
    }

    .ew-tech-message {
        padding: 12px;
    }

}



/* =========================================================
   AIR FREIGHT - PREMIUM MODERN DESIGN
========================================================= */

.ew-air-page {
    position: relative;
    padding: 90px 0;
    background: #f6f8fb;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
}

.ew-air-page::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -300px;
    top: -200px;
    border-radius: 50%;
    background: rgba(20,117,245,.035);
}


/* =========================================================
   HEADING
========================================================= */

.ew-air-heading {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 40px;

    margin-bottom: 45px;
}

.ew-air-label,
.ew-mini-label {
    color: #f15a24;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.ew-air-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ew-air-heading h2 {
    margin: 12px 0 0;

    color: #092b48;

    font-size: 40px;
    line-height: 1.12;
    font-weight: 700;
}

.ew-air-heading h2 span {
    color: #d71920;
}

.ew-air-heading > p {
    max-width: 390px;

    margin: 0;

    padding-left: 20px;

    color: #7b8b99;

    font-size: 10px;
    line-height: 1.9;

    border-left: 3px solid #f15a24;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.ew-air-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 285px 1fr;

    gap: 25px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.ew-air-sidebar {
    align-self: start;

    padding: 20px;

    border-radius: 15px;

    background: #fff;

    border: 1px solid #e3eaf0;

    box-shadow:
        0 12px 35px rgba(7,30,50,.06);
}

.ew-side-title {
    display: flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 17px;

    border-bottom: 1px solid #edf1f4;
}

.ew-side-title span {
    color: #f15a24;

    font-size: 8px;
    font-weight: 700;
}

.ew-side-title h3 {
    margin: 0;

    color: #153850;

    font-size: 16px;
}


/* Service */

.ew-service {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 7px;

    margin-top: 7px;

    border-radius: 8px;

    color: #526a7c !important;

    text-decoration: none !important;

    transition: .3s ease;
}

.ew-service:hover,
.ew-service.active {
    color: #fff !important;

    background:
        linear-gradient(
            110deg,
            #092b48,
            #0d527e
        );
}

.ew-service-icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 7px;

    color: #1475f5;

    background: #eef5fc;

    font-size: 11px;
}

.ew-service.active .ew-service-icon,
.ew-service:hover .ew-service-icon {
    color: #fff;

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

.ew-service > span:nth-child(2) {
    flex: 1;
}

.ew-service strong {
    display: block;

    font-size: 9px;
    font-weight: 650;
}

.ew-service small {
    display: block;

    margin-top: 2px;

    font-size: 6px;

    opacity: .65;
}

.ew-service > i {
    font-size: 7px;

    opacity: .4;

    transition: .3s;
}

.ew-service:hover > i {
    opacity: 1;

    transform: translateX(3px);
}


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

.ew-side-contact {
    margin-top: 18px;

    padding: 17px;

    border-radius: 11px;

    text-align: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #071d33,
            #0d4b76
        );
}

.ew-contact-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    margin: 0 auto 10px;

    border-radius: 50%;

    color: #fff;

    background: #f15a24;
}

.ew-side-contact > span {
    display: block;

    color: #a9bdca;

    font-size: 7px;
}

.ew-side-contact > strong {
    display: block;

    margin: 4px 0 10px;

    color: #fff;

    font-size: 11px;
}

.ew-side-contact > a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #fff !important;

    font-size: 7px;

    text-decoration: none !important;
}


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

.ew-air-hero {
    position: relative;

    height: 370px;

    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 18px 45px rgba(7,30,50,.13);
}

.ew-air-hero img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .7s ease;
}

.ew-air-hero:hover img {
    transform: scale(1.04);
}

.ew-air-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,27,47,.88),
            rgba(4,27,47,.25) 70%
        );
}

.ew-air-hero-content {
    position: absolute;

    left: 35px;
    bottom: 35px;

    max-width: 500px;
}

.ew-air-hero-content > span {
    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.ew-air-hero-content h1 {
    margin: 9px 0;

    color: #fff;

    font-size: 38px;

    line-height: 1.1;

    font-weight: 700;
}

.ew-air-hero-content h1 strong {
    display: block;

    color: #f15a24;
}

.ew-air-hero-content p {
    margin: 0;

    color: #c5d3dd;

    font-size: 9px;

    line-height: 1.7;
}

.ew-air-live {
    position: absolute;

    right: 20px;
    top: 20px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border-radius: 5px;

    color: #fff;

    background: rgba(5,27,46,.8);

    font-size: 6px;

    letter-spacing: 1px;
}

.ew-air-live span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #22c55e;
}


/* =========================================================
   INTRO
========================================================= */

.ew-air-intro {
    padding: 35px 5px 25px;
}

.ew-air-intro h3,
.ew-air-story h3,
.ew-benefits-heading h3 {
    margin: 9px 0 14px;

    color: #153850;

    font-size: 25px;

    line-height: 1.25;

    font-weight: 700;
}

.ew-air-intro h3 span,
.ew-air-story h3 span,
.ew-benefits-heading h3 span {
    color: #d71920;
}

.ew-air-intro p,
.ew-air-story p {
    margin: 0 0 10px;

    color: #748594;

    font-size: 9px;

    line-height: 1.9;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.ew-performance-box {
    margin-bottom: 28px;

    padding: 22px;

    border-radius: 13px;

    background: #fff;

    border: 1px solid #e3eaf0;
}

.ew-performance-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}

.ew-performance-header span {
    color: #f15a24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.ew-performance-header h3 {
    margin: 4px 0 0;

    color: #173850;

    font-size: 14px;
}

.ew-performance-header > i {
    color: #1475f5;

    font-size: 19px;
}

.ew-performance-grid {
    display: grid;

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

    gap: 20px;
}

.ew-performance-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 7px;
}

.ew-performance-top span {
    color: #51697b;

    font-size: 7px;
}

.ew-performance-top strong {
    color: #1475f5;

    font-size: 7px;
}

.ew-progress {
    height: 5px;

    overflow: hidden;

    border-radius: 20px;

    background: #e9eef3;
}

.ew-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #1475f5,
            #f15a24
        );
}


/* =========================================================
   STORY
========================================================= */

.ew-air-story {
    display: grid;

    grid-template-columns: 1fr 230px;

    gap: 25px;

    align-items: center;

    margin: 35px 0;
}

.ew-air-story-image {
    position: relative;

    height: 210px;

    overflow: hidden;

    border-radius: 12px;
}

.ew-air-story-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ew-air-story-image > div {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px;

    border-radius: 7px;

    color: #fff;

    background: rgba(5,28,48,.87);
}

.ew-air-story-image i {
    color: #f15a24;
}

.ew-air-story-image span {
    font-size: 6px;

    line-height: 1.4;
}


/* =========================================================
   BENEFITS
========================================================= */

.ew-benefits {
    padding: 27px 0;

    border-top: 1px solid #e2e9ef;
}

.ew-benefit-grid {
    display: grid;

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

    gap: 10px;
}

.ew-benefit {
    padding: 16px 12px;

    border-radius: 10px;

    background: #fff;

    border: 1px solid #e5ebf0;

    transition: .3s ease;
}

.ew-benefit:hover {
    transform: translateY(-4px);

    border-color: rgba(20,117,245,.2);

    box-shadow:
        0 10px 25px rgba(7,30,50,.06);
}

.ew-benefit > i {
    color: #1475f5;

    font-size: 17px;

    margin-bottom: 11px;
}

.ew-benefit h4 {
    margin: 0 0 5px;

    color: #173850;

    font-size: 10px;
}

.ew-benefit p {
    margin: 0;

    color: #8493a0;

    font-size: 7px;

    line-height: 1.6;
}


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

.ew-air-faq {
    padding-top: 25px;
}

.ew-faq-list {
    border-top: 1px solid #e2e9ef;
}

.ew-faq-list details {
    border-bottom: 1px solid #e2e9ef;
}

.ew-faq-list summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 5px;

    cursor: pointer;

    list-style: none;

    color: #183850;

    font-size: 10px;

    font-weight: 600;
}

.ew-faq-list summary::-webkit-details-marker {
    display: none;
}

.ew-faq-list summary i {
    color: #1475f5;

    font-size: 9px;

    transition: .3s;
}

.ew-faq-list details[open] summary i {
    transform: rotate(45deg);

    color: #f15a24;
}

.ew-faq-list p {
    margin: 0;

    padding: 0 35px 17px 5px;

    color: #7c8c99;

    font-size: 8px;

    line-height: 1.8;
}


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

@media (max-width: 991px) {

    .ew-air-page {
        padding: 70px 0;
    }

    .ew-air-heading {
        display: block;
    }

    .ew-air-heading > p {
        margin-top: 18px;
    }

    .ew-air-layout {
        grid-template-columns: 1fr;
    }

    .ew-air-sidebar {
        order: 2;
    }

    .ew-air-content {
        order: 1;
    }

    .ew-service {
        display: inline-flex;

        width: 49%;
    }

    .ew-performance-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 767px) {

    .ew-air-page {
        padding: 55px 0;
    }

    .ew-air-heading h2 {
        font-size: 30px;
    }

    .ew-air-hero {
        height: 320px;
    }

    .ew-air-hero-content {
        left: 22px;
        bottom: 22px;
        right: 20px;
    }

    .ew-air-hero-content h1 {
        font-size: 29px;
    }

    .ew-air-story {
        grid-template-columns: 1fr;
    }

    .ew-air-story-image {
        height: 250px;
    }

    .ew-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ew-service {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .ew-air-heading h2 {
        font-size: 27px;
    }

    .ew-air-hero {
        height: 290px;
    }

    .ew-air-hero-content h1 {
        font-size: 25px;
    }

    .ew-air-intro h3,
    .ew-air-story h3,
    .ew-benefits-heading h3 {
        font-size: 21px;
    }

    .ew-benefit-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ROAD FREIGHT MODERN DESIGN
========================================================= */

.rf-section {
    position: relative;
    padding: 95px 0;
    background: #f5f8fb;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
}

.rf-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    left: -280px;
    top: -220px;

    border-radius: 50%;

    background: rgba(13, 83, 130, .035);
}


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

.rf-heading {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;

    margin-bottom: 45px;
}

.rf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #f15a24;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.rf-heading h2 {
    margin: 12px 0 0;

    color: #092b48;

    font-size: 41px;
    line-height: 1.12;
    font-weight: 700;
}

.rf-heading h2 span {
    color: #d71920;
}

.rf-heading > p {
    max-width: 390px;

    margin: 0;

    padding-left: 20px;

    color: #7c8d9b;

    font-size: 10px;
    line-height: 1.9;

    border-left: 3px solid #f15a24;
}


/* =========================================================
   LAYOUT
========================================================= */

.rf-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 28px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.rf-sidebar {
    padding: 20px;

    border: 1px solid #e2e9ef;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(7, 30, 50, .06);
}

.rf-side-head {
    padding-bottom: 16px;

    border-bottom: 1px solid #edf1f4;
}

.rf-side-head span {
    color: #f15a24;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.rf-side-head h3 {
    margin: 5px 0 0;

    color: #153850;

    font-size: 17px;
}


/* Navigation */

.rf-nav {
    margin-top: 10px;
}

.rf-nav a {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 5px;

    padding: 12px 9px;

    border-radius: 8px;

    color: #536b7c !important;

    text-decoration: none !important;

    transition: .3s ease;
}

.rf-nav a i {
    width: 32px;
    height: 32px;

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

    border-radius: 7px;

    color: #1475f5;

    background: #edf5fd;

    font-size: 11px;
}

.rf-nav a span {
    flex: 1;

    font-size: 8.5px;
    font-weight: 600;
}

.rf-nav a b {
    font-size: 11px;

    font-weight: 400;

    opacity: .3;
}

.rf-nav a:hover,
.rf-nav a.active {
    color: #fff !important;

    background:
        linear-gradient(
            110deg,
            #092b48,
            #0d527e
        );

    transform: translateX(3px);
}

.rf-nav a:hover i,
.rf-nav a.active i {
    color: #fff;

    background: rgba(255,255,255,.13);
}

.rf-nav a:hover b,
.rf-nav a.active b {
    opacity: 1;
}


/* =========================================================
   HELP BOX
========================================================= */

.rf-help {
    position: relative;

    margin-top: 18px;

    padding: 20px 17px;

    overflow: hidden;

    border-radius: 12px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #071e34,
            #0d527e
        );
}

.rf-help::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    bottom: -50px;

    border-radius: 50%;

    border: 20px solid rgba(255,255,255,.04);
}

.rf-help-icon {
    width: 38px;
    height: 38px;

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

    margin-bottom: 12px;

    border-radius: 8px;

    background: #f15a24;

    font-size: 13px;
}

.rf-help small {
    color: #a9c0ce;

    font-size: 6px;

    letter-spacing: 1.2px;
}

.rf-help h4 {
    margin: 5px 0 7px;

    color: #fff;

    font-size: 12px;
}

.rf-help p {
    margin: 0 0 13px;

    color: #b9cbd6;

    font-size: 7px;

    line-height: 1.7;
}

.rf-help a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #fff !important;

    font-size: 7px;

    text-decoration: none !important;
}


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

.rf-hero {
    position: relative;

    height: 380px;

    overflow: hidden;

    border-radius: 17px;

    box-shadow:
        0 20px 45px rgba(7,30,50,.13);
}

.rf-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .7s ease;
}

.rf-hero:hover img {
    transform: scale(1.045);
}

.rf-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,27,47,.9),
            rgba(4,27,47,.28) 72%
        );
}

.rf-hero-content {
    position: absolute;

    left: 35px;
    bottom: 38px;

    max-width: 500px;
}

.rf-hero-content > span {
    color: #f15a24;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}

.rf-hero-content h1 {
    margin: 9px 0;

    color: #fff;

    font-size: 38px;

    line-height: 1.1;

    font-weight: 700;
}

.rf-hero-content h1 strong {
    display: block;

    color: #f15a24;
}

.rf-hero-content p {
    margin: 0;

    color: #d0dce3;

    font-size: 9px;

    line-height: 1.7;
}


/* Route badge */

.rf-route {
    position: absolute;

    top: 20px;
    right: 20px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 13px;

    border-radius: 8px;

    color: #fff;

    background: rgba(4,28,48,.82);

    backdrop-filter: blur(8px);
}

.rf-route > i {
    color: #f15a24;

    font-size: 13px;
}

.rf-route small {
    display: block;

    color: #9fb5c3;

    font-size: 5.5px;

    letter-spacing: 1px;
}

.rf-route strong {
    display: block;

    margin-top: 2px;

    font-size: 8px;
}


/* =========================================================
   INTRO
========================================================= */

.rf-intro {
    padding: 35px 4px 25px;
}

.rf-label {
    color: #f15a24;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.6px;
}

.rf-intro h2 {
    margin: 9px 0 14px;

    color: #153850;

    font-size: 27px;

    line-height: 1.25;

    font-weight: 700;
}

.rf-intro h2 span {
    color: #d71920;
}

.rf-intro p {
    margin: 0 0 9px;

    color: #758694;

    font-size: 9px;

    line-height: 1.9;
}

.rf-intro strong {
    color: #173850;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.rf-feature-grid {
    display: grid;

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

    gap: 12px;

    margin-bottom: 35px;
}

.rf-feature {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    border: 1px solid #e3eaf0;

    border-radius: 11px;

    background: #fff;

    transition: .3s ease;
}

.rf-feature:hover {
    transform: translateY(-4px);

    border-color: rgba(20,117,245,.2);

    box-shadow:
        0 12px 30px rgba(7,30,50,.07);
}

.rf-feature-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border-radius: 9px;

    color: #1475f5;

    background: #edf5fd;

    font-size: 14px;
}

.rf-feature h4 {
    margin: 0 0 4px;

    color: #173850;

    font-size: 10px;
}

.rf-feature p {
    margin: 0;

    color: #8795a0;

    font-size: 7px;

    line-height: 1.6;
}


/* =========================================================
   NETWORK SECTION
========================================================= */

.rf-network {
    display: grid;

    grid-template-columns: 1fr 300px;

    min-height: 270px;

    margin-bottom: 35px;

    overflow: hidden;

    border-radius: 14px;

    background: #092b48;
}

.rf-network-content {
    padding: 35px;
}

.rf-network-content h3 {
    margin: 10px 0 13px;

    color: #fff;

    font-size: 25px;

    line-height: 1.2;
}

.rf-network-content h3 span {
    display: block;

    color: #f15a24;
}

.rf-network-content p {
    max-width: 470px;

    margin: 0;

    color: #b9cbd5;

    font-size: 8px;

    line-height: 1.8;
}


/* Stats */

.rf-stat-row {
    display: flex;

    gap: 35px;

    margin-top: 25px;
}

.rf-stat-row div {
    position: relative;
}

.rf-stat-row strong {
    display: block;

    color: #fff;

    font-size: 18px;
}

.rf-stat-row small {
    display: block;

    margin-top: 2px;

    color: #8fa9b9;

    font-size: 6px;

    letter-spacing: .6px;
}


/* Network image */

.rf-network-image {
    position: relative;

    min-height: 270px;
}

.rf-network-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.rf-network-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #092b48,
            transparent 50%
        );
}

.rf-image-badge {
    position: absolute;

    z-index: 2;

    right: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 7px;

    color: #fff;

    background: rgba(5,27,45,.85);
}

.rf-image-badge i {
    color: #f15a24;
}

.rf-image-badge span {
    font-size: 6px;

    line-height: 1.5;

    letter-spacing: .8px;
}


/* =========================================================
   GALLERY
========================================================= */

.rf-gallery {
    display: grid;

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

    gap: 10px;

    margin-bottom: 40px;
}

.rf-gallery-item {
    height: 150px;

    overflow: hidden;

    border-radius: 10px;
}

.rf-gallery-item.large {
    height: 180px;
}

.rf-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;
}

.rf-gallery-item:hover img {
    transform: scale(1.06);
}


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

.rf-why {
    padding: 30px;

    border: 1px solid #e1e8ee;

    border-radius: 14px;

    background: #fff;
}

.rf-why-heading h3 {
    margin: 8px 0 22px;

    color: #173850;

    font-size: 25px;
}

.rf-why-heading h3 span {
    color: #d71920;
}

.rf-check-grid {
    display: grid;

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

    gap: 12px 25px;

    margin-bottom: 25px;
}

.rf-check-grid div {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #536b7b;

    font-size: 8px;
}

.rf-check-grid i {
    color: #1475f5;

    font-size: 10px;
}

.rf-quote {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 18px;

    border-radius: 6px;

    color: #fff !important;

    background:
        linear-gradient(
            110deg,
            #1475f5,
            #075ac8
        );

    text-decoration: none !important;

    font-size: 8px;

    font-weight: 600;

    transition: .3s ease;
}

.rf-quote:hover {
    background: #f15a24;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .rf-section {
        padding: 70px 0;
    }

    .rf-heading {
        display: block;
    }

    .rf-heading > p {
        margin-top: 18px;
    }

    .rf-layout {
        grid-template-columns: 1fr;
    }

    .rf-sidebar {
        order: 2;
    }

    .rf-main {
        order: 1;
    }

    .rf-nav {
        display: grid;

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

        gap: 5px;
    }

    .rf-nav a {
        margin: 0;
    }

}


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

@media (max-width: 767px) {

    .rf-section {
        padding: 55px 0;
    }

    .rf-heading h2 {
        font-size: 30px;
    }

    .rf-hero {
        height: 320px;
    }

    .rf-hero-content {
        left: 22px;
        bottom: 22px;
        right: 20px;
    }

    .rf-hero-content h1 {
        font-size: 29px;
    }

    .rf-feature-grid {
        grid-template-columns: 1fr;
    }

    .rf-network {
        grid-template-columns: 1fr;
    }

    .rf-network-image {
        min-height: 220px;
    }

    .rf-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .rf-gallery-item.large {
        grid-column: span 2;
        order: -1;
    }

}


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

@media (max-width: 480px) {

    .rf-heading h2 {
        font-size: 27px;
    }

    .rf-hero {
        height: 290px;
    }

    .rf-hero-content h1 {
        font-size: 25px;
    }

    .rf-nav {
        grid-template-columns: 1fr;
    }

    .rf-network-content {
        padding: 25px;
    }

    .rf-stat-row {
        gap: 20px;
    }

    .rf-why {
        padding: 20px;
    }

    .rf-check-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ROAD FREIGHT MODERN SECTION
========================================================= */

.road-modern {
    position: relative;
    padding: 90px 0;
    background: #f7f9fc;
    overflow: hidden;
}

.road-modern::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -220px;
    top: -180px;
    border-radius: 50%;
    background: rgba(15, 92, 150, 0.04);
}

.road-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    align-items: center;
    gap: 75px;
}


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

.road-content {
    max-width: 650px;
}

.road-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #e55324;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.road-eyebrow i {
    font-size: 13px;
}

.road-content h2 {
    margin: 18px 0 20px;

    color: #102f47;

    font-size: 48px;
    line-height: 1.12;

    font-weight: 700;
}

.road-content h2 span {
    display: block;
    color: #d91f26;
}

.road-description {
    max-width: 610px;

    margin-bottom: 25px;

    color: #718292;

    font-size: 14px;
    line-height: 1.9;
}

.road-description strong {
    color: #243f54;
}


/* =========================================================
   POINTS
========================================================= */

.road-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px 25px;

    margin-top: 25px;
}

.road-point {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #405b6e;

    font-size: 12px;
    font-weight: 500;
}

.road-point i {
    width: 20px;
    height: 20px;

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

    border-radius: 50%;

    color: #fff;

    background: #1674d1;

    font-size: 8px;
}


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

.road-buttons {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 34px;
}

.road-btn,
.road-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 6px;

    text-decoration: none !important;

    font-size: 11px;
    font-weight: 600;

    transition: all .3s ease;
}

.road-btn {
    color: #fff !important;

    background: #102f47;

    box-shadow: 0 10px 25px rgba(16, 47, 71, .16);
}

.road-btn:hover {
    color: #fff !important;
    background: #e55324;
    transform: translateY(-2px);
}

.road-btn-outline {
    color: #102f47 !important;

    border: 1px solid #d5dee6;

    background: #fff;
}

.road-btn-outline:hover {
    color: #1674d1 !important;
    border-color: #1674d1;
}


/* =========================================================
   IMAGE
========================================================= */

.road-visual {
    position: relative;
}

.road-image-wrap {
    position: relative;

    height: 525px;

    overflow: hidden;

    border-radius: 22px 22px 22px 80px;

    box-shadow:
        0 25px 60px rgba(10, 35, 55, .16);
}

.road-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .7s ease;
}

.road-image-wrap:hover img {
    transform: scale(1.04);
}

.road-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6, 29, 47, .03) 40%,
            rgba(6, 29, 47, .72)
        );
}


/* =========================================================
   EXPERIENCE CARD
========================================================= */

.road-experience {
    position: absolute;

    left: -28px;
    bottom: 35px;

    width: 155px;

    padding: 20px 18px;

    border-radius: 12px;

    color: #fff;

    background: #d91f26;

    box-shadow:
        0 15px 35px rgba(217, 31, 38, .25);
}

.road-experience strong {
    display: block;

    font-size: 36px;
    line-height: 1;

    font-weight: 700;
}

.road-experience span {
    display: block;

    margin-top: 7px;

    font-size: 9px;
    line-height: 1.5;

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


/* =========================================================
   ROUTE CARD
========================================================= */

.road-route-card {
    position: absolute;

    top: 25px;
    right: 25px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 14px;

    border-radius: 9px;

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

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

.road-route-icon {
    width: 38px;
    height: 38px;

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

    border-radius: 8px;

    color: #fff;
    background: #1674d1;

    font-size: 13px;
}

.road-route-card small {
    display: block;

    color: #8a9aa6;

    font-size: 7px;
    letter-spacing: 1px;
}

.road-route-card strong {
    display: block;

    margin-top: 2px;

    color: #102f47;

    font-size: 10px;
}


/* =========================================================
   IMAGE BOTTOM LABEL
========================================================= */

.road-location {
    position: absolute;

    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border-radius: 20px;

    color: #fff;

    background: rgba(10, 35, 55, .75);

    backdrop-filter: blur(7px);

    font-size: 8px;
}

.road-location i {
    color: #ff6840;
}


/* =========================================================
   WHY SECTION
========================================================= */

.road-why {
    position: relative;

    padding: 90px 0;

    background: #fff;
}

.road-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;

    margin-bottom: 45px;
}

.road-section-head > div > span {
    color: #e55324;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.road-section-head h2 {
    margin: 10px 0 0;

    color: #102f47;

    font-size: 34px;
    line-height: 1.2;
}

.road-section-head h2 strong {
    color: #d91f26;
}

.road-section-head > p {
    max-width: 390px;

    margin: 0;

    color: #7c8c99;

    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   WHY CARDS
========================================================= */

.road-why-grid {
    display: grid;

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

    gap: 18px;
}

.road-why-card {
    position: relative;

    min-height: 270px;

    padding: 25px;

    overflow: hidden;

    border: 1px solid #e7edf2;

    border-radius: 13px;

    background: #fff;

    transition: .35s ease;
}

.road-why-card::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    bottom: -45px;

    border-radius: 50%;

    background: #f4f7fa;

    transition: .35s ease;
}

.road-why-card:hover {
    border-color: #1674d1;

    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(10, 40, 65, .1);
}

.road-why-card:hover::before {
    background: #edf5fd;
}

.why-number {
    position: absolute;

    top: 20px;
    right: 20px;

    color: #dfe6eb;

    font-size: 20px;
    font-weight: 700;
}

.why-icon {
    width: 53px;
    height: 53px;

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

    margin-bottom: 25px;

    border-radius: 11px;

    color: #1674d1;

    background: #edf5fd;

    font-size: 17px;

    transition: .3s ease;
}

.road-why-card:hover .why-icon {
    color: #fff;
    background: #1674d1;
}

.road-why-card h4 {
    margin: 0 0 10px;

    color: #173850;

    font-size: 15px;
}

.road-why-card p {
    margin: 0;

    color: #7d8c97;

    font-size: 10px;

    line-height: 1.8;
}

.why-arrow {
    position: absolute;

    left: 25px;
    bottom: 22px;

    color: #d91f26;

    font-size: 11px;
}


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

.road-process {
    position: relative;

    padding: 90px 0 100px;

    color: #fff;

    background:
        linear-gradient(
            120deg,
            #071f33,
            #0b3e5f
        );

    overflow: hidden;
}

.road-process::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -260px;
    top: -250px;

    border-radius: 50%;

    border: 90px solid rgba(255,255,255,.025);
}

.process-heading {
    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 650px;

    margin: 0 auto 60px;
}

.process-heading > span {
    color: #ff7048;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.process-heading h2 {
    margin: 12px 0;

    color: #fff;

    font-size: 36px;
}

.process-heading h2 strong {
    color: #ff7048;
}

.process-heading p {
    margin: 0;

    color: #a9bfcc;

    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   TIMELINE
========================================================= */

.process-timeline {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 20px;
}

.process-item {
    position: relative;

    text-align: center;

    padding: 10px 15px;
}

.process-line {
    position: absolute;

    top: 29px;
    left: 50%;

    width: 100%;
    height: 1px;

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

.process-item:last-child .process-line {
    display: none;
}

.process-circle {
    position: relative;

    z-index: 3;

    width: 58px;
    height: 58px;

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

    margin: 0 auto 18px;

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

    border-radius: 50%;

    color: #fff;

    background: #0c486d;

    font-size: 11px;
    font-weight: 700;

    box-shadow:
        0 0 0 8px rgba(255,255,255,.025);
}

.process-icon {
    width: 48px;
    height: 48px;

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

    margin: 0 auto 15px;

    border-radius: 10px;

    color: #ff7048;

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

    font-size: 15px;
}

.process-item h4 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 14px;
}

.process-item p {
    max-width: 190px;

    margin: auto;

    color: #9fb7c5;

    font-size: 9px;

    line-height: 1.7;
}


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

@media (max-width: 1199px) {

    .road-main {
        gap: 45px;
    }

    .road-content h2 {
        font-size: 41px;
    }

    .road-image-wrap {
        height: 490px;
    }

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

}


@media (max-width: 991px) {

    .road-modern {
        padding: 70px 0;
    }

    .road-main {
        grid-template-columns: 1fr;
    }

    .road-content {
        max-width: 100%;
    }

    .road-visual {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

    .road-section-head {
        display: block;
    }

    .road-section-head > p {
        margin-top: 15px;
    }

    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 45px;
    }

    .process-line {
        display: none;
    }

}


@media (max-width: 767px) {

    .road-modern,
    .road-why,
    .road-process {
        padding: 60px 0;
    }

    .road-content h2 {
        font-size: 33px;
    }

    .road-description {
        font-size: 12px;
    }

    .road-points {
        grid-template-columns: 1fr;
    }

    .road-buttons {
        flex-wrap: wrap;
    }

    .road-image-wrap {
        height: 420px;

        border-radius: 15px 15px 15px 50px;
    }

    .road-experience {
        left: 15px;
        bottom: 20px;
    }

    .road-route-card {
        right: 15px;
        top: 15px;
    }

    .road-section-head h2 {
        font-size: 29px;
    }

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

    .road-why-card {
        min-height: 240px;
    }

    .process-heading h2 {
        font-size: 29px;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .road-content h2 {
        font-size: 29px;
    }

    .road-buttons a {
        width: 100%;
    }

    .road-image-wrap {
        height: 360px;
    }

    .road-experience {
        width: 135px;
        padding: 15px;
    }

    .road-experience strong {
        font-size: 30px;
    }

    .road-location {
        right: 12px;
        bottom: 15px;
    }

}



/* =========================================================
   MODERN WAREHOUSE SECTION
========================================================= */

.warehouse-modern {
    position: relative;
    padding: 90px 0;

    background: #f6f9fc;

    overflow: hidden;
}

.warehouse-modern::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    top: -220px;

    border-radius: 50%;

    border: 70px solid rgba(16, 79, 119, .035);
}


/* =========================================================
   HEADING
========================================================= */

.warehouse-heading {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;
}

.warehouse-label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #e45724;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.warehouse-label i {
    font-size: 12px;
}

.warehouse-heading h2 {
    margin: 12px 0 0;

    color: #102f47;

    font-size: 42px;

    line-height: 1.15;

    font-weight: 700;
}

.warehouse-heading h2 span {
    display: block;

    color: #d51e25;
}

.warehouse-heading > p {
    max-width: 390px;

    margin: 0;

    padding-left: 20px;

    border-left: 3px solid #e45724;

    color: #7b8c99;

    font-size: 10px;

    line-height: 1.9;
}


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

.warehouse-grid {
    position: relative;

    display: grid;

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

    gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.warehouse-card {
    position: relative;

    min-height: 275px;

    padding: 25px 27px;

    overflow: hidden;

    border: 1px solid #e2e9ef;

    border-radius: 15px;

    background: #fff;

    transition: all .35s ease;
}

.warehouse-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    background: #f3f7fa;

    transition: .4s ease;
}

.warehouse-card:hover {
    transform: translateY(-7px);

    border-color: #1674d1;

    box-shadow:
        0 20px 45px rgba(8, 37, 59, .1);
}

.warehouse-card:hover::after {
    background: #edf5fd;
}


/* =========================================================
   TOP
========================================================= */

.warehouse-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;

    z-index: 2;
}

.warehouse-number {
    color: #dce4ea;

    font-size: 25px;

    font-weight: 700;
}

.warehouse-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 11px;

    color: #1475d1;

    background: #edf5fd;

    font-size: 18px;

    transition: .3s ease;
}

.warehouse-card:hover .warehouse-icon {
    color: #fff;

    background: #1475d1;

    transform: rotate(-4deg);
}


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

.warehouse-card-content {
    position: relative;

    z-index: 2;

    margin-top: 28px;

    max-width: 450px;
}

.warehouse-small {
    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.warehouse-card h3 {
    margin: 7px 0 10px;

    color: #18384e;

    font-size: 22px;

    line-height: 1.2;
}

.warehouse-card h3 strong {
    color: #d51e25;
}

.warehouse-card p {
    max-width: 420px;

    margin: 0 0 17px;

    color: #7c8d99;

    font-size: 9px;

    line-height: 1.8;
}


/* =========================================================
   FEATURE
========================================================= */

.warehouse-feature {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #405b6e;

    font-size: 8px;

    font-weight: 600;
}

.warehouse-feature i {
    width: 17px;
    height: 17px;

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

    border-radius: 50%;

    color: #fff;

    background: #1475d1;

    font-size: 6px;
}


/* =========================================================
   ARROW
========================================================= */

.warehouse-arrow {
    position: absolute;

    z-index: 3;

    right: 25px;
    bottom: 22px;

    width: 32px;
    height: 32px;

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

    border-radius: 50%;

    color: #1475d1;

    background: #f1f6fa;

    font-size: 9px;

    transition: .3s ease;
}

.warehouse-card:hover .warehouse-arrow {
    color: #fff;

    background: #e45724;

    transform: translateX(3px);
}


/* =========================================================
   SECURITY CARD
========================================================= */

.warehouse-security {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7fafc
        );
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.warehouse-bottom {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 20px;

    padding: 17px 20px;

    border-radius: 11px;

    background: #102f47;

    color: #fff;
}

.warehouse-bottom-icon {
    width: 42px;
    height: 42px;

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

    flex: 0 0 42px;

    border-radius: 8px;

    color: #ff7048;

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

    font-size: 14px;
}

.warehouse-bottom strong {
    display: block;

    color: #fff;

    font-size: 10px;
}

.warehouse-bottom span {
    display: block;

    margin-top: 3px;

    color: #9eb4c2;

    font-size: 7px;
}

.warehouse-bottom a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;

    padding: 10px 15px;

    border-radius: 5px;

    color: #fff !important;

    background: #e45724;

    text-decoration: none !important;

    font-size: 7px;

    font-weight: 600;

    transition: .3s ease;
}

.warehouse-bottom a:hover {
    background: #1475d1;
}


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

@media (max-width: 991px) {

    .warehouse-modern {
        padding: 70px 0;
    }

    .warehouse-heading {
        display: block;
    }

    .warehouse-heading > p {
        margin-top: 18px;
    }

}


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

@media (max-width: 767px) {

    .warehouse-modern {
        padding: 55px 0;
    }

    .warehouse-heading h2 {
        font-size: 31px;
    }

    .warehouse-grid {
        grid-template-columns: 1fr;
    }

    .warehouse-card {
        min-height: 260px;
    }

    .warehouse-bottom {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .warehouse-bottom a {
        width: 100%;

        justify-content: center;

        margin-left: 0;
        margin-top: 5px;
    }

}


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

@media (max-width: 480px) {

    .warehouse-heading h2 {
        font-size: 27px;
    }

    .warehouse-card {
        padding: 21px;
    }

    .warehouse-card h3 {
        font-size: 20px;
    }

}


/* =========================================================
   MODERN PICKUP SECTION
========================================================= */

.pickup-modern {
    position: relative;

    padding: 90px 0;

    background: #f6f9fc;

    overflow: hidden;
}

.pickup-modern::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -220px;

    border-radius: 50%;

    border: 70px solid rgba(16, 79, 119, .035);
}


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

.pickup-header {
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 50px;

    margin-bottom: 45px;
}

.pickup-label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #e45724;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.pickup-label i {
    font-size: 12px;
}

.pickup-header h2 {
    margin: 12px 0 0;

    color: #102f47;

    font-size: 42px;
    line-height: 1.15;

    font-weight: 700;
}

.pickup-header h2 span {
    color: #d51e25;
}

.pickup-header > p {
    max-width: 420px;

    margin: 0;

    padding-left: 20px;

    border-left: 3px solid #e45724;

    color: #7b8c99;

    font-size: 10px;
    line-height: 1.9;
}


/* =========================================================
   PICKUP FLOW
========================================================= */

.pickup-flow {
    position: relative;

    display: grid;

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

    gap: 15px;
}


/* Connecting line */

.pickup-flow::before {
    content: "";

    position: absolute;

    top: 38px;
    left: 10%;

    width: 80%;
    height: 1px;

    border-top: 1px dashed #cbd8e1;
}


/* =========================================================
   CARD
========================================================= */

.pickup-item {
    position: relative;

    z-index: 2;

    min-height: 300px;

    padding: 25px;

    border: 1px solid #e1e9ef;

    border-radius: 14px;

    background: #fff;

    transition: all .35s ease;
}

.pickup-item:hover {
    transform: translateY(-8px);

    border-color: #1674d1;

    box-shadow:
        0 20px 45px rgba(10, 40, 65, .1);
}


/* =========================================================
   TOP
========================================================= */

.pickup-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.pickup-number {
    color: #dce4e9;

    font-size: 25px;

    font-weight: 700;
}

.pickup-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 11px;

    color: #1475d1;

    background: #edf5fd;

    font-size: 17px;

    transition: .35s ease;
}

.pickup-item:hover .pickup-icon {
    color: #fff;

    background: #1475d1;

    transform: rotate(-5deg);
}


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

.pickup-content {
    margin-top: 30px;
}

.pickup-content > span {
    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.pickup-content h3 {
    margin: 8px 0 12px;

    color: #173850;

    font-size: 19px;

    line-height: 1.25;
}

.pickup-content p {
    margin: 0;

    color: #7c8d99;

    font-size: 9px;

    line-height: 1.85;
}


/* =========================================================
   ARROW
========================================================= */

.pickup-arrow {
    position: absolute;

    left: 25px;
    bottom: 22px;

    width: 31px;
    height: 31px;

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

    border-radius: 50%;

    color: #1475d1;

    background: #f1f6fa;

    font-size: 8px;

    transition: .3s ease;
}

.pickup-item:hover .pickup-arrow {
    color: #fff;

    background: #e45724;

    transform: translateX(4px);
}


/* =========================================================
   FINAL CARD
========================================================= */

.pickup-final {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9fc
        );
}


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

.pickup-cta {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 22px;

    padding: 20px 23px;

    border-radius: 12px;

    color: #fff;

    background: #102f47;

    box-shadow:
        0 15px 35px rgba(16, 47, 71, .13);
}

.pickup-cta-left {
    display: flex;

    align-items: center;

    gap: 14px;
}

.pickup-cta-icon {
    width: 44px;
    height: 44px;

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

    flex: 0 0 44px;

    border-radius: 9px;

    color: #ff7048;

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

    font-size: 15px;
}

.pickup-cta strong {
    display: block;

    color: #fff;

    font-size: 11px;
}

.pickup-cta span {
    display: block;

    margin-top: 4px;

    color: #9fb5c3;

    font-size: 8px;
}

.pickup-btn {
    display: inline-flex;

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

    gap: 9px;

    min-height: 42px;

    padding: 0 19px;

    border-radius: 5px;

    color: #fff !important;

    background: #e45724;

    text-decoration: none !important;

    font-size: 8px;

    font-weight: 600;

    transition: .3s ease;
}

.pickup-btn:hover {
    color: #fff !important;

    background: #1475d1;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .pickup-modern {
        padding: 70px 0;
    }

    .pickup-header {
        display: block;
    }

    .pickup-header > p {
        margin-top: 18px;
    }

    .pickup-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .pickup-flow::before {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .pickup-modern {
        padding: 55px 0;
    }

    .pickup-header h2 {
        font-size: 31px;
    }

    .pickup-flow {
        grid-template-columns: 1fr;
    }

    .pickup-item {
        min-height: 260px;
    }

    .pickup-cta {
        align-items: flex-start;

        flex-direction: column;
    }

    .pickup-btn {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .pickup-header h2 {
        font-size: 27px;
    }

    .pickup-item {
        padding: 21px;
    }

}



/* =========================================================
   VOLUMETRIC INFORMATION SECTION
========================================================= */

.volumetric-info {
    position: relative;

    padding: 90px 0;

    background: #f6f9fc;

    overflow: hidden;
}

.volumetric-info::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    top: -220px;

    border-radius: 50%;

    border: 70px solid rgba(20, 117, 209, .035);
}


/* =========================================================
   HEADING
========================================================= */

.vol-info-heading {
    position: relative;

    max-width: 780px;

    margin: 0 auto 50px;

    text-align: center;
}

.vol-info-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #e45724;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.vol-info-label i {
    font-size: 12px;
}

.vol-info-heading h2 {
    margin: 13px 0;

    color: #102f47;

    font-size: 42px;

    line-height: 1.15;

    font-weight: 700;
}

.vol-info-heading h2 span {
    color: #d51e25;
}

.vol-info-heading p {
    max-width: 650px;

    margin: auto;

    color: #7d8e9a;

    font-size: 10px;

    line-height: 1.9;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.vol-info-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px;
}


/* =========================================================
   EXPLANATION CARD
========================================================= */

.vol-explain-card {
    position: relative;

    padding: 35px;

    border-radius: 16px;

    background: #fff;

    border: 1px solid #e1e9ef;

    box-shadow: 0 12px 35px rgba(20, 50, 70, .05);

    overflow: hidden;
}

.vol-explain-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: #f3f7fa;
}

.vol-card-icon {
    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 12px;

    color: #1475d1;

    background: #edf5fd;

    font-size: 19px;

    margin-bottom: 25px;
}

.vol-card-label {
    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.vol-explain-card h3 {
    margin: 8px 0 17px;

    color: #173850;

    font-size: 25px;

    font-weight: 700;
}

.vol-explain-card p {
    position: relative;

    z-index: 2;

    margin-bottom: 14px;

    color: #7c8d99;

    font-size: 9px;

    line-height: 1.9;
}


/* =========================================================
   CHARGEABLE BOX
========================================================= */

.chargeable-box {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 25px;

    padding: 14px 16px;

    border-radius: 9px;

    background: #102f47;
}

.chargeable-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    flex: 0 0 38px;

    border-radius: 7px;

    color: #fff;

    background: #e45724;

    font-size: 12px;
}

.chargeable-box small {
    display: block;

    color: #91a9b8;

    font-size: 6px;

    letter-spacing: 1.2px;
}

.chargeable-box strong {
    display: block;

    margin-top: 4px;

    color: #fff;

    font-size: 8px;
}


/* =========================================================
   FORMULA CARD
========================================================= */

.vol-formula-card {
    position: relative;

    padding: 35px;

    border-radius: 16px;

    background: #102f47;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(16, 47, 71, .13);
}

.vol-formula-card::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    border: 45px solid rgba(255,255,255,.035);
}


/* =========================================================
   FORMULA TOP
========================================================= */

.formula-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.formula-top span {
    color: #ff7048;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.formula-top h3 {
    margin: 8px 0 0;

    color: #fff;

    font-size: 25px;
}

.formula-icon {
    width: 53px;
    height: 53px;

    display: flex;

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

    border-radius: 11px;

    color: #fff;

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

    font-size: 18px;
}


/* =========================================================
   FORMULA DISPLAY
========================================================= */

.formula-display {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    margin: 35px 0;

    padding: 23px 15px;

    border-radius: 10px;

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

    color: #fff;

    text-align: center;
}

.formula-display span {
    font-size: 14px;

    font-weight: 600;
}

.formula-display b {
    color: #ff7048;

    font-size: 19px;
}


/* =========================================================
   EXAMPLE
========================================================= */

.formula-example {
    position: relative;

    z-index: 2;

    padding: 20px;

    border-radius: 10px;

    background: #fff;
}

.example-label {
    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.formula-example p {
    margin: 10px 0;

    color: #173850;

    font-size: 12px;

    font-weight: 600;
}

.example-line {
    width: 100%;

    height: 1px;

    margin: 10px 0;

    background: #e4eaee;
}

.formula-example strong {
    display: block;

    color: #1475d1;

    font-size: 16px;
}

.formula-example small {
    display: block;

    margin-top: 4px;

    color: #8495a0;

    font-size: 7px;
}


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

.vol-note {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 22px;

    padding: 18px 20px;

    border-radius: 11px;

    border-left: 4px solid #e45724;

    background: #fff;

    box-shadow: 0 8px 25px rgba(20, 50, 70, .04);
}

.vol-note-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    flex: 0 0 38px;

    border-radius: 50%;

    color: #fff;

    background: #e45724;

    font-size: 10px;
}

.vol-note strong {
    display: block;

    color: #173850;

    font-size: 9px;
}

.vol-note p {
    margin: 4px 0 0;

    color: #7c8d99;

    font-size: 8px;

    line-height: 1.7;
}


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

.vol-features {
    display: grid;

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

    gap: 12px;

    margin-top: 22px;
}

.vol-features > div {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;

    border-radius: 9px;

    background: #fff;

    border: 1px solid #e3eaf0;

    color: #405b6e;

    font-size: 8px;

    font-weight: 600;

    transition: .3s ease;
}

.vol-features > div:hover {
    transform: translateY(-3px);

    border-color: #1475d1;

    box-shadow: 0 10px 25px rgba(20,50,70,.07);
}

.vol-features i {
    color: #1475d1;

    font-size: 14px;
}


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

@media (max-width: 991px) {

    .vol-info-heading h2 {
        font-size: 35px;
    }

    .vol-info-layout {
        grid-template-columns: 1fr;
    }

    .vol-features {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 767px) {

    .volumetric-info {
        padding: 60px 0;
    }

    .vol-info-heading h2 {
        font-size: 30px;
    }

    .vol-explain-card,
    .vol-formula-card {
        padding: 25px;
    }

    .formula-display {
        flex-direction: column;

        gap: 8px;
    }

    .vol-features {
        grid-template-columns: 1fr;
    }

    .vol-note {
        align-items: flex-start;
    }

}

@media (max-width: 480px) {

    .vol-info-heading h2 {
        font-size: 27px;
    }

    .formula-top h3 {
        font-size: 21px;
    }

    .formula-display span {
        font-size: 12px;
    }

}



/* =========================================================
   DOCUMENT SECTION
========================================================= */

.document-section {
    padding: 85px 0;
    background: #f6f9fc;
}


/* =========================================================
   HEADING
========================================================= */

.document-heading {
    max-width: 720px;
    margin: 0 auto 45px;
}

.document-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #e45724;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.7px;
}

.document-label i {
    font-size: 12px;
}

.document-heading h2 {
    margin: 12px 0;

    color: #102f47;

    font-size: 40px;
    line-height: 1.15;

    font-weight: 700;
}

.document-heading h2 span {
    color: #d51e25;
}

.document-heading p {
    margin: 0;

    color: #7c8d99;

    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.doc-card {
    position: relative;

    height: 100%;

    padding: 28px;

    border: 1px solid #e1e9ef;

    border-radius: 15px;

    background: #fff;

    box-shadow: 0 12px 35px rgba(16, 47, 71, .05);

    transition: all .35s ease;
}

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

    border-color: #1475d1;

    box-shadow: 0 20px 45px rgba(16, 47, 71, .10);
}


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

.doc-card-header {
    display: flex;
    align-items: center;

    gap: 14px;

    padding-bottom: 22px;

    border-bottom: 1px solid #edf1f4;
}

.doc-card-icon {
    width: 52px;
    height: 52px;

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

    flex: 0 0 52px;

    border-radius: 11px;

    color: #1475d1;

    background: #edf5fd;

    font-size: 18px;

    transition: .3s ease;
}

.doc-card:hover .doc-card-icon {
    color: #fff;

    background: #1475d1;

    transform: rotate(-4deg);
}

.doc-card-header span {
    display: block;

    margin-bottom: 4px;

    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.doc-card-header h4 {
    margin: 0;

    color: #173850;

    font-size: 17px;

    font-weight: 700;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.doc-card ul {
    list-style: none;

    padding: 0;
    margin: 8px 0 0;
}

.doc-card li {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 62px;

    padding: 10px 4px;

    border-bottom: 1px solid #edf1f4;
}

.doc-card li:last-child {
    border-bottom: 0;
}

.doc-card li > span {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #405b6e;

    font-size: 9px;

    font-weight: 600;
}

.doc-card li > span > i {
    width: 28px;
    height: 28px;

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

    border-radius: 7px;

    color: #1475d1;

    background: #f1f6fa;

    font-size: 10px;
}


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

.doc-actions {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}

.doc-actions a {
    width: 34px;
    height: 34px;

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

    border-radius: 7px;

    text-decoration: none !important;

    background: #f3f6f8;

    transition: all .25s ease;
}

.doc-actions i {
    font-size: 14px;
}


/* Excel */

.doc-actions .excel {
    color: #16864a;
}

.doc-actions a:hover:has(.excel) {
    background: #16864a;
}

.doc-actions a:hover .excel {
    color: #fff;
}


/* PDF */

.doc-actions .pdf {
    color: #d72828;
}

.doc-actions a:hover:has(.pdf) {
    background: #d72828;
}

.doc-actions a:hover .pdf {
    color: #fff;
}


/* =========================================================
   DOWNLOAD ALL
========================================================= */

.doc-card li.download-all {
    margin-top: 8px;

    padding: 12px 9px;

    border: 0;

    border-radius: 8px;

    background: #f5f8fa;
}

.download-all > span {
    color: #173850 !important;

    font-weight: 700 !important;
}


/* =========================================================
   INFO
========================================================= */

.document-info {
    margin-top: 5px;

    border: 0 !important;

    background: transparent;
}

.document-info > span {
    color: #8495a0 !important;

    font-size: 8px !important;
}

.document-info small {
    color: #a0adb5;

    font-size: 7px;
}


/* =========================================================
   BOTTOM
========================================================= */

.document-bottom {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 22px;

    padding: 17px 20px;

    border-radius: 10px;

    background: #102f47;
}

.document-bottom-icon {
    width: 42px;
    height: 42px;

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

    flex: 0 0 42px;

    border-radius: 8px;

    color: #ff7048;

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

    font-size: 14px;
}

.document-bottom strong {
    display: block;

    color: #fff;

    font-size: 10px;
}

.document-bottom p {
    margin: 3px 0 0;

    color: #9db3c1;

    font-size: 7px;
}


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

@media (max-width: 767px) {

    .document-section {
        padding: 60px 0;
    }

    .document-heading h2 {
        font-size: 31px;
    }

    .doc-card {
        padding: 22px;
    }

}


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

@media (max-width: 480px) {

    .document-heading h2 {
        font-size: 27px;
    }

    .doc-card-header h4 {
        font-size: 15px;
    }

    .doc-card li > span {
        font-size: 8px;
    }

    .doc-actions a {
        width: 31px;
        height: 31px;
    }

    .document-bottom {
        align-items: flex-start;
    }

}


/* =========================================================
   MODERN CONTACT SECTION
========================================================= */

.contact-modern {
    position: relative;

    padding: 90px 0;

    background: #f5f8fb;

    overflow: hidden;
}

.contact-modern::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    bottom: -220px;

    border-radius: 50%;

    border: 70px solid rgba(20,117,209,.035);
}


/* =========================================================
   MAIN GRID
========================================================= */

.contact-modern-grid {
    position: relative;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    min-height: 560px;

    border-radius: 18px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 20px 60px rgba(15,45,65,.10);
}


/* =========================================================
   LEFT PANEL
========================================================= */

.contact-panel {
    position: relative;

    padding: 48px 40px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #102f47 0%,
            #123c59 65%,
            #0d2b41 100%
        );

    overflow: hidden;
}

.contact-panel::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

    border: 45px solid rgba(255,255,255,.035);
}

.contact-panel::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(228,87,36,.08);
}


/* =========================================================
   LABEL
========================================================= */

.contact-label {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ff7048;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.contact-label i {
    font-size: 11px;
}


/* =========================================================
   HEADING
========================================================= */

.contact-panel h2 {
    position: relative;

    z-index: 2;

    margin: 15px 0;

    color: #fff;

    font-size: 36px;

    line-height: 1.18;

    font-weight: 700;
}

.contact-panel h2 span {
    display: block;

    color: #ff7048;
}

.contact-intro {
    position: relative;

    z-index: 2;

    max-width: 420px;

    margin: 0 0 30px;

    color: #a9bdc9;

    font-size: 9px;

    line-height: 1.9;
}


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

.contact-details {
    position: relative;

    z-index: 2;
}

.contact-detail {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(255,255,255,.09);

    color: #fff;

    text-decoration: none !important;

    transition: .3s ease;
}

.contact-detail:hover {
    transform: translateX(5px);
}

.contact-detail-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    flex: 0 0 40px;

    border-radius: 9px;

    color: #ff7048;

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

    font-size: 12px;
}

.contact-detail small {
    display: block;

    margin-bottom: 4px;

    color: #7795a7;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.contact-detail strong {
    display: block;

    color: #fff;

    font-size: 9px;

    font-weight: 600;
}


/* =========================================================
   SOCIAL
========================================================= */

.contact-social {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 28px;
}

.contact-social > span {
    color: #7895a6;

    font-size: 7px;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}

.contact-social > div {
    display: flex;

    gap: 7px;
}

.contact-social a {
    width: 31px;
    height: 31px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

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

    text-decoration: none;

    font-size: 9px;

    transition: .3s ease;
}

.contact-social a:hover {
    color: #fff;

    background: #e45724;

    transform: translateY(-3px);
}


/* =========================================================
   FORM AREA
========================================================= */

.contact-form-modern {
    padding: 48px 50px;

    background: #fff;
}


/* =========================================================
   FORM HEADING
========================================================= */

.form-heading {
    margin-bottom: 30px;
}

.form-heading > span {
    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.form-heading h3 {
    margin: 8px 0 7px;

    color: #173850;

    font-size: 27px;

    font-weight: 700;
}

.form-heading p {
    margin: 0;

    color: #8495a0;

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   FORM GRID
========================================================= */

.modern-form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px 15px;
}


/* =========================================================
   INPUT
========================================================= */

.modern-input {
    position: relative;
}

.modern-input.full {
    grid-column: 1 / -1;
}

.modern-input input,
.modern-input textarea {
    width: 100%;

    padding: 16px 15px 8px 42px;

    border: 1px solid #e2e9ee;

    border-radius: 7px;

    outline: none;

    resize: vertical;

    color: #173850;

    background: #fbfcfd;

    font-size: 9px;

    transition: .3s ease;
}

.modern-input input {
    height: 55px;
}

.modern-input textarea {
    min-height: 125px;
}

.modern-input i {
    position: absolute;

    z-index: 2;

    left: 15px;
    top: 20px;

    color: #1475d1;

    font-size: 11px;
}

.modern-input label {
    position: absolute;

    left: 42px;
    top: 19px;

    color: #8a9aa5;

    font-size: 9px;

    pointer-events: none;

    transition: .2s ease;
}


/* Floating label */

.modern-input input:focus,
.modern-input textarea:focus {
    border-color: #1475d1;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(20,117,209,.07);
}

.modern-input input:focus ~ label,
.modern-input input:not(:placeholder-shown) ~ label,
.modern-input textarea:focus ~ label,
.modern-input textarea:not(:placeholder-shown) ~ label {
    top: 7px;

    color: #1475d1;

    font-size: 6px;

    font-weight: 700;
}


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

.modern-contact-btn {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    min-width: 155px;

    margin-top: 24px;

    padding: 13px 14px 13px 20px;

    border: 0;

    border-radius: 6px;

    color: #fff;

    background: #e45724;

    cursor: pointer;

    font-size: 8px;

    font-weight: 600;

    transition: .3s ease;
}

.modern-contact-btn i {
    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

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

    font-size: 8px;

    transition: .3s ease;
}

.modern-contact-btn:hover {
    background: #1475d1;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(20,117,209,.18);
}

.modern-contact-btn:hover i {
    transform: translateX(3px);
}


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

@media (max-width: 991px) {

    .contact-modern {
        padding: 70px 0;
    }

    .contact-modern-grid {
        grid-template-columns: 1fr;
    }

    .contact-panel {
        padding: 40px;
    }

    .contact-form-modern {
        padding: 40px;
    }

}


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

@media (max-width: 767px) {

    .contact-modern {
        padding: 55px 0;
    }

    .contact-panel {
        padding: 35px 25px;
    }

    .contact-form-modern {
        padding: 35px 25px;
    }

    .contact-panel h2 {
        font-size: 30px;
    }

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

    .modern-input.full {
        grid-column: auto;
    }

}


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

@media (max-width: 480px) {

    .contact-panel h2 {
        font-size: 27px;
    }

    .form-heading h3 {
        font-size: 23px;
    }

    .contact-social {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

}


/* =========================================================
   OFFICE LOCATIONS
========================================================= */

.office-modern {
    position: relative;

    padding: 85px 0;

    background: #f6f9fc;

    overflow: hidden;
}

.office-modern::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -240px;
    top: -230px;

    border-radius: 50%;

    border: 70px solid rgba(20,117,209,.035);
}


/* =========================================================
   HEADING
========================================================= */

.office-heading {
    position: relative;

    max-width: 700px;

    margin: 0 auto 45px;
}

.office-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #e45724;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.office-heading > span i {
    font-size: 11px;
}

.office-heading h2 {
    margin: 12px 0;

    color: #102f47;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 700;
}

.office-heading h2 strong {
    color: #d51e25;
}

.office-heading p {
    margin: 0;

    color: #7c8d99;

    font-size: 9px;

    line-height: 1.8;
}


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

.office-grid {
    position: relative;

    display: grid;

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

    gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.office-card-modern {
    position: relative;

    padding: 28px;

    min-height: 360px;

    border: 1px solid #e1e9ef;

    border-radius: 15px;

    background: #fff;

    overflow: hidden;

    transition: all .35s ease;
}

.office-card-modern::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

    background: #f3f7fa;

    transition: .35s ease;
}

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

    border-color: #1475d1;

    box-shadow:
        0 20px 45px rgba(16,47,71,.10);
}

.office-card-modern:hover::after {
    background: #edf5fd;
}


/* =========================================================
   TOP
========================================================= */

.office-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.office-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 11px;

    color: #1475d1;

    background: #edf5fd;

    font-size: 17px;

    transition: .3s ease;
}

.office-card-modern:hover .office-icon {
    color: #fff;

    background: #1475d1;

    transform: rotate(-4deg);
}

.office-number {
    color: #dce4e9;

    font-size: 25px;

    font-weight: 700;
}


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

.office-type {
    position: relative;

    z-index: 2;

    display: block;

    margin-top: 25px;

    color: #e45724;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.office-card-modern h3 {
    position: relative;

    z-index: 2;

    margin: 7px 0 13px;

    color: #173850;

    font-size: 21px;

    font-weight: 700;
}

.office-line {
    position: relative;

    z-index: 2;

    width: 35px;

    height: 2px;

    margin-bottom: 18px;

    background: #e45724;
}

.office-card-modern p {
    position: relative;

    z-index: 2;

    min-height: 100px;

    margin: 0;

    color: #788b98;

    font-size: 9px;

    line-height: 1.85;
}


/* =========================================================
   PHONE
========================================================= */

.office-phone {
    position: absolute;

    z-index: 3;

    left: 28px;
    right: 28px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding-top: 15px;

    border-top: 1px solid #edf1f4;

    color: #173850 !important;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;
}

.office-phone > i:first-child {
    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 7px;

    color: #fff;

    background: #1475d1;

    font-size: 8px;
}

.office-phone > i:last-child {
    margin-left: auto;

    color: #e45724;

    font-size: 8px;

    transition: .3s ease;
}

.office-phone:hover > i:last-child {
    transform: translateX(4px);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.office-bottom {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 17px 20px;

    border-radius: 10px;

    background: #102f47;
}

.office-bottom-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    flex: 0 0 42px;

    border-radius: 8px;

    color: #ff7048;

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

    font-size: 14px;
}

.office-bottom strong {
    display: block;

    color: #fff;

    font-size: 10px;
}

.office-bottom span {
    display: block;

    margin-top: 3px;

    color: #9db3c1;

    font-size: 7px;
}

.office-bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;

    padding: 10px 15px;

    border-radius: 5px;

    color: #fff !important;

    background: #e45724;

    text-decoration: none !important;

    font-size: 7px;

    font-weight: 600;

    transition: .3s ease;
}

.office-bottom > a:hover {
    background: #1475d1;
}


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

@media (max-width: 991px) {

    .office-grid {
        grid-template-columns: 1fr 1fr;
    }

    .office-card-modern:last-child {
        grid-column: 1 / -1;

        max-width: calc(50% - 10px);

        margin: auto;
    }

}


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

@media (max-width: 767px) {

    .office-modern {
        padding: 60px 0;
    }

    .office-heading h2 {
        font-size: 31px;
    }

    .office-grid {
        grid-template-columns: 1fr;
    }

    .office-card-modern:last-child {
        grid-column: auto;

        max-width: none;
    }

    .office-bottom {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .office-bottom > a {
        width: 100%;

        justify-content: center;

        margin-left: 0;
    }

}


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

@media (max-width: 480px) {

    .office-heading h2 {
        font-size: 27px;
    }

    .office-card-modern {
        padding: 23px;
    }

    .office-phone {
        left: 23px;
        right: 23px;
    }

}


/* =========================================================
   LOCATION MAP
========================================================= */

.location-map-section {
    position: relative;

    padding: 80px 0;

    background: #f6f9fc;
}


/* =========================================================
   HEADING
========================================================= */

.map-header {
    max-width: 700px;

    margin: 0 auto 35px;

    text-align: center;
}

.map-header > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #e45724;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.6px;
}

.map-header > span i {
    font-size: 11px;
}

.map-header h2 {
    margin: 10px 0;

    color: #102f47;

    font-size: 38px;

    line-height: 1.2;

    font-weight: 700;
}

.map-header h2 strong {
    color: #d51e25;
}

.map-header p {
    margin: 0;

    color: #7d8d98;

    font-size: 9px;

    line-height: 1.8;
}


/* =========================================================
   MAP WRAPPER
========================================================= */

.map-wrapper {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 20px 55px rgba(16,47,71,.10);
}


/* =========================================================
   MAP
========================================================= */

.map-area {
    width: 100%;

    height: 470px;

    overflow: hidden;
}

.map-area iframe {
    width: 100%;

    height: 100%;

    display: block;

    border: 0;

    filter: saturate(.85);

}


/* =========================================================
   ADDRESS CARD
========================================================= */

.map-address-card {
    position: absolute;

    z-index: 5;

    left: 30px;

    top: 30px;

    width: 300px;

    padding: 22px;

    display: flex;

    gap: 13px;

    border-radius: 12px;

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

    box-shadow:
        0 15px 40px rgba(16,47,71,.18);

    backdrop-filter: blur(8px);

    border-left: 4px solid #e45724;
}


/* Icon */

.map-address-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    flex: 0 0 40px;

    border-radius: 9px;

    color: #fff;

    background: #1475d1;

    font-size: 12px;
}


/* Content */

.map-address-content > span {
    display: block;

    margin-bottom: 5px;

    color: #e45724;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.map-address-content h4 {
    margin: 0 0 8px;

    color: #173850;

    font-size: 15px;

    font-weight: 700;
}

.map-address-content p {
    margin: 0;

    color: #71838f;

    font-size: 8px;

    line-height: 1.7;
}


/* Directions */

.map-address-content a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color: #1475d1 !important;

    text-decoration: none !important;

    font-size: 7px;

    font-weight: 700;
}

.map-address-content a i {
    font-size: 7px;

    transition: .25s ease;
}

.map-address-content a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   HOVER
========================================================= */

.map-wrapper:hover .map-address-card {
    transform: translateY(-3px);

    box-shadow:
        0 20px 45px rgba(16,47,71,.20);
}

.map-address-card {
    transition: .3s ease;
}


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

@media (max-width: 767px) {

    .location-map-section {
        padding: 60px 0;
    }

    .map-header h2 {
        font-size: 30px;
    }

    .map-wrapper {
        min-height: 520px;
    }

    .map-area {
        height: 520px;
    }

    .map-address-card {
        left: 15px;

        top: 15px;

        width: calc(100% - 30px);
    }

}


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

@media (max-width: 480px) {

    .map-header h2 {
        font-size: 26px;
    }

    .map-header p {
        font-size: 8px;
    }

    .map-wrapper {
        border-radius: 12px;
    }

    .map-area {
        height: 500px;
    }

    .map-address-card {
        padding: 17px;
    }

}




/* =========================================================
   HERO SLIDER - PREMIUM DESIGN
========================================================= */

.hero-slide {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}


/* =========================================================
   SWIPER
========================================================= */

.heroSwiper {
    width: 100%;
    height: 650px;
}

.heroSwiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.heroSwiper .swiper-slide > .hero-slide {
    height: 100%;
    width: 100%;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: center;

    transform: scale(1);
    transition: transform 7s ease;
}


/* Ken Burns Zoom Effect */

.heroSwiper .swiper-slide-active > .hero-slide {
    transform: scale(1.07);
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.hero-slide .overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5,25,40,.72) 0%,
            rgba(5,25,40,.38) 45%,
            rgba(5,25,40,.08) 100%
        );
}


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

.hero-slide .container {
    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    align-items: center;
}


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

.hero-content {
    position: relative;

    max-width: 700px;

    padding-top: 20px;
}


/* =========================================================
   OPTIONAL TEXT
========================================================= */

.hero-content span {
    display: inline-block;

    margin-bottom: 14px;

    padding: 7px 14px;

    border-radius: 30px;

    color: #fff;

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

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

    backdrop-filter: blur(5px);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.hero-content h1 {
    margin: 0 0 25px;

    color: #fff;

    font-size: clamp(38px, 5vw, 68px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -.8px;
}


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

.hero-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 24px;

    border-radius: 5px;

    color: #fff !important;

    background: #e45724;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 600;

    transition: all .3s ease;
}

.hero-btn:hover {
    color: #fff !important;

    background: #1475d1;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(20,117,209,.25);
}


/* =========================================================
   SLIDE TEXT ANIMATION
========================================================= */

.heroSwiper .swiper-slide .hero-content {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease .2s,
        transform .8s ease .2s;
}

.heroSwiper .swiper-slide-active .hero-content {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   NAVIGATION ARROWS
========================================================= */

.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev {
    width: 48px;
    height: 48px;

    top: 50%;

    margin-top: -24px;

    border-radius: 50%;

    color: #fff;

    background: rgba(10,35,50,.45);

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

    backdrop-filter: blur(6px);

    transition: all .3s ease;
}

.heroSwiper .swiper-button-next {
    right: 30px;
}

.heroSwiper .swiper-button-prev {
    left: 30px;
}


/* Arrow Icon */

.heroSwiper .swiper-button-next::after,
.heroSwiper .swiper-button-prev::after {
    font-size: 14px;

    font-weight: 700;
}


/* Hover */

.heroSwiper .swiper-button-next:hover,
.heroSwiper .swiper-button-prev:hover {
    color: #fff;

    background: #e45724;

    border-color: #e45724;

    transform: scale(1.08);
}


/* =========================================================
   PAGINATION
========================================================= */

.heroSwiper .swiper-pagination {
    bottom: 25px;

    z-index: 10;
}

.heroSwiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;

    margin: 0 5px !important;

    opacity: .55;

    background: #fff;

    transition: all .3s ease;
}

.heroSwiper .swiper-pagination-bullet-active {
    width: 27px;

    border-radius: 10px;

    opacity: 1;

    background: #e45724;
}


/* =========================================================
   BOTTOM GRADIENT
========================================================= */

.heroSwiper::after {
    content: "";

    position: absolute;

    z-index: 4;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 90px;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.25),
            transparent
        );
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1400px) {

    .hero-slide,
    .heroSwiper,
    .heroSwiper .swiper-slide {
        height: 700px;
    }

}


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

@media (max-width: 991px) {

    .hero-slide,
    .heroSwiper,
    .heroSwiper .swiper-slide {
        height: 560px;
    }

    .hero-content {
        max-width: 600px;
    }

    .heroSwiper .swiper-button-next {
        right: 18px;
    }

    .heroSwiper .swiper-button-prev {
        left: 18px;
    }

}


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

@media (max-width: 767px) {

    .hero-slide,
    .heroSwiper,
    .heroSwiper .swiper-slide {
        height: 500px;
    }

    .hero-slide .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 36px;

        line-height: 1.12;
    }

    .hero-content span {
        font-size: 8px;

        padding: 6px 11px;
    }

    .hero-btn {
        padding: 11px 19px;

        font-size: 9px;
    }

    .heroSwiper .swiper-button-next,
    .heroSwiper .swiper-button-prev {
        width: 38px;
        height: 38px;

        margin-top: -19px;
    }

    .heroSwiper .swiper-button-next {
        right: 12px;
    }

    .heroSwiper .swiper-button-prev {
        left: 12px;
    }

    .heroSwiper .swiper-button-next::after,
    .heroSwiper .swiper-button-prev::after {
        font-size: 11px;
    }

    .heroSwiper .swiper-pagination {
        bottom: 17px;
    }

}


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

@media (max-width: 480px) {

    .hero-slide,
    .heroSwiper,
    .heroSwiper .swiper-slide {
        height: 460px;
    }

    .hero-content h1 {
        font-size: 31px;
    }

    .heroSwiper .swiper-button-next,
    .heroSwiper .swiper-button-prev {
        display: none;
    }

}


/* =========================================================
   EXPRESS WORLDWIDE - PROFESSIONAL HEADER
========================================================= */

.ew-header {
    width: 100%;
    position: relative;
    z-index: 99999;
    font-family: "Poppins", sans-serif;
}


/* =========================================================
   TOP BAR
========================================================= */

.ew-topbar {
    width: 100%;
    background: #071a2b;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ew-topbar-inner {
    width: 100%;
    min-height: 42px;
    padding: 0 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ew-contact {
    display: flex;
    align-items: center;
    gap: 30px;
}

.ew-contact a,
.ew-location {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #dbe7f2 !important;
    text-decoration: none !important;

    font-size: 12px;
    font-weight: 400;

    white-space: nowrap;
}

.ew-contact i {
    color: #ff5722;
    font-size: 12px;
}

.ew-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ew-social a {
    width: 29px;
    height: 29px;

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

    color: #ffffff !important;
    text-decoration: none !important;

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

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

    transition: .25s ease;
}

.ew-social a:hover {
    background: #1677e8;
    border-color: #1677e8;
    transform: translateY(-2px);
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.ew-navbar {
    width: 100%;
    background: #ffffff;

    border-bottom: 1px solid #e9edf2;

    box-shadow: 0 4px 18px rgba(10,30,50,.06);
}

.ew-nav-inner {
    width: 100%;
    min-height: 82px;

    padding: 0 35px;

    display: flex;
    align-items: center;

    position: relative;
}


/* =========================================================
   LOGO
========================================================= */

.ew-logo {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    height: 82px;

    text-decoration: none !important;
}

.ew-logo img {
    width: 185px;
    max-width: 185px;
    height: auto;

    display: block;
}


/* =========================================================
   NAVIGATION
========================================================= */

.ew-navigation {
    margin-left: auto;
}

.ew-menu {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    align-items: center;
    gap: 3px;
}

.ew-menu > li {
    position: relative;
    list-style: none;
}

.ew-menu > li > a {
    min-height: 82px;

    padding: 0 17px;

    display: flex;
    align-items: center;

    color: #172333 !important;

    font-size: 15px;
    font-weight: 500;

    letter-spacing: .1px;

    text-decoration: none !important;

    white-space: nowrap;

    transition: .25s ease;
}

.ew-menu > li > a:hover {
    color: #1677e8 !important;
}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.ew-dropdown-link {
    gap: 8px;
}

.ew-dropdown-link i {
    font-size: 9px;
    color: #6d7782;

    transition: .25s ease;
}

.ew-has-dropdown:hover > .ew-dropdown-link i {
    transform: rotate(180deg);
    color: #1677e8;
}


/* =========================================================
   DESKTOP DROPDOWN
========================================================= */

.ew-dropdown {
    position: absolute;

    top: calc(100% + 2px);
    left: 8px;

    width: 230px;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e8edf2;

    border-radius: 8px;

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;

    z-index: 100000;
}

.ew-has-dropdown:hover > .ew-dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.ew-dropdown li {
    width: 100%;
    list-style: none;
}

.ew-dropdown li a {
    min-height: 43px;

    padding: 0 18px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: #344252 !important;

    font-size: 13px;
    font-weight: 400;

    text-decoration: none !important;

    transition: .2s ease;
}

.ew-dropdown li a i {
    width: 17px;

    color: #1677e8;

    font-size: 12px;
}

.ew-dropdown li a:hover {
    color: #1677e8 !important;

    background: #f4f8fc;

    padding-left: 23px;
}


/* =========================================================
   TRACK BUTTON
========================================================= */

.ew-track-btn {
    margin-left: 22px;

    min-width: 105px;
    height: 48px;

    padding: 0 20px;

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

    gap: 8px;

    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #1677e8,
        #075fd1
    );

    border-radius: 5px;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 7px 18px rgba(22,119,232,.20);

    transition: .25s ease;
}

.ew-track-btn:hover {
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(22,119,232,.30);
}

.ew-track-btn i {
    font-size: 13px;
}


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

.ew-mobile-toggle {
    display: none;

    width: 46px;
    height: 44px;

    margin-left: auto;

    padding: 0;

    border: 0;
    border-radius: 5px;

    background: #17165c;

    cursor: pointer;

    position: relative;

    z-index: 100002;
}

.ew-mobile-toggle span {
    position: absolute;

    left: 12px;

    width: 22px;
    height: 2px;

    background: #ffffff;

    border-radius: 5px;

    transition: .25s ease;
}

.ew-mobile-toggle span:nth-child(1) {
    top: 13px;
}

.ew-mobile-toggle span:nth-child(2) {
    top: 21px;
}

.ew-mobile-toggle span:nth-child(3) {
    top: 29px;
}


/* CLOSE ICON */

.ew-mobile-toggle.active span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.ew-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.ew-mobile-toggle.active span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}


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

@media (max-width: 991px) {

    .ew-topbar-inner {
        min-height: 38px;
        padding: 0 12px;
    }

    .ew-topbar {
        height: 38px;
    }

    .ew-contact {
        gap: 15px;
        width: 100%;
        overflow: hidden;
    }

    .ew-contact a,
    .ew-location {
        font-size: 9px;
    }

    .ew-location {
        display: none;
    }

    .ew-social {
        display: none;
    }


    /* NAV */

    .ew-nav-inner {
        min-height: 76px;
        height: 76px;

        padding: 0 15px;
    }

    .ew-logo {
        height: 76px;
    }

    .ew-logo img {
        width: 175px;
        max-width: 175px;
    }


    /* Hide desktop nav */

    .ew-navigation {
        display: none;

        position: absolute;

        top: 76px;
        left: 0;
        right: 0;

        width: 100%;

        margin: 0;

        background: #ffffff;

        border-top: 2px solid #ff5722;

        border-bottom: 1px solid #e3e8ed;

        box-shadow:
            0 18px 35px rgba(0,0,0,.15);

        max-height: calc(100vh - 114px);

        overflow-y: auto;

        z-index: 100001;
    }

    .ew-navigation.open {
        display: block;
    }


    /* MENU */

    .ew-menu {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .ew-menu > li {
        display: block;
        width: 100%;
    }

    .ew-menu > li > a {
        min-height: 52px;
        height: 52px;

        width: 100%;

        padding: 0 22px;

        display: flex;
        align-items: center;

        font-size: 14px;

        color: #253242 !important;

        border-bottom: 1px solid #edf0f3;

        background: #ffffff;
    }

    .ew-menu > li > a:hover {
        background: #f7faff;
    }


    /* MOBILE ARROW */

    .ew-dropdown-link {
        justify-content: space-between;
    }

    .ew-dropdown-link i {
        width: 30px;
        height: 30px;

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

        font-size: 11px;

        background: #f1f5f9;

        border-radius: 50%;
    }

    .ew-has-dropdown.open > .ew-dropdown-link i {
        transform: rotate(180deg);

        color: #ff5722;
    }


    /* MOBILE DROPDOWN */

    .ew-dropdown {
        position: static;

        display: none;

        width: 100%;

        margin: 0;
        padding: 0;

        opacity: 1;
        visibility: visible;

        transform: none;

        border: 0;

        border-left: 3px solid #1677e8;

        border-radius: 0;

        box-shadow: none;

        background: #f7f9fb;
    }

    .ew-has-dropdown.open > .ew-dropdown {
        display: block;
    }

    .ew-dropdown li a {
        min-height: 45px;

        padding: 0 40px;

        font-size: 13px;

        border-bottom: 1px solid #e5eaee;
    }

    .ew-dropdown li a:hover {
        padding-left: 45px;
    }


    /* TRACK BUTTON */

    .ew-track-btn {
        display: none;
    }


    /* MOBILE TOGGLE */

    .ew-mobile-toggle {
        display: flex;
    }

}


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

@media (max-width: 575px) {

    .ew-nav-inner {
        height: 72px;
        min-height: 72px;

        padding: 0 12px;
    }

    .ew-logo {
        height: 72px;
    }

    .ew-logo img {
        width: 165px;
        max-width: 165px;
    }

    .ew-mobile-toggle {
        width: 44px;
        height: 42px;
    }

    .ew-navigation {
        top: 72px;
    }

}



/* =========================================================
   LOGO SIZE - FINAL OVERRIDE
========================================================= */

.ew-logo img {
    width: 235px !important;
    max-width: 235px !important;
    height: auto !important;
    display: block !important;
}

.ew-logo {
    height: 88px !important;
    display: flex !important;
    align-items: center !important;
}


/* Desktop Navbar */
.ew-nav-inner {
    min-height: 88px !important;
}


/* Mobile */
@media (max-width: 991px) {

    .ew-nav-inner {
        height: 82px !important;
        min-height: 82px !important;
    }

    .ew-logo {
        height: 82px !important;
    }

    .ew-logo img {
        width: 220px !important;
        max-width: 220px !important;
    }

    .ew-navigation {
        top: 82px !important;
    }
}


/* Small Mobile */
@media (max-width: 575px) {

    .ew-nav-inner {
        height: 78px !important;
        min-height: 78px !important;
    }

    .ew-logo {
        height: 78px !important;
    }

    .ew-logo img {
        width: 205px !important;
        max-width: 205px !important;
    }

    .ew-navigation {
        top: 78px !important;
    }
}


/* =========================================================
   PROFESSIONAL TRACK BUTTON
========================================================= */

.ew-track-btn {
    position: relative !important;

    min-width: 125px !important;
    height: 48px !important;

    padding: 0 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #0d6efd 0%,
        #0756c9 100%
    ) !important;

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

    border-radius: 7px !important;

    text-decoration: none !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 6px 18px rgba(13,110,253,.22) !important;

    overflow: hidden !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease !important;
}


/* Icon */

.ew-track-btn i {
    font-size: 14px !important;

    color: #ffffff !important;

    transition: transform .25s ease !important;
}


/* Shine Effect */

.ew-track-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );

    transform: skewX(-20deg);

    transition: left .55s ease;
}


/* Hover */

.ew-track-btn:hover {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #0756c9 0%,
        #0044aa 100%
    ) !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 25px rgba(13,110,253,.35) !important;
}

.ew-track-btn:hover::before {
    left: 130%;
}

.ew-track-btn:hover i {
    transform: translateX(3px);
}


/* Active */

.ew-track-btn:active {
    transform: translateY(0) !important;

    box-shadow:
        0 4px 10px rgba(13,110,253,.25) !important;
}


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

@media (max-width: 991px) {

    .ew-track-btn {
        display: none !important;
    }

}



/* About Dropdown Icons */

.ew-dropdown li a i {
    width: 22px !important;

    min-width: 22px !important;

    color: #1677e8 !important;

    font-size: 13px !important;

    text-align: center !important;

    transition: .25s ease !important;
}

.ew-dropdown li a span {
    transition: .25s ease !important;
}

.ew-dropdown li a:hover i {
    color: #ff5722 !important;

    transform: translateX(2px);
}

.ew-dropdown li a:hover span {
    color: #1677e8 !important;
}




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

.footer {
    position: relative;
    width: 100%;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(37, 99, 235, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #071827 0%,
            #0a2038 45%,
            #061521 100%
        );

    color: #cbd5e1;
    overflow: hidden;
}


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

.footer-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 70px 40px 55px;

    display: grid;

    grid-template-columns:
        minmax(320px, 1.45fr)
        minmax(190px, 0.85fr)
        minmax(190px, 0.85fr)
        minmax(280px, 1.1fr);

    gap: 28px;

    align-items: stretch;
}


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

.footer-box {
    position: relative;

    min-width: 0;

    padding: 30px 30px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 58, 102, 0.90),
            rgba(12, 39, 68, 0.92)
        );

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    overflow: hidden;

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


/* subtle card glow */

.footer-box::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -110px;
    right: -80px;

    background: rgba(37, 99, 235, 0.18);

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}


/* hover */

.footer-box:hover {
    transform: translateY(-4px);

    border-color: rgba(59, 130, 246, 0.28);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.30),
        0 0 30px rgba(37, 99, 235, 0.06);
}


/* =========================================================
   COMPANY LOGO
========================================================= */

.footer-box .footer-logo {
    position: relative;
    z-index: 2;

    display: block;

    width: 190px;
    max-width: 100%;

    height: auto;

    object-fit: contain;

    margin: 0 0 25px;

    filter:
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
}


/* =========================================================
   HEADINGS
========================================================= */

.footer-box h3.white,
.footer-box h4.white {
    position: relative;
    z-index: 2;

    color: #ffffff;

    margin-top: 0;

    font-weight: 700;
}


/* Company heading */

.footer-box h3.white {
    margin-bottom: 17px;

    font-size: 21px;

    line-height: 1.45;

    letter-spacing: 0.2px;
}


/* Other headings */

.footer-box h4.white {
    margin-bottom: 28px;

    font-size: 17px;

    line-height: 1.3;

    position: relative;
}


/* Orange heading underline */

.footer-box h4.white::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -12px;

    width: 38px;
    height: 3px;

    border-radius: 10px;

    background: #ff4b23;
}


/* small second line */

.footer-box h4.white::before {
    content: "";

    position: absolute;

    left: 43px;
    bottom: -12px;

    width: 20px;
    height: 3px;

    border-radius: 10px;

    background: rgba(255, 75, 35, 0.35);
}


/* =========================================================
   COMPANY DESCRIPTION
========================================================= */

.footer-box > p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #aebfd1;

    font-size: 13.5px;

    line-height: 1.9;
}


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

.footer-box .contact {
    position: relative;
    z-index: 2;

    margin-top: 27px;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.footer-box .contact p {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin: 0 0 17px;

    color: #b9c9d8;

    font-size: 13px;

    line-height: 1.65;
}


.footer-box .contact p:last-child {
    margin-bottom: 0;
}


/* Contact icons */

.footer-box .contact i {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

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

    margin-top: 1px;

    border-radius: 9px;

    background: rgba(37, 99, 235, 0.14);

    border: 1px solid rgba(96, 165, 250, 0.16);

    color: #60a5fa;

    font-size: 13px;

    transition: all 0.25s ease;
}


.footer-box .contact p:hover i {
    background: #2563eb;

    color: #ffffff;

    transform: translateY(-2px);
}


.footer-box .contact span {
    padding-top: 5px;
}


/* =========================================================
   LISTS
========================================================= */

.footer-box ul {
    position: relative;
    z-index: 2;

    list-style: none;

    margin: 0;
    padding: 0;
}


.footer-box ul li {
    margin: 0 0 15px;
}


.footer-box ul li:last-child {
    margin-bottom: 0;
}


.footer-box ul li a {
    position: relative;

    display: inline-flex;

    align-items: center;

    color: #9fb3c8;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* orange arrow */

.footer-box ul li a::before {
    content: "›";

    display: inline-flex;

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

    width: 16px;

    margin-right: 4px;

    color: #ff542b;

    font-size: 18px;

    font-weight: 600;

    transition: transform 0.25s ease;
}


.footer-box ul li a:hover {
    color: #ffffff;

    transform: translateX(4px);
}


.footer-box ul li a:hover::before {
    transform: translateX(3px);
}


/* =========================================================
   NEWSLETTER
========================================================= */

.footer-box .newsletter {
    position: relative;
    z-index: 2;

    margin-top: 24px;

    padding: 7px;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 11px;
}


/* input */

.footer-box .newsletter input {
    width: 100%;

    height: 48px;

    padding: 0 14px;

    border: 0;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 13px;
}


.footer-box .newsletter input::placeholder {
    color: #7890a7;
}


.footer-box .newsletter input:focus {
    color: #ffffff;
}


/* button */

.footer-box .newsletter button {
    width: 100%;

    height: 43px;

    margin-top: 5px;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #ff542b,
            #e92929
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(239, 68, 68, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.footer-box .newsletter button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(239, 68, 68, 0.30);
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-box .social {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 9px;

    margin-top: 22px;
}


.footer-box .social a {
    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #9fb3c8;

    text-decoration: none;

    transition: all 0.25s ease;
}


.footer-box .social a:hover {
    background: #2563eb;

    color: #ffffff;

    transform: translateY(-3px);
}


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

.footer-bottom {
    position: relative;
    z-index: 3;

    max-width: 1400px;

    margin: 0 auto;

    padding: 22px 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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

    color: #71859a;

    font-size: 12px;
}


.footer-bottom p {
    margin: 0;
}


.footer-bottom a {
    color: #60a5fa;

    text-decoration: none;

    font-weight: 600;

    transition: color 0.2s ease;
}


.footer-bottom a:hover {
    color: #ffffff;
}


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

@media (max-width: 1100px) {

    .footer-container {
        grid-template-columns:
            1.3fr
            1fr
            1fr;

        padding: 55px 25px 45px;
    }

    .footer-box:last-child {
        grid-column: span 3;
    }

}


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

@media (max-width: 768px) {

    .footer-container {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 45px 18px 35px;
    }


    .footer-box {
        padding: 25px 22px;
    }


    .footer-box:last-child {
        grid-column: auto;
    }


    .footer-box .footer-logo {
        width: 175px;
    }


    .footer-box h3.white {
        font-size: 19px;
    }


    .footer-bottom {
        flex-direction: column;

        text-align: center;

        padding: 20px 18px;

        gap: 8px;
    }

}


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

@media (max-width: 480px) {

    .footer-container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .footer-box {
        padding: 23px 18px;
    }


    .footer-box .footer-logo {
        width: 160px;
    }


    .footer-box h3.white {
        font-size: 18px;
    }


    .footer-box > p {
        font-size: 13px;
    }


    .footer-box ul li a {
        font-size: 13px;
    }

}