css
/* =========================================================
   INDUSTRIAL WEBSITE
   PRIMARY   : #00335e
   SECONDARY : #c2c2c3
   FONT      : Aptos Serif, Georgia, serif
========================================================= */

:root {

    --primary: #00335e;
    --primary-dark: #002541;
    --secondary: #c2c2c3;

    --white: #ffffff;
    --black: #111111;

    --light: #f5f6f7;
    --border: #dedfe0;
    --text: #555b61;

    --container: 1240px;

}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Aptos Serif", Georgia, serif;
    background: var(--white);
    color: var(--black);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

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


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

.container {
    width: min(92%, var(--container));
    margin: auto;
}


/* =========================================================
   PREMIUM COMPANY HEADER
   PRIMARY: #003B6A
   GREY:    #777778
   FONT:    Aptos Serif / Georgia
========================================================= */


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

:root {

    --wdm-primary: #003B6A;
    --wdm-primary-dark: #002A4B;
    --wdm-primary-light: #EAF2F7;

    --wdm-grey: #777778;
    --wdm-grey-light: #F2F3F4;

    --wdm-white: #ffffff;
    --wdm-black: #1d1d1d;

    --wdm-border: rgba(0, 59, 106, 0.12);

    --wdm-shadow:
        0 8px 30px rgba(0, 59, 106, 0.10);

    --wdm-font:
        "Aptos Serif",
        Georgia,
        serif;

}


/* =========================================================
   GLOBAL HEADER RESET
========================================================= */
/* =========================================================
   WDM PREMIUM INDUSTRIAL HEADER
   =========================================================
   PRIMARY COLOR : #003B6A
   GREY          : #777778
   FONT          : Aptos Serif / Georgia
========================================================= */


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

:root {

    --wdm-primary: #003B6A;
    --wdm-primary-dark: #002A4B;
    --wdm-primary-light: #EAF2F7;

    --wdm-grey: #777778;
    --wdm-grey-light: #F2F3F4;

    --wdm-white: #ffffff;
    --wdm-black: #111111;

    --wdm-border: rgba(0, 59, 106, 0.12);

    --wdm-shadow:
        0 6px 25px rgba(0, 59, 106, 0.07);

    --wdm-shadow-hover:
        0 12px 35px rgba(0, 59, 106, 0.15);

    --wdm-font:
        "Aptos Serif",
        Georgia,
        serif;
}


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

.wdm-header,
.wdm-header *,
.wdm-header *::before,
.wdm-header *::after {
    box-sizing: border-box;
}


.wdm-header a {
    text-decoration: none;
}


.wdm-header button {
    font-family: inherit;
}


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

.wdm-header {

    position: sticky;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

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

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

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

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


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

.wdm-header.wdm-scrolled {

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

    box-shadow:
        0 10px 35px
        rgba(0, 59, 106, 0.15);
}


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

.wdm-header-container {

    width:
        min(1200px, 92%);

    min-height:
        108px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        25px;
}


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

.wdm-logo {

    width:
        185px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    position:
        relative;

    z-index:
        10;
}


.wdm-logo img {

    width:
        155px;

    height:
        auto;

    max-height:
        100px;

    display:
        block;

    object-fit:
        contain;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


.wdm-logo:hover img {

    transform:
        scale(1.04);
}


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

.wdm-header-right {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


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

.wdm-header-top {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        20px;

    border-bottom:
        1px solid var(--wdm-border);
}


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

.wdm-contact-item {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--wdm-grey);

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

    font-size:
        13px;

    font-weight:
        600;

    white-space:
        nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.wdm-contact-item:hover {

    color:
        var(--wdm-primary);

    transform:
        translateY(-1px);
}


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

.wdm-contact-item i {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--wdm-primary);

    background:
        var(--wdm-primary-light);

    border:
        1px solid
        rgba(0, 59, 106, 0.14);

    border-radius:
        50%;

    font-size:
        12px;

    transition:
        all 0.3s ease;
}


.wdm-contact-item:hover i {

    background:
        var(--wdm-primary);

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


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

.wdm-social {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-left:
        3px;
}


.wdm-social a {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--wdm-primary);

    color:
        #ffffff;

    border-radius:
        50%;

    font-size:
        12px;

    transition:
        all 0.3s ease;
}


.wdm-social a:hover {

    background:
        var(--wdm-grey);

    transform:
        translateY(-3px);

    box-shadow:
        0 7px 18px
        rgba(0, 59, 106, 0.20);
}


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

.wdm-main-nav {

    min-height:
        59px;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        32px;
}


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

.wdm-nav-link {

    position:
        relative;

    height:
        59px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--wdm-primary);

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

    font-size:
        16px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.wdm-nav-link:hover {

    color:
        var(--wdm-grey);

    transform:
        translateY(-1px);
}


/* =========================================================
   ACTIVE NAV LINK
========================================================= */

.wdm-nav-link.active {

    color:
        var(--wdm-primary);
}


.wdm-nav-link.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        3px;

    background:
        var(--wdm-primary);

    border-radius:
        5px 5px 0 0;

    transform:
        scaleX(1);

    transition:
        transform 0.3s ease;
}


/* =========================================================
   DROPDOWN WRAPPER
========================================================= */

.wdm-nav-dropdown {

    position:
        relative;

    height:
        59px;

    display:
        flex;

    align-items:
        center;
}


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

.wdm-dropdown-btn {

    height:
        59px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    background:
        transparent;

    border:
        none;

    color:
        var(--wdm-primary);

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

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        color 0.3s ease;
}


.wdm-dropdown-btn:hover {

    color:
        var(--wdm-grey);
}


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

.wdm-dropdown-btn i {

    color:
        var(--wdm-grey);

    font-size:
        10px;

    transition:
        transform 0.3s ease;
}


.wdm-nav-dropdown:hover
.wdm-dropdown-btn i {

    transform:
        rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.wdm-dropdown-menu {

    position:
        absolute;

    top:
        calc(100% + 1px);

    left:
        50%;

    width:
        235px;

    padding:
        10px;

    background:
        #ffffff;

    border-top:
        3px solid
        var(--wdm-primary);

    border-radius:
        0 0 8px 8px;

    box-shadow:
        0 18px 40px
        rgba(0, 59, 106, 0.16);

    opacity:
        0;

    visibility:
        hidden;

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

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index:
        9999;
}


.wdm-nav-dropdown:hover
.wdm-dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, 0);
}


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

.wdm-dropdown-menu a {

    display:
        block;

    padding:
        12px 14px;

    color:
        var(--wdm-primary);

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

    font-size:
        14px;

    font-weight:
        600;

    border-radius:
        5px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}


.wdm-dropdown-menu a:hover {

    background:
        var(--wdm-primary-light);

    color:
        var(--wdm-primary);

    padding-left:
        20px;
}


/* =========================================================
   GET QUOTE BUTTON
========================================================= */

.wdm-header-quote {

    min-width:
        125px;

    height:
        44px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        var(--wdm-primary);

    color:
        #ffffff;

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

    font-size:
        14px;

    font-weight:
        800;

    border-radius:
        5px;

    white-space:
        nowrap;

    box-shadow:
        0 7px 18px
        rgba(0, 59, 106, 0.20);

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


.wdm-header-quote:hover {

    background:
        var(--wdm-grey);

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(119, 119, 120, 0.25);
}


.wdm-header-quote span {

    font-size:
        17px;

    transition:
        transform 0.3s ease;
}


.wdm-header-quote:hover span {

    transform:
        translateX(4px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.wdm-menu-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    margin-left:
        auto;

    padding:
        0;

    border:
        none;

    border-radius:
        5px;

    background:
        var(--wdm-primary);

    cursor:
        pointer;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;
}


.wdm-menu-toggle span {

    width:
        21px;

    height:
        2px;

    background:
        #ffffff;

    border-radius:
        3px;

    transition:
        all 0.3s ease;
}


/* =========================================================
   HAMBURGER ACTIVE
========================================================= */

.wdm-menu-toggle.active
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.wdm-menu-toggle.active
span:nth-child(2) {

    opacity:
        0;
}


.wdm-menu-toggle.active
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

@media (max-width: 1100px) {

    .wdm-header-container {

        width:
            94%;

        gap:
            18px;
    }


    .wdm-logo {

        width:
            140px;
    }


    .wdm-logo img {

        width:
            135px;
    }


    .wdm-main-nav {

        gap:
            22px;
    }


    .wdm-nav-link,
    .wdm-dropdown-btn {

        font-size:
            14px;
    }


    .wdm-contact-item {

        font-size:
            12px;
    }


    .wdm-header-top {

        gap:
            12px;
    }


    .wdm-header-quote {

        min-width:
            110px;

        padding:
            0 14px;

        font-size:
            13px;
    }

}


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

@media (max-width: 900px) {

    .wdm-header-container {

        min-height:
            78px;
    }


    .wdm-logo {

        width:
            auto;
    }


    .wdm-logo img {

        width:
            130px;

        max-height:
            75px;
    }


    .wdm-menu-toggle {

        display:
            flex;
    }


    /* Hide quote button on mobile */

    .wdm-header-quote {

        display:
            none;
    }


    /* Mobile right area */

    .wdm-header-right {

        position:
            absolute;

        top:
            78px;

        left:
            0;

        right:
            0;

        width:
            100%;

        padding:
            15px 20px 20px;

        display:
            none;

        background:
            #ffffff;

        border-top:
            1px solid var(--wdm-border);

        box-shadow:
            0 15px 35px
            rgba(0, 59, 106, 0.15);

        animation:
            wdmMenuSlide 0.3s ease;
    }


    .wdm-header-right.wdm-menu-open {

        display:
            block;
    }


    @keyframes wdmMenuSlide {

        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }


    /* Contact */

    .wdm-header-top {

        min-height:
            auto;

        padding-bottom:
            14px;

        justify-content:
            flex-start;

        flex-wrap:
            wrap;

        gap:
            10px 16px;
    }


    .wdm-contact-item {

        font-size:
            12px;
    }


    .wdm-contact-item i {

        width:
            30px;

        height:
            30px;
    }


    .wdm-social {

        margin-left:
            0;
    }


    .wdm-social a {

        width:
            30px;

        height:
            30px;
    }


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

    .wdm-main-nav {

        min-height:
            auto;

        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            flex-start;

        gap:
            0;

        padding-top:
            8px;
    }


    .wdm-nav-link {

        width:
            100%;

        height:
            auto;

        min-height:
            48px;

        padding:
            12px 5px;

        justify-content:
            flex-start;

        border-bottom:
            1px solid var(--wdm-border);
    }


    .wdm-nav-link.active::after {

        display:
            none;
    }


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

    .wdm-nav-dropdown {

        width:
            100%;

        height:
            auto;

        display:
            block;
    }


    .wdm-dropdown-btn {

        width:
            100%;

        height:
            48px;

        justify-content:
            space-between;

        border-bottom:
            1px solid var(--wdm-border);
    }


    .wdm-dropdown-btn.wdm-dropdown-active i {

        transform:
            rotate(180deg);
    }


    .wdm-dropdown-menu {

        position:
            static;

        width:
            100%;

        display:
            none;

        padding:
            5px 0 5px 15px;

        background:
            var(--wdm-grey-light);

        border:
            none;

        border-left:
            3px solid
            var(--wdm-primary);

        border-radius:
            0;

        box-shadow:
            none;

        opacity:
            1;

        visibility:
            visible;

        transform:
            none;
    }


    .wdm-dropdown-menu.wdm-dropdown-open {

        display:
            block;
    }


    .wdm-dropdown-menu a {

        padding:
            11px 12px;
    }


    .wdm-dropdown-menu a:hover {

        padding-left:
            17px;
    }

}


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

@media (max-width: 600px) {

    .wdm-header-container {

        width:
            92%;

        min-height:
            72px;

        gap:
            10px;
    }


    .wdm-logo img {

        width:
            120px;

        max-height:
            68px;
    }


    .wdm-menu-toggle {

        width:
            42px;

        height:
            42px;
    }


    .wdm-header-right {

        top:
            72px;

        padding:
            12px 15px 18px;
    }


    /* =====================================================
       MOBILE CONTACT GRID
    ===================================================== */

    .wdm-header-top {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            8px;
    }


    .wdm-contact-item {

        font-size:
            10px;

        gap:
            5px;

        min-width:
            0;
    }


    .wdm-contact-item span {

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .wdm-contact-item i {

        width:
            27px;

        height:
            27px;

        min-width:
            27px;

        font-size:
            10px;
    }


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

    .wdm-social {

        grid-column:
            1 / -1;

        justify-content:
            flex-start;

        padding-top:
            3px;
    }


    .wdm-social a {

        width:
            29px;

        height:
            29px;

        font-size:
            11px;
    }


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

    .wdm-nav-link {

        font-size:
            14px;
    }


    .wdm-dropdown-btn {

        font-size:
            14px;
    }

}


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

@media (max-width: 400px) {

    .wdm-header-container {

        width:
            92%;
    }


    .wdm-logo img {

        width:
            108px;
    }


    .wdm-contact-item {

        font-size:
            9px;
    }


    .wdm-contact-item i {

        width:
            25px;

        height:
            25px;

        min-width:
            25px;
    }


    .wdm-menu-toggle {

        width:
            40px;

        height:
            40px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.wdm-nav-link:focus-visible,
.wdm-dropdown-btn:focus-visible,
.wdm-header-quote:focus-visible,
.wdm-menu-toggle:focus-visible,
.wdm-social a:focus-visible,
.wdm-contact-item:focus-visible {

    outline:
        3px solid
        rgba(0, 59, 106, 0.25);

    outline-offset:
        3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wdm-header,
    .wdm-header *,
    .wdm-header *::before,
    .wdm-header *::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}
/* =========================================================
   SHIV ENTERPRISE - PREMIUM 3D HERO SLIDER
   COLORS:
   #777778 = Silver / Grey
   #003b6a = Deep Blue
   ========================================================= */


/* =========================================================
   ROOT COLORS
========================================================= */

:root {
    --shiv-blue: #003b6a;
    --shiv-grey: #777778;
    --shiv-dark: #06131d;
    --shiv-light: #f5f7f9;
}


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

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


body {
    font-family: Arial, Helvetica, sans-serif;
    background: #06131d;
}


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

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

    font-family: "Aptos Serif", Georgia, serif;
}


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

.hero-slider {
    position: relative;

    width: 100%;

    /* REDUCED HERO HEIGHT */
    height: 550px;

    overflow: hidden;
}


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

.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;

    overflow: hidden;
}


.hero-slide.active {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


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

.hero-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center center;

    transform: scale(1.02);
}


/* =========================================================
   BLUE OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 59, 106, 0.96) 0%,
            rgba(0, 59, 106, 0.88) 38%,
            rgba(0, 59, 106, 0.52) 68%,
            rgba(0, 59, 106, 0.25) 100%
        );
}


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

.hero-container {
    position: relative;

    z-index: 5;

    width: 90%;

    max-width: 1400px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


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

.hero-content {
    position: relative;

    z-index: 10;

    width: 52%;

    padding-top: 0;
}


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

.hero-small-title {
    position: relative;

    padding-left: 58px;

    margin-bottom: 15px;

    color: #ffffff;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 3px;

    line-height: 1.3;

    text-transform: uppercase;
}


/* Small title line */

.hero-small-title::before {
    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 42px;

    height: 2px;

    background: #777778;

    transform:
        translateY(-50%);
}


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

.hero-content h1 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size:
        clamp(
            40px,
            4.5vw,
            64px
        );

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -1px;
}


/* Heading second line */

.hero-content h1 span {
    display: block;

    color: #777778;
}


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

.hero-description {
    max-width: 600px;

    margin: 0 0 20px;

    color:
        rgba(
            255,
            255,
            255,
            0.90
        );

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 16px;

    line-height: 1.6;
}


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

.hero-features {
    display: flex;

    align-items: center;

    gap: 0;

    margin-bottom: 22px;
}


/* Individual feature */

.hero-feature {
    display: flex;

    align-items: center;

    padding: 0 16px;

    min-height: 42px;

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


.hero-feature:first-child {
    padding-left: 0;
}


.hero-feature:last-child {
    border-right: none;
}


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

.feature-icon {
    width: 32px;

    height: 32px;

    margin-right: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        #777778;

    border-radius: 50%;

    color: #ffffff;

    font-size: 14px;

    flex-shrink: 0;
}


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

.hero-feature strong,
.hero-feature span {
    display: block;

    color: #ffffff;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;
}


.hero-feature strong {
    font-size: 12px;

    font-weight: 600;

    line-height: 1.3;
}


.hero-feature span {
    font-size: 11px;

    line-height: 1.3;

    opacity: 0.85;
}


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

.hero-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 12px 23px;

    background: #003b6a;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 14px;

    font-weight: 600;

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

    border-radius: 35px;

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


.hero-button span {
    font-size: 20px;

    line-height: 1;
}


.hero-button:hover {
    background: #777778;

    color: #ffffff;

    border-color: #777778;

    transform:
        translateY(-3px);
}


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

.hero-product {
    position: absolute;

    right: 0;

    bottom: 15px;

    width: 42%;

    height: 85%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    z-index: 6;

    pointer-events: none;
}


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

.hero-product img {
    position: relative;

    /*
       SMALLER PRODUCT
    */

    max-width: 68%;

    max-height: 360px;

    width: auto;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 25px
            rgba(
                0,
                0,
                0,
                0.45
            )
        );

    animation:
        valveFloat
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   PRODUCT FLOAT ANIMATION
========================================================= */

@keyframes valveFloat {

    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

    100% {
        transform:
            translateY(0);
    }

}


/* =========================================================
   PRODUCT GLOW
========================================================= */

.product-glow {
    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(
                255,
                255,
                255,
                0.18
            ) 0%,

            rgba(
                255,
                255,
                255,
                0.06
            ) 40%,

            transparent 70%
        );

    filter: blur(5px);

    z-index: -1;
}


/* =========================================================
   REMOVE ALL CURVES
========================================================= */

.hero-slider::before,
.hero-slider::after {
    display: none;

    content: none;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.hero-prev,
.hero-next {
    position: absolute;

    z-index: 30;

    top: 50%;

    width: 44px;

    height: 44px;

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

    border-radius: 50%;

    background:
        rgba(
            0,
            59,
            106,
            0.65
        );

    color: #ffffff;

    font-size: 20px;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;
}


.hero-prev {
    left: 20px;
}


.hero-next {
    right: 20px;
}


.hero-prev:hover,
.hero-next:hover {
    background: #777778;

    border-color: #777778;
}


/* =========================================================
   SLIDER DOTS
========================================================= */

.hero-dots {
    position: absolute;

    z-index: 30;

    bottom: 18px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;
}


.hero-dot {
    width: 9px;

    height: 9px;

    padding: 0;

    border:
        1px solid
        #ffffff;

    background: transparent;

    border-radius: 50%;

    cursor: pointer;

    transition:
        all 0.3s ease;
}


.hero-dot.active {
    width: 26px;

    border-radius: 10px;

    background: #777778;

    border-color: #777778;
}


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

@media (max-width: 1100px) {

    .hero-slider {
        height: 420px;
    }


    .hero-container {
        width: 92%;
    }


    .hero-content {
        width: 58%;
    }


    .hero-content h1 {
        font-size: 48px;
    }


    .hero-description {
        max-width: 520px;

        font-size: 15px;
    }


    .hero-product {
        right: -3%;

        width: 48%;

        height: 82%;

        bottom: 15px;
    }


    .hero-product img {
        max-width: 68%;

        max-height: 320px;
    }


    .product-glow {
        width: 290px;

        height: 290px;
    }


    .hero-feature {
        padding-left: 10px;

        padding-right: 10px;
    }

}


/* =========================================================
   SMALL TABLET / LAPTOP
========================================================= */

@media (max-width: 900px) {

    .hero-slider {
        height: 400px;
    }


    .hero-content {
        width: 62%;
    }


    .hero-content h1 {
        font-size: 42px;
    }


    .hero-description {
        font-size: 14px;

        line-height: 1.5;
    }


    .hero-features {
        margin-bottom: 16px;
    }


    .hero-feature {
        padding-left: 7px;

        padding-right: 7px;
    }


    .feature-icon {
        width: 30px;

        height: 30px;

        font-size: 13px;
    }


    .hero-product {
        width: 45%;

        right: 0;
    }


    .hero-product img {
        max-width: 65%;

        max-height: 290px;
    }


    .product-glow {
        width: 260px;

        height: 260px;
    }

}


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

@media (max-width: 768px) {

    .industry-hero {
        overflow: hidden;
    }


    .hero-slider {
        height: 580px;

        overflow: hidden;
    }


    .hero-container {
        width: 90%;

        align-items: flex-start;

        justify-content: center;
    }


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

    .hero-content {
        width: 100%;

        padding-top: 55px;

        text-align: center;
    }


    .hero-small-title {
        padding-left: 0;

        font-size: 11px;

        letter-spacing: 2px;

        margin-bottom: 15px;
    }


    .hero-small-title::before {
        display: none;
    }


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

        line-height: 1.12;

        margin-bottom: 15px;
    }


    .hero-description {
        max-width: 480px;

        margin-left: auto;

        margin-right: auto;

        font-size: 14px;

        line-height: 1.5;

        margin-bottom: 20px;
    }


    /* =========================
       HIDE FEATURES MOBILE
    ========================= */

    .hero-features {
        display: none;
    }


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

    .hero-button {
        padding: 12px 22px;

        font-size: 14px;
    }


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

    .hero-product {
        width: 65%;

        height: 42%;

        right: 17.5%;

        bottom: 40px;

        align-items: flex-end;

        justify-content: center;
    }


    .hero-product img {
        max-width: 72%;

        max-height: 190px;
    }


    .product-glow {
        width: 220px;

        height: 220px;
    }


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

    .hero-prev,
    .hero-next {
        width: 36px;

        height: 36px;

        font-size: 16px;
    }


    .hero-prev {
        left: 10px;
    }


    .hero-next {
        right: 10px;
    }


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

    .hero-dots {
        bottom: 18px;
    }

}


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

@media (max-width: 480px) {

    .hero-slider {
        height: 550px;
    }


    .hero-content {
        padding-top: 45px;
    }


    .hero-small-title {
        font-size: 9px;

        letter-spacing: 1.3px;

        margin-bottom: 13px;
    }


    .hero-content h1 {
        font-size: 30px;

        line-height: 1.12;

        margin-bottom: 13px;
    }


    .hero-description {
        font-size: 13px;

        line-height: 1.5;

        max-width: 350px;

        margin-bottom: 18px;
    }


    .hero-button {
        padding: 11px 19px;

        font-size: 13px;

        gap: 10px;
    }


    .hero-button span {
        font-size: 18px;
    }


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

    .hero-product {
        width: 70%;

        right: 15%;

        bottom: 35px;

        height: 40%;
    }


    .hero-product img {
        max-width: 72%;

        max-height: 165px;
    }


    .product-glow {
        width: 190px;

        height: 190px;
    }


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

    .hero-prev,
    .hero-next {
        width: 32px;

        height: 32px;

        font-size: 14px;
    }


    .hero-prev {
        left: 7px;
    }


    .hero-next {
        right: 7px;
    }


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

    .hero-dots {
        bottom: 15px;
    }

}


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

@media (max-width: 360px) {

    .hero-slider {
        height: 520px;
    }


    .hero-content {
        padding-top: 40px;
    }


    .hero-content h1 {
        font-size: 27px;
    }


    .hero-description {
        font-size: 12px;
    }


    .hero-product {
        bottom: 30px;
    }


    .hero-product img {
        max-height: 145px;
    }


    .product-glow {
        width: 170px;

        height: 170px;
    }

}


/* =========================================================
   SHIV ENTERPRISE
   PREMIUM METAL PRODUCT SECTION
   FULL CSS
   =========================================================

   DESIGN:
   Premium Industrial / Architectural / Corporate

   FONT:
   Aptos Serif / Georgia / Serif

   COLORS:
   Deep Blue : #013c6c
   Silver    : #a6a7a7
   White     : #ffffff

   IMPORTANT:
   - 4 EQUAL COLUMNS
   - NO FLEX COLUMN EXPANSION
   - IMAGE HAS DEDICATED SPACE
   - CONTENT NEVER FLOATS OVER IMAGE
   - PREMIUM HOVER EFFECT
   - RESPONSIVE
========================================================= */


/* =========================================================
   GLOBAL FONT
========================================================= */

.metal-product-section,
.metal-product-section * {

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    box-sizing:
        border-box;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.metal-product-section {

    position:
        relative;

    width:
        100%;

    padding:
        100px 0 110px;

    overflow:
        hidden;

    isolation:
        isolate;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(
                1,
                60,
                108,
                0.07
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(
                166,
                167,
                167,
                0.13
            ),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #f9fafa 0%,
            #f4f6f6 50%,
            #eef0f0 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION - LARGE CIRCLE
========================================================= */

.metal-product-section::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        -250px;

    left:
        -180px;

    border:
        1px solid
        rgba(
            1,
            60,
            108,
            0.08
        );

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        0;

    animation:
        metalCircleOne
        22s
        linear
        infinite;
}


@keyframes metalCircleOne {

    0% {

        transform:
            rotate(0deg);
    }

    100% {

        transform:
            rotate(360deg);
    }
}


/* =========================================================
   BACKGROUND DECORATION - SECOND CIRCLE
========================================================= */

.metal-product-section::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -160px;

    bottom:
        -250px;

    border:
        1px solid
        rgba(
            166,
            167,
            167,
            0.18
        );

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        0;

    animation:
        metalCircleTwo
        26s
        linear
        infinite reverse;
}


@keyframes metalCircleTwo {

    0% {

        transform:
            rotate(0deg);
    }

    100% {

        transform:
            rotate(360deg);
    }
}


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

.metal-product-wrapper {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            1440px,
            92%
        );

    margin:
        0 auto;
}


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

.metal-product-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        50px;

    margin-bottom:
        55px;
}


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

.metal-heading-left {

    position:
        relative;

    padding-left:
        22px;
}


/* =========================================================
   LEFT BLUE ACCENT
========================================================= */

.metal-heading-left::before {

    content:
        "";

    position:
        absolute;

    width:
        4px;

    height:
        75px;

    left:
        0;

    top:
        8px;

    background:
        #013c6c;

    transform-origin:
        top;

    animation:
        metalHeadingBar
        4s
        ease-in-out
        infinite;
}


@keyframes metalHeadingBar {

    0%,
    100% {

        height:
            45px;

        opacity:
            .55;
    }

    50% {

        height:
            82px;

        opacity:
            1;
    }
}


/* =========================================================
   HEADER SMALL LABEL
========================================================= */

.metal-heading-left span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #a6a7a7;

    font-size:
        14px;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


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

.metal-heading-left h2 {

    margin:
        0;

    color:
        #013c6c;

    font-size:
        clamp(
            38px,
            4vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        700;

    letter-spacing:
        -1px;
}


.metal-heading-left h2 strong {

    color:
        #013c6c;

    font-weight:
        700;
}


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

.metal-heading-right {

    max-width:
        480px;

    padding-bottom:
        4px;
}


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

.metal-heading-right p {

    margin:
        0;

    color:
        #666;

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   HEADER ANIMATED LINE
========================================================= */

.heading-line {

    position:
        relative;

    width:
        90px;

    height:
        2px;

    margin-top:
        18px;

    overflow:
        hidden;

    background:
        rgba(
            1,
            60,
            108,
            .12
        );
}


.heading-line::after {

    content:
        "";

    position:
        absolute;

    left:
        -100%;

    top:
        0;

    width:
        65%;

    height:
        100%;

    background:
        #013c6c;

    animation:
        headingLineMove
        3.5s
        ease-in-out
        infinite;
}


@keyframes headingLineMove {

    0% {

        left:
            -100%;
    }

    50% {

        left:
            100%;
    }

    100% {

        left:
            100%;
    }
}


/* =========================================================
   PRODUCT PANELS
   IMPORTANT:
   FOUR FIXED EQUAL COLUMNS
========================================================= */

.metal-panels {

    display:
        grid;

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

    gap:
        16px;

    width:
        100%;

    align-items:
        stretch;
}


/* =========================================================
   INDIVIDUAL PANEL
========================================================= */

.metal-panel {

    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    min-width:
        0;

    min-height:
        570px;

    overflow:
        hidden;

    cursor:
        pointer;

    background:

        linear-gradient(
            145deg,
            #ffffff 0%,
            #f2f3f3 48%,
            #e2e4e4 100%
        );

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

    box-shadow:

        0 10px 35px
        rgba(
            0,
            0,
            0,
            .055
        );

    transform:
        translateY(0);

    transition:

        transform
        .6s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        box-shadow
        .6s
        ease,

        border-color
        .45s
        ease;
}


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

.metal-panel:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(
            1,
            60,
            108,
            .32
        );

    box-shadow:

        0 28px 65px
        rgba(
            1,
            60,
            108,
            .15
        ),

        0 8px 25px
        rgba(
            0,
            0,
            0,
            .08
        );
}


/* =========================================================
   DARK FEATURE PANEL
========================================================= */

.metal-panel.dark-panel {

    background:

        linear-gradient(
            145deg,
            #013c6c 0%,
            #023456 50%,
            #011d34 100%
        );

    border-color:
        rgba(
            1,
            60,
            108,
            .75
        );
}


/* =========================================================
   DARK PANEL SUBTLE LIGHT
========================================================= */

.metal-panel.dark-panel::after {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -130px;

    top:
        -130px;

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

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        1;
}


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

.panel-bg-number {

    position:
        absolute;

    top:
        -18px;

    right:
        -4px;

    z-index:
        0;

    font-size:
        clamp(
            105px,
            9vw,
            150px
        );

    line-height:
        1;

    font-weight:
        700;

    color:
        rgba(
            1,
            60,
            108,
            .055
        );

    pointer-events:
        none;

    user-select:
        none;

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        color
        .5s
        ease;
}


.dark-panel
.panel-bg-number {

    color:
        rgba(
            255,
            255,
            255,
            .065
        );
}


.metal-panel:hover
.panel-bg-number {

    transform:
        translate(
            -9px,
            6px
        )
        scale(
            1.07
        );
}


/* =========================================================
   VERTICAL CATEGORY LABEL
========================================================= */

.panel-label {

    position:
        absolute;

    top:
        30px;

    left:
        22px;

    z-index:
        8;

    color:
        #013c6c;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    writing-mode:
        vertical-rl;

    transform:
        rotate(
            180deg
        );

    opacity:
        .65;

    transition:

        opacity
        .4s
        ease,

        transform
        .5s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.dark-panel
.panel-label {

    color:
        #ffffff;

    opacity:
        .72;
}


.metal-panel:hover
.panel-label {

    opacity:
        1;

    transform:
        rotate(
            180deg
        )
        translateY(
            -6px
        );
}


/* =========================================================
   IMAGE AREA
   FIXED SAFE IMAGE ZONE
========================================================= */

.panel-image {

    position:
        absolute;

    top:
        55px;

    left:
        45px;

    right:
        18px;

    height:
        255px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        3;

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


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

.metal-panel:hover
.panel-image {

    transform:
        translateY(
            -8px
        );
}


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

.panel-image img {

    position:
        relative;

    display:
        block;

    width:
        100%;

    max-width:
        310px;

    height:
        235px;

    object-fit:
        contain;

    object-position:
        center;

    z-index:
        3;

    filter:

        drop-shadow(
            0 18px 18px
            rgba(
                0,
                0,
                0,
                .20
            )
        );

    transform:
        scale(
            1
        );

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        .5s
        ease;
}


/* =========================================================
   IMAGE HOVER SCALE
========================================================= */

.metal-panel:hover
.panel-image img {

    transform:
        scale(
            1.13
        );

    filter:

        drop-shadow(
            0 27px 27px
            rgba(
                0,
                0,
                0,
                .27
            )
        );
}


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

.panel-glow {

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                1,
                60,
                108,
                .18
            ) 0%,

            rgba(
                1,
                60,
                108,
                .07
            ) 45%,

            transparent
            72%
        );

    filter:
        blur(6px);

    z-index:
        1;

    opacity:
        .9;

    transition:

        transform
        .7s
        ease,

        opacity
        .5s
        ease;
}


.dark-panel
.panel-glow {

    background:

        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .20
            ) 0%,

            rgba(
                166,
                167,
                167,
                .10
            ) 45%,

            transparent
            72%
        );
}


.metal-panel:hover
.panel-glow {

    transform:
        scale(
            1.35
        );

    opacity:
        1;
}


/* =========================================================
   CONTENT AREA
   IMPORTANT:
   CONTENT IS BELOW IMAGE
========================================================= */

.panel-content {

    position:
        absolute;

    left:
        28px;

    right:
        22px;

    bottom:
        62px;

    z-index:
        7;

    min-width:
        0;

    transition:

        transform
        .5s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.metal-panel:hover
.panel-content {

    transform:
        translateY(
            -5px
        );
}


/* =========================================================
   SMALL PRODUCT LABEL
========================================================= */

.panel-small {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #8c9193;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    line-height:
        1.4;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.dark-panel
.panel-small {

    color:
        rgba(
            255,
            255,
            255,
            .62
        );
}


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

.panel-content h3 {

    margin:
        0 0 11px;

    color:
        #013c6c;

    font-size:
        clamp(
            22px,
            2vw,
            31px
        );

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        -.7px;
}


.panel-content h3 strong {

    color:
        inherit;

    font-weight:
        700;
}


.dark-panel
.panel-content h3 {

    color:
        #ffffff;
}


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

.panel-content p {

    width:
        100%;

    max-width:
        310px;

    margin:
        0;

    color:
        #6d7274;

    font-size:
        12px;

    line-height:
        1.65;

    opacity:
        0;

    transform:
        translateY(
            14px
        );

    transition:

        opacity
        .45s
        ease,

        transform
        .45s
        ease;
}


.dark-panel
.panel-content p {

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


/* =========================================================
   DESCRIPTION ON HOVER
========================================================= */

.metal-panel:hover
.panel-content p {

    opacity:
        1;

    transform:
        translateY(
            0
        );
}


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

.panel-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        17px;

    padding:
        10px 15px;

    color:
        #013c6c;

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

    border:
        1px solid
        rgba(
            1,
            60,
            108,
            .32
        );

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .4px;

    text-decoration:
        none;

    white-space:
        nowrap;

    overflow:
        hidden;

    z-index:
        1;

    transition:

        color
        .4s
        ease,

        background
        .4s
        ease,

        border-color
        .4s
        ease,

        transform
        .4s
        ease;
}


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

.panel-button::before {

    content:
        "";

    position:
        absolute;

    left:
        -101%;

    top:
        0;

    width:
        100%;

    height:
        100%;

    background:
        #013c6c;

    z-index:
        -1;

    transition:
        left
        .45s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.panel-button:hover {

    color:
        #ffffff;

    background:
        #013c6c;

    border-color:
        #013c6c;

    transform:
        translateX(
            3px
        );
}


.panel-button:hover::before {

    left:
        0;
}


/* =========================================================
   DARK PANEL BUTTON
========================================================= */

.dark-panel
.panel-button {

    color:
        #ffffff;

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

    border-color:
        rgba(
            255,
            255,
            255,
            .35
        );
}


.dark-panel
.panel-button::before {

    background:
        #ffffff;
}


.dark-panel
.panel-button:hover {

    color:
        #013c6c;

    background:
        #ffffff;

    border-color:
        #ffffff;
}


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

.panel-button i {

    font-size:
        11px;

    transition:
        transform
        .4s
        ease;
}


.panel-button:hover i {

    transform:
        translateX(
            5px
        );
}


/* =========================================================
   BOTTOM PANEL LINE
========================================================= */

.panel-bottom {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        4px;

    background:
        rgba(
            1,
            60,
            108,
            .08
        );

    overflow:
        hidden;

    z-index:
        8;
}


.panel-bottom::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        100%;

    background:
        #013c6c;

    transition:

        width
        .65s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.metal-panel:hover
.panel-bottom::after {

    width:
        100%;
}


.dark-panel
.panel-bottom {

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


.dark-panel
.panel-bottom::after {

    background:
        #ffffff;
}


/* =========================================================
   PREMIUM PANEL SHINE
========================================================= */

.metal-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -130%;

    width:
        65%;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .30
            ),
            transparent
        );

    transform:
        skewX(
            -20deg
        );

    z-index:
        20;

    pointer-events:
        none;
}


.metal-panel:hover::before {

    animation:
        metalPanelShine
        1.1s
        ease;
}


@keyframes metalPanelShine {

    0% {

        left:
            -130%;
    }

    100% {

        left:
            150%;
    }

}


/* =========================================================
   TOP EDGE HIGHLIGHT
========================================================= */

.metal-panel {

    --panel-progress:
        0%;
}


.metal-panel:hover {

    --panel-progress:
        100%;
}


.metal-panel::after {

    transition:
        opacity
        .4s
        ease;
}


/* =========================================================
   PANEL ENTRANCE
========================================================= */

.metal-panel {

    animation:
        metalPanelEntrance
        .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        both;
}


.metal-panel:nth-child(1) {

    animation-delay:
        .05s;
}


.metal-panel:nth-child(2) {

    animation-delay:
        .15s;
}


.metal-panel:nth-child(3) {

    animation-delay:
        .25s;
}


.metal-panel:nth-child(4) {

    animation-delay:
        .35s;
}


@keyframes metalPanelEntrance {

    from {

        opacity:
            0;

        transform:
            translateY(
                35px
            );
    }

    to {

        opacity:
            1;

        transform:
            translateY(
                0
            );
    }
}


/* =========================================================
   IMPORTANT
   DISABLE OLD FLEX EXPANSION
========================================================= */

.metal-panel,
.metal-panel.active-panel {

    flex:
        none;
}


.metal-panel:hover,
.metal-panel.active-panel:hover {

    flex:
        none;
}


/* =========================================================
   TABLET
   2 COLUMNS
========================================================= */

@media (max-width: 1100px) {

    .metal-product-section {

        padding:
            80px 0 90px;
    }


    .metal-product-header {

        margin-bottom:
            42px;
    }


    .metal-panels {

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

        gap:
            15px;
    }


    .metal-panel {

        min-height:
            550px;
    }


    .panel-image {

        top:
            55px;

        left:
            48px;

        right:
            25px;

        height:
            250px;
    }


    .panel-image img {

        width:
            100%;

        max-width:
            340px;

        height:
            230px;
    }


    .panel-content {

        left:
            28px;

        right:
            25px;

        bottom:
            62px;
    }


    .panel-content p {

        opacity:
            1;

        transform:
            none;
    }


    .panel-content h3 {

        font-size:
            28px;
    }
}


/* =========================================================
   SMALL TABLET / LAPTOP
========================================================= */

@media (max-width: 900px) {

    .metal-product-header {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            22px;
    }


    .metal-heading-right {

        max-width:
            680px;
    }


    .metal-heading-right p {

        font-size:
            15px;
    }


    .metal-panels {

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


    .metal-panel {

        min-height:
            525px;
    }


    .panel-image {

        left:
            45px;

        right:
            20px;

        height:
            235px;
    }


    .panel-image img {

        height:
            215px;
    }


    .panel-content {

        bottom:
            60px;
    }


    .panel-content p {

        max-width:
            100%;
    }
}


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

@media (max-width: 650px) {

    .metal-product-section {

        padding:
            65px 0 75px;
    }


    .metal-product-wrapper {

        width:
            90%;
    }


    .metal-product-header {

        margin-bottom:
            35px;
    }


    .metal-heading-left {

        padding-left:
            16px;
    }


    .metal-heading-left::before {

        width:
            3px;

        height:
            60px;
    }


    .metal-heading-left span {

        font-size:
            11px;

        letter-spacing:
            2px;
    }


    .metal-heading-left h2 {

        font-size:
            38px;
    }


    .metal-heading-right p {

        font-size:
            14px;

        line-height:
            1.7;
    }


    .metal-panels {

        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .metal-panel {

        min-height:
            500px;
    }


    .panel-bg-number {

        font-size:
            125px;
    }


    .panel-label {

        left:
            20px;

        top:
            28px;
    }


    .panel-image {

        top:
            42px;

        left:
            42px;

        right:
            20px;

        height:
            245px;
    }


    .panel-image img {

        width:
            100%;

        max-width:
            360px;

        height:
            220px;
    }


    .panel-glow {

        width:
            210px;

        height:
            210px;
    }


    .panel-content {

        left:
            25px;

        right:
            25px;

        bottom:
            60px;
    }


    .panel-content h3 {

        font-size:
            29px;
    }


    .panel-content p {

        font-size:
            13px;

        line-height:
            1.6;

        opacity:
            1;

        transform:
            none;
    }


    .panel-button {

        margin-top:
            15px;

        padding:
            10px 16px;

        font-size:
            12px;
    }
}


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

@media (max-width: 420px) {

    .metal-product-section {

        padding:
            55px 0 65px;
    }


    .metal-product-wrapper {

        width:
            90%;
    }


    .metal-heading-left h2 {

        font-size:
            32px;
    }


    .metal-heading-right p {

        font-size:
            13px;
    }


    .metal-panel {

        min-height:
            470px;
    }


    .panel-bg-number {

        font-size:
            110px;
    }


    .panel-image {

        top:
            38px;

        left:
            38px;

        right:
            18px;

        height:
            220px;
    }


    .panel-image img {

        height:
            195px;
    }


    .panel-glow {

        width:
            180px;

        height:
            180px;
    }


    .panel-content {

        left:
            20px;

        right:
            20px;

        bottom:
            55px;
    }


    .panel-small {

        font-size:
            8px;
    }


    .panel-content h3 {

        font-size:
            25px;

        margin-bottom:
            9px;
    }


    .panel-content p {

        font-size:
            12px;

        line-height:
            1.55;
    }


    .panel-button {

        padding:
            9px 13px;

        font-size:
            11px;
    }
}


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

@media (max-width: 350px) {

    .metal-panel {

        min-height:
            450px;
    }


    .panel-image {

        left:
            32px;

        right:
            15px;

        height:
            205px;
    }


    .panel-image img {

        height:
            180px;
    }


    .panel-content {

        left:
            18px;

        right:
            18px;

        bottom:
            50px;
    }


    .panel-content h3 {

        font-size:
            23px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .metal-product-section::before,
    .metal-product-section::after,
    .metal-heading-left::before,
    .heading-line::after,
    .metal-panel,
    .metal-panel *,
    .metal-panel::before {

        animation:
            none !important;

        transition:
            none !important;
    }
}
/* =========================================================
   ABOUT
========================================================= */

/* =========================================================
   SHIV ENTERPRISE
   PREMIUM ABOUT SECTION - V2

   STYLE:
   Premium Industrial / Architectural / Corporate

   COLORS:
   Deep Blue : #013c6c
   Dark Blue : #061a2a
   Silver    : #a6a7a7
   White     : #ffffff
========================================================= */


/* =========================================================
   FONT
========================================================= */

.shiv-about-dark,
.shiv-about-dark * {
    font-family:
        "Aptos Serif",
        Georgia,
        serif;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.shiv-about-dark {

    position: relative;

    width: 100%;

    min-height: 520px;

    padding: 105px 0;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(
            circle at 15% 50%,
            rgba(
                166,
                167,
                167,
                0.10
            ),
            transparent 27%
        ),

        radial-gradient(
            circle at 85% 25%,
            rgba(
                1,
                60,
                108,
                0.45
            ),
            transparent 32%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(
                255,
                255,
                255,
                0.035
            ),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #061522 0%,
            #08243a 48%,
            #031524 100%
        );

}


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

.shiv-about-dark::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.028
            ) 1px,
            transparent 1px
        ),

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

    background-size:
        65px 65px;

    opacity: .65;

    animation:
        shivGridMove
        25s
        linear
        infinite;
}


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

@keyframes shivGridMove {

    0% {

        background-position:
            0 0,
            0 0;

    }

    50% {

        background-position:
            30px 20px,
            20px 30px;

    }

    100% {

        background-position:
            0 0,
            0 0;

    }

}


/* =========================================================
   LARGE CENTER WATERMARK
========================================================= */

.shiv-about-dark::after {

    content: "SHIV";

    position: absolute;

    z-index: 0;

    top: 50%;

    left: 50%;

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

    white-space: nowrap;

    font-size:
        clamp(
            180px,
            27vw,
            390px
        );

    line-height: .8;

    font-weight: 700;

    letter-spacing:
        -20px;

    color:
        rgba(
            255,
            255,
            255,
            0.035
        );

    pointer-events: none;

    user-select: none;

    animation:
        shivCenterWatermark
        14s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   WATERMARK MOTION
========================================================= */

@keyframes shivCenterWatermark {

    0% {

        transform:
            translate(
                -52%,
                -50%
            )
            scale(1);

    }

    50% {

        transform:
            translate(
                -48%,
                -51%
            )
            scale(1.025);

    }

    100% {

        transform:
            translate(
                -52%,
                -49%
            )
            scale(1);

    }

}


/* =========================================================
   EXTRA FLOATING CIRCLE
========================================================= */

.shiv-about-dark {

    --shiv-circle-size: 560px;
}


.shiv-about-dark-wrap::before {

    content: "";

    position: absolute;

    width:
        var(--shiv-circle-size);

    height:
        var(--shiv-circle-size);

    right:
        -390px;

    top:
        -210px;

    border:
        1px solid
        rgba(
            166,
            167,
            167,
            0.14
        );

    border-radius: 50%;

    pointer-events: none;

    animation:
        shivCircleFloat
        18s
        linear
        infinite;
}


@keyframes shivCircleFloat {

    0% {

        transform:
            rotate(0deg);

    }

    100% {

        transform:
            rotate(360deg);

    }

}


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

.shiv-about-dark-wrap {

    position: relative;

    z-index: 3;

    width:
        min(
            1350px,
            90%
        );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        .85fr
        1.25fr
        .9fr;

    gap: 55px;

    align-items: center;
}


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

.shiv-about-dark-left {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: center;

    overflow: visible;
}


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

.shiv-dark-number {

    position: absolute;

    top: 0;

    left: 0;

    color:
        #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    opacity: .65;
}


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

.shiv-dark-number::after {

    content: "";

    position: absolute;

    left: 0;

    top: 23px;

    width: 45px;

    height: 1px;

    background:
        #a6a7a7;

    animation:
        shivNumberLine
        3s
        ease-in-out
        infinite;
}


@keyframes shivNumberLine {

    0%,
    100% {

        width: 25px;

        opacity: .4;

    }

    50% {

        width: 60px;

        opacity: 1;

    }

}


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

.shiv-dark-watermark {

    position: absolute;

    left: -35px;

    bottom: -45px;

    color:
        transparent;

    font-size:
        clamp(
            100px,
            11vw,
            160px
        );

    line-height: 1;

    font-weight: 700;

    letter-spacing:
        -8px;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            0.09
        );

    opacity: .65;

    user-select: none;

    pointer-events: none;

    transition:
        transform
        .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.shiv-about-dark-left:hover
.shiv-dark-watermark {

    transform:
        translateX(25px)
        translateY(-8px);

}


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

.shiv-dark-title {

    position: relative;

    z-index: 4;

    margin-left: 45px;

}


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

.shiv-dark-title span {

    position: relative;

    display: inline-block;

    margin-bottom: 17px;

    color:
        #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    opacity: .82;
}


.shiv-dark-title span::before {

    content: "";

    position: absolute;

    left: -45px;

    top: 50%;

    width: 32px;

    height: 1px;

    background:
        #a6a7a7;

    transform:
        translateY(-50%);
}


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

.shiv-dark-title h2 {

    margin: 0;

    color:
        #ffffff;

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

    line-height:
        1.02;

    font-weight:
        700;

    letter-spacing:
        -1.8px;
}


.shiv-dark-title strong {

    display: block;

    color:
        #ffffff;

    font-weight:
        700;

}


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

.shiv-dark-title h2::after {

    content: "";

    display: block;

    width: 70px;

    height: 2px;

    margin-top: 24px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #a6a7a7,
            transparent
        );

    animation:
        shivTitleLine
        4s
        ease-in-out
        infinite;
}


@keyframes shivTitleLine {

    0% {

        width: 40px;

    }

    50% {

        width: 110px;

    }

    100% {

        width: 40px;

    }

}


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

.shiv-about-dark-content {

    position: relative;

    padding:
        22px 0 22px 45px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );
}


/* =========================================================
   CENTER MOVING BORDER
========================================================= */

.shiv-about-dark-content::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 0;

    width: 2px;

    height: 70px;

    background:
        #a6a7a7;

    animation:
        shivContentLine
        4s
        ease-in-out
        infinite;
}


@keyframes shivContentLine {

    0% {

        top: 0;

        opacity: .3;

    }

    50% {

        top: 55%;

        opacity: 1;

    }

    100% {

        top: 0;

        opacity: .3;

    }

}


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

.shiv-about-dark-content p {

    margin:
        0 0 15px;

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

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   LEAD
========================================================= */

.shiv-about-dark-content
.shiv-dark-lead {

    color:
        #ffffff;

    font-size:
        17px;

    line-height:
        1.65;
}


.shiv-about-dark-content
strong,
.shiv-about-dark-content
b {

    color:
        #ffffff;

    font-weight:
        700;
}


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

.shiv-dark-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 22px;

    margin-top: 12px;

    padding:
        13px 20px;

    color:
        #061522;

    background:
        #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    overflow: hidden;

    transition:
        transform .4s ease,
        color .4s ease,
        background .4s ease;
}


/* BUTTON SHINE */

.shiv-dark-btn::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                166,
                167,
                167,
                .65
            ),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;
}


.shiv-dark-btn:hover::before {

    left:
        140%;
}


.shiv-dark-btn span,
.shiv-dark-btn i {

    position: relative;

    z-index: 2;
}


.shiv-dark-btn i {

    font-size: 18px;

    font-style: normal;

    transition:
        transform .4s ease;
}


.shiv-dark-btn:hover {

    transform:
        translateY(-4px);

    color:
        #013c6c;
}


.shiv-dark-btn:hover i {

    transform:
        translate(
            5px,
            -5px
        );
}


/* =========================================================
   RIGHT CAPABILITIES
========================================================= */

.shiv-about-dark-range {

    position: relative;

    padding-left: 10px;
}


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

.shiv-dark-range-heading {

    position: relative;

    margin-bottom: 18px;

    color:
        #ffffff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    opacity: .8;
}


.shiv-dark-range-heading::after {

    content: "";

    display: inline-block;

    width: 45px;

    height: 1px;

    margin-left: 12px;

    vertical-align: middle;

    background:
        #a6a7a7;
}


/* =========================================================
   CAPABILITY ITEM
========================================================= */

.shiv-dark-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        17px 0;

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

    overflow: hidden;

    transition:
        padding-left .4s ease;
}


.shiv-dark-item:first-of-type {

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


/* =========================================================
   ITEM MOVING BACKGROUND
========================================================= */

.shiv-dark-item::before {

    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .055
            ),
            transparent
        );

    transition:
        left .7s ease;
}


.shiv-dark-item:hover::before {

    left: 100%;
}


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

.shiv-dark-item span {

    position: relative;

    z-index: 2;

    min-width: 25px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        color .35s ease;
}


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

.shiv-dark-item strong {

    position: relative;

    z-index: 2;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

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


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

.shiv-dark-item:hover {

    padding-left:
        12px;
}


.shiv-dark-item:hover span {

    color:
        #a6a7a7;
}


.shiv-dark-item:hover strong {

    color:
        #ffffff;

    transform:
        translateX(6px);
}


/* =========================================================
   ITEM SIDE ACCENT
========================================================= */

.shiv-dark-item::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background:
        #a6a7a7;

    transition:
        width .45s ease;
}


.shiv-dark-item:hover::after {

    width:
        55px;
}


/* =========================================================
   BOTTOM MOVING LINE
========================================================= */

.shiv-about-dark-wrap > .shiv-moving-line {

    position: absolute;

    left: 0;

    bottom: -35px;

    width: 130px;

    height: 1px;

    background:
        #a6a7a7;

    opacity: .6;

    animation:
        shivMovingLine
        4s
        ease-in-out
        infinite;
}


@keyframes shivMovingLine {

    0% {

        transform:
            translateX(0);

        opacity: .15;

    }

    50% {

        transform:
            translateX(300px);

        opacity: .9;

    }

    100% {

        transform:
            translateX(0);

        opacity: .15;

    }

}


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

@media (max-width: 1000px) {

    .shiv-about-dark {

        padding:
            85px 0;
    }


    .shiv-about-dark-wrap {

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

        gap:
            40px;
    }


    .shiv-about-dark-range {

        grid-column:
            1 / -1;

        display:
            grid;

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

        gap:
            10px;

        padding:
            20px 0 0;
    }


    .shiv-dark-range-heading {

        grid-column:
            1 / -1;
    }


    .shiv-dark-item {

        padding:
            15px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

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


    .shiv-dark-item:first-of-type {

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

}


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

@media (max-width: 700px) {

    .shiv-about-dark {

        padding:
            70px 0;

        min-height:
            auto;
    }


    .shiv-about-dark-wrap {

        width:
            88%;

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .shiv-about-dark::after {

        font-size:
            120px;

        letter-spacing:
            -8px;
    }


    .shiv-about-dark-left {

        min-height:
            230px;
    }


    .shiv-dark-watermark {

        left:
            -10px;

        bottom:
            -10px;

        font-size:
            100px;
    }


    .shiv-dark-title {

        margin-left:
            30px;
    }


    .shiv-dark-title h2 {

        font-size:
            42px;
    }


    .shiv-dark-title span::before {

        left:
            -30px;

        width:
            22px;
    }


    .shiv-about-dark-content {

        padding:
            0;

        border-left:
            none;
    }


    .shiv-about-dark-content::before {

        display:
            none;
    }


    .shiv-about-dark-content
    .shiv-dark-lead {

        font-size:
            17px;
    }


    .shiv-about-dark-range {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;

        padding:
            0;
    }


    .shiv-dark-range-heading {

        grid-column:
            1 / -1;
    }


    .shiv-dark-item {

        min-height:
            82px;

        padding:
            15px;
    }

}


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

@media (max-width: 420px) {

    .shiv-about-dark {

        padding:
            60px 0;
    }


    .shiv-dark-title h2 {

        font-size:
            36px;
    }


    .shiv-dark-watermark {

        font-size:
            80px;
    }


    .shiv-about-dark-range {

        grid-template-columns:
            1fr;
    }


    .shiv-dark-item {

        min-height:
            auto;
    }


    .shiv-about-dark::after {

        font-size:
            95px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-about-dark *,
    .shiv-about-dark::before,
    .shiv-about-dark::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   SHIV ENTERPRISE
   PREMIUM FORGING PROCESS VIDEO SECTION
   ========================================================= */

.shiv-forge-video-section,
.shiv-forge-video-section * {
    font-family: "Aptos Serif", Georgia, serif;
}


/* =========================
   MAIN SECTION
========================= */

.shiv-forge-video-section {
    position: relative;
    padding: 105px 0 90px;
    background: #f7f8f8;
    overflow: hidden;
}


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

.shiv-forge-video-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(1, 60, 108, 0.07);
    border-radius: 50%;
    top: -260px;
    right: -170px;
}

.shiv-forge-video-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(166, 167, 167, 0.18);
    border-radius: 50%;
    bottom: -150px;
    left: -100px;
}


.shiv-forge-video-bg-text {
    position: absolute;
    right: 2%;
    top: 40%;
    font-size: clamp(120px, 18vw, 300px);
    font-weight: 700;
    letter-spacing: -10px;
    color: rgba(1, 60, 108, 0.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}


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

.shiv-forge-video-wrapper {
    position: relative;
    z-index: 2;
    width: min(1350px, 90%);
    margin: auto;
}


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

.shiv-forge-video-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    margin-bottom: 48px;
}


.shiv-forge-heading-left {
    position: relative;
    padding-left: 22px;
    border-left: 4px solid #013c6c;
}


.shiv-forge-heading-left span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #013c6c;
}


.shiv-forge-heading-left h2 {
    margin: 0;
    color: #1c252b;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -2px;
}


.shiv-forge-heading-left h2 strong {
    display: block;
    color: #013c6c;
    font-weight: 700;
}


.shiv-forge-heading-right {
    max-width: 470px;
    padding-bottom: 4px;
}


.shiv-forge-heading-right p {
    margin: 0;
    color: #687178;
    font-size: 16px;
    line-height: 1.8;
}


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

.shiv-forge-video-layout {
    display: grid;
    grid-template-columns: 0.72fr 1.45fr;
    gap: 18px;
    height: 420px;
}


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

.shiv-forge-video-card {
    position: relative;
    overflow: hidden;
    background: #a6a7a7;
    border: 1px solid rgba(1, 60, 108, 0.12);
    isolation: isolate;
    box-shadow:
        0 18px 45px rgba(1, 60, 108, 0.09);

    transition:
        transform 0.6s cubic-bezier(.16, 1, .3, 1),
        box-shadow 0.6s ease;
}


.shiv-forge-video-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 28px 65px rgba(1, 60, 108, 0.15);
}


/* =========================
   VIDEO
========================= */

.shiv-forge-video-card video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform 1.2s cubic-bezier(.16, 1, .3, 1);
}


.shiv-forge-video-card:hover video {
    transform: scale(1.08);
}


/* =========================
   VIDEO OVERLAY
========================= */

.shiv-forge-video-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(1, 60, 108, 0.03) 20%,
            rgba(1, 30, 50, 0.12) 45%,
            rgba(1, 25, 38, 0.88) 100%
        );

    transition: background 0.5s ease;
}


.shiv-forge-video-card:hover .shiv-forge-video-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(1, 60, 108, 0.08),
            rgba(1, 25, 38, 0.92)
        );
}


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

.shiv-forge-video-center {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 3;
}


.shiv-forge-play {
    width: 72px;
    height: 72px;

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

    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 50%;

    color: #fff;

    font-size: 18px;

    padding-left: 4px;

    background: rgba(1, 60, 108, 0.18);
    backdrop-filter: blur(7px);

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


.shiv-forge-video-card:hover .shiv-forge-play {
    transform: scale(1.13);
    background: #013c6c;
    border-color: #013c6c;
}


/* =========================
   VIDEO CAPTION
========================= */

.shiv-forge-video-caption {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    z-index: 4;
}


.shiv-forge-video-caption span {
    display: block;

    margin-bottom: 8px;

    color: #a6a7a7;

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

    letter-spacing: 3px;
}


.shiv-forge-video-caption h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(25px, 3vw, 40px);

    font-weight: 400;
    letter-spacing: -0.5px;
}


/* =========================
   PREMIUM EDGE
========================= */

.shiv-forge-video-card::before {
    content: "";

    position: absolute;

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

    height: 4px;

    z-index: 5;

    background: #013c6c;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.6s ease;
}


.shiv-forge-video-card:hover::before {
    transform: scaleX(1);
}


/* =========================
   CORNER DETAIL
========================= */

.shiv-forge-video-card::after {
    content: "";

    position: absolute;

    top: 22px;
    right: 22px;

    width: 45px;
    height: 45px;

    border-top: 1px solid rgba(255,255,255,0.65);
    border-right: 1px solid rgba(255,255,255,0.65);

    z-index: 4;

    opacity: 0.65;

    transition:
        width 0.5s ease,
        height 0.5s ease;
}


.shiv-forge-video-card:hover::after {
    width: 65px;
    height: 65px;
}


/* =========================
   PROCESS LINE
========================= */

.shiv-forge-process-line {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 30px;

    color: #697177;

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

    letter-spacing: 2.5px;
}


.shiv-forge-process-line i {
    width: 45px;
    height: 1px;

    background: #a6a7a7;

    display: block;
}


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

@keyframes forgeReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.shiv-forge-video-card {
    animation: forgeReveal 0.9s ease both;
}


.shiv-forge-vertical {
    animation-delay: 0.1s;
}


.shiv-forge-horizontal {
    animation-delay: 0.25s;
}


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

@media (max-width: 900px) {

    .shiv-forge-video-section {
        padding: 80px 0;
    }

    .shiv-forge-video-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .shiv-forge-heading-right {
        max-width: 650px;
    }

    .shiv-forge-video-layout {
        height: 560px;
        grid-template-columns: 0.75fr 1.25fr;
    }

}


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

@media (max-width: 650px) {

    .shiv-forge-video-section {
        padding: 70px 0;
    }

    .shiv-forge-video-wrapper {
        width: 92%;
    }

    .shiv-forge-video-heading {
        margin-bottom: 35px;
    }

    .shiv-forge-heading-left h2 {
        font-size: 44px;
    }

    .shiv-forge-heading-right p {
        font-size: 14px;
        line-height: 1.7;
    }

    .shiv-forge-video-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 15px;
    }

    .shiv-forge-vertical {
        height: 540px;
    }

    .shiv-forge-horizontal {
        height: 330px;
    }

    .shiv-forge-process-line {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 22px;
        line-height: 1.8;
    }

    .shiv-forge-process-line i {
        width: 25px;
    }

}


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

@media (max-width: 420px) {

    .shiv-forge-video-section {
        padding: 60px 0;
    }

    .shiv-forge-heading-left h2 {
        font-size: 38px;
    }

    .shiv-forge-heading-left {
        padding-left: 16px;
    }

    .shiv-forge-vertical {
        height: 470px;
    }

    .shiv-forge-horizontal {
        height: 250px;
    }

    .shiv-forge-video-caption {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .shiv-forge-video-caption h3 {
        font-size: 26px;
    }

    .shiv-forge-play {
        width: 58px;
        height: 58px;
        font-size: 15px;
    }

}




/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-cat-pdf {
        animation: none;
    }


    .shiv-cat-front,
    .shiv-cat-front img,
    .shiv-cat-front-overlay small,
    .shiv-cat-dark-btn {
        transition: none;
    }

}

 /* =========================================================
    SHIV ENTERPRISE
    PREMIUM INDUSTRIES WE SERVE
 ========================================================= */

.shiv-industries-section,
.shiv-industries-section * {
    font-family: "Aptos Serif", Georgia, serif;
}


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

.shiv-industries-section {
    position: relative;

    padding: 90px 0;

    background: #f5f6f6;

    overflow: hidden;
}


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

.shiv-industries-section::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

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

    border: 1px solid rgba(1, 60, 108, 0.07);

    border-radius: 50%;

    animation:
        industryRotate 25s linear infinite;
}


.shiv-industries-section::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

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

    border: 1px solid rgba(166, 167, 167, 0.16);

    border-radius: 50%;
}


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

.shiv-industries-bg-text {
    position: absolute;

    right: -10px;
    bottom: 25px;

    font-size: clamp(100px, 15vw, 240px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -10px;

    color: rgba(1, 60, 108, 0.025);

    pointer-events: none;

    user-select: none;
}


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

.shiv-industries-wrapper {
    position: relative;

    z-index: 2;

    width: min(1350px, 90%);

    margin: auto;
}


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

.shiv-industries-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 42px;
}


.shiv-industries-title {
    padding-left: 20px;

    border-left: 4px solid #013c6c;
}


.shiv-industries-title span {
    display: block;

    margin-bottom: 8px;

    color: #013c6c;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;
}


.shiv-industries-title h2 {
    margin: 0;

    color: #202a30;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -2px;
}


.shiv-industries-title h2 strong {
    color: #013c6c;

    font-weight: 700;
}


.shiv-industries-header > p {
    max-width: 450px;

    margin: 0;

    color: #687178;

    font-size: 14px;

    line-height: 1.8;
}


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

.shiv-industries-grid {
    display: grid;

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

    grid-auto-rows: 210px;

    gap: 12px;
}


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

.shiv-industry-card {
    position: relative;

    overflow: hidden;

    display: block;

    text-decoration: none;

    background: #a6a7a7;

    isolation: isolate;

    box-shadow:
        0 8px 25px rgba(1, 60, 108, 0.07);

    transition:
        transform 0.6s cubic-bezier(.16,1,.3,1),
        box-shadow 0.6s ease;
}


/* First row */

.shiv-industry-card:nth-child(1) {
    grid-column: span 4;
}

.shiv-industry-card:nth-child(2) {
    grid-column: span 4;
}

.shiv-industry-card:nth-child(3) {
    grid-column: span 4;
}


/* Second row */

.shiv-industry-card:nth-child(4) {
    grid-column: span 3;
}

.shiv-industry-card:nth-child(5) {
    grid-column: span 3;
}

.shiv-industry-card:nth-child(6) {
    grid-column: span 6;
}


/* Third row */

.shiv-industry-card:nth-child(7) {
    grid-column: span 4;
}

.shiv-industry-card:nth-child(8) {
    grid-column: span 4;
}

.shiv-industry-card:nth-child(9) {
    grid-column: span 4;
}


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

.shiv-industry-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transform: scale(1.02);

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter 0.7s ease;
}


.shiv-industry-card:hover img {
    transform: scale(1.10);

    filter: saturate(1.1);
}


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

.shiv-industry-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(1, 25, 40, 0.02) 20%,
            rgba(1, 25, 40, 0.82) 100%
        );

    transition:
        background 0.5s ease;
}


.shiv-industry-card:hover .shiv-industry-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(1, 60, 108, 0.12),
            rgba(1, 25, 40, 0.91)
        );
}


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

.shiv-industry-content {
    position: absolute;

    z-index: 3;

    left: 24px;
    right: 20px;
    bottom: 22px;
}


.shiv-industry-content span {
    display: block;

    margin-bottom: 7px;

    color: #a6a7a7;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.shiv-industry-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(20px, 2vw, 29px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.4px;
}


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

.shiv-industry-content i {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 38px;
    height: 38px;

    display: flex;

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

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 17px;

    font-style: normal;

    opacity: 0;

    transform:
        translateX(10px)
        rotate(-20deg);

    transition:
        opacity 0.4s ease,
        transform 0.5s ease,
        background 0.4s ease;
}


.shiv-industry-card:hover .shiv-industry-content i {
    opacity: 1;

    transform:
        translateX(0)
        rotate(0deg);
}


.shiv-industry-content i:hover {
    background: #013c6c;

    border-color: #013c6c;
}


/* =========================================================
   TOP SHINE
========================================================= */

.shiv-industry-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    z-index: 4;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.13),
            transparent
        );

    transform: skewX(-18deg);

    transition:
        left 0.9s ease;

    pointer-events: none;
}


.shiv-industry-card:hover::before {
    left: 140%;
}


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

.shiv-industry-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    z-index: 5;

    background: #a6a7a7;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.5s ease;
}


.shiv-industry-card:hover::after {
    transform: scaleX(1);
}


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

.shiv-industry-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(1, 60, 108, 0.15);
}


/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

@keyframes industryReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.shiv-industry-card {
    animation:
        industryReveal 0.8s ease both;
}


.shiv-industry-card:nth-child(1) {
    animation-delay: .05s;
}

.shiv-industry-card:nth-child(2) {
    animation-delay: .10s;
}

.shiv-industry-card:nth-child(3) {
    animation-delay: .15s;
}

.shiv-industry-card:nth-child(4) {
    animation-delay: .20s;
}

.shiv-industry-card:nth-child(5) {
    animation-delay: .25s;
}

.shiv-industry-card:nth-child(6) {
    animation-delay: .30s;
}

.shiv-industry-card:nth-child(7) {
    animation-delay: .35s;
}

.shiv-industry-card:nth-child(8) {
    animation-delay: .40s;
}

.shiv-industry-card:nth-child(9) {
    animation-delay: .45s;
}


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

@keyframes industryRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 1000px) {

    .shiv-industries-section {
        padding: 75px 0;
    }


    .shiv-industries-grid {
        grid-template-columns:
            repeat(6, 1fr);

        grid-auto-rows: 190px;
    }


    .shiv-industry-card:nth-child(n) {
        grid-column: span 2;
    }


    .shiv-industry-card:nth-child(7),
    .shiv-industry-card:nth-child(8),
    .shiv-industry-card:nth-child(9) {
        grid-column: span 2;
    }


    .shiv-industries-header {
        gap: 40px;
    }

}


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

@media (max-width: 650px) {

    .shiv-industries-section {
        padding: 60px 0;
    }


    .shiv-industries-wrapper {
        width: 92%;
    }


    .shiv-industries-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        margin-bottom: 30px;
    }


    .shiv-industries-title {
        padding-left: 15px;

        border-left-width: 3px;
    }


    .shiv-industries-title h2 {
        font-size: 43px;

        letter-spacing: -1px;
    }


    .shiv-industries-header > p {
        max-width: 100%;

        font-size: 13px;

        line-height: 1.7;
    }


    .shiv-industries-grid {
        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-auto-rows: 190px;

        gap: 10px;
    }


    .shiv-industry-card:nth-child(n) {
        grid-column: span 1;
    }


    /* Every third card full width */

    .shiv-industry-card:nth-child(3),
    .shiv-industry-card:nth-child(6),
    .shiv-industry-card:nth-child(9) {
        grid-column: span 2;
    }


    .shiv-industry-content {
        left: 17px;

        right: 15px;

        bottom: 17px;
    }


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


    .shiv-industry-content span {
        font-size: 8px;

        letter-spacing: 1.8px;
    }


    .shiv-industry-content i {
        width: 32px;
        height: 32px;

        font-size: 14px;
    }

}


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

@media (max-width: 420px) {

    .shiv-industries-section {
        padding: 50px 0;
    }


    .shiv-industries-title h2 {
        font-size: 38px;
    }


    .shiv-industries-grid {
        grid-auto-rows: 175px;

        gap: 8px;
    }


    .shiv-industry-content {
        left: 14px;

        bottom: 14px;
    }


    .shiv-industry-content h3 {
        font-size: 18px;
    }


    .shiv-industry-content i {
        width: 28px;
        height: 28px;

        font-size: 12px;
    }


    .shiv-industries-bg-text {
        font-size: 85px;

        letter-spacing: -5px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-industries-section::before {
        animation: none;
    }

    .shiv-industry-card {
        animation: none;
    }

    .shiv-industry-card,
    .shiv-industry-card img,
    .shiv-industry-overlay,
    .shiv-industry-content i,
    .shiv-industry-card::before,
    .shiv-industry-card::after {
        transition: none;
    }

}

/* =========================================================
   SHIV ENTERPRISE
   PREMIUM PRODUCTS SLIDER
   LIGHTER DARK INDUSTRIAL VERSION

   COLORS:
   #013c6c = Deep Blue
   #a6a7a7 = Silver
========================================================= */


/* =========================================================
   FONT
========================================================= */

.shiv-products-section,
.shiv-products-section * {
    font-family: "Aptos Serif", Georgia, serif;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.shiv-products-section {

    position: relative;

    width: 100%;

    padding: 95px 0 75px;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(1, 60, 108, 0.38),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(166, 167, 167, 0.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #102331 0%,
            #142d3e 48%,
            #102635 100%
        );

    overflow: hidden;
}


/* =========================================================
   BACKGROUND CIRCLE - TOP RIGHT
========================================================= */

.shiv-products-section::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -260px;
    top: -230px;

    border: 1px solid
        rgba(166, 167, 167, 0.13);

    border-radius: 50%;

    animation:
        shivProductRotate 30s linear infinite;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND CIRCLE - BOTTOM LEFT
========================================================= */

.shiv-products-section::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -190px;

    border: 1px solid
        rgba(1, 60, 108, 0.35);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   WATERMARK
========================================================= */

.shiv-products-bg-text {

    position: absolute;

    right: -20px;
    bottom: 20px;

    font-size:
        clamp(
            100px,
            17vw,
            270px
        );

    font-weight: 700;

    line-height: 0.8;

    letter-spacing: -12px;

    color:
        rgba(255, 255, 255, 0.025);

    pointer-events: none;

    user-select: none;

    white-space: nowrap;
}


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

.shiv-products-wrapper {

    position: relative;

    z-index: 3;

    width:
        min(
            1380px,
            91%
        );

    margin: 0 auto;
}


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

.shiv-products-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 45px;
}


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

.shiv-products-title {

    padding-left: 22px;

    border-left:
        3px solid #a6a7a7;
}


.shiv-products-title span {

    display: block;

    margin-bottom: 9px;

    color: #a6a7a7;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.shiv-products-title h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            40px,
            5vw,
            67px
        );

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -2px;
}


.shiv-products-title h2 strong {

    display: block;

    color: #d0d2d2;

    font-weight: 700;
}


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

.shiv-products-intro {

    display: flex;

    align-items: flex-end;

    gap: 35px;
}


.shiv-products-intro p {

    width: 390px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   CONTROLS
========================================================= */

.shiv-products-controls {

    display: flex;

    gap: 8px;
}


.shiv-products-controls button {

    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid
        rgba(166, 167, 167, 0.40);

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

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

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


.shiv-products-controls button:hover {

    background: #a6a7a7;

    border-color: #a6a7a7;

    color: #102331;

    transform:
        translateY(-3px);
}


/* =========================================================
   SLIDER WINDOW
========================================================= */

.shiv-products-slider {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        12px 3px 35px;
}


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

.shiv-products-track {

    display: flex;

    gap: 18px;

    width: max-content;

    transition:
        transform
        0.85s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

    will-change: transform;
}


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

.shiv-product-card {

    position: relative;

    display: block;

    width:
        calc(
            (
                min(
                    1380px,
                    91vw
                ) - 36px
            ) / 3
        );

    height: 440px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1d3a4d 0%,
            #102635 100%
        );

    border:
        1px solid
        rgba(166, 167, 167, 0.20);

    text-decoration: none;

    isolation: isolate;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.22);

    transition:
        transform
        0.6s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        border-color
        0.5s ease,
        box-shadow
        0.6s ease;
}


.shiv-product-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(
            166,
            167,
            167,
            0.50
        );

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.36),

        0 0 35px
        rgba(1, 60, 108, 0.22);
}


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

.shiv-product-number {

    position: absolute;

    z-index: 5;

    top: 20px;
    left: 20px;

    color:
        rgba(
            255,
            255,
            255,
            0.50
        );

    font-size: 11px;

    letter-spacing: 2px;

    transition:
        color 0.4s ease;
}


.shiv-product-card:hover
.shiv-product-number {

    color: #ffffff;
}


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

.shiv-product-image {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 68%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


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

.shiv-product-image img {

    position: relative;

    z-index: 2;

    width: 80%;

    height: 80%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 25px
            rgba(0, 0, 0, 0.38)
        );

    transition:
        transform
        0.9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        filter 0.7s ease;
}


.shiv-product-card:hover
.shiv-product-image img {

    transform:
        scale(1.12)
        translateY(-7px);

    filter:
        drop-shadow(
            0 35px 35px
            rgba(0, 0, 0, 0.50)
        );
}


/* =========================================================
   BLUE PRODUCT GLOW
========================================================= */

.shiv-product-glow {

    position: absolute;

    z-index: 1;

    width: 230px;

    height: 230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                1,
                60,
                108,
                0.58
            ),
            rgba(
                1,
                60,
                108,
                0.13
            ) 45%,
            transparent 70%
        );

    filter: blur(5px);

    transition:
        transform
        0.8s ease,
        opacity
        0.5s ease;
}


.shiv-product-card:hover
.shiv-product-glow {

    transform:
        scale(1.25);

    opacity: 1.2;
}


/* =========================================================
   IMAGE BOTTOM LINE
========================================================= */

.shiv-product-image::after {

    content: "";

    position: absolute;

    left: 15%;

    bottom: 0;

    width: 70%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                166,
                167,
                167,
                0.40
            ),
            transparent
        );
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.shiv-product-info {

    position: absolute;

    z-index: 4;

    left: 24px;

    right: 24px;

    bottom: 24px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            166,
            167,
            167,
            0.22
        );
}


.shiv-product-info span {

    display: block;

    margin-bottom: 8px;

    color: #c2c4c4;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.shiv-product-info h3 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            24px,
            2.4vw,
            34px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.8px;
}


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

.shiv-product-arrow {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            166,
            167,
            167,
            0.42
        );

    border-radius: 50%;

    color: #ffffff;

    font-size: 17px;

    opacity: 0;

    transform:
        translateX(12px)
        rotate(-25deg);

    transition:
        opacity
        0.4s ease,

        transform
        0.5s ease,

        background
        0.4s ease,

        border-color
        0.4s ease;
}


.shiv-product-card:hover
.shiv-product-arrow {

    opacity: 1;

    transform:
        translateX(0)
        rotate(0deg);
}


.shiv-product-arrow:hover {

    background: #013c6c;

    border-color: #013c6c;
}


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

.shiv-product-card::before {

    content: "";

    position: absolute;

    z-index: 10;

    top: 0;

    left: -130%;

    width: 55%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.11
            ),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left
        0.9s ease;

    pointer-events: none;
}


.shiv-product-card:hover::before {

    left: 140%;
}


/* =========================================================
   CARD BOTTOM ACCENT
========================================================= */

.shiv-product-card::after {

    content: "";

    position: absolute;

    z-index: 8;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 3px;

    background: #a6a7a7;

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform
        0.5s ease;
}


.shiv-product-card:hover::after {

    transform:
        scaleX(1);
}


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

.shiv-products-bottom {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 8px;
}


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

.shiv-products-line {

    flex: 1;

    height: 1px;

    background:
        rgba(
            166,
            167,
            167,
            0.18
        );
}


.shiv-products-line span {

    display: block;

    width: 28%;

    height: 1px;

    background: #a6a7a7;
}


/* =========================================================
   PRODUCT COUNT
========================================================= */

.shiv-products-count {

    display: flex;

    align-items: center;

    gap: 12px;
}


.shiv-products-count strong {

    color: #c6c8c8;

    font-size: 20px;

    font-weight: 400;
}


.shiv-products-count small {

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size: 8px;

    letter-spacing: 2px;
}


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

@keyframes shivProductRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


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

@media (max-width: 1000px) {

    .shiv-products-section {

        padding:
            75px 0 65px;
    }


    .shiv-products-header {

        gap: 35px;
    }


    .shiv-products-intro {

        flex-direction: column;

        align-items: flex-end;

        gap: 20px;
    }


    .shiv-products-intro p {

        width: 300px;
    }


    .shiv-product-card {

        width:
            calc(
                (
                    min(
                        92vw,
                        900px
                    ) - 18px
                ) / 2
            );

        height: 410px;
    }

}


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

@media (max-width: 700px) {

    .shiv-products-section {

        padding:
            60px 0 50px;
    }


    .shiv-products-wrapper {

        width: 92%;
    }


    .shiv-products-header {

        display: block;

        margin-bottom: 30px;
    }


    .shiv-products-title {

        padding-left: 15px;
    }


    .shiv-products-title h2 {

        font-size: 43px;

        letter-spacing: -1px;
    }


    .shiv-products-intro {

        margin-top: 22px;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 15px;
    }


    .shiv-products-intro p {

        width: auto;

        max-width: 270px;

        font-size: 12px;

        line-height: 1.65;
    }


    .shiv-products-controls button {

        width: 42px;

        height: 42px;

        font-size: 16px;
    }


    .shiv-products-slider {

        padding-bottom: 25px;
    }


    .shiv-products-track {

        gap: 12px;
    }


    .shiv-product-card {

        width:
            calc(
                92vw - 4vw
            );

        height: 390px;
    }


    .shiv-product-image {

        height: 65%;
    }


    .shiv-product-image img {

        width: 76%;

        height: 76%;
    }


    .shiv-product-info {

        left: 18px;

        right: 18px;

        bottom: 18px;
    }


    .shiv-product-info h3 {

        font-size: 25px;
    }


    .shiv-product-number {

        top: 16px;

        left: 16px;
    }


    .shiv-product-arrow {

        width: 38px;

        height: 38px;

        font-size: 15px;

        opacity: 1;

        transform: none;
    }


    .shiv-products-bottom {

        gap: 18px;
    }

}


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

@media (max-width: 400px) {

    .shiv-products-section {

        padding:
            50px 0 45px;
    }


    .shiv-products-title h2 {

        font-size: 37px;
    }


    .shiv-products-intro {

        align-items: flex-end;
    }


    .shiv-products-intro p {

        font-size: 11px;
    }


    .shiv-product-card {

        width:
            calc(
                92vw - 4vw
            );

        height: 350px;
    }


    .shiv-product-info h3 {

        font-size: 23px;
    }


    .shiv-product-info span {

        font-size: 7px;
    }


    .shiv-products-count small {

        display: none;
    }


    .shiv-products-bg-text {

        font-size: 100px;

        letter-spacing: -6px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-products-section::before {

        animation: none;
    }


    .shiv-product-card,
    .shiv-product-card *,
    .shiv-products-track,
    .shiv-products-controls button {

        transition: none !important;
    }

}





/* =========================================================
   SHIV ENTERPRISE
   COMPANY + CATALOGUE
   PREMIUM MOVING / SHIFTING VERSION
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.shiv-company-catalogue {

    position: relative;

    width: 100%;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(1, 60, 108, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(166, 167, 167, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7f8f8 0%,
            #edf1f2 52%,
            #f8f9f9 100%
        );

    font-family:
        "Aptos Serif",
        Georgia,
        serif;
}


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

.shiv-company-catalogue-bg {

    position: absolute;

    right: -30px;
    bottom: -35px;

    font-size:
        clamp(
            150px,
            20vw,
            300px
        );

    font-weight: 700;

    line-height: .8;

    letter-spacing: -15px;

    color:
        rgba(
            1,
            60,
            108,
            0.035
        );

    pointer-events: none;

    user-select: none;

    white-space: nowrap;

    animation:
        shivWatermarkMove
        16s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   WATERMARK MOTION
========================================================= */

@keyframes shivWatermarkMove {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);

    }

    50% {

        transform:
            translate3d(
                -25px,
                -12px,
                0
            )
            rotate(-1deg);

    }

    100% {

        transform:
            translate3d(
                15px,
                -25px,
                0
            )
            rotate(1deg);

    }

}


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

.shiv-company-catalogue-wrap {

    position: relative;

    z-index: 2;

    width:
        min(
            1380px,
            91%
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 55px;

    align-items: stretch;
}


/* =========================================================
   LEFT COMPANY BLOCK
========================================================= */

.shiv-company-block {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 400px;

    padding:
        48px 45px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #142d3e 0%,
            #102331 100%
        );

    box-shadow:
        0 22px 55px
        rgba(
            16,
            35,
            49,
            .18
        );

    opacity: 0;

    transform:
        translateX(-70px);

    animation:
        shivCompanyReveal
        1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        .15s
        forwards;
}


/* =========================================================
   LEFT PANEL REVEAL
========================================================= */

@keyframes shivCompanyReveal {

    0% {

        opacity: 0;

        transform:
            translateX(-70px);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   LEFT DECORATIVE LINE
========================================================= */

.shiv-company-block::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            #a6a7a7,
            #013c6c,
            #a6a7a7
        );

    background-size:
        100% 200%;

    animation:
        shivVerticalLine
        4s
        ease-in-out
        infinite;
}


@keyframes shivVerticalLine {

    0% {

        background-position:
            0 0;

    }

    50% {

        background-position:
            0 100%;

    }

    100% {

        background-position:
            0 0;

    }

}


/* =========================================================
   LEFT LIGHT SWEEP
========================================================= */

.shiv-company-block::after {

    content: "";

    position: absolute;

    top: -30%;

    left: -100%;

    width: 60%;

    height: 170%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .055
            ),
            transparent
        );

    transform:
        skewX(-18deg);

    pointer-events: none;

    animation:
        shivCompanyLight
        7s
        ease-in-out
        infinite;
}


@keyframes shivCompanyLight {

    0% {

        left: -100%;

    }

    45% {

        left: 140%;

    }

    100% {

        left: 140%;

    }

}


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

.shiv-company-label {

    display: inline-block;

    margin-bottom: 15px;

    color:
        #a6a7a7;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        shivTextReveal
        .7s
        ease
        .75s
        forwards;
}


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

.shiv-company-block h2 {

    max-width: 600px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            32px,
            3.4vw,
            52px
        );

    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -1.5px;

    opacity: 0;

    transform:
        translateY(20px);

    animation:
        shivTextReveal
        .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        .9s
        forwards;
}


.shiv-company-block h2 strong {

    display: block;

    color:
        #c9cbcb;

    font-weight: 700;

}


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

.shiv-company-products {

    max-width: 500px;

    margin:
        20px 0 0;

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

    font-size: 13px;

    line-height: 1.75;

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        shivTextReveal
        .7s
        ease
        1.1s
        forwards;
}


.shiv-company-products b {

    color: #ffffff;

    font-weight: 500;

}


/* =========================================================
   GLOBAL EXPORT
========================================================= */

.shiv-global-export {

    margin-top: 25px;

    padding-left: 18px;

    border-left:
        1px solid
        rgba(
            166,
            167,
            167,
            .40
        );

    opacity: 0;

    transform:
        translateX(-20px);

    animation:
        shivExportReveal
        .7s
        ease
        1.3s
        forwards;
}


@keyframes shivExportReveal {

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.shiv-global-export span {

    display: block;

    margin-bottom: 6px;

    color:
        #a6a7a7;

    font-size: 9px;

    letter-spacing: 2.5px;

}


.shiv-global-export h3 {

    margin: 0;

    color:
        #ffffff;

    font-size: 25px;

    font-weight: 400;

    line-height: 1;
}


.shiv-global-export h3 strong {

    color:
        #c7c9c9;

    font-weight: 700;

}


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

.shiv-cta-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    width: 190px;

    margin-top: 28px;

    padding:
        14px 15px
        14px 20px;

    color:
        #102331;

    background:
        #a6a7a7;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        shivTextReveal
        .7s
        ease
        1.5s
        forwards;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.shiv-cta-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

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

    transform:
        skewX(-20deg);

    animation:
        shivButtonShine
        5s
        ease-in-out
        infinite;
}


@keyframes shivButtonShine {

    0% {

        left: -100%;

    }

    35% {

        left: 140%;

    }

    100% {

        left: 140%;

    }

}


.shiv-cta-button span,
.shiv-cta-button i {

    position: relative;

    z-index: 2;

}


.shiv-cta-button i {

    font-style: normal;

    font-size: 18px;

    transition:
        transform .35s ease;
}


.shiv-cta-button:hover {

    background:
        #ffffff;

    color:
        #013c6c;

    transform:
        translateY(-4px);
}


.shiv-cta-button:hover i {

    transform:
        translate(
            5px,
            -5px
        );
}


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

@keyframes shivTextReveal {

    0% {

        opacity: 0;

        transform:
            translateY(20px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   RIGHT CATALOGUE BLOCK
========================================================= */

.shiv-catalogue-block {

    position: relative;

    min-height: 400px;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    align-items: center;

    gap: 20px;

    padding:
        40px 38px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #eef1f2 100%
        );

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

    box-shadow:
        0 22px 55px
        rgba(
            16,
            35,
            49,
            .10
        );

    overflow: hidden;

    opacity: 0;

    transform:
        translateX(70px);

    animation:
        shivCatalogueReveal
        1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        .3s
        forwards;
}


@keyframes shivCatalogueReveal {

    0% {

        opacity: 0;

        transform:
            translateX(70px);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   CATALOGUE DECORATIVE TOP LINE
========================================================= */

.shiv-catalogue-block::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #013c6c,
            #a6a7a7,
            #013c6c
        );

    background-size:
        200% 100%;

    animation:
        shivCatalogueLine
        5s
        linear
        infinite;
}


@keyframes shivCatalogueLine {

    from {

        background-position:
            0 0;

    }

    to {

        background-position:
            200% 0;

    }

}


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

.shiv-catalogue-content {

    position: relative;

    z-index: 4;
}


/* =========================================================
   CATALOGUE LABEL
========================================================= */

.shiv-catalogue-label {

    display: block;

    margin-bottom: 13px;

    color:
        #013c6c;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


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

.shiv-catalogue-content h2 {

    margin: 0;

    color:
        #102331;

    font-size:
        clamp(
            30px,
            3vw,
            44px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1px;
}


.shiv-catalogue-content h2 strong {

    display: block;

    color:
        #013c6c;

    font-weight: 700;
}


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

.shiv-catalogue-content p {

    max-width: 390px;

    margin:
        18px 0 0;

    color:
        #667078;

    font-size: 12px;

    line-height: 1.75;
}


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

.shiv-catalogue-buttons {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 24px;

    flex-wrap: wrap;
}


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

.shiv-cat-dark-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-width: 160px;

    padding:
        13px 14px
        13px 18px;

    background:
        #102331;

    color:
        #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .8px;

    overflow: hidden;

    transition:
        transform .4s ease,
        background .4s ease;
}


.shiv-cat-dark-btn::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .15
            ),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        shivCatalogueButtonShine
        5s
        ease-in-out
        infinite;
}


@keyframes shivCatalogueButtonShine {

    0% {

        left: -120%;

    }

    40% {

        left: 140%;

    }

    100% {

        left: 140%;

    }

}


.shiv-cat-dark-btn span,
.shiv-cat-dark-btn i {

    position: relative;

    z-index: 2;
}


.shiv-cat-dark-btn i {

    font-style: normal;

    font-size: 16px;

    transition:
        transform .35s ease;
}


.shiv-cat-dark-btn:hover {

    background:
        #013c6c;

    transform:
        translateY(-4px);
}


.shiv-cat-dark-btn:hover i {

    transform:
        translate(
            4px,
            -4px
        );
}


/* =========================================================
   DOWNLOAD
========================================================= */

.shiv-cat-dark-download {

    color:
        #102331;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    border-bottom:
        1px solid
        #a6a7a7;

    padding-bottom: 4px;

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


.shiv-cat-dark-download:hover {

    color:
        #013c6c;

    border-color:
        #013c6c;
}


/* =========================================================
   CATALOGUE PREVIEW
========================================================= */

.shiv-catalogue-preview {

    position: relative;

    width: 100%;

    height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;
}


/* =========================================================
   BACK CATALOGUE
========================================================= */

.shiv-cat-back {

    position: absolute;

    width: 190px;

    height: 255px;

    background:
        linear-gradient(
            145deg,
            #a6a7a7,
            #7e8588
        );

    transform:
        translate(
            28px,
            12px
        )
        rotate(
            7deg
        );

    box-shadow:
        0 18px 35px
        rgba(
            16,
            35,
            49,
            .20
        );

    animation:
        shivCatalogueBackMove
        5s
        ease-in-out
        infinite alternate;
}


@keyframes shivCatalogueBackMove {

    0% {

        transform:
            translate(
                28px,
                12px
            )
            rotate(7deg);

    }

    100% {

        transform:
            translate(
                38px,
                5px
            )
            rotate(10deg);

    }

}


/* =========================================================
   FRONT CATALOGUE
========================================================= */

.shiv-cat-front {

    position: relative;

    z-index: 3;

    display: block;

    width: 205px;

    height: 275px;

    overflow: hidden;

    background:
        #102331;

    box-shadow:
        0 25px 45px
        rgba(
            16,
            35,
            49,
            .28
        );

    text-decoration: none;

    transform:
        rotate(-3deg);

    animation:
        shivCatalogueFloat
        4.5s
        ease-in-out
        infinite;

    transition:
        transform .6s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        box-shadow .5s ease;
}


@keyframes shivCatalogueFloat {

    0% {

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

    }

    50% {

        transform:
            translateY(-9px)
            rotate(-1deg);

    }

    100% {

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

    }

}


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

.shiv-cat-front img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.shiv-cat-front:hover img {

    transform:
        scale(1.07);
}


/* =========================================================
   CATALOGUE OVERLAY
========================================================= */

.shiv-cat-front-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 20px;

    background:
        linear-gradient(
            to top,
            rgba(
                8,
                22,
                32,
                .92
            ) 0%,
            rgba(
                8,
                22,
                32,
                .35
            ) 48%,
            transparent 75%
        );

    color:
        #ffffff;
}


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

.shiv-cat-front-overlay span {

    margin-bottom: 6px;

    color:
        #a6a7a7;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;
}


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

.shiv-cat-front-overlay strong {

    font-size: 20px;

    line-height: 1;

    letter-spacing: -.5px;
}


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

.shiv-cat-front-overlay small {

    margin-top: 13px;

    color:
        #ffffff;

    font-size: 7px;

    letter-spacing: 1.5px;

    opacity: .65;
}


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

.shiv-cat-front:hover {

    animation-play-state: paused;

    transform:
        translateY(-10px)
        rotate(0deg)
        scale(1.03);

    box-shadow:
        0 35px 65px
        rgba(
            16,
            35,
            49,
            .32
        );
}


/* =========================================================
   CATALOGUE SHINE
========================================================= */

.shiv-cat-front::before {

    content: "";

    position: absolute;

    z-index: 8;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .20
            ),
            transparent
        );

    transform:
        skewX(-18deg);

    pointer-events: none;

    animation:
        shivCatalogueShine
        6s
        ease-in-out
        infinite;
}


@keyframes shivCatalogueShine {

    0% {

        left: -120%;

    }

    45% {

        left: 140%;

    }

    100% {

        left: 140%;

    }

}


/* =========================================================
   PDF BADGE
========================================================= */

.shiv-cat-pdf {

    position: absolute;

    z-index: 8;

    right: 5px;

    bottom: 28px;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #013c6c;

    color:
        #ffffff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 10px 25px
        rgba(
            1,
            60,
            108,
            .30
        );

    animation:
        shivPdfFloat
        3s
        ease-in-out
        infinite;
}


@keyframes shivPdfFloat {

    0% {

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

    }

    50% {

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

    }

    100% {

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

    }

}


/* =========================================================
   SMALL DECORATIVE CIRCLES
========================================================= */

.shiv-catalogue-block::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -100px;

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

    border-radius: 50%;

    animation:
        shivCircleRotate
        15s
        linear
        infinite;
}


@keyframes shivCircleRotate {

    from {

        transform:
            rotate(0deg)
            scale(1);

    }

    50% {

        transform:
            rotate(180deg)
            scale(1.1);

    }

    to {

        transform:
            rotate(360deg)
            scale(1);

    }

}


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

@media (max-width: 1050px) {

    .shiv-company-catalogue-wrap {

        grid-template-columns:
            1fr 1fr;

        gap: 25px;
    }


    .shiv-company-block {

        padding:
            40px 32px;
    }


    .shiv-catalogue-block {

        padding:
            35px 25px;

        grid-template-columns:
            1fr;

        gap: 5px;
    }


    .shiv-catalogue-preview {

        height: 300px;
    }

}


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

@media (max-width: 750px) {

    .shiv-company-catalogue {

        padding:
            55px 0;
    }


    .shiv-company-catalogue-wrap {

        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .shiv-company-block {

        min-height:
            auto;

        padding:
            38px 28px;
    }


    .shiv-company-block h2 {

        font-size:
            clamp(
                31px,
                8vw,
                42px
            );
    }


    .shiv-global-export {

        margin-top: 22px;
    }


    .shiv-catalogue-block {

        min-height:
            auto;

        padding:
            35px 25px;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }


    .shiv-catalogue-content h2 {

        font-size: 31px;
    }


    .shiv-catalogue-content p {

        font-size: 11px;

        line-height: 1.6;
    }


    .shiv-catalogue-buttons {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 12px;
    }


    .shiv-cat-dark-btn {

        min-width:
            145px;
    }


    .shiv-catalogue-preview {

        height: 300px;
    }


    .shiv-cat-front {

        width: 165px;

        height: 225px;
    }


    .shiv-cat-back {

        width: 155px;

        height: 210px;
    }


    .shiv-cat-pdf {

        right: 0;

        bottom: 25px;
    }

}


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

@media (max-width: 500px) {

    .shiv-company-catalogue {

        padding:
            45px 0;
    }


    .shiv-company-catalogue-wrap {

        width: 92%;
    }


    .shiv-company-block {

        padding:
            35px 25px;
    }


    .shiv-company-block h2 {

        font-size: 32px;

        line-height: 1.02;
    }


    .shiv-company-products {

        font-size: 12px;
    }


    .shiv-global-export h3 {

        font-size: 22px;
    }


    .shiv-cta-button {

        width: 175px;

        margin-top: 24px;
    }


    .shiv-catalogue-block {

        display: flex;

        flex-direction: column;

        padding:
            35px 22px 25px;
    }


    .shiv-catalogue-content {

        width: 100%;
    }


    .shiv-catalogue-content h2 {

        font-size: 32px;
    }


    .shiv-catalogue-content p {

        max-width: 100%;
    }


    .shiv-catalogue-buttons {

        flex-direction:
            row;

        align-items:
            center;

        flex-wrap: wrap;
    }


    .shiv-catalogue-preview {

        width: 100%;

        height: 300px;

        margin-top: 5px;
    }


    .shiv-cat-front {

        width: 180px;

        height: 240px;
    }


    .shiv-cat-back {

        width: 168px;

        height: 225px;
    }


    .shiv-cat-pdf {

        right: 18px;

        bottom: 25px;
    }


    .shiv-company-catalogue-bg {

        font-size:
            120px;

        letter-spacing:
            -7px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-company-catalogue *,
    .shiv-company-catalogue::before,
    .shiv-company-catalogue::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}

/* =========================================================
   SHIV ENTERPRISE
   PREMIUM ABOUT US PAGE
========================================================= */

:root {

    --shiv-blue: #013c6c;
    --shiv-blue-dark: #061522;
    --shiv-blue-deep: #08283f;

    --shiv-silver: #a6a7a7;

    --shiv-light: #f5f6f4;
    --shiv-light-2: #eef0ef;

    --shiv-text: #202b32;
    --shiv-muted: #687075;

    --shiv-white: #ffffff;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color:
        var(--shiv-text);

    background:
        var(--shiv-light);

    font-family:
        "Inter",
        Arial,
        sans-serif;
}


h1,
h2,
h3 {

    font-family:
        "DM Serif Display",
        Georgia,
        serif;

}


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

.shiv-about-hero {

    position: relative;

    min-height:
        690px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #071522;
}


.shiv-about-hero-bg {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,18,30,.92) 0%,
            rgba(3,25,40,.78) 42%,
            rgba(3,25,40,.35) 100%
        ),
        url("assets/images/about-us.jpg")
        center / cover no-repeat;

    transform:
        scale(1.04);

    animation:
        aboutHeroZoom
        15s
        ease-in-out
        infinite alternate;
}


@keyframes aboutHeroZoom {

    from {
        transform:
            scale(1.04);
    }

    to {
        transform:
            scale(1.10);
    }

}


.shiv-about-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(1,60,108,.20),
            transparent 55%
        );

}


.shiv-about-hero-content {

    position: relative;

    z-index: 3;

    width:
        min(1250px,88%);

    margin:
        0 auto;

    padding:
        100px 0 80px;

}


.shiv-about-hero-label {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

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

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.shiv-about-hero-label span {

    width:
        42px;

    height:
        1px;

    background:
        #ffffff;
}


.shiv-about-hero h1 {

    max-width:
        800px;

    margin:
        25px 0 25px;

    color:
        #ffffff;

    font-size:
        clamp(55px,7vw,100px);

    line-height:
        .95;

    font-weight:
        400;

    letter-spacing:
        -2px;
}


.shiv-about-hero h1 strong {

    display:
        block;

    color:
        #a9c5d8;

    font-weight:
        400;
}


.shiv-about-hero-content > p {

    max-width:
        650px;

    margin:
        0;

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

    font-size:
        16px;

    line-height:
        1.85;
}


.shiv-about-hero-content > p b {

    color:
        #ffffff;
}


.shiv-about-hero-bottom {

    display:
        flex;

    gap:
        50px;

    margin-top:
        55px;

    padding-top:
        18px;

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

    max-width:
        650px;

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

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.shiv-about-hero-number {

    position:
        absolute;

    right:
        6%;

    bottom:
        50px;

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

    font-size:
        180px;

    line-height:
        1;

    font-weight:
        700;
}


.shiv-about-hero-line {

    position:
        absolute;

    left:
        6%;

    bottom:
        0;

    width:
        160px;

    height:
        3px;

    background:
        #ffffff;

    z-index:
        4;

    animation:
        heroLineMove
        4s
        ease-in-out
        infinite alternate;
}


@keyframes heroLineMove {

    from {
        width:
            80px;
    }

    to {
        width:
            230px;
    }

}


/* =========================================================
   COMMON SECTION LABEL
========================================================= */

.shiv-section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        var(--shiv-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.shiv-section-label span {

    width:
        35px;

    height:
        2px;

    background:
        var(--shiv-blue);
}


.dark-label {

    color:
        #ffffff;
}


.dark-label span {

    background:
        #a6a7a7;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.shiv-about-intro {

    position:
        relative;

    padding:
        120px 0;

    overflow:
        hidden;

    background:
        #f5f6f4;
}


.shiv-about-intro-wrapper {

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap:
        90px;

    align-items:
        center;
}


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

.shiv-about-image-area {

    position:
        relative;

    min-height:
        560px;
}


.shiv-about-image-frame {

    position:
        absolute;

    left:
        25px;

    top:
        25px;

    width:
        calc(100% - 25px);

    height:
        520px;

    overflow:
        hidden;

    background:
        #dce0df;
}


.shiv-about-image-frame::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(1,20,32,.45)
        );
}


.shiv-about-image-frame img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform
        1s
        cubic-bezier(.16,1,.3,1);
}


.shiv-about-image-area:hover
.shiv-about-image-frame img {

    transform:
        scale(1.07);
}


.shiv-about-image-area::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        85%;

    height:
        85%;

    border:
        1px solid
        rgba(1,60,108,.35);

    z-index:
        0;
}


.shiv-about-image-tag {

    position:
        absolute;

    left:
        -15px;

    bottom:
        40px;

    z-index:
        5;

    padding:
        18px 25px;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--shiv-blue);

    color:
        #ffffff;

    box-shadow:
        0 15px 40px
        rgba(1,60,108,.25);
}


.shiv-about-image-tag span {

    font-size:
        9px;

    letter-spacing:
        3px;

    opacity:
        .65;
}


.shiv-about-image-tag strong {

    font-size:
        17px;

    letter-spacing:
        2px;
}


.shiv-about-image-number {

    position:
        absolute;

    right:
        0;

    top:
        0;

    z-index:
        5;

    color:
        var(--shiv-blue);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


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

.shiv-about-intro-content {

    position:
        relative;
}


.shiv-about-intro-content h2 {

    max-width:
        650px;

    margin:
        0 0 30px;

    color:
        var(--shiv-text);

    font-size:
        clamp(43px,4.5vw,68px);

    line-height:
        1.02;

    font-weight:
        400;

    letter-spacing:
        -1.5px;
}


.shiv-about-intro-content h2 strong {

    display:
        block;

    color:
        var(--shiv-blue);

    font-weight:
        400;
}


.shiv-about-intro-content p {

    max-width:
        650px;

    margin:
        0 0 17px;

    color:
        var(--shiv-muted);

    font-size:
        14px;

    line-height:
        1.9;
}


.shiv-about-intro-content
.shiv-about-lead {

    color:
        #3e474c;

    font-size:
        17px;

    line-height:
        1.75;
}


.shiv-about-intro-content strong,
.shiv-about-intro-content b {

    color:
        var(--shiv-blue);

}


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

.shiv-premium-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        28px;

    margin-top:
        18px;

    padding:
        15px 20px;

    color:
        #ffffff;

    background:
        var(--shiv-blue);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    overflow:
        hidden;

    transition:
        transform .4s ease,
        background .4s ease;
}


.shiv-premium-button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -110%;

    width:
        70%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;
}


.shiv-premium-button:hover::before {

    left:
        140%;
}


.shiv-premium-button:hover {

    transform:
        translateY(-4px);

    background:
        #062d4c;
}


.shiv-premium-button i {

    transition:
        transform .4s ease;
}


.shiv-premium-button:hover i {

    transform:
        translateX(5px);
}


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

.shiv-about-stats {

    background:
        var(--shiv-blue-dark);

    color:
        #ffffff;
}


.shiv-about-stats-wrapper {

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

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


.shiv-about-stat {

    position:
        relative;

    min-height:
        180px;

    padding:
        40px 30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

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


.shiv-about-stat:last-child {

    border-right:
        none;
}


.stat-number {

    color:
        #ffffff;

    font-family:
        "DM Serif Display",
        Georgia,
        serif;

    font-size:
        55px;

    line-height:
        1;
}


.stat-label {

    margin-top:
        10px;

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

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.6;

    letter-spacing:
        1.5px;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.shiv-about-capabilities {

    position:
        relative;

    padding:
        120px 0;

    background:
        #ffffff;

    overflow:
        hidden;
}


.shiv-capabilities-wrapper {

    width:
        min(1300px,90%);

    margin:
        0 auto;
}


.shiv-capabilities-header {

    display:
        grid;

    grid-template-columns:
        1fr .65fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        55px;
}


.shiv-capabilities-header h2 {

    margin:
        0;

    color:
        var(--shiv-text);

    font-size:
        clamp(45px,5vw,70px);

    line-height:
        1;

    font-weight:
        400;
}


.shiv-capabilities-header h2 strong {

    display:
        block;

    color:
        var(--shiv-blue);

    font-weight:
        400;
}


.shiv-capabilities-header > p {

    margin:
        0;

    color:
        var(--shiv-muted);

    font-size:
        14px;

    line-height:
        1.9;
}


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

.shiv-capabilities-grid {

    display:
        grid;

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

    border-top:
        1px solid
        #dfe2e1;

    border-left:
        1px solid
        #dfe2e1;
}


.shiv-capability {

    position:
        relative;

    min-height:
        330px;

    padding:
        35px 28px;

    border-right:
        1px solid
        #dfe2e1;

    border-bottom:
        1px solid
        #dfe2e1;

    overflow:
        hidden;

    transition:
        background .5s ease,
        transform .5s ease;
}


.shiv-capability::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        0;

    background:
        var(--shiv-blue);

    transition:
        height .55s
        cubic-bezier(.16,1,.3,1);

    z-index:
        0;
}


.shiv-capability:hover::before {

    height:
        100%;
}


.capability-number {

    position:
        absolute;

    right:
        20px;

    top:
        15px;

    color:
        rgba(1,60,108,.08);

    font-size:
        65px;

    font-weight:
        700;

    transition:
        color .5s ease;
}


.shiv-capability:hover
.capability-number {

    color:
        rgba(255,255,255,.10);
}


.capability-icon {

    position:
        relative;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        45px;

    color:
        var(--shiv-blue);

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

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


.shiv-capability:hover
.capability-icon {

    color:
        #ffffff;

    border-color:
        rgba(255,255,255,.35);
}


.shiv-capability h3 {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 12px;

    color:
        var(--shiv-text);

    font-size:
        27px;

    font-weight:
        400;

    transition:
        color .4s ease;
}


.shiv-capability:hover h3 {

    color:
        #ffffff;
}


.shiv-capability p {

    position:
        relative;

    z-index:
        2;

    margin:
        0;

    color:
        var(--shiv-muted);

    font-size:
        12px;

    line-height:
        1.7;

    transition:
        color .4s ease;
}


.shiv-capability:hover p {

    color:
        rgba(255,255,255,.68);
}


.capability-arrow {

    position:
        absolute;

    right:
        25px;

    bottom:
        22px;

    z-index:
        3;

    color:
        var(--shiv-blue);

    font-size:
        20px;

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


.shiv-capability:hover
.capability-arrow {

    color:
        #ffffff;

    transform:
        translate(5px,-5px);
}


/* =========================================================
   PRODUCT RANGE
========================================================= */

.shiv-about-range {

    position:
        relative;

    padding:
        120px 0;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #071522 0%,
            #0a2940 50%,
            #061722 100%
        );
}


.shiv-about-range-bg {

    position:
        absolute;

    right:
        -40px;

    bottom:
        -55px;

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

    font-size:
        220px;

    line-height:
        .8;

    font-weight:
        700;

    pointer-events:
        none;
}


.shiv-range-wrapper {

    position:
        relative;

    z-index:
        2;

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        100px;
}


.shiv-about-range
.shiv-section-label {

    color:
        #ffffff;
}


.shiv-about-range
.shiv-section-label span {

    background:
        #a6a7a7;
}


.shiv-range-left h2 {

    margin:
        0 0 25px;

    color:
        #ffffff;

    font-size:
        clamp(45px,5vw,70px);

    line-height:
        1;

    font-weight:
        400;
}


.shiv-range-left h2 strong {

    display:
        block;

    color:
        #a9c5d8;

    font-weight:
        400;
}


.shiv-range-left p {

    max-width:
        450px;

    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.9;
}


/* =========================================================
   RANGE LIST
========================================================= */

.shiv-range-list {

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


.shiv-range-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        55px 1fr 40px;

    align-items:
        center;

    min-height:
        78px;

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

    overflow:
        hidden;
}


.shiv-range-item::before {

    content:
        "";

    position:
        absolute;

    left:
        -100%;

    top:
        0;

    width:
        100%;

    height:
        100%;

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

    transition:
        left .6s ease;
}


.shiv-range-item:hover::before {

    left:
        0;
}


.shiv-range-item span {

    position:
        relative;

    z-index:
        2;

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

    font-size:
        10px;

    letter-spacing:
        1px;
}


.shiv-range-item strong {

    position:
        relative;

    z-index:
        2;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        500;
}


.shiv-range-item i {

    position:
        relative;

    z-index:
        2;

    color:
        #a6a7a7;

    font-size:
        18px;

    font-style:
        normal;

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


.shiv-range-item:hover i {

    color:
        #ffffff;

    transform:
        translate(5px,-5px);
}


/* =========================================================
   WHY SECTION
========================================================= */

.shiv-about-why {

    padding:
        110px 0;

    background:
        #f4f5f3;
}


.shiv-about-why-wrapper {

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap:
        100px;
}


.shiv-why-heading h2 {

    margin:
        0;

    color:
        var(--shiv-text);

    font-size:
        clamp(45px,5vw,70px);

    line-height:
        1;

    font-weight:
        400;
}


.shiv-why-heading h2 strong {

    display:
        block;

    color:
        var(--shiv-blue);

    font-weight:
        400;
}


.shiv-why-content > p {

    max-width:
        650px;

    margin:
        0 0 35px;

    color:
        var(--shiv-muted);

    font-size:
        15px;

    line-height:
        1.8;
}


.shiv-why-list {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    border-top:
        1px solid
        #d8dcda;
}


.shiv-why-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    min-height:
        65px;

    border-bottom:
        1px solid
        #d8dcda;
}


.shiv-why-list span {

    color:
        #9da2a4;

    font-size:
        9px;

    font-weight:
        700;
}


.shiv-why-list strong {

    color:
        #263137;

    font-size:
        12px;

    font-weight:
        600;
}


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

.shiv-about-cta {

    position:
        relative;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #061522;
}


.shiv-about-cta-bg {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(2,20,32,.95),
            rgba(1,40,65,.78)
        ),

        url("assets/images/about-us.jpg")
        center / cover no-repeat;

    opacity:
        .8;
}


.shiv-about-cta-content {

    position:
        relative;

    z-index:
        3;

    width:
        min(1300px,90%);

    margin:
        0 auto;
}


.cta-label {

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


.cta-label span {

    background:
        #a6a7a7;
}


.shiv-about-cta h2 {

    max-width:
        750px;

    margin:
        0 0 20px;

    color:
        #ffffff;

    font-size:
        clamp(50px,6vw,85px);

    line-height:
        .95;

    font-weight:
        400;
}


.shiv-about-cta h2 strong {

    color:
        #a9c5d8;

    font-weight:
        400;
}


.shiv-about-cta p {

    max-width:
        600px;

    margin:
        0 0 30px;

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

    font-size:
        14px;

    line-height:
        1.8;
}


.shiv-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    padding:
        15px 21px;

    color:
        #061522;

    background:
        #ffffff;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.shiv-cta-button:hover {

    transform:
        translateY(-4px);

    color:
        #ffffff;

    background:
        var(--shiv-blue);
}


.shiv-cta-button i {

    transition:
        transform .4s ease;
}


.shiv-cta-button:hover i {

    transform:
        translateX(5px);
}


.shiv-cta-watermark {

    position:
        absolute;

    right:
        -40px;

    bottom:
        -80px;

    z-index:
        2;

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

    font-size:
        300px;

    font-weight:
        700;

    line-height:
        .8;

    pointer-events:
        none;
}


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

@media (max-width:1000px) {

    .shiv-about-intro-wrapper {

        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .shiv-about-image-area {

        max-width:
            700px;

        width:
            100%;

        margin:
            0 auto;
    }


    .shiv-about-stats-wrapper {

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


    .shiv-about-stat:nth-child(2) {

        border-right:
            none;
    }


    .shiv-capabilities-header {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .shiv-capabilities-grid {

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


    .shiv-range-wrapper {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .shiv-about-why-wrapper {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }

}


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

@media (max-width:650px) {

    .shiv-about-hero {

        min-height:
            620px;
    }


    .shiv-about-hero-content {

        width:
            88%;

        padding:
            80px 0 60px;
    }


    .shiv-about-hero h1 {

        font-size:
            53px;

        letter-spacing:
            -1px;
    }


    .shiv-about-hero-content > p {

        font-size:
            14px;
    }


    .shiv-about-hero-number {

        font-size:
            100px;

        right:
            3%;

        bottom:
            25px;
    }


    .shiv-about-hero-bottom {

        gap:
            20px;

        flex-wrap:
            wrap;

        margin-top:
            35px;
    }


    .shiv-about-intro {

        padding:
            75px 0;
    }


    .shiv-about-intro-wrapper {

        width:
            90%;
    }


    .shiv-about-image-area {

        min-height:
            430px;
    }


    .shiv-about-image-frame {

        height:
            400px;

        left:
            15px;

        width:
            calc(100% - 15px);
    }


    .shiv-about-intro-content h2 {

        font-size:
            43px;
    }


    .shiv-about-intro-content
    .shiv-about-lead {

        font-size:
            16px;
    }


    .shiv-about-stats-wrapper {

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


    .shiv-about-stat {

        min-height:
            145px;

        padding:
            25px 18px;
    }


    .stat-number {

        font-size:
            42px;
    }


    .stat-label {

        font-size:
            8px;
    }


    .shiv-about-capabilities {

        padding:
            75px 0;
    }


    .shiv-capabilities-grid {

        grid-template-columns:
            1fr;
    }


    .shiv-capability {

        min-height:
            280px;
    }


    .shiv-about-range {

        padding:
            75px 0;
    }


    .shiv-range-wrapper {

        width:
            90%;
    }


    .shiv-range-left h2 {

        font-size:
            45px;
    }


    .shiv-about-why {

        padding:
            75px 0;
    }


    .shiv-why-list {

        grid-template-columns:
            1fr;
    }


    .shiv-about-cta {

        min-height:
            550px;
    }


    .shiv-about-cta h2 {

        font-size:
            50px;
    }


    .shiv-cta-watermark {

        font-size:
            150px;

        right:
            -20px;

        bottom:
            -20px;
    }

}


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

@media (max-width:420px) {

    .shiv-about-hero h1 {

        font-size:
            45px;
    }


    .shiv-about-image-area {

        min-height:
            370px;
    }


    .shiv-about-image-frame {

        height:
            350px;
    }


    .shiv-about-intro-content h2 {

        font-size:
            37px;
    }


    .shiv-about-stat {

        min-height:
            130px;

        padding:
            20px 12px;
    }


    .stat-number {

        font-size:
            36px;
    }


    .shiv-about-cta h2 {

        font-size:
            43px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-about-hero-bg,
    .shiv-about-hero-line,
    .shiv-about-image-frame img,
    .shiv-premium-button,
    .shiv-capability,
    .shiv-range-item,
    .shiv-cta-button {

        animation:
            none !important;

        transition:
            none !important;
    }

}

/* =========================================================
   SHIV ENTERPRISE
   PREMIUM ABOUT US PAGE
   FONT: APTOS SERIF
========================================================= */


.shiv-about-new-hero,
.shiv-about-new-hero *,
.shiv-about-company,
.shiv-about-company *,
.shiv-casting-forging,
.shiv-casting-forging *,
.shiv-metal-expertise,
.shiv-metal-expertise *,
.shiv-about-products,
.shiv-about-products *,
.shiv-about-approach,
.shiv-about-approach *,
.shiv-global-section,
.shiv-global-section * {

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    box-sizing:
        border-box;
}


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

:root {

    --shiv-blue: #013c6c;

    --shiv-blue-dark: #071722;

    --shiv-blue-mid: #0b2940;

    --shiv-silver: #a6a7a7;

    --shiv-light: #f4f5f4;

    --shiv-light-two: #ecefed;

    --shiv-text: #202b32;

    --shiv-muted: #697276;

    --shiv-white: #ffffff;

}


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

.shiv-about-new-hero {

    position:
        relative;

    min-height:
        720px;

    overflow:
        hidden;

    background:
        var(--shiv-blue-dark);

    isolation:
        isolate;
}


.shiv-hero-bg {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(4,17,28,.94) 0%,
            rgba(4,25,40,.78) 42%,
            rgba(4,25,40,.32) 100%
        ),

        url("assets/images/about-us.jpg")
        center / cover no-repeat;

    transform:
        scale(1.04);

    animation:
        shivHeroZoom
        16s
        ease-in-out
        infinite alternate;
}


@keyframes shivHeroZoom {

    from {
        transform:
            scale(1.04);
    }

    to {
        transform:
            scale(1.10);
    }

}


.shiv-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 75% 40%,
            rgba(1,60,108,.38),
            transparent 35%
        );

    z-index:
        1;
}


/* =========================================================
   HERO ARCHITECTURAL LINES
========================================================= */

.shiv-hero-line {

    position:
        absolute;

    z-index:
        2;

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

    pointer-events:
        none;
}


.shiv-hero-line.line-one {

    top:
        0;

    right:
        18%;

    width:
        1px;

    height:
        100%;

    animation:
        shivVerticalLine
        8s
        ease-in-out
        infinite;
}


.shiv-hero-line.line-two {

    right:
        0;

    bottom:
        130px;

    width:
        42%;

    height:
        1px;

    animation:
        shivHorizontalLine
        7s
        ease-in-out
        infinite;
}


@keyframes shivVerticalLine {

    0%,100% {
        opacity:
            .08;

        transform:
            translateY(0);
    }

    50% {
        opacity:
            .30;

        transform:
            translateY(35px);
    }

}


@keyframes shivHorizontalLine {

    0%,100% {
        transform:
            translateX(0);

        opacity:
            .08;
    }

    50% {
        transform:
            translateX(-60px);

        opacity:
            .25;
    }

}


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

.shiv-about-hero-wrap {

    position:
        relative;

    z-index:
        3;

    width:
        min(1400px,90%);

    min-height:
        720px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;
}


.shiv-hero-index {

    position:
        absolute;

    left:
        0;

    top:
        150px;

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

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.shiv-hero-index::after {

    content:
        "";

    display:
        block;

    width:
        45px;

    height:
        1px;

    margin-top:
        14px;

    background:
        var(--shiv-silver);

    animation:
        shivIndexLine
        3s
        ease-in-out
        infinite;
}


@keyframes shivIndexLine {

    0%,100% {
        width:
            25px;
    }

    50% {
        width:
            65px;
    }

}


.shiv-hero-content {

    max-width:
        820px;

    padding:
        100px 0;
}


.shiv-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        25px;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.shiv-eyebrow span {

    width:
        38px;

    height:
        1px;

    background:
        #ffffff;
}


.shiv-eyebrow.dark {

    color:
        var(--shiv-blue);
}


.shiv-eyebrow.dark span {

    background:
        var(--shiv-blue);
}


.shiv-eyebrow.light {

    color:
        rgba(255,255,255,.68);
}


.shiv-eyebrow.light span {

    background:
        var(--shiv-silver);
}


.shiv-hero-content h1 {

    margin:
        0 0 28px;

    color:
        #ffffff;

    font-size:
        clamp(58px,7vw,105px);

    line-height:
        .91;

    font-weight:
        400;

    letter-spacing:
        -3px;
}


.shiv-hero-content h1 strong {

    display:
        block;

    color:
        #a9c6d9;

    font-weight:
        400;
}


.shiv-hero-content > p {

    max-width:
        700px;

    margin:
        0;

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

    font-size:
        15px;

    line-height:
        1.9;
}


.shiv-hero-content > p b {

    color:
        #ffffff;
}


.shiv-hero-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        35px;

    margin-top:
        45px;

    padding-top:
        18px;

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

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

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.shiv-hero-mark {

    position:
        absolute;

    right:
        -40px;

    bottom:
        -50px;

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

    font-size:
        clamp(190px,24vw,390px);

    line-height:
        .8;

    font-weight:
        700;

    letter-spacing:
        -20px;

    user-select:
        none;

    pointer-events:
        none;

    animation:
        shivMarkFloat
        10s
        ease-in-out
        infinite alternate;
}


@keyframes shivMarkFloat {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-25px);
    }

}


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

.shiv-about-company {

    position:
        relative;

    padding:
        125px 0;

    background:
        #f5f6f4;

    overflow:
        hidden;
}


.shiv-company-wrap {

    width:
        min(1350px,90%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        55px .95fr 1.05fr;

    gap:
        55px;

    align-items:
        center;
}


.shiv-company-index {

    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding-top:
        10px;

    color:
        var(--shiv-blue);
}


.shiv-company-index span {

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.shiv-company-index div {

    width:
        1px;

    flex:
        1;

    margin:
        18px 0;

    background:
        rgba(1,60,108,.22);
}


.shiv-company-index small {

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);
}


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

.shiv-company-image {

    position:
        relative;

    min-height:
        570px;
}


.shiv-image-border {

    position:
        absolute;

    top:
        -18px;

    left:
        -18px;

    width:
        90%;

    height:
        88%;

    border:
        1px solid
        rgba(1,60,108,.35);

    z-index:
        0;
}


.shiv-company-image img {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    height:
        530px;

    object-fit:
        cover;

    filter:
        saturate(.85);

    transition:
        transform .8s
        cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}


.shiv-company-image:hover img {

    transform:
        translate(8px,-8px)
        scale(1.025);

    filter:
        saturate(1);
}


.shiv-image-caption {

    position:
        absolute;

    z-index:
        5;

    left:
        -25px;

    bottom:
        25px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        17px 24px;

    color:
        #ffffff;

    background:
        var(--shiv-blue);

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


.shiv-image-caption span {

    font-size:
        8px;

    letter-spacing:
        3px;

    opacity:
        .60;
}


.shiv-image-caption strong {

    margin-top:
        3px;

    font-size:
        16px;

    letter-spacing:
        2px;
}


.shiv-image-corner {

    position:
        absolute;

    z-index:
        6;

    right:
        18px;

    top:
        18px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff;

    background:
        rgba(1,60,108,.85);

    font-size:
        20px;
}


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

.shiv-company-content {

    padding-left:
        15px;
}


.shiv-company-content h2 {

    margin:
        0 0 30px;

    color:
        var(--shiv-text);

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

    line-height:
        .96;

    font-weight:
        400;

    letter-spacing:
        -1.5px;
}


.shiv-company-content h2 strong {

    display:
        block;

    color:
        var(--shiv-blue);

    font-weight:
        400;
}


.shiv-company-content p {

    max-width:
        620px;

    margin:
        0 0 16px;

    color:
        var(--shiv-muted);

    font-size:
        13px;

    line-height:
        1.9;
}


.shiv-company-content .large-text {

    color:
        #3e474c;

    font-size:
        17px;

    line-height:
        1.75;
}


.shiv-company-content strong,
.shiv-company-content b {

    color:
        var(--shiv-blue);
}


.shiv-line-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        28px;

    margin-top:
        18px;

    padding:
        14px 19px;

    color:
        #ffffff;

    background:
        var(--shiv-blue);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    transition:
        transform .4s ease,
        background .4s ease;
}


.shiv-line-button:hover {

    transform:
        translateY(-4px);

    background:
        #061e33;
}


.shiv-line-button i {

    font-style:
        normal;

    font-size:
        17px;

    transition:
        transform .4s ease;
}


.shiv-line-button:hover i {

    transform:
        translate(5px,-5px);
}


/* =========================================================
   CASTING + FORGING
========================================================= */

.shiv-casting-forging {

    position:
        relative;

    padding:
        125px 0;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 80% 25%,
            rgba(1,60,108,.35),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #061522,
            #0a2a42 52%,
            #061722
        );

    color:
        #ffffff;
}


.shiv-cf-bg-text {

    position:
        absolute;

    right:
        -30px;

    bottom:
        -60px;

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

    font-size:
        220px;

    line-height:
        .8;

    font-weight:
        700;

    pointer-events:
        none;
}


.shiv-cf-wrap {

    position:
        relative;

    z-index:
        2;

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        100px;

    align-items:
        center;
}


.shiv-cf-intro {

    position:
        relative;
}


.shiv-cf-intro h2 {

    margin:
        0 0 30px;

    color:
        #ffffff;

    font-size:
        clamp(55px,6vw,88px);

    line-height:
        .85;

    font-weight:
        400;

    letter-spacing:
        -2px;
}


.shiv-cf-intro h2 strong {

    color:
        #a9c6d9;

    font-weight:
        400;
}


.shiv-cf-intro > p {

    max-width:
        480px;

    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.9;
}


.shiv-cf-number {

    margin-top:
        55px;

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

    font-size:
        80px;

    font-weight:
        700;

    line-height:
        1;
}


/* =========================================================
   CASTING FORGING ITEMS
========================================================= */

.shiv-cf-details {

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


.shiv-cf-item {

    position:
        relative;

    padding:
        32px 0 35px;

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

    overflow:
        hidden;
}


.shiv-cf-item::before {

    content:
        "";

    position:
        absolute;

    left:
        -100%;

    bottom:
        0;

    width:
        100%;

    height:
        2px;

    background:
        #ffffff;

    transition:
        left .6s ease;
}


.shiv-cf-item:hover::before {

    left:
        0;
}


.shiv-cf-item-top {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-bottom:
        15px;
}


.shiv-cf-item-top span {

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

    font-size:
        10px;

    letter-spacing:
        2px;
}


.shiv-cf-item-top strong {

    color:
        #a9c6d9;

    font-size:
        10px;

    letter-spacing:
        3px;
}


.shiv-cf-item h3 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        34px;

    line-height:
        1;

    font-weight:
        400;
}


.shiv-cf-item h3 span {

    color:
        #a9c6d9;
}


.shiv-cf-item p {

    max-width:
        650px;

    margin:
        0;

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

    font-size:
        12px;

    line-height:
        1.8;
}


.shiv-cf-line {

    width:
        45px;

    height:
        1px;

    margin-top:
        22px;

    background:
        var(--shiv-silver);

    transition:
        width .5s ease;
}


.shiv-cf-item:hover
.shiv-cf-line {

    width:
        100px;
}


/* =========================================================
   METAL EXPERTISE
========================================================= */

.shiv-metal-expertise {

    padding:
        120px 0;

    background:
        #f3f5f4;
}


.shiv-metal-wrap {

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        100px;

    align-items:
        start;
}


.shiv-metal-heading h2 {

    margin:
        0 0 25px;

    color:
        var(--shiv-text);

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

    line-height:
        .95;

    font-weight:
        400;
}


.shiv-metal-heading h2 strong {

    display:
        block;

    color:
        var(--shiv-blue);

    font-weight:
        400;
}


.shiv-metal-heading p {

    max-width:
        450px;

    margin:
        0;

    color:
        var(--shiv-muted);

    font-size:
        13px;

    line-height:
        1.9;
}


.shiv-metal-list {

    border-top:
        1px solid
        #d4d9d7;
}


.shiv-metal-row {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        45px 1fr 1.1fr 35px;

    gap:
        15px;

    align-items:
        center;

    min-height:
        95px;

    border-bottom:
        1px solid
        #d4d9d7;

    overflow:
        hidden;
}


.shiv-metal-row::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        var(--shiv-blue);

    transform:
        translateX(-101%);

    transition:
        transform .6s
        cubic-bezier(.16,1,.3,1);

    z-index:
        0;
}


.shiv-metal-row:hover::before {

    transform:
        translateX(0);
}


.shiv-metal-row > * {

    position:
        relative;

    z-index:
        2;
}


.shiv-metal-row > span {

    color:
        #a2a7a8;

    font-size:
        9px;

    font-weight:
        700;
}


.shiv-metal-row strong {

    color:
        var(--shiv-text);

    font-size:
        17px;

    font-weight:
        600;

    transition:
        color .4s ease;
}


.shiv-metal-row p {

    margin:
        0;

    color:
        var(--shiv-muted);

    font-size:
        11px;

    line-height:
        1.5;

    transition:
        color .4s ease;
}


.shiv-metal-row i {

    color:
        var(--shiv-blue);

    font-size:
        17px;

    font-style:
        normal;

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


.shiv-metal-row:hover strong,
.shiv-metal-row:hover p,
.shiv-metal-row:hover i {

    color:
        #ffffff;
}


.shiv-metal-row:hover i {

    transform:
        translate(5px,-5px);
}


/* =========================================================
   PRODUCT RANGE DARK
========================================================= */

.shiv-about-products {

    position:
        relative;

    padding:
        120px 0;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #061522,
            #092b43 52%,
            #061723
        );

    color:
        #ffffff;
}


.shiv-products-watermark {

    position:
        absolute;

    right:
        -50px;

    bottom:
        -80px;

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

    font-size:
        230px;

    font-weight:
        700;

    line-height:
        .8;
}


.shiv-products-wrap {

    position:
        relative;

    z-index:
        2;

    width:
        min(1300px,90%);

    margin:
        0 auto;
}


.shiv-products-title h2 {

    max-width:
        750px;

    margin:
        0 0 55px;

    color:
        #ffffff;

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

    line-height:
        .95;

    font-weight:
        400;
}


.shiv-products-title h2 strong {

    color:
        #a9c6d9;

    font-weight:
        400;
}


.shiv-products-grid {

    display:
        grid;

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

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

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


.shiv-product-item {

    position:
        relative;

    min-height:
        190px;

    padding:
        28px;

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

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

    overflow:
        hidden;

    transition:
        background .5s ease;
}


.shiv-product-item::before {

    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    right:
        -50px;

    top:
        -50px;

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

    border-radius:
        50%;

    transition:
        transform .7s ease;
}


.shiv-product-item:hover {

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


.shiv-product-item:hover::before {

    transform:
        scale(2.5);
}


.shiv-product-item span {

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

    font-size:
        9px;

    letter-spacing:
        2px;
}


.shiv-product-item h3 {

    margin:
        45px 0 0;

    color:
        #ffffff;

    font-size:
        25px;

    line-height:
        1;

    font-weight:
        400;
}


/* =========================================================
   APPROACH
========================================================= */

.shiv-about-approach {

    padding:
        120px 0;

    background:
        #ffffff;
}


.shiv-approach-wrap {

    width:
        min(1300px,90%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        80px 1fr .8fr;

    gap:
        60px;

    align-items:
        center;
}


.shiv-approach-number {

    color:
        rgba(1,60,108,.16);

    font-size:
        80px;

    font-weight:
        700;

    line-height:
        1;
}


.shiv-approach-content h2 {

    margin:
        0 0 25px;

    color:
        var(--shiv-text);

    font-size:
        clamp(45px,5vw,70px);

    line-height:
        .95;

    font-weight:
        400;
}


.shiv-approach-content h2 strong {

    display:
        block;

    color:
        var(--shiv-blue);

    font-weight:
        400;
}


.shiv-approach-content p {

    max-width:
        600px;

    margin:
        0 0 15px;

    color:
        var(--shiv-muted);

    font-size:
        13px;

    line-height:
        1.9;
}


.shiv-approach-points {

    border-top:
        1px solid
        #d5d9d8;
}


.shiv-approach-points div {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    min-height:
        65px;

    border-bottom:
        1px solid
        #d5d9d8;
}


.shiv-approach-points span {

    color:
        #a2a7a8;

    font-size:
        9px;
}


.shiv-approach-points strong {

    color:
        var(--shiv-text);

    font-size:
        12px;

    font-weight:
        600;
}


/* =========================================================
   GLOBAL SECTION
========================================================= */

.shiv-global-section {

    position:
        relative;

    min-height:
        600px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #061522;
}


.shiv-global-bg {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(4,18,29,.95),
            rgba(4,35,55,.70)
        ),

        url("assets/images/about-us.jpg")
        center / cover no-repeat;

    opacity:
        .85;
}


.shiv-global-wrap {

    position:
        relative;

    z-index:
        3;

    width:
        min(1300px,90%);

    margin:
        0 auto;
}


.shiv-global-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        22px;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.shiv-global-label span {

    width:
        35px;

    height:
        1px;

    background:
        var(--shiv-silver);
}


.shiv-global-wrap h2 {

    margin:
        0 0 25px;

    color:
        #ffffff;

    font-size:
        clamp(55px,7vw,100px);

    line-height:
        .88;

    font-weight:
        400;

    letter-spacing:
        -2px;
}


.shiv-global-wrap h2 strong {

    display:
        block;

    color:
        #a9c6d9;

    font-weight:
        400;
}


.shiv-global-wrap > p {

    max-width:
        620px;

    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.9;
}


.shiv-global-bottom {

    display:
        flex;

    align-items:
        center;

    gap:
        45px;

    margin-top:
        40px;
}


.shiv-global-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    padding:
        15px 20px;

    color:
        #061522;

    background:
        #ffffff;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.shiv-global-button:hover {

    transform:
        translateY(-4px);

    color:
        #ffffff;

    background:
        var(--shiv-blue);
}


.shiv-global-button i {

    font-style:
        normal;

    font-size:
        17px;

    transition:
        transform .4s ease;
}


.shiv-global-button:hover i {

    transform:
        translate(5px,-5px);
}


.shiv-global-location {

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

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.7;

    letter-spacing:
        2px;
}


.shiv-global-watermark {

    position:
        absolute;

    right:
        -60px;

    bottom:
        -100px;

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

    font-size:
        320px;

    font-weight:
        700;

    line-height:
        .8;

    pointer-events:
        none;
}


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

@media (max-width:1050px) {

    .shiv-company-wrap {

        grid-template-columns:
            45px 1fr;

        gap:
            40px;
    }


    .shiv-company-content {

        grid-column:
            2;
    }


    .shiv-company-image {

        grid-column:
            2;
    }


    .shiv-cf-wrap,
    .shiv-metal-wrap {

        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .shiv-products-grid {

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


    .shiv-approach-wrap {

        grid-template-columns:
            60px 1fr;

        gap:
            35px;
    }


    .shiv-approach-points {

        grid-column:
            2;
    }

}


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

@media (max-width:700px) {

    .shiv-about-new-hero {

        min-height:
            650px;
    }


    .shiv-about-hero-wrap {

        min-height:
            650px;

        width:
            88%;
    }


    .shiv-hero-index {

        top:
            100px;
    }


    .shiv-hero-content {

        padding:
            80px 0;
    }


    .shiv-hero-content h1 {

        font-size:
            55px;

        letter-spacing:
            -1.5px;
    }


    .shiv-hero-content > p {

        font-size:
            13px;
    }


    .shiv-hero-meta {

        gap:
            14px 25px;
    }


    .shiv-hero-mark {

        font-size:
            150px;

        right:
            -15px;

        bottom:
            10px;
    }


    .shiv-about-company {

        padding:
            80px 0;
    }


    .shiv-company-wrap {

        width:
            90%;

        display:
            block;
    }


    .shiv-company-index {

        display:
            none;
    }


    .shiv-company-image {

        min-height:
            390px;

        margin-bottom:
            65px;
    }


    .shiv-company-image img {

        height:
            360px;
    }


    .shiv-image-border {

        top:
            -10px;

        left:
            -10px;
    }


    .shiv-image-caption {

        left:
            -10px;

        bottom:
            10px;
    }


    .shiv-company-content {

        padding:
            0;
    }


    .shiv-company-content h2 {

        font-size:
            45px;
    }


    .shiv-company-content .large-text {

        font-size:
            16px;
    }


    .shiv-casting-forging {

        padding:
            80px 0;
    }


    .shiv-cf-wrap {

        width:
            90%;
    }


    .shiv-cf-intro h2 {

        font-size:
            60px;
    }


    .shiv-cf-item h3 {

        font-size:
            29px;
    }


    .shiv-cf-bg-text {

        font-size:
            120px;
    }


    .shiv-metal-expertise {

        padding:
            80px 0;
    }


    .shiv-metal-wrap {

        width:
            90%;
    }


    .shiv-metal-heading h2 {

        font-size:
            45px;
    }


    .shiv-metal-row {

        grid-template-columns:
            35px 1fr 30px;

        gap:
            10px;

        min-height:
            90px;
    }


    .shiv-metal-row p {

        display:
            none;
    }


    .shiv-metal-row strong {

        font-size:
            15px;
    }


    .shiv-about-products {

        padding:
            80px 0;
    }


    .shiv-products-grid {

        grid-template-columns:
            1fr;
    }


    .shiv-product-item {

        min-height:
            150px;
    }


    .shiv-product-item h3 {

        margin-top:
            30px;
    }


    .shiv-about-approach {

        padding:
            80px 0;
    }


    .shiv-approach-wrap {

        width:
            90%;

        display:
            block;
    }


    .shiv-approach-number {

        margin-bottom:
            20px;

        font-size:
            55px;
    }


    .shiv-approach-points {

        margin-top:
            40px;
    }


    .shiv-global-section {

        min-height:
            570px;
    }


    .shiv-global-wrap {

        width:
            90%;
    }


    .shiv-global-wrap h2 {

        font-size:
            58px;
    }


    .shiv-global-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            25px;
    }


    .shiv-global-watermark {

        font-size:
            150px;

        right:
            -20px;

        bottom:
            0;
    }

}


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

@media (max-width:420px) {

    .shiv-hero-content h1 {

        font-size:
            46px;
    }


    .shiv-company-content h2 {

        font-size:
            39px;
    }


    .shiv-cf-intro h2 {

        font-size:
            53px;
    }


    .shiv-cf-item h3 {

        font-size:
            26px;
    }


    .shiv-metal-heading h2 {

        font-size:
            39px;
    }


    .shiv-products-title h2 {

        font-size:
            45px;
    }


    .shiv-approach-content h2 {

        font-size:
            42px;
    }


    .shiv-global-wrap h2 {

        font-size:
            48px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shiv-about-new-hero *,
    .shiv-about-new-hero::before,
    .shiv-about-company *,
    .shiv-casting-forging *,
    .shiv-metal-expertise *,
    .shiv-about-products *,
    .shiv-about-approach *,
    .shiv-global-section * {

        animation:
            none !important;

        transition:
            none !important;
    }

}




/* =========================================================
   FOOTER
========================================================= */
/* =========================================================
   PREMIUM INDUSTRIAL FOOTER
   ---------------------------------------------------------
   PRIMARY COLOR : #003B6A
   GREY          : #777778
   FONT          : Aptos Serif / Georgia
========================================================= */

:root {
    --wdm-footer-blue: #003B6A;
    --wdm-footer-blue-dark: #002A4B;
    --wdm-footer-blue-light: #0A4D80;

    --wdm-footer-grey: #777778;
    --wdm-footer-grey-light: #B9BBBD;

    --wdm-footer-white: #ffffff;

    --wdm-footer-border: rgba(255, 255, 255, 0.13);

    --wdm-footer-font: "Aptos Serif", Georgia, serif;
}


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

.wdm-premium-footer {
    position: relative;
    width: 100%;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #002A4B 0%,
            #003B6A 45%,
            #002A4B 100%
        );

    color: var(--wdm-footer-white);

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    isolation: isolate;
}


/* =========================================================
   TOP ACCENT LINE
========================================================= */

.wdm-footer-top-line {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #777778,
            #ffffff,
            #777778,
            transparent
        );

    opacity: 0.9;
}


/* =========================================================
   BACKGROUND DECORATIVE CIRCLES
========================================================= */

.wdm-footer-bg-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    filter: blur(1px);
}


.wdm-footer-circle-one {
    width: 420px;
    height: 420px;

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

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

    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.025),
        0 0 0 90px rgba(255, 255, 255, 0.018);
}


.wdm-footer-circle-two {
    width: 330px;
    height: 330px;

    bottom: -200px;
    left: -130px;

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

    box-shadow:
        0 0 0 40px rgba(255, 255, 255, 0.025),
        0 0 0 80px rgba(255, 255, 255, 0.018);
}


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

.wdm-footer-container {
    width: min(1200px, 92%);
    margin: 0 auto;

    padding-top: 75px;
}


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

.wdm-footer-main {
    display: grid;

    grid-template-columns:
        1.45fr
        0.8fr
        0.95fr
        1.15fr;

    gap: 55px;

    padding-bottom: 55px;
}


/* =========================================================
   BRAND COLUMN
========================================================= */

.wdm-footer-brand {
    max-width: 350px;
}


.wdm-footer-logo {
    display: inline-flex;

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

    text-decoration: none;

    margin-bottom: 22px;

    transition: transform 0.35s ease;
}


.wdm-footer-logo:hover {
    transform: translateY(-3px);
}


.wdm-footer-logo img {
    display: block;

    width: auto;
    max-width: 190px;
    max-height: 90px;

    object-fit: contain;

    filter: brightness(0) invert(1);

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


.wdm-footer-logo:hover img {
    transform: scale(1.03);

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 5px 15px rgba(255,255,255,0.18));
}


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

.wdm-footer-description {
    margin: 0;

    color: rgba(255, 255, 255, 0.74);

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.9;

    letter-spacing: 0.15px;
}


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

.wdm-footer-social {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;
}


.wdm-footer-social a {
    position: relative;

    display: flex;

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

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    overflow: hidden;

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


.wdm-footer-social a::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    left: 0;
    bottom: -100%;

    background: #ffffff;

    border-radius: 50%;

    transition: bottom 0.35s ease;

    z-index: -1;
}


.wdm-footer-social a:hover {
    color: var(--wdm-footer-blue);

    border-color: #ffffff;

    transform:
        translateY(-5px)
        rotate(4deg);
}


.wdm-footer-social a:hover::before {
    bottom: 0;
}


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

.wdm-footer-column {
    min-width: 0;
}


.wdm-footer-title {
    margin: 0;

    color: #ffffff;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 0.3px;
}


.wdm-footer-title-line {
    position: relative;

    width: 48px;
    height: 2px;

    margin-top: 13px;
    margin-bottom: 22px;

    background: #777778;

    overflow: hidden;
}


.wdm-footer-title-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: #ffffff;

    animation:
        wdmFooterLineMove 3s ease-in-out infinite;
}


@keyframes wdmFooterLineMove {

    0% {
        left: -100%;
    }

    45% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}


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

.wdm-footer-links {
    list-style: none;

    margin: 0;
    padding: 0;
}


.wdm-footer-links li {
    margin-bottom: 12px;

    padding-left: 0;
}


.wdm-footer-links a {
    position: relative;

    display: inline-block;

    color: rgba(255, 255, 255, 0.70);

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.5;

    text-decoration: none;

    padding-left: 0;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


.wdm-footer-links a::before {
    content: "›";

    position: absolute;

    left: -16px;

    color: #777778;

    opacity: 0;

    transition:
        opacity 0.3s ease,
        left 0.3s ease;
}


.wdm-footer-links a:hover {
    color: #ffffff;

    padding-left: 14px;
}


.wdm-footer-links a:hover::before {
    left: 0;

    opacity: 1;
}


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

.wdm-footer-contact-column {
    padding-left: 5px;
}


.wdm-footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 20px;
}


.wdm-footer-contact-icon {
    flex: 0 0 34px;

    display: flex;

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

    width: 34px;
    height: 34px;

    margin-top: 2px;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 12px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.wdm-footer-contact-item:hover
.wdm-footer-contact-icon {
    background: #ffffff;

    color: var(--wdm-footer-blue);

    transform: translateY(-3px);
}


.wdm-footer-contact-label {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}


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

    color: rgba(255, 255, 255, 0.70);

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 13px;

    line-height: 1.65;

    word-break: break-word;
}


/* =========================================================
   MAKE IN INDIA SECTION
========================================================= */

.wdm-footer-india-section {
    width: 100%;

    margin-bottom: 35px;
}


.wdm-footer-india-line {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );
}


.wdm-footer-india-content {
    display: flex;

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

    gap: 35px;

    min-height: 125px;

    padding: 25px 35px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.025)
        );

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

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

    backdrop-filter: blur(8px);
}


/* India text */

.wdm-footer-india-text {
    position: relative;

    padding-left: 22px;
}


.wdm-footer-india-text::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3px;

    width: 3px;
    height: calc(100% - 6px);

    background: #777778;

    border-radius: 10px;
}


.wdm-footer-india-small {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,0.55);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;
}


.wdm-footer-india-text strong {
    display: block;

    color: #ffffff;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 600;
}


.wdm-footer-india-text p {
    margin: 6px 0 0;

    color: rgba(255,255,255,0.65);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   MAKE IN INDIA LOGO
========================================================= */

.wdm-make-india-logo {
    position: relative;

    display: flex;

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

    min-width: 220px;
    min-height: 82px;

    padding: 10px 25px;

    background: #ffffff;

    border-radius: 8px;

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

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.wdm-make-india-logo::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.75),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.7s ease;
}


.wdm-make-india-logo:hover {
    transform:
        translateY(-5px)
        scale(1.02);

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


.wdm-make-india-logo:hover::before {
    left: 140%;
}


.wdm-make-india-logo img {
    display: block;

    width: auto;
    max-width: 185px;
    max-height: 70px;

    object-fit: contain;

    position: relative;
    z-index: 2;
}


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

.wdm-footer-cta {
    position: relative;

    display: flex;

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

    gap: 30px;

    padding: 28px 35px;

    margin-bottom: 45px;

    background:
        linear-gradient(
            110deg,
            #003B6A,
            #0A4D80
        );

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

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

    overflow: hidden;
}


.wdm-footer-cta::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 180px;
    height: 180px;

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

    border-radius: 50%;

    transform: translate(50%, -50%);
}


.wdm-footer-cta-content {
    position: relative;
    z-index: 2;
}


.wdm-footer-cta-small {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,0.55);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;
}


.wdm-footer-cta h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 600;
}


.wdm-footer-cta-button {
    position: relative;
    z-index: 2;

    display: inline-flex;

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

    gap: 12px;

    min-width: 155px;

    padding: 13px 23px;

    background: #ffffff;

    color: var(--wdm-footer-blue);

    border: 1px solid #ffffff;

    text-decoration: none;

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.3px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.wdm-footer-cta-button i {
    transition: transform 0.3s ease;
}


.wdm-footer-cta-button:hover {
    background: transparent;

    color: #ffffff;

    transform: translateY(-3px);

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


.wdm-footer-cta-button:hover i {
    transform: translateX(5px);
}


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

.wdm-footer-bottom {
    position: relative;

    width: 100%;

    background: #002A4B;

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


.wdm-footer-bottom-inner {
    width: min(1200px, 92%);
    min-height: 65px;

    margin: 0 auto;

    display: flex;

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

    gap: 20px;
}


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

    color: rgba(255,255,255,0.52);

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 12px;
}


.wdm-footer-bottom-links {
    display: flex;

    align-items: center;

    gap: 12px;
}


.wdm-footer-bottom-links a {
    color: rgba(255,255,255,0.52);

    font-family:
        "Aptos Serif",
        Georgia,
        serif;

    font-size: 12px;

    text-decoration: none;

    transition: color 0.3s ease;
}


.wdm-footer-bottom-links span {
    color: rgba(255,255,255,0.20);

    font-size: 11px;
}


.wdm-footer-bottom-links a:hover {
    color: #ffffff;
}


/* =========================================================
   GLOBAL FOOTER FONT
========================================================= */

.wdm-premium-footer,
.wdm-premium-footer *,
.wdm-premium-footer h1,
.wdm-premium-footer h2,
.wdm-premium-footer h3,
.wdm-premium-footer h4,
.wdm-premium-footer h5,
.wdm-premium-footer h6,
.wdm-premium-footer p,
.wdm-premium-footer a,
.wdm-premium-footer span,
.wdm-premium-footer strong,
.wdm-premium-footer li {
    font-family:
        "Aptos Serif",
        Georgia,
        serif;
}


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

@media (max-width: 1050px) {

    .wdm-footer-main {
        grid-template-columns:
            1.3fr
            0.8fr
            0.9fr;

        gap: 40px;
    }

    .wdm-footer-contact-column {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            auto auto auto;

        gap: 25px;
    }

    .wdm-footer-contact-column
    .wdm-footer-title,
    .wdm-footer-contact-column
    .wdm-footer-title-line {
        grid-column: 1 / -1;
    }

    .wdm-footer-contact-item {
        margin-bottom: 0;
    }

}


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

@media (max-width: 800px) {

    .wdm-footer-container {
        padding-top: 60px;
    }


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

        gap: 45px 35px;
    }


    .wdm-footer-brand {
        max-width: 100%;

        grid-column: 1 / -1;
    }


    .wdm-footer-contact-column {
        grid-column: 1 / -1;

        display: block;
    }


    .wdm-footer-contact-item {
        margin-bottom: 18px;
    }


    .wdm-footer-india-content {
        padding: 25px;

        gap: 25px;
    }


    .wdm-footer-cta {
        padding: 25px;
    }

}


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

@media (max-width: 650px) {

    .wdm-footer-container {
        width: 90%;

        padding-top: 50px;
    }


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

        gap: 35px;

        padding-bottom: 40px;
    }


    .wdm-footer-brand {
        grid-column: auto;
    }


    .wdm-footer-logo img {
        max-width: 165px;

        max-height: 75px;
    }


    .wdm-footer-description {
        font-size: 13px;

        line-height: 1.8;
    }


    .wdm-footer-contact-column {
        grid-column: auto;
    }


    /* Make In India */

    .wdm-footer-india-content {
        flex-direction: column;

        align-items: flex-start;

        padding: 25px 20px;
    }


    .wdm-make-india-logo {
        width: 100%;

        min-width: 0;

        min-height: 80px;
    }


    .wdm-make-india-logo img {
        max-width: 180px;
    }


    /* CTA */

    .wdm-footer-cta {
        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 35px;

        padding: 25px 22px;
    }


    .wdm-footer-cta h3 {
        font-size: 20px;

        line-height: 1.4;
    }


    .wdm-footer-cta-button {
        width: 100%;
    }


    /* Bottom */

    .wdm-footer-bottom-inner {
        flex-direction: column;

        justify-content: center;

        min-height: auto;

        padding: 18px 0;

        text-align: center;
    }


    .wdm-footer-bottom-links {
        flex-wrap: wrap;

        justify-content: center;
    }

}


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

@media (max-width: 400px) {

    .wdm-footer-container {
        width: 88%;
    }


    .wdm-footer-title {
        font-size: 17px;
    }


    .wdm-footer-links a {
        font-size: 13px;
    }


    .wdm-footer-contact-item p {
        font-size: 12px;
    }


    .wdm-footer-india-text strong {
        font-size: 20px;
    }


    .wdm-footer-india-text p {
        font-size: 11px;
    }


    .wdm-footer-social a {
        width: 36px;
        height: 36px;
    }


    .wdm-footer-cta h3 {
        font-size: 18px;
    }


    .wdm-footer-bottom p,
    .wdm-footer-bottom-links a {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.wdm-premium-footer a:focus-visible {
    outline: 2px solid #ffffff;

    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wdm-premium-footer *,
    .wdm-premium-footer *::before,
    .wdm-premium-footer *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}