.why-cardbody {
    font-family: "Open Sans", sans-serif;
    color: #333;
    overflow-x: hidden;
}

:root {
    --theme-blue: #0061CA;
    --font-color: #232323;
    --theme-orange: #ff7a18;
}

a {
    text-decoration: none;
    color: var(--font-color);
}

ul li {
    color: var(--font-color);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Cairo", sans-serif;
}

.theme-border {
    border: 1px solid var(--theme-blue) !important;
}

.theme-border-style-2 {
    border: 1px dotted var(--theme-blue) !important;
}

.theme-border2 {
    border: 1px solid var(--theme-orange) !important;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1250px;
    }
}

p {
    color: #272525;
    font-size: 18px;
    text-transform: none !important;
}

.mt-50 {
    margin-top: 50px;
}

.mb-80 {
    margin-bottom: 80px;
}

.fs-40 {
    font-size: 40px;
}

/* END global */
.header-right img {
    height: 60px;
}

/* Make smooth transition */
.top-header {
    transition: all 0.4s ease;
}

/* Hide top-header when scrolling down */
.top-header.hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Sticky main header */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: -110px;
    z-index: 1000;
}

.header-left img {
    height: 80px;
}

/* Header Styling */
.main-header {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.navbar .nav-link {
    color: #000;
    font-weight: 500;
    padding: 10px 16px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #0056b3;
}

.navbar .dropdown-menu {
    border-radius: 0;
    border-top: 2px solid #0056b3;
}

.navbar .dropdown-item:hover {
    background-color: #f5f5f5;
}

.btn-primary {
    background-color: #0056b3;
    border: none;
    padding: 8px 20px;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #00408a;
}

.hero {
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
    position: relative;
}

#hero-title {
    transition: opacity 0.5s ease-in-out;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero .container {
    /* position: relative; */
    z-index: 2;
}

.hero h1 {
    font-size: 60px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.hero h1 span {
    font-size: 55px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    text-transform: capitalize;
}

.home-second-section {
    padding-top: 50px;
}

.home-second-section p {
    font-size: 17px;
}

.year-floating-main {
    position: relative;
}

.year-floating-logo {
    background-image: url('../images/home/50-years.png');
    width: 130px;
    height: 180px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9;
    position: absolute;
    top: 0;
    right: 0;
}

.theme-btn {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-orange {
    background: linear-gradient(172.16deg, #FF9E36 5.08%, #E26307 93.02%);
    box-shadow: 0px 6px 0px 0px #B34B00;
}

.btn-blue {
    background: linear-gradient(172.89deg, #0061CA 18.85%, #64A5EB 93.37%);
    box-shadow: 0px 6px 0px 0px #003166;
}

.btn-orange:hover {
    box-shadow: 0px 4px 0px 0px #B34B00;
    color: #fff;
    text-decoration: none;
}

.btn-blue:hover {
    box-shadow: 0px 4px 0px 0px #003166;
    color: #fff;
    text-decoration: none;
}

.btn-orange-2 {
    background: #fff;
    color: #FF9E36;
    padding: 15px 40px;
    border-radius: 9px;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid #FF9E36;
}

.btn-orange-2:hover {
    background: linear-gradient(172.16deg, #FF9E36 5.08%, #E26307 93.02%);
    color: #fff;
}

.btn-orange-2-active {
    background: linear-gradient(172.16deg, #FF9E36 5.08%, #E26307 93.02%) !important;
    color: #fff;
}

.h-prodct-silver-bg {
    background: linear-gradient(89.78deg, rgba(255, 255, 255, 0.5) 15.64%, rgba(213, 213, 213, 0.5) 109.4%);
}

.section-title {
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-transform: uppercase;
}

.fourth-section {
    padding: 50px 0;
}

.h-prodct .product-img {
    height: 400px;
}

.highlight-strap {
    background-image: url('../images/home/strap.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-family: "Cairo", sans-serif;
}

.highlight-strap .text {
    font-size: 30px;
    font-weight: 400;
}

.highlight-strap .text span {
    font-size: 40px;
    font-weight: 700;
}

.why-card {
    padding: 25px;
    border-radius: 15px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 6.46px 0px #0000001A;
    margin-top: 30px;
    text-align: justify;
    border: 1px solid #fff;
}

.why-card:hover {
    border: 1px solid var(--theme-blue);
}

.why-card h5 {
    color: #295586;
    /* color: #0061CA;  */
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
}

.why-card ul li {
    color: var(--font-color);
}

.why-card p {
    text-align: left;
}

.h-industry {
    padding: 50px 0;
}

.industry-card {
    border: 2px solid;
    /* border width and style */
    /* border-image: linear-gradient(93.78deg, rgba(46, 109, 154, 0.6) 3.1%, rgba(243, 144, 75, 0.6) 100%); */
    border-image: linear-gradient(90deg, #2E6D9A, #F3904B);
    border-image-slice: 1;
    box-shadow: 0.5px 0.5px 6px 0px #00000026;
    padding: 20px 20px;
    color: #6C6C6C;
    height: 100%;
    vertical-align: middle;
}

.industry-card:hover {
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%),
        linear-gradient(0deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%);
    color: #fff;
}

.product-why-choose-card {
    border: 2px solid;
    /* border width and style */
    /* border-image: linear-gradient(93.78deg, rgba(46, 109, 154, 0.6) 3.1%, rgba(243, 144, 75, 0.6) 100%); */
    border-image: linear-gradient(90deg, #2E6D9A, #F3904B);
    border-image-slice: 1;
    box-shadow: 0.5px 0.5px 6px 0px #00000026;
    padding: 20px 20px;
    color: #6C6C6C;
    height: 100%;
    vertical-align: middle;
}

.product-why-choose-card h5 {
    color: #0061CA;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}

.highlight-strap-2 {
    position: relative;
}

.highlight-strap .big-title {
    font-size: 55px;
}

.highlight-strap .big-title span {
    font-weight: 700;
}

.highlight-strap .linkdin-icon {
    height: 40px;
}

.highlight-strap .owner-img {
    position: absolute;
    height: 500px;
    bottom: 0;
    right: 240px;
}

.industry-served-card {
    padding-top: 50px;
    padding-bottom: 0px;
}

.client-card-shadow {
    box-shadow: 0px 1px 4px 0px #00000033;
}

footer {
    background-image: url('../images/home/strap.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 80px;
    font-size: 14px;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer .logo {
    height: 100px;
}

footer h4 {
    text-transform: uppercase;
    font-weight: 700;
}

footer ul li {
    list-style: none;
    color: #fff;
}

footer .social-icons i {
    font-size: 20px;
}

/* ---------------------------------------------------------------------------------------------------------- */
.industries-grid span {
    display: inline-block;
    background: #f0f2f5;
    padding: 10px 20px;
    border-radius: 30px;
    margin: 5px;
    font-size: 14px;
}

.stats {
    background: #002f6c;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.clients img {
    max-height: 60px;
    filter: grayscale(100%);
    transition: 0.3s;
}

.clients img:hover {
    filter: none;
}

.copyright-footer {
    padding-top: 100px;
    padding-bottom: 30px;
    /* position: relative; */
}

.floating-footer-main {
    position: relative;
}

.floating-footer {
    width: 100%;
    padding: 20px 20px;
    background-color: #fff;
    position: absolute;
    top: -160px;
    left: 0px;
    font-weight: 600;
}

.read-more-btn-2 {
    font-weight: 700;
    text-decoration: underline;
}

.border-dashed {
    border-bottom: 1px dashed var(--theme-blue);
}

.infra-title {
    color: #6C6C6C;
    font-weight: 700;
}

/* history slider */
.timeline-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); */
    border-radius: 1rem;
    display: flex;
    gap: 60px;
}

/* 1. The Fixed Timeline Rail (Line, Dots, and Years) */
.timeline-rail {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    /* Width for the year column */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* Distribute items evenly */
    align-items: center;
    z-index: 10;
    /* Ensure it stays above the slider */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.timeline-item {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    transition: color 0.3s;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.2);
    border-color: #0056b3;
    /* Hover color for dot */
}

/* The year text */
.timeline-year {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    color: #d1d5db;
    /* Default grey color */
    transition: color 0.3s;
    width: 70px;
    /* Fixed width for alignment */
    text-align: right;
    line-height: 1;
    /* Adjust line height */
}

/* The dot on the timeline */
.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    border: 3px solid #d1d5db;
    /* Default grey border */
    /* margin-left: 10px; */
    /* Space from the year */
    z-index: 20;
    /* Bring dot above the line */
    transition: all 0.3s;
    margin-right: 10px;
}

/* Active state for the year and dot */
.timeline-item.active .timeline-year {
    color: #374151;
    /* Darker color for active year */
}

.timeline-item.active .timeline-dot {
    background-color: #0056b3;
    /* Orange fill for active dot */
    border-color: #0056b3;
    width: 16px;
    height: 16px;
}

/* 2. Swiper Container (The Content Area) */
.mySwiper {
    width: 100%;
    height: 100%;
    padding-left: 140px;
    /* Space for the fixed timeline rail */
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5rem 2rem 5rem 0;
    box-sizing: border-box;
}

/* Image and Text Layout within a slide */
.slide-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: center;
}

.slide-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .timeline-wrapper {
        height: 80vh;
        /* Make it fit better on smaller screens */
    }

    .timeline-rail {
        width: 70px;
    }

    .timeline-rail::before {
        left: 60px;
    }

    .timeline-year {
        font-size: 1.5rem;
        width: 50px;
    }

    .mySwiper {
        padding-left: 80px;
    }

    .swiper-slide {
        padding: 2rem 1rem 2rem 0;
    }

    .slide-content-grid {
        grid-template-columns: 1fr;
        /* Stack content vertically */
        gap: 1.5rem;
    }

    .slide-image {
        height: 200px;
    }
}

.timeline-seciton {
    background-color: #f7fbff;
}

.vm-card-section {
    background-image: url('../images/about/vm-section-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

.v-divider {
    border-right: 1px solid #000;
}

.vm-card-section img {
    height: 50px;
}

.ve-cultrure-section {
    padding: 100px 0;
}

.qe-section {
    background-image: url('../images/about/vm-section-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

.qe-icon img {
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-top: -96px;
    margin-left: -25px;
    border-radius: 10px 10px 10px 0;
}

.client-card-shadow img {
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

.client-card-shadow:hover {
    transform: scale(1.05);
    transition: 0.3s;
}

.billet-heater-img {
    height: 450px;
}

.year-img {
    height: 30px;
}

.theme-orange-btn {
    background: linear-gradient(172.16deg, #FF9E36 5.08%, #E26307 93.02%);
    padding: 20px 40px;
    color: #fff;
    border-radius: 8px;
    font-size: 26px;
    z-index: 1;
}

.theme-orange-btn i {
    font-size: 35px;
    margin-right: 10px;
}

.orange-btn-section {
    margin-top: -40px;
}

.contact-form {
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%),
        linear-gradient(118.72deg, #3B8BC5 -4.52%, #253C62 50.55%, #F4914B 105.62%);
    padding: 20px;
    border-radius: 4px;
    margin-right: 50px;
}

.contact-form input {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
}

.contact-us-form-section {
    margin: 100px 0;
}

.contact-form .form-btn {
    background: linear-gradient(172.16deg, #FF9E36 5.08%, #E26307 93.02%);
    color: #fff;
}

.subscribe-section {
    background-image: url('../images/contact/subscribe.png');
}

.subscribe-section input {
    padding: 10px;
}

.subscribe-form-submit-btn {
    margin-left: -5px;
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%),
        linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%);
    color: #fff;
    border: none;
}

.banner-btn-group {
    margin-top: 30px;
}

/* new */
.product-gallery {
    padding: 60px 0;
}

.product-card {
    width: 100%;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.product-card img {
    width: 100%;
    object-fit: contain;
    background: #D6D5D533;
    border-radius: 15px;
}

.cp-icon {
    width: 30px;
    height: 40px;
}

.product-benefits-card {
    margin-top: 50px;
}

/* table */

.theme-list {
    list-style: none;
}

.theme-table {
    border-radius: 18px;
}

.theme-table tr th {
    text-align: left;
    padding: 10px 20px;
    border: 1px solid #E0E0E0;
    width: 50%;
    font-weight: 700;
    font-size: 18px;
}

.theme-table tr td {
    text-align: left;
    padding: 10px 20px;
    border: 1px solid #E0E0E0;
}

.theme-table thead {
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%),
        linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%);
    color: #fff;
}

.fw-7 {
    font-weight: 700;
}

/* tabs */

button {
    border: none;
}

.tab-btn:hover {
    opacity: 0.9;
}

.btn-orange-2-active,
.tab-btn.active {
    background: linear-gradient(172.16deg, #FF9E36 5.08%, #E26307 93.02%) !important;
    color: #fff;
}

#second_tab,
#third_tab,
#fourth_tab {
    display: none;
}

.testimonial-slider .row {
    padding: 0 100px;
}

.blog {
    padding: 150px 0;
}

.blog .h1 {
    font-size: 30px;
    font-weight: 400;
}

.blog .h2 {
    font-size: 50px;
    font-weight: 700;
}

.blog-card span {
    font-size: 12px;
}

.blog-card img {
    width: 100%;
}

.single-blog-main {
    margin: 50px 0;
}

.theme-h5 {
    color: #434343;
    font-weight: 700;
}

.cta-section {
    padding: 100px 0;
    background-image: url(../images/home/strap.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.cta-section h2 {
    font-weight: 800;
    font-size: 42px;
}

.border-line {
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%);
    height: 3px;
    width: 80px;
    margin-bottom: 20px;
}

.list-unstyled li i {
    color: #4b6e94;
}

.clientVideoSlider .card {
    /* height: 450px; */
    width: 100%;
    margin: 20px auto;
    box-shadow: 0px 2px 21px 0px #00000040;
    border: 0;
}

/* career page tabs */
.jobs-section {
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

/* Tabs */
.job-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 30px;
}

.tab-btn {
    padding: 8px 18px;
    border: 1px solid #ff8a3d;
    background: #fff;
    color: #ff8a3d;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.tab-btn.active {
    background: linear-gradient(90deg, #ff7a18, #ff9f4a);
    color: #fff;
    border-color: transparent;
}

/* Grid */
.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* Card */
.job-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.job-header h3 {
    margin: 0;
}

.badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #ffe9d6;
    color: #ff7a18;
}

.badge.blue {
    background: #e7f1ff;
    color: #2f6fe4;
}

.badge.green {
    background: #e8f7ee;
    color: #1f8f4a;
}

.badge.gray {
    background: #f0f0f0;
    color: #555;
}

.job-meta {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    font-size: 14px;
    color: #666;
}

.job-meta li {
    margin-bottom: 6px;
}

.job-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

.apply-btn {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, #2f6fe4, #ff8a3d);
    font-weight: 500;
}

.life-at-pioneer img {
    height: 250px;
    border-radius: 8px;
}

.video-border {
    border: 1px dashed #2f6fe4;
    border-radius: 8px;
}

/* career form */
.resume-section {
    background: linear-gradient(89.47deg, rgba(248, 244, 242, 0.1) 7.03%, rgba(146, 144, 142, 0.1) 98.71%);
    padding: 60px 15px;
    text-align: center;
}

.resume-section h2 span {
    color: #1e73be;
}

.resume-card {
    max-width: 700px;
    margin: 40px auto 0;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.form-control,
.form-select {
    background: #f5f6f8;
    border-radius: 6px;
}

.btn-orange {
    background: linear-gradient(90deg, #ff7a18, #ff9f4a);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 500;
}

.btn-orange:hover {
    opacity: 0.9;
}

.form-text {
    font-size: 12px;
    color: #777;
}

.resume-section form label {
    color: #0061CA;
    font-weight: 600;
}

.events-hero-title {
    font-size: 120px !important;
    line-height: 0.9;
    text-transform: uppercase !important;
}

/* Years column */
.timeline-years {
    list-style: none;
    padding: 0 30px;
    margin: 0;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.timeline-years li {
    font-size: 22px;
    font-weight: 600;
    color: #cfcfcf;
    margin-bottom: 30px;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
}

.timeline-years li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #dcdcdc;
    border-radius: 50%;
    transform: translateY(-50%);
}

.timeline-years li.active {
    color: #000;
}

.timeline-years li.active::before {
    background: linear-gradient(90deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%),
        linear-gradient(0deg, #3B8BC5 0%, #253C62 50%, #F4914B 100%);

}

.timeline-section {
    background: #fbfbfbd1;
    background: linear-gradient(89.78deg, rgba(255, 255, 255, 0.5) 15.64%, rgba(213, 213, 213, 0.5) 109.4%);
}

/* Content area */
.timeline-content {
    flex: 1;
    padding-top: 100px;
    padding-left: 50px;
    /* background: #002f6c; */
    color: #002f6c;
}

.timeline-item {
    display: none;
    align-items: center;
    gap: 40px;
}

.timeline-item.active {
    display: flex;
}

.timeline-item img {
    width: 200px;
    max-width: 100%;
}

.timeline-item h2 {
    font-size: 32px;
    font-weight: 660;
    line-height: 1.2;
    text-transform: capitalize;
}

.member-section img {
    height: 310px;
    border-radius: 15px;
    background-color: #f3f9ff;
}

.member-section h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
    color: #0056b3;
}

.member-section p {
    margin: 0;
    font-size: 14px;
    color: #4a4a4a;
    font-weight: 600;
}

.member-section .content {
    padding: 20px 0;
    background-color: #eff7ff;
    border-radius: 15px;
    box-shadow: 0px 4px #0056b3;
}

.active_menu {
    color: #0056b3 !important;
}

.active_product_menu {
    background: #f5f5f5 !important;
}

/* single blog page */
.blog-system ul li {
    font-size: 1.5rem;
    list-style: disc !important;
    font-weight: 500 !important;
}

.blog-system ol li {
    font-size: 1.5rem;
    list-style: decimal !important;
    font-weight: 500 !important;
}

@media only screen and (min-width: 1200px) {
    .container-width {
        width: 900px !important;
    }
}

/* media page */
.media-tabs-section {
    /* background-color: #0056b3; */
    /* green background */
    padding-top: 60px;
}

.media-title {
    color: #0056b3;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.media-tabs {
    gap: 15px;
}

.media-tabs .nav-link {
    background-color: #fff;
    border: 2px solid #0056b3;
    color: #0056b3;
    padding: 12px 30px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    transition: all 0.3s ease;
}

.media-tabs .nav-link:hover {
    background-color: #0056b3;
    color: #fff;
}

.media-tabs .nav-link.active {
    background-color: #0056b3;
    /* orange active tab */
    border-color: #0056b3;
    color: #ffffff;
}

.tab-content {
    background-color: #ffffff;
    padding: 20px 40px;
    border-radius: 0 0 12px 12px;
}

.memeber-linkedin-icon {
    color: #0056b3;
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 30px;
}

.member-card {
    border: 1px solid #0061CA;
}

.member-card:hover {
    box-shadow: 0px 0px 46px -24px #0056b3;
    border: none;
}

.feature-card {
    box-shadow: 3px 3px #0061CA;
    border: 1px solid #0061CA;
}

.feature-card:hover {
    box-shadow: 0px 0px #0061CA;
}

.card-pointer-parent {
    position: relative;
}

.card-pointer-lt {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(172.89deg, #0061CA 18.85%, #64A5EB 93.37%);
    width: 10px;
    height: 10px;
    border-radius: 30px;
}

.card-pointer-rt {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(172.89deg, #0061CA 18.85%, #64A5EB 93.37%);
    width: 10px;
    height: 10px;
    border-radius: 30px;
}

.card-pointer-lb {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(172.89deg, #0061CA 18.85%, #64A5EB 93.37%);
    width: 10px;
    height: 10px;
    border-radius: 30px;
}

.card-pointer-rb {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: linear-gradient(172.89deg, #0061CA 18.85%, #64A5EB 93.37%);
    width: 10px;
    height: 10px;
    border-radius: 30px;
}

.industry-card:hover b {
    color: #fff !important;
}

/* Pioneer Hero Section */
.pioneer-hero-section {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    padding-left: 8%;
}

/* Content Wrapper */
.pioneer-hero-content {
    max-width: 700px;
}

/* Title */
.pioneer-hero-title {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.capacity-info p {
    font-size: 14px;
    margin-bottom: 0;
}

.industry-card:hover p {
    color: #fff;
}

.team-box {
    margin-right: 30px;
    margin-bottom: 30px;
}

.team-box p {
    text-align: center;
}

@media (max-width: 992px) {
    .pioneer-hero-section {
        height: 80vh;
        padding-left: 5%;
    }

    .pioneer-hero-title {
        font-size: 38px;
    }
}

@media (max-width: 576px) {
    .pioneer-hero-section {
        height: 70vh;
        padding: 0 20px;
    }

    .pioneer-hero-title {
        font-size: 26px;
        line-height: 1.4;
    }
}

.state-counter h2{
    font-weight: 700;
    font-size: 50px;
}

.flag-img{
    height: 20px;
}

.hide-content {
    display: none;
}

.box-1{
    border: 2px solid var(--theme-blue);
    text-align: center;
}

.box-1 img{
    width: 100%;
    padding: 10px;
}

.p-title {
    background-color: var(--theme-blue);
    color: #fff;
}

.pioneer-glance p {
    font-size: 17px !important;
}

/* ****************************************************************************************** */
/*************************************** RESPONSIVE *******************************************/
/* ****************************************************************************************** */

/* DESKTOP */
@media only screen and (min-width: 768px) {
    .floating-footer {
        width: 600px;
        font-size: 28px;
    }

    .channel-induction-furnace-img {
        height: 600px;
    }
}

/* MOBILE */
@media only screen and (max-width: 767px) {
    .year-floating-logo {
        width: 75px;
        height: 100px;
    }

    .h-prodct .product-img {
        width: 100%;
        height: auto;
    }

    .hero h1 {
        font-size: 35px;
    }

    .hero h1 span {
        font-size: 40px;
    }


    .v-divider {
        border: none;
    }

    .mobile-mt-20 {
        margin-top: 20px;
    }

    .mobile-mt-40 {
        margin-top: 40px;
    }
}