*{padding:0px; margin:0px;}
body{font-family: 'Aileron';font-weight: normal;font-style: normal;}
		
.clb{clear:both;}
.padd-0{padding:0px !important;}
.top-10{ margin-top:10px;}
.top-15{ margin-top:15px;}
.top-20{ margin-top:20px;}
.top-30{ margin-top:30px;}
.bottom-10{margin-bottom:10px;}
.fl{float:left;}
.fr{float:right;}
.text-left{text-align:left!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}
.pad-top-25{ padding-top:18px;}
.border-0{border:0px!important;}
.center-block{ margin:0 auto; float:none;}
.border-red{border:1px solid red;}
.border-blue{border:1px solid blue;}



/*===============================================*/
.navbar{padding:16px 5px;}
.navbar-expand-lg .navbar-nav .nav-link {font-size:18px; color:#FFF;font-family: 'Aileron'; font-weight: 300; font-style: normal; text-transform:uppercase;}
.navbar-expand-lg .navbar-nav .nav-link:hover{color:#e82429;}

.bg-light{background-color:rgba(255, 255, 255, 10)!important;}
#navbar.scrolled {background-color: rgba(0, 0, 0, 0.9);padding: 16px 5px;}
.logo{height: 86px;margin-top: -12px;}
.bar{height:22px;margin-top: 22px;}

.carousel-control-next-icon{background-image:none;font-size: 35px;}
.carousel-control-prev-icon{background-image:none;font-size: 35px;}

/*==============*/
.banner-section{padding:0px;}
/*==============*/

.secion-a{padding-top:2rem; padding-bottom:1rem;}

.secion-a-text-bor-r{border-right:1px solid #e82429;}
.secion-a-text{padding:0px;}
.secion-a-text h1{font-size:40px; color:#FFF; text-align:right; font-family: 'Aileron'; font-weight: 300; font-style: normal; background:#e82429;padding:10px 5px; text-transform:uppercase; margin-bottom:2rem;}

.secion-a-text-2{padding:0px;}
.secion-a-text-2 h2{font-size:40px; color:#000; text-align:left; font-family: 'Aileron'; font-weight: 300; font-style: normal; padding:10px 2px; text-transform:uppercase; margin-bottom:2rem;}

.about-text{margin-left: 22%; padding-right: 25px;}
.about-text p{position:relative; font-size:18px;color:#000; text-align:left; font-family: 'Aileron'; font-weight: 300; font-style: normal;z-index: 9;}

.about-img{margin-top: -24rem;position: relative;}
.black-box{background:#000; padding-top:17rem; padding-bottom:33rem;margin-top: -13rem;}
.black-box-txt-container{margin-top: -26rem;position: relative;z-index: 99;}
.black-box-txt p{font-size:40px; color:#FFF; text-align:left; font-family: 'Aileron'; font-weight: 300; font-style: normal; line-height: 46px; margin-bottom:3px;}
.black-box-txt h3{font-size: 40px;color: #FFF;text-align: left;font-family: 'Aileron';font-weight: 300;font-style: normal;background: #e82429; text-transform: uppercase;}
.black-box-txt h3 span{background:#1d1d1d;color:#FFF; border:1px solid #1d1d1d;}

.about-img-2{margin-top:-23.6rem; position: relative;}


.secion-b{padding-top:2rem; padding-bottom:1rem;}

.section-black-box{background:#000;padding-top: 20rem; padding-bottom: 36rem;margin-top: -10rem;}
.section-black-box-outer{padding:0px;}
.secion-a-text-bor-r-2{position:relative;margin-top: -7rem;}
.secion-a-text-bor-r-2 h1{font-size:40px; color:#FFF; text-align:right; font-family: 'Aileron'; font-weight: 300; font-style: normal; background:#e82429;padding:10px 5px; text-transform:uppercase; margin-bottom:2rem;}

.client-img-container{margin:-41rem auto 0px auto;}
.clients-section{padding-top:2rem; padding-bottom:0rem;}

.section-product{background:#6b6b6b; height:5rem;margin-top: 3rem;}
.section-product-2{padding-top:2rem; padding-bottom:2rem;margin-top: -25rem;}
.section-product-2-inner{margin-top: -6rem;border-right: 1px solid #e82429; padding-bottom: 1rem;padding-right: 0px;position: relative;top: -3rem;}
.section-product-2-inner h1 {font-size: 40px;color: #FFF;text-align: left;font-family: 'Aileron';font-weight: 300;font-style: normal;background: #e82429; padding: 10px 5px; text-transform: uppercase;margin-bottom: 2rem;}

.section-products-carousel{padding-top:2rem; padding-bottom:2rem;}

.section-bottom{background:url(../images/banner-bottom.webp);padding-top:10rem;padding-bottom:20rem;  justify-content: center;align-items: center;background-repeat:no-repeat;background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.section-bottom h1{color:#000; font-size:40px;font-family: 'Aileron'; font-weight: 300; font-style: normal;padding-left: 14rem;}
.section-bottom h2{font-size:47px; color:#FFF; text-align:left; font-family: 'Aileron'; font-weight: 300; font-style: normal; background:#000;padding:10px 5px 10px 14rem; text-transform:uppercase; margin-bottom:2rem;}

.footer{background:#000;padding-top:2rem; padding-bottom:2rem;}
.footer p{font-size:16px; color:#FFF;font-family: 'Aileron'; font-weight: 300; font-style: normal;margin-bottom: 0px;}
.footer p i{color:#e72229;}
.footer p a{color:#FFF; text-decoration:none;}
.footer p a:hover{color:#e72229; text-decoration:underline;}

/*===============box background image=================*/
.image-column {min-height: 800px; border: 0px solid #dc3545 !important; border-radius: 0px;  background-size: cover;
            background-position: center; position: relative; overflow: hidden; transition: transform 0.3s ease; }
        
.image-column:hover {transform: translateY(-5px);}
.image-column::before {content: ''; position: absolute;top: 0;left: 0;right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)); }
.column-content {position: relative;z-index: 2;height: 100%;display: flex;flex-direction: column;justify-content: center; align-items: center;
            padding: 20px; color: white; text-align: left;}
.column-title {font-size: 28px;font-family: 'Aileron';font-weight: 300;font-style: normal;  margin-bottom: 5rem;min-height: 88px;}
.column-text {font-size: 15px;font-family: 'Aileron';font-weight: 300;font-style: normal;}
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .image-column {
                min-height: 250px;
                margin-bottom: 15px;
            }
        }
		
/*==============OWL===============*/
.client-logo {border-radius: 10px;  display: flex; align-items: center;justify-content: center;transition: all 0.3s ease; margin: 10px;}
.client-logo:hover {transform: translateY(-5px);}
.client-logo img {width: 100%!important; transition: all 0.3s ease;}
.owl-theme .owl-nav.disabled + .owl-dots {display:none;}      
        
.custom-nav { position:relative; top: -7rem;left: 0;right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none;  z-index: 10;}
.custom-nav button {width: 50px;height: 50px; border-radius: 50%;background: white; border: 2px solid #000;color: #000; font-size: 20px;
            display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.custom-nav button:hover {background: #000;color: white;transform: scale(1.1);  }
.custom-nav button:disabled { opacity: 0.5;cursor: not-allowed; background: #f8f9fa;border-color: #ccc; color: #ccc; transform: none; box-shadow: 0 4px 8px rgba(0,0,0,0.05);}
.custom-nav button:disabled:hover {background: #f8f9fa;transform: none;}
.nav-inside-container {display: flex;justify-content: center;align-items: center; gap: 30px; margin-top: 40px;}        
.nav-inside-container button {width: 60px;height: 60px; border-radius: 50%;background: white; border: 2px solid #007bff;color: #007bff;font-size: 24px;display: flex;align-items: center;justify-content: center; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.nav-inside-container button:hover {background: #007bff;color: white;transform: scale(1.1);}

/* Image Arrow Navigation */
.image-nav {display: flex;justify-content: center;align-items: center;gap: 40px;margin-top: 40px;}
.image-nav-btn {width: 70px;height: 70px;border: none;background: transparent;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;}
.image-nav-btn img {width: 100%;height: 100%;object-fit: contain;filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));transition: all 0.3s ease;}
.image-nav-btn:hover img {transform: scale(1.2); filter: drop-shadow(0 6px 10px rgba(0,123,255,0.3));}
.image-nav-btn:disabled {opacity: 0.3;cursor: not-allowed;}
.image-nav-btn:disabled:hover img {transform: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));}
/* Owl Carousel Dots */
.owl-dots {margin-top: 30px;text-align: center;}
.owl-dot {width: 12px;height: 12px;border-radius: 50%;background: #ddd !important;margin: 0 5px;display: inline-block;}
.owl-dot.active {background: #007bff !important;}
        
/* Responsive Adjustments */
 @media (max-width: 1200px) {
.custom-nav button {width: 45px;height: 45px;font-size: 18px;}
        }
        
@media (max-width: 768px) {
.clients-section {padding: 50px 0;}
.section-title h2 {font-size: 2rem;}
.client-logo {height: 120px;padding: 20px 15px;}
.custom-nav {position: relative;top: auto; left: auto; right: auto;transform: none; justify-content: center; gap: 20px; margin-top: 30px;}
.custom-nav button {position: static;transform: none;width: 50px;height: 50px;}
.image-nav {gap: 30px;}
.image-nav-btn {width: 60px;height: 60px;}
        }
        
 @media (max-width: 576px) {
.section-title h2 {font-size: 1.75rem;}
.client-logo {height: 100px;}
.custom-nav button {width: 45px;height: 45px;font-size: 16px;}
.image-nav-btn {width: 50px; height: 50px;}

}
	
/*============Vertical carousel==============*/
.scaffolding-section {padding: 80px 0; background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);}
.product-image-wrapper {padding-right: 20px;}
.product-image-wrapper img {width: 100%;/*height: 400px;*/object-fit: contain; border-radius: 10px; background: white; padding: 20px;}

/* Product Info */
.product-info-wrapper {padding: 0 30px; height: 400px;display: flex; align-items: center;}
.product-info {display: none;animation: fadeInUp 0.5s ease;}
.product-info.active {display: block;}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-name {font-family: 'Aileron'; font-weight: normal; font-style: normal; color: #222; font-size: 28px;margin-bottom: 20px;line-height: 1.3;}
.product-description {color: #555;font-size: 16px;line-height: 1.7; margin-bottom: 25px;font-family: 'Aileron';font-weight: normal;font-style: normal;}
.product-specs {background: #f8f9fa;border-radius: 10px; padding: 20px;}
.spec-item {font-family: 'Aileron'; font-weight: normal; font-style: normal; display: flex;align-items: center;margin-bottom: 15px;color: #444;font-size: 15px;}
.spec-item:last-child {margin-bottom: 0;}
.spec-item i {font-size: 18px; width: 24px;}
.icon-fa{color:#000;}

/* VERTICAL DOTS NAVIGATION */

.vertical-nav-wrapper {padding-left: 30px;height: 400px;display: flex;align-items: center;}
.vertical-dots-nav {display: flex;flex-direction: column;gap: 25px;position: relative;}
.vertical-dots-nav::before {content: '';position: absolute;left: 4px;top: 0;bottom: 0;width: 2px;background: #dee2e6; z-index: 1;}

/* Dot Item */
.nav-dot-item {display: flex;align-items: center; cursor: pointer;position: relative;z-index: 2;transition: all 0.3s ease;padding: 1px 0;}
.nav-dot-item:hover {transform: translateX(5px);}
.nav-dot-item.active {
    /*transform: translateX(5px);*/
}

/* Dot Indicator */
.dot-indicator { width: 10px;height: 10px;border-radius: 50%;background: #e72229;border: 3px solid white;box-shadow: 0 0 0 2px #adb5bd;transition: all 0.3s ease; flex-shrink: 0; position: relative; z-index: 3;}
.nav-dot-item.active .dot-indicator {background: #e72229;box-shadow: 0 0 0 2px #e72229;transform: scale(1.3);}
.nav-dot-item:hover .dot-indicator {background: #e72229; box-shadow: 0 0 0 2px #007bff;}
.dot-label {position: absolute; left: 30px;top: 50%; transform: translateY(-50%); background: #e72229; color: white; padding: 8px 15px; border-radius: 6px;font-size: 13px;font-weight: 600; white-space: nowrap; opacity: 0;
    visibility: hidden;transition: all 0.3s ease; pointer-events: none;  z-index: 100; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}


.dot-label::before {
    content: '';
    position: absolute; left: -6px; top: 50%;transform: translateY(-50%); border-right: 6px solid #e72229; border-top: 6px solid transparent; border-bottom: 6px solid transparent;}


.nav-dot-item:hover .dot-label {opacity: 1;visibility: visible;left: 35px;}
.nav-dot-item.active .dot-label {background: #e72229; opacity: 1; visibility: visible; left: 35px;}
.nav-dot-item.active .dot-label::before {border-right-color: #e72229;}

/* RESPONSIVE DESIGN */

/* Large Devices (≥992px) */
@media (min-width: 992px) {
    .vertical-nav-wrapper {padding-left: 40px;}    
    .product-info-wrapper {padding: 0 40px;}
}

/* Medium Devices (768px - 991px) */
@media (max-width: 991.98px) {
.scaffolding-section {padding: 60px 0;}    
.product-image-wrapper {padding-right: 0;margin-bottom: 40px;}
.product-image-wrapper img {height: 350px;}
.product-info-wrapper {height: auto;padding: 40px 30px;margin-bottom: 40px;border-left: none;border-right: none;border-bottom: 2px solid #eaeaea;}
.vertical-nav-wrapper {height: auto;padding-left: 0;justify-content: center;}
.vertical-dots-nav {flex-direction: row; flex-wrap: wrap; gap: 20px;    justify-content: center;}
.vertical-dots-nav::before {display: none;}
.nav-dot-item {flex-direction: column;text-align: center; padding: 10px;}
.dot-label {position: static;opacity: 1;visibility: visible;background: transparent;color: #666; padding: 5px 0 0 0; font-size: 12px; font-weight: 500; white-space: normal;
        box-shadow: none; transform: none;text-align: center;margin-top: 8px;}
    
.dot-label::before {display: none;}
    
    .nav-dot-item:hover .dot-label,
    .nav-dot-item.active .dot-label {
        background: transparent; color: #007bff;left: 0;
    }
    
.nav-dot-item:hover {transform: translateY(-5px);}
.nav-dot-item.active {transform: translateY(-5px);}
    
    .nav-dot-item.active .dot-label {
        color: #e72229;
        font-weight: 600;
    }
}

/* Small Devices (576px - 767px) */
@media (max-width: 767.98px) {
.product-image-wrapper img {height: 300px;}
.product-name {font-size: 24px;}
.product-description {font-size: 15px;}
.vertical-dots-nav {gap: 15px;}
.nav-dot-item {min-width: 100px;}
.dot-label {font-size: 11px;padding-top: 3px;}
}


@media (max-width: 575.98px) {
	
.scaffolding-section {padding: 40px 0;}    
.product-image-wrapper img {height: 300px; padding: 15px;}
.product-info-wrapper {padding: 30px 20px;}
.product-name {font-size: 22px;}
.product-specs {padding: 15px;}
.spec-item {font-size: 14px;}
.vertical-dots-nav {gap: 10px;}
.nav-dot-item {min-width: 85px; padding: 8px 5px;}
.dot-indicator {width: 8px; height: 8px;}
.dot-label {font-size: 10px;}

}

/* Touch Devices - Show labels on tap */
@media (hover: none) and (pointer: coarse) {
.dot-label {opacity: 1; visibility: visible; position: static;background: transparent;color: #666;padding: 5px 0 0 0;box-shadow: none;}
.dot-label::before {display: none;}
    
    .nav-dot-item:hover .dot-label,
    .nav-dot-item.active .dot-label {background: transparent;color: #007bff;}
}


/*======Modal=============*/
label {color: #FFF; margin-bottom:10px;}
.modal-body {background-color:#000;}
.modal-header {background: #000; border-color:#2d2d2d;}
.modal-title {font-size:22px;font-family: 'Gotham';font-weight: 500;font-style: normal;color:#FFF;}
.btn-close i{color:#FFF;}
.form-control-mod {border:1px solid #636464; background:#FFF;}
.btn-submit-2{font-size:17px; background:#e7262b; color:#FFF;border:1px solid #e7262b; text-transform:uppercase;border-radius:0; padding:8px 20px; font-family: 'Argentum Sans';font-weight: 300; font-style: normal;}
.btn-submit-2:hover{background:#e7262b; color:#000; border:1px solid #e7262b;}
sup{color:#FF0000;}


	
		
/*=============================*/

::-webkit-input-placeholder { /* Edge */
  color:  #000 !important; font-family: 'Gotham';font-weight: normal;font-style: normal;}

:-ms-input-placeholder {color:#000 !important; font-family: 'Gotham';font-weight: normal;font-style: normal;}

::placeholder {color: #000 !important;font-family: 'Gotham';font-weight: normal;font-style: normal;}
input:focus {outline: none!important; background:#FFF!important; color:#000!important;  border-color: #000!important;}
*:focus {
    outline: none;
}




.visi-desk{display:block!important;}
.visi-mob{display:none!important;}
/*============================================*/

@media (max-width:463px){ 

.visi-desk{display:none!important;}
.visi-mob{display:block!important;}
.top-30 {margin-top: 7px;}
.logo{ height: 64px;}
.navbar-bg-2{background:#000;}
.banner-section {padding: 0px; margin-top: 73px;}
.navbar-toggler {color:#FFF;}

.secion-a {padding-top: 1rem;padding-bottom: 0rem;}
.secion-a-text h1{font-size: 22px;}
.secion-a-text-2 h2{font-size: 22px;}
.about-text {margin-left: 2%;padding-right: 20px;}
.about-text p {font-size: 15px;line-height: 28px;}
.about-img {margin-top: 0px;}

.black-box-txt-container{margin-top: -9rem;}
.black-box-txt p{font-size:25px; line-height: 34px; padding: 1px 25px;}
.black-box-txt h3{font-size: 25px;}
.mob-black-box-txt {margin-left: 25px;}
.about-img-2 {margin-top: -6.6rem;}

.black-box {background: #000;padding-top: 5rem;padding-bottom: 8rem; margin-top:0px;}
.column-title {font-size: 24px;margin-bottom: 5rem; min-height: 14px;}

.client-img-container {margin:-16rem auto 0px auto;}
.secion-a-text-bor-r-2 {margin-top: -1rem;}
.secion-a-text-bor-r-2 h1{font-size: 22px;}
.section-black-box {padding-top: 14rem; padding-bottom: 7rem; margin-top: -8rem;}

.section-product { margin-top: 2rem; height: 24rem;}
.section-product-2-inner{margin-top: -4rem;top: 0rem;}
.section-product-2-inner h1{font-size: 22px;}
.section-product-2{padding-top: 2rem;padding-bottom: 2rem; margin-top: -28rem;}

.section-products-carousel {padding-top: 0rem;padding-bottom: 0rem;}
.vertical-nav-wrapper{position: relative;top: -41rem;}
.product-image-wrapper{position: relative;top: 19rem;}
.product-info-wrapper{position: relative;top: 13rem;}

.section-bottom{background:url(../images/mob-banner-bottom.webp) no-repeat;padding-top: 7rem;padding-bottom: 4rem;}
.section-bottom h1{font-size: 18px;padding-left: 1rem; font-weight: normal;}
.section-bottom h2 {font-size: 19px;padding-left: 1rem;}
.footer p {font-size: 15px;margin-top: 22px;}
}