/* 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;
}


/* =========================prapati courier ===================================== */


/* =========================================
   MODERN TOP BAR
========================================= */

.top-bar {
    position: relative;
    background: #072556;
    color: #ffffff;
    min-height: 42px;
    display: flex;
    align-items: center;
    overflow: hidden;
}


/* Subtle red/orange accent */

.top-bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #d71920,
        #f47b20
    );
}


/* Contact */

.top-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


.top-contact li {
    position: relative;

    display: flex;
    align-items: center;

    padding: 0 22px;

    min-height: 42px;

    color: #e9eef7;

    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    font-weight: 400;

    white-space: nowrap;
}


/* Vertical separator */

.top-contact li:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 11px;

    width: 1px;
    height: 20px;

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


/* Icons */

.top-contact li i {
    margin-right: 8px;

    color: #f15a24;

    font-size: 12px;

    transition: all .25s ease;
}


.top-contact li:hover i {
    color: #ffffff;
    transform: translateY(-1px);
}


/* Text hover */

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


/* =========================================
   SOCIAL AREA
========================================= */

.top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    height: 42px;
}


.social-icons {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* Social Button */

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

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

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

    border-radius: 50%;

    color: #ffffff;

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

    font-size: 11px;

    text-decoration: none;

    transition:
        all .25s ease;
}


/* Facebook */

.social-icons a:first-child:hover {
    background: #1877f2;
    border-color: #1877f2;

    transform: translateY(-2px);
}


/* Instagram */

.social-icons a:last-child:hover {
    background: linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );

    border-color: transparent;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

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

    .top-contact li {
        padding: 0 12px;
    }

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

}


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

@media (max-width: 767px) {

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

    .top-contact {
        justify-content: center;
        gap: 4px 0;
    }

    .top-contact li {
        min-height: 28px;
        padding: 0 9px;

        font-size: 11px;
    }

    .top-contact li:not(:last-child)::after {
        top: 5px;
        height: 18px;
    }

    .top-contact li i {
        font-size: 10px;
        margin-right: 5px;
    }

    .top-right {
        height: 32px;
        margin-top: 3px;
    }

}



/* ==============================
   FORCE LOGO SIZE
================================ */

.header-style2 .navbar-header-custom {
    width: 180px !important;
    max-width: 180px !important;
    height: 90px !important;

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


.header-style2 .navbar-header-custom .navbar-brand {
    width: 180px !important;
    max-width: 180px !important;

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


.header-style2 .navbar-header-custom .responsive-logo {
    width: 160px !important;
    max-width: 160px !important;

    height: auto !important;
    max-height: none !important;

    min-width: 160px !important;

    object-fit: contain !important;
    display: block !important;
}


/* ===== TOP BAR - CLEAN PROFESSIONAL ===== */

.header-style2 .top-bar {
    background: #092858 !important;
    min-height: 38px !important;
    padding: 0 !important;
}

.header-style2 .top-contact {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    gap: 0 !important;
}

.header-style2 .top-contact li {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;

    padding: 0 18px !important;

    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;

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

.header-style2 .top-contact li:first-child {
    padding-left: 5px !important;
}

.header-style2 .top-contact li i {
    color: #f15a24 !important;
    font-size: 11px !important;
    margin-right: 8px !important;
}

/* SOCIAL */

.header-style2 .top-right {
    height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.header-style2 .social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.header-style2 .social-icons a {
    width: 26px !important;
    height: 26px !important;

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

    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 50% !important;

    background: transparent !important;
    color: #ffffff !important;

    font-size: 11px !important;

    transition: .2s ease !important;
}

.header-style2 .social-icons a:hover {
    background: #d71920 !important;
    border-color: #d71920 !important;
}


/* MOBILE */

@media (max-width: 991px) {

    .header-style2 .top-contact {
        justify-content: center !important;
        height: auto !important;
    }

    .header-style2 .top-contact li {
        padding: 0 9px !important;
        font-size: 11px !important;
    }

    .header-style2 .top-right {
        justify-content: center !important;
    }
}



/* =========================================
   TRACKING BUTTON - PREMIUM LOOK
========================================= */

.header-style2 .attr-nav {
    display: flex !important;
    align-items: center !important;
    margin-left: 20px !important;
}

.header-style2 .attr-nav > ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header-style2 .attr-nav > ul > li {
    margin: 0 !important;
}


/* BUTTON */

.header-style2 .attr-nav .butn {
    position: relative;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 125px !important;
    height: 42px !important;

    padding: 0 20px !important;

    background: #0b2d63 !important;

    border: 1px solid #174a91 !important;
    border-radius: 6px !important;

    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    letter-spacing: .2px !important;

    box-shadow: 0 4px 12px rgba(11,45,99,.18) !important;

    overflow: hidden;

    transition: all .3s ease !important;
}


/* ORANGE ACCENT */

.header-style2 .attr-nav .butn::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #f15a24;
}


/* ICON */

.header-style2 .attr-nav .butn i {
    margin-right: 8px !important;

    color: #f15a24 !important;

    font-size: 13px !important;

    transition: all .3s ease;
}


/* HOVER */

.header-style2 .attr-nav .butn:hover {
    background: #d71920 !important;

    border-color: #d71920 !important;

    transform: translateY(-2px);

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


.header-style2 .attr-nav .butn:hover i {
    color: #ffffff !important;
}




/* ==========================about us =================================== */



/* =========================================
   PRAJAPATI ABOUT SECTION
========================================= */

.prajapati-about {
    position: relative;
    padding: 90px 0;
    background: #f8fafc;
    overflow: hidden;
}


/* Soft background shape */

.prajapati-about::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;

    left: -250px;
    top: -180px;

    background: #eaf1fb;
    border-radius: 50%;

    z-index: 0;
}


.prajapati-about .container {
    position: relative;
    z-index: 1;
}


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

.about-visual {
    position: relative;
    padding: 15px 30px 35px 0;
}


.about-image-main {
    position: relative;
    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 20px 45px rgba(7, 38, 82, .18);
}


.about-image-main::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(7, 42, 91, .04),
            rgba(215, 25, 32, .08)
        );

    pointer-events: none;
}


.about-image-main img {
    width: 100%;
    height: 550px;

    object-fit: cover;

    display: block;

    transition: transform .6s ease;
}


.about-image-main:hover img {
    transform: scale(1.04);
}


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

.experience-card {
    position: absolute;

    left: -5px;
    bottom: 0;

    width: 175px;
    min-height: 125px;

    padding: 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: #0b2d63;

    border-radius: 15px;

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(11, 45, 99, .28);

    border-left: 5px solid #d71920;
}


.experience-card strong {
    font-size: 42px;
    line-height: 1;

    color: #ffffff;

    font-weight: 700;
}


.experience-card span {
    font-size: 12px;
    line-height: 1.5;

    color: #dce7f8;

    font-weight: 500;
}


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

.service-badge {
    position: absolute;

    right: 0;
    top: 45px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;

    background: #ffffff;

    border-radius: 12px;

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

    z-index: 2;
}


.badge-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 10px;

    background: #fff1ed;

    color: #d71920;

    font-size: 18px;
}


.service-badge strong {
    display: block;

    color: #102b54;

    font-size: 13px;
}


.service-badge small {
    display: block;

    margin-top: 3px;

    color: #7a8493;

    font-size: 10px;
}


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

.about-content {
    padding-left: 35px;
}


.about-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: #d71920;

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

    letter-spacing: 1.5px;
}


.about-label span {
    width: 30px;
    height: 2px;

    background: #d71920;

    display: inline-block;
}


.about-content h2 {
    margin: 0 0 20px;

    color: #102b54;

    font-size: 38px;
    line-height: 1.2;

    font-weight: 700;
}


.about-content h2 span {
    display: block;

    color: #d71920;
}


.about-description {
    color: #657084;

    font-size: 14px;
    line-height: 1.8;

    margin-bottom: 10px;

    max-width: 650px;
}


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

.about-features {
    display: grid;

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

    gap: 10px;

    margin-top: 28px;
}


.feature-item {
    display: flex;
    align-items: center;

    min-height: 48px;

    padding: 9px 10px;

    background: #ffffff;

    border: 1px solid #e7ebf1;

    border-radius: 8px;

    color: #263957;

    font-size: 11.5px;
    font-weight: 500;

    transition: all .25s ease;
}


.feature-item i {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

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

    margin-right: 7px;

    border-radius: 7px;

    background: #edf3fc;

    color: #123f8c;

    font-size: 12px;
}


.feature-item:hover {
    border-color: #d71920;

    transform: translateY(-3px);

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


.feature-item:hover i {
    background: #d71920;
    color: #ffffff;
}


/* =========================================
   MISSION
========================================= */

.mission-card {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-top: 28px;

    padding: 18px 20px;

    background: #0b2d63;

    border-radius: 12px;

    border-left: 4px solid #f15a24;

    box-shadow:
        0 10px 25px rgba(11,45,99,.12);
}


.mission-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

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

    border-radius: 50%;

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

    color: #ffffff;

    font-size: 18px;
}


.mission-card h4 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
}


.mission-card p {
    margin: 0;

    color: #dbe6f7;

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


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

.about-buttons {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 25px;
}


.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 135px;
    height: 45px;

    padding: 0 20px;

    border-radius: 7px;

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

    text-decoration: none !important;

    transition: all .3s ease;
}


.primary-btn {
    background: #d71920;
    color: #ffffff !important;

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


.primary-btn i {
    margin-left: 10px;

    font-size: 11px;
}


.primary-btn:hover {
    background: #0b2d63;

    transform: translateY(-2px);
}


.secondary-btn {
    background: #ffffff;

    color: #0b2d63 !important;

    border: 1px solid #0b2d63;
}


.secondary-btn:hover {
    background: #0b2d63;

    color: #ffffff !important;

    transform: translateY(-2px);
}


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

@media (max-width: 1199px) {

    .about-content {
        padding-left: 15px;
    }

    .about-content h2 {
        font-size: 32px;
    }

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

}


@media (max-width: 991px) {

    .prajapati-about {
        padding: 65px 0;
    }

    .about-content {
        padding-left: 0;
    }

    .about-image-main img {
        height: 500px;
    }

    .service-badge {
        right: 10px;
    }

}


@media (max-width: 575px) {

    .prajapati-about {
        padding: 50px 0;
    }

    .about-visual {
        padding-right: 10px;
    }

    .about-image-main img {
        height: 360px;
    }

    .experience-card {
        width: 150px;
        min-height: 95px;

        padding: 14px;
    }

    .experience-card strong {
        font-size: 32px;
    }

    .experience-card span {
        font-size: 10px;
    }

    .service-badge {
        top: 20px;
        right: 0;

        padding: 8px 10px;
    }

    .badge-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .service-badge strong {
        font-size: 11px;
    }

    .service-badge small {
        font-size: 9px;
    }

    .about-content h2 {
        font-size: 28px;
    }

    .about-features {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .feature-item {
        font-size: 10px;
    }

    .mission-card {
        align-items: flex-start;
    }

    .about-buttons {
        flex-wrap: wrap;
    }

}


/* 
==========================our services ==================================== */


/* =====================================================
   PRAJAPATI COURIER
   SERVICES SECTION
===================================================== */

.prajapati-services {
    position: relative;

    padding: 90px 0;

    background: #f7f9fc;

    overflow: hidden;
}


/* Background Decoration */

.prajapati-services::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -210px;
    right: -180px;

    background: rgba(16, 43, 84, 0.035);

    border-radius: 50%;
}


.prajapati-services::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -150px;
    left: -130px;

    background: rgba(215, 25, 32, 0.035);

    border-radius: 50%;
}


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

.prajapati-services-heading {
    position: relative;

    max-width: 760px;

    margin: 0 auto 50px;

    z-index: 2;
}


.prajapati-services-tag {
    display: inline-block;

    padding: 7px 18px;

    border-radius: 30px;

    background: #ffffff;

    border: 1px solid #e3e8ef;

    color: #d71920;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.prajapati-services-heading h2 {
    margin: 16px 0 14px;

    color: #102b54;

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

    font-size: 38px;

    line-height: 1.25;

    font-weight: 600;
}


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

    font-weight: 700;
}


.prajapati-services-heading p {
    max-width: 680px;

    margin: auto;

    color: #68758a;

    font-size: 14px;

    line-height: 1.8;
}


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

.prajapati-service-card {
    position: relative;

    height: 100%;

    min-height: 310px;

    padding: 30px 30px 27px;

    background: #ffffff;

    border: 1px solid #e2e7ee;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(16, 43, 84, 0.055);

    transition: all .35s ease;
}


/* Top Accent */

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

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 4px;

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

    transition: width .4s ease;
}


.prajapati-service-card:hover::before {
    width: 100%;
}


/* Bottom Shape */

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

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    bottom: -80px;

    background: #f3f6fa;

    border-radius: 50%;

    transition: all .4s ease;

    z-index: 0;
}


.prajapati-service-card:hover::after {
    background: #fff0ee;

    transform: scale(1.25);
}


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

.prajapati-card-head {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

    z-index: 2;
}


.prajapati-number {
    color: #a4afbf;

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

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;
}


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

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

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #ffffff;

    font-size: 21px;

    box-shadow:
        0 8px 18px rgba(16,43,84,.14);

    transition: all .35s ease;
}


/* Brand Colors */

.prajapati-service-icon.navy {
    background: #102b54;
}

.prajapati-service-icon.red {
    background: #d71920;
}

.prajapati-service-icon.orange {
    background: #f15a24;
}


/* Hover */

.prajapati-service-card:hover .prajapati-service-icon {
    transform: translateY(-4px) rotate(-4deg);

    box-shadow:
        0 12px 22px rgba(16,43,84,.20);
}


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

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

    z-index: 2;

    margin: 0 0 12px;

    color: #102b54;

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

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;
}


.prajapati-service-card h3::after {
    content: "";

    display: block;

    width: 30px;
    height: 2px;

    margin-top: 9px;

    background: #d71920;
}


/* =====================================================
   DESCRIPTION
===================================================== */

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

    z-index: 2;

    margin: 0;

    color: #69768a;

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

    font-size: 13px;

    line-height: 1.8;
}


/* =====================================================
   LEARN MORE
===================================================== */

.prajapati-service-link {
    position: relative;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    color: #102b54 !important;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all .3s ease;
}


.prajapati-service-link span {
    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #102b54;

    color: #ffffff;

    font-size: 10px;

    transition: all .3s ease;
}


.prajapati-service-link:hover {
    color: #d71920 !important;
}


.prajapati-service-link:hover span {
    background: #d71920;

    transform: translateX(4px);
}


/* =====================================================
   HOVER CARD
===================================================== */

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

    border-color: #d7dde6;

    box-shadow:
        0 20px 45px rgba(16,43,84,.13);
}


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

@media (max-width: 991px) {

    .prajapati-services {
        padding: 70px 0;
    }

    .prajapati-services-heading h2 {
        font-size: 32px;
    }

}


@media (max-width: 767px) {

    .prajapati-services {
        padding: 55px 0;
    }

    .prajapati-services-heading {
        margin-bottom: 35px;
    }

    .prajapati-services-heading h2 {
        font-size: 28px;
    }

    .prajapati-services-heading p {
        font-size: 13px;
    }

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

        padding: 25px;
    }

}


@media (max-width: 480px) {

    .prajapati-services-heading h2 {
        font-size: 25px;
    }

    .prajapati-service-card h3 {
        font-size: 18px;
    }

}


/* =====================================================
   PRAJAPATI - WHY CHOOSE US
===================================================== */

.prajapati-why {
    position: relative;

    padding: 90px 0;

    background: #f7f9fc;

    overflow: hidden;
}


/* Background decoration */

.prajapati-why::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

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

    border-radius: 50%;

    background: rgba(16, 43, 84, 0.035);
}


.prajapati-why::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -140px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(215, 25, 32, 0.035);
}


.prajapati-why .container {
    position: relative;

    z-index: 2;
}


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

.prajapati-why-content {
    padding-right: 35px;
}


.prajapati-why-tag {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 16px;

    border: 1px solid #e5e9ef;

    border-radius: 30px;

    background: #ffffff;

    color: #d71920;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.prajapati-why-tag::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d71920;
}


.prajapati-why-content h2 {
    margin: 18px 0 13px;

    color: #102b54;

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

    font-size: 38px;

    line-height: 1.25;

    font-weight: 600;
}


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

    color: #d71920;

    font-weight: 700;
}


.prajapati-why-intro {
    max-width: 650px;

    margin: 0 0 30px;

    color: #69768a;

    font-size: 14px;

    line-height: 1.8;
}


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

.prajapati-faq {
    margin-bottom: 12px;

    background: #ffffff;

    border: 1px solid #e2e7ee;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 5px 18px rgba(16,43,84,.035);

    transition: all .3s ease;
}


.prajapati-faq.active {
    border-color: #d71920;

    box-shadow:
        0 10px 28px rgba(16,43,84,.08);
}


/* Button */

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

    min-height: 68px;

    padding: 10px 18px;

    display: flex;

    align-items: center;

    border: 0;

    outline: none;

    background: #ffffff;

    cursor: pointer;

    text-align: left;
}


/* Icon */

.faq-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 14px;

    border-radius: 10px;

    background: #edf3fb;

    color: #102b54;

    font-size: 16px;

    transition: all .3s ease;
}


.prajapati-faq.active .faq-icon {
    background: #d71920;

    color: #ffffff;
}


/* Question */

.faq-question {
    flex: 1;

    color: #102b54;

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

    font-size: 14px;

    font-weight: 600;
}


/* Arrow */

.faq-arrow {
    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f2f5f9;

    color: #102b54;

    font-size: 10px;

    transition: all .3s ease;
}


.prajapati-faq.active .faq-arrow {
    background: #102b54;

    color: #ffffff;

    transform: rotate(45deg);
}


/* Answer */

.prajapati-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height .35s ease,
        padding .35s ease;
}


.prajapati-faq-answer p {
    margin: 0;

    padding: 0 20px 0 74px;

    color: #69768a;

    font-size: 13px;

    line-height: 1.75;
}


.prajapati-faq.active .prajapati-faq-answer {
    max-height: 180px;
}


.prajapati-faq.active .prajapati-faq-answer p {
    padding-bottom: 20px;
}


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

.prajapati-why-image {
    position: relative;

    padding: 0 15px 25px 25px;
}


.prajapati-why-image img {
    width: 100%;

    height: 540px;

    object-fit: cover;

    display: block;

    border-radius: 22px;

    box-shadow:
        0 20px 45px rgba(16,43,84,.16);
}


/* Red border decoration */

.prajapati-why-image::before {
    content: "";

    position: absolute;

    left: 0;
    top: 25px;

    width: 100%;
    height: 100%;

    border: 2px solid #d71920;

    border-radius: 22px;

    z-index: -1;
}


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

.why-experience {
    position: absolute;

    left: 0;
    bottom: 0;

    min-width: 175px;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #102b54;

    border-radius: 13px;

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(16,43,84,.25);

    border-left: 4px solid #f15a24;
}


.why-experience strong {
    font-size: 38px;

    line-height: 1;

    font-weight: 700;
}


.why-experience span {
    color: #dce6f5;

    font-size: 11px;

    line-height: 1.5;
}


/* =====================================================
   TRUST BADGE
===================================================== */

.why-trust {
    position: absolute;

    right: 0;
    top: 35px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    background: #ffffff;

    border-radius: 11px;

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


.why-trust-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d71920;

    color: #ffffff;

    font-size: 14px;
}


.why-trust strong {
    display: block;

    color: #102b54;

    font-size: 12px;

    font-weight: 600;
}


.why-trust small {
    display: block;

    margin-top: 2px;

    color: #7a8493;

    font-size: 9px;
}


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

@media (max-width: 1199px) {

    .prajapati-why-content {
        padding-right: 10px;
    }

    .prajapati-why-content h2 {
        font-size: 33px;
    }

}


@media (max-width: 991px) {

    .prajapati-why {
        padding: 65px 0;
    }

    .prajapati-why-content {
        padding-right: 0;
    }

    .prajapati-why-image {
        margin-top: 25px;
        padding-left: 15px;
    }

    .prajapati-why-image img {
        height: 450px;
    }

}


@media (max-width: 575px) {

    .prajapati-why {
        padding: 50px 0;
    }

    .prajapati-why-content h2 {
        font-size: 27px;
    }

    .prajapati-why-intro {
        font-size: 13px;
    }

    .prajapati-faq-button {
        min-height: 62px;

        padding: 8px 12px;
    }

    .faq-icon {
        width: 36px;
        height: 36px;

        margin-right: 10px;

        font-size: 13px;
    }

    .faq-question {
        font-size: 12px;
    }

    .faq-arrow {
        width: 27px;
        height: 27px;
    }

    .prajapati-faq-answer p {
        padding-left: 58px;

        font-size: 11px;
    }

    .prajapati-why-image img {
        height: 350px;
    }

    .why-experience {
        min-width: 145px;

        padding: 13px 15px;
    }

    .why-experience strong {
        font-size: 30px;
    }

    .why-trust {
        top: 20px;
        right: 0;

        padding: 8px 10px;
    }

}


/* =====================================================
   PRAJAPATI COURIER
   SHIPPING PROCESS
===================================================== */

.prajapati-process {
    position: relative;

    padding: 90px 0;

    background: #ffffff;

    overflow: hidden;
}


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

.prajapati-process::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -220px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(16,43,84,.035);
}


.prajapati-process::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

    background: rgba(215,25,32,.035);
}


.prajapati-process .container {
    position: relative;

    z-index: 2;
}


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

.prajapati-process-heading {
    max-width: 720px;

    margin: 0 auto 65px;
}


.process-tag {
    display: inline-block;

    padding: 7px 17px;

    border-radius: 30px;

    border: 1px solid #e5e9ef;

    background: #f9fafc;

    color: #d71920;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.prajapati-process-heading h2 {
    margin: 16px 0 13px;

    color: #102b54;

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

    font-size: 38px;

    line-height: 1.25;

    font-weight: 600;
}


.prajapati-process-heading h2 span {
    color: #d71920;

    font-weight: 700;
}


.prajapati-process-heading p {
    max-width: 650px;

    margin: auto;

    color: #6d7889;

    font-size: 14px;

    line-height: 1.8;
}


/* =====================================================
   PROCESS WRAPPER
===================================================== */

.prajapati-process-wrapper {
    position: relative;

    display: grid;

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

    gap: 25px;
}


/* =====================================================
   PROCESS ITEM
===================================================== */

.process-item {
    position: relative;

    min-height: 280px;

    padding: 25px 22px;

    background: #ffffff;

    border: 1px solid #e3e8ef;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 8px 28px rgba(16,43,84,.055);

    transition: all .35s ease;
}


/* Hover */

.process-item:hover {
    transform: translateY(-8px);

    border-color: #d71920;

    box-shadow:
        0 18px 40px rgba(16,43,84,.12);
}


/* =====================================================
   CONNECTING LINE
===================================================== */

.process-line {
    position: absolute;

    top: 54px;

    left: calc(100% + 0px);

    width: 25px;

    height: 2px;

    background: #dce3ec;

    z-index: 1;
}


.process-item:last-child .process-line {
    display: none;
}


/* Small orange dot */

.process-line::after {
    content: "";

    position: absolute;

    right: -2px;

    top: -3px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f15a24;
}


/* =====================================================
   NUMBER
===================================================== */

.process-number {
    position: absolute;

    top: 16px;

    left: 20px;

    color: #aab4c2;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}


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

.process-icon {
    position: relative;

    width: 72px;
    height: 72px;

    margin: 8px auto 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 25px;

    box-shadow:
        0 10px 22px rgba(16,43,84,.16);

    transition: all .35s ease;
}


.process-icon.navy {
    background: #102b54;
}


.process-icon.red {
    background: #d71920;
}


.process-icon.orange {
    background: #f15a24;
}


.process-item:hover .process-icon {
    transform: scale(1.08) rotate(-5deg);

    box-shadow:
        0 13px 28px rgba(16,43,84,.22);
}


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

.process-content {
    position: relative;

    z-index: 2;
}


.process-content h4 {
    margin: 0 0 11px;

    color: #102b54;

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

    font-size: 18px;

    font-weight: 600;
}


.process-content h4::after {
    content: "";

    display: block;

    width: 28px;

    height: 2px;

    margin: 8px auto 0;

    background: #d71920;
}


.process-content p {
    margin: 0;

    color: #707b8d;

    font-size: 13px;

    line-height: 1.75;
}


/* =====================================================
   STEP HIGHLIGHT
===================================================== */

.process-item:nth-child(1) {
    border-top: 3px solid #102b54;
}


.process-item:nth-child(2) {
    border-top: 3px solid #d71920;
}


.process-item:nth-child(3) {
    border-top: 3px solid #f15a24;
}


.process-item:nth-child(4) {
    border-top: 3px solid #102b54;
}


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

@media (max-width: 1199px) {

    .prajapati-process-wrapper {
        gap: 15px;
    }

    .process-item {
        padding: 24px 17px;
    }

    .process-line {
        width: 15px;
    }

}


@media (max-width: 991px) {

    .prajapati-process {
        padding: 70px 0;
    }

    .prajapati-process-heading {
        margin-bottom: 45px;
    }

    .prajapati-process-heading h2 {
        font-size: 32px;
    }

    .prajapati-process-wrapper {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .process-line {
        display: none;
    }

}


@media (max-width: 575px) {

    .prajapati-process {
        padding: 55px 0;
    }

    .prajapati-process-heading {
        margin-bottom: 35px;
    }

    .prajapati-process-heading h2 {
        font-size: 27px;
    }

    .prajapati-process-heading p {
        font-size: 13px;
    }

    .prajapati-process-wrapper {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .process-item {
        min-height: auto;

        padding: 25px 22px 28px;
    }

    .process-icon {
        width: 65px;
        height: 65px;

        font-size: 22px;
    }

}



/* =====================================================
   PRAJAPATI
   LOGISTICS INSIGHTS SECTION
===================================================== */

.prajapati-insights {
    position: relative;

    padding: 90px 0;

    background: #f7f9fc;

    overflow: hidden;
}


/* Background circles */

.prajapati-insights::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -200px;
    top: -200px;

    border-radius: 50%;

    background: rgba(16,43,84,.035);
}


.prajapati-insights::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -150px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(215,25,32,.03);
}


.prajapati-insights .container {
    position: relative;

    z-index: 2;
}


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

.prajapati-insights-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 42px;
}


.insights-tag {
    display: inline-block;

    padding: 7px 16px;

    background: #ffffff;

    border: 1px solid #e3e8ef;

    border-radius: 30px;

    color: #d71920;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.prajapati-insights-heading h2 {
    margin: 14px 0 10px;

    color: #102b54;

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

    font-size: 36px;

    line-height: 1.25;

    font-weight: 600;
}


.prajapati-insights-heading h2 span {
    color: #d71920;

    font-weight: 700;
}


.prajapati-insights-heading p {
    max-width: 650px;

    margin: 0;

    color: #6d7889;

    font-size: 13px;

    line-height: 1.7;
}


/* View All */

.insights-view-btn {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 19px;

    background: #102b54;

    border-radius: 7px;

    color: #ffffff !important;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all .3s ease;
}


.insights-view-btn i {
    color: #f15a24;

    font-size: 10px;
}


.insights-view-btn:hover {
    background: #d71920;

    transform: translateY(-2px);
}


.insights-view-btn:hover i {
    color: #ffffff;
}


/* =====================================================
   FEATURED BLOG
===================================================== */

.featured-insight {
    height: 100%;

    background: #ffffff;

    border: 1px solid #e2e7ee;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 28px rgba(16,43,84,.06);

    transition: all .35s ease;
}


.featured-insight:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 42px rgba(16,43,84,.12);
}


/* Image */

.featured-image {
    position: relative;

    height: 310px;

    overflow: hidden;
}


.featured-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .6s ease;
}


.featured-insight:hover .featured-image img {
    transform: scale(1.05);
}


/* Dark image gradient */

.featured-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 100px;

    background: linear-gradient(
        transparent,
        rgba(0,0,0,.45)
    );
}


/* Category */

.featured-category {
    position: absolute;

    left: 20px;
    bottom: 18px;

    z-index: 2;

    padding: 6px 13px;

    background: #d71920;

    border-radius: 5px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* Content */

.featured-content {
    padding: 25px 28px 27px;
}


.insight-date {
    color: #d71920;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.insight-date i {
    margin-right: 5px;
}


.featured-content h3 {
    margin: 10px 0 10px;

    color: #102b54;

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

    font-size: 23px;

    line-height: 1.35;

    font-weight: 600;
}


.featured-content p {
    margin: 0;

    color: #6c788a;

    font-size: 13px;

    line-height: 1.75;
}


/* Read */

.insight-read {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 17px;

    color: #102b54 !important;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;
}


.insight-read span {
    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #102b54;

    color: #ffffff;

    font-size: 9px;

    transition: all .3s ease;
}


.insight-read:hover {
    color: #d71920 !important;
}


.insight-read:hover span {
    background: #d71920;

    transform: translateX(4px);
}


/* =====================================================
   RIGHT LIST
===================================================== */

.insight-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.insight-item {
    display: flex;

    align-items: center;

    min-height: 105px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e2e7ee;

    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(16,43,84,.04);

    transition: all .3s ease;
}


.insight-item:hover {
    transform: translateX(5px);

    border-color: #d71920;

    box-shadow:
        0 10px 25px rgba(16,43,84,.09);
}


/* Thumbnail */

.insight-thumb {
    width: 105px;
    height: 85px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 9px;
}


.insight-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .4s ease;
}


.insight-item:hover .insight-thumb img {
    transform: scale(1.08);
}


/* Content */

.insight-item-content {
    padding: 5px 12px;
}


.insight-item-content > span {
    color: #d71920;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


.insight-item-content h4 {
    margin: 5px 0 7px;

    color: #102b54;

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

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;
}


.insight-item-content a {
    color: #718096 !important;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none !important;
}


.insight-item-content a i {
    margin-left: 5px;

    color: #d71920;

    font-size: 8px;
}


.insight-item-content a:hover {
    color: #d71920 !important;
}


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

@media (max-width: 991px) {

    .prajapati-insights {
        padding: 70px 0;
    }

    .prajapati-insights-heading {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 35px;
    }

    .prajapati-insights-heading h2 {
        font-size: 31px;
    }

}


@media (max-width: 575px) {

    .prajapati-insights {
        padding: 55px 0;
    }

    .prajapati-insights-heading h2 {
        font-size: 27px;
    }

    .prajapati-insights-heading p {
        font-size: 12px;
    }

    .featured-image {
        height: 230px;
    }

    .featured-content {
        padding: 22px;
    }

    .featured-content h3 {
        font-size: 20px;
    }

    .insight-item {
        min-height: 95px;
    }

    .insight-thumb {
        width: 90px;
        height: 75px;
    }

    .insight-item-content h4 {
        font-size: 12px;
    }

}


/* =====================================================
   PRAJAPATI COURIER & CARGO
   PROFESSIONAL FOOTER
===================================================== */

.prajapati-footer {
    position: relative;

    background: #081f42;

    color: #ffffff;

    overflow: hidden;
}


/* Decorative background */

.prajapati-footer::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;

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


.prajapati-footer::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(215,25,32,.06);
}


.prajapati-footer .container {
    position: relative;

    z-index: 2;
}


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

.prajapati-footer-main {
    display: grid;

    grid-template-columns:
        1.6fr
        .8fr
        .9fr
        1.2fr;

    gap: 55px;

    padding: 70px 0 55px;
}


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

.footer-company {
    padding-right: 25px;
}


.footer-logo-link {
    display: inline-block;

    margin-bottom: 17px;
}


.prajapati-footer-logo {
    width: 190px;

    height: auto;

    display: block;

    background: #ffffff;

    padding: 7px 12px;

    border-radius: 7px;
}


.footer-company h3 {
    margin: 0 0 13px;

    color: #ffffff;

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

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .3px;
}


.footer-company-text {
    max-width: 390px;

    margin: 0 0 22px;

    color: #b9c7da;

    font-size: 12px;

    line-height: 1.8;
}


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

.footer-contact {
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.footer-contact-item {
    display: flex;

    align-items: center;

    gap: 11px;
}


.footer-contact-icon {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

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

    color: #f15a24;

    font-size: 11px;
}


.footer-contact-item p {
    margin: 0;

    color: #c1cede;

    font-size: 11px;

    line-height: 1.5;
}


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

.prajapati-footer-column h4 {
    margin: 5px 0 9px;

    color: #ffffff;

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

    font-size: 16px;

    font-weight: 600;
}


.footer-heading-line {
    display: block;

    width: 35px;
    height: 3px;

    margin-bottom: 21px;

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

    border-radius: 3px;
}


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

.prajapati-footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


.prajapati-footer-column ul li {
    margin-bottom: 11px;
}


.prajapati-footer-column ul li a {
    display: inline-flex;

    align-items: center;

    color: #b9c7da !important;

    font-size: 11.5px;

    text-decoration: none !important;

    transition: all .25s ease;
}


.prajapati-footer-column ul li a i {
    margin-right: 8px;

    color: #f15a24;

    font-size: 9px;

    transition: transform .25s ease;
}


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

    transform: translateX(4px);
}


.prajapati-footer-column ul li a:hover i {
    color: #d71920;

    transform: translateX(2px);
}


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

.newsletter-column > p {
    margin: 0 0 17px;

    color: #b9c7da;

    font-size: 11.5px;

    line-height: 1.75;
}


.prajapati-newsletter {
    display: flex;

    align-items: center;

    gap: 7px;
}


.newsletter-input {
    position: relative;

    flex: 1;

    height: 43px;
}


.newsletter-input i {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #8799b2;

    font-size: 11px;
}


.newsletter-input input {
    width: 100%;
    height: 100%;

    padding: 0 12px 0 34px;

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

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

    border-radius: 7px;

    outline: none;

    color: #ffffff;

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

    font-size: 11px;
}


.newsletter-input input::placeholder {
    color: #8799b2;
}


.newsletter-input input:focus {
    border-color: #f15a24;

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


.prajapati-newsletter button {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: 0;

    border-radius: 7px;

    background: #d71920;

    color: #ffffff;

    cursor: pointer;

    font-size: 12px;

    transition: all .3s ease;
}


.prajapati-newsletter button:hover {
    background: #f15a24;

    transform: translateY(-2px);
}


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

.footer-follow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;
}


.footer-follow > span {
    color: #ffffff;

    font-size: 11px;

    font-weight: 600;
}


.prajapati-social {
    display: flex;

    align-items: center;

    gap: 7px;
}


.prajapati-social a {
    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    color: #d9e2ee !important;

    font-size: 10px;

    text-decoration: none !important;

    transition: all .3s ease;
}


.prajapati-social a:hover {
    background: #d71920;

    border-color: #d71920;

    color: #ffffff !important;

    transform: translateY(-3px);
}


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

.prajapati-footer-bottom {
    position: relative;

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

    background: rgba(0,0,0,.12);
}


.footer-bottom-inner {
    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.footer-bottom-inner p {
    margin: 0;

    color: #8fa1ba;

    font-size: 10.5px;

    line-height: 1.5;
}


.footer-bottom-inner strong {
    color: #c9d5e5;

    font-weight: 600;
}


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

    font-weight: 600;

    text-decoration: none !important;
}


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


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

@media (max-width: 1199px) {

    .prajapati-footer-main {
        grid-template-columns:
            1.4fr
            1fr
            1fr
            1.3fr;

        gap: 30px;
    }

}


@media (max-width: 991px) {

    .prajapati-footer-main {
        grid-template-columns:
            1fr 1fr;

        gap: 45px 30px;

        padding: 55px 0 45px;
    }

    .footer-company {
        padding-right: 0;
    }

}


@media (max-width: 575px) {

    .prajapati-footer-main {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 45px 0 35px;
    }

    .prajapati-footer-logo {
        width: 170px;
    }

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

    .footer-bottom-inner {
        min-height: auto;

        padding: 18px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 7px;
    }

}




/* =====================================================
   PRAJAPATI PAGE TITLE
===================================================== */

.prajapati-page-title {
    position: relative;

    padding: 70px 0;

    background:
        linear-gradient(
            135deg,
            #f7f9fc 0%,
            #ffffff 55%,
            #f5f8fc 100%
        );

    overflow: hidden;

    border-bottom: 1px solid #e6ebf1;
}


/* Decorative Navy Shape */

.prajapati-page-title::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    top: -270px;

    border-radius: 50%;

    background: rgba(16,43,84,.045);
}


/* Decorative Red Shape */

.prajapati-page-title::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -120px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(215,25,32,.035);
}


.prajapati-page-title .container {
    position: relative;

    z-index: 2;
}


/* =====================================================
   INNER
===================================================== */

.prajapati-page-title-inner {

    min-height: 180px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


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

.page-title-left {
    position: relative;
}


.page-title-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 14px;

    background: #ffffff;

    border: 1px solid #e3e8ef;

    border-radius: 30px;

    color: #d71920;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    box-shadow:
        0 4px 15px rgba(16,43,84,.04);
}


.page-title-tag::before {

    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f15a24;
}


.page-title-left h1 {

    margin: 14px 0 5px;

    color: #102b54;

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

    font-size: 44px;

    line-height: 1.15;

    font-weight: 600;
}


.page-title-left h1 span {

    color: #d71920;

    font-weight: 700;
}


.page-title-left p {

    margin: 0;

    color: #718096;

    font-size: 13px;

    line-height: 1.6;
}


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

.page-breadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    background: #ffffff;

    border: 1px solid #e1e6ed;

    border-radius: 9px;

    box-shadow:
        0 7px 22px rgba(16,43,84,.06);
}


.page-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #102b54 !important;

    font-size: 12px;

    font-weight: 500;

    text-decoration: none !important;

    transition: all .25s ease;
}


.page-breadcrumb a i {

    color: #d71920;

    font-size: 11px;
}


.page-breadcrumb a:hover {

    color: #d71920 !important;
}


.page-breadcrumb > span {

    color: #b3bdca;

    font-size: 9px;
}


.page-breadcrumb strong {

    color: #d71920;

    font-size: 12px;

    font-weight: 600;
}


/* =====================================================
   RED BOTTOM ACCENT
===================================================== */

.prajapati-page-title .container::after {

    content: "";

    position: absolute;

    left: 12px;
    bottom: -70px;

    width: 55px;
    height: 3px;

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

    border-radius: 5px;
}


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

@media (max-width: 767px) {

    .prajapati-page-title {

        padding: 50px 0;
    }

    .prajapati-page-title-inner {

        min-height: auto;

        flex-direction: column;

        align-items: flex-start;
    }

    .page-title-left h1 {

        font-size: 34px;
    }

    .page-breadcrumb {

        padding: 11px 14px;
    }

}


@media (max-width: 480px) {

    .prajapati-page-title {

        padding: 42px 0;
    }

    .page-title-left h1 {

        font-size: 30px;
    }

    .page-title-left p {

        font-size: 11px;
    }

    .page-title-tag {

        font-size: 9px;
    }

}





/* =====================================================
   PRAJAPATI ABOUT SECTION V2
===================================================== */

.prajapati-about-v2 {
    position: relative;

    padding: 95px 0;

    background: #ffffff;

    overflow: hidden;
}


/* Background decoration */

.prajapati-about-v2::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    top: -180px;

    border-radius: 50%;

    background: rgba(16, 43, 84, .035);
}


.prajapati-about-v2::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -160px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(215, 25, 32, .035);
}


.prajapati-about-v2 .container {
    position: relative;

    z-index: 2;
}


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

.about-visual-v2 {
    position: relative;

    min-height: 520px;

    padding: 20px 25px 35px 10px;
}


/* Main Image */

.main-about-image {
    position: relative;

    width: 88%;

    height: 480px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(16, 43, 84, .15);
}


.main-about-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(16, 43, 84, .05),
            transparent 60%
        );
}


.main-about-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .6s ease;
}


.about-visual-v2:hover .main-about-image img {
    transform: scale(1.04);
}


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

.about-experience-card {

    position: absolute;

    right: 0;

    top: 55px;

    width: 185px;

    padding: 17px 18px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: #102b54;

    border-radius: 13px;

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(16, 43, 84, .22);

    z-index: 4;
}


.experience-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #d71920;

    color: #ffffff;

    font-size: 17px;
}


.about-experience-card strong {

    display: block;

    color: #ffffff;

    font-size: 25px;

    line-height: 1;

    font-weight: 700;
}


.about-experience-card span {

    display: block;

    margin-top: 5px;

    color: #c6d1df;

    font-size: 10px;
}


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

.about-service-card {

    position: absolute;

    left: 0;

    bottom: 5px;

    width: 220px;

    padding: 16px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: #ffffff;

    border: 1px solid #e1e7ef;

    border-radius: 13px;

    box-shadow:
        0 12px 30px rgba(16, 43, 84, .12);

    z-index: 5;
}


.service-card-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f15a24;

    color: #ffffff;

    font-size: 16px;
}


.about-service-card strong {

    display: block;

    color: #102b54;

    font-size: 13px;

    font-weight: 700;
}


.about-service-card span {

    display: block;

    margin-top: 3px;

    color: #7a8797;

    font-size: 10px;
}


/* Decorative red line */

.about-red-shape {

    position: absolute;

    left: 30px;

    top: 0;

    width: 70px;
    height: 5px;

    border-radius: 5px;

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

    z-index: 6;
}


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

.about-content-v2 {

    padding-left: 25px;

    max-width: 610px;
}


/* Label */

.about-top-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #d71920;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.about-top-label span {

    width: 27px;
    height: 3px;

    display: inline-block;

    border-radius: 3px;

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


/* Heading */

.about-content-v2 h2 {

    margin: 15px 0 18px;

    color: #102b54;

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

    font-size: 40px;

    line-height: 1.25;

    font-weight: 600;
}


.about-content-v2 h2 span {

    color: #d71920;

    font-weight: 700;
}


/* Paragraph */

.about-main-text {

    margin: 0 0 10px;

    color: #4f5f73;

    font-size: 15px;

    line-height: 1.8;

    font-weight: 500;
}


.about-secondary-text {

    margin: 0;

    color: #778496;

    font-size: 13px;

    line-height: 1.8;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.about-highlight {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 24px;

    padding: 16px 18px;

    background: #f7f9fc;

    border-left: 4px solid #d71920;

    border-radius: 9px;
}


.highlight-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #102b54;

    color: #ffffff;

    font-size: 16px;
}


.about-highlight h4 {

    margin: 0 0 3px;

    color: #102b54;

    font-size: 14px;

    font-weight: 600;
}


.about-highlight p {

    margin: 0;

    color: #758194;

    font-size: 11px;

    line-height: 1.6;
}


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

.about-feature-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px 25px;

    margin-top: 25px;
}


.about-feature {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #34455c;

    font-size: 12px;

    font-weight: 500;
}


.about-feature i {

    color: #d71920;

    font-size: 14px;
}


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

.about-buttons-v2 {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;
}


.about-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 21px;

    background: #102b54;

    border-radius: 7px;

    color: #ffffff !important;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all .3s ease;
}


.about-primary-btn i {

    color: #f15a24;

    font-size: 10px;

    transition: transform .3s ease;
}


.about-primary-btn:hover {

    background: #d71920;

    transform: translateY(-2px);
}


.about-primary-btn:hover i {

    color: #ffffff;

    transform: translateX(4px);
}


.about-secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 19px;

    background: #ffffff;

    border: 1px solid #dce3eb;

    border-radius: 7px;

    color: #102b54 !important;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all .3s ease;
}


.about-secondary-btn i {

    color: #d71920;

    font-size: 11px;
}


.about-secondary-btn:hover {

    border-color: #d71920;

    color: #d71920 !important;

    transform: translateY(-2px);
}


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

@media (max-width: 1199px) {

    .about-content-v2 {

        padding-left: 5px;
    }

    .about-content-v2 h2 {

        font-size: 34px;
    }

}


@media (max-width: 991px) {

    .prajapati-about-v2 {

        padding: 70px 0;
    }

    .about-visual-v2 {

        max-width: 650px;

        margin: 0 auto 25px;
    }

    .about-content-v2 {

        max-width: 100%;

        padding-left: 0;
    }

}


@media (max-width: 575px) {

    .prajapati-about-v2 {

        padding: 55px 0;
    }

    .about-visual-v2 {

        min-height: 410px;

        padding: 15px 10px 30px;
    }

    .main-about-image {

        width: 92%;

        height: 370px;

        border-radius: 18px;
    }

    .about-experience-card {

        top: 30px;

        right: 0;

        width: 160px;

        padding: 12px;
    }

    .about-service-card {

        width: 190px;

        bottom: 0;
    }

    .about-content-v2 h2 {

        font-size: 29px;
    }

    .about-main-text {

        font-size: 14px;
    }

    .about-feature-grid {

        grid-template-columns: 1fr;

        gap: 11px;
    }

    .about-buttons-v2 {

        flex-wrap: wrap;
    }

}




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

.prajapati-process {
    position: relative;

    padding: 90px 0;

    background: #f7f9fc;

    overflow: hidden;
}


/* Background decoration */

.prajapati-process::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -280px;
    top: -220px;

    border-radius: 50%;

    background: rgba(16, 43, 84, .035);
}


.prajapati-process::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    background: rgba(215, 25, 32, .035);
}


.prajapati-process .container {
    position: relative;

    z-index: 2;
}


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

.process-heading {
    max-width: 700px;

    margin: 0 auto 65px;

    text-align: center;
}


.process-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #d71920;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.process-tag i {
    color: #f15a24;

    font-size: 13px;
}


.process-heading h2 {

    margin: 13px 0 12px;

    color: #102b54;

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

    font-size: 39px;

    line-height: 1.25;

    font-weight: 600;
}


.process-heading h2 span {

    color: #d71920;

    font-weight: 700;
}


.process-heading p {

    max-width: 580px;

    margin: auto;

    color: #748196;

    font-size: 13px;

    line-height: 1.8;
}


/* =====================================================
   TIMELINE
===================================================== */

.process-timeline {

    position: relative;

    display: grid;

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

    gap: 22px;
}


/* Connecting line */

.process-timeline::before {

    content: "";

    position: absolute;

    left: 10%;

    right: 10%;

    top: 50px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #d71920 0%,
            #f15a24 35%,
            #102b54 70%,
            #d71920 100%
        );

    opacity: .18;
}


/* =====================================================
   PROCESS ITEM
===================================================== */

.process-item {

    position: relative;

    padding: 28px 23px 27px;

    background: #ffffff;

    border: 1px solid #e5eaf0;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 8px 28px rgba(16, 43, 84, .055);

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


.process-item:hover {

    transform: translateY(-8px);

    border-color: rgba(215, 25, 32, .25);

    box-shadow:
        0 18px 40px rgba(16, 43, 84, .12);
}


/* =====================================================
   NUMBER
===================================================== */

.process-number {

    position: absolute;

    top: -13px;

    left: 50%;

    transform: translateX(-50%);

    min-width: 43px;

    padding: 5px 10px;

    background: #102b54;

    border: 3px solid #f7f9fc;

    border-radius: 20px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    z-index: 3;
}


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

.process-icon {

    position: relative;

    width: 62px;
    height: 62px;

    margin: 0 auto 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #102b54;

    color: #ffffff;

    font-size: 20px;

    box-shadow:
        0 8px 20px rgba(16, 43, 84, .18);

    transition: all .3s ease;
}


.process-item:hover .process-icon {

    background: #d71920;

    transform: rotate(-5deg) scale(1.06);
}


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

.process-content span {

    display: block;

    margin-bottom: 7px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.process-content h4 {

    margin: 0 0 10px;

    color: #102b54;

    font-size: 17px;

    font-weight: 600;
}


.process-content p {

    min-height: 60px;

    margin: 0;

    color: #758194;

    font-size: 11.5px;

    line-height: 1.75;
}


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

.process-bottom {

    display: grid;

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

    gap: 20px;

    margin-top: 35px;

    padding: 20px 25px;

    background: #102b54;

    border-radius: 13px;

    box-shadow:
        0 12px 30px rgba(16, 43, 84, .13);
}


.process-bottom-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 5px 15px;

    border-right: 1px solid rgba(255,255,255,.13);
}


.process-bottom-item:last-child {

    border-right: 0;
}


.process-bottom-item > i {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

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

    color: #f15a24;

    font-size: 14px;
}


.process-bottom-item strong {

    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}


.process-bottom-item span {

    display: block;

    margin-top: 3px;

    color: #aebed1;

    font-size: 9.5px;
}


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

@media (max-width: 991px) {

    .prajapati-process {

        padding: 70px 0;
    }

    .process-timeline {

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

    .process-timeline::before {

        display: none;
    }

    .process-bottom {

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .process-bottom-item {

        justify-content: flex-start;

        border-right: 0;

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

        padding: 10px 5px;
    }

    .process-bottom-item:last-child {

        border-bottom: 0;
    }

}


@media (max-width: 575px) {

    .prajapati-process {

        padding: 55px 0;
    }

    .process-heading {

        margin-bottom: 45px;
    }

    .process-heading h2 {

        font-size: 29px;
    }

    .process-heading p {

        font-size: 11px;
    }

    .process-timeline {

        grid-template-columns: 1fr;

        gap: 28px;
    }

    .process-item {

        padding: 27px 22px;
    }

    .process-content p {

        min-height: auto;
    }

}



/* =====================================================
   PRAJAPATI LEADERSHIP
===================================================== */

.prajapati-leadership {

    position: relative;

    padding: 95px 0;

    background: #f7f9fc;

    overflow: hidden;
}


/* Decorative background */

.prajapati-leadership::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -250px;

    border-radius: 50%;

    background: rgba(16,43,84,.035);
}


.prajapati-leadership::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(215,25,32,.035);
}


.prajapati-leadership .container {

    position: relative;

    z-index: 2;
}


/* =====================================================
   MAIN WRAPPER
===================================================== */

.leadership-wrapper {

    display: grid;

    grid-template-columns: 390px 1fr;

    gap: 70px;

    align-items: center;
}


/* =====================================================
   PROFILE
===================================================== */

.leader-profile {

    position: relative;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid #e4e9ef;

    box-shadow:
        0 18px 45px rgba(16,43,84,.10);
}


/* Image */

.leader-profile-image {

    position: relative;

    height: 390px;

    overflow: hidden;

    background: #edf2f7;
}


.leader-profile-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .6s ease;
}


.leader-profile:hover
.leader-profile-image img {

    transform: scale(1.04);
}


/* Image bottom gradient */

.leader-profile-image::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 120px;

    background:
        linear-gradient(
            transparent,
            rgba(8,31,66,.65)
        );
}


/* Experience badge */

.leader-profile-badge {

    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    background: #d71920;

    border-radius: 10px;

    color: #ffffff;

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


.leader-profile-badge i {

    font-size: 19px;
}


.leader-profile-badge strong {

    display: block;

    font-size: 18px;

    line-height: 1;
}


.leader-profile-badge span {

    display: block;

    margin-top: 3px;

    color: #ffe8e8;

    font-size: 8px;
}


/* Profile Info */

.leader-profile-info {

    padding: 23px 25px 25px;
}


.leader-role {

    display: block;

    margin-bottom: 7px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.leader-profile-info h3 {

    margin: 0 0 8px;

    color: #102b54;

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

    font-size: 24px;

    font-weight: 600;
}


.leader-profile-info p {

    margin: 0;

    color: #778497;

    font-size: 11px;

    line-height: 1.7;
}


/* Social */

.leader-social {

    display: flex;

    gap: 7px;

    margin-top: 18px;
}


.leader-social a {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f1f4f8;

    color: #102b54 !important;

    font-size: 10px;

    text-decoration: none !important;

    transition: all .3s ease;
}


.leader-social a:hover {

    background: #d71920;

    color: #ffffff !important;

    transform: translateY(-3px);
}


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

.leadership-content {

    max-width: 690px;
}


.leadership-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #d71920;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.leadership-label i {

    color: #f15a24;

    font-size: 13px;
}


/* Heading */

.leadership-content h2 {

    margin: 14px 0 17px;

    color: #102b54;

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

    font-size: 42px;

    line-height: 1.2;

    font-weight: 600;
}


.leadership-content h2 span {

    display: block;

    color: #d71920;

    font-weight: 700;
}


/* Paragraphs */

.leadership-intro {

    margin: 0 0 9px;

    color: #42546b;

    font-size: 15px;

    line-height: 1.8;

    font-weight: 500;
}


.leadership-text {

    margin: 0;

    color: #758296;

    font-size: 12px;

    line-height: 1.8;
}


/* =====================================================
   POINTS
===================================================== */

.leadership-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 27px;
}


.leadership-point {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e3e8ef;

    border-radius: 10px;

    transition: all .3s ease;
}


.leadership-point:hover {

    border-color: rgba(215,25,32,.25);

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(16,43,84,.07);
}


.leadership-point-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #102b54;

    color: #ffffff;

    font-size: 14px;
}


.leadership-point:hover
.leadership-point-icon {

    background: #d71920;
}


.leadership-point h4 {

    margin: 0 0 4px;

    color: #102b54;

    font-size: 13px;

    font-weight: 600;
}


.leadership-point p {

    margin: 0;

    color: #7a8798;

    font-size: 9.5px;

    line-height: 1.65;
}


/* =====================================================
   STATS
===================================================== */

.leadership-stats {

    display: grid;

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

    margin-top: 25px;

    padding: 17px 0;

    border-top: 1px solid #e1e6ed;

    border-bottom: 1px solid #e1e6ed;
}


.leadership-stat {

    text-align: center;

    border-right: 1px solid #e1e6ed;
}


.leadership-stat:last-child {

    border-right: 0;
}


.leadership-stat strong {

    display: block;

    color: #d71920;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.2;
}


.leadership-stat span {

    display: block;

    margin-top: 4px;

    color: #718096;

    font-size: 9px;
}


/* =====================================================
   SIGNATURE
===================================================== */

.leadership-signature {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;
}


.signature-name {

    color: #102b54;

    font-family: cursive;

    font-size: 22px;

    font-style: italic;

    font-weight: 600;
}


.leadership-signature span {

    display: block;

    margin-top: 2px;

    color: #8995a5;

    font-size: 9px;
}


.leadership-signature a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 17px;

    background: #102b54;

    border-radius: 7px;

    color: #ffffff !important;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all .3s ease;
}


.leadership-signature a i {

    color: #f15a24;

    font-size: 9px;
}


.leadership-signature a:hover {

    background: #d71920;

    transform: translateY(-2px);
}


.leadership-signature a:hover i {

    color: #ffffff;
}


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

@media (max-width: 1199px) {

    .leadership-wrapper {

        grid-template-columns: 340px 1fr;

        gap: 45px;
    }

    .leader-profile-image {

        height: 350px;
    }

    .leadership-content h2 {

        font-size: 36px;
    }

}


@media (max-width: 991px) {

    .prajapati-leadership {

        padding: 70px 0;
    }

    .leadership-wrapper {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .leader-profile {

        max-width: 500px;

        margin: auto;

        width: 100%;
    }

    .leadership-content {

        max-width: 100%;
    }

}


@media (max-width: 575px) {

    .prajapati-leadership {

        padding: 55px 0;
    }

    .leader-profile-image {

        height: 330px;
    }

    .leadership-content h2 {

        font-size: 30px;
    }

    .leadership-intro {

        font-size: 13px;
    }

    .leadership-points {

        grid-template-columns: 1fr;
    }

    .leadership-stats {

        gap: 5px;
    }

    .leadership-stat strong {

        font-size: 19px;
    }

    .leadership-signature {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* =====================================================
   TECHNOLOGY BANNER
===================================================== */

.technology-banner {

    position: relative;

    width: 100%;

    height: 310px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            110deg,
            #071a30 0%,
            #102b4c 48%,
            #263d55 100%
        );
}


/* Red diagonal */

.technology-banner::before {

    content: "";

    position: absolute;

    top: -100px;

    right: 25%;

    width: 75px;

    height: 520px;

    transform: skewX(31deg);

    background: #d71920;

    opacity: .95;
}


/* Navy diagonal */

.technology-banner::after {

    content: "";

    position: absolute;

    top: -100px;

    right: 31%;

    width: 160px;

    height: 520px;

    transform: skewX(31deg);

    background: #061d3a;
}


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

.technology-banner .container {

    position: relative;

    z-index: 10;
}


.technology-content {

    position: relative;

    z-index: 20;

    width: 55%;

    padding: 35px 0;
}


.technology-tag {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.technology-tag i {

    color: #ffffff;

    font-size: 11px;
}


.technology-content h1 {

    margin: 0;

    color: #ffffff;

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

    font-size: 48px;

    font-weight: 700;

    line-height: 1.1;
}


.technology-content h1::after {

    content: "";

    display: block;

    width: 50px;

    height: 3px;

    margin-top: 11px;

    background: #d71920;
}


.technology-content p {

    margin: 12px 0 18px;

    color: #cbd7e5;

    font-size: 11px;
}


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

.technology-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 14px;

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

    border-radius: 30px;

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


.technology-breadcrumb a {

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 10px;
}


.technology-breadcrumb a i {

    color: #f15a24;

    margin-right: 4px;
}


.technology-breadcrumb > i {

    color: #788ba0;

    font-size: 8px;
}


.technology-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

.tech-visual {

    position: absolute;

    right: 5%;

    top: 0;

    width: 48%;

    height: 100%;

    z-index: 5;
}


/* Glow */

.tech-circle {

    position: absolute;

    width: 310px;

    height: 310px;

    right: 10%;

    top: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(48,128,211,.20),
            rgba(48,128,211,.04) 55%,
            transparent 70%
        );
}


/* =====================================================
   LAPTOP
===================================================== */

.tech-laptop {

    position: absolute;

    width: 330px;

    height: 210px;

    right: 13%;

    top: 47px;

    transform: perspective(800px) rotateY(-8deg);

    z-index: 5;
}


.laptop-screen {

    position: absolute;

    left: 18px;

    top: 0;

    width: 294px;

    height: 178px;

    padding: 23px 25px;

    border: 7px solid #182b40;

    border-bottom-width: 10px;

    border-radius: 12px 12px 5px 5px;

    background:
        linear-gradient(
            145deg,
            #0b1d31,
            #102b4c
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),

        inset 0 0 30px
        rgba(36,133,220,.12);
}


/* Laptop screen glow */

.laptop-screen::before {

    content: "";

    position: absolute;

    inset: 10px;

    border: 1px solid rgba(50,145,230,.12);

    border-radius: 5px;
}


/* Code */

.code-line {

    position: relative;

    z-index: 2;

    margin-bottom: 11px;

    color: #d7e5f3;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .2px;
}


.code-line span {

    color: #f15a24;

    margin-right: 5px;
}


.code-line b {

    color: #4ea7ff;
}


.code-line.short {

    color: #9eb5ca;

    padding-left: 14px;
}


.code-line:nth-child(3) span {

    color: #48c78e;
}


/* Laptop base */

.laptop-base {

    position: absolute;

    left: 0;

    bottom: 10px;

    width: 330px;

    height: 17px;

    border-radius: 0 0 25px 25px;

    background:
        linear-gradient(
            #536679,
            #263849
        );

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


.laptop-base::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 5px;

    transform: translateX(-50%);

    width: 55px;

    height: 4px;

    border-radius: 5px;

    background: #17283a;
}


/* =====================================================
   CIRCUITS
===================================================== */

.circuit {

    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(65,160,245,.65),
            transparent
        );

    z-index: 2;
}


.circuit-1 {

    width: 145px;

    right: 4%;

    top: 70px;

    transform: rotate(12deg);
}


.circuit-2 {

    width: 110px;

    right: 2%;

    top: 220px;

    transform: rotate(-15deg);
}


.circuit-3 {

    width: 90px;

    left: 0;

    top: 85px;

    transform: rotate(-12deg);
}


.circuit-4 {

    width: 120px;

    right: 24%;

    bottom: 25px;

    transform: rotate(8deg);
}


/* Circuit dots */

.circuit-dot {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #f15a24;

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

    z-index: 4;
}


.dot-1 {

    right: 2%;

    top: 66px;
}


.dot-2 {

    right: 0;

    top: 217px;
}


.dot-3 {

    left: 0;

    top: 81px;
}


.dot-4 {

    right: 22%;

    bottom: 22px;
}


/* =====================================================
   TECH ICONS
===================================================== */

.tech-icon {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 10px;

    color: #ffffff;

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

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

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

    font-size: 16px;

    z-index: 6;
}


.cloud-icon {

    right: 1%;

    top: 30px;

    color: #4ca7ff;
}


.database-icon {

    right: 2%;

    bottom: 38px;

    color: #f15a24;
}


.code-icon {

    left: 8%;

    top: 30px;

    color: #4ca7ff;
}


.network-icon {

    left: 3%;

    bottom: 35px;

    color: #ffffff;
}


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

@media (max-width: 991px) {

    .technology-content {

        width: 60%;
    }

    .tech-visual {

        right: -5%;

        width: 50%;

        opacity: .75;
    }

    .tech-laptop {

        transform:
            perspective(800px)
            rotateY(-8deg)
            scale(.82);
    }

}


@media (max-width: 767px) {

    .technology-banner {

        height: 280px;
    }

    .technology-content {

        width: 100%;

        text-align: center;
    }

    .technology-content h1::after {

        margin-left: auto;

        margin-right: auto;
    }

    .technology-banner::before,
    .technology-banner::after {

        opacity: .65;
    }

    .tech-visual {

        right: -30%;

        width: 70%;

        opacity: .25;
    }

}


@media (max-width: 575px) {

    .technology-banner {

        height: 260px;
    }

    .technology-content h1 {

        font-size: 36px;
    }

    .technology-content p {

        font-size: 9px;
    }

    .technology-tag {

        font-size: 7px;
    }

}




/* =====================================================
   PRAJAPATI TECHNOLOGY SECTION
===================================================== */

.prajapati-technology-section {

    position: relative;

    padding: 95px 0;

    background: #f7f9fc;

    overflow: hidden;
}


.prajapati-technology-section::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: -200px;

    border-radius: 50%;

    background: rgba(16,43,84,.035);
}


.prajapati-technology-section .container {

    position: relative;

    z-index: 2;
}


/* =====================================================
   TECHNOLOGY SHOWCASE
===================================================== */

.technology-showcase {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.tech-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(30,110,200,.13),
            transparent 68%
        );
}


/* =====================================================
   DASHBOARD
===================================================== */

.tech-dashboard {

    position: relative;

    width: 450px;

    min-height: 365px;

    padding: 25px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #071b33,
            #102f53
        );

    box-shadow:
        0 30px 60px rgba(8,30,55,.25);

    transform:
        perspective(1000px)
        rotateY(3deg);

    overflow: hidden;
}


/* Dashboard light */

.tech-dashboard::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(35,133,225,.25),
            transparent 70%
        );
}


/* =====================================================
   DASHBOARD TOP
===================================================== */

.dashboard-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;
}


.dashboard-brand {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;
}


.dashboard-brand i {

    color: #f15a24;

    font-size: 17px;
}


.live-status {

    padding: 5px 9px;

    border-radius: 20px;

    background: rgba(47,196,130,.12);

    color: #54d89b;

    font-size: 8px;

    font-weight: 700;
}


.live-status i {

    margin-right: 4px;

    font-size: 5px;
}


/* =====================================================
   TRACKING CARD
===================================================== */

.tracking-card {

    position: relative;

    z-index: 2;

    padding: 21px;

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

    border-radius: 14px;

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

    backdrop-filter: blur(8px);
}


.tracking-header {

    display: flex;

    justify-content: space-between;

    color: #dce7f3;

    font-size: 10px;

    font-weight: 500;
}


.tracking-header i {

    color: #f15a24;
}


.tracking-number {

    margin-top: 9px;

    color: #ffffff;

    font-family: monospace;

    font-size: 12px;

    font-weight: 600;
}


/* Tracking line */

.tracking-progress {

    display: flex;

    align-items: center;

    margin-top: 30px;
}


.track-point {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: #7e94aa;

    font-size: 8px;

    white-space: nowrap;
}


.track-point i {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #263f5c;

    font-size: 11px;
}


.track-point.active {

    color: #ffffff;
}


.track-point.active i {

    background: #d71920;

    color: #ffffff;

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


.track-line {

    flex: 1;

    height: 2px;

    margin: 0 5px;

    background: #314a66;
}


.track-line.active {

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


/* =====================================================
   DASHBOARD STATS
===================================================== */

.dashboard-stats {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin-top: 16px;
}


.dashboard-stat {

    padding: 13px 8px;

    text-align: center;

    border-radius: 10px;

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

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


.dashboard-stat i {

    display: block;

    margin-bottom: 6px;

    color: #f15a24;

    font-size: 14px;
}


.dashboard-stat strong {

    display: block;

    color: #ffffff;

    font-size: 10px;
}


.dashboard-stat span {

    display: block;

    margin-top: 2px;

    color: #8298ae;

    font-size: 8px;
}


/* =====================================================
   FLOATING ICONS
===================================================== */

.floating-tech-icon {

    position: absolute;

    width: 47px;
    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #ffffff;

    color: #102b54;

    font-size: 16px;

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

    z-index: 5;
}


.icon-api {

    left: -22px;

    top: 100px;
}


.icon-cloud {

    right: -20px;

    top: 65px;

    color: #1e72d8;
}


.icon-database {

    right: -18px;

    bottom: 65px;

    color: #d71920;
}


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

.technology-experience {

    position: absolute;

    left: 5px;

    bottom: 35px;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 17px;

    background: #d71920;

    border-radius: 10px;

    color: #ffffff;

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


.technology-experience strong {

    font-size: 25px;

    line-height: 1;
}


.technology-experience span {

    font-size: 8px;

    line-height: 1.4;
}


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

.technology-content-box {

    padding-left: 15px;
}


.technology-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #d71920;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.technology-subtitle i {

    color: #f15a24;
}


.technology-content-box h2 {

    margin: 13px 0 18px;

    color: #102b54;

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

    font-size: 38px;

    line-height: 1.25;

    font-weight: 600;
}


.technology-content-box h2 span {

    display: block;

    color: #d71920;

    font-weight: 700;
}


/* Description */

.technology-description {

    margin-bottom: 10px;

    color: #718095;

    font-size: 12px;

    line-height: 1.85;
}


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

.technology-features {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 25px;
}


.technology-feature {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 13px;

    background: #ffffff;

    border: 1px solid #e4e9ef;

    border-radius: 10px;

    transition: .3s ease;
}


.technology-feature:hover {

    transform: translateY(-4px);

    border-color: rgba(215,25,32,.25);

    box-shadow:
        0 10px 25px rgba(16,43,84,.07);
}


.feature-icon {

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #102b54;

    color: #ffffff;

    font-size: 12px;
}


.technology-feature:hover .feature-icon {

    background: #d71920;
}


.technology-feature h4 {

    margin: 0 0 4px;

    color: #102b54;

    font-size: 12px;

    font-weight: 600;
}


.technology-feature p {

    margin: 0;

    color: #7b8797;

    font-size: 9px;

    line-height: 1.55;
}


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

.technology-quote {

    position: relative;

    margin-top: 22px;

    padding: 17px 20px 17px 38px;

    background: #eef3f8;

    border-left: 3px solid #d71920;

    border-radius: 0 10px 10px 0;
}


.technology-quote > i {

    position: absolute;

    left: 13px;

    top: 18px;

    color: #d71920;

    font-size: 14px;
}


.technology-quote p {

    margin: 0;

    color: #69788a;

    font-size: 10px;

    line-height: 1.7;
}


.technology-sign {

    margin-top: 9px;
}


.technology-sign strong {

    display: block;

    color: #102b54;

    font-family: cursive;

    font-size: 17px;

    font-style: italic;
}


.technology-sign span {

    color: #d71920;

    font-size: 8px;

    font-weight: 600;
}


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

.technology-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    padding: 12px 20px;

    background: #102b54;

    border-radius: 7px;

    color: #ffffff !important;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none !important;

    transition: .3s ease;
}


.technology-button i {

    color: #f15a24;

    font-size: 9px;
}


.technology-button:hover {

    background: #d71920;

    transform: translateY(-2px);
}


.technology-button:hover i {

    color: #ffffff;
}


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

@media (max-width: 1199px) {

    .technology-content-box h2 {

        font-size: 33px;
    }

    .tech-dashboard {

        width: 410px;
    }

}


@media (max-width: 991px) {

    .prajapati-technology-section {

        padding: 70px 0;
    }

    .technology-showcase {

        min-height: 470px;
    }

    .technology-content-box {

        padding-left: 0;
    }

}


@media (max-width: 575px) {

    .prajapati-technology-section {

        padding: 55px 0;
    }

    .technology-showcase {

        min-height: 390px;
    }

    .tech-dashboard {

        width: 100%;

        min-height: 320px;

        padding: 18px;
    }

    .laptop-screen {

        width: 90%;
    }

    .technology-content-box h2 {

        font-size: 28px;
    }

    .technology-features {

        grid-template-columns: 1fr;
    }

    .technology-experience {

        left: 0;

        bottom: 15px;
    }

    .floating-tech-icon {

        display: none;
    }

}


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

.air-freight-banner {

    position: relative;

    width: 100%;

    height: 310px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            110deg,
            #071a31 0%,
            #12345a 48%,
            #2f5878 100%
        );
}


/* Light airport atmosphere */

.air-freight-banner::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -100px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(82,170,235,.28),
            transparent 68%
        );
}


/* Orange sunrise */

.air-freight-banner::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: 13%;
    bottom: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,154,48,.18),
            transparent 70%
        );
}


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

.air-banner-content {

    position: relative;

    z-index: 20;

    width: 52%;

    padding: 40px 0;
}


.air-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #ff8b35;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.air-tag i {

    color: #ffffff;

    font-size: 12px;
}


.air-banner-content h1 {

    margin: 0;

    color: #ffffff;

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

    font-size: 50px;

    line-height: 1.1;

    font-weight: 700;
}


.air-banner-content h1::after {

    content: "";

    display: block;

    width: 55px;

    height: 3px;

    margin-top: 12px;

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


.air-banner-content p {

    margin: 13px 0 20px;

    color: #d5e3ef;

    font-size: 11px;
}


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

.air-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 8px 15px;

    border-radius: 30px;

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

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

    backdrop-filter: blur(7px);
}


.air-breadcrumb a {

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 10px;
}


.air-breadcrumb a i {

    margin-right: 5px;

    color: #ff7d32;
}


.air-breadcrumb > i {

    color: #849aae;

    font-size: 8px;
}


.air-breadcrumb span {

    color: #ff8b35;

    font-size: 10px;

    font-weight: 600;
}


/* =====================================================
   AIR VISUAL
===================================================== */

.air-visual {

    position: absolute;

    right: 2%;

    top: 0;

    width: 55%;

    height: 100%;

    z-index: 5;
}


/* Glow */

.air-glow {

    position: absolute;

    width: 400px;

    height: 400px;

    right: 8%;

    top: -55px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(95,190,255,.20),
            transparent 68%
        );
}


/* =====================================================
   AIRCRAFT
===================================================== */

.aircraft {

    position: absolute;

    right: 11%;

    top: 55px;

    z-index: 10;

    transform: rotate(-8deg);
}


.aircraft i {

    color: #ffffff;

    font-size: 100px;

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


/* Orange aircraft accent */

.aircraft::after {

    content: "";

    position: absolute;

    width: 90px;

    height: 4px;

    right: 35px;

    bottom: -7px;

    border-radius: 10px;

    background: #f15a24;

    transform: rotate(8deg);
}


/* =====================================================
   FLIGHT ROUTES
===================================================== */

.flight-route {

    position: absolute;

    height: 1px;

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

    border-radius: 50%;
}


.route-one {

    width: 270px;

    right: 18%;

    top: 72px;

    transform: rotate(-12deg);
}


.route-two {

    width: 220px;

    right: 1%;

    top: 170px;

    transform: rotate(14deg);
}


/* =====================================================
   LOCATION DOTS
===================================================== */

.airport-dot {

    position: absolute;

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d71920;

    color: #ffffff;

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

    font-size: 11px;

    z-index: 11;
}


.dot-one {

    right: 49%;

    top: 112px;
}


.dot-two {

    right: 2%;

    top: 177px;
}


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

.cargo-box {

    position: absolute;

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            #d89139,
            #a95e18
        );

    color: #ffe7bf;

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

    z-index: 7;
}


.cargo-box i {

    font-size: 20px;
}


.cargo-one {

    right: 32%;

    bottom: 40px;

    transform: rotate(-7deg);
}


.cargo-two {

    right: 23%;

    bottom: 42px;

    transform: rotate(5deg);
}


.cargo-three {

    right: 27%;

    bottom: 82px;

    transform: rotate(-2deg);
}


/* =====================================================
   AIRPORT BUILDING
===================================================== */

.airport-building {

    position: absolute;

    right: 6%;

    bottom: 0;

    width: 300px;

    height: 62px;

    background:
        linear-gradient(
            #c8d3dc,
            #8395a4
        );

    border-radius: 4px 4px 0 0;

    opacity: .75;

    z-index: 2;
}


.airport-building::before {

    content: "AIR CARGO";

    position: absolute;

    left: 18px;

    top: 12px;

    color: #29445d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.airport-building span {

    position: relative;

    display: inline-block;

    width: 30px;

    height: 18px;

    margin: 32px 3px 0;

    background: #29445d;

    opacity: .55;
}


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

@media (max-width: 991px) {

    .air-banner-content {

        width: 60%;
    }

    .aircraft {

        right: 2%;

        transform:
            rotate(-8deg)
            scale(.75);
    }

    .air-visual {

        right: -5%;

        width: 55%;
    }

}


@media (max-width: 767px) {

    .air-freight-banner {

        height: 280px;
    }

    .air-banner-content {

        width: 100%;

        text-align: center;
    }

    .air-banner-content h1::after {

        margin-left: auto;

        margin-right: auto;
    }

    .air-visual {

        opacity: .20;

        right: -25%;

        width: 75%;
    }

}


@media (max-width: 575px) {

    .air-freight-banner {

        height: 260px;
    }

    .air-banner-content h1 {

        font-size: 36px;
    }

    .air-banner-content p {

        font-size: 9px;
    }

    .air-tag {

        font-size: 7px;
    }

}




/* =====================================================
   PRAJAPATI ABOUT PAGE TITLE
===================================================== */

.prajapati-page-title {
    position: relative;
    width: 100%;
    min-height: 300px;

    display: flex;
    align-items: center;

    overflow: hidden;

    /* Image-like background without separate HTML image */
    background:
        linear-gradient(
            90deg,
            rgba(6, 25, 48, .96) 0%,
            rgba(8, 31, 58, .88) 42%,
            rgba(8, 31, 58, .52) 68%,
            rgba(8, 31, 58, .25) 100%
        ),
        linear-gradient(
            135deg,
            #071b32,
            #244762
        );
}


/* =====================================================
   RIGHT SIDE VISUAL EFFECT
===================================================== */

.prajapati-page-title::before {
    content: "";

    position: absolute;

    right: -80px;
    top: -100px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.05) 35%,
            transparent 70%
        );

    z-index: 1;
}


/* Cargo / warehouse style diagonal */

.prajapati-page-title::after {
    content: "";

    position: absolute;

    right: 12%;
    top: -100px;

    width: 190px;
    height: 500px;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

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

    border-right: 1px solid rgba(255,255,255,.06);

    z-index: 2;
}


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

.prajapati-page-title .container {
    position: relative;
    z-index: 10;
}


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

.prajapati-page-title-inner {
    min-height: 300px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


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

.page-title-left {
    position: relative;

    max-width: 650px;
}


/* Company label */

.page-title-tag {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 15px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.6px;

    backdrop-filter: blur(6px);
}


.page-title-tag::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f15a24;

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


/* Heading */

.page-title-left h1 {
    margin: 14px 0 8px;

    color: #ffffff;

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

    font-size: 48px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.5px;
}


/* Red highlight */

.page-title-left h1 span {
    color: #f15a24;
}


/* Underline */

.page-title-left h1::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin-top: 13px;

    border-radius: 5px;

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


/* Description */

.page-title-left p {
    margin: 0;

    color: #d2deeb;

    font-size: 12px;

    line-height: 1.7;
}


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

.page-breadcrumb {
    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 17px;

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

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

    border-radius: 9px;

    backdrop-filter: blur(8px);

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


.page-breadcrumb a {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #ffffff !important;

    font-size: 11px;

    font-weight: 500;

    text-decoration: none !important;

    transition: all .25s ease;
}


.page-breadcrumb a i {
    color: #f15a24;

    font-size: 10px;
}


.page-breadcrumb a:hover {
    color: #f15a24 !important;
}


.page-breadcrumb > span {
    color: rgba(255,255,255,.45);

    font-size: 9px;
}


.page-breadcrumb strong {
    color: #f15a24;

    font-size: 11px;

    font-weight: 600;
}


/* =====================================================
   BOTTOM RED LINE
===================================================== */

.prajapati-page-title .container::after {
    content: "";

    position: absolute;

    left: 12px;
    bottom: -1px;

    width: 70px;
    height: 4px;

    border-radius: 5px;

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


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

@media (max-width: 991px) {

    .prajapati-page-title {
        min-height: 280px;
    }

    .prajapati-page-title-inner {
        min-height: 280px;
    }

    .page-title-left h1 {
        font-size: 42px;
    }

    .page-breadcrumb {
        padding: 10px 14px;
    }

}


@media (max-width: 767px) {

    .prajapati-page-title {
        min-height: 270px;
    }

    .prajapati-page-title-inner {
        min-height: 270px;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 20px;
    }

    .page-title-left h1 {
        font-size: 36px;
    }

    .page-title-left p {
        font-size: 10px;
    }

    .page-breadcrumb {
        align-self: flex-start;
    }

}


@media (max-width: 480px) {

    .prajapati-page-title {
        min-height: 250px;
    }

    .prajapati-page-title-inner {
        min-height: 250px;
    }

    .page-title-left h1 {
        font-size: 31px;
    }

    .page-title-tag {
        font-size: 7px;

        letter-spacing: 1px;
    }

    .page-breadcrumb a,
    .page-breadcrumb strong {
        font-size: 9px;
    }

}



/* =====================================================
   PRAJAPATI LEADERSHIP HEADING
===================================================== */

.prajapati-leadership-heading {

    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;

    position: relative;
}


/* Small Label */

.leadership-heading-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 16px;

    border-radius: 30px;

    background: #f5f7fa;

    border: 1px solid #e2e7ee;

    color: #d71920;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.leadership-heading-tag i {

    color: #f15a24;

    font-size: 12px;
}


/* Heading */

.prajapati-leadership-heading h2 {

    margin: 15px 0 10px;

    color: #102b54;

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

    font-size: 38px;

    line-height: 1.25;

    font-weight: 600;
}


.prajapati-leadership-heading h2 span {

    color: #d71920;

    font-weight: 700;
}


/* Decorative line */

.prajapati-leadership-heading h2::after {

    content: "";

    display: block;

    width: 55px;

    height: 3px;

    margin: 13px auto 0;

    border-radius: 5px;

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


/* Description */

.prajapati-leadership-heading p {

    max-width: 560px;

    margin: 14px auto 0;

    color: #788597;

    font-size: 12px;

    line-height: 1.8;
}


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

@media (max-width: 767px) {

    .prajapati-leadership-heading {

        margin-bottom: 35px;
    }

    .prajapati-leadership-heading h2 {

        font-size: 30px;
    }

    .prajapati-leadership-heading p {

        font-size: 11px;

        padding: 0 10px;
    }

}


@media (max-width: 480px) {

    .prajapati-leadership-heading h2 {

        font-size: 27px;
    }

    .leadership-heading-tag {

        font-size: 8px;

        letter-spacing: 1.2px;
    }

}



/* =====================================================
   PRAJAPATI AIR FREIGHT PAGE
===================================================== */

.pj-air-service {
    padding: 80px 0;
    background: #f6f8fb;
    font-family: "Poppins", sans-serif;
}


/* =====================================================
   LAYOUT
===================================================== */

.pj-air-layout {
    display: grid;
    grid-template-columns: 285px 1fr;
    gap: 35px;
    align-items: start;
}


/* =====================================================
   SIDEBAR
===================================================== */

.pj-service-sidebar {
    position: sticky;
    top: 25px;
}


.pj-side-title {
    padding: 22px 22px 18px;
    background: #102b54;
    border-radius: 14px 14px 0 0;
}


.pj-side-title span {
    color: #f15a24;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


.pj-side-title h3 {
    margin: 6px 0 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}


/* Service menu */

.pj-service-menu {
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-top: 0;
}


.pj-service-menu li {
    margin-bottom: 4px;
}


.pj-service-menu li:last-child {
    margin-bottom: 0;
}


.pj-service-menu a {
    min-height: 55px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #526276;
    text-decoration: none !important;
    border-radius: 8px;
    transition: .3s ease;
}


.pj-service-menu a:hover,
.pj-service-menu li.active a {
    color: #fff;
    background: #d71920;
}


.service-icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d71920;
    background: #f4f6f9;
    border-radius: 7px;
}


.pj-service-menu a:hover .service-icon,
.pj-service-menu li.active .service-icon {
    color: #d71920;
    background: #fff;
}


.pj-service-menu a > span:nth-child(2) {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
}


.pj-service-menu a > i {
    font-size: 9px;
    opacity: .5;
}


.pj-service-menu li.active a > i,
.pj-service-menu a:hover > i {
    opacity: 1;
}


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

.pj-side-contact {
    position: relative;
    margin-top: 20px;
    padding: 28px 20px;
    text-align: center;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(145deg, #102b54, #071a31);
}


.pj-side-contact::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -100px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
}


.contact-circle {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #d71920;
    border-radius: 50%;
    font-size: 18px;
}


.pj-side-contact > span {
    color: #f15a24;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.pj-side-contact h4 {
    margin: 7px 0 18px;
    color: #fff;
    font-size: 18px;
}


.pj-side-contact > a {
    display: block;
    margin: 9px 0;
    color: #d7e0ea !important;
    font-size: 9px;
    text-decoration: none !important;
}


.pj-side-contact > a i {
    width: 20px;
    color: #f15a24;
}


.side-social {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
}


.side-social a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    font-size: 10px;
    transition: .3s ease;
}


.side-social a:hover {
    background: #d71920;
    border-color: #d71920;
}


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

.pj-air-hero {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 18px;
    background: #102b54;
}


.pj-air-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}


.pj-air-hero:hover img {
    transform: scale(1.04);
}


.pj-air-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(5,22,43,.92) 0%,
            rgba(7,28,53,.67) 45%,
            rgba(7,28,53,.10) 100%
        );
}


.pj-air-hero-content {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 550px;
}


.pj-air-hero-content > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f15a24;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}


.pj-air-hero-content h1 {
    margin: 12px 0;
    color: #fff;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 600;
}


.pj-air-hero-content h1 strong {
    display: block;
    color: #f15a24;
    font-weight: 700;
}


.pj-air-hero-content p {
    max-width: 440px;
    margin: 0;
    color: #d8e2ed;
    font-size: 11px;
    line-height: 1.8;
}


/* Badge */

.pj-air-badge {
    position: absolute;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    background: rgba(5,22,43,.65);
    backdrop-filter: blur(8px);
}


.pj-air-badge > i {
    color: #f15a24;
    font-size: 20px;
}


.pj-air-badge strong {
    display: block;
    color: #fff;
    font-size: 10px;
}


.pj-air-badge small {
    color: #b9c8d7;
    font-size: 8px;
}


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

.pj-content-block {
    padding: 45px 5px 25px;
}


.pj-small-heading {
    color: #d71920;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


.pj-content-block h2,
.pj-benefit-content h2 {
    margin: 9px 0 15px;
    color: #102b54;
    font-size: 31px;
    line-height: 1.3;
    font-weight: 600;
}


.pj-content-block h2 span,
.pj-benefit-content h2 span {
    color: #d71920;
}


.pj-content-block p,
.pj-benefit-content p,
.pj-bottom-text p {
    color: #6f7e90;
    font-size: 11px;
    line-height: 1.9;
}


/* =====================================================
   STATS
===================================================== */

.pj-air-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin: 10px 0 45px;
}


.pj-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
}


.stat-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d71920;
    background: #fff1f2;
    border-radius: 9px;
}


.pj-stat strong {
    display: block;
    color: #102b54;
    font-size: 13px;
}


.pj-stat span {
    color: #8995a4;
    font-size: 8px;
}


/* =====================================================
   PERFORMANCE
===================================================== */

.pj-performance {
    padding: 30px;
    margin-bottom: 45px;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
}


.pj-section-heading > span {
    color: #d71920;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
}


.pj-section-heading h3 {
    margin: 7px 0 25px;
    color: #102b54;
    font-size: 23px;
}


.pj-section-heading h3 strong {
    color: #d71920;
}


.pj-skill {
    margin-bottom: 22px;
}


.pj-skill:last-child {
    margin-bottom: 0;
}


.pj-skill-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}


.pj-skill-head span {
    color: #46566b;
    font-size: 10px;
    font-weight: 600;
}


.pj-skill-head strong {
    color: #d71920;
    font-size: 10px;
}


.pj-progress {
    height: 7px;
    overflow: hidden;
    background: #edf0f4;
    border-radius: 20px;
}


.pj-progress span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            #102b54,
            #d71920,
            #f15a24
        );
}


/* =====================================================
   BENEFITS
===================================================== */

.pj-benefits {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 35px;
    align-items: center;
    margin-bottom: 45px;
}


.pj-benefit-content ul {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


.pj-benefit-content li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #526276;
    font-size: 9px;
}


.pj-benefit-content li i {
    color: #d71920;
    font-size: 11px;
}


.pj-benefit-image {
    position: relative;
    height: 310px;
    overflow: hidden;
    border-radius: 14px;
}


.pj-benefit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.image-label {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: #fff;
    background: #102b54;
    border-radius: 7px;
    font-size: 9px;
}


.image-label i {
    color: #f15a24;
}


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

.pj-bottom-text {
    padding: 30px;
    margin-bottom: 45px;
    border-left: 4px solid #d71920;
    background: #fff;
    border-radius: 0 12px 12px 0;
}


.pj-bottom-text h3 {
    margin: 0 0 10px;
    color: #102b54;
    font-size: 21px;
}


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

.pj-faq {
    padding-bottom: 20px;
}


.pj-faq-item {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #e4e9ef;
    border-radius: 9px;
    background: #fff;
}


.pj-faq-item button {
    width: 100%;
    padding: 17px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    background: transparent;
    color: #102b54;
    text-align: left;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}


.pj-faq-item button i {
    color: #d71920;
    font-size: 10px;
    transition: .3s ease;
}


.pj-faq-item.active button i {
    transform: rotate(45deg);
}


.pj-faq-answer {
    display: none;
    padding: 0 20px 18px;
    color: #718095;
    font-size: 10px;
    line-height: 1.8;
}


.pj-faq-item.active .pj-faq-answer {
    display: block;
}


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

@media (max-width: 991px) {

    .pj-air-layout {
        grid-template-columns: 1fr;
    }

    .pj-service-sidebar {
        position: relative;
        top: auto;
    }

    .pj-service-menu {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .pj-side-contact {
        display: none;
    }

    .pj-benefits {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767px) {

    .pj-air-service {
        padding: 50px 0;
    }

    .pj-service-menu {
        grid-template-columns: 1fr;
    }

    .pj-air-hero {
        height: 350px;
    }

    .pj-air-hero-content {
        left: 25px;
        right: 20px;
    }

    .pj-air-hero-content h1 {
        font-size: 38px;
    }

    .pj-air-badge {
        display: none;
    }

    .pj-air-stats {
        grid-template-columns: 1fr;
    }

    .pj-content-block h2,
    .pj-benefit-content h2 {
        font-size: 26px;
    }

    .pj-benefit-content ul {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .pj-air-hero {
        height: 320px;
        border-radius: 10px;
    }

    .pj-air-hero-content h1 {
        font-size: 32px;
    }

    .pj-air-hero-content p {
        font-size: 10px;
    }

    .pj-performance,
    .pj-bottom-text {
        padding: 20px;
    }

}



/* =====================================================
   ROAD FREIGHT BANNER
===================================================== */

.road-freight-banner {

    position: relative;

    width: 100%;

    height: 310px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #071a30 0%,
            #102f50 48%,
            #395a70 100%
        );
}


/* Background glow */

.road-freight-banner::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -120px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241,90,36,.20),
            transparent 68%
        );
}


.road-freight-banner::after {

    content: "";

    position: absolute;

    width: 100%;
    height: 120px;

    left: 0;
    bottom: -75px;

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

    transform: skewY(-3deg);
}


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

.road-banner-content {

    position: relative;

    z-index: 20;

    width: 55%;
}


.road-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.road-tag i {

    color: #ffffff;

    font-size: 12px;
}


.road-banner-content h1 {

    margin: 12px 0 7px;

    color: #ffffff;

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

    font-size: 50px;

    line-height: 1.1;

    font-weight: 700;
}


.road-banner-content h1 span {

    color: #f15a24;
}


.road-banner-content h1::after {

    content: "";

    display: block;

    width: 58px;

    height: 3px;

    margin-top: 12px;

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

    border-radius: 5px;
}


.road-banner-content p {

    margin: 12px 0 20px;

    color: #d4e0eb;

    font-size: 11px;
}


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

.road-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 8px 15px;

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

    border-radius: 30px;

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

    backdrop-filter: blur(8px);
}


.road-breadcrumb a {

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 10px;
}


.road-breadcrumb a i {

    margin-right: 5px;

    color: #f15a24;
}


.road-breadcrumb > i {

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

    font-size: 8px;
}


.road-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

.road-visual {

    position: absolute;

    right: 0;

    top: 0;

    width: 57%;

    height: 100%;

    z-index: 5;
}


/* Glow */

.road-glow {

    position: absolute;

    width: 430px;
    height: 430px;

    right: 3%;

    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.12),
            transparent 68%
        );
}


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

.freight-truck {

    position: absolute;

    right: 12%;

    bottom: 80px;

    z-index: 12;

    transform: scaleX(-1) rotate(-2deg);
}


.freight-truck i {

    color: #ffffff;

    font-size: 115px;

    filter:
        drop-shadow(
            0 15px 15px rgba(0,0,0,.30)
        );
}


/* Truck orange accent */

.freight-truck::after {

    content: "";

    position: absolute;

    width: 105px;

    height: 5px;

    right: 12px;

    bottom: -8px;

    border-radius: 10px;

    background: #f15a24;
}


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

.road-route {

    position: absolute;

    height: 1px;

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

    border-radius: 50%;
}


.route-1 {

    width: 300px;

    right: 19%;

    top: 85px;

    transform: rotate(-10deg);
}


.route-2 {

    width: 230px;

    right: 0;

    top: 155px;

    transform: rotate(8deg);
}


/* =====================================================
   LOCATION POINTS
===================================================== */

.road-point {

    position: absolute;

    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d71920;

    color: #ffffff;

    font-size: 11px;

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

    z-index: 14;
}


.point-1 {

    right: 46%;

    top: 95px;
}


.point-2 {

    right: 3%;

    top: 158px;
}


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

.road-cargo {

    position: absolute;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #d9913c,
            #995718
        );

    color: #ffe7c1;

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

    z-index: 10;
}


.road-cargo i {

    font-size: 18px;
}


.cargo-1 {

    right: 31%;

    bottom: 47px;

    transform: rotate(-5deg);
}


.cargo-2 {

    right: 25%;

    bottom: 48px;

    transform: rotate(6deg);
}


/* =====================================================
   HIGHWAY
===================================================== */

.highway {

    position: absolute;

    width: 600px;

    height: 90px;

    right: -70px;

    bottom: -25px;

    background:
        linear-gradient(
            180deg,
            #263b4b,
            #172735
        );

    transform:
        perspective(250px)
        rotateX(55deg);

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

    z-index: 3;
}


/* =====================================================
   HIGHWAY DASHES
===================================================== */

.highway-line {

    position: absolute;

    width: 80px;

    height: 4px;

    right: 15%;

    bottom: 29px;

    border-radius: 10px;

    background: #e7c66b;

    z-index: 5;
}


.line-1 {

    right: 27%;
}


.line-2 {

    right: 8%;

    bottom: 22px;
}


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

@media (max-width: 991px) {

    .road-banner-content {

        width: 62%;
    }

    .freight-truck {

        right: 2%;

        transform:
            scaleX(-1)
            rotate(-2deg)
            scale(.75);
    }

    .road-visual {

        width: 55%;
    }

}


@media (max-width: 767px) {

    .road-freight-banner {

        height: 280px;
    }

    .road-banner-content {

        width: 100%;

        text-align: center;
    }

    .road-banner-content h1::after {

        margin-left: auto;

        margin-right: auto;
    }

    .road-visual {

        right: -25%;

        width: 75%;

        opacity: .20;
    }

}


@media (max-width: 575px) {

    .road-freight-banner {

        height: 260px;
    }

    .road-banner-content h1 {

        font-size: 36px;
    }

    .road-banner-content p {

        font-size: 9px;
    }

    .road-tag {

        font-size: 7px;
    }

}


/* =====================================================
   PRAJAPATI ROAD FREIGHT PAGE
===================================================== */

.road-service-page {

    padding: 75px 0;

    background: #f6f8fb;

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

}


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

.road-service-header {

    position: relative;

    min-height: 240px;

    margin-bottom: 35px;

    padding: 45px 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            #071a31 0%,
            #102b54 60%,
            #193d60 100%
        );

}


.road-service-header::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

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

    border-radius: 50%;

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

}


.road-service-header::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: 100px;
    bottom: -260px;

    border-radius: 50%;

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

}


.road-header-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

}


.road-service-label {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.road-service-label i {

    color: #ffffff;

    font-size: 12px;

}


.road-header-content h1 {

    margin: 10px 0 5px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.1;

    font-weight: 700;

}


.road-header-content h1 span {

    color: #f15a24;

}


.road-header-content p {

    margin: 0;

    color: #c9d6e3;

    font-size: 11px;

    line-height: 1.7;

}


/* Header icon */

.road-header-icon {

    position: relative;

    z-index: 2;

    width: 130px;
    height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

}


.road-header-icon i {

    color: #ffffff;

    font-size: 47px;

    margin-bottom: 8px;

}


.road-header-icon span {

    color: #f15a24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-align: center;

}


/* =====================================================
   LAYOUT
===================================================== */

.road-service-layout {

    display: grid;

    grid-template-columns: 270px 1fr;

    gap: 35px;

    align-items: start;

}


/* =====================================================
   SIDEBAR
===================================================== */

.road-service-sidebar {

    position: sticky;

    top: 25px;
}


/* Menu */

.road-menu-title {

    padding: 20px;

    background: #102b54;

    border-radius: 13px 13px 0 0;
}


.road-menu-title span {

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.road-menu-title h3 {

    margin: 5px 0 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 600;
}


.road-service-menu {

    margin: 0;

    padding: 8px;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e5e9ef;

    border-top: 0;
}


.road-service-menu li {

    margin-bottom: 4px;
}


.road-service-menu li:last-child {

    margin-bottom: 0;
}


.road-service-menu a {

    min-height: 50px;

    padding: 8px 11px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #536277;

    text-decoration: none !important;

    border-radius: 8px;

    transition: .3s ease;
}


.road-service-menu a > i {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d71920;

    background: #f4f6f9;

    border-radius: 7px;

    font-size: 12px;
}


.road-service-menu a span {

    flex: 1;

    font-size: 10px;

    font-weight: 600;
}


.road-service-menu a b {

    font-size: 12px;

    font-weight: 400;

    opacity: .4;
}


.road-service-menu li:hover a,
.road-service-menu li.active a {

    color: #ffffff;

    background: #d71920;
}


.road-service-menu li:hover a > i,
.road-service-menu li.active a > i {

    color: #d71920;

    background: #ffffff;
}


.road-service-menu li:hover a b,
.road-service-menu li.active a b {

    opacity: 1;
}


/* =====================================================
   HELP BOX
===================================================== */

.road-help-box {

    position: relative;

    margin-top: 18px;

    padding: 25px 20px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #102b54,
            #071a31
        );
}


.road-help-box::after {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

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


.help-icon {

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    color: #ffffff;

    background: #d71920;

    border-radius: 50%;

    font-size: 15px;
}


.road-help-box > span {

    color: #f15a24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.road-help-box h4 {

    margin: 6px 0 17px;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.35;
}


.road-help-box > a:not(.help-button) {

    display: block;

    margin: 9px 0;

    color: #d4deea !important;

    text-decoration: none !important;

    font-size: 8px;
}


.road-help-box > a i {

    width: 19px;

    color: #f15a24;
}


.help-button {

    margin-top: 20px;

    padding: 10px 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #ffffff !important;

    text-decoration: none !important;

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

    border-radius: 7px;

    font-size: 9px;

    font-weight: 600;
}


.help-button i {

    color: #f15a24;
}


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

.road-main-image {

    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 17px;
}


.road-main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s ease;
}


.road-main-image:hover img {

    transform: scale(1.04);
}


.road-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,20,38,.9),
            rgba(5,20,38,.25)
        );
}


.road-image-text {

    position: absolute;

    left: 35px;

    top: 50%;

    transform: translateY(-50%);
}


.road-image-text span {

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.road-image-text h2 {

    margin: 10px 0 0;

    color: #ffffff;

    font-size: 37px;

    line-height: 1.15;

    font-weight: 500;
}


.road-image-text h2 strong {

    color: #f15a24;

    font-weight: 700;
}


.road-image-badge {

    position: absolute;

    right: 22px;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border-radius: 9px;

    background: rgba(7,26,48,.75);

    backdrop-filter: blur(8px);

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


.road-image-badge strong {

    color: #f15a24;

    font-size: 23px;

    line-height: 1;
}


.road-image-badge span {

    color: #ffffff;

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================================
   INTRO
===================================================== */

.road-intro {

    padding: 40px 5px 20px;
}


.road-content-label {

    color: #d71920;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.road-intro h2 {

    margin: 9px 0 14px;

    color: #102b54;

    font-size: 31px;

    line-height: 1.3;

    font-weight: 600;
}


.road-intro h2 span {

    color: #d71920;
}


.road-intro p {

    margin-bottom: 11px;

    color: #6f7d90;

    font-size: 11px;

    line-height: 1.9;
}


/* =====================================================
   FEATURE CARDS
===================================================== */

.road-feature-grid {

    display: grid;

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

    gap: 12px;

    margin: 10px 0 45px;
}


.road-feature-card {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px;

    background: #ffffff;

    border: 1px solid #e5e9ef;

    border-radius: 10px;

    transition: .3s ease;
}


.road-feature-card:hover {

    transform: translateY(-4px);

    border-color: #d71920;

    box-shadow:
        0 12px 25px rgba(16,43,84,.07);
}


.feature-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d71920;

    background: #fff1f2;

    border-radius: 9px;

    font-size: 16px;
}


.road-feature-card h4 {

    margin: 0 0 4px;

    color: #102b54;

    font-size: 11px;
}


.road-feature-card p {

    margin: 0;

    color: #8490a0;

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================================
   GALLERY
===================================================== */

.road-gallery {

    margin-bottom: 45px;
}


.gallery-heading > span {

    color: #d71920;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.gallery-heading h3 {

    margin: 7px 0 20px;

    color: #102b54;

    font-size: 23px;
}


.gallery-heading h3 strong {

    color: #d71920;
}


.road-gallery-grid {

    display: grid;

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

    gap: 12px;
}


.gallery-item {

    position: relative;

    height: 210px;

    overflow: hidden;

    border-radius: 11px;
}


.gallery-item.large {

    height: 210px;
}


.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s ease;
}


.gallery-item:hover img {

    transform: scale(1.07);
}


.gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 45%,
            rgba(4,19,35,.8)
        );
}


.gallery-item > div {

    position: absolute;

    left: 14px;

    bottom: 13px;

    z-index: 2;

    color: #ffffff;
}


.gallery-item span {

    margin-right: 6px;

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;
}


.gallery-item strong {

    font-size: 9px;
}


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

.road-why-section {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 150px;

    gap: 30px;

    padding: 35px;

    margin-bottom: 30px;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            120deg,
            #102b54,
            #071a31
        );
}


.road-why-section::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    top: -160px;

    border-radius: 50%;

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


.road-why-content {

    position: relative;

    z-index: 2;
}


.road-why-content > span {

    color: #f15a24;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.road-why-content h2 {

    margin: 8px 0 10px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.25;
}


.road-why-content h2 strong {

    color: #f15a24;
}


.road-why-content > p {

    max-width: 650px;

    color: #bac9d8;

    font-size: 10px;

    line-height: 1.8;
}


/* Checks */

.road-check-list {

    display: grid;

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

    gap: 9px;

    margin: 20px 0;
}


.road-check-list div {

    color: #d8e1eb;

    font-size: 8px;
}


.road-check-list i {

    margin-right: 6px;

    color: #f15a24;
}


.road-quote-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 11px 17px;

    color: #ffffff !important;

    background: #d71920;

    border-radius: 6px;

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 600;
}


.road-quote-btn i {

    font-size: 8px;
}


/* Number */

.road-why-number {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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


.road-why-number span {

    color: #71869b;

    font-size: 8px;

    letter-spacing: 2px;
}


.road-why-number strong {

    color: #ffffff;

    font-size: 65px;

    line-height: .9;

    font-weight: 700;
}


.road-why-number small {

    color: #f15a24;

    font-size: 8px;

    text-align: center;

    line-height: 1.5;
}


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

@media (max-width: 991px) {

    .road-service-layout {

        grid-template-columns: 1fr;
    }

    .road-service-sidebar {

        position: relative;

        top: auto;
    }

    .road-help-box {

        display: none;
    }

}


@media (max-width: 767px) {

    .road-service-page {

        padding: 50px 0;
    }

    .road-service-header {

        min-height: 260px;

        padding: 35px 25px;
    }

    .road-header-icon {

        display: none;
    }

    .road-header-content h1 {

        font-size: 39px;
    }

    .road-main-image {

        height: 330px;
    }

    .road-image-text {

        left: 25px;
    }

    .road-image-text h2 {

        font-size: 30px;
    }

    .road-feature-grid {

        grid-template-columns: 1fr;
    }

    .road-gallery-grid {

        grid-template-columns: 1fr;
    }

    .gallery-item,
    .gallery-item.large {

        height: 220px;
    }

    .road-why-section {

        grid-template-columns: 1fr;

        padding: 25px;
    }

    .road-why-number {

        display: none;
    }

}


@media (max-width: 480px) {

    .road-service-header {

        border-radius: 12px;
    }

    .road-header-content h1 {

        font-size: 33px;
    }

    .road-intro h2 {

        font-size: 26px;
    }

    .road-check-list {

        grid-template-columns: 1fr;
    }

}


/* =====================================================
   RAIL FREIGHT BANNER
===================================================== */

.rail-freight-banner {

    position: relative;

    width: 100%;

    height: 310px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #071a30 0%,
            #102b54 52%,
            #263f57 100%
        );

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


/* Background glow */

.rail-freight-banner::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241,90,36,.18),
            transparent 68%
        );
}


.rail-freight-banner::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100px;

    left: 0;

    bottom: -65px;

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

    transform: skewY(-3deg);
}


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

.rail-banner-content {

    position: relative;

    z-index: 20;

    width: 55%;
}


.rail-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f15a24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.rail-tag i {

    color: #ffffff;

    font-size: 12px;
}


.rail-banner-content h1 {

    margin: 11px 0 6px;

    color: #ffffff;

    font-size: 50px;

    line-height: 1.05;

    font-weight: 700;
}


.rail-banner-content h1 span {

    color: #f15a24;
}


.rail-banner-content h1::after {

    content: "";

    display: block;

    width: 60px;

    height: 3px;

    margin-top: 12px;

    border-radius: 5px;

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


.rail-banner-content p {

    max-width: 440px;

    margin: 12px 0 20px;

    color: #d2deea;

    font-size: 11px;

    line-height: 1.7;
}


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

.rail-breadcrumb {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 8px 15px;

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

    border-radius: 30px;

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

    backdrop-filter: blur(8px);
}


.rail-breadcrumb a {

    color: #ffffff !important;

    font-size: 10px;

    text-decoration: none !important;
}


.rail-breadcrumb a i {

    margin-right: 5px;

    color: #f15a24;
}


.rail-breadcrumb > i {

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

    font-size: 8px;
}


.rail-breadcrumb span {

    color: #f15a24;

    font-size: 10px;

    font-weight: 600;
}


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

.rail-visual {

    position: absolute;

    right: 0;

    top: 0;

    width: 58%;

    height: 100%;

    z-index: 5;
}


/* Glow */

.rail-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    right: 2%;

    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            transparent 68%
        );
}


/* =====================================================
   RAILWAY TRACK
===================================================== */

.rail-track {

    position: absolute;

    right: -30px;

    bottom: -15px;

    width: 560px;

    height: 175px;

    transform:
        perspective(300px)
        rotateX(58deg);

    z-index: 3;
}


.rail-line {

    position: absolute;

    bottom: 20px;

    width: 5px;

    height: 100%;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #87929c,
            #d4d9dc,
            #6f7b84
        );

    box-shadow:
        0 0 5px rgba(0,0,0,.4);
}


.rail-left {

    left: 85px;
}


.rail-right {

    right: 85px;
}


/* =====================================================
   RAIL SLEEPERS
===================================================== */

.rail-sleeper {

    position: absolute;

    left: 50%;

    width: 390px;

    height: 13px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            #574d42,
            #302a25
        );

    border-radius: 2px;

    opacity: .9;
}


.sleeper-1 {

    bottom: 24px;

    width: 480px;
}


.sleeper-2 {

    bottom: 55px;

    width: 430px;
}


.sleeper-3 {

    bottom: 86px;

    width: 375px;
}


.sleeper-4 {

    bottom: 117px;

    width: 320px;
}


.sleeper-5 {

    bottom: 145px;

    width: 270px;
}


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

.rail-train {

    position: absolute;

    right: 13%;

    bottom: 90px;

    display: flex;

    align-items: flex-end;

    gap: 4px;

    z-index: 12;

    filter:
        drop-shadow(
            0 15px 12px rgba(0,0,0,.35)
        );

    transform:
        scaleX(-1)
        rotate(-2deg);
}


.train-engine {

    width: 105px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #d71920,
            #94131a
        );

    border-radius: 8px 8px 2px 2px;

    border-bottom: 6px solid #202b34;
}


.train-engine i {

    color: #ffffff;

    font-size: 55px;
}


.train-wagon {

    width: 88px;

    height: 63px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #b87932,
            #75481c
        );

    border-radius: 5px;

    border-bottom: 6px solid #202a31;
}


.train-wagon i {

    color: #f9d49b;

    font-size: 26px;
}


/* =====================================================
   LOCATION POINTS
===================================================== */

.rail-location {

    position: absolute;

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background: #d71920;

    border-radius: 50%;

    font-size: 11px;

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

    z-index: 15;
}


.location-start {

    right: 47%;

    top: 80px;
}


.location-end {

    right: 4%;

    top: 125px;
}


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

.rail-route {

    position: absolute;

    width: 310px;

    height: 110px;

    right: 9%;

    top: 75px;

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

    border-radius: 50%;

    transform: rotate(8deg);
}


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

@media (max-width: 991px) {

    .rail-banner-content {

        width: 62%;
    }

    .rail-visual {

        width: 55%;
    }

    .rail-train {

        right: -2%;

        transform:
            scaleX(-1)
            rotate(-2deg)
            scale(.75);
    }

}


@media (max-width: 767px) {

    .rail-freight-banner {

        height: 280px;
    }

    .rail-banner-content {

        width: 100%;

        text-align: center;
    }

    .rail-banner-content h1::after {

        margin-left: auto;

        margin-right: auto;
    }

    .rail-visual {

        right: -20%;

        width: 75%;

        opacity: .22;
    }

}


@media (max-width: 575px) {

    .rail-freight-banner {

        height: 260px;
    }

    .rail-banner-content h1 {

        font-size: 37px;
    }

    .rail-banner-content p {

        font-size: 9px;
    }

    .rail-tag {

        font-size: 7px;
    }

}


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

.pj-why-logistics {

    padding: 85px 0;

    background: #f7f9fc;

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

}


/* Heading */

.pj-why-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 40px;
}


.pj-why-heading span {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #d71920;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.pj-why-heading span i {

    color: #f15a24;

    font-size: 12px;
}


.pj-why-heading h2 {

    margin: 9px 0 0;

    color: #102b54;

    font-size: 34px;

    line-height: 1.2;

    font-weight: 600;
}


.pj-why-heading h2 strong {

    color: #d71920;

    font-weight: 700;
}


.pj-why-heading > p {

    max-width: 370px;

    margin: 0;

    color: #758397;

    font-size: 10px;

    line-height: 1.8;
}


/* =====================================================
   WHY LAYOUT
===================================================== */

.pj-why-layout {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 18px;
}


/* =====================================================
   MAIN FEATURE
===================================================== */

.pj-why-main {

    position: relative;

    min-height: 335px;

    padding: 38px;

    overflow: hidden;

    border-radius: 16px;

    background:
        linear-gradient(
            140deg,
            #102b54 0%,
            #071a31 100%
        );

    box-shadow:
        0 18px 35px rgba(16,43,84,.12);
}


.pj-why-main::before {

    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -120px;
    top: -110px;

    border-radius: 50%;

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


.pj-why-main::after {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -50px;
    bottom: -110px;

    border-radius: 50%;

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


.pj-why-main-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    color: #ffffff;

    background: #d71920;

    border-radius: 10px;

    font-size: 18px;
}


.pj-why-main-label {

    color: #f15a24 !important;

    font-size: 7px !important;

    font-weight: 700 !important;

    letter-spacing: 1.7px;
}


.pj-why-main h3 {

    position: relative;

    z-index: 2;

    max-width: 310px;

    margin: 9px 0 12px;

    color: #ffffff;

    font-size: 27px;

    line-height: 1.25;

    font-weight: 500;
}


.pj-why-main h3 span {

    color: #f15a24;
}


.pj-why-main p {

    position: relative;

    z-index: 2;

    max-width: 350px;

    color: #bdccdc;

    font-size: 9px;

    line-height: 1.8;
}


/* Stat */

.pj-why-stat {

    position: absolute;

    right: 28px;

    bottom: 25px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 8px;
}


.pj-why-stat strong {

    color: #ffffff;

    font-size: 25px;

    line-height: 1;
}


.pj-why-stat span {

    color: #aabaca;

    font-size: 7px;

    line-height: 1.4;
}


/* =====================================================
   FEATURE CARDS
===================================================== */

.pj-why-features {

    display: grid;

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

    gap: 14px;
}


.pj-why-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 24px;

    overflow: hidden;

    border: 1px solid #e5e9ef;

    border-radius: 13px;

    background: #ffffff;

    transition: .3s ease;
}


.pj-why-card:hover {

    transform: translateY(-5px);

    border-color: #d71920;

    box-shadow:
        0 14px 30px rgba(16,43,84,.08);
}


.pj-why-card-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d71920;

    background: #fff1f2;

    border-radius: 10px;

    font-size: 16px;

    transition: .3s ease;
}


.pj-why-card:hover .pj-why-card-icon {

    color: #ffffff;

    background: #d71920;
}


.pj-why-card h4 {

    margin: 0 0 5px;

    color: #102b54;

    font-size: 12px;

    font-weight: 700;
}


.pj-why-card p {

    margin: 0;

    color: #8190a1;

    font-size: 8px;

    line-height: 1.6;
}


.pj-card-number {

    position: absolute;

    right: 14px;

    top: 11px;

    color: #e9edf2;

    font-size: 22px;

    font-weight: 700;
}


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

.pj-process {

    position: relative;

    padding: 85px 0;

    background: #ffffff;

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


/* Heading */

.pj-process-heading {

    text-align: center;

    margin-bottom: 55px;
}


.pj-process-heading > span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #d71920;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.pj-process-heading h2 {

    margin: 10px 0 7px;

    color: #102b54;

    font-size: 32px;

    font-weight: 600;
}


.pj-process-heading h2 strong {

    color: #d71920;
}


.pj-process-heading p {

    margin: 0;

    color: #8793a2;

    font-size: 9px;
}


/* =====================================================
   PROCESS TRACK
===================================================== */

.pj-process-track {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr 70px 1fr 70px 1fr 70px 1fr;

    align-items: start;

    max-width: 1050px;

    margin: auto;
}


.pj-process-step {

    position: relative;

    text-align: center;
}


.pj-process-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 16px;

    color: #d71920;

    background: #ffffff;

    border: 1px solid #e3e8ee;

    border-radius: 50%;

    box-shadow:
        0 8px 20px rgba(16,43,84,.07);

    font-size: 19px;

    transition: .3s ease;
}


.pj-process-step:hover .pj-process-icon {

    color: #ffffff;

    background: #d71920;

    border-color: #d71920;

    transform: translateY(-5px);
}


.pj-process-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 23px;
    height: 23px;

    margin-bottom: 9px;

    color: #ffffff;

    background: #102b54;

    border-radius: 50%;

    font-size: 7px;

    font-weight: 700;
}


.pj-process-step h4 {

    margin: 0 0 7px;

    color: #102b54;

    font-size: 12px;

    font-weight: 700;
}


.pj-process-step p {

    max-width: 150px;

    margin: auto;

    color: #8793a2;

    font-size: 8px;

    line-height: 1.6;
}


/* =====================================================
   PROCESS CONNECTOR
===================================================== */

.pj-process-line {

    position: relative;

    height: 1px;

    margin-top: 32px;

    background:
        repeating-linear-gradient(
            90deg,
            #d71920 0,
            #d71920 5px,
            transparent 5px,
            transparent 10px
        );
}


.pj-process-line::after {

    content: "";

    position: absolute;

    right: -2px;

    top: -3px;

    width: 7px;
    height: 7px;

    border-top: 1px solid #d71920;

    border-right: 1px solid #d71920;

    transform: rotate(45deg);
}


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

@media (max-width: 991px) {

    .pj-why-layout {

        grid-template-columns: 1fr;
    }

    .pj-why-main {

        min-height: 300px;
    }

    .pj-process-track {

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

        gap: 45px 25px;
    }

    .pj-process-line {

        display: none;
    }

}


@media (max-width: 767px) {

    .pj-why-logistics,
    .pj-process {

        padding: 60px 0;
    }

    .pj-why-heading {

        display: block;
    }

    .pj-why-heading > p {

        margin-top: 15px;
    }

    .pj-why-heading h2 {

        font-size: 29px;
    }

    .pj-why-features {

        grid-template-columns: 1fr;
    }

    .pj-process-track {

        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 480px) {

    .pj-why-main {

        padding: 27px;
    }

    .pj-why-main h3 {

        font-size: 24px;
    }

    .pj-why-stat {

        right: 20px;

        bottom: 20px;
    }

    .pj-process-heading h2 {

        font-size: 27px;
    }

}


.ew-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

.ew-dropdown li a > i {
    width: 20px !important;
    min-width: 20px !important;

    text-align: center !important;

    color: #1677e8 !important;

    font-size: 13px !important;

    transition: all .25s ease !important;
}

.ew-dropdown li a:hover > i {
    color: #ff5722 !important;
    transform: translateX(2px) !important;
}

.ew-dropdown li a span {
    color: inherit !important;
}

.ew-has-dropdown > a::after {
    display: none !important;
}


/* =========================================================
   PROFESSIONAL NAVBAR MENU
========================================================= */

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

.header-style2 .navbar-nav > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Main Menu Links */

.header-style2 .navbar-nav > li > a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    height: 78px !important;

    padding: 0 17px !important;

    color: #202633 !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    letter-spacing: .1px !important;

    text-decoration: none !important;

    transition: all .25s ease !important;
}


/* Bottom Hover Line */

.header-style2 .navbar-nav > li > a::before {
    content: "";

    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 12px;

    height: 2px;

    background: linear-gradient(
        90deg,
        #1677e8,
        #ff5722
    );

    border-radius: 10px;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform .3s ease;
}


.header-style2 .navbar-nav > li:hover > a::before {
    transform: scaleX(1);
}


/* Hover */

.header-style2 .navbar-nav > li:hover > a {
    color: #1677e8 !important;
}


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

.header-style2 .ew-dropdown-link > i {
    font-size: 10px !important;

    color: #596273 !important;

    margin-left: 2px !important;

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

.header-style2 .ew-has-dropdown:hover > .ew-dropdown-link > i {
    color: #1677e8 !important;

    transform: rotate(180deg) !important;
}


/* Remove old automatic arrow */

.header-style2 .ew-has-dropdown > a::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   DROPDOWN BOX
========================================================= */

.header-style2 .ew-dropdown {
    position: absolute !important;

    top: calc(100% - 2px) !important;
    left: 0 !important;

    min-width: 235px !important;

    margin: 0 !important;
    padding: 8px !important;

    background: #ffffff !important;

    border: 1px solid #edf0f5 !important;

    border-radius: 10px !important;

    box-shadow:
        0 18px 45px rgba(15, 35, 65, .14) !important;

    z-index: 9999 !important;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease !important;
}


/* Open Dropdown */

.header-style2 .ew-has-dropdown:hover > .ew-dropdown {
    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;
}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.header-style2 .ew-dropdown li {
    position: relative !important;

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

    list-style: none !important;
}

.header-style2 .ew-dropdown li a {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    width: 100% !important;

    min-height: 44px !important;

    padding: 10px 13px !important;

    border-radius: 7px !important;

    color: #303744 !important;

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

    font-size: 13.5px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        color .2s ease,
        padding .2s ease !important;
}


/* Dropdown Icons */

.header-style2 .ew-dropdown li a > i {
    width: 20px !important;

    min-width: 20px !important;

    text-align: center !important;

    font-size: 13px !important;

    color: #1677e8 !important;

    transition: .2s ease !important;
}


/* Dropdown Hover */

.header-style2 .ew-dropdown li a:hover {
    color: #1677e8 !important;

    background: #f2f7ff !important;

    padding-left: 17px !important;
}

.header-style2 .ew-dropdown li a:hover > i {
    color: #ff5722 !important;

    transform: translateX(2px) !important;
}


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

.header-style2 .ew-track-btn {
    height: 46px !important;

    min-width: 125px !important;

    display: inline-flex !important;

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

    gap: 8px !important;

    margin-left: 12px !important;

    padding: 0 20px !important;

    border-radius: 7px !important;

    background: linear-gradient(
        135deg,
        #1677e8,
        #0756c9
    ) !important;

    color: #ffffff !important;

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

    font-size: 14px !important;

    font-weight: 600 !important;

    box-shadow:
        0 7px 20px rgba(22,119,232,.22) !important;

    transition: all .25s ease !important;
}

.header-style2 .ew-track-btn:hover {
    color: #fff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 11px 28px rgba(22,119,232,.32) !important;
}


/* =========================================================
   NAVBAR HEIGHT
========================================================= */

.header-style2 .navbar-default {
    background: #ffffff !important;
}

.header-style2 .menu_area {
    min-height: 78px !important;
}

.header-style2 .navbar {
    min-height: 78px !important;
}


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

@media (max-width: 991px) {

    .header-style2 .navbar-nav {
        display: block !important;
    }

    .header-style2 .navbar-nav > li > a {
        height: auto !important;

        min-height: 52px !important;

        padding: 14px 18px !important;

        font-size: 15px !important;
    }

    .header-style2 .navbar-nav > li > a::before {
        display: none !important;
    }

    .header-style2 .ew-dropdown {
        position: static !important;

        width: 100% !important;

        min-width: 0 !important;

        box-shadow: none !important;

        border: 0 !important;

        border-radius: 0 !important;

        transform: none !important;
    }

}



/* =========================================================
   PROFESSIONAL HERO SWIPER
========================================================= */

.hero-slide {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* =========================================================
   SLIDE IMAGE - SMOOTH ZOOM
========================================================= */

.heroSwiper .swiper-slide .hero-slide {
    transform: scale(1);
    transition: transform 6s ease-in-out;
}

.heroSwiper .swiper-slide-active .hero-slide {
    transform: scale(1.045);
}


/* =========================================================
   PROFESSIONAL DARK OVERLAY
========================================================= */

.hero-slide .overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(5, 22, 42, .62) 0%,
            rgba(5, 22, 42, .30) 42%,
            rgba(5, 22, 42, .08) 75%,
            rgba(5, 22, 42, .20) 100%
        ) !important;
}


/* Bottom subtle gradient */

.hero-slide .overlay::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 150px;

    background: linear-gradient(
        to top,
        rgba(4,18,35,.30),
        transparent
    );
}


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

.hero-slide .container {
    position: relative;

    height: 100%;

    z-index: 3;

    display: flex;

    align-items: center;
}

.hero-content {
    position: relative;

    z-index: 4;

    max-width: 650px;
}


/* =========================================================
   SWIPER ARROWS
========================================================= */

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

    width: 48px !important;
    height: 48px !important;

    border-radius: 50% !important;

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

    border: 1px solid rgba(255,255,255,.38) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

    color: #ffffff !important;

    transition:
        all .3s ease !important;

    z-index: 10 !important;
}


/* Arrow icon */

.heroSwiper .swiper-button-next::after,
.heroSwiper .swiper-button-prev::after {

    font-size: 16px !important;

    font-weight: 700 !important;
}


/* Hover */

.heroSwiper .swiper-button-next:hover,
.heroSwiper .swiper-button-prev:hover {

    background: #1677e8 !important;

    border-color: #1677e8 !important;

    transform: scale(1.08);
}


/* Position */

.heroSwiper .swiper-button-prev {
    left: 28px !important;
}

.heroSwiper .swiper-button-next {
    right: 28px !important;
}


/* =========================================================
   PAGINATION
========================================================= */

.heroSwiper .swiper-pagination {

    bottom: 25px !important;

    z-index: 10 !important;
}


.heroSwiper .swiper-pagination-bullet {

    width: 9px !important;
    height: 9px !important;

    margin: 0 5px !important;

    opacity: 1 !important;

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

    border: 1px solid rgba(255,255,255,.8) !important;

    transition: all .3s ease !important;
}


.heroSwiper .swiper-pagination-bullet-active {

    width: 30px !important;

    border-radius: 20px !important;

    background: #ff5722 !important;

    border-color: #ff5722 !important;
}


/* =========================================================
   OPTIONAL HERO TEXT
   Agar future mein text add karein to ready rahega
========================================================= */

.hero-content span {

    display: inline-block;

    margin-bottom: 15px;

    padding: 8px 15px;

    border-radius: 30px;

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

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

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    backdrop-filter: blur(8px);
}


.hero-content h1 {

    margin: 0;

    color: #ffffff;

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

    font-size: 52px;

    line-height: 1.15;

    font-weight: 700;

    text-shadow: 0 5px 20px rgba(0,0,0,.25);
}


.hero-content h1 strong {
    color: #ff5722;
}


.hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 25px;

    padding: 13px 27px;

    border-radius: 6px;

    background: #1677e8;

    color: #ffffff !important;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: all .3s ease;
}


.hero-btn:hover {

    background: #ff5722;

    color: #ffffff !important;

    transform: translateY(-2px);

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


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

@media (max-width: 991px) {

    .hero-slide {
        height: 460px;
    }

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

        width: 40px !important;
        height: 40px !important;
    }

    .heroSwiper .swiper-button-prev {
        left: 12px !important;
    }

    .heroSwiper .swiper-button-next {
        right: 12px !important;
    }

    .heroSwiper .swiper-button-next::after,
    .heroSwiper .swiper-button-prev::after {
        font-size: 13px !important;
    }

    .heroSwiper .swiper-pagination {
        bottom: 18px !important;
    }
}


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

@media (max-width: 575px) {

    .hero-slide {
        height: 390px;
    }

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

        width: 34px !important;
        height: 34px !important;

        background: rgba(8,35,65,.55) !important;
    }

    .heroSwiper .swiper-button-prev {
        left: 8px !important;
    }

    .heroSwiper .swiper-button-next {
        right: 8px !important;
    }

    .heroSwiper .swiper-button-next::after,
    .heroSwiper .swiper-button-prev::after {
        font-size: 11px !important;
    }

    .heroSwiper .swiper-pagination {
        bottom: 14px !important;
    }

    .heroSwiper .swiper-pagination-bullet {
        width: 7px !important;
        height: 7px !important;
        margin: 0 3px !important;
    }

    .heroSwiper .swiper-pagination-bullet-active {
        width: 22px !important;
    }
}


/* =========================================================
   FINAL MOBILE HEADER
========================================================= */

@media (max-width: 991px) {

    /* TOP BAR */
    .header-style2 .top-bar {
        background: #082b55 !important;
        padding: 6px 10px !important;
        min-height: 42px !important;
    }

    .header-style2 .top-contact {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 15px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-style2 .top-contact li {
        color: #fff !important;
        font-size: 10.5px !important;
        line-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-style2 .top-contact li i {
        color: #ff5b22 !important;
        margin-right: 4px !important;
    }

    .header-style2 .top-right {
        display: flex !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }

    .header-style2 .social-icons {
        display: flex !important;
        gap: 6px !important;
    }

    .header-style2 .social-icons a {
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 11px !important;
    }


    /* NAVBAR */

    .header-style2 .navbar-default {
        background: #fff !important;
        position: relative !important;
        border-bottom: 1px solid #e8ebef !important;
    }

    .header-style2 .menu_area,
    .header-style2 nav.navbar {
        height: 86px !important;
        min-height: 86px !important;
    }


    /* LOGO */

    .header-style2 .navbar-header-custom {
        height: 86px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 12px !important;
    }

    .header-style2 .navbar-brand {
        height: 86px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-style2 .responsive-logo {
        width: 190px !important;
        max-width: 190px !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }


    /* =====================================================
       CLEAN HAMBURGER BUTTON
    ===================================================== */

    .header-style2 .navbar-toggler {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 46px !important;
        height: 46px !important;

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

        background: #17145d !important;
        border: 0 !important;
        border-radius: 6px !important;

        z-index: 10020 !important;

        font-size: 0 !important;
        box-shadow: 0 5px 15px rgba(23,20,93,.20) !important;
    }


    /* Hamburger */

    .header-style2 .navbar-toggler::before,
    .header-style2 .navbar-toggler::after {
        content: "" !important;

        position: absolute !important;

        left: 12px !important;

        width: 22px !important;
        height: 2px !important;

        background: #fff !important;

        border-radius: 5px !important;

        transition: .25s ease !important;
    }

    .header-style2 .navbar-toggler::before {
        top: 17px !important;

        box-shadow:
            0 6px 0 #fff,
            0 12px 0 #fff !important;
    }

    .header-style2 .navbar-toggler::after {
        display: none !important;
    }


    /* OPEN = CROSS */

    .header-style2 .navbar-toggler.ew-menu-open::before {
        top: 22px !important;

        box-shadow: none !important;

        transform: rotate(45deg) !important;
    }

    .header-style2 .navbar-toggler.ew-menu-open {
        background: #17145d !important;
    }

    .header-style2 .navbar-toggler.ew-menu-open::after {
        display: block !important;

        top: 22px !important;
        left: 12px !important;

        transform: rotate(-45deg) !important;
    }


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

    .header-style2 #nav {
        position: absolute !important;

        top: 86px !important;
        left: 8px !important;
        right: 8px !important;

        width: auto !important;

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

        background: #fff !important;

        border: 1px solid #e5e8ed !important;
        border-radius: 0 0 8px 8px !important;

        box-shadow: 0 15px 35px rgba(0,0,0,.14) !important;

        z-index: 10010 !important;

        display: none !important;
    }

    .header-style2 #nav.ew-mobile-open {
        display: block !important;
    }


    /* MAIN MENU */

    .header-style2 #nav > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 1px solid #edf0f3 !important;
    }

    .header-style2 #nav > li:last-child {
        border-bottom: 0 !important;
    }

    .header-style2 #nav > li > a {
        min-height: 52px !important;

        padding: 14px 17px !important;

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

        color: #252b35 !important;

        font-family: "Poppins", sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;

        text-decoration: none !important;

        background: #fff !important;
    }

    .header-style2 #nav > li > a:hover {
        color: #1677e8 !important;
        background: #f7faff !important;
    }


    /* REMOVE OLD ARROW */

    .header-style2 #nav > li > a::after,
    .header-style2 .ew-has-dropdown > a::after {
        display: none !important;
        content: none !important;
    }


    /* DROPDOWN ARROW */

    .header-style2 .ew-dropdown-link > i {
        margin-left: auto !important;

        color: #657080 !important;

        font-size: 10px !important;

        transition: transform .25s ease !important;
    }

    .header-style2 .ew-has-dropdown.active
    > .ew-dropdown-link > i {
        transform: rotate(180deg) !important;
        color: #1677e8 !important;
    }


    /* =====================================================
       SUB MENU
    ===================================================== */

    .header-style2 #nav .ew-dropdown {
        position: static !important;

        display: none !important;

        width: 100% !important;
        min-width: 100% !important;

        margin: 0 !important;

        padding: 5px 10px 8px !important;

        background: #f7f9fc !important;

        border: 0 !important;

        box-shadow: none !important;
    }

    .header-style2 #nav
    .ew-has-dropdown.active
    > .ew-dropdown {
        display: block !important;
    }

    .header-style2 #nav .ew-dropdown li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-style2 #nav .ew-dropdown li a {
        min-height: 43px !important;

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

        gap: 10px !important;

        padding: 10px 12px !important;

        color: #4b5563 !important;

        font-size: 13.5px !important;
        font-weight: 500 !important;

        border-radius: 5px !important;
    }

    .header-style2 #nav .ew-dropdown li a > i {
        width: 20px !important;
        min-width: 20px !important;

        color: #1677e8 !important;

        text-align: center !important;
    }


    /* TRACK BUTTON HIDE */

    .header-style2 .attr-nav {
        display: none !important;
    }


    /* SEARCH HIDE */

    .header-style2 .top-search {
        display: none !important;
    }
}


/* SMALL MOBILE */

@media (max-width: 575px) {

    .header-style2 .responsive-logo {
        width: 180px !important;
        max-width: 180px !important;
    }

    .header-style2 .menu_area,
    .header-style2 nav.navbar,
    .header-style2 .navbar-header-custom,
    .header-style2 .navbar-brand {
        height: 80px !important;
        min-height: 80px !important;
    }

    .header-style2 #nav {
        top: 80px !important;
    }

    .header-style2 .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
        right: 12px !important;
    }
}