/*-----------------------------------------------------------------------------------

    Founders Armory — site styles

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. utils CSS
	-----------------

		1.01 Root
		1.02 Mixins

	-----------------
    02. COMPONENTS CSS
	-----------------

		2.01 hoverimg
		2.02 custom-text
		2.03 mobile-nav
		2.04 search-popup
		2.05 btn
		2.06 pagination
		2.07 theme-pagination
		2.08 scroll-top
		2.09 swiper-button
		2.10 cart-popup
		2.11 marquee
		2.12 accordion
		2.13 breadcrumb
		2.14 loader


	-----------------
    03. HEADER CSS
	-----------------

		3.01 Header 1
		3.02 Header 2

    ---------------------------------
	04. FOOTER CSS
	---------------------------------

		4.01 footer 1
		4.02 footer 2

	---------------------------------
	05. SECTIONS CSS
	---------------------------------

	    5.01 hero-section-one
	    5.02 options
	    5.03 heading
	    5.04 products
	    5.05 about-text
	    5.06 we-provide
	    5.07 service-style-one
	    5.08 categories-section
	    5.09 what-client
	    5.10 gun-display
	    5.11 blog-one
	    5.12 partner
	    5.13 right-weapon
	    5.14 hero-section-two
	    5.15 who-we-are
	    5.16 dury-guns
	    5.17 shopping-info
	    5.18 categorie
	    5.19 team-member
	    5.20 pricing-plan
	    5.21 blog-two
	    5.22 banner

	---------------------------------
	06. PAGES CSS
	---------------------------------

	    6.01 services
	    6.02 gallery
	    6.03 about
	    6.04 checkout
	    6.05 login
	    6.06 cart
	    6.07 service-detail
	    6.08 shop
	    6.09 product-detail
	    6.10 team-details
	    6.11 our-blog
	    6.12 blog-details
	    6.13 contact


--------------------------------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

.hoverimg figure {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}

.hoverimg figure img {
    transition: 0.5s ease-in-out;
}

.hoverimg figure::before {
    position: absolute;
    top: 0;
    left: -85%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    transform: skewX(-25deg);
}

.hoverimg:hover figure img {
    transform: scale(1.1);
}

.hoverimg:hover figure::before {
    animation: shine 0.75s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

body,
html {
    font-family: var(--font-odibee), "Odibee Sans";
}

/* Horizontal overflow is clipped at the root. The body uses `clip` rather than
   `hidden` because a body-level `overflow-x: hidden` turns the body into a clip
   container, which breaks the `position: sticky` navbar (see #stickyHeader). */
html {
    overflow-x: hidden;
}
body {
    overflow-x: clip;
}

p {
    font-size: 18px;
    line-height: 30px;
    color: #444444;
    font-family: var(--font-dm), "DM Sans";
    margin: 0;
}

@media (max-width: 1400px) {
    p {
        font-size: 16px;
    }
}

* {
    margin: 0;
    padding: 0;
}

hr {
    margin: 0;
}

.row hr {
    margin-top: -65px;
}

figure {
    margin-bottom: 0;
}

sub {
    bottom: 0.75px;
}

input,
textarea {
    width: 100%;
    height: 60px;
    border: 0;
    outline: none;
    padding-left: 30px;
    font-family: var(--font-dm), "DM Sans";
}

@media (max-width: 992px) {
    input,
    textarea {
        padding-left: 20px;
    }
}

input:focus,
textarea:focus {
    border-color: #c7ccd1 !important;
}

input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

textarea {
    padding: 20px;
}

h1 {
    font-size: 120px;
    line-height: 130px;
}

@media (max-width: 1400px) {
    h1 {
        font-size: 100px;
        line-height: 110px;
    }
}

@media (max-width: 1200px) {
    h1 {
        font-size: 80px;
        line-height: 90px;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 70px;
        line-height: 80px;
    }
}

@media (max-width: 500px) {
    h1 {
        font-size: 60px;
        line-height: 70px;
    }
}

h2 {
    font-size: 80px;
    line-height: 85px;
}

@media (max-width: 1400px) {
    h2 {
        font-size: 70px;
        line-height: 75px;
    }
}

@media (max-width: 556px) {
    h2 {
        font-size: 60px;
        line-height: 65px;
    }
}

@media (max-width: 500px) {
    h2 {
        font-size: 50px;
        line-height: 55px;
    }
}

@media (max-width: 410px) {
    h2 {
        font-size: 40px;
        line-height: 45px;
    }
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 22px;
}

@media (max-width: 556px) {
    h4 {
        font-size: 20px;
    }
}

@media (max-width: 450px) {
    h4 {
        font-size: 18px;
    }
}

a,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
    font-family: var(--font-dm), "DM Sans";
}

li {
    display: block;
    font-family: var(--font-dm), "DM Sans";
}

figure {
    overflow: hidden;
}

.gap {
    padding-top: 120px;
    padding-bottom: 120px;
}

@media (max-width: 1200px) {
    .gap {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (max-width: 992px) {
    .gap {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 556px) {
    .gap {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.no-top {
    padding-top: 0;
}

.no-bottom {
    padding-bottom: 0;
}

@keyframes ripple {
    70% {
        box-shadow: 0 0 0 50px rgba(233, 35, 47, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 35, 47, 0);
    }
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background-color: #000;
    padding: 50px 40px 15px;
    z-index: 5;
    transition: 0.45s ease-in-out;
    transform: translateX(-101%);
    overflow-y: auto;
    background-size: cover;
}

@media (max-width: 1200px) {
    .mobile-nav {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .mobile-nav {
        width: 70%;
    }
}

@media (max-width: 556px) {
    .mobile-nav {
        width: 100%;
    }
}

.mobile-nav ul li a svg {
    width: 11px;
}

.mobile-nav ul > li.menu-item-has-children:before {
    content: "";
    background-image: url(/images/down-arrow-clr.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 20px;
    right: 0;
    width: 10px;
    height: 10px;
    transform: rotate(-90deg);
}

.mobile-nav > ul > li.menu-item-has-children:before {
    color: #ffffff;
    position: absolute;
    top: 17px;
    right: 0;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 11px;
}

.mobile-nav > ul > li.menu-item-has-children > ul.sub-menu {
    padding-left: 25px;
    padding-top: 10px;
    padding-bottom: 5px;
    position: absolute;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translatey(15px);
    border-top: 1px solid #5b5b5b;
    margin-top: 8px;
}

.mobile-nav > ul > li.menu-item-has-children.active:before {
    transform: rotate(0deg);
    color: #ffffff;
}

.mobile-nav > ul > li.menu-item-has-children.active > ul.sub-menu li {
    padding: 5px 0;
    position: relative;
}

.mobile-nav > ul > li.menu-item-has-children.active > ul.sub-menu li:after {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 19px;
    transform: translateY(-50%);
    left: -18px;
    background-color: #c7ccd1;
}

.mobile-nav > ul > li {
    position: relative;
    border-bottom: 0px solid #d4d4d4;
    padding: 10px 0;
    display: block;
}

.mobile-nav > ul > li:not(:last-child) {
    border-bottom: 1px solid #5b5b5b;
}

.mobile-nav > ul li > a {
    font-size: 20px;
    line-height: 26px;
    text-transform: uppercase;
    color: #ffffff;
}

.mobile-nav > ul li.menu-item-has-children.active ul.sub-menu li:before {
    top: 12px;
    background-color: transparent;
    left: auto;
    content: "";
    position: absolute;
    transform: rotate(0deg);
}

.mobile-nav > ul li.menu-item-has-children.active > ul.sub-menu {
    position: relative;
    height: auto;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.mobile-nav > ul li.menu-item-has-children ul.sub-menu {
    padding-left: 25px;
    padding-top: 10px;
    padding-bottom: 5px;
    position: absolute;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    border-top: 1px solid #5b5b5b;
    margin-top: 8px;
}

/* Close (X) drawn as two crossed bars. The icon font is subsetted and does not
   include a times/xmark glyph, so the mark is built in CSS to stay dependency-free. */
.mobile-nav a#res-cross {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 34px;
    height: 34px;
    display: block;
    z-index: 6;
}

.mobile-nav a#res-cross:before,
.mobile-nav a#res-cross:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.mobile-nav a#res-cross:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-nav a#res-cross:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-nav a#res-cross:hover:before,
.mobile-nav a#res-cross:hover:after {
    background-color: #c7ccd1;
}

.res-log {
    margin-bottom: 30px;
}

.res-log img {
    width: auto;
}

.res-rights p {
    color: #d6d6d6;
    letter-spacing: 5px;
    margin-top: 30px;
}

.mobile-nav.open {
    transform: translateX(0) !important;
    z-index: 33333333;
    box-shadow: 3px 3px 39px -4px rgba(0, 0, 0, 0.75);
}

li.menu-item-has-children.active {
    background-color: transparent;
}

#mobile-menu {
    z-index: 1;
    display: none;
}

#mobile-menu i {
    color: #000;
    background-color: transparent;
    font-size: 24px;
    margin-right: 20px;
    font-size: 26px;
}

@media (max-width: 1200px) {
    #mobile-menu {
        display: block;
    }
}

header.two #mobile-menu i {
    color: #ffffff;
}

.theme-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    white-space: nowrap;
    z-index: 0;
    letter-spacing: 1px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 20px;
    line-height: 24px;
    padding: 18px 50px;
    overflow: hidden;
    color: #ffffff;
    background: #c7ccd1;
    text-transform: uppercase;
    border: 0;
}

@media (max-width: 1400px) {
    .theme-btn {
        font-size: 18px;
        padding: 16px 40px;
    }
}

@media (max-width: 450px) {
    .theme-btn {
        font-size: 17px;
        padding: 14px 30px;
    }
}

@media (max-width: 330px) {
    .theme-btn {
        font-size: 14px;
        padding: 12px 24px;
    }
}

.theme-btn:before {
    position: absolute;
    left: 0;
    top: 0%;
    height: 105%;
    width: 1050%;
    content: "";
    background-color: #ffffff;
    transform: scale(1, 0);
    transform-origin: bottom left;
    transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    z-index: -1;
}

.theme-btn:hover {
    color: #c7ccd1;
    box-shadow: 0 0px 2px rgb(0, 0, 0);
}

.theme-btn:hover:before {
    transform-origin: top right;
    transform: scale(1, 1);
}

.theme-btn i {
    margin-right: 10px;
}

.theme-btn.hvr-light:hover {
    color: #ffffff;
}

.theme-btn.hvr-light:before {
    background-color: #000;
}

.theme-btn.hvr-light i {
    padding-right: 10px;
}

.swiper-pagination .swiper-pagination-bullet {
    background-color: transparent;
    background-color: #ffffff;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    opacity: 1;
    margin-right: 10px !important;
    transition: 0.5s ease-in-out;
    margin-right: 20px !important;
    position: relative;
}

.swiper-pagination .swiper-pagination-bullet:before {
    position: absolute;
    color: #cbcbcb4a;
    content: "\f05b";
    /* crosshairs */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    /* IMPORTANT for solid icons */
    font-size: 40px;
    top: -24px;
    left: -15px;
    transition: 0.5s ease-in-out;
    transform: scale(0);
}

@media (max-width: 1400px) {
    .swiper-pagination .swiper-pagination-bullet:before {
        top: -25px;
    }
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 0;
    width: 10px;
    position: relative;
}

.swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    transform: scale(1.1);
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 40px;
}

@keyframes scrollToTop {
    0% {
        transform: translate3d(0, 80%, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

@keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px);
    }

    33.3% {
        transform: translateY(-6px);
    }

    49.95% {
        transform: translateY(4px);
    }

    66.6% {
        transform: translateY(-2px);
    }

    83.25% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0);
    }
}

.swiper-button-next {
    right: 5px;
    left: auto;
    width: auto;
}

.swiper-button-next:after {
    display: none;
}

.swiper-rtl .swiper-button-prev {
    right: 5px;
    left: auto;
}

.swiper-rtl .swiper-button-next {
    left: 5px;
    right: 5px;
    left: auto;
    width: auto;
}

.swiper-rtl .swiper-button-next:after {
    display: none;
}

.swiper-button-prev {
    left: 5px;
    right: auto;
    width: auto;
}

.swiper-button-prev:after {
    display: none;
}

.swiper-button {
    position: absolute;
    bottom: 7%;
    width: 75%;
    margin: auto;
    left: 13%;
}

@media (max-width: 1400px) {
    .swiper-button {
        bottom: 7%;
        width: 84%;
        left: 8%;
    }
}

.swiper-button i {
    width: 50px;
    height: 50px;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: 0.5s ease-in-out;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .swiper-button i {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

.swiper-button i:hover {
    background-color: #ffffff;
    color: #000;
}

@keyframes fadeInOne {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    40% {
        opacity: 0;
        transform: translateY(80px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.box form.message .nice-select:before {
    right: 7%;
}

.marquee-box-one {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.marquee-box-one .marquee-content-one {
    display: flex;
    gap: 40px;
    padding: 0 20px;
    animation: scroll-one 30s linear infinite;
}

.marquee-box-one .marquee-content-one a {
    color: #000;
}

.marquee-box-one .marquee-content-one a h2 {
    font-size: 110px;
    width: -moz-max-content;
    width: max-content;
    position: relative;
    padding-left: 86px;
    font-weight: 300;
    line-height: 90px;
    transition: 0.5s ease-in-out;
    text-transform: uppercase;
}

@media (max-width: 1400px) {
    .marquee-box-one .marquee-content-one a h2 {
        font-size: 68px;
        padding-left: 66px;
        line-height: 60px;
    }
}

@media (max-width: 992px) {
    .marquee-box-one .marquee-content-one a h2 {
        font-size: 50px;
        line-height: 40px;
    }
}

@media (max-width: 500px) {
    .marquee-box-one .marquee-content-one a h2 {
        font-size: 44px;
        line-height: 36px;
    }
}

.marquee-box-one .marquee-content-one a h2:before {
    content: "\f601";
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-weight: 900;
    position: absolute;
    left: -10px;
    top: -4px;
    color: #c7ccd1;
    font-size: 68px;
}

@media (max-width: 1400px) {
    .marquee-box-one .marquee-content-one a h2:before {
        top: -4px;
        font-size: 48px;
    }
}

@media (max-width: 1200px) {
    .marquee-box-one .marquee-content-one a h2:before {
        top: -8px;
    }
}

@media (max-width: 992px) {
    .marquee-box-one .marquee-content-one a h2:before {
        top: -4px;
        font-size: 50px;
        left: 20px;
    }
}

.marquee-box-one .marquee-content-one a:hover h2 {
    color: #c7ccd1;
}

@keyframes scroll-one {
    0% {
        transform: translateX(0);
    }

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

@keyframes scroll-two {
    0% {
        transform: translateX(-100%);
    }

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

.breadcrumb {
    position: relative;
    padding-top: 15px;
    justify-content: center;
    z-index: 11;
}

.breadcrumb li.breadcrumb-item {
    text-transform: capitalize;
    font-family: var(--font-odibee), "Odibee Sans" !important;
    letter-spacing: 2px;
    font-size: 20px;
    text-transform: uppercase;
}

@media (max-width: 500px) {
    .breadcrumb li.breadcrumb-item {
        font-size: 14px;
    }
}

.breadcrumb li.breadcrumb-item a {
    color: #c6c6c6;
    transition: 0.5s ease-in-out;
    font-size: 20px;
    font-family: var(--font-odibee), "Odibee Sans" !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.breadcrumb li.breadcrumb-item a:hover {
    color: #c7ccd1;
}

@media (max-width: 500px) {
    .breadcrumb li.breadcrumb-item a {
        font-size: 14px;
    }
}

.breadcrumb li.breadcrumb-item.active {
    color: #c6c6c6;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #c6c6c6;
}

.loader {
    height: 15px;
    aspect-ratio: 5;
    display: grid;
    --_g: no-repeat radial-gradient(farthest-side, #fff 94%, #fff);
}

.loader:before,
.loader:after {
    content: "";
    grid-area: 1/1;
    background:
        var(--_g) left,
        var(--_g) right;
    background-size: 20% 100%;
    animation: l32 1s infinite;
}

.loader:after {
    background:
        var(--_g) 33.3333333333%,
        var(--_g) 66.6666666667%;
    background-size: 20% 100%;
    animation-direction: reverse;
}

@keyframes l32 {
    80%,
    100% {
        transform: rotate(0.5turn);
    }
}

@media only screen and (max-width: 1920px) and (min-width: 1200px) {
    #stickyHeader.slideUp {
        top: 0;
        z-index: 111111111;
        position: fixed;
        border-radius: 0;
        left: 0;
        padding-top: 0;
        box-shadow: 0px 10px 14px 0px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    #stickyHeader.slideUp .bottom-bar {
        padding-left: 0;
    }
}

header {
    position: absolute;
    width: 100%;
    padding-top: 50px;
    z-index: 211;
}

header ul,
header li {
    font-family: var(--font-odibee), "Odibee Sans";
}

@media (max-width: 1400px) {
    header {
        padding-top: 30px;
    }

    header .logo img {
        width: 210px;
    }
}

@media (max-width: 500px) {
    header {
        padding-top: 10px;
    }
}

header ul.social-media li a i.fa-brands fa-linkedin-in {
    font-size: 20px;
}

@media (max-width: 1400px) {
    header ul.social-media li a i.fa-brands fa-linkedin-in {
        font-size: 16px;
    }
}

/* 02. navbar */
.navbar {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    padding: 0;
}

@media (max-width: 1200px) {
    .navbar {
        display: none;
    }
}

.navbar-logo {
    color: #ff3f34;
    text-decoration: none;
    font-size: 25px;
    padding: 0px 20px;
}

.navbar-links {
    list-style-type: none;
    display: flex;
}

.navbar-links li:not(:last-child) {
    padding-right: 45px;
}

@media (max-width: 1400px) {
    .navbar-links li:not(:last-child) {
        padding-right: 32px;
    }
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: #707070;
    transition: 0.4s all;
    padding-bottom: 10px;
    padding-top: 10px;
}

.navbar-links li:hover > a {
    border-bottom: 3px solid #c7ccd1;
}

.navbar-links li > a {
    border-bottom: 3px solid transparent;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    color: #1c1e22;
    font-weight: 500;
    letter-spacing: 1px;
}

@media (max-width: 1400px) {
    .navbar-links li > a {
        font-size: 18px;
    }
}

.navbar-links li.navbar-dropdown {
    position: relative;
}

.navbar-links li.navbar-dropdown:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translatey(0px);
    z-index: 1111;
}

.navbar-links li.navbar-dropdown:hover .sub-menu .sub-menu {
    position: absolute;
    left: 100%;
    border-left: 3px solid var(--theme-colour);
    opacity: 0;
    top: 20%;
    visibility: hidden;
}

.navbar-links li.navbar-dropdown .sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    transform: translatey(10px);
    left: 0;
    width: 230px;
    box-shadow: 0px 10px 10px 3px hsla(0, 0%, 0%, 0.16);
    z-index: 111;
    transition: 0.4s all;
}

.navbar-links li.navbar-dropdown .sub-menu li {
    position: relative;
}

.navbar-links li.navbar-dropdown .sub-menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

.navbar-links li.navbar-dropdown .sub-menu li a:hover {
    color: #c7ccd1;
}

.navbar-links li.navbar-dropdown .sub-menu li:before {
    content: "";
    z-index: 11;
    position: absolute;
    height: 1px;
    background-color: rgba(88, 88, 88, 0.1607843137);
    width: 75%;
    bottom: 0;
    left: 25px;
}

.navbar-links li.navbar-dropdown .sub-menu a {
    padding-left: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 400;
    border: 0;
    position: relative;
    text-transform: uppercase;
    font-size: 20px;
    color: #000;
    background-color: #ffffff;
}

@media (max-width: 1400px) {
    .navbar-links li.navbar-dropdown .sub-menu a {
        font-size: 14px;
        padding-left: 22px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

li.sub-menu-item-children:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: 1;
    right: 31px;
    background-color: #000;
    -webkit-clip-path: polygon(68% 50%, 0 0, 0 100%);
    clip-path: polygon(68% 50%, 0 0, 0 100%);
    top: 44%;
}

li.menu-item-children > a:before {
    content: "";
    background-image: url(/images/down-arrow.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 31px;
    width: 8px;
    height: 8px;
}

@media (max-width: 1400px) {
    li.menu-item-children > a:before {
        right: 20px;
    }
}

nav.navbar ul.sub-menu li {
    padding: 0;
}

.two-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 12px;
}

.logo {
    z-index: 1;
}

.header-search i {
    color: #000;
    font-size: 22px;
    margin-left: 0;
    transition: 0.5s ease-in-out;
    position: relative;
    line-height: 12px;
}

.header-search i svg {
    width: 20px;
    height: 20px;
    transition: 0.5s ease-in-out;
}

.header-search a.user {
    position: relative;
}

.header-search a.user i svg {
    width: 30px;
    height: 30px;
}

.header-search a.user::after {
    right: -28px;
}

.header-search a.user i {
    font-size: 28px;
}

.bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #ffffff;
    position: relative;
}

@media (max-width: 1400px) {
    .bottom-bar {
        padding-left: 20px;
    }
}

@media (max-width: 1200px) {
    .bottom-bar {
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .bottom-bar {
        padding: 10px 0;
        padding-left: 10px;
    }
}

.bottom-bar::before {
    position: absolute;
    content: "";
    background-color: #ffffff;
    width: 40px;
    height: 100%;
    left: -40px;
}

@media (max-width: 1400px) {
    .bottom-bar::before {
        display: none;
    }
}

.header-search {
    display: flex;
    align-items: center;
}

@media (max-width: 1200px) {
    .header-search {
        display: none;
    }
}

.header-search a.user,
.header-search-button > a {
    width: 80px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease-in-out;
    border-left: 1px solid #bbbbbb;
}

.header-search a.user:hover,
.header-search-button > a:hover {
    background-color: #c7ccd1;
}

.header-search a.user:hover svg,
.header-search-button > a:hover svg {
    fill: #ffffff;
}

li.navbar-dropdown.active a {
    border-color: #c7ccd1;
}

header.two {
    position: relative;
    width: 100%;
    padding-top: 0px;
    z-index: 211;
    background-color: #ffffff;
}

header.two #mobile-menu i {
    color: #000;
}

@media (max-width: 1400px) {
    header.two .bottom-bar {
        padding-left: 0 !important;
    }
}

header.two .bottom-bar::before {
    display: none;
}

footer {
    position: relative;
    background-size: cover;
}

footer::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0.9;
    left: 0;
    height: 100%;
    background-color: #000;
}

footer input {
    width: 100%;
    border: 0;
    height: 80px;
    padding-left: 30px;
}

@media (max-width: 1400px) {
    footer input {
        height: 75px;
    }
}

@media (max-width: 992px) {
    footer input {
        height: 71px;
    }
}

@media (max-width: 500px) {
    footer input {
        height: 64px;
        padding-left: 20px;
    }
}

footer .theme-btn.hvr-light {
    border-radius: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 0;
}

@media (max-width: 500px) {
    footer .theme-btn.hvr-light {
        right: 5px;
        bottom: 6px;
    }
}

footer .subscribe {
    position: relative;
}

footer .subscribe h3 {
    font-size: 50px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 1400px) {
    footer .subscribe h3 {
        font-size: 42px;
    }
}

@media (max-width: 1200px) {
    footer .subscribe h3 {
        font-size: 36px;
    }
}

@media (max-width: 992px) {
    footer .subscribe h3 {
        padding-bottom: 20px;
    }
}

@media (max-width: 556px) {
    footer .subscribe h3 {
        letter-spacing: 1px;
        font-size: 30px;
    }
}

footer .subscribe span {
    font-size: 20px;
    color: #c7ccd1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 1200px) {
    footer .subscribe span {
        font-size: 18px;
        letter-spacing: 1px;
    }
}

footer .information {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 1400px) {
    footer .information {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 768px) {
    footer .information {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

footer .footer-contact {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
}

@media (max-width: 1200px) {
    footer .footer-contact {
        margin-top: 36px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    footer .footer-contact {
        flex-wrap: wrap;
        gap: 20px;
    }
}

footer .footer-contact li {
    display: flex;
    padding-bottom: 24px;
}

footer .footer-contact li span {
    width: 100px;
    color: #c7ccd1;
    font-size: 22px;
    font-family: var(--font-odibee), "Odibee Sans";
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 1400px) {
    footer .footer-contact li span {
        width: 89px;
        font-size: 20px;
    }
}

footer .footer-contact li p,
footer .footer-contact li a {
    color: #fff;
    font-size: 22px;
    font-family: var(--font-odibee), "Odibee Sans";
    letter-spacing: 1px;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    footer .footer-contact li p,
    footer .footer-contact li a {
        font-size: 18px;
        line-height: 24px;
    }
}

@media (max-width: 1200px) {
    footer .footer-contact li p,
    footer .footer-contact li a {
        font-size: 20px;
        line-height: 26px;
    }
}

footer .footer-contact li p {
    width: 63%;
}

@media (max-width: 1200px) {
    footer .footer-contact li p {
        width: 74%;
    }
}

footer .footer-contact li a:hover {
    color: #c7ccd1;
}

footer .footer-contact > div {
    width: 55%;
}

@media (max-width: 768px) {
    footer .footer-contact > div {
        width: 100%;
    }
}

.map {
    width: 40%;
    position: relative;
}

@media (max-width: 1400px) {
    .map {
        width: 46%;
    }
}

@media (max-width: 768px) {
    .map {
        width: 100%;
    }
}

.map::before,
.map::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #c7ccd1;
    border-radius: 50%;
    opacity: 1;
    z-index: 11;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.map::after {
    width: 30px;
    height: 30px;
    opacity: 0.5;
}

.map iframe {
    width: 100%;
    height: 200px;
    filter: brightness(0.5);
    mix-blend-mode: luminosity;
}

@media (max-width: 992px) {
    .map iframe {
        height: 200px;
    }
}

footer .information-link {
    position: relative;
    padding-top: 12px;
}

@media (max-width: 1200px) {
    footer .information-link {
        padding-top: 40px;
    }
}

footer .information-link h3 {
    font-size: 26px;
    color: #fff;
    padding-bottom: 60px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 1200px) {
    footer .information-link h3 {
        padding-bottom: 40px;
    }
}

footer .information-link h3::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    background-color: #c7ccd1;
    top: 35px;
}

footer .information-link ul {
    font-family: var(--font-dm), "DM Sans";
}

footer .information-link ul li {
    font-family: var(--font-dm), "DM Sans";
    padding-left: 24px;
    position: relative;
}

footer .information-link ul li:not(:last-child) {
    padding-bottom: 22px;
}

@media (max-width: 1400px) {
    footer .information-link ul li {
        padding-left: 18px;
    }
}

@media (max-width: 768px) {
    footer .information-link ul li {
        padding-bottom: 14px;
    }
}

footer .information-link ul li::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #626262;
    left: 0;
    top: 7px;
}

@media (max-width: 1400px) {
    footer .information-link ul li::before {
        width: 7px;
        height: 7px;
    }
}

footer .information-link ul li a {
    color: #dbdbdb;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    footer .information-link ul li a {
        font-size: 14px;
    }
}

@media (max-width: 1200px) {
    footer .information-link ul li a {
        font-size: 16px;
    }
}

@media (max-width: 410px) {
    footer .information-link ul li a {
        font-size: 14px;
    }
}

footer .information-link ul li a:hover {
    color: #c7ccd1;
}

.all-right {
    position: relative;
    border-top: 1px solid;
    padding-top: 25px;
    padding-bottom: 25px;
}

.all-right .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 556px) {
    .all-right .copyright {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        text-align: center;
    }
}

.all-right .copyright p {
    color: #fff;
    font-family: var(--font-odibee), "Odibee Sans";
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.all-right .copyright ul {
    display: flex;
    gap: 30px;
}

.all-right .copyright ul a {
    color: #fff;
    font-family: var(--font-odibee), "Odibee Sans";
    font-size: 20px;
    text-transform: uppercase;
    transition: 0.5s ease-in-out;
}

.all-right .copyright ul a:hover {
    color: #c7ccd1;
}

footer.two {
    position: relative;
    background-size: cover;
    padding-top: 90px;
}

@media (max-width: 1200px) {
    footer.two .information-link {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    footer.two .information-link {
        padding-bottom: 30px;
    }
}

@media (max-width: 768px) {
    footer.two .information-link ul li {
        padding-bottom: 14px;
    }
}

footer.two .logo {
    position: relative;
    z-index: 1;
}

@media (max-width: 992px) {
    footer.two .logo {
        margin-bottom: 20px;
    }
}

.hero-section-one {
    position: relative;
    padding-top: 330px;
    padding-bottom: 190px;
}

@media (max-width: 1400px) {
    .hero-section-one {
        padding-top: 280px;
        padding-bottom: 160px;
    }
}

@media (max-width: 1200px) {
    .hero-section-one {
        padding-top: 220px;
        padding-bottom: 130px;
    }
}

@media (max-width: 992px) {
    .hero-section-one {
        background-position: center;
    }
}

@media (max-width: 768px) {
    .hero-section-one {
        padding-top: 170px;
    }
}

@media (max-width: 450px) {
    .hero-section-one {
        padding-top: 140px;
    }
}

.hero-section-one::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0.7;
    left: 0;
    height: 100%;
    background-color: #000;
}

.hero-section-one.swiper-slide.swiper-slide-active .hero-text h1 {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.8s;
    transform: translateY(0);
}

.hero-section-one.swiper-slide.swiper-slide-active .hero-text i {
    opacity: 1;
    visibility: visible;
    transition-delay: 1s;
    transform: translateY(0);
}

.hero-section-one.swiper-slide.swiper-slide-active .hero-text span {
    opacity: 1;
    visibility: visible;
    transition-delay: 1.5s;
    transform: translateX(0px);
}

.hero-section-one.swiper-slide.swiper-slide-active .hero-text span del {
    font-size: 35px;
    padding-right: 20px;
}

.hero-section-one.swiper-slide.swiper-slide-active .hero-text > div {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    transform: translateX(0px);
    transition-delay: 1.8s;
}

.hero-section-one.swiper-slide.swiper-slide-active .hero-img img.target {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    transform: scale(1);
    transition-delay: 0.8s;
}

.options {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid #bcbcbc;
    position: relative;
    transition: 0.5s ease-in-out;
}

.options:hover {
    border: 0px;
}

.options:hover:before {
    height: 100%;
}

.options:hover h3,
.options:hover i {
    color: #ffffff;
}

.options:hover svg {
    fill: #fff;
    transform: scale(1.1);
}

.options:before {
    content: "";
    -webkit-clip-path: polygon(
        0% 15%,
        0 0,
        15% 0%,
        85% 0%,
        100% 0,
        100% 15%,
        100% 100%,
        85% 100%,
        85% 95%,
        15% 95%,
        15% 100%,
        0 100%
    );
    clip-path: polygon(
        0% 15%,
        0 0,
        15% 0%,
        85% 0%,
        100% 0,
        100% 15%,
        100% 100%,
        85% 100%,
        85% 95%,
        15% 95%,
        15% 100%,
        0 100%
    );
    background-color: #c7ccd1;
    width: 100%;
    height: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 0.5s ease-in-out;
}

.options i {
    transition: 0.5s ease-in-out;
    font-size: 78px;
    line-height: 70px;
    display: block;
    color: #000;
    position: relative;
    z-index: 11;
}

.options i svg {
    width: 72px;
    height: 72px;
    transition: 0.5s ease-in-out;
    margin-bottom: 15px;
}

.options h3 {
    transition: 0.5s ease-in-out;
    position: relative;
    z-index: 11;
    letter-spacing: 1px;
}

.heading {
    text-align: center;
    width: 64%;
    margin: auto;
    padding-bottom: 50px;
    z-index: 1;
    position: relative;
}

.heading img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 33%;
    left: 50%;
}

@media (max-width: 992px) {
    .heading img {
        width: 208px;
    }
}

@media (max-width: 556px) {
    .heading img {
        width: 156px;
    }
}

@media (max-width: 1400px) {
    .heading {
        padding-bottom: 40px;
        width: 65%;
    }
}

@media (max-width: 992px) {
    .heading {
        width: 100%;
        padding-bottom: 30px;
    }
}

.heading > span {
    display: block;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

@media (max-width: 1400px) {
    .heading > span {
        letter-spacing: 1px;
        font-size: 14px;
    }
}

.heading h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.heading h3 {
    font-size: 60px;
    line-height: 50px;
}

@media (max-width: 1400px) {
    .heading h3 {
        font-size: 54px;
        line-height: 44px;
    }
}

.heading h4 {
    font-weight: bold;
    font-size: 55px;
    line-height: 52px;
}

@media (max-width: 1400px) {
    .heading h4 {
        font-size: 32px;
        line-height: 44px;
    }
}

@media (max-width: 992px) {
    .heading h4 {
        font-size: 30px;
        line-height: 40px;
    }
}

@media (max-width: 500px) {
    .heading h4 {
        font-size: 28px;
        line-height: 38px;
    }
}

.heading i,
.heading span.h6 {
    font-size: 20px;
    text-transform: uppercase;
    color: #c7ccd1;
    letter-spacing: 2px;
    padding-bottom: 10px;
    font-weight: 400;
    font-style: normal;
}

.heading.two {
    width: 100%;
    text-align: left;
    padding-bottom: 22px;
}

.heading.two h2 {
    font-size: 76px;
    line-height: 80px;
}

@media (max-width: 1400px) {
    .heading.two h2 {
        font-size: 60px;
        line-height: 64px;
    }
}

@media (max-width: 1200px) {
    .heading.two h2 {
        font-size: 50px;
        line-height: 54px;
    }
}

@media (max-width: 500px) {
    .heading.two h2 {
        font-size: 41px;
        line-height: 46px;
    }
}

.heading.two h6,
.heading.two span.h6 {
    font-size: 20px;
}

@media (max-width: 1400px) {
    .heading.two h6,
    .heading.two span.h6 {
        width: 100%;
    }
}

@media (max-width: 1400px) {
    .heading.two h6,
    .heading.two span.h6 {
        font-size: 22px;
        line-height: 34px;
    }
}

@media (max-width: 992px) {
    .heading.two h6,
    .heading.two span.h6 {
        font-size: 20px;
        line-height: 30px;
    }
}

@media (max-width: 500px) {
    .heading.two h6,
    .heading.two span.h6 {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 1px;
    }
}

.heading.two p {
    padding-top: 20px;
}

.heading.two > span {
    padding-top: 0;
}

.heading.two .heading.two a i {
    background-color: transparent;
}

.heading.two a {
    font-weight: bold;
    background-image: linear-gradient(to right, #c7ccd1, #c7ccd1 50%, #000 50%);
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.heading.two a i {
    padding-left: 16px;
}

.heading.two a:hover {
    background-position: 0;
}

.heading.two + .view-all-btn {
    justify-content: start;
    display: flex;
}

.products-slider .swiper-pagination-bullet,
.products-slider
    .swiper-pagination-horizontal.swiper-pagination-bullets
    .swiper-pagination-bullet {
    background-color: #bbbbbb;
}

.products-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #737373 !important;
}

.products-slider .swiper-pagination .swiper-pagination-bullet:before {
    color: transparent;
}

.products-slider .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 5px;
}

.about-text {
    padding-left: 90px;
}

@media (max-width: 1400px) {
    .about-text {
        padding-left: 60px;
    }
}

@media (max-width: 1200px) {
    .about-text {
        padding-left: 20px;
    }
}

@media (max-width: 992px) {
    .about-text {
        margin-bottom: 40px;
    }
}

.about-text p {
    padding-bottom: 40px;
}

.conter {
    display: flex;
    align-items: center;
    padding-top: 30px;
}

.conter span {
    color: #444444;
    font-size: 20px;
    width: 40%;
    display: block;
    text-transform: uppercase;
}

@media (max-width: 500px) {
    .conter span {
        width: 58%;
    }
}

.conter h2 {
    font-size: 98px;
    margin-right: 28px;
    color: #505050;
}

.about-img {
    text-align: end;
    position: relative;
}

.about-img:hover img {
    transform: scale(1) !important;
}

.about-img figure {
    margin-left: auto;
}

@media (max-width: 1400px) {
    .about-img img {
        width: 90%;
    }
}

.about-img img.scope {
    position: absolute;
    left: -25%;
    bottom: -32%;
}

@media (max-width: 1400px) {
    .about-img img.scope {
        left: -25%;
        bottom: -18%;
    }
}

@media (max-width: 1400px) {
    .about-img img.scope {
        width: 66%;
    }
}

@media (max-width: 992px) {
    .about-img img.scope {
        display: none;
    }
}

.video {
    position: absolute;
    bottom: -18%;
    z-index: 111;
}

@media (max-width: 1400px) {
    .video {
        bottom: -10%;
        left: -12%;
    }
}

@media (max-width: 1200px) {
    .video {
        bottom: -25%;
        left: -10%;
    }
}

@media (max-width: 992px) {
    .video {
        bottom: -5%;
        left: -10%;
    }
}

.video.two {
    position: relative;
    bottom: 0%;
    margin-top: 60px;
    left: 0;
}

@media (max-width: 1400px) {
    .video.two img {
        width: 100%;
    }
}

.we-provide {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
    position: relative;
    transition: 0.5s ease-in-out;
}

.we-provide:hover {
    background-position: right;
}

@media (max-width: 992px) {
    .we-provide {
        margin-bottom: 60px;
    }
}

.we-provide img {
    position: absolute;
    right: -5%;
    bottom: -15%;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    .we-provide img {
        width: 62%;
    }
}

@media (max-width: 768px) {
    .we-provide img {
        width: 38%;
    }
}

@media (max-width: 450px) {
    .we-provide img {
        width: 59%;
        right: 0%;
    }
}

.we-provide:hover img {
    bottom: -10%;
}

.we-provide h3 {
    font-size: 40px;
    color: #ffffff;
    text-transform: uppercase;
    width: 80%;
}

@media (max-width: 1400px) {
    .we-provide h3 {
        font-size: 34px;
    }
}

.we-provide p {
    color: #ffffff;
    width: 59%;
    padding-top: 8px;
    padding-bottom: 44px;
}

@media (max-width: 1200px) {
    .we-provide p {
        width: 82%;
    }
}

@media (max-width: 992px) {
    .we-provide p {
        width: 60%;
    }
}

.we-provide a i {
    border: 1px solid #ffffff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    transition: 0.5s ease-in-out;
}

.we-provide a i:hover {
    color: #ffffff;
    background-color: #c7ccd1;
    border-color: #c7ccd1;
}

.service-style-one {
    text-align: center;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
}

.service-style-one:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    left: 0;
    top: 0;
    transition: 0.5s ease-in-out;
    transform: scale(0.5);
    opacity: 0;
    box-shadow: 2px 2px 41px 6px rgba(0, 0, 0, 0.09);
}

.service-style-one .service-one-img {
    position: relative;
}

.service-style-one .service-one-img i {
    transition: 0.5s ease-in-out;
    width: 108px;
    height: 108px;
    background-color: #fff;
    border-radius: 50%;
    font-size: 60px;
    margin: auto;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c7ccd1;
}

.service-style-one .service-one-img i svg {
    width: 60px;
    height: auto;
    transition: 0.5s ease-in-out;
    fill: #c7ccd1;
}

.service-style-one .service-one-img img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    transition: 0.5s ease-in-out;
}

.service-style-one p {
    position: relative;
}

@media (max-width: 556px) {
    .service-style-one p {
        width: 90%;
        margin: auto;
    }
}

.service-style-one a {
    position: relative;
    font-size: 35px;
    display: inline-block;
    transition: 0.5s ease-in-out;
    padding-bottom: 10px;
}

.service-style-one a:hover {
    color: #c7ccd1;
}

.service-style-one:hover:before {
    transform: scale(1.1);
    opacity: 1;
}

@media (max-width: 556px) {
    .service-style-one:hover:before {
        transform: scale(1);
    }
}

.service-style-one:hover svg {
    fill: #ffffff !important;
}

.service-style-one:hover img {
    transform: translate(-50%, -50%) rotate(90deg);
}

.service-style-one:hover i {
    background-color: #c7ccd1;
    color: #ffffff;
}

.view-all-btn {
    text-align: end;
}

.view-all-btn a {
    font-size: 20px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    gap: 20px;
    justify-content: end;
}

@media (max-width: 992px) {
    .view-all-btn a {
        justify-content: start;
        margin-bottom: 30px;
    }
}

.view-all-btn a span {
    border-bottom: #737373 1px solid;
    line-height: 18px;
}

.view-all-btn a:hover span {
    color: #c7ccd1;
    border-color: #c7ccd1;
    transition: 0.5s ease-in-out;
}

.view-all-btn a:hover i {
    color: #ffffff;
    background-color: #c7ccd1;
    border-color: #c7ccd1;
}

.view-all-btn a i {
    border: 1px solid #737373;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #737373;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1200px) {
    .view-all-btn a i {
        width: 40px;
        height: 40px;
    }
}

.categories-section {
    background-repeat: no-repeat;
    background-position: right top;
}

.categories-section .categories-text {
    position: absolute;
    bottom: 30px;
    left: 30px;
}

.categories-section .categories-text h4 {
    display: inline-block;
}

.categories-section .categories-text h4 a {
    font-size: 35px !important;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    opacity: 1;
    transition: 0.5s ease-in-out;
}

.categories-section .categories-text h4 a:hover {
    color: #c7ccd1;
}

@media (max-width: 1400px) {
    .categories-section .categories-text h4 a {
        font-size: 30px !important;
    }
}

.categories-section .categories-text span {
    color: #fff;
    font-size: 20px;
    padding-left: 10px;
}

.categories-section .categories-text > a {
    font-size: 20px;
    color: #fff;
    display: block;
    border-bottom: 1px solid;
    display: table;
    margin-top: 10px;
    letter-spacing: 1px;
    transition: 0.5s ease-in-out;
}

.categories-section .categories-text > a:hover {
    border-color: #c7ccd1;
    letter-spacing: 2px;
}

.categories-section .categories-img {
    position: relative;
}

.categories-section .categories-img i {
    border: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 28px;
    border-radius: 50%;
    color: #ffffff;
    position: absolute;
    top: 20px;
    right: 20px;
}

@media (max-width: 1200px) {
    .categories-section .categories-img i {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
}

.categories-img img {
    width: 100%;
}

.swiper.client-slider {
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 1400px) {
    .swiper.client-slider {
        background-size: 65%;
    }
}

@media (max-width: 1200px) {
    .swiper.client-slider {
        background-size: 70%;
    }
}

@media (max-width: 992px) {
    .swiper.client-slider {
        background-size: cover;
    }
}

.swiper.client-slider .swiper-button span {
    display: flex;
    font-size: 34px;
    color: #444444;
    border: 1px solid;
    width: 170px;
    height: 359px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    .swiper.client-slider .swiper-button span {
        font-size: 28px;
    }
}

.swiper.client-slider .swiper-button span:hover {
    color: #c7ccd1;
    border-color: #c7ccd1;
}

/* Desktop prev/next get the navbar's gunmetal fill; hover flips to the
   platinum-with-dark-foreground inversion used by .theme-btn. Mobile keeps
   the outline style from the 992px rules below. */
@media (min-width: 993px) {
    .swiper.client-slider .swiper-button span {
        background-color: #141518;
        border-color: #141518;
        color: #f5f6f7;
    }

    .swiper.client-slider .swiper-button span:hover {
        background-color: #c7ccd1;
        border-color: #c7ccd1;
        color: #0b0b0c;
    }
}

@media (max-width: 1200px) {
    .swiper.client-slider .swiper-button span {
        font-size: 28px;
        width: 120px;
        height: 260px;
    }
}

@media (max-width: 992px) {
    .swiper.client-slider .swiper-button span {
        font-size: 18px;
        width: 70px;
        height: 50px;
        color: #fff;
    }

    .swiper.client-slider .swiper-button span:hover {
        color: #000;
        background-color: #ffffff;
        border-color: #ffffff;
    }
}

.swiper.client-slider .swiper-button {
    position: initial;
    bottom: 7%;
    width: 75%;
    margin: auto;
    left: 13%;
}

@media (max-width: 992px) {
    .swiper.client-slider .swiper-button {
        position: absolute;
        bottom: 40px;
    }
}

.what-client.swiper-slide.swiper-slide-active {
    opacity: 1;
    transition: 0.5s ease-in-out;
}

.what-client.swiper-slide {
    opacity: 0;
    transition: 0.5s ease-in-out;
}

@media (max-width: 992px) {
    .what-client.swiper-slide {
        opacity: 1;
    }
}

.what-client {
    position: relative;
    margin: auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 70px;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 992px) {
    .what-client {
        padding-top: 30px;
        padding-bottom: 105px;
    }
}

.what-client > img {
    width: 120px;
    filter: grayscale(1);
    transform: rotate(90deg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

@media (max-width: 556px) {
    .what-client > img {
        width: 80px;
    }
}

.what-client p {
    font-size: 25px;
    line-height: 40px;
    padding-bottom: 40px;
    padding-top: 30px;
    color: #ffffff;
    width: 47%;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transform: translateY(20px);
}

@media (max-width: 1400px) {
    .what-client p {
        font-size: 22px;
        line-height: 36px;
    }
}

@media (max-width: 1200px) {
    .what-client p {
        font-size: 20px;
        line-height: 32px;
        padding-bottom: 23px;
    }
}

@media (max-width: 992px) {
    .what-client p {
        width: 82%;
    }
}

@media (max-width: 556px) {
    .what-client p {
        width: 100%;
        padding-top: 10px;
    }
}

.what-client i {
    font-size: 30px;
    position: absolute;
    top: 112px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    color: #ffffff;
}

@media (max-width: 992px) {
    .what-client i {
        top: 83px;
    }
}

@media (max-width: 556px) {
    .what-client i {
        top: 66px;
        font-size: 20px;
    }
}

.author {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    text-align: start;
}

.author img {
    border-radius: 50%;
    border: 3px solid #ffffff;
    width: auto;
}

@media (max-width: 556px) {
    .author img {
        width: 65px;
    }
}

.author h6 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 6px;
    text-align: left;
    color: #ffffff;
}

.author h4 {
    font-size: 40px;
    color: #ffffff;
}

@media (max-width: 1400px) {
    .author h4 {
        font-size: 36px;
    }
}

@media (max-width: 556px) {
    .author h4 {
        font-size: 32px;
        color: #ffffff;
    }
}

.what-client .author {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transform: translatey(30px);
}

.what-client.swiper-slide.swiper-slide-active > img {
    transform: rotate(0deg);
    opacity: 1;
    visibility: visible;
    transition-delay: 0.5s;
}

.what-client.swiper-slide.swiper-slide-active p {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.8s;
    transform: translateY(0);
}

.what-client.swiper-slide.swiper-slide-active .author {
    opacity: 1;
    visibility: visible;
    transition-delay: 1.2s;
    transform: translateY(0);
}

.gun-display {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
}

.gun-display img.scope {
    position: absolute;
    bottom: 35%;
    right: 4%;
    width: 27%;
}

.gun-display::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0.9;
    left: 0;
    height: 100%;
    background-color: #fafafa;
}

.gun-display .build {
    background-color: #ffffff;
    position: relative;
    padding: 40px;
    width: 90%;
    margin-top: 30px;
}

.gun-display .build:hover img {
    transform: scale(1.1);
}

@media (max-width: 1400px) {
    .gun-display .build {
        padding: 30px;
    }
}

@media (max-width: 992px) {
    .gun-display .build {
        margin-bottom: 40px;
    }
}

@media (max-width: 330px) {
    .gun-display .build {
        padding: 20px;
    }
}

.gun-display .build span.h4 {
    font-size: 40px;
    text-transform: uppercase;
    padding-bottom: 20px;
    width: 83%;
    display: block;
}

@media (max-width: 1200px) {
    .gun-display .build span.h4 {
        font-size: 30px;
    }
}

@media (max-width: 450px) {
    .gun-display .build span.h4 {
        font-size: 28px;
    }
}

@media (max-width: 330px) {
    .gun-display .build span.h4 {
        font-size: 24px;
    }
}

.gun-display .build img {
    position: absolute;
    top: 40px;
    right: 40px;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    .gun-display .build img {
        top: 30px;
        right: 30px;
        width: 70px;
    }
}

@media (max-width: 450px) {
    .gun-display .build img {
        width: 54px;
    }
}

ul.list {
    position: relative;
}

ul.list li {
    font-size: 18px;
    color: #444444;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

ul.list li i {
    color: #c7ccd1;
    transform: translateY(3px);
    padding-right: 14px;
    font-size: 22px;
}

.gun-display .gallery-left {
    position: relative;
    z-index: 1;
}

.gun-display .gallery-left .hoverimg {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

@media (max-width: 1400px) {
    .gun-display .gallery-left .hoverimg img {
        width: 100%;
    }
}

.gun-display .gallery-right {
    position: relative;
    z-index: 1;
}

.gun-display .gallery-right .hoverimg {
    margin-bottom: 20px;
}

@media (max-width: 1400px) {
    .gun-display .gallery-right .hoverimg img {
        width: 100%;
    }
}

.partner {
    border: 1px solid #bfbfbf;
    margin-left: 0;
    padding: 27px 0;
    text-align: center;
}

.partner img {
    transition: 0.5s ease-in-out;
}

.partner img:hover {
    transform: scale(0.9);
}

.center-text {
    text-align: center;
    margin-bottom: 40px;
}

.center-text span.h4 {
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 3px;
    font-weight: 500;
}

.right-weapon {
    position: relative;
    margin-bottom: 100px;
}

@media (max-width: 768px) {
    .right-weapon {
        background-size: cover;
    }
}

.right-weapon .heading h2 {
    color: #ffffff;
}

.right-weapon::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0.4;
    left: 0;
    height: 100%;
    background-color: #000;
}

.right-weapon .box {
    width: 100%;
    height: 60px;
    position: relative;
    border: 1px solid #8c8c8c;
    display: flex;
    align-items: center;
    padding-left: 30px;
    margin-bottom: 20px;
}

.right-weapon .box input {
    background-color: transparent;
    color: #d5d5d5;
    padding: 0;
}

.right-weapon .box input::-moz-placeholder {
    color: #d5d5d5;
}

.right-weapon .box input::placeholder {
    color: #d5d5d5;
}

@media (max-width: 330px) {
    .right-weapon .box input {
        font-size: 13px;
    }
}

@media (max-width: 450px) {
    .right-weapon .box {
        padding-left: 20px;
    }
}

.right-weapon .box label {
    color: #fff;
    font-family: var(--font-dm), "DM Sans";
}

@media (max-width: 450px) {
    .right-weapon .box label {
        font-size: 16px;
    }
}

.right-weapon .box .nice-select {
    border-radius: 0;
    position: absolute;
    top: 12px;
    right: 13px;
    background-color: transparent;
    color: #d5d5d5;
    border: 0;
    border-left: 1px solid #8c8c8c;
    font-family: var(--font-dm), "DM Sans";
    width: 30%;
    height: 30px;
}

@media (max-width: 330px) {
    .right-weapon .box .nice-select {
        font-size: 13px;
    }
}

.right-weapon .box .nice-select:after {
    border-bottom: 2px solid #d5d5d5;
    border-right: 2px solid #d5d5d5;
    height: 7px;
    width: 7px;
}

@media (max-width: 768px) {
    .right-weapon .box .nice-select:after {
        right: 4px;
    }
}

@media (max-width: 1200px) {
    .right-weapon .box .nice-select {
        width: 37%;
    }
}

@media (max-width: 992px) {
    .right-weapon .box .nice-select {
        width: 27%;
    }
}

@media (max-width: 768px) {
    .right-weapon .box .nice-select {
        width: 33%;
    }
}

@media (max-width: 450px) {
    .right-weapon .box .nice-select {
        width: 40%;
    }
}

@media (max-width: 450px) {
    .right-weapon .box .nice-select ul.list li {
        font-size: 14px;
        padding-bottom: 0px;
    }
}

@media (max-width: 330px) {
    .right-weapon .box .nice-select ul.list li {
        font-size: 13px;
        padding-bottom: 0px;
        padding-left: 10px;
    }
}

.right-weapon .box .nice-select span {
    transform: translateY(-4px);
    display: block;
}

@media (max-width: 1400px) {
    .right-weapon .box .nice-select span {
        transform: translateY(-6px);
    }
}

/* Find Your Piece — dropdown-only row: the nice-select fills the whole box
   instead of sitting absolutely inside the text input. */
.right-weapon .box.box-select {
    padding-left: 0;
}

.right-weapon .box.box-select .nice-select {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    border-left: 0;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

@media (max-width: 450px) {
    .right-weapon .box.box-select .nice-select {
        padding-left: 20px;
    }
}

.right-weapon .box.box-select .nice-select span.current {
    transform: none;
}

/* Find Your Piece — contact-capture modal (step two of the band form). */
.inquiry-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.inquiry-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    background-color: #0d0d0d;
    border: 1px solid #8c8c8c;
    padding: 45px 40px 40px;
}

@media (max-width: 450px) {
    .inquiry-modal {
        padding: 40px 25px 30px;
    }
}

.inquiry-modal h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.inquiry-modal p {
    color: #d5d5d5;
    margin-bottom: 25px;
}

.inquiry-modal input {
    width: 100%;
    height: 56px;
    background-color: transparent;
    border: 1px solid #8c8c8c;
    color: #d5d5d5;
    padding: 0 20px;
    margin-bottom: 16px;
    font-family: var(--font-dm), "DM Sans";
}

.inquiry-modal input::placeholder {
    color: #d5d5d5;
}

.inquiry-modal p[role="alert"] {
    margin-top: 20px;
    margin-bottom: 0;
}

.inquiry-close {
    position: absolute;
    top: 10px;
    right: 16px;
    background: none;
    border: 0;
    color: #d5d5d5;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.inquiry-close:hover {
    color: #fff;
}

.right-weapon .guns-sale {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 80%;
    align-items: center;
    padding-top: 50px;
}

@media (max-width: 1400px) {
    .right-weapon .guns-sale {
        width: 90%;
    }
}

.right-weapon .guns-sale img {
    width: 60px;
    height: 60px;
}

@media (max-width: 1400px) {
    .right-weapon .guns-sale img {
        width: 40px;
        height: 40px;
    }
}

.right-weapon .guns-sale .conter {
    display: block;
    padding-top: 0;
}

.right-weapon .guns-sale .conter h2 {
    color: #fff;
    font-size: 80px;
    margin-right: 0;
}

@media (max-width: 1200px) {
    .right-weapon .guns-sale .conter h2 {
        font-size: 65px;
    }
}

@media (max-width: 556px) {
    .right-weapon .guns-sale .conter h2 {
        font-size: 50px;
    }
}

@media (max-width: 500px) {
    .right-weapon .guns-sale .conter h2 {
        font-size: 40px;
    }
}

.right-weapon .guns-sale .conter span {
    color: #c0c0c0;
    width: 100%;
    letter-spacing: 1px;
}

@media (max-width: 500px) {
    .right-weapon .guns-sale .conter span {
        font-size: 14px;
    }
}

.right-weapon .guns-sale-img {
    position: relative;
    z-index: 11;
    text-align: right;
    padding-top: 100px;
    margin-bottom: -49px;
}

@media (max-width: 1200px) {
    .right-weapon .guns-sale-img {
        margin-bottom: 0;
    }
}

.right-weapon .guns-sale-img img.scope {
    position: absolute;
    left: 0;
    top: -16%;
}

@media (max-width: 1200px) {
    .right-weapon .guns-sale-img img.scope {
        width: 85%;
    }
}

.right-weapon .guns-sale-img:hover img.weapon-1 {
    transform: rotate(12deg);
}

.right-weapon .guns-sale-img:hover img.weapon-2 {
    transform: rotate(355deg);
}

.right-weapon .guns-sale-img img.weapon-1 {
    transform: rotate(17deg);
    border: 9px solid #fff;
    transition: 0.7s all;
}

@media (max-width: 1400px) {
    .right-weapon .guns-sale-img img.weapon-1 {
        width: 80%;
    }
}

@media (max-width: 1200px) {
    .right-weapon .guns-sale-img img.weapon-1 {
        margin-right: 50px;
    }
}

@media (max-width: 768px) {
    .right-weapon .guns-sale-img img.weapon-1 {
        width: 75%;
        transform: rotate(12deg);
    }
}

.right-weapon .guns-sale-img img.weapon-2 {
    position: absolute;
    transition: 0.7s all;
    left: 5%;
    bottom: -40px;
    transform: rotate(350deg);
    border: 7px solid #fff;
}

@media (max-width: 1400px) {
    .right-weapon .guns-sale-img img.weapon-2 {
        width: 58%;
    }
}

@media (max-width: 1200px) {
    .right-weapon .guns-sale-img img.weapon-2 {
        width: 48%;
    }
}

.hero-section-two.swiper-slide.swiper-slide-active .hero-text h1 {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.8s;
    transform: translateY(0);
}

.hero-section-two.swiper-slide.swiper-slide-active .hero-text i {
    opacity: 1;
    visibility: visible;
    transition-delay: 1.2s;
    transform: translateX(0px);
}

.hero-section-two.swiper-slide.swiper-slide-active .hero-text > div {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    transform: translateX(0px);
    transition-delay: 1.5s;
}

.hero-section-two.swiper-slide.swiper-slide-active .hero-text img.target {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    transform: scale(1);
    transition-delay: 0.8s;
}

@media (max-width: 768px) {
    .hero-two-slider .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 20px;
    }
}

.who-we-are > h3 {
    position: relative;
    font-size: 30px;
    padding-bottom: 40px;
    text-transform: uppercase;
}

@media (max-width: 1400px) {
    .who-we-are > h3 {
        font-size: 26px;
        padding-bottom: 34px;
    }
}

.who-we-are > h3::before {
    content: "";
    position: absolute;
    width: 70px;
    background-color: #c7ccd1;
    height: 3px;
    top: 34px;
}

.thomas {
    display: flex;
    align-items: self-start;
    gap: 40px;
    margin-top: 40px;
}

@media (max-width: 992px) {
    .thomas {
        margin-bottom: 40px;
    }
}

.thomas figure {
    position: relative;
    overflow: visible;
}

.thomas figure img {
    position: relative;
}

.thomas figure:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c7ccd1;
    left: 15px;
    top: 15px;
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.thomas h3 {
    font-size: 30px;
    padding-top: 10px;
    text-transform: uppercase;
}

.thomas span {
    font-size: 18px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #444;
}

.thomas a {
    display: flex;
    font-size: 18px;
    padding-bottom: 10px;
    transition: 0.5s ease-in-out;
}

.thomas a:hover {
    color: #c7ccd1;
}

.thomas a span {
    color: #c7ccd1;
}

.who-we-are-img {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .who-we-are-img {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .who-we-are-img figure,
    .who-we-are-img img {
        width: 100%;
    }
}

.what-we-do {
    display: flex;
    align-items: self-start;
    margin-bottom: 45px;
}

@media (max-width: 1400px) {
    .what-we-do {
        margin-bottom: 30px;
    }
}

.what-we-do > div {
    width: 86%;
    margin-left: 20px;
}

.what-we-do svg {
    width: 60px;
    height: auto;
    filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(7314%)
        hue-rotate(355deg) brightness(111%) contrast(92%);
}

.what-we-do p {
    padding-top: 10px;
}

@media (max-width: 1400px) {
    .what-we-do p {
        padding-top: 4px;
        line-height: 28px;
    }
}

.what-we-do .what-we-do-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.what-we-do .what-we-do-text h4 {
    font-size: 37px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 1400px) {
    .what-we-do .what-we-do-text h4 {
        font-size: 32px;
    }
}

.what-we-do .what-we-do-text a i {
    border: 1px solid #a3a3a3;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #a3a3a3;
    transition: 0.5s ease-in-out;
}

.what-we-do .what-we-do-text a i:hover {
    color: #ffffff;
    background-color: #c7ccd1;
    border-color: #c7ccd1;
}

.team-member {
    border: 1px solid #999;
    padding: 30px 60px;
    display: flex;
    gap: 40px;
    align-items: center;
    position: relative;
    transition: 0.5s ease-in-out;
    overflow: hidden;
    margin-bottom: 23px;
}

@media (max-width: 1400px) {
    .team-member {
        padding: 30px 40px;
    }
}

@media (max-width: 1200px) {
    .team-member {
        gap: 20px;
    }
}

@media (max-width: 450px) {
    .team-member {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 44px;
    }
}

.team-member:hover {
    border-color: #c7ccd1;
    box-shadow: 0px 0px 31px 0px rgba(0, 0, 0, 0.2);
}

.team-member:hover ul.team-link {
    transform: translateY(0px) translatex(2px);
    opacity: 1;
}

.team-member ul.team-link {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #c7ccd1;
    gap: 16px;
    padding: 10px 10px;
    padding-left: 81px;
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    transition: 0.5s ease-in-out;
    transform: translateY(33px) translatex(2px);
    opacity: 0;
    margin-bottom: -1px;
    margin-left: -1px;
    height: 42px;
}

@media (max-width: 1400px) {
    .team-member ul.team-link {
        padding: 10px 10px;
        padding-left: 61px;
        height: 36px;
    }
}

.team-member ul.team-link li a {
    padding: 0;
    font-size: 22px;
    font-family: var(--font-odibee), "Odibee Sans";
    line-height: normal;
    color: #fff !important;
}

@media (max-width: 1400px) {
    .team-member ul.team-link li a {
        font-size: 18px;
    }
}

.team-member p {
    font-size: 20px;
    font-family: var(--font-odibee), "Odibee Sans";
    text-transform: uppercase;
    color: #838383;
    letter-spacing: 1px;
}

.team-member h3 {
    font-size: 45px;
    padding-bottom: 2px;
}

@media (max-width: 1200px) {
    .team-member h3 {
        font-size: 38px;
    }
}

.team-member a {
    padding-top: 30px;
    display: block;
}

@media (max-width: 1200px) {
    .team-member a {
        padding-top: 20px;
    }
}

.team-member .team-member-img {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}

.team-member .team-member-img img {
    border-radius: 50%;
}

@media (max-width: 1400px) {
    .team-member .team-member-img img {
        width: 160px;
        height: 160px;
    }
}

.team-member .team-member-img img.scope {
    position: absolute;
    right: 0;
    transform: scale(1.5);
    transform: translate(-50%, -50%) scale(1.5);
    top: 50%;
    left: 50%;
    filter: brightness(0.5);
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    .team-member .team-member-img img.scope {
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.team-member a {
    font-size: 20px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    .team-member a {
        font-size: 18px;
    }
}

.team-member a:hover {
    color: #c7ccd1;
}

.team-member a span {
    color: #c7ccd1;
}

.team-member:hover img.scope {
    transform: translate(-50%, -50%) scale(1.8) rotate(90deg);
}

@media (max-width: 1400px) {
    .team-member:hover img.scope {
        transform: translate(-50%, -50%) scale(1.2) rotate(90deg);
    }
}

.banner {
    padding-top: 140px;
    padding-bottom: 90px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

@media (max-width: 992px) {
    .banner {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}

@media (max-width: 556px) {
    .banner {
        padding-top: 80px;
        padding-bottom: 30px;
    }
}

.banner img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 42%;
}

@media (max-width: 556px) {
    .banner img {
        width: 100%;
    }
}

@media (max-width: 410px) {
    .banner img {
        top: 47%;
    }
}

.banner::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0.7;
    left: 0;
    height: 100%;
    background-color: #000;
}

.banner .banner-text {
    text-align: center;
    position: relative;
}

.banner .banner-text h1 {
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 992px) {
    .banner .banner-text h1 {
        /* Fluid so the longest service title stays on one line — keeps every
       page banner the same height on phones. */
        font-size: min(80px, 10vw);
    }
}

.video.two {
    top: 0;
    text-align: end;
    width: 90%;
    margin-left: auto;
    margin-top: 0;
}

@media (max-width: 556px) {
    .video.two {
        width: 100%;
    }
}

.helping-services {
    background-position: right bottom;
    background-repeat: no-repeat;
}

.helping-people {
    margin-top: 100px;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1400px) {
    .helping-people {
        padding: 80px 0;
    }
}

.helping-people img.scope {
    position: absolute;
    top: 0;
    width: 38%;
    top: 0;
    right: 0;
}

@media (max-width: 992px) {
    .helping-people img.scope {
        width: 100%;
    }
}

.helping-people::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0.7;
    left: 0;
    height: 100%;
    background-color: #000;
}

.helping-people .heading {
    position: relative;
    z-index: 1;
    padding-bottom: 0;
}

.helping-people .heading h2 {
    color: #fff;
    padding-bottom: 30px;
}

.about-conter-text {
    padding-top: 80px;
}

.about-conter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: auto;
}

@media (max-width: 992px) {
    .about-conter {
        width: 100%;
        flex-wrap: wrap;
        gap: 24px;
    }
}

.about-conter .conter {
    padding-top: 0;
}

@media (max-width: 500px) {
    .about-conter .conter {
        justify-content: center;
    }
}

.about-conter h2 {
    font-size: 80px;
    color: #c7ccd1;
    margin: 0;
}

@media (max-width: 1200px) {
    .about-conter h2 {
        font-size: 60px;
    }
}

@media (max-width: 768px) {
    .about-conter h2 {
        font-size: 50px;
    }
}

.about-conter bdi {
    color: #444;
    font-size: 22px;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .about-conter bdi {
        font-size: 18px;
    }
}

@media (max-width: 556px) {
    .about-conter bdi {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .about-conter bdi {
        text-align: center;
    }
}

.about-conter li {
    font-family: var(--font-odibee), "Odibee Sans";
    position: relative;
}

@media (max-width: 768px) {
    .about-conter li {
        width: 46%;
    }
}

@media (max-width: 410px) {
    .about-conter li {
        width: 100%;
    }
}

.about-conter li:before {
    position: absolute;
    color: #b3b3b3;
    content: "\f601";
    font-family: "Font Awesome 5 Free";
    font-size: 60px;
    -webkit-text-stroke: 1px #ffff;
    font-weight: 900;
    top: 7px;
    left: -120px;
    transition: 0.5s ease-in-out;
    transform: scale(1);
}

@media (max-width: 1200px) {
    .about-conter li:before {
        font-size: 50px;
    }
}

@media (max-width: 992px) {
    .about-conter li:before {
        display: none;
    }
}

.about-conter li:first-child:before {
    display: none;
}

form.checkout-meta.donate-page .nice-select.Advice {
    margin-bottom: 15px;
    width: 100%;
    padding-left: 30px;
    border: 1px solid #c3c3c3;
    padding-top: 10px;
    border-radius: 0;
    height: 60px;
    font-family: var(--font-dm), "DM Sans";
}

.nice-select:after {
    right: 25px;
}

ul.list {
    width: 100%;
}

th,
td {
    font-weight: 300;
}

input[type="radio"]:after {
    width: 15px;
    height: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: rgba(209, 209, 209, 0);
    content: "";
    display: inline-block;
    visibility: visible;
    border: 2px solid #cbcbcb;
    border-radius: 50%;
}

input[type="radio"]:checked:after {
    width: 15px;
    height: 15px;
    left: -1px;
    position: relative;
    content: "";
    display: inline-block;
    visibility: visible;
    border: 2px solid #c7ccd1;
}

input[type="radio"]:checked:after {
    border: 5px solid #c7ccd1;
}

.nice-select .option {
    font-size: 14px;
    padding: initial;
    padding-left: 30px;
}

.nice-select:after {
    right: 25px;
}

ul.list {
    width: 100%;
}

input[type="radio"]:after {
    width: 15px;
    height: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: "";
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}

.wrap {
    border: 1px solid #c1c1c1;
    width: 70%;
    margin: auto;
}

@media (max-width: 1400px) {
    .wrap {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .wrap {
        width: 100%;
    }
}

.wrap button {
    font-size: 28px;
    background-color: transparent;
    border: 0;
}

.wrap input {
    border: 0 !important;
    text-align: center;
    font-size: 18px;
}

ul.social-media li a i.fa-brands fa-linkedin-in {
    font-size: 14px;
}

.showing .nice-select.Advice {
    width: 325px;
    border-radius: 0;
    border: 0;
    font-size: 20px;
    background-color: #f5f5f5;
    height: 56px;
    padding-top: 10px;
    padding-left: 30px;
    color: #444444;
}

@media (max-width: 768px) {
    .showing .nice-select.Advice {
        width: 100%;
    }
}

.showing .nice-select.Advice::before {
    top: 7px;
    content: "";
    position: absolute;
    width: 42px;
    height: 42px;
    background-color: #fff;
    right: 6px;
}

.nice-select:after {
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
    height: 7px;
    width: 7px;
}

ul.categories li.end a {
    border: 0;
    padding-bottom: 0;
}

ul.categories ul.Meta li.end a {
    padding: 0;
    margin: 0;
    border: 0;
}

ul.categories li {
    overflow: hidden;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

ul.categories li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 25px;
    color: #444;
    font-size: 20px;
    background-color: #f5f5f5;
    position: relative;
    z-index: 11;
    transition: 0.5s ease-in-out;
    width: 100%;
    text-transform: uppercase;
    font-family: var(--font-odibee), "Odibee Sans";
}

@media (max-width: 1400px) {
    ul.categories li a {
        padding: 14px 22px;
        font-size: 18px;
    }
}

ul.categories li:hover a {
    color: #ffffff;
    background-color: #c7ccd1;
}

ul.categories li:hover:before {
    width: 100%;
}

ul.categories li:before {
    content: "";
    border-radius: 50px;
    position: absolute;
    width: 0%;
    background-color: #c7ccd1;
    height: 100%;
    left: 0;
}

ul.meta i {
    padding-right: 10px;
    font-size: 12px;
    color: #666;
}

ul.meta li a {
    font-weight: 600;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e2e2;
    color: #444444;
    display: block;
    width: 100%;
    transition: 0.5s ease-in-out;
}

ul.meta li a:hover {
    color: #c7ccd1;
}

ul.meta li.end a {
    padding: 0;
    margin: 0;
    border: 0;
}

.quotes {
    display: flex;
    padding: 40px;
    background-size: cover;
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .quotes {
        flex-wrap: wrap;
        gap: 20px;
    }
}

.quotes h4 {
    font-size: 32px;
    color: #fff;
    text-transform: uppercase;
    padding-top: 24px;
}

@media (max-width: 556px) {
    .quotes h4 {
        font-size: 28px;
    }
}

.quotes p {
    color: #fff;
    font-size: 24px;
    line-height: 36px;
}

@media (max-width: 556px) {
    .quotes p {
        font-size: 20px;
        line-height: 30px;
    }
}

form.contact input {
    border: 1px solid #c1c1c1;
    margin-bottom: 20px;
}

form.contact textarea {
    height: 200px;
    border: 1px solid #c1c1c1;
    margin-bottom: 15px;
}

/* Submit sits on a white section, where the platinum default button reads flat.
   Ground it in gunmetal so it pops, and let the platinum sweep take over on hover. */
form.contact .theme-btn {
    background: #17191c;
    color: #ffffff;
}

form.contact .theme-btn:before {
    background-color: #c7ccd1;
}

form.contact .theme-btn:hover {
    color: #17191c;
}

.map.two iframe {
    height: 100%;
}

.map.two {
    width: 100%;
    position: relative;
    height: 100%;
}

@media (max-width: 992px) {
    .map.two {
        margin-top: 40px;
        margin-bottom: 60px;
    }
}

/* Full-width location map: runs edge to edge and butts flush against the footer
   on every page. Grayscaled to match the palette. */
.footer-map {
    width: 100%;
    line-height: 0;
}

.footer-map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    filter: grayscale(100%) contrast(1.05);
}

@media (max-width: 768px) {
    .footer-map iframe {
        height: 320px;
    }
}

/* Desktop: drop the Explore / What We Do columns so their headings line up with
   the contact details, which sit below the logo in the first column. */
@media (min-width: 1200px) {
    .row.information .information-link {
        margin-top: 139px;
    }
}
.logo p {
    line-height: 1;
    font-size: large;
    margin: 0;
    padding: 0;
}
.conter h6 {
    color: rgb(68, 68, 68);
    font-size: 20px;
    width: 40%;
    display: block;
    text-transform: uppercase;
}
.gun-display .build h4 {
    font-size: 40px;
    text-transform: uppercase;
    padding-bottom: 20px;
    width: 83%;
}
.center-text h4 {
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 3px;
}
.logo p:focus-visible {
    outline: none;
}
.hero-section-two.swiper-slide.swiper-slide-active .hero-text h4 {
    opacity: 1;
    visibility: visible;
    transition-delay: 1.2s;
    transform: translateX(0px);
}
.about-conter h2 span {
    font-size: 80px;
    color: #c7ccd1;
    margin: 0;
    display: inline;
}
/* =========================================================================
   Founders Armory — recolor contrast overrides
   The prior palette paired white text/icons with #f41d1d red FILLS. The
   accent is now platinum (#C7CCD1) — a LIGHT colour — so foreground content
   sitting on those fills must be dark to stay legible. Appended last so it
   wins the cascade. (Recolor pass only; no markup/content changes.)
   ========================================================================= */

/* Primary button: platinum fill + near-black label; on hover a near-black
   panel slides up and the label flips to platinum (luxe inversion). */
.theme-btn {
    color: #0b0b0c;
}
.theme-btn:before {
    background-color: #0b0b0c;
}
.theme-btn:hover {
    color: #c7ccd1;
}

/* Secondary / ghost button (`.theme-btn.two`, e.g. hero "Learn More"): no fill,
   a platinum hairline + platinum label so the primary "Inquire" reads as the
   dominant CTA. On hover the platinum panel slides up and the label flips dark —
   the mirror of the primary's inversion. Padding compensates for the border so
   it sits flush in height with the filled button beside it. */
.theme-btn.two {
    background: transparent;
    border: 1.5px solid rgba(199, 204, 209, 0.55);
    color: #c7ccd1;
    padding: 16.5px 48.5px;
}
.theme-btn.two:before {
    background-color: #c7ccd1;
}
.theme-btn.two:hover {
    color: #0b0b0c;
    border-color: #c7ccd1;
}
@media (max-width: 1400px) {
    .theme-btn.two {
        padding: 14.5px 38.5px;
    }
}
@media (max-width: 450px) {
    .theme-btn.two {
        padding: 12.5px 28.5px;
    }
}

/* Filled accent button variant. */

/* NewArrivals: sale badge + product hover icons sit on the accent fill. */

/* Icon "chips" that fill with accent on hover (ProvideCards, Services,
   RecentNews, categories, what-we-do). */
.we-provide a i:hover,
.service-style-one:hover i,
.view-all-btn a:hover i,
.what-we-do .what-we-do-text a i:hover {
    color: #0b0b0c;
}

/* TeamGrid: social bar fills with accent — darken the icons. */
.team-member ul.team-link a {
    color: #0b0b0c;
}

/* GunShowcase: map pin tooltip fills with accent. */

/* Header chrome: search/account/donation chips fill with accent on hover. */
.header-search a.user:hover,
.header-search-button > a:hover {
    color: #0b0b0c;
}

/* =========================================================================
   Founders Armory — logo sizing
   The brand mark is the near-square faceted eagle, swapped in for the source
   template's wide wordmark. Size it by HEIGHT (width auto) so it fits the
   header/footer/drawer slots without the old wordmark's fixed pixel widths
   stretching it. Overrides the template's `header .logo img { width: 210px }`.
   ========================================================================= */
header .logo img {
    width: auto;
    height: 54px;
}
@media (max-width: 1400px) {
    header .logo img {
        width: auto;
        height: 46px;
    }
}
footer .logo img {
    width: auto;
    height: 88px;
}
.res-log img {
    width: auto;
    height: 64px;
}

/* Header brand lockup: black eagle mark + "Founders Armory" wordmark, on the
   white navbar. Wordmark uses the display face, dark ink, generous tracking. */
.fa-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.fa-wordmark {
    font-family: var(--font-odibee), "Odibee Sans", sans-serif;
    text-transform: uppercase;
    color: #0b0b0c;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
}
@media (max-width: 1400px) {
    .fa-wordmark {
        font-size: 35px;
    }
}
@media (max-width: 575px) {
    .fa-wordmark {
        font-size: 30px;
        letter-spacing: 1px;
    }
}

/* Footer lockup: white eagle (dark footer) + wordmark in light ink, scaled to
   the larger footer mark. */
footer .logo.fa-logo-lockup {
    gap: 18px;
}
footer .fa-wordmark {
    color: #f5f6f7;
    font-size: 52px;
}
@media (max-width: 575px) {
    footer .fa-wordmark {
        font-size: 40px;
    }
}

/* Footer: the newsletter row above `.information` was removed, so its separating
   top padding (100px / 80 / 60) now doubles up with the footer's `.gap` top
   padding and leaves a big void. Zero it — the `.gap` top padding alone gives the
   correct top rhythm. */
footer .information {
    padding-top: 0;
}

/* =========================================================================
   Founders Armory — hero (.fa-hero)
   Self-contained crossfade slider on a solid dark ground (nothing white can
   bleed in), fixed-height stage
   (no layout shift between slides), simple opacity crossfade, a clean line-style
   switcher, and circular arrows. No spinning-reticle animation.
   ========================================================================= */
.fa-hero {
    position: relative;
    overflow: hidden;
    background-color: #0b0b0c;
    padding: 130px 0 150px;
}
@media (max-width: 1200px) {
    .fa-hero {
        padding: 110px 0 120px;
    }
}
@media (max-width: 768px) {
    .fa-hero {
        padding: 90px 0 110px;
    }
}

/* Atmospheric, heavily darkened scene backdrop + vignette (keeps depth without
   competing with the foreground product). */
.fa-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(/images/output.jpg) center / cover no-repeat;
    opacity: 0.22;
}
/* Mobile gets a ~960px backdrop (38KB vs 253KB) for a faster LCP. */
@media (max-width: 768px) {
    .fa-hero__bg {
        background-image: url(/images/output.jpg);
    }
}
.fa-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            120% 90% at 78% 35%,
            rgba(199, 204, 209, 0.07),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            rgba(11, 11, 12, 0.82) 0%,
            rgba(11, 11, 12, 0.55) 45%,
            #0b0b0c 100%
        );
}
.fa-hero .container {
    position: relative;
    z-index: 2;
}

/* Static crosshair accent behind the product image — no animation. */
.fa-hero__stage {
    position: relative;
    min-height: 540px;
}

.fa-hero__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    z-index: 1;
    pointer-events: none;
}
/* Active slide sits on top and is interactive; its elements are revealed below.
   Slides are NOT faded at the container level — every element carries its own
   in/out, so the outgoing slide animates out while the incoming animates in
   (the same effect Swiper's `swiper-slide-active` toggle produces). */
.fa-hero__slide.is-active {
    z-index: 2;
    pointer-events: auto;
}

/* Staggered entrance reveal. Each element rests offset + transparent. On becoming
   active it eases IN with a staggered delay; losing `is-active` replays the base
   rule (no delay) → the slide-OUT. Directions: eyebrow
   drops in, title slides from the left, buttons from the right, image from the
   right. Transition `0.5s ease`, matching the original. */
.fa-hero__text i,
.fa-hero__text h2,
.fa-hero__cta,
.fa-hero__media img {
    opacity: 0;
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.fa-hero__text i {
    transform: translateY(-20px);
}
.fa-hero__text h2 {
    transform: translateX(-50px);
}
.fa-hero__cta {
    transform: translateX(50px);
}
.fa-hero__media img {
    transform: translateX(40px);
}

.fa-hero__slide.is-active .fa-hero__text i {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}
.fa-hero__slide.is-active .fa-hero__text h2 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.9s;
}
.fa-hero__slide.is-active .fa-hero__cta {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.2s;
}
.fa-hero__slide.is-active .fa-hero__media img {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.fa-hero__text i {
    display: block;
    font-style: normal;
    text-transform: uppercase;
    color: #9aa0a6;
    font-size: clamp(18px, 2vw, 30px);
    letter-spacing: 4px;
    margin-bottom: 18px;
}
.fa-hero__text h2 {
    font-family: var(--font-odibee), "Odibee Sans", sans-serif;
    color: #f5f6f7;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 0.95;
    font-size: clamp(46px, 6vw, 96px);
    margin: 0 0 36px;
}
.fa-hero__cta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.fa-hero__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fa-hero__media img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: 360px; /* fixed box: any image swaps in without layout shift */
    object-fit: contain;
    object-position: center;
}

/* Controls: arrows on the ends, line switcher centered, along the bottom. */
/* Slide navigation cluster: prev arrow · switcher · next arrow, as one unit
   centered along the hero's bottom edge. */
.fa-hero__nav {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 30px;
}
.fa-hero__dots {
    display: flex;
    align-items: center;
    gap: 14px;
}
.fa-hero__arrow {
    width: 52px;
    height: 52px;
    flex: none;
    border: 1px solid rgba(245, 246, 247, 0.45);
    border-radius: 50%;
    background: transparent;
    color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.fa-hero__arrow:hover {
    background: #c7ccd1;
    border-color: #c7ccd1;
    color: #0b0b0c;
}
.fa-hero__dot {
    width: 36px;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgba(245, 246, 247, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
}
.fa-hero__dot:hover {
    background: rgba(245, 246, 247, 0.55);
}
.fa-hero__dot.is-active {
    background: #c7ccd1;
    width: 54px;
}

/* Mobile: one column, but keep the slides stacked so the in/out cascade still
   plays. The stage becomes a grid and every slide shares one cell — they overlap
   (non-active ones are transparent via the element opacity) and the stage sizes
   to the tallest slide, so no fixed height is needed. No `display:none`, so the
   same per-element fade/slide transition runs as on desktop. */
@media (max-width: 991px) {
    .fa-hero__stage {
        min-height: 0;
        display: grid;
    }
    .fa-hero__slide {
        position: relative;
        grid-area: 1 / 1;
        grid-template-columns: 1fr;
        text-align: center;
    }
    .fa-hero__cta {
        justify-content: center;
    }
    .fa-hero__media {
        margin-top: 34px;
    }
    .fa-hero__media img {
        height: 240px;
    }
}

/* =========================================================================
   Founders Armory — credibility strip (FeatureStrip)
   Was a jarring white band directly under the dark hero. Make it full-width
   gunmetal so it flows out of the hero; icons + labels in light ink. On hover
   the platinum panel rises and content flips to dark ink for contrast.
   ========================================================================= */
.feature-strip {
    background-color: #141518;
}
.feature-strip .options {
    border-bottom-color: #2a2d33;
}
.feature-strip .options h3 {
    color: #f5f6f7;
}
.feature-strip .options:hover h3 {
    color: #0b0b0c;
}

/* Trust-signal marks: the brand's own line icons as recolorable CSS masks
   (kept as cached external SVGs, tinted via background-color so they flip
   white -> dark on the platinum hover panel, matching the original 72px
   icon and its hover scale). */
.feature-strip .option-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 15px;
    position: relative;
    z-index: 11;
    background-color: #f5f6f7;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: 0.5s ease-in-out;
}
.feature-strip .options:hover .option-icon {
    background-color: #0b0b0c;
    transform: scale(1.1);
}

/* =========================================================================
   Founders Armory — always-pinned full-width navbar
   The template left the header `position: absolute` (it scrolled away) and only
   pinned it on desktop via flaky scroll-direction logic. We pin it flush to the
   top at all times — present from the first frame, no animation, no state to
   toggle. `sticky` (not `fixed`) so the header stays in normal flow and the
   page reserves its exact height automatically — including the policy notice
   bar rendered inside it, whose height varies as its text wraps. (The old
   `fixed` + hand-tuned `body` padding-top per breakpoint clipped the notice
   whenever the real header height drifted from the reserved padding.)
   Requires no clip container between here and the root — see the body
   `overflow-x: clip` note near the top of this file. Drops the template's 50px
   floating top gap and the `.bottom-bar` left nub (only needed for the old
   floating look).
   ========================================================================= */
#stickyHeader {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0;
    background-color: #141518;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    z-index: 999;
}
#stickyHeader .bottom-bar::before {
    display: none;
}

/* Navbar palette inverted to match the feature strip: gunmetal ground with
   light text/icons and the platinum accent (hover underline + icon-chip fill).
   The eagle mark uses the white variant (logo2.png) in the markup. */
#stickyHeader .bottom-bar {
    background-color: #141518;
}
header .fa-wordmark {
    color: #f5f6f7;
}
.navbar-links li > a {
    color: #f5f6f7;
}
.navbar-links li:hover > a {
    color: #ffffff;
}
.header-search i {
    color: #f5f6f7;
}
.header-search i svg {
    fill: #f5f6f7;
}
.header-search a.user,
.header-search-button > a {
    border-left-color: #2a2d33;
}
/* Icon chip hover: platinum fill with a dark glyph (mirrors the strip's hover). */
.header-search a.user:hover svg,
.header-search-button > a:hover svg {
    fill: #0b0b0c;
}
#mobile-menu i {
    color: #f5f6f7;
}
/* Desktop dropdown panel: the theme default is white-on-white with a black
   caret — both invisible against the gunmetal bar. Dark panel, light text
   (hover platinum comes from the base rule), white caret variant. */
li.menu-item-children > a:before {
    background-image: url(/images/down-arrow-clr.svg);
}
.navbar-links li.navbar-dropdown .sub-menu a {
    color: #f5f6f7;
    background-color: #141518;
}
.navbar-links li.navbar-dropdown .sub-menu li:before {
    background-color: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   Founders Armory — "Welcome to Founders Armory" intro (AboutIntro)
   The section had no padding of its own (it relied on the now-removed
   NewArrivals block above it), so its heading butted straight against the
   dark feature strip. Restore generous vertical breathing room. Also: the
   eyebrow is the platinum accent, which is near-invisible on this white
   ground — darken it to brand ink so it reads (the accent stays correct on
   the dark sections that keep it).
   ========================================================================= */
.fa-welcome {
    padding: 110px 0 90px;
}
.fa-welcome .heading.two i {
    color: #0b0b0c;
}
@media (max-width: 992px) {
    .fa-welcome {
        padding: 80px 0 60px;
    }
}
/* Neat, single left margin: the template indents `.about-text` 90px, which
   left the body copy + button offset from the heading. Flush them to the same
   edge and give the heading→body and body→button a consistent rhythm. */
.fa-welcome .about-text {
    padding-left: 0;
}
.fa-welcome .heading.two {
    padding-bottom: 28px;
}
.fa-welcome .about-text p {
    padding-bottom: 32px;
}
/* The decorative mark (the element with `.scope`, now the FA logo) is a faint
   watermark centered in the whole section. Make the section the positioning
   context and neutralize the image column's, so the absolutely-positioned mark
   centers on the section rather than the photo. */
.fa-welcome {
    position: relative;
}
.fa-welcome .about-img {
    position: static;
}
.fa-welcome .about-img img.scope {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 240px;
    opacity: 0.1;
    z-index: 3;
}
/* The template's `.about-img:hover img { transform: scale(1) !important }` wipes
   the centering transform on hover, making the watermark jump. Keep it put. */
.fa-welcome .about-img:hover img.scope {
    transform: translate(-50%, -50%) !important;
}

/* =========================================================================
   Founders Armory — next/image aspect-ratio reset
   Tailwind Preflight is disabled, so the usual `img { height: auto }` reset is
   absent. next/image emits fixed width/height attributes; without height:auto
   those act as a FIXED height, so any responsive width (mobile `width:100%`,
   etc.) stretches the image vertically. This restores proportional scaling —
   the height attribute becomes the aspect-ratio source. Element-level selector,
   so intentional fixed heights (e.g. `.fa-hero__media img`) still override it.
   ========================================================================= */
img {
    height: auto;
}

/* =========================================================================
   Founders Armory — hide Swiper's injected nav icons
   Swiper 14 injects an <svg class="swiper-navigation-icon"> into each
   prev/next button (default color #007aff), replacing the old `:after` glyph
   the theme used to hide. The theme renders its own nav chrome (bordered
   prev/next text on the testimonials slider, FontAwesome arrows elsewhere),
   so suppress Swiper's blue arrows everywhere.
   ========================================================================= */
.swiper-navigation-icon {
    display: none;
}

/* "From the Armory" CTA box: the corner mark is now the FA eagle (logo.png) at
   full opacity, replacing the old battle graphic. logo.png is larger than the
   old icon, so cap its width above 1400px (the base ≤1400/≤450 widths still
   apply below that). */
@media (min-width: 1401px) {
    .gun-display .build img.build-mark {
        width: 85px;
    }
}

/* =========================================================================
   Founders Armory — accessibility: color contrast (About page)
   These labels/text were the platinum accent (#c7ccd1) or light grey on white
   backgrounds, failing WCAG AA (ratios 1.6–3.8). The platinum was effectively
   invisible on light anyway. Darken to readable gunmetal/grey (≥4.5:1) without
   touching layout. All these selectors only appear on the light About sections.
   ========================================================================= */
.heading span.h6 {
    color: #44494f;
}
.thomas a {
    color: #1c1e22;
}
.thomas a span {
    color: #44494f;
}
.team-member p {
    color: #595959;
}
.team-member a {
    color: #595959;
}
.team-member a span {
    color: #44494f;
}

/* =========================================================================
   Founders Armory — mobile section backgrounds
   These section backdrops are set as full-size (~1920px) inline-style
   background-images. On phones, serve ~960px variants (≈1.1MB -> ~200KB) to cut
   the mobile image payload. !important overrides the inline style.
   ========================================================================= */
@media (max-width: 768px) {
    .right-weapon {
        background-image: url(/images/bg-img2-mobile.jpg) !important;
    }
    .gun-display {
        background-image: url(/images/bg-img3-mobile.jpg) !important;
    }
    footer.gap {
        background-image: url(/images/footer-mobile.jpg) !important;
    }
}

/* =========================================================================
   Founders Armory — services page components
   Styles for the services surfaces: `.categorie` discipline tri-cards,
   `.pricing-plan` cards, and the `.service-detail` page body (plus its
   `ul.list-style2` / `ul.social-media`). Colorwork follows the house rules:
   panel FILLS are platinum (#c7ccd1) with DARK foregrounds (the luxe
   inversion used by .theme-btn), and small accents on white grounds are ink
   (#0b0b0c) since platinum is near-invisible on light (see the
   contrast-overrides note).
   ========================================================================= */

/* ---- Discipline tri-cards (.categorie) --------------------------------- */
.categorie {
    position: relative;
    transition: 0.5s ease-in-out;
}

@media (max-width: 992px) {
    .categorie {
        margin-bottom: 23px;
    }
}

.categorie img {
    width: 100%;
}

/* Card photos render black & white; on desktop the card is 1.3x taller than
   the photo's natural 580x460 (460 * 1.3 = 598), cropping via object-fit.
   Below the lg breakpoint the natural ratio is untouched. */
.categorie > img {
    filter: grayscale(1);
}

/* The filter lifts the photo into the positioned paint phase, which would
   bury the hover panel and title beneath it — restack them above. */
.categorie::before {
    z-index: 1;
}

.categorie h2 {
    z-index: 2;
}

@media (min-width: 992px) {
    .categorie > img {
        aspect-ratio: 580 / 598;
        object-fit: cover;
    }
}

.categorie:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c7ccd1;
    top: 0;
    left: 0;
    content: "";
    transform: scale(0.45);
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.categorie h2 {
    text-align: center;
    position: absolute;
    top: 0;
    font-size: 50px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 70%;
    margin: auto;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 45%;
    transition: color 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    .categorie h2 {
        font-size: 40px;
    }
}

@media (max-width: 1200px) {
    .categorie h2 {
        font-size: 36px;
    }
}

.categorie .categories-icon {
    position: absolute;
    z-index: 11;
    bottom: 0;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 80%;
}

@media (max-width: 1400px) {
    .categorie .categories-icon {
        top: 77%;
    }
}

@media (max-width: 1200px) {
    .categorie .categories-icon {
        top: 75%;
    }
}

.categorie .categories-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 133px;
    height: 133px;
    color: #0b0b0c;
    font-size: 20px;
    transition: 0.5s ease-in-out;
    opacity: 0;
    z-index: 111;
    position: relative;
}

.categorie .categories-icon img {
    position: absolute;
    z-index: 11;
    width: 133px;
    transition: 0.5s ease-in-out;
    transform: scale(0.4);
}

.categorie:hover {
    transform: translateY(-30px);
}

@media (max-width: 992px) {
    .categorie:hover {
        transform: translateY(0px);
    }
}

.categorie:hover:before {
    transform: scale(0.95);
    opacity: 1;
}

/* On the platinum hover panel the white title and white scope ring flip dark
   (the ring is a white PNG, so darken it with a filter rather than a fill). */
.categorie:hover h2 {
    color: #0b0b0c;
}

.categorie:hover .categories-icon img {
    transform: scale(1);
    filter: brightness(0);
}

.categorie:hover .categories-icon a {
    opacity: 1;
}

/* ---- Pricing cards (.pricing-plan) ------------------------------------- */
.pricing-plan {
    background-color: #fff;
    padding: 50px;
    position: relative;
    border: 1px solid #bbbbbb;
    transition: 0.5s ease-in-out;
    width: 97%;
    margin: auto;
}

@media (max-width: 1400px) {
    .pricing-plan {
        padding: 40px;
    }
}

@media (max-width: 1200px) {
    .pricing-plan {
        padding: 30px;
        width: 100%;
        padding-top: 40px;
    }
}

@media (max-width: 992px) {
    .pricing-plan {
        margin-bottom: 30px;
    }
}

.pricing-plan:hover {
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.19);
}

/* Decorative corner mark: the brand line icons as recolorable CSS masks
   (same approach as .feature-strip .option-icon) so the glyph stays
   on-brand and tintable. */
.pricing-plan .plan-mark {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 26px;
    top: 26px;
    background-color: #bbb;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

@media (max-width: 1200px) {
    .pricing-plan .plan-mark {
        width: 50px;
        height: 50px;
        right: 17px;
        top: 17px;
    }
}

.pricing-plan h4 {
    font-size: 66px;
    display: inline;
}

@media (max-width: 1400px) {
    .pricing-plan h4 {
        font-size: 56px;
    }
}

@media (max-width: 1200px) {
    .pricing-plan h4 {
        font-size: 46px;
    }
}

.pricing-plan h4 span {
    color: #0b0b0c;
    font-size: 66px;
}

@media (max-width: 1400px) {
    .pricing-plan h4 span {
        font-size: 56px;
    }
}

@media (max-width: 1200px) {
    .pricing-plan h4 span {
        font-size: 46px;
    }
}

.pricing-plan h6 {
    color: #808080;
    font-size: 28px;
    text-transform: uppercase;
}

@media (max-width: 1400px) {
    .pricing-plan h6 {
        font-size: 24px;
    }
}

@media (max-width: 1200px) {
    .pricing-plan h6 {
        font-size: 20px;
    }
}

.pricing-plan ul {
    padding-bottom: 30px;
}

.pricing-plan ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    font-size: 18px;
}

@media (max-width: 1200px) {
    .pricing-plan ul li {
        font-size: 16px;
    }
}

/* Check glyph: the icon font is subsetted, so the check is an inline SVG. */
.pricing-plan ul li svg.plan-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: #44494f;
}

.pricing-plan ul li:not(:last-child) {
    border-bottom: 1px solid #cecece;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    .pricing-plan ul li:not(:last-child) {
        border-bottom: 1px solid #cecece;
        margin-bottom: 12px;
    }
}

.pricing-plan p {
    padding-bottom: 30px;
    padding-top: 20px;
    border-top: 3px solid #0b0b0c;
    margin-top: 20px;
}

.pricing-plan span {
    font-size: 20px;
    padding-left: 10px;
}

/* Ghost button on the white card: ink hairline + ink label; on hover the ink
   panel slides up and the label flips platinum. */
.pricing-plan a.theme-btn {
    width: 100%;
    background-color: #ffffff;
    border: 3px solid #0b0b0c;
    color: #0b0b0c;
}

.pricing-plan a.theme-btn:before {
    background-color: #0b0b0c;
}

.pricing-plan a.theme-btn:hover {
    color: #c7ccd1;
}

/* Featured (dark) card variant. */
.pricing-plan.two h3 {
    position: absolute;
    top: 0;
    background-color: #c7ccd1;
    padding: 4px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
    margin-top: -13px;
    color: #0b0b0c;
    line-height: normal;
}

.pricing-plan.two h4 {
    color: #ffffff;
}

.pricing-plan.two h4 span {
    color: #c7ccd1;
}

.pricing-plan.two ul,
.pricing-plan.two p {
    color: #c4c4c4;
}

.pricing-plan.two li {
    border-color: #313131 !important;
}

.pricing-plan.two ul li svg.plan-check {
    fill: #c7ccd1;
}

.pricing-plan.two span {
    color: #808080;
}

/* Filled platinum button on the dark card — the primary .theme-btn inversion. */
.pricing-plan.two a.theme-btn {
    background-color: #c7ccd1;
    border-color: #c7ccd1;
    color: #0b0b0c;
}

.pricing-plan.two a.theme-btn:before {
    background-color: #0b0b0c;
}

.pricing-plan.two a.theme-btn:hover {
    color: #c7ccd1;
}

/* ---- Service detail body (.service-detail) ----------------------------- */
.service-detail h3 {
    font-size: 45px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .service-detail h3 {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .service-detail h3 {
        font-size: 30px;
        padding-bottom: 10px;
    }
}

.service-detail p {
    padding-bottom: 40px;
}

.service-detail img {
    width: 100%;
}

.service-detail .service-detail-img {
    margin-bottom: 40px;
}

@media (max-width: 1400px) {
    .service-detail .service-detail-img img {
        width: 100%;
    }
}

.service-detail .service-detail-img i {
    width: 110px;
    height: 110px;
    background-color: #c7ccd1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease-in-out;
    margin-left: 30px;
    margin-top: -70px;
    z-index: 11;
    position: relative;
}

@media (max-width: 992px) {
    .service-detail .service-detail-img i {
        width: 90px;
        height: 90px;
    }
}

.service-detail .service-detail-img i svg {
    fill: #0b0b0c;
    height: auto;
    width: 90px;
}

@media (max-width: 992px) {
    .service-detail .service-detail-img i svg {
        width: 65px;
    }
}

.service-detail .hunting {
    display: flex;
    padding-bottom: 40px;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .service-detail .hunting {
        padding-bottom: 30px;
    }
}

.service-detail .hunting h3 {
    padding-bottom: 0;
}

ul.list-style2 {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    font-family: "DM Sans";
}

@media (max-width: 1400px) {
    ul.list-style2 {
        font-size: 16px;
    }
}

ul.list-style2 li {
    width: 50%;
    padding-left: 25px;
    padding-bottom: 14px;
    position: relative;
    font-family: "DM Sans";
    color: #444;
}

@media (max-width: 1400px) {
    ul.list-style2 li {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    ul.list-style2 li {
        width: 100%;
    }
}

ul.list-style2 li:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #0b0b0c;
    left: 0;
    top: 6px;
}

/* Social chips beside the service title. Glyphs are inline SVGs (the icon
   font is subsetted and has no brand glyphs); they inherit the chip color. */
ul.social-media {
    display: flex;
}

ul.social-media li {
    position: relative;
    margin-left: 0px;
}

ul.social-media li a {
    text-transform: capitalize;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}

ul.social-media li a i {
    font-size: 16px;
    width: 45px;
    background-color: #ffffff;
    border: 1px solid #0b0b0c;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    padding: 0;
    transition: 0.5s ease-in-out;
    color: #0b0b0c;
}

@media (max-width: 992px) {
    ul.social-media li a i {
        font-size: 15px;
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
}

ul.social-media li a i svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

ul.social-media li a i:hover {
    color: #c7ccd1;
    background-color: #0b0b0c;
    border-color: #0b0b0c;
}

/* Inside the detail body, figures must span the layout (hero = container,
   gallery = its column). The generic .hoverimg figure is fit-content, which
   shrink-wraps next/image to its intrinsic px and breaks the layout for
   anything narrower than the container. */
.service-detail .hoverimg figure {
    width: 100%;
}

/* The ink divider above the blurb disappears on the dark featured card —
   flip it platinum there (mirrors the h4 span treatment). */
.pricing-plan.two p {
    border-top-color: #c7ccd1;
}

/* =========================================================================
   Founders Armory — "From the Armory" backdrop coverage
   .gun-display never sized its background, so the 1920x876 photo rendered at
   natural size: full width, but shorter than the section, leaving the bottom
   band bare. Cover keeps the full section height painted (cropping width
   overflow), anchored to center.
   ========================================================================= */
.gun-display {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================================================
   Founders Armory — map strip top band
   The grayscaled map is near-white, and on most pages the section above it is
   too, so the map had no visible top boundary — it just started mid-scroll.
   An ink band above it gives the seam a hard edge and, with the dark footer
   below, frames the map as a deliberate inset in the site's closing chrome.
   ========================================================================= */
.footer-map {
    border-top: 40px solid #0b0b0c;
}

@media (max-width: 768px) {
    .footer-map {
        border-top-width: 28px;
    }
}

/* =========================================================================
   Founders Armory — service intro media sizing
   The service pages' intro media come in varied intrinsic sizes (some wider
   than the column). .hoverimg figures are fit-content, so without this the
   image renders at natural px and can overflow the viewport. Pin the media
   to the column; the .scope brand watermark keeps its own sizing.
   ========================================================================= */
.service-intro .about-img figure {
    width: 100%;
}

.service-intro .about-img img:not(.scope) {
    width: 100%;
}

/* =========================================================================
   Founders Armory — "Find Your Piece" band (.right-weapon) fixes
   The backdrop (1920x761) only got background-size on mobile, so on screens
   wider or taller than the image it tiled — visible seams / a repeated copy.
   And the band's 100px bottom margin is transparent, so the dark document
   ground bled into what used to read as white; paint that strip as an opaque
   white border instead, so the overhanging photo collage lands on white the
   way the design intends.
   ========================================================================= */
.right-weapon {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0;
    border-bottom: 100px solid #ffffff;
}

/* =========================================================================
   Founders Armory — dark document ground
   The theme never painted html/body, so the browser's white canvas showed
   through wherever no section covered it — e.g. rubber-band overscroll above
   the page / past the footer. Pin the document to the house
   near-black, and give the light content sections the explicit white they
   were implicitly borrowing from the canvas so their design is unchanged.
   ========================================================================= */
html,
body {
    background-color: #0b0b0c;
}

section.gap,
.fa-welcome {
    background-color: #ffffff;
}