html {
    position: relative;
    height: 100%;
    scroll-behavior: smooth;
}
body{
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    padding: 0px;
    margin: 0px;
    background-color: #09090b;
    font-size: 16px;
    color: #fafafa;
    line-height: 1.5;
}
a, a:hover{
    color: inherit;
    text-decoration: none;
}

.btn:focus{
    box-shadow: none;
}

.container{
    max-width: 1280px;
    padding-left: 32px;
    padding-right: 32px;
}

/*Header*/
.header{
    background: #0b0809;
    z-index: 9;
    width: 100%;
    padding: 3px 0;
    transition: all 0.2s ease-in-out;
    position: sticky;
    top: 0px;
    left: 0px;
}
.logo{
    width: 227px;
}
.navbar-nav{
    gap: 32px;
}
.nav-link{
    display: block;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-family: "Montserrat", sans-serif;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.nav-item .nav-link.active, 
.nav-item .nav-link:hover{
    color: #d8d3d4;
}
.nav-item{
    padding: 8px 0;
}

#navbar-hamburger.show{
    display: block;
}
#navbar-hamburger, #navbar-close{
    display: none;
}
#navbar-close.show{
    display: block;
}          
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0rem;
}

.drop{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.navbar .nav-item.dropdown{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}
@media (min-width: 993px) {
    .navbar .nav-item.dropdown .dropdown-toggle-split{
        display: none;
    }
}

@media all and (min-width: 1200px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .dropdown-menu{ display: flex; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}

.dropdown-toggle::after{
    display: inline-block;
    margin-left: 10px;
    margin-top: -6px;
    vertical-align: 3px;
    content: "";
    border-top: 0.3em solid !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    display: inline-block;
    padding: 5px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(45deg);
    border-right: 0em solid transparent; 
    border-bottom: 0; 
    border-left: 0em solid transparent;
    display: none;
}
.dropdown-menu{
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0px;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 2px solid #3f3f47;
    border-radius: 0;
    background: #1b1718;
    box-shadow: 0 25px 50px -12px #00000040;
    overflow: hidden;
    align-items: stretch;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.dropdown-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 24px 32px;
    clear: both;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-right: 1px solid #2a2627;
    border-radius: 0px;
    font-family: "Montserrat", sans-serif;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.35px;
    transition: all 0.3s ease-in-out;
}
.dropdown-item img{
    width: 32px;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
    filter: invert(100%);
}
.dropdown-item:focus img, .dropdown-item:hover img, .dropdown-item.active img{
    opacity: 1;
}
.nav-item .nav-link.active.dropdown-toggle::after{  
    border-top: 0.3em solid !important;
    border: solid #d8d3d4 !important;
    border-width: 0 2px 2px 0 !important;
}
.nav-item .nav-link:hover.dropdown-toggle::after{
    border-top: 0.3em solid !important;
    border: solid #d8d3d4 !important;
    border-width: 0 2px 2px 0 !important;
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item.active{
    color: #d8d3d4;
    background-color: #2a2627;
}
.dropdown .dropdown-menu{
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

@media all and (min-width: 1200px) {
.navbar .dropdown-menu-end{ right:0; left: 0; }
.navbar .nav-item .dropdown-menu{ display:flex; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0; }
.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
.navbar .dropdown-menu.fade-up{ top:180%; }
.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%;  }
}

/* close */
.navbar-toggler{
    padding: 0px !important;
    border: 0px;
    display: flex;
}
.menu_toggle{
    width: 23px !important;
    height: 23px;
    padding: 0px;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in;
    text-align: left;
    position: relative;
    right: 0;
    top: 0px;
    z-index: 90;
    border-radius: 3px;
    line-height: 0px;
    align-items: flex-end;
}
.menu_toggle span {
    height: 3px;
    width: 100%;
    background: #FFFFFF;
    display: inline-block;
    transition: all 0.5s cubic-bezier(.62, .43, .35, 1.47);
    margin: 2px 0px;
}

/* toggle icon animation */
#check1:checked~.menu_toggle span:nth-child(1) {
    width: 90%;
    transform: rotate(45deg) translateY(6px) translateX(6px);
}

#check1:checked~.menu_toggle span:nth-child(2) {
    width: 0;
}

#check1:checked~.menu_toggle span:nth-child(3) {
    width: 90%;
    transform: rotate(-45deg) translateY(-4px) translateX(4px);
}
#check1{
    display: none;
}


/*Hero Section*/
.hero-sec{
    min-height: 65vh;
    background-color: #1b1718;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}
.bg-video iframe{
    position: absolute;
}
.bg-overlay{
    background-color: color-mix(in oklab, #000 60%, #00000000);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.hero-sec .content-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.hero-sec .container{
    max-width: 896px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 48px;
}
.hero-title{
    font-family: "Montserrat", sans-serif;
    color: #FFFFFF;
    text-align: center;
    font-size: 72px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -1.8px;
    margin-bottom: 24px;
}
.hero-text{
    color: #FFFFFF;
    text-align: center;
    font-size: 18px;
    line-height: 1.55556;
    margin: 0 auto 40px;
    max-width: 672px;
    width: 100%;
}


/*Bottom Three Box*/
.sec-pad{
    padding: 128px 0;
}
.tb-sec{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0px;
}
.tb-box{
    flex: 1;
    padding: 48px 64px;
    text-align: center;
    border-right: 2px solid #2a2627;
}
.tb-sec .tb-box:last-child{
    border-right: 0px;
}
.tb-box img{
    width: 56px;
    margin: 0 auto 24px;
    opacity: 0.6;
    filter: invert(100%);
}
.sub-title{
    color: #F5F4F4;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.33;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.tb-box .sub-title{
    margin-bottom: 16px;
}
.tb-box p{
    color: #9F9FA9;
    text-align: center;
    line-height: 1.625;
    margin-bottom: 0px;
}


/*Four Feature Box*/
.ffb-sec{
    padding: 64px 0;
    background-color: #2a2627;
}
.ffb-box{
    display: flex;
    gap: 32px;
}
.f-box{
    flex: 1;
}
.f-box img{
    width: 48px;
    opacity: 0.6;
    filter: invert(100%);
}
.f-box p{
    color: #F5F4F4;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.55556; /* 133.333% */
    letter-spacing: 0.9px;
    text-transform: uppercase;
    max-width: 240px;
    margin: 0 auto;
}


/*Our Product Categories*/
.opc-sec{
    background-image: linear-gradient(to right, #ffffff08 1px, #00000000 1px), linear-gradient(#ffffff08 1px, #00000000 1px);
    background-size: 1.5rem 1.5rem;
    background-position: center center;
    background-color: #0b0809;
}
.opc-sec .title{
    margin-bottom: 64px;
}
.opc-box{
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.opc-box .sub-title{
    font-weight: 700;
    margin-bottom: 0px;
    position: relative;
    width: fit-content;
}
.opc-box .sub-title::after{
    content: '';
    width: 24px;
    height: 24px;
    background-image: url(../../img/icons/right-arrow-white.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}
.opc-box:hover .sub-title::after{
    opacity: 1;
    visibility: visible;
    right: -32px;
    transition: all 0.3s ease-in-out;
}
.opc-box p{
    color: #9f9fa9;
    margin-bottom: 0px;
    min-height: 100px;
}


/*Ready To Get Started*/
.bg-off-black{
    background-color: #1b1718;;
}
.container.cust{
    max-width: 896px;
    padding-left: 16px;
    padding-right: 16px;
}
.title{
    color: #f5f4f4;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.11111;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.text1{
    color: #FFFFFF;
    text-align: center;
    font-size: 18px;
    line-height: 1.625;
    margin-bottom: 40px;
}
.btn-theme{
    background-color: #FFFFFF;
    color: #000000;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.42857;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 13px;
    transition: all 0.3s ease-in-out;
}
.btn.btn-theme:hover{
    background-color: #000000;
    color: #FFFFFF;
}


/*Products Page*/
/*Hero Section*/
.inner-hero-sec{
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 110px 0;
}
.inner-hero-sec::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: color-mix(in oklab, #000 50%, transparent);
    position: absolute;
    top: 0;
    left: 0px;
}
.inner-hero-sec .hero-title{
    color: #f5f4f4;
    font-family: "Montserrat", sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.inner-hero-sec .hero-text{
    text-align: center;
    color: #f4f4f5;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0px;
    max-width: 768px;
    width: 100%;
}

/*Products List*/
.sec-pad1{
    padding: 110px 0;
}
.gap-40{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}
.pl-box{
    background-color: #1b1718;
    border: 2px solid #2a2627;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.pl-box:hover{
    border-color: #71717b;
}
.pl-img-box{
    height: 222px;
    border-bottom: 2px solid #2a2627;
    overflow: hidden;
}
.pl-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.pl-content{
    padding: 32px;
}
.pl-content .sub-title{
    font-weight: 700;
    margin-bottom: 16px;
}
.pl-content p{
    color: #9f9fa9;
    margin-bottom: 32px;
}
.btn-view-more{
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d8d3d4;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.42857;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.btn-view-more img{
    width: 18px;
    height: 18px;
    transition: all 0.3s ease-in-out;
}
.pl-box:hover .btn-view-more img{
    transform: translateX(4px);
}

/*Need a Custom Solution?*/
.sec-pad2{
    padding: 96px 0;
}
.black-bg{
    background-color: #000000;
}
.black-bg .text1{
    color: #9f9fa9;
    max-width: 672px;
}
.btn-sec{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.black-bg .btn.btn-theme:hover{
    background-color: #9f9fa9;
    color: #000000;
}


/*About Page*/
/*Our History*/
.gap-64{
    --bs-gutter-x: 64px;
    --bs-gutter-y: 64px;
}
.our-story .title{
    margin-bottom: 64px;
}
.os-content p{
    color: #9f9fa9;
    font-size: 18px;
    line-height: 1.625;
    margin-bottom: 24px;
}
.os-content p:last-child{
    margin-bottom: 0px;
}
.img-br-box{
    padding: 8px;
}/*
.our-story .img-box{
    overflow: hidden;
    height: 384px;
}*/

/*Our Capabilities*/
.our-capabilities{
    background-color: #48484b94;
}
.our-capabilities .title{
    margin-bottom: 64px;
}
.gap-32{
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
}
.oc-box{
    width: 100%;
    height: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.oc-box img{
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1);
}
.oc-box .sub-title{
    font-weight: 700;
    margin-bottom: 0px;
    font-family: "Open Sans", sans-serif;
}
.oc-box p{
    color: #9f9fa9;
    line-height: 1.625;
    margin-bottom: 0px;
}

/*Our Team*/
.title-box{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px;
}
.title-box .title{
    margin-bottom: 0px;
}
.title-box p{
    color: #9f9fa9;
    text-align: center;
    font-size: 18px;
    line-height: 1.625;
    max-width: 768px;
    width: 100%;
}
.ot-box{
    cursor: pointer;
}
.ot-box .img-box{
    padding: 8px;
    background-color: #1b1718;
    border: 4px solid #2a2627;
    margin-bottom: 24px;
    transition: all 0.3s ease-in-out;
}
.ot-box:hover .img-box{
    border-color: #FFFFFF;
}
.ot-box .img-box img{
    width: 100%;
    height: 384px;
    object-fit: cover;
    object-position: center 15%;
}
.ot-box .sub-title{
    font-weight: 700;
    margin: 0 auto 8px;
    font-family: "Open Sans", sans-serif;
    position: relative;
    width: fit-content;
}
.ot-box .sub-title::after{
    content: '';
    width: 0;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
}
.ot-box:hover .sub-title::after{
    width: 100%;
}
.ot-box p{
    color: #9f9fa9;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.7px;
    margin-bottom: 0px;
}
.ot-modal .modal-lg{
    --bs-modal-width: 832px;
    width: 100%;
    padding: 32px;
    margin-left: auto;
    margin-right: auto;
}
.ot-modal .btn-close{
    --bs-btn-close-bg: none;
    background-color: #ffffff;
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55556;
    border: 2px solid #FFFFFF;
    border-radius: 13px;
    opacity: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}
.ot-modal .btn-close:hover{
    background-color: #000000;
    color: #ffffff;
}
.ot-modal .modal-content{
    background-color: #0b0809;
    border: 2px solid #2a2627;
    position: relative;
    border-radius: 0px;
}
.ot-modal .modal-body{
    display: flex;
    align-items: stretch;
    padding: 0px;
}
.ot-modal .modal-body .img-box{
    border-right: 2px solid #2a2627;
    width: 288px;
}
.ot-modal .modal-body .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}
.details-box{
    padding: 40px;
    flex: 1;
}
.position-text{
    color: #9f9fa9;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.33333;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}
.details-box .title{
    text-align: left;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 2px solid #2a2627;
    letter-spacing: -0.9px;
}
.details-box .text-box{
    max-height: 192px;
    overflow-y: auto;
    margin-bottom: 32px;
    padding-right: 8px;
}
.details-box .text-box p{
    color: #9f9fa9;
    line-height: 1.625;
    margin-bottom: 24px;
}
.details-box .text-box p:last-child{
    margin-bottom: 0px;
}
/* Chrome, Edge, Safari */
.text-box::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
.text-box::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 10px;
}
/* Firefox */
.text-box {
    scrollbar-color: #3f3f46 transparent;
}
.details-box .contact-box{
    padding-top: 24px;
    border-top: 2px solid #2a2627;
}
.c-detail-box{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.c-detail-box .position-text{
    color: #52525c;
    margin-bottom: 0px;
    display: flex;
    min-width: 48px;
    margin-top: 2px;
}
.c-detail-box a{
    color: #f5f4f4;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.35px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s ease-in-out;
}
.c-detail-box a:hover{
    opacity: 0.7;
}
.contact-box .c-detail-box:last-child{
    margin-bottom: 0px;
}

/*Careers*/
.co-b-sec{
    max-width: 896px;
    width: 100%;
    margin: 0 auto 48px;
}
.cob-box{
    padding: 40px;
    border: 2px solid #2a2627;
    width: 100%;
    height: 100%;
}
.cob-box .sub-title{
    font-weight: 700;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 2px solid #2a2627;
    font-family: "Open Sans", sans-serif;
}
.cust-ul{
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cust-ul li{
    color: #9f9fa9;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.35px;
}
.cob-box.jtt-box{
    background-color: #18181b;
}
.cob-box.jtt-box .sub-title{
    font-weight: 900;
    padding-bottom: 0px;
    margin-bottom: 32px;
    border-bottom: 0px;
    letter-spacing: 2.4px;
    font-family: "Montserrat", sans-serif;
}
.form-label{
    color: #d8d3d4;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.7px;
    margin-bottom: 12px;
}
.form-control, 
.form-select{
    padding: 16px;
    color: #f5f4f4 !important;
    font-size: 16px;
    background-color: #000000 !important;
    border: 1px solid #2a2627;
    border-radius: 0px;
    transition: all 0.3s ease-in-out;
}
.form-control::placeholder{
    text-transform: uppercase;
    color: #f5f4f4;
    opacity: 0.4;
}
.form-control:focus, 
.form-select:focus{
    box-shadow: none;
    border-color: #71717b;
}
textarea{
    resize: none;
}
.custom-upload input[type="file"]{
    display:none;
}
.upload-box{
    width: 100%;
    padding: 16px 24px;
    background: #000;
    border: 1px solid #2a2627;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.upload-box:hover, 
.upload-box:focus{
    border-color: #71717b;
}
.file-text{
    color: #f5f4f4;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.42857;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    max-width: 100%;
}
.uploaded-file-name{
    margin-top: 8px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1.33333;
    letter-spacing: 0.6px;
    color: #71717b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*Contact Us Page*/
.contact-page{
    background-color: #18181b;
}
.inner-hero-sec.after-none::after{
    display: none;
}
/*Get In Touch*/
.contact-page .title{
    color: #f5f4f4;
    text-align: left;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 3px;
    margin-bottom: 32px;
}
.git-box{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}
.git-box .git-icon{
    margin-top: 4px;
    min-width: 28px;
}
.git-box h3{
    color: #f5f4f4;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.tel-link{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55556;
}
.git-box a{
    color: #9f9fa9;
    transition: all 0.3s ease-in-out;
}
.git-box a:hover{
    color: #FFFFFF;
}
.git-box p{
    color: #71717b;
    font-size: 16px;
    line-height: 1.42857;
    letter-spacing: 0.7px;
    margin-top: 4px;
    margin-bottom: 0px;
}
.git-box .project-category{
    margin-bottom: 4px;
    font-weight: 400;
}
.google-map iframe{
    width: 100%;
}
#map {
            width: 100%;
            height: 450px;
        }

        #map .leaflet-tile {
            filter: grayscale(100%);
        }

        .leaflet-control-zoom a {
            color: #222 !important;
            background: #fff !important;
            border-color: #ccc !important;
        }

        .leaflet-control-zoom {
            border: 1px solid #aaa !important;
            box-shadow: none !important;
        }

        .custom-map-marker {
            background: transparent;
            border: 0;
        }


/*Portfolio Page*/
/*Hero Section*/
.inner-hero-sec.portfolio-bg{
    background-size: 150%;
    background-position: center 80%;
}
/*Counter Number Text*/
.cnt-sec{
    padding: 64px 0;
    background-color: #2a2627;
}
.cnt-box{
    padding: 40px 32px;
    border: 1px solid #52525c;
    height: 100%;
    width: 100%;
        align-items: center;
    display: flex;
    justify-content: center;
}
.counter-number{
    color: #f5f4f4;
    margin-bottom: 0px;
    text-transform: none;
    letter-spacing: 0px;
}
.counter-title{
    color: #9f9fa9;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 1.4px;
    margin-bottom: 0px;
}

/*Recent Projects*/
.rp-img-box{
    background-color: #1b1718;
    width: 100%;
    height: 256px;
    background-size: cover;
    background-position: center;
    margin-bottom: 24px;
}
.project-category{
    color: #71717b;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    letter-spacing: .1em;
    margin-bottom: 8px;
}
.rp-box .sub-title{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    margin-bottom: 12px;
}
.pd-box{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #71717b;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
}
.pd-box img{
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.rp-text{
    color: #9f9fa9;
    line-height: 1.625;
    margin-top: 20px;
    margin-bottom: 0px;
}

/*Client Testimonials*/
.testimonials .title{
    margin-bottom: 64px;
}
.testimonials-box{
    text-align: center;
    padding: 48px;
    border-right: 2px solid #2a2627;
    width: 100%;
    height: 100%;
}
.qoute{
    font-family: serif;
    color: #3f3f47;
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}
.review-text{
    color: #9f9fa9;
    font-size: 18px;
    line-height: 1.625;
    margin-bottom: 32px;
}
.client-name{
    color: #f5f4f4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.client-place{
    color: #71717b;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.7px;
    margin-bottom: 0px;
}


/*Grocery Page*/
.inner-hero-sec.pl-hero{
    background-color: #1b1718;
}
.inner-hero-sec.pl-hero::after{
    display: none;
}
.inner-hero-sec.pl-hero .hero-title{
    text-align: left;
}
.inner-hero-sec.pl-hero .hero-text{
    text-align: left;
    margin-left: 0px;
}
.css-sec .title{
    margin-bottom: 32px;
}
.css-sec p{
    color: #9f9fa9;
    font-size: 18px;
    line-height: 1.625;
    margin-bottom: 32px;
}
.css-ul{
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.css-ul li{
    color: #d8d3d4;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.35px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.css-ul li::before{
    content: '';
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    background-image: url(../../img/icons/checked-circle.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -2px;
}
.product__carousel{
    background-color: #09090b;
    border: 2px solid #2a2627;
}
/* MAIN SLIDER */
.gallery-top{
    height: 320px;
    background: #ffffff;
    overflow: hidden;
}
.gallery-top .swiper-slide{
    display:flex;
    align-items:center;
    justify-content:center;
}
.gallery-top .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;

    /* REMOVE ZOOM */
    transform:none !important;
    transition:none !important;
}
/* PRODUCT NAME */
.product-name{
    border-top: 2px solid #2a2627;
    color: #e7e3e4;
    padding: 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.33333;
    letter-spacing: 1.2px;
    padding: 12px 16px;
}
/* THUMBNAILS */
.gallery-thumbs{
    background-color: #2a2627;
    border-top: 2px solid #2a2627;
    height: 80px;
}
.gallery-thumbs .swiper-wrapper{
    width:max-content !important;
}
.gallery-thumbs .swiper-slide{
    background-color: #FFFFFF;
    height: 100%;
    cursor: pointer;
    border: 0px !important;
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    position: relative;
}
.gallery-thumbs .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.gallery-thumbs .swiper-slide-thumb-active{
    border-color:#fff;
    opacity:1;
}
.gallery-thumbs .swiper-slide-thumb-active::after{
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #000000;
    position: absolute;
    top: 0;
    left: 0;
}
/* ARROWS */
.swiper-button-next,
.swiper-button-prev{
    width: 46px;
    height: 68px;
    background: #000000;
    color: #fff;
    border: 2px solid #3f3f47;
    transition: all 0.3s ease-in-out;
    opacity: 0 !important;
}
.swiper-container:hover .swiper-button-prev, 
.swiper-container:hover .swiper-button-next{
    opacity: 1 !important;
}
.swiper-container:hover .swiper-button-prev.swiper-button-disabled, 
.swiper-container:hover .swiper-button-next.swiper-button-disabled{
    opacity: 0.35 !important;
}
.swiper-button-prev{
    left: -2px;
}
.swiper-button-next{
    right: -2px;
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
    background-color: #2a2627;
}
.swiper-button-next:after,
.swiper-button-prev:after{
    font-size: 12px;
    font-weight: bold;
    line-height: normal;
}
.wcos-sec{
    padding: 48px;
    background-color: #000;
    border: 2px solid #2a2627;
}
.wcos-sec .title2{
    margin-bottom: 40px;
}
.wcos-box{
    padding: 32px;
    width: 100%;
    height: 100%;
    background-color: #1b1718;
    border: 1px solid #2a2627;
}
.sub-title2{
    color: #f5f4f4;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
    letter-spacing: 1px;
}
.wcos-box .sub-title2{
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid #2a2627;
}
.wcos-box p{
    color: #9f9fa9;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 0.35px;
    margin-bottom: 0px;
}
.ready-to-box{
    padding: 75px 64px;
    background-color: #1b1718;
    border: 2px solid #2a2627;
}
.title2{
    font-family: "Montserrat", sans-serif;
    color: #f5f4f4;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 3px;
}
.ready-to-box .title2{
    margin-bottom: 32px;
}


/*Tobacco Features Section*/
.tfs-box{
    padding: 32px;
    background-color: #1b1718;
    border: 2px solid #2a2627;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
}
.tfs-box:hover{
    border-color: #71717b;
}
.tfs-box .sub-title{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    margin-bottom: 16px;
}
.tfs-box p{
    color: #9f9fa9;
    line-height: 1.625;
    margin-bottom: 0px;
}

.cust-height{
    height: 384px;
    background-color: #1b1718;
    border: 1px solid #c0c0c0;
}
.ready-to-box p{
    color: #9f9fa9;
    text-align: center;
    line-height: 1.55556;
    margin-bottom: 40px;
    max-width: 672px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mc-box .sub-title2{
    color: #d8d3d4;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 2px solid #2a2627;
}
.ocmp-box{
    padding: 32px;
    background-color: #1b1718;
    border: 2px solid #2a2627;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
}
.ocmp-box:hover{
    border-color: #71717b;
}
.ocmp-box .icon-box{
    margin: 0 auto 24px;
}
.ocmp-box .sub-title{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    margin-bottom: 16px;
}
.ocmp-box p{
    color: #9f9fa9;
    margin-bottom: 0px;
}

.bg-zinc-800{
    background-color: #2a2627;
}
.tb-sec.dc-page .tb-box{
    padding: 40px;
}
.tb-sec.dc-page .tb-box .sub-title{
    font-weight: 700;
}
.fd-box{
    padding: 20px 24px;
    background-color: #1b1718;
    border: 1px solid #3f3f47;
    width: 100%;
    height: 100%;
}
.fd-box .sub-title{
    color: #f5f4f4;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: .025em;
    margin-bottom: 4px;
}
.fd-box p{
    color: #71717b;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.33333;
    letter-spacing: .05em;
    margin-bottom: 0px;
}
.way-to-buy-box{
    padding: 48px;
    background-color: #1b1718;
    border: 2px solid #2a2627;
}
.wtb-box{
    padding: 32px;
    background-color: #0b0809;
    border: 2px solid #3f3f47;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.wtb-box .sub-title{
    text-align: center;
    font-weight: 700;
    margin-bottom: 0px;
}
.wtb-box .btn-theme:hover{
    background-color: #1b1718;
}
.wtb-box .btn-theme{
    word-break: break-all;
}

/* Image Carousel */
#tobaccoCarousel{
    position:relative;
    padding: 8px;
}
.carousel-img{
    background-color:#1b1718;
    height:800px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow: hidden;
    position: relative;
}
.carousel-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 90%;
}

/* Arrows */
#tobaccoCarousel .custom-arrow{
    width:44px;
    height:44px;
    background:color-mix(in oklab, #000 60%, #00000000);
    top:50%;
    transform:translateY(-50%);
    opacity:1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
#tobaccoCarousel .carousel-control-prev{
    left:16px;
}
#tobaccoCarousel .carousel-control-next{
    right:16px;
}
#tobaccoCarousel .custom-arrow:hover{
    background:#000;
}

/* Indicators */
#tobaccoCarousel .custom-indicators{
    bottom:16px;
    margin-bottom:0;
    display: flex;
    align-items: center;
    gap: 8px;
}
#tobaccoCarousel .custom-indicators button{
    width: 8px !important;
    height: 8px !important;
    border-radius:50%;
    background:color-mix(in oklab, #fff 50%, #00000000) !important;
    margin:0 !important;
    border: 0px;
    opacity:1;
    box-shadow: #00000080 0px 0px 0px 1.5px, #00000066 0px 1px 3px;
    transition: all 0.3s ease-in-out;
}
#tobaccoCarousel .custom-indicators .active{
    background:#fff !important;
}



























/*Footer*/
.footer{
    background-color: #000000;
    padding: 64px 0;
}
.s-footer{
    padding-top: 32px;
    margin-top: 64px;
    border-top: 2px solid #1b1718;
}
.copyright-text{
    color: #71717b;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.42857;
    letter-spacing: 1.4px;
}
.p-footer{
    display: flex;
    gap: 48px;
}
.p-footer .logo-box, 
.p-footer .product-box, 
.p-footer .complany-box, 
.p-footer .contact-box{
    flex: 1;
}
.f-logo{
    width: 117px;
    margin-bottom: 24px;
}
.f-text{
    color: #9f9fa9;
    margin-bottom: 0;
}
.f-title{
    color: #f5f4f4;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.8px;
    margin-bottom: 24px;
}
.f-ul{
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
    display: flex;  
    flex-direction: column;
    gap: 12px;
}
.f-ul a{
    color: #9f9fa9;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    transition: all 0.3s ease-in-out;
}
.f-ul a:hover{
    color: #FFFFFF;
}

.montserrat{
    font-family: "Montserrat", sans-serif;
}

.text-grey{
    color: #9f9fa9 !important;
}

.z-1{
    position: relative;
    z-index: 1;
}
.z-2{
    position: relative;
    z-index: 2;
}