@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500;700;800&display=swap');


header{
  padding: 15px 0px;
  border-top: 3px solid #ff7e00;
}

.logo img{
width: 100%;
padding: 7px 0px;
}

.logo-text{
padding-top: 0px;
  display: inline-block;
}

.logo-text h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 800;
background: -webkit-linear-gradient(45deg, #ff7e00, #cb0101 80%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0px;
font-size: 36px;
padding-top: 26px;
margin-left: -15px;
position: relative;
}

.logo-text h1::after{
position: absolute;
content: '';
top: 25px;
left: 3px;
width:60px;
background: #98cb4c;
height: 3px;
}

.logo-text h1::before{
position: absolute;
content: '';
bottom: 1px;
right: 0px;
width: 100px;
background: #98cb4c;
height: 3px;
}

.logo-text p{
font-family: 'Open Sans', sans-serif;
color:#888;
margin: 0px;
font-size: 13px;
letter-spacing: 1.5px;
}

word{ 
    display:inline-block; 
}

letter{ 
    display:inline-block; 
    white-space:pre; 
    background:none; 
    transition:.4s; 
}

letter.initial{ 
    opacity:0; 
    text-shadow:0 0 9px; 
    color:#FFF; 
    -webkit-transform:scale(8); 
    -webkit-transform-origin:150% 50%; 
    transform:scale(8); 
    transform-origin:150% 50%; 
}

.top-cnt{
padding-left: 0px;
float: right;
margin: 0px;
padding-top: 5px;
}

.top-cnt li{
    display: inline-block;
    font-family: 'Roboto', sans-serif; 
}

.top-cnt li a{
    color: #555;
    padding: 0 5px;
    text-decoration: none;
}
.top-cnt li a span{
    color: #cb0101;
    padding-right: 5px;
}

.pad0{
    padding: 0px;
}



.navbar-inverse {
    background:none;
    border: none;
    margin: 0;
}




.nav > li > a {
font-family: 'Roboto', sans-serif;

font-weight: 500;
    opacity: 1;
     transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    padding: 15px 25px;
  }

  .navbar-inverse{
    background:none;
    border:none;
    margin-bottom:0px;
    float: right;
}

.navbar .nav > li::before {
    bottom: 40px;
}

.navbar .nav > li:hover::before{
    opacity: 1;
}

.navbar .nav > li::before {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 2px;
    opacity: 0;
    background-color:#ff7e00;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.navbar-inverse .navbar-nav > li > a {
    color: #cc0401;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color:#ff7e00;
    background:none;
}

.navbar-inverse .navbar-nav > .active::before{
    opacity: 1;
}

.navbar-inverse .navbar-nav > .active::after{
    opacity: 1;
}



.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #ff7e00;
    background:none;
}

.navbar .nav > li::after {
 position: absolute;
    content: '';
    left: 50%;
    bottom: 0px;
    margin-left: -6px;
    opacity: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #ff7e00;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.navbar .nav > li:hover::after {
    opacity: 1;
}

.dropdown-menu > li > a {
font-family: 'Roboto', sans-serif;
}




.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.carousel-control.right {
    background: none;
}

.carousel-control.left {
    background: none;
}

.carousel .item.active .animated1 {
   -webkit-animation: fadeInRight 1s ease-in-out 500ms both;
animation: fadeInRight 1s ease-in-out 500ms both;
        
}

.carousel .item.active .animated2 {
   -webkit-animation: fadeInLeft 1s ease-in-out 500ms both;
animation: fadeInLeft 1s ease-in-out 500ms both;
        
}

.carousel .item.active .animated3 {
   -webkit-animation: fadeInDown 1s ease-in-out 500ms both;
animation: fadeInDown 1s ease-in-out 500ms both;    
}

.carousel .item.active .animated4 {
   -webkit-animation: fadeInUp 1s ease-in-out 500ms both;
animation: fadeInUp 1s ease-in-out 500ms both;    
}

.carousel-caption{
    text-align: left;
    transition: opacity 100ms;
    text-shadow: none;
}

.carousel-inner > .item img{
  width: 100%;
}

.carousel-inner > .item .carousel-caption {
z-index: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}

.carousel .item.active .carousel-caption {
    z-index: 0;
    opacity: 1;
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    transition: opacity 100ms;
    
}



.carousel-caption h1{
color: #fff;
text-shadow: none;
font-family: 'Alegreya Sans', sans-serif;
font-weight: 700;
font-size: 26px;
}

.first-banner{
background: rgba(34, 34, 34, 0.85);
padding: 20px;
bottom: 28%;
}

.first-banner h1{
margin-top: 0px;
}


.carousel-caption p{
     font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      color:#f1f1f1;
      line-height: 26px;
 }


.carousel-caption a{
  font-family: 'Open Sans', sans-serif;
 }


.item  .third-banner{
right: 60%;
left: 12%;
top: 20%;
background: rgba(255, 126, 0, 0.90);
padding: 15px;
bottom: 22%;
}

.item  .third-banner h1{

color: #fff;
text-transform: uppercase;
font-size: 40px;
margin-bottom: 20px;
position: relative;
margin-top: 0px;
}

.item  .third-banner h1::after{
  position: absolute;
  content: '';
left: 0px;
  bottom: -10px;
  height: 2px;
  background:#fff;
  width: 60px;
}

.item  .third-banner p{
  color: #f1f1f1;
/*  text-shadow: 0 1px 2px rgba(0,0,0,.6);*/
}


.carousel-caption {
    right: 60%;
    left: 12%;
    padding-bottom: 30px;
    top: 18%;
}

.second-banner{
    right: 10%;
    left: 68%;
    padding-bottom: 30px;
    top: 35%;
}

.second-banner h4{
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   margin-bottom: 5px;
  }

  .second-banner h1{
  margin-top: 0px;
  }

.carousel-caption .btn {
background:none;
transition: .4s;
border: 1px solid #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
padding: 12px 24px;
 font-family: 'Open Sans', sans-serif;
}

.carousel-caption .btn:hover{
background:#CB0101;
color: #fff;
border: 1px solid #CB0101;
}

.carousel-caption .btn-contact{
border: 1px solid #CB0101;
background: #CB0101;
color: #fff;
}

.carousel-caption .btn-contact:hover{
  background: #CB0101;
color: #fff;
border: 1px solid #CB0101;
}


.fourth-banner{
top: 23%;
}

.sec-1{
padding: 40px 0px;
background: url(../images/sec-1-bg.jpg) no-repeat;
background-size: cover;
}


.sec-1 h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 600;
margin-top: 0px;
color: #cb0101;
position: relative;
}

.sec-1 h1 span{
font-weight: 500;
color: #ff7e00;
}

.sec-1 h1::after{
content: "";
position: absolute;
top: 40px;
left: 4px;
width: 8px;
height: 8px;
background: #cb0101;
}

.sec-1 h1::before{

content: "";
position: absolute;
top: 33px;
left: 10px;
height: 2px;
width: 70px;
margin: 10px 0;
background-color: #ff7e00;
}

.sec-1 p{
    color: #666;
    line-height: 26px;
      font-family: 'Open Sans', sans-serif;
}

.sec-1 a{
border: 2px solid #cb0101;
padding: 8px 15px;
display: inline-block;
border-radius: 4px;
color: #cb0101;
font-family: 'Roboto', sans-serif;
font-weight: 500;
text-decoration: none;
transition: .4s;
-webkit-transition: .4s;
}

.sec-1 a:hover{
    background: #cb0101;
    color: #fff;
}

.sec-2 {
    padding: 60px 0px;
    background: url(../images/sec-2-bg.jpg) center;
    background-size: cover;
}

.sec-2-box {
    text-align: center;
    padding: 20px 0;
}

.sec-2-box h3 {
 font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #fff;
    margin-top: 0px;
    font-size: 25px;
    border-bottom: 1px solid #c5c5c5;
    padding-bottom: 10px;
}

.sec-2-box span {
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50%;
    padding: 30px;
    font-size: 25px;
    margin: 20px 0px;
}

.sec-2-box p {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    line-height: 26px;
}

.sec-2-box a {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    background-color: #cb0101;
    border-color: #fff;
    border-radius: 17px;
    padding: 8px 20px;
    border: 2px solid #fff;
    font-size: 13px;
    margin-top: 10px;
    display: inline-block;
    text-decoration: none;
    transition: .4s;
    -webkit-transition: .4s;
}

.sec-2-box a:hover {
    background: none;
}

.sec-2-box:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.5s ease all;
}

.sec-3{
padding: 40px 0px;
}

.sec-3-right h2{
    font-family: 'Alegreya Sans', sans-serif;
font-weight: 600;
color: #cb0101;
position: relative;
}

.sec-3-right h2 span{
font-weight: 400;
color: #f76b00;
}

.sec-3-right h2::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 5px;
    height: 2px;
    width: 70px;
    margin: 3px 0;
    background-color: #ff7e00;
}

.sec-3-right h2::after {
    content: "";
    position: absolute;
    top: 33px;
    left: 0px;
    width: 8px;
    height: 8px;
    background: #cb0101;
}

.sec-3-right p {
    color: #666;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif;
}

.sec-3-right a {
    border: 2px solid #cb0101;
    padding: 8px 15px;
    display: inline-block;
    border-radius: 4px;
    color: #cb0101;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-decoration: none;
    transition: .4s;
    -webkit-transition: .4s;
    margin-right: 8px;
}

.sec-3-right a:hover {
    background: #cb0101 !important;
    color: #fff !important;
     border: 2px solid #cb0101 !important;
}

.sec-4{
background:#f9f9f9;
padding: 40px 0px; 
}

.sec-5{
padding: 40px 0px;
}

.sec-5-right{
padding-top: 50px;
}

.sec-6{
padding: 40px 0px;
border-top: 1px solid #d1d1d1;
text-align: center;
}

.sec-6 h2 {
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 600;
    color: #cb0101;
    position: relative;
    margin-top: 0px;
}

.sec-6 p {
    color: #666;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif;
}

.sec-6 img{
    width: 45%;
    display: inline-block;
}


.tractor-banner {
    padding: 70px 0px;
    background: url(../images/tractor-banner.jpg) center;
}

.quality-banner {
    padding: 70px 0px;
    background: url(../images/quality-banner.jpg) center;
}

.transmission-banner {
    padding: 70px 0px;
    background: url(../images/transmission-banner.jpg) center;
}

.contact-banner {
    padding: 70px 0px;
    background: url(../images/contact-banner.jpg) center;
}

.inner-banner-title {
    border-left: 4px solid #ff7e00;
    background: rgba(0, 0, 0, 0.75);
    padding: 15px;
    display: inline-block;
}

.inner-banner-title h1 {
  font-family: 'Alegreya Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 0px;
    font-size: 32px;
    color: #fff;
}

.inner-banner-title ul {
    padding-left: 0px;
    margin-bottom: 0px;
}

.inner-banner-title ul li {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    color: #f9f9f9;
}

.inner-banner-title ul li a {
    color: #ff7e00;
    text-decoration: none;
}

.inner-matter{
    padding: 40px 0px;
}

.in-title h2 {
    font-family: 'Roboto', sans-serif;
    color: #b30303;
    position: relative;
    margin-top: 0px;
    font-size: 26px;
    font-weight: 600;
}


.in-title h2::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 5px;
    height: 2px;
    width: 70px;
    margin: 3px 0;
    background-color: #ff7e00;
}

.single-pro {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0px 0px 3px #cbcbcb;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
    margin: 20px 0;
}

.single-pro .pro-img {
    padding-bottom: 15px;
}

.single-pro .pro-name {
    background: #ff7e00;
    padding: 2px 15px;
    transition: .4s;
}

.single-pro .pro-name h4 {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.single-pro .pro-name span {
    position: absolute;
    bottom: 22px;
    right: 18px;
    background: #00923f;
    color: #fff;
    padding: 12px 13px;
    border-radius: 30px;
    transition: .4s;
}


.description h2 {
    font-family: 'Roboto', sans-serif;
    color: #b30303;
    position: relative;
    margin-top: 0px;
    font-size: 26px;
    font-weight: 600;
    margin-top: 20px;
}

.description h2::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 5px;
    height: 2px;
    width: 70px;
    margin: 3px 0;
    background-color: #ff7e00;
}

.description table {
    width: 100%;
    margin: 15px 0px;
}

.description table tr:nth-child(2n+1) {
    background: #FFF;
}

.description table tr:nth-child(2n) {
    background: #f9f9f9;
}

.description table tr th {
    border: 1px solid #fff;
    padding: 10px;
    background: #b30303;
    color: #fff;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

.description table tr td {
    border: 1px solid #eaeaea;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
}


.inner-matter p {
    color: #666;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif;
}

.inner-matter ul{
    padding-left: 0px;   
}

.inner-matter ul li{
list-style: none;
    color: #666;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif; 
}


.inner-matter ul li::before {
    position: relative;
    left: 0;
    top: 0px;
    margin-right: 10px;
    font-size: 14px;
    line-height: 30px;
    color: #ff7e00;
  
    font-family: "FontAwesome";
    content: "\f138";
}

.dealer-table{
font-family: 'Open Sans', sans-serif;
margin-top: 20px;
}

.dealer-table tr th{
    background: #b30303;
    color: #fff;
    padding: 12px;
    border: 1px solid #fff;
}

.dealer-table tr td{
    border: 1px solid #d1d1d1;
    padding: 12px;
    color: #666;
}


footer {
    background: url(../images/footer-bg.png) center no-repeat #b30303;
    padding: 40px 0px;   
}

footer h2
{
font-family: 'Roboto', sans-serif;
color: #fff;
position: relative;
margin-top: 0px;
font-size: 22px;
}

footer h2::before
{
  content: '';
  position: absolute;
left: 0;
bottom: -6px;
height: 2px;
width: 40px;
background-color:#fff;

}

footer ul{
  padding-left: 0px;
  margin: 0px;
}

footer ul li{
  list-style: none;
  position: relative;
  padding-left: 15px;
}


footer ul li::before {
    position: absolute;
    left: 0;
    top: 0px;
    font-size: 14px;
    line-height: 30px;
    color:  #fff;
    font-weight: 900;
    font-family: "FontAwesome";
    content: "\f105";
}

footer ul li a{
 color: #f1f1f1;
  font-family: 'Open Sans', sans-serif;
  line-height: 30px;
  -webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
  text-decoration:none !important; 
}

footer ul li a:hover{
  color: #d1d1d1;
}

.f-about p{
   color: #f1f1f1;
  font-family: 'Open Sans', sans-serif;
   line-height: 26px;
}
.f-about img{
width: 65%;
padding-bottom: 8px;
}

.f-about a{
color:#fff;
padding: 9px 20px;
text-decoration: none;
background-color:#ff7e00;
overflow: hidden;
border-radius: 30px;
font-family: 'Roboto', sans-serif;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
display: inline-block;
}

.f-about a:hover{
background: #ff7e00;
}

.gallery{
     padding: 4px;
    box-shadow: none;
    border: 1px solid #d1d1d1;
}

/*contact page*/

.cnt-info p{
   color: #f1f1f1;
  font-family: 'Open Sans', sans-serif;
   line-height: 26px;
   display: flex;
}

.cnt-info p span{
    line-height: 26px;
margin-right: 8px;
}

.ml-17{
    margin-left: 17%;
}

.cnt-box {
    border: 1px solid #d7d7d7;
    text-align: center;
    padding: 25px 25px;
    margin: 20px 0px;
    height: 220px;
}

.cnt-box span
{
  height: 55px;
width: 55px;
background: #d81f01;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 55px;
display: inline-block;
position: relative;
-webkit-box-shadow: 5px 5px 0px 0px #222;
-moz-box-shadow: 5px 5px 0px 0px #222;
-ms-box-shadow: 5px 5px 0px 0px #222;
-o-box-shadow: 5px 5px 0px 0px #222;
box-shadow: 5px 5px 0px 0px #222;
margin-bottom: 15px;
}

.cnt-box h4
{
color: #333;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
}

.cnt-box p a{
  color: #666;
  text-decoration: none;
  transition: .4s;
  -webkit-transition: .4s;
}

.cnt-box p a:hover{
  color:#e31e24;
}

 @media only screen and (min-width: 300px) and  (max-width:599px) {
     
     .in-title h2::before{
         display:none;
         
     }
 }

