@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body { margin: 0; padding: 0; font-family: "Nunito Sans", sans-serif; overflow-x: hidden; color: #555555}
p, li{color: #555555;font-size: 16px;font-weight: 500;line-height: 27px;margin: 0 0 15px 0;font-family: "Nunito Sans", sans-serif;letter-spacing: .3px;}
.main-table li {color: #555555; font-size: 15px;line-height: 25px;margin: 0 0 10px 0; font-family: "Nunito Sans", sans-serif;}
a { text-decoration: none !important; font-family: "Nunito Sans", sans-serif;}
h3, h4, h5, h6 { font-family: "Nunito Sans", sans-serif; color: #555555}
h1, h2 { font-family: "Archivo Black", sans-serif;}

.main-table {text-align: left;}

#widgetsControl_C, #widgetsControl{ height: auto !important;}
#Div_body .container-fluid { margin: 0; padding: 0;}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #5c5c5c;font-size: 15px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;font-family: "Roboto Mono", monospace;}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {background: #fff!important;height: 100%;margin: 0 2% 0 0;}
.navbar-nav.nav-fill > li:last-child{margin: 0 -9px;padding: 0 5px !important;background-color: rgb(215 32 40);}
.navbar-nav.nav-fill > li:last-child a { color: #fff !important}

#HomepagecontentControl_C { margin-top: -21px}

#HeaderControl, #HeaderControl_C { height: 120px !important;}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter,
#HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl_C .bg-light {--bs-bg-opacity: 1;/* background-color: transparent !important; */height: 100%;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}

#HeaderControl, #HeaderControl_C, #MenuControl, #MenuControl_C {height:90px !important;}

center #form1 #HeaderControl{/* background: #f9f7f4; */position: relative}
center #form1 #MenuControl{background: #f9f7f4 !important;}
center #form1 #MenuControl .nav-link {color: #555555;text-shadow: none !important;}

@media (min-width: 320px) and (max-width: 768px ){ 
  .navbar-toggler { position: absolute; right: 15px; top: -60px; background: #fff}
  #HeaderControl, #HeaderControl_C {background: #f3f3f3;}
  .navbar-collapse {background: #dfdfdf;margin-top: -8px;}
  #MenuControl, #MenuControl_C { height: 0 !important}
}
#HeaderControl_C, #MenuControl_C {/* box-shadow: rgb(17 17 26 / 10%) 0px 2px 1px; */}

/* innr-pg-c Start */
.otherpagecss #RadDockZone1.container { max-width: 100%;}
.otherpagecss #RadDockZone1.container #HomepagecontentControl_C table { margin-top: 0 !important;}

.title {color: #d72028;font-size: 14px;letter-spacing: 1.8px;font-weight: 600;word-spacing: 0px;padding: 0 0 0 30px;position: relative;margin: 0 0 26px 0;font-family: "Roboto Mono", monospace; text-transform: uppercase;}
.title::after {content: '';position: absolute;width: 20px;height: 1px;left: 0;top: 6px;background: #d72028;} 
.custom-btn { display: inline-block; background: #d72028; color: #fff; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; padding: 12px 20px; font-family: "Roboto Mono", monospace; transition: all .3s ease-in-out;}
.custom-btn img { width: 14px;}
.custom-btn:hover { transform: translatey(-3px); color: #fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.custom-btn1 { display: inline-block; background: #ffffff; color: #2c2c2c; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; padding: 11px 20px; font-family: "Roboto Mono", monospace; transition: all .3s ease-in-out; border: 1px solid #2c2c2c;}
.custom-btn1:hover { transform: translatey(-3px); color: #fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; color: #2c2c2c;}
.heading { text-transform: uppercase; font-size: 80px;font-weight: 900; line-height: 1.1;color: #060606; margin: 0 0 40px 0;}
.heading span { color: #d72028;}
.sub-heading { text-transform: uppercase; font-size: 34px;font-weight: 900;line-height: 1.2;color: #060606;margin: 0 0 10px 0;}
.sub-heading1 { text-transform: uppercase; font-size: 26px;font-weight: 900;line-height: 1.2;color: #060606;margin: 0 0 10px 0;}

.top-bar { background: #d72028; padding: 5px 0;}
.top-bar p {margin: 0;color: #fff;font-size: 12px;letter-spacing: 1.3px;font-weight: 400;}
.top-bar .content { display: flex; justify-content: space-between} 
.top-bar .content p{ position: relative; font-family: "Roboto Mono", monospace;}
.top-bar .content p::after {content: '';position: absolute;width: 6px;height: 6px;left: -11px;top: 11px;background: #fff;opacity: .7;}
.top-bar .content p:first-child::after { width: 0; height: 0;}
.top-bar .content p span {width: 4px;height: 4px;background: #fff;display: inline-block;border-radius: 50%;margin: 2px;}
 
/* header {box-shadow: rgb(17 17 26 / 10%) 0px 2px 1px;} */

.banner-section {padding: 35px 0 50px 0;}
.banner-section .location p {font-family: "Roboto Mono", monospace;color: #2c2c2c;letter-spacing: 1.5px;font-size: 15px;}
.banner-section .location p.dot {position: relative;padding: 0 0 0 15px;}
.banner-section .location p.dot::after {content: '';position: absolute;width: 6px;height: 6px;background: #d72028;border-radius: 50%;left: 0;top: 11px;}
.banner-section .main-heading h1 {text-transform: uppercase;font-size: 150px;font-weight: 900;line-height: 1;color: #060606; margin: 0;}
.banner-section .main-heading h1 span:nth-child(3) { color: #fff; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #060606c7; }
.banner-section .main-heading h1 span:nth-child(5) { color: #d72028}

.counts {background: #f3f3f3;border-top: 2px solid #e7e7e7;border-bottom: 2px solid #e7e7e7;}
.counts .count-bx {padding: 35px 40px;border-right: 2px solid #e7e7e7;position: relative;}
.counts .count-bx::after {content: '';position: absolute;width: 36px;height: 4px;background: #d72028;left: -1px;top: -1px;}
.counts .count-bx .counter {font-size: 56px;color: #d72028;line-height: 1;}
.counts .count-bx h2 span {font-size: 36px;color: #7e7e7e;padding: 0 2px 0 0;}
.counts .count-bx p {font-size: 14px;margin: 0 0 3px 0;font-family: "Roboto Mono", monospace;letter-spacing: 1.7px;color: #7e7e7e;}

.about-section { padding: 6% 0;}
.about-section .feature-box { background: #f3f3f3; padding: 40px; border: 1px solid #e7e7e7;}
.about-section .feature-box h5 { color: #d72028; font-size: 15px; margin: 0 0 25px 0; font-weight: 600; letter-spacing: 2px;}
.about-section .feature-box h3 {text-transform: uppercase; font-size: 29px;font-weight: 900;line-height: 1.2;color: #060606;margin: 0 0 10px 0;}

.product-section { background: #f3f3f3; padding: 5% 0 0 0;}
.our-product .nav-item { border-bottom: 2px solid #d7d7d7; margin: 0; background: #f3f3f3;}
.our-product .nav-item .nav-link {text-align: start;color: #707070;font-family: "Roboto Mono", monospace;font-weight: 500;font-size: 13px;letter-spacing: 2px;line-height: 1.5;border-right: 2px solid #d7d7d7;border-radius: 0;padding: 15px 20px; border-top: 3px solid #f3f3f3}
.our-product .nav-item .nav-link.active { background: #fff; border-top: 3px solid #d72028}
.our-product .nav-item .nav-link.active span { color: #d72028}
.our-product .table td { padding: 15px;}
.our-product .table td p {font-size: 13px;margin: 0;font-family: "Roboto Mono", monospace;letter-spacing: 1.5px;}
.our-product .table td h5 {font-size: 16px;margin: 5px 0 0 0;font-weight: 900;color: #2c2c2c;letter-spacing: 1px;}
.our-product .table .applications p span {display: inline-block;letter-spacing: .2px;background: #f3f3f3;border: 1px solid #d7d7d7;padding: 4px 10px;margin: 5px 0;font-size: 12px;}

.sector-card {padding: 46px;border: 1px solid #dfdfdf;}
.sector-card p {color: #707070;font-family: "Roboto Mono", monospace;font-weight: 500;font-size: 15px;letter-spacing: 1px;margin: 0 0 60px 0;}

.Logistics thead {background: #c9c9c9;}
.Logistics thead th { color: #d72028; font-size: 14px; letter-spacing: 1.8px;font-weight: 600; padding:20px 15px; border: 0; font-family: "Roboto Mono", monospace;}
.Logistics .table h5 { text-transform: uppercase; font-size: 18px;font-weight: 800;line-height: 1.2;color: #060606;margin: 0;}
.Logistics .table td { padding: 22px 15px}
.Logistics .table td p { margin: 0}
.Logistics .note {background: #fff;padding: 15px;margin: 10px 0 0 0;border-left: 3px solid #d72028;font-size: 17px;font-weight: 500;}

.contact-form .form-control, .contact-form .form-select {padding: 13px 0;border: 0;background: transparent;border-bottom: 1px solid #bbbbbb;border-radius: 0;margin: 0 0 20px 0;}
.contact-form .form-control:focus, .contact-form .form-select:focus { box-shadow: none;}
.contact-form label {color: #6a6a6a;font-family: "Roboto Mono", monospace !important; font-weight: 600;font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 10px 0;}
.contact-form input[type='button'] { border: 0; background: #d72028; color: #fff; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; padding: 12px 20px; font-family: "Roboto Mono", monospace; transition: all .3s ease-in-out;}
.contact-info {background: #fff;padding: 60px;border: 1px solid #e1e1e1;}
.contact-info hr {margin: 27px 0;}
.contact-info h4 {  color: #d72028; font-size: 14px; letter-spacing: 1.2px;font-weight: 500; font-family: "Roboto Mono", monospace; margin: 0 0 15px 0}
.contact-info p, .contact-info a { color: #7b7b7b; line-height: 1.4; font-size: 15px}

footer { margin: 3% 0 0 0; background: #0a0a0a;} 
footer h1 {text-transform: uppercase;font-size: 180px;letter-spacing: 2px;font-weight: 900;line-height: 1;-webkit-text-stroke-width: 1px;padding: 4% 0 3% 0;-webkit-text-stroke-color: #ffffffc7;opacity: .18; margin: 0}
footer .footer-bottom { border-top: 1px solid #dddddd21; padding: 20px 0 0 0}
footer .footer-bottom .dot { position: relative; display: inline-block}
footer .footer-bottom .dot::after { content:''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #d72028; left: -15px; top: 8px}


@media (min-width: 320px) and ( max-width: 1024px) { 
  .container-fluid { padding: 0 2px !important}
  p, li{ font-size: 15px; line-height: 25px;margin: 0 0 12px 0;}
  
  .title { font-size: 13px; letter-spacing: 1.5px; padding: 0 0 0 25px; margin: 0 0 18px 0;}
  .title::after { width: 16px;} 
  .custom-btn { font-size: 12px; letter-spacing: 1.5px; padding: 9px 17px;}
  .custom-btn img { width: 12px;}
  .custom-btn1 { font-size: 12px; letter-spacing: 1.5px; padding: 8px 17px;}
  .heading { font-size: 27px; margin: 0 0 20px 0;}
  .sub-heading { font-size: 24px;}
  .sub-heading1 {font-size: 18px;}

  .top-bar p { font-size: 10px;letter-spacing: 1.3px;font-weight: 400;}
  .top-bar .content { display: inline-block;} 
  .top-bar .content p::after { width: 0px;}

  .banner-section { padding: 35px 0 50px 0;}
  .banner-section .location p {font-size: 13px;margin: 0;}
  .banner-section .location p.dot::after { width: 5px;height: 5px;}
  .banner-section .main-heading h1 {text-transform: uppercase;font-size: 38px; line-height: 1.12; margin: 20px 0;}

  .counts .count-bx {padding: 30px;border: 1px solid #e7e7e7;}
  .counts .count-bx::after {height: 2px; width: 25px}
  .counts .count-bx .counter {font-size: 30px;color: #d72028;line-height: 1;}
  .counts .count-bx h2 span {font-size: 23px;}
  .counts .count-bx p {font-size: 13px; line-height: 1.5; margin: 0}

  .about-section { padding: 7% 0;}
  .about-section .feature-box { padding: 30px;}
  .about-section .feature-box h5 { font-size: 13px; margin: 0 0 25px 0;}
  .about-section .feature-box h3 { font-size: 20px;}

  .product-section { padding: 7% 0 0 0;}
  .our-product .nav-item .nav-link { font-size: 12px; letter-spacing: 1px;line-height: 1.5;border-right: 1px solid #d7d7d7; padding: 10px; border-top: 2px solid #f3f3f3; height: 100%}
  .our-product .nav-item .nav-link.active { border-top: 2px solid #d72028}
  .our-product .table td { padding: 12px;}
  .our-product .table td p {font-size: 13px;}
  .our-product .table td h5 {font-size: 15px; line-height: 1.4}
  .our-product .table .applications p span { padding: 3px 8px;margin: 4px 0;}

  .sector-card {padding: 30px;}
  .sector-card p {margin: 0;}

  .Logistics thead th { font-size: 13px; padding: 15px 10px;}
  .Logistics .table h5 { font-size: 16px; }
  .Logistics .table td { padding: 22px 15px}
  .Logistics .note { font-size: 15px;}

  .contact-info { padding: 30px; margin: 20px 0 0 0;}
  .contact-info hr {margin: 20px 0;}
  
  footer h1 { font-size: 45px;}
  footer .footer-bottom { padding: 10px 0}
  footer .footer-bottom p { font-size: 13px; margin: 0;}
}

@media (min-width: 1025px) and ( max-width: 1440px) { 
  p, li{ font-size: 15px; line-height: 25px;}

  .title { font-size: 13px; margin: 0 0 20px 0}
  .custom-btn { letter-spacing: 1.5px;}
  .heading { font-size: 54px;}
  .sub-heading { font-size: 22px;}
  .sub-heading1 { font-size: 18px;}

  .top-bar p {font-size: 12px;letter-spacing: 1.2px;}
  .top-bar .content p::after { width: 5px;height: 5px;}
  .top-bar .content p span {width: 4px;height: 4px; margin: 2px 1px;}
  
  .banner-section .location p { letter-spacing: 1.2px;font-size: 14px;}
  .banner-section .main-heading h1 {text-transform: uppercase;font-size: 110px; margin:20px 0 0 0;}
  
  .counts .count-bx {padding: 40px;}
  .counts .count-bx::after { width: 30px;height: 3px;}
  .counts .count-bx .counter {font-size: 54px;}
  .counts .count-bx h2 span {font-size: 32px;}
  
  .about-section .feature-box h5 { font-size: 15px; margin: 0 0 35px 0;}
  .about-section .feature-box h3 { font-size: 24px; margin: 0 0 18px 0;}

  .our-product .nav-item .nav-link { font-size: 12px; letter-spacing: 1.8px;}
  .our-product .table td { padding: 9px 10px;}
  .our-product .table td p {font-size: 12px; line-height: 2}
  .our-product .table td h5 {font-size: 14px;}
  .our-product .table .applications p span { padding: 2px 8px; margin: 4px 0;}

  .sector-card {padding: 30px;}
  .sector-card p { margin: 0 0 20px 0;}
}