/* =====================================================
   PRESTECH HYDRAULIC CYLINDERS
   LIGHT INDUSTRIAL PREMIUM THEME
===================================================== */

:root {

    --red: #c9161d;
    --red-dark: #a90f15;
    --red-light: #e52a30;

    --dark: #1b2025;
    --dark-2: #252c32;

    --text: #596168;
    --heading: #20262b;

    --white: #ffffff;
    --light: #f5f6f7;
    --light-2: #eef0f2;

    --border: #e1e4e7;

    --heading-font: "Barlow Condensed", sans-serif;
    --body-font: "Inter", sans-serif;
}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
    font-size: 15px;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
}

.section-padding {
    padding: 110px 0;
}


/* =====================================================
   LOADER
===================================================== */

.page-loader {

    position: fixed;

    inset: 0;

    background: #ffffff;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    transition: 0.7s ease;

}

.page-loader.hide {

    opacity: 0;

    visibility: hidden;

}

.loader-logo img {

    width: 300px;

    max-width: 75vw;

    animation: logoReveal 1.2s ease;

}

.loader-line {

    width: 180px;

    height: 3px;

    background: #e9e9e9;

    margin-top: 28px;

    overflow: hidden;

}

.loader-line span {

    display: block;

    width: 50%;

    height: 100%;

    background: var(--red);

    animation: loaderLine 1.4s infinite;

}

.page-loader p {

    margin-top: 15px;

    color: #888;

    font-size: 11px;

    letter-spacing: 3px;

}

@keyframes loaderLine {

    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(350%);
    }

}

@keyframes logoReveal {

    from {

        opacity: 0;

        transform: scale(.9) translateY(10px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}


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

.topbar {

    background: var(--dark);

    color: #c8cdd1;

    font-size: 13px;

    padding: 10px 0;

}

.topbar-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.topbar-left {

    display: flex;

    gap: 25px;

}

.topbar i {

    color: var(--red-light);

    margin-right: 6px;

}


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

.main-header {

    position: absolute;

    top: 40px;

    left: 0;

    width: 100%;

    z-index: 1000;

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

    border-bottom: 1px solid rgba(0, 0, 0, .06);

    transition: .4s ease;

}

.main-header.scrolled {

    position: fixed;

    top: 0;

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

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);

}

.navbar {

    min-height: 82px;

    padding: 10px 0;

}


/* =====================================================
   LOGO
===================================================== */

.site-logo img {

    width: 285px;

    height: auto;

}


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

.nav-link {

    color: #343a40 !important;

    font-size: 16px;

    font-weight: 600;

    padding: 12px 16px !important;

    position: relative;

}

.nav-link::after {

    content: "";

    position: absolute;

    bottom: 1px;

    left: 37px;

    width: 0;

    height: 2px;

    background: var(--red);

    transition: .3s;

}

.nav-link:hover,

.nav-link.active {

    color: var(--red) !important;

}

.nav-link:hover::after,

.nav-link.active::after {

    width: calc(100% - 82px);

}

.quote-btn {

    margin-left: 15px;

    background: var(--red);

    color: white;

    padding: 14px 22px;

    font-size: 15px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    transition: .3s;

}

.quote-btn:hover {

    background: var(--dark);

    color: white;

    transform: translateY(-2px);

}


/* =====================================================
   PRODUCTS DROPDOWN
===================================================== */

.products-dropdown {
    position: relative;
}


/* -----------------------------------------------------
   DROPDOWN BOX - DESKTOP
----------------------------------------------------- */

.custom-product-dropdown {

    position: absolute;

    top: calc(100% + 12px);

    left: 50%;

    transform: translateX(-50%) translateY(10px);

    width: 390px;

    min-width: 390px;

    padding: 8px;

    margin: 0;

    background: #ffffff;

    border: 1px solid #e5e7e9;

    border-top: 3px solid var(--red);

    border-radius: 0;

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

    opacity: 0;

    visibility: hidden;

    display: block;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 9999;

}


/* -----------------------------------------------------
   TOP ARROW
----------------------------------------------------- */

.custom-product-dropdown::before {

    content: "";

    position: absolute;

    top: -9px;

    left: 50%;

    width: 16px;

    height: 16px;

    background: #ffffff;

    border-left: 1px solid #e5e7e9;

    border-top: 3px solid var(--red);

    transform: translateX(-50%) rotate(45deg);

}


/* -----------------------------------------------------
   DESKTOP HOVER
----------------------------------------------------- */

@media (min-width: 992px) {

    .products-dropdown:hover .custom-product-dropdown {

        opacity: 1;

        visibility: visible;

        transform:
            translateX(-50%) translateY(0);

    }

}


/* -----------------------------------------------------
   DROPDOWN ITEM
----------------------------------------------------- */

.custom-product-dropdown .dropdown-item {

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    color: #333b40;

    background: transparent;

    border-bottom: 1px solid #f0f1f2;

    font-family: var(--body-font);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.35;

    white-space: normal;

    transition: all .3s ease;

}


.custom-product-dropdown li:last-child .dropdown-item {

    border-bottom: 0;

}


/* -----------------------------------------------------
   PRODUCT ICON
----------------------------------------------------- */

.product-menu-icon {

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(201, 22, 29, .07);

    color: var(--red);

    font-size: 16px;

    transition: all .3s ease;

}


/* -----------------------------------------------------
   PRODUCT TEXT
----------------------------------------------------- */

.product-menu-text {

    flex: 1;

    min-width: 0;

}


/* -----------------------------------------------------
   ARROW
----------------------------------------------------- */

.menu-arrow {

    flex: 0 0 auto;

    margin-left: auto;

    color: #b5b9bc;

    font-size: 14px;

    opacity: 0;

    transform: translateX(-5px);

    transition: all .3s ease;

}


/* -----------------------------------------------------
   HOVER
----------------------------------------------------- */

.custom-product-dropdown .dropdown-item:hover {

    background: #fafafa;

    color: var(--red);

    padding-left: 17px;

}


.custom-product-dropdown .dropdown-item:hover .product-menu-icon {

    background: var(--red);

    color: #ffffff;

}


.custom-product-dropdown .dropdown-item:hover .menu-arrow {

    opacity: 1;

    transform: translateX(0);

    color: var(--red);

}

/* =====================================================
   MOBILE PRODUCTS DROPDOWN
===================================================== */

@media (max-width: 991px) {

    .products-dropdown {
        position: relative;
        width: 100%;
    }


    /* Remove active underline from Products */

    .products-dropdown>.nav-link::after,
    .products-dropdown>.nav-link.active::after {
        display: none !important;
    }


    /* Products button */

    .products-dropdown>#productsDropdown {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        cursor: pointer;

    }


    /* =================================================
       PRODUCT DROPDOWN
    ================================================= */

    .products-dropdown .custom-product-dropdown {

        position: relative !important;

        left: 0 !important;

        right: auto !important;

        top: auto !important;

        width: 100% !important;
        max-width: 275px !important;
        margin: 8px 0 15px 0 !important;

        padding: 0 !important;

        border: 1px solid #eeeeee !important;

        border-top: 2px solid var(--red) !important;

        border-radius: 0 !important;

        box-shadow: 0 8px 25px rgba(0, 0, 0, .06) !important;

        background: #fff;

        display: none;

        overflow: hidden;

    }


    /* Show dropdown */

    .products-dropdown .custom-product-dropdown.show {

        display: block !important;

    }


    /* =================================================
       PRODUCT ITEM
    ================================================= */

    .custom-product-dropdown .dropdown-item {

        display: flex;

        align-items: center;

        gap: 10px;

        width: 100%;

        min-height: 55px;

        padding: 9px 10px;

        border-bottom: 1px solid #eeeeee;

        color: #343a40;

        font-size: 12px;

        font-weight: 600;

        line-height: 1.35;

        white-space: normal;

        background: #fff;

        box-sizing: border-box;

    }


    .custom-product-dropdown .dropdown-item:last-child {

        border-bottom: 0;

    }


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

    .product-menu-icon {

        flex: 0 0 34px;

        width: 34px;

        height: 34px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: rgba(214, 25, 32, .08);

        color: var(--red);

        font-size: 14px;

    }


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

    .product-menu-text {

        flex: 1;

        min-width: 0;

        line-height: 1.35;

    }


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

    .custom-product-dropdown .menu-arrow {

        flex: 0 0 auto;

        margin-left: auto;

        color: var(--red);

        font-size: 13px;

    }


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

    .custom-product-dropdown .dropdown-item:hover {

        background: #fafafa;

        color: var(--red);

    }

}

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

.hero-section {

    position: relative;

    min-height: 780px;

    background:

        linear-gradient(110deg,
            #ffffff 0%,
            #ffffff 55%,
            #f4f5f6 100%);

    overflow: hidden;

}

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .5;

    background-image:

        linear-gradient(rgba(0, 0, 0, .025) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(0, 0, 0, .025) 1px,
            transparent 1px);

    background-size: 65px 65px;

}

.hero-red-shape {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -350px;

    top: 100px;

    border-radius: 50%;

    background: rgba(201, 22, 29, .06);

    border: 100px solid rgba(201, 22, 29, .025);

}

.hero-row {

    min-height: 780px;

    position: relative;

    z-index: 2;

}

.hero-content {

    padding-top: 70px;

}

.hero-small-title {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--red);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 25px;

}

.hero-small-title span {

    width: 35px;

    height: 2px;

    background: var(--red);

}

.hero-content h1 {

    font-size: clamp(70px, 8vw, 115px);

    font-weight: 700;

    line-height: .82;

    color: var(--heading);

    margin-bottom: 30px;

}

.hero-content h1 span {

    color: var(--red);

    position: relative;

}

.hero-content h1 span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 70px;

    height: 5px;

    background: var(--red);

}

.hero-content>p {

    max-width: 540px;

    font-size: 16px;

    line-height: 1.9;

    color: #6a737a;

    margin-bottom: 30px;

}

.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}

.primary-btn {

    background: var(--red);

    color: white;

    padding: 16px 25px;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    font-size: 14px;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    background: var(--dark);

    color: white;

    transform: translateY(-3px);

}

.secondary-btn {

    border: 1px solid #ccd0d3;

    color: var(--heading);

    padding: 15px 25px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-size: 14px;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    border-color: var(--red);

    color: var(--red);

}


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

.hero-trust {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 50px;

}

.trust-item {

    display: flex;

    flex-direction: column;

}

.trust-item strong {

    color: var(--heading);

    font-family: var(--heading-font);

    font-size: 32px;

    line-height: 1;

}

.trust-item span {

    font-size: 10px;

    color: #858c91;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-top: 6px;

}

.trust-line {

    width: 1px;

    height: 40px;

    background: #d9dcdf;

}


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

.hero-product {

    height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

.hero-cylinder-image {

    position: relative;

    width: 500px;

    height: 400px;

    z-index: 5;

    transform: rotate(-8deg);

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

}

.hero-cylinder-image::after {

    content: "";

    position: absolute;

    left: 10%;

    right: 10%;

    bottom: -30px;

    height: 35px;

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

    filter: blur(15px);

    border-radius: 50%;

}

.hero-cylinder-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    mix-blend-mode: multiply;

}

@keyframes cylinderFloat {

    0%,
    100% {

        transform:
            rotate(-8deg) translateY(0);

    }

    50% {

        transform:
            rotate(-5deg) translateY(-15px);

    }

}


/* =====================================================
   RINGS
===================================================== */

.hero-ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(201, 22, 29, .14);

}

.ring-one {

    width: 500px;

    height: 500px;

}

.ring-two {

    width: 390px;

    height: 390px;

    border-color: rgba(201, 22, 29, .1);

}

.ring-three {

    width: 280px;

    height: 280px;

    border-color: rgba(201, 22, 29, .07);

}


/* =====================================================
   SPEC CARDS
===================================================== */

.spec-card {

    position: absolute;

    z-index: 10;

    background: white;

    border: 1px solid #e3e5e7;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .1);

    padding: 16px 20px;

    display: flex;

    gap: 12px;

    align-items: center;

    animation: cardFloat 4s ease-in-out infinite;

}

.spec-card strong {

    display: block;

    color: var(--heading);

    font-size: 12px;

    letter-spacing: 1px;

}

.spec-card span {

    display: block;

    font-size: 10px;

    color: #8a9196;

    margin-top: 4px;

}

.spec-icon {

    width: 43px;

    height: 43px;

    background: rgba(201, 22, 29, .08);

    color: var(--red);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}

.spec-top {

    top: 100px;

    right: 0;

}

.spec-bottom {

    bottom: 100px;

    left: 10px;

    animation-delay: 1s;

}

@keyframes cardFloat {

    50% {

        transform: translateY(-10px);

    }

}


/* =====================================================
   SCROLL
===================================================== */

.hero-scroll {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: #9aa0a5;

    font-size: 10px;

    letter-spacing: 3px;

}

.hero-scroll i {

    color: var(--red);

    font-size: 17px;

    animation: scrollDown 1.5s infinite;

}

@keyframes scrollDown {

    50% {

        transform: translateY(7px);

    }

}


/* =====================================================
   BRAND STRIP
===================================================== */

.brand-strip {

    background: var(--dark);

    color: white;

    padding: 20px 0;

}

.brand-strip-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.brand-strip-inner div {

    font-size: 14px;

    letter-spacing: 1.2px;

    color: #c1c7ca;

}

.brand-strip i {

    color: var(--red-light);

    margin-right: 8px;

}


/* =====================================================
   SECTION TAG
===================================================== */

.section-tag {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--red);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;

}

.section-tag span {

    width: 30px;

    height: 2px;

    background: var(--red);

}


/* =====================================================
   ABOUT
===================================================== */

.about-visual {

    position: relative;

    padding-right: 35px;

    padding-bottom: 35px;

}

.about-image {

    position: relative;

    z-index: 2;

    height: 520px;

    overflow: hidden;

}

.about-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .8s;

}

.about-visual:hover .about-image img {

    transform: scale(1.05);

}

.about-corner {

    position: absolute;

    width: 70%;

    height: 80%;

    right: 0;

    bottom: 0;

    background:

        radial-gradient(var(--red) 1px,
            transparent 1px);

    background-size: 12px 12px;

}

.about-year {

    position: absolute;

    z-index: 5;

    bottom: 60px;

    left: -25px;

    width: 175px;

    height: 175px;

    background: var(--red);

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-shadow: 12px 12px 0 var(--dark);

}

.about-year strong {

    font-family: var(--heading-font);

    font-size: 55px;

    line-height: 1;

}

.about-year span {

    font-size: 10px;

    text-align: center;

    letter-spacing: 2px;

    margin-top: 8px;

}

.about-content h2 {

    color: var(--heading);

    font-size: 63px;

    line-height: .92;

    margin-bottom: 25px;

}

.about-content h2 span {

    color: var(--red);

}

.about-intro {

    color: var(--heading);

    font-size: 18px;

    line-height: 1.75;

}

.about-content>p {

    font-size: 15px;

    line-height: 1.9;

}

.about-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin: 25px 0;

}

.about-features div {

    display: flex;

    gap: 10px;

    align-items: center;

    font-size: 13px;

    font-weight: 600;

    color: var(--heading);

}

.about-features i {

    color: var(--red);

}

.learn-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--heading);

    font-size: 13px;

    font-weight: 700;

    border-bottom: 1px solid var(--red);

    padding-bottom: 7px;

}


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

.stats-section {
    background: var(--dark);
    padding: 0;
    width: 100%;
}


/* Stats Row */

.stats-section .row {
    margin: 0;
    width: 100%;
}


/* Each Column */

.stats-section .row>div {
    padding: 0;
}


/* Stat Item */

.stat-item {

    min-height: 180px;

    padding: 40px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;

}


/* Vertical Divider */

.stats-section .row>div:not(:last-child) .stat-item::after {

    content: "";

    position: absolute;

    right: 0;
    top: 35px;
    bottom: 35px;

    width: 1px;

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

}


/* Icon */

.stat-item i {

    color: var(--red-light);

    font-size: 24px;

    margin-bottom: 14px;

    line-height: 1;

}


/* Number */

.stat-item strong {

    color: #ffffff;

    font-family: var(--heading-font);

    font-size: 56px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -1px;

    white-space: nowrap;

}


/* Label */

.stat-item span {

    color: #879096;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.8px;

    margin-top: 9px;

}


/* =====================================================
   DESKTOP ALIGNMENT
===================================================== */

@media (min-width: 992px) {

    .stats-section .container {
        max-width: 1200px;
    }

    .stat-item {
        padding-left: 35px;
        padding-right: 35px;
    }

}


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

@media (max-width: 991px) {

    .stat-item {

        min-height: 160px;

        padding: 35px 25px;

    }

    .stat-item strong {

        font-size: 48px;

    }

    .stat-item span {

        font-size: 11px;

    }

}


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

@media (max-width: 767px) {

    .stats-section .row>div {

        padding: 0;

    }

    .stat-item {

        min-height: 145px;

        padding: 30px 20px;

    }

    .stat-item i {

        font-size: 20px;

        margin-bottom: 10px;

    }

    .stat-item strong {

        font-size: 40px;

    }

    .stat-item span {

        font-size: 9px;

        letter-spacing: 1px;

    }

    .stats-section .row>div:not(:last-child) .stat-item::after {

        top: 25px;
        bottom: 25px;

    }

}

/* =====================================================
   PRODUCTS SECTION
===================================================== */

.products-section {
    background: #f6f7f8;
    overflow: hidden;
}


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

.section-heading {
    max-width: 800px;
    margin-bottom: 45px;
}

.section-heading h2 {
    font-size: 62px;
    color: var(--heading);
    line-height: .95;
    font-weight: 700;
}

.section-heading h2 span {
    color: var(--red);
}

.section-heading p {
    font-size: 15px;
    line-height: 1.9;
    margin-top: 20px;
    color: #687078;
}


/* =====================================================
   CONTINUOUS PRODUCT SLIDER
===================================================== */

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


/* LEFT / RIGHT FADE */

.product-slider-wrapper::before,
.product-slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.product-slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right,
            #f6f7f8,
            transparent);
}

.product-slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left,
            #f6f7f8,
            transparent);
}


/* =====================================================
   SLIDER TRACK
===================================================== */

.product-slider {
    display: flex;
    width: max-content;
    gap: 25px;

    animation: productContinuousScroll 35s linear infinite;
}


/* Pause when mouse enters */

.product-slider:hover {
    animation-play-state: paused;
}


/* =====================================================
   INDIVIDUAL SLIDE
===================================================== */

.product-slide {
    width: 360px;
    flex: 0 0 360px;
}


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

.product-card {
    background: #ffffff;
    height: 100%;
    border: 1px solid #e2e5e7;
    overflow: hidden;

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

.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--red);

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


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

.product-image {
    height: 285px;
    position: relative;
    overflow: hidden;
    background: #eef0f1;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .7s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08);
}


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

.product-number {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 45px;
    height: 45px;

    background: var(--red);
    color: #ffffff;

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

    font-family: var(--heading-font);
    font-size: 19px;
    font-weight: 600;

    z-index: 3;
}


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

.product-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .75),
            transparent 60%);

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

    padding: 20px;

    opacity: 0;

    transition: .4s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-overlay span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.product-overlay i {
    width: 38px;
    height: 38px;

    background: var(--red);
    color: #ffffff;

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

    font-size: 17px;
}


/* =====================================================
   PRODUCT BODY
===================================================== */

.product-body {
    padding: 30px;
}


/* SERIES */

.product-body small {
    color: var(--red);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* TITLE */

.product-body h3 {
    color: var(--heading);

    font-size: 30px;

    line-height: 1;

    font-weight: 700;

    margin: 14px 0 16px;
}


/* DESCRIPTION */

.product-body p {
    font-size: 14px;

    line-height: 1.8;

    color: #6b7379;

    margin-bottom: 18px;
}


/* VIEW DETAILS */

.product-body a {
    color: var(--heading);

    font-size: 13px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: .3s;
}

.product-body a i {
    color: var(--red);

    transition: .3s;
}

.product-body a:hover {
    color: var(--red);
}

.product-body a:hover i {
    transform: translateX(5px);
}


/* =====================================================
   CONTINUOUS ANIMATION
===================================================== */

@keyframes productContinuousScroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 12.5px));
    }

}


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

@media (max-width: 1199px) {

    .product-slide {
        width: 330px;
        flex-basis: 330px;
    }

    .product-slider {
        gap: 20px;
        animation-duration: 32s;
    }

    .section-heading h2 {
        font-size: 55px;
    }

}


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

@media (max-width: 767px) {

    .products-section {
        overflow: hidden;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 45px;
        line-height: .95;
    }

    .section-heading p {
        font-size: 14px;
    }

    .product-slide {
        width: 290px;
        flex-basis: 290px;
    }

    .product-slider {
        gap: 15px;
        animation-duration: 27s;
    }

    .product-image {
        height: 240px;
    }

    .product-body {
        padding: 24px;
    }

    .product-body h3 {
        font-size: 27px;
    }

    .product-body p {
        font-size: 13px;
    }

    .product-slider-wrapper::before,
    .product-slider-wrapper::after {
        width: 35px;
    }

}

/* =====================================================
   APPLICATIONS
===================================================== */

.applications-section {

    background: var(--dark);

    padding: 105px 0;

}

.centered-white {

    text-align: center;

    margin: auto;

}

.centered-white p {

    color: #8e979d;

}

.white-tag {

    justify-content: center;

    color: #e0e3e5;

}

.white-tag span {

    background: var(--red-light);

}

.centered-white h2 {

    color: white;

    font-size: 62px;

    line-height: .9;

}

.centered-white h2 span {

    color: var(--red-light);

}

.application-grid {

    display: grid;

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

    gap: 7px;

    margin-top: 50px;

}

.application-card {

    height: 420px;

    position: relative;

    overflow: hidden;

}

.application-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}

.application-card:hover img {

    transform: scale(1.08);

}

.application-overlay {

    position: absolute;

    inset: 0;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:
        linear-gradient(transparent 25%,
            rgba(0, 0, 0, .9));

}

.application-overlay span {

    color: var(--red-light);

    font-size: 12px;

}

.application-overlay h3 {

    color: white;

    font-size: 34px;

    margin: 7px 0;

}

.application-overlay i {

    color: var(--red-light);

    font-size: 20px;

}


/* =====================================================
   MODERN QUALITY SECTION
===================================================== */

.quality-section {

    background: #f6f7f8;

    position: relative;

    overflow: hidden;

}


/* MAIN WRAPPER */

.quality-modern-wrapper {

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: stretch;

    min-height: 650px;

}


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

.quality-modern-visual {

    position: relative;

    height: 735px;

    overflow: hidden;

    background: var(--dark);

    display: flex;

    align-items: center;

    padding: 55px;

    bottom: -45px;

}


/* BACKGROUND */

.quality-visual-bg {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,
            rgba(201, 22, 29, .95),
            rgba(27, 32, 37, .98) 70%);

}


/* GRID EFFECT */

.quality-visual-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:

        linear-gradient(rgba(255, 255, 255, .15) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, .15) 1px,
            transparent 1px);

    background-size: 45px 45px;

}


/* BIG CIRCLE */

.quality-visual-bg::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    border: 80px solid rgba(255, 255, 255, .045);

    right: -250px;

    top: 50%;

    transform: translateY(-50%);

}


/* VISUAL CONTENT */

.quality-visual-content {

    position: relative;

    z-index: 2;

    max-width: 450px;

}


/* NUMBER */

.quality-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    background: #fff;

    color: var(--red);

    font-family: var(--heading-font);

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 35px;

}


/* ICON */

.quality-big-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: #fff;

    font-size: 30px;

    margin-bottom: 25px;

}


/* LABEL */

.quality-visual-label {

    display: block;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 12px;

}


/* HEADING */

.quality-visual-content h2 {

    color: #fff;

    font-family: var(--heading-font);

    font-size: clamp(48px, 5vw, 72px);

    line-height: .88;

    font-weight: 700;

    margin-bottom: 25px;

}

.quality-visual-content h2 span {

    color: #ff5960;

    display: block;

}


/* DESCRIPTION */

.quality-visual-content p {

    max-width: 390px;

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

    font-size: 14px;

    line-height: 1.9;

}


/* CORNER LINE */

.quality-corner-line {

    position: absolute;

    right: 35px;

    bottom: 35px;

    width: 100px;

    height: 100px;

    border-right: 2px solid rgba(255, 255, 255, .25);

    border-bottom: 2px solid rgba(255, 255, 255, .25);

}


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

.quality-modern-content {

    background: #fff;

    padding: 65px 65px 55px;

}


/* HEADING */

.quality-modern-content h3 {

    max-width: 550px;

    color: var(--heading);

    font-size: clamp(42px, 4vw, 62px);

    line-height: .92;

    margin: 0 0 20px;

}

.quality-modern-content h3 span {

    color: var(--red);

    display: block;

}


/* INTRO */

.quality-modern-intro {

    max-width: 560px;

    color: #707980;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 32px;

}


/* =====================================================
   PROCESS ITEMS
===================================================== */

.quality-process {

    border-top: 1px solid #e4e7e9;

}


/* ITEM */

.quality-process-item {

    display: grid;

    grid-template-columns: 42px 52px 1fr;

    align-items: center;

    gap: 18px;

    padding: 18px 0;

    border-bottom: 1px solid #e4e7e9;

    transition: .35s ease;

}


/* NUMBER */

.quality-process-number {

    color: #b3b9bd;

    font-family: var(--heading-font);

    font-size: 17px;

    font-weight: 700;

    transition: .3s;

}


/* ICON */

.quality-process-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5f6f7;

    color: var(--red);

    font-size: 20px;

    transition: .35s ease;

}


/* TEXT */

.quality-process-text h4 {

    color: var(--heading);

    font-size: 22px;

    line-height: 1;

    margin: 0 0 7px;

    transition: .3s;

}

.quality-process-text p {

    color: #777f85;

    font-size: 13px;

    line-height: 1.6;

    margin: 0;

    max-width: 470px;

}


/* HOVER */

.quality-process-item:hover {

    padding-left: 10px;

}

.quality-process-item:hover .quality-process-number {

    color: var(--red);

}

.quality-process-item:hover .quality-process-icon {

    background: var(--red);

    color: #fff;

    transform: rotate(-5deg);

}

.quality-process-item:hover .quality-process-text h4 {

    color: var(--red);

}


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

.quality-modern-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

    padding: 14px 21px;

    background: var(--red);

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    transition: .35s ease;

}

.quality-modern-btn:hover {

    background: var(--dark);

    color: #fff;

    transform: translateY(-3px);

}

.quality-modern-btn i {

    transition: .3s;

}

.quality-modern-btn:hover i {

    transform: translate(3px, -3px);

}


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

@media (max-width: 991px) {

    .quality-modern-wrapper {

        grid-template-columns: 1fr;

    }

    .quality-modern-visual {

        min-height: 500px;

    }

    .quality-modern-content {

        padding: 55px 40px;

    }

}


@media (max-width: 767px) {

    .quality-modern-visual {

        min-height: 470px;

        padding: 40px 25px;

    }

    .quality-modern-content {

        padding: 50px 25px;

    }

    .quality-visual-content h2 {

        font-size: 48px;

    }

    .quality-modern-content h3 {

        font-size: 44px;

    }

    .quality-process-item {

        grid-template-columns: 32px 45px 1fr;

        gap: 10px;

    }

    .quality-process-icon {

        width: 45px;

        height: 45px;

        font-size: 17px;

    }

    .quality-process-text h4 {

        font-size: 18px;

    }

    .quality-process-text p {

        font-size: 12px;

    }

    .quality-corner-line {

        right: 20px;

        bottom: 20px;

    }

}

/* =====================================================
   MANUFACTURING PROCESS
===================================================== */

.process-section {
    background: #f6f7f8;
    overflow: hidden;
}

.process-heading {
    max-width: 800px;
    margin-bottom: 70px;
}

.process-heading h2 {
    font-size: 62px;
    line-height: .95;
    color: var(--heading);
}

.process-heading h2 span {
    color: var(--red);
}

.process-heading p {
    font-size: 15px;
    line-height: 1.9;
    margin-top: 20px;
}


/* PROCESS WRAPPER */

.process-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
}


/* LINE */

.process-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: #d7dbde;
    z-index: 0;
}


/* PROCESS ITEM */

.process-item {
    position: relative;
    z-index: 2;
    text-align: center;
}


/* NUMBER */

.process-number {
    width: 76px;
    height: 76px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #fff;

    border: 1px solid #dfe2e4;

    color: var(--red);

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

    font-family: var(--heading-font);

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

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

    transition: .4s;
}

.process-item:hover .process-number {
    background: var(--red);
    color: white;
    border-color: var(--red);
    transform: translateY(-6px);
}


/* ICON */

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

    margin: 0 auto 18px;

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

    background: rgba(201, 22, 29, .07);

    color: var(--red);

    font-size: 20px;

    transition: .4s;
}

.process-item:hover .process-icon {
    background: var(--dark);
    color: white;
}


/* TITLE */

.process-item h4 {
    color: var(--heading);
    font-size: 22px;
    line-height: 1;
    margin-bottom: 13px;
}


/* TEXT */

.process-item p {
    color: #737b81;
    font-size: 13px;
    line-height: 1.8;
}


/* RESPONSIVE */

@media(max-width:991px) {

    .process-wrapper {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 50px;
    }

    .process-line {
        display: none;
    }

}

@media(max-width:767px) {

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

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

}

/* =====================================================
   GALLERY
===================================================== */

.gallery-section {
    background: white;
}

.gallery-grid {
    display: grid;

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

    grid-template-rows:
        280px 280px;

    gap: 12px;

    margin-top: 45px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: #eee;
}

.gallery-large {
    grid-row: span 2;
}

.gallery-wide {
    grid-column: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .8s ease;
}

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

.gallery-overlay {
    position: absolute;
    inset: 0;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background:
        linear-gradient(transparent 30%,
            rgba(0, 0, 0, .85));

    color: white;
}

.gallery-overlay span {
    color: var(--red-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gallery-overlay h4 {
    font-size: 25px;
    margin: 5px 0;
}

.gallery-overlay i {
    position: absolute;

    right: 20px;
    bottom: 20px;

    width: 40px;
    height: 40px;

    background: var(--red);

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

@media(max-width:767px) {

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .gallery-large,
    .gallery-wide {
        grid-row: auto;
        grid-column: auto;
    }

    .gallery-item {
        height: 300px;
    }

}

/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonial-section {
    background: var(--dark);
}

.testimonial-section .centered-white {
    max-width: 750px;
}

.testimonial-section .centered-white h2 {
    font-size: 62px;
    line-height: .95;
}

.testimonial-section .centered-white h2 span {
    color: var(--red-light);
}

.testimonial-section .centered-white p {
    font-size: 15px;
    line-height: 1.8;
    margin-top: 18px;
}


/* CARD */

.testimonial-card {
    height: 100%;

    padding: 38px;

    background: #22282d;

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

    position: relative;

    transition: .4s;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: var(--red);
}


/* QUOTE */

.quote-icon {
    color: var(--red-light);
    font-size: 42px;
    line-height: 1;
}


/* STARS */

.stars {
    color: #f5a623;
    font-size: 13px;
    margin: 15px 0 20px;
}


/* REVIEW */

.testimonial-card>p {
    color: #aab1b6;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 30px;
}


/* CLIENT */

.client-info {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-top: 20px;

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

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

    background: var(--red);

    color: white;

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

    font-size: 18px;
}

.client-info strong {
    display: block;
    color: white;
    font-size: 15px;
}

.client-info span {
    display: block;
    color: #7f898f;
    font-size: 11px;
    margin-top: 3px;
}

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

.faq-section {
    background: #f6f7f8;
}

.faq-title {
    color: var(--heading);
    font-size: 65px;
    line-height: .9;
    margin-bottom: 25px;
}

.faq-title span {
    color: var(--red);
}

.faq-intro {
    font-size: 15px;
    line-height: 1.9;
    color: #697279;
    max-width: 450px;
}


/* ACCORDION */

.faq-accordion {
    border-top: 1px solid #dfe2e4;
}

.faq-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid #dfe2e4;
    background: transparent;
}

.faq-accordion .accordion-button {
    background: transparent;
    box-shadow: none;

    color: var(--heading);

    font-family: var(--heading-font);

    font-size: 21px;

    font-weight: 600;

    padding: 23px 5px;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--red);
    background: transparent;
}

.faq-accordion .accordion-button::after {
    background-size: 15px;
}

.faq-accordion .accordion-body {
    padding: 0 40px 25px 5px;

    color: #707980;

    font-size: 14px;

    line-height: 1.9;
}

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


.premium-cta {

    position: relative;

    padding: 110px 0;

    background: #f3f5f6;

    overflow: hidden;

}


/* BACKGROUND PATTERN */

.cta-bg-pattern {

    position: absolute;

    width: 650px;

    height: 650px;

    right: -250px;

    top: -250px;

    border-radius: 50%;

    border: 90px solid rgba(201, 22, 29, .035);

}

.cta-bg-pattern::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    border: 1px solid rgba(201, 22, 29, .12);

    top: 35px;

    left: 35px;

}


/* LABEL */

.cta-label {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--red);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 22px;

}

.cta-label span {

    width: 38px;

    height: 2px;

    background: var(--red);

}


/* HEADING */

.premium-cta h2 {

    max-width: 720px;

    color: var(--heading);

    font-family: var(--heading-font);

    font-size: clamp(48px, 6vw, 78px);

    font-weight: 700;

    line-height: .9;

    margin: 0 0 25px;

}

.premium-cta h2 span {

    color: var(--red);

}


/* DESCRIPTION */

.premium-cta p {

    max-width: 650px;

    color: #687178;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 32px;

}


/* ACTIONS */

.cta-actions {

    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;

}


/* MAIN BUTTON */

.cta-main-btn {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 17px 26px;

    background: var(--red);

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    transition: .35s ease;

}

.cta-main-btn:hover {

    background: var(--dark);

    color: #fff;

    transform: translateY(-3px);

}

.cta-main-btn i {

    transition: .3s ease;

}

.cta-main-btn:hover i {

    transform: translate(3px, -3px);

}


/* CALL */

.cta-call {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--heading);

    font-size: 14px;

    font-weight: 700;

}

.cta-call:hover {

    color: var(--red);

}

.call-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    border: 1px solid #e0e3e5;

    color: var(--red);

    font-size: 15px;

}

.cta-call small {

    display: block;

    color: #8a9298;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 3px;

}


/* =====================================================
   CTA INFO CARD
===================================================== */

.cta-info-card {

    position: relative;

    background: #fff;

    padding: 32px;

    border: 1px solid #e1e4e6;

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

    transition: .4s ease;

}

.cta-info-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 35px 80px rgba(0, 0, 0, .13);

}


/* RED TOP LINE */

.cta-info-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 70px;

    height: 4px;

    background: var(--red);

}


/* CARD TOP */

.cta-card-top {

    display: flex;

    align-items: center;

    gap: 18px;

    padding-bottom: 25px;

    border-bottom: 1px solid #eceeef;

}

.cta-card-icon {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(201, 22, 29, .08);

    color: var(--red);

    font-size: 25px;

}

.cta-card-top span {

    display: block;

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

    margin-bottom: 5px;

}

.cta-card-top h4 {

    color: var(--heading);

    font-size: 25px;

    line-height: 1;

    margin: 0;

}


/* LIST */

.cta-card-list {

    padding: 22px 0 20px;

}

.cta-card-list div {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #4f585e;

    font-size: 14px;

    font-weight: 600;

}

.cta-card-list div:last-child {

    margin-bottom: 0;

}

.cta-card-list i {

    color: var(--red);

    font-size: 17px;

}


/* CARD BOTTOM */

.cta-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 20px;

    border-top: 1px solid #eceeef;

}

.cta-card-bottom span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #7b848a;

    font-size: 11px;

    font-weight: 600;

}

.cta-card-bottom i {

    color: var(--red);

    font-size: 15px;

}

/* =====================================================
   CTA MAP CARD
===================================================== */

.cta-map-card {

    background: #ffffff;

    border: 1px solid #e2e5e7;

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

    overflow: hidden;

    position: relative;

}


/* =====================================================
   MAP
===================================================== */

.cta-map {

    width: 100%;

    height: 430px;

    overflow: hidden;

    background: #eef0f1;

}

.cta-map iframe {

    width: 100%;

    height: 100%;

    display: block;

    filter: grayscale(20%);

    transition: .5s ease;

}

.cta-map-card:hover .cta-map iframe {

    filter: grayscale(0%);

}


/* =====================================================
   MAP INFO
===================================================== */

.map-info {

    display: flex;

    gap: 15px;

    align-items: flex-start;

    padding: 22px 25px 10px;

}

.map-info-icon {

    width: 45px;

    height: 45px;

    flex: 0 0 45px;

    background: rgba(201, 22, 29, .08);

    color: var(--red);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

}

.map-info span {

    display: block;

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 4px;

}

.map-info h4 {

    color: var(--heading);

    font-size: 25px;

    margin: 0 0 6px;

    line-height: 1;

}

.map-info p {

    color: #6f777d;

    font-size: 12px;

    line-height: 1.7;

    margin: 0;

}


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

.map-direction-btn {

    margin: 5px 25px 25px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: var(--red);

    color: #ffffff;

    padding: 12px 18px;

    font-size: 11px;

    font-weight: 700;

    transition: .3s ease;

}

.map-direction-btn:hover {

    background: var(--dark);

    color: #ffffff;

    transform: translateY(-2px);

}


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

@media(max-width:767px) {

    .cta-map {

        height: 300px;

    }

    .map-info {

        padding: 20px 18px 8px;

    }

    .map-info h4 {

        font-size: 22px;

    }

    .map-info p {

        font-size: 11px;

    }

    .map-direction-btn {

        margin-left: 18px;

        margin-right: 18px;

        margin-bottom: 20px;

    }

}


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

@media (max-width: 991px) {

    .premium-cta {

        padding: 85px 0;

    }

    .premium-cta h2 {

        font-size: 58px;

    }

    .cta-info-card {

        margin-top: 20px;

    }

}


@media (max-width: 767px) {

    .premium-cta {

        padding: 70px 0;

    }

    .premium-cta h2 {

        font-size: 48px;

    }

    .premium-cta p {

        font-size: 14px;

    }

    .cta-actions {

        align-items: flex-start;

        flex-direction: column;

    }

    .cta-card-top h4 {

        font-size: 22px;

    }

    .cta-info-card {

        padding: 25px;

    }

    .cta-card-bottom {

        align-items: flex-start;

        flex-direction: column;

    }

}

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

.footer {

    background: #151a1e;

    color: #838c92;

    padding: 75px 0 20px;

}


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

.footer-logo {

    display: inline-block;

}

.footer-logo img {

    width: 250px;

    height: auto;

    background: white;

    padding: 8px;

}


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

.footer-about,
.footer>.container>.row>div:first-child p {

    max-width: 370px;

    font-size: 13px;

    line-height: 1.9;

    margin: 22px 0;

}


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

.footer-social {

    display: flex;

    gap: 8px;

}

.footer-social a {

    width: 38px;

    height: 38px;

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

    color: #8b949a;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s ease;

}

.footer-social a:hover {

    background: var(--red);

    color: white;

    border-color: var(--red);

    transform: translateY(-3px);

}


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

.footer h5 {

    color: white;

    font-size: 21px;

    font-weight: 600;

    margin-bottom: 22px;

    position: relative;

    padding-bottom: 10px;

}

.footer h5::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 35px;

    height: 2px;

    background: var(--red);

}


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

.footer ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer ul li {

    margin-bottom: 13px;

}

.footer ul a {

    color: #7e878d;

    font-size: 13px;

    transition: .3s ease;

    display: inline-block;

}

.footer ul a:hover {

    color: var(--red-light);

    padding-left: 5px;

}


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

.footer-contact>div {

    display: flex;

    gap: 12px;

    margin-bottom: 18px;

    align-items: flex-start;

}

.footer-contact i {

    color: var(--red-light);

    font-size: 15px;

    min-width: 17px;

    margin-top: 4px;

}

.footer-contact span,
.footer-contact a {

    color: #7e878d;

    font-size: 13px;

    line-height: 1.8;

}

.footer-contact a {

    transition: .3s ease;

}

.footer-contact a:hover {

    color: white;

}


/* =====================================================
   BUSINESS HOURS
===================================================== */

.business-hours {

    align-items: flex-start !important;

    margin-top: 5px;

}

.business-hours>i {

    margin-top: 4px;

}

.business-hours strong {

    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 5px;

}

.business-hours span {

    display: block;

    color: #7e878d;

    font-size: 11px;

    line-height: 1.7;

}


/* =====================================================
   COPYRIGHT
===================================================== */

.copyright {

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

    margin-top: 55px;

    padding-top: 22px;

    width: 100%;

}


.copyright-text {

    margin: 0;

    color: #697278;

    font-size: 11px;

    line-height: 1.7;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

}


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

.company-name {

    color: #aab1b5;

    font-weight: 600;

    transition: .3s ease;

}

.company-name:hover {

    color: var(--red-light);

}


/* =====================================================
   DEVELOPER
===================================================== */

.developer-text {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-left: 8px;

    color: #697278;

}


/* =====================================================
   TECHNEST LOGO
===================================================== */

.technest-logo {

    width: 20px;

    height: auto;

    display: inline-block;

    vertical-align: middle;

    transition: .3s ease;

}

.technest-logo:hover {

    opacity: .8;

}


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

@media(max-width: 767px) {

    .copyright {

        margin-top: 40px;

        padding-top: 18px;

    }

    .copyright-text {

        font-size: 10px;

        text-align: center;

        flex-direction: column;

        gap: 4px;

    }

    .developer-text {

        margin-left: 0;

        margin-top: 5px;

        flex-wrap: wrap;

        justify-content: center;

    }

    .technest-logo {

        width: 20px;

    }

}

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

.floating-contact {

    position: fixed;

    right: 22px;

    bottom: 85px;

    z-index: 999;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =====================================================
   COMMON FLOATING BUTTON
===================================================== */

.floating-btn {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    color: #ffffff;

    border-radius: 50%;

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

    transition: .35s ease;

}

.floating-btn i {

    font-size: 20px;

}


/* =====================================================
   FLOATING TOOLTIP
===================================================== */

.floating-btn span {

    position: absolute;

    right: 60px;

    top: 50%;

    transform: translateY(-50%) translateX(10px);

    background: var(--dark);

    color: #ffffff;

    padding: 8px 13px;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transition: .3s ease;

}


/* Tooltip Arrow */

.floating-btn span::after {

    content: "";

    position: absolute;

    right: -5px;

    top: 50%;

    width: 10px;

    height: 10px;

    background: var(--dark);

    transform: translateY(-50%) rotate(45deg);

}


/* =====================================================
   FLOATING HOVER
===================================================== */

.floating-btn:hover {

    color: #ffffff;

    transform: translateY(-4px) scale(1.05);

}

.floating-btn:hover span {

    opacity: 1;

    visibility: visible;

    transform: translateY(-50%) translateX(0);

}


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-btn {

    background: #25D366;

}

.whatsapp-btn:hover {

    background: #1ebe5d;

}


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

.phone-btn {

    background: var(--red);

}

.phone-btn:hover {

    background: var(--red-dark);

}


/* =====================================================
   EMAIL
===================================================== */

.email-btn {

    background: #343a40;

}

.email-btn:hover {

    background: #20252a;

}


/* =====================================================
   BACK TO TOP
===================================================== */

.back-to-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    border: 0;

    background: var(--red);

    color: white;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: .3s ease;

}

.back-to-top.show {

    opacity: 1;

    visibility: visible;

}

.back-to-top:hover {

    background: var(--dark);

    transform: translateY(-3px);

}


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

@media(max-width: 767px) {


    /* FOOTER */

    .footer {

        padding: 60px 0 20px;

    }


    .footer-logo img {

        width: 220px;

    }


    .footer h5 {

        margin-top: 15px;

        font-size: 20px;

    }


    .footer-about,
    .footer>.container>.row>div:first-child p {

        font-size: 13px;

    }


    .footer-contact span,
    .footer-contact a {

        font-size: 12px;

    }


    /* FOOTER BOTTOM */

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    .footer-bottom div {

        gap: 15px;

        flex-wrap: wrap;

    }


    /* FLOATING BUTTONS */

    .floating-contact {

        right: 15px;

        bottom: 75px;

        gap: 8px;

    }


    .floating-btn {

        width: 45px;

        height: 45px;

    }


    .floating-btn i {

        font-size: 18px;

    }


    /* Hide tooltip on mobile */

    .floating-btn span {

        display: none;

    }


    /* BACK TO TOP */

    .back-to-top {

        right: 15px;

        bottom: 20px;

        width: 42px;

        height: 42px;

    }

}

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

@media(max-width:991px) {

    .topbar {

        display: none;

    }

    .main-header {

        top: 0;

    }

    .site-logo img {

        width: 230px;

    }

    .navbar-collapse {

        background: white;

        padding: 20px;

        margin-top: 10px;

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

    }

    .nav-link {

        font-size: 16px;

    }

    .quote-btn {

        margin: 15px 0 0;

        font-size: 14px;

    }


    /* Mobile Products Dropdown */

    .products-dropdown {

        position: relative;

    }

    .custom-product-dropdown {

        position: static;

        width: 100%;

        transform: none;

        box-shadow: none;

        border: 1px solid #eeeeee;

        border-top: 2px solid var(--red);

        margin-top: 5px;

        display: none;

        opacity: 1;

        visibility: visible;

    }

    .custom-product-dropdown::before {

        display: none;

    }

    .products-dropdown.show .custom-product-dropdown {

        display: block;

    }

    .custom-product-dropdown .dropdown-item {

        font-size: 14px;

        line-height: 1.5;

        padding: 13px 12px;

    }

    .product-menu-icon {

        width: 40px;

        height: 40px;

        flex: 0 0 40px;

        font-size: 17px;

    }

    .menu-arrow {

        opacity: 1;

        transform: none;

    }


    /* Hero */

    .hero-section {

        min-height: auto;

    }

    .hero-row {

        min-height: auto;

        padding-top: 70px;

        padding-bottom: 100px;

    }

    .hero-content {

        padding-top: 40px;

    }

    .hero-content>p {

        font-size: 15px;

    }

    .hero-product {

        height: 500px;

    }


    /* Brand */

    .brand-strip-inner div {

        font-size: 11px;

    }


    /* About */

    .about-intro {

        font-size: 17px;

    }

    .about-content>p {

        font-size: 14px;

    }

}


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

@media(max-width:767px) {

    .section-padding {

        padding: 75px 0;

    }

    .site-logo img {

        width: 200px;

    }


    /* Navbar */

    .nav-link {

        font-size: 15px;

    }

    .quote-btn {

        font-size: 14px;

    }


    /* Products Dropdown */

    .custom-product-dropdown {

        width: 100%;

    }

    .custom-product-dropdown .dropdown-item {

        font-size: 14px;

        line-height: 1.5;

        padding: 12px 10px;

    }

    .product-menu-icon {

        width: 38px;

        height: 38px;

        flex: 0 0 38px;

        font-size: 16px;

    }


    /* Hero */

    .hero-content h1 {

        font-size: 65px;

    }

    .hero-small-title {

        font-size: 10px;

    }

    .hero-content>p {

        font-size: 15px;

        line-height: 1.8;

    }

    .hero-trust {

        gap: 15px;

        flex-wrap: wrap;

    }

    .trust-line {

        display: none;

    }

    .hero-product {

        height: 350px;

    }

    .hero-cylinder-image {

        width: 360px;

        height: 300px;

    }

    .hero-ring.ring-one {

        width: 330px;

        height: 330px;

    }

    .hero-ring.ring-two {

        width: 260px;

        height: 260px;

    }

    .hero-ring.ring-three {

        width: 190px;

        height: 190px;

    }

    .spec-card {

        transform: scale(.8);

    }

    .spec-top {

        right: -15px;

        top: 40px;

    }

    .spec-bottom {

        left: -15px;

        bottom: 20px;

    }


    /* Brand Strip */

    .brand-strip-inner {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 15px;

    }

    .brand-strip-inner div {

        font-size: 14px;

    }


    /* About */

    .about-image {

        height: 390px;

    }

    .about-year {

        left: 0;

        width: 140px;

        height: 140px;

    }

    .about-year strong {

        font-size: 42px;

    }

    .about-year span {

        font-size: 9px;

    }

    .about-features {

        grid-template-columns: 1fr;

    }

    .about-intro {

        font-size: 17px;

    }

    .about-content>p {

        font-size: 14px;

    }

    .about-features div {

        font-size: 13px;

    }


    /* Section Headings */

    .section-heading h2,
    .about-content h2,
    .quality-section h2,
    .centered-white h2,
    .cta-section h2 {

        font-size: 48px;

    }

    .section-heading p {

        font-size: 14px;

        line-height: 1.8;

    }


    /* Products */

    .product-body h3 {

        font-size: 29px;

    }

    .product-body p {

        font-size: 14px;

        line-height: 1.8;

    }

    .product-body a {

        font-size: 13px;

    }


    /* Applications */

    .application-grid {

        grid-template-columns: 1fr;

    }

    .application-card {

        height: 330px;

    }

    .application-overlay span {

        font-size: 11px;

    }


    /* Quality */

    .quality-grid {

        grid-template-columns: 1fr;

    }

    .quality-section>.container>.row>div:first-child p {

        font-size: 14px;

    }

    .quality-card p {

        font-size: 13px;

    }


    /* CTA */

    .cta-section p {

        font-size: 14px;

    }

    .cta-btn {

        font-size: 13px;

    }

    .cta-phone {

        font-size: 13px;

    }


    /* Footer */

    .footer-bottom {

        flex-direction: column;

        gap: 15px;

    }

    .footer-about,
    .footer>.container>.row>div:first-child p {

        font-size: 13px;

    }

    .footer ul a {

        font-size: 13px;

    }

    .footer-contact span,
    .footer-contact a {

        font-size: 13px;

    }

}

/* =====================================================
   MOBILE PRODUCTS DROPDOWN - FINAL FIX
===================================================== */

@media (max-width: 991px) {

    .products-dropdown {
        width: 100%;
    }
    
    .nav-link.active::after {
        display: none;
    }
    .products-dropdown .custom-product-dropdown {
        position: relative !important;

        left: 0 !important;
        right: auto !important;
        top: auto !important;

        width: 275px !important;
        min-width: 0 !important;
        max-width: 275px !important;

        margin: 6px 0 12px 0 !important;
        padding: 0 !important;

        border: 1px solid #eeeeee !important;
        border-top: 2px solid var(--red) !important;

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06) !important;

        display: none;
        overflow: hidden;
    }

    .products-dropdown .custom-product-dropdown.show {
        display: block !important;
    }

    /* Each product */
    .custom-product-dropdown li {
        width: 100%;
    }

    .custom-product-dropdown .dropdown-item {
        width: 100% !important;

        min-height: 48px !important;

        padding: 7px 9px !important;

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

        gap: 8px !important;

        font-size: 11px !important;
        line-height: 1.3 !important;

        box-sizing: border-box !important;

        white-space: normal !important;

        border-bottom: 1px solid #eeeeee;
    }

    /* Icon */
    .custom-product-dropdown .product-menu-icon {
        width: 30px !important;
        height: 30px !important;

        flex: 0 0 30px !important;

        font-size: 12px !important;
    }

    /* Text */
    .custom-product-dropdown .product-menu-text {
        flex: 1 !important;
        min-width: 0 !important;

        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Arrow */
    .custom-product-dropdown .menu-arrow {
        flex: 0 0 auto !important;

        margin-left: auto !important;

        font-size: 11px !important;

        opacity: 1 !important;
        transform: none !important;
    }

    /* Remove desktop arrow */
    .custom-product-dropdown::before {
        display: none !important;
    }
}