.custom_anchor_banner{display: flex; margin:0; padding: 0;}

body{background: #1a1a1a;}

body, input, select, textarea {
    color: rgb(255 255 255 / 75%);}

p, ul li {
    margin: 0 0 1em 0;
    font-size: 0.85em;
}

#sidebar  {
	background-color: #000;
}

#header{padding: 15px; align-items: center; background-color: #cd1c18;}

.header_logo{display: table;
    width: 100px; border-bottom: 0;
    margin-bottom: 0px;
    clear: both;
    height: auto;}

.header_logo img{display: table; width: 100%;}

.logo{display: table;
    width: 100%;
    margin-bottom: 20px;
    clear: both;
    height: auto;}
.logo img{display: table; width: 150px; margin: 0; float: right;}

#sidebar nav a:before {
    background: #393939;
}

#sidebar nav a:after{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cd1c18+1,fc5c00+100 */
background: linear-gradient(to right,  rgba(205,28,24,1) 1%,rgba(252,92,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.bg_text_1{background:url(../../images/bg_text_1.jpg) no-repeat center center; background-size: cover;}

#sidebar{background: url(../../images/side_bar_bg.jpg) repeat-y right top; background-size: contain;}


/* Mobile Menu Styles */
#mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    width: 30px;
    height: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
}

#mobile-menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

#mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

#mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

#mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
        background: rgb(64 3 1 / 95%);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.mobile-logo {
    margin-bottom: 2em;
}

.mobile-logo img {
    max-width: 150px;
    height: auto;
}

#mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobile-menu nav ul li {
    margin: 1.5em 0;
}

#mobile-menu nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 300;
    transition: color 0.3s ease;
}

#mobile-menu nav ul li a:hover {
    color: #9bf1ff;
}

/* Show mobile menu only on small screens */
@media screen and (max-width: 736px) {
    #mobile-menu-toggle {
        display: flex;
    }
    
    #mobile-menu {
        display: block;
    }
}



.wrapper.style2 {
    background-color: #1b1b1b;
}

.wrapper.style3 {
    background-color: #000000;
}

.product_video_bg{background-color: #000000;}

.product_video{
    width: 100%; height: 100%; object-fit: cover; z-index: -1;
        max-width: 300px;
    margin: 0 auto;
    display: flex;
    padding: 40px 0px;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.reverse-video {
    transform: scaleX(-1) scaleY(-1);
}

.icon_feature{background-color: #ffffff; border-radius: 100px; width: 60px; height: 60px; padding: 10px;}
.icon_feature img{display: table; width: 100%;}

.why_bg{background:url(../../images/why_bg.jpg) no-repeat center center; background-size: cover;}


.spotlights > section > .image:before{    background: rgb(73 37 37 / 90%);}

#footer{background: url(../../images/footer.jpg) no-repeat center center; background-size: cover;}
#footer .inner{
        padding: 1em 5em 1em 5em;
}
#footer .inner ul{margin-bottom: 0!important;}

#intro{background-image: none!important;}


.features_banner{position: fixed; bottom: 0; margin: 0; z-index: 1;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.7+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 border:none; width: calc(100% - 312px);}
.features_banner section{padding: 20px 20px 0px; margin: 0px; width: 100%; text-align: center;    display: flex; justify-content: center;}
.features_banner section img{width: 100%;
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}
.features_banner h3{font-size: 0.9em;}


/* Disable scrolling when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.product_features_set{display: flex; flex-direction: row; list-style: none; gap: 20px; margin-left: 0; padding-left: 0;
    justify-content: center;
    flex-wrap: wrap;}
.product_features_set li{width: 31%; font-size: 0.8em; padding-left: 0; margin-bottom: 15px;}

.product_features_set li strong{display: block; width: 100%;}

.product_feature_img{display: table; width: 150px; margin-bottom: 15px;}

.news_events .uniform img{border-radius: 20px; display: table ; width: 100%;}
.news_events .uniform h4{margin: 15px 0 0px;}
.news_events .uniform h5{font-size: 0.8em; font-weight: 100; color: #ccc;}

@media (min-width:1025px){
    .mobile_logo_only{display: none;}
}

@media (max-width:1180px){
    .mobile_logo_only{display: block; width: 100px; margin-bottom: 15px;}
    .features_banner{width: 100%;}
}

@media (max-width:500px){
    #intro{height: 100vh;}
    .icon_feature{margin-bottom: 15px;}
   
    .product_video {padding: 40px 0px 0; max-width: 200px;}
    #footer .inner{padding: 2em 5em 2em 2em;}
.features_banner{width: 100%;}

.product_features_set li {
    width: calc(50% - 10px);
    font-size: 0.8em;
    padding-left: 0;
    margin-bottom: 15px;
}

p, ul li {
    margin: 0 0 1em 0;
    font-size: 1em;
}

.\34 u, .\34 u\24{width: 50%;}

}

@media (max-width:1180px){
   #sidebar{display: none;}
}

@media (min-width:768px){
    .features section .icon{
    left: 2em;
}
.features section {
    padding: 2em 3em 1em 7em;
}
}

.modal-body img{display: table; width: 100%; max-width: 500px; margin: 0 auto;}
.modal-content{background: #262626;}
.btn-close{background: #ffffff var(--bs-btn-close-bg) center / 1em auto no-repeat;}