@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
*{
  padding: 0;
  margin: auto;
  font-family: 'Poppins', sans-serif;
  --c: #E47C00;
  --m:#D80000;
  --g:#D80000;
}

h1{
  font-weight: 500!important;
  font-size: 56px!important;}

h2{
  font-weight: 400!important;
  font-size: 40px!important;
  margin:0px;}
h4, p{
  font-weight: 300!important;
}
h3{
  font-size: 40px;
  font-weight: 500;
 }  

footer h6{
 color: var(--m)!important;
}
#map { 
  height: 400px; 
  width:auto;
  border:1px solid #aaa;
  margin-bottom:4rem;
}

.container-fluid{
  padding:0;
  margin:auto;
}
.container{
  padding:0;
  margin:auto;
}
.navbar{
  border-bottom: solid 1px #010a05;
  background-color: #ffffff!important;
}
.navbar-toggler {
  color: rgba(3, 3, 3, 0.55)!important;
  border-color: rgba(92, 90, 90, 0.655)!important;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0rem!important;}

.btn-secondary{
  color: #333 !important;
}


.navbar-nav .nav-link {
  color: #333 !important;
}

/* ============ header last ============ */
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.adressInner a{
  color:#181919!important;
  text-decoration: none!important;
}
.adressInner a:hover{
  color:#b9c0bc!important;
  text-decoration: none!important;
}
.padd{
  align-items: center!important;
  margin:auto;
  padding:0;
}
 .paddTime i{
  padding-right: 0.5rem!important;
 } 


.back{
  display: flex;
  align-items: center;
  height: 45rem;
  background-color:transparent!important;
 
}
 .vozila {
  padding-bottom: 2rem!important;

} 


.servicesCar .card{
  border: 0px !important;
  background-color: transparent!important;
  text-align: center!important; 
}
.servicesCar .card-body h2{
font-size: 1.8rem!important;
}
.servicesCar.card-header{
  padding: 0.5rem 1rem!important; 
   margin-bottom: 0!important; 
   background-color: rgb(236, 234, 234)!important; 
    border-bottom: 0px!important; 
}
.album .container{
  max-width: 1080px!important;
}

 .cta{
  height: 30rem;
  display: flex;
  align-items: center;
 }
 .cta .titleHeroes{
  background-color: #0a0a0ab7;
  color: white !important;
  padding: 2rem 5rem;
 }
 

 
 
 

.moto{
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  padding:0rem 2rem;
 
}
 
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
  }
  .doors .btn-warning, .oneq .btn-warning{
    color: #ffffff!important;
    background-color: var(--c)!important;
    border-color:var(--c)!important;
   }
   .btn-warning:hover{
    color: #ffffff!important;
    background-color: var(--c)!important;
    border-color:var(--c)!important;
   }

  .btn-warning{
    color: #ffffff!important;
    background-color: var(--m)!important;
    border-color:var(--m)!important;
    font-size: 1rem!important;
    font-weight: 300!important;
    border-radius: 0!important;
    border: 0!important;
    padding: 0.7rem 1.7rem!important;
  }
  .btn-warning:hover{
    color:var(--m)!important;
    background-color: #f4f7f5!important;
    border-color: #fffefd!important;
    border-radius: 0!important;
    border: 0!important;
  }
.navbar-brand{
  width: 200px;
}
 

  .innerCTA{
    background-image:url('images/crashed-car-loading-into-tow-truck-after-traffic-accident-road.jpg');
    padding: 0px;
  background-position: center;
  background-size: cover;
  position: relative;

  margin: 10rem auto;

  }
  .innerCTA .heroesTitle{
    padding-left: 30rem;
  }

  .imgCTA{
    align-items: left;
    text-align: left;
    background-image:url('images/garancija.png');
    padding:330px;
  background-position: left;
  background-size: contain;
  z-index: 1;
  position: absolute;
  background-repeat: no-repeat;
  margin-top: -47rem;
  
  }
 
 /* devider */
  .afterBlock{
padding: 1px 0;
margin: 4rem auto;
background-color: rgb(165, 163, 163);
  }

  h3:after{
    content: "";
  display: block;
  width: 25rem;
  height: 1px;
  background: rgb(90, 90, 90);
margin: 1rem 0;
   } 

   /* devider -- end --- */

/* button arrow--- */
    .arrow {
     margin-left: 2.5rem;
    }
  
   

/* button arrow- end-- */



.orangeLetter{
  color:var(--c);
}

/* ---- carousel end ---- */ 
.section-header{
  padding-top: 0.8rem;
  color: white;
  align-items: space-betwen;
  font-size: 1rem!important;
  background-color: rgb(12, 12, 12);
 
}

.alignRight{
  text-align: right!important;
}
.headertop a{
color: white !important;
text-decoration: none!important;
}



/* ---- ABOUT US ---- */ 
.about-us.first{
  background-image:url('images/ŠLEP\ SLUŽBA\ \(4\).png');
  padding: 0px;
  margin:auto;
  background-size: contain;
background-position: top;

background-repeat: no-repeat;
}
.about-us.second{
  background-image:url('images/TRANSPORT.png');
  padding: 0px;
  margin:auto;
  background-size: contain;
background-position: top;

background-repeat: no-repeat;
}

.about-us .container{
  background-color: transparent!important;
}
.jumbotron {
  background-color: transparent!important;
  padding:0rem 0;
}

.jumbotron .arrow{
  color:#D80000!important;
}

.titleHeroes{
  text-align: left!important;
  align-items: left!important;
 
}
.titleHeroes h2{
  font-weight: 600;
  font-size: 3rem;
}
.firstLead{
  padding-left: 5rem!important;
}
.secondLead{
  padding-right: 5rem!important;
}



/* ============ first lead and second lead padding -- end ============ */
/* ============ button hover effect ============ */
.arrowLi{
 align-items: center!important;
  text-decoration: none;
  list-style-type: none;
  color: var(--m);
  font-size: 16px;
  border: 0.2em solid var(--m);
  border-radius: 0em;
  width: 12em;
  height: 3em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 3em;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
  margin: 2rem 0;
}




/* ============ button hover effect end ============ */
 /*** services *****/

.servicesLead p{
font-size: 1.3rem!important;
}

.servicesLeft{
  background: url("images/Profi\ Centar\ Pozarevac\ kontakt.jpg");
  background-position:center center;
     background-size: cover;
  
}

.leftText{
  
  padding: 30px;
}
.windows, .doors{
 
  height:245px;
}


.onet{
  color:#ffffff;
}

.bg{
  height: 450px;
  background: url("images/Profi\ Centar\ Pozarevac\ kontakt.jpg");
  background-position:top center;
     background-size: cover;
     margin: 30px;
}







/*****right nav margin auto *****/

.navbar-nav{
 
  margin:auto;
  }

/***************
   footer
   ***************/
   .row{
    margin: 0px !important;
  }
   #back{
    background: url("images/background\ kontakt.jpg");
    background-position:center center;
       background-size: cover;
}
  
     footer{
      position: relative;
         background-color: transparent;
         color:rgba(182, 179, 179, 0.863);
         margin: auto;
       
     }
     footer a, footer p, footer i {
         color:rgba(239, 233, 233, 0.863);
         font-size: 1 rem;
         font-weight: 300;
       text-decoration: none!important;
     }
    
    footer i{
      margin-right: 0.5rem!important;
    }
     footer a:hover{
      color:var(--g)!important;
      animation: footer 0.7s ease;
  }

    .socialLinks a{
      font-size:1.3rem!important;
    }
     footer h3{
         margin-top:30px ;
     }
  
/*** 0 nama page *****/

.leadOnama{
  background: url("images/crashed-car-loading-into-tow-truck-after-traffic-accident-road.jpg");
    background-position:center center;
       background-size: cover;
     
       background-repeat: no-repeat;
       color:#dce8e2;
      padding:5rem 0;
}


.leadTextOnama{
  padding:1rem;
 
  background-color: rgba(11, 53, 58, 0.372)!important;
max-width: fit-content;

}




.categoryDescription{
padding:8rem 0 4rem 0;
}
.secondCategoryDescription{
  padding-top: 1rem!important;
  padding-bottom: 2rem!important;
}
.productList p{
padding-top:0rem!important;
}
.boxWithIcon{
  background: url("images/Group\ 1401.png");
  background-position:center center;
     background-size: cover;
     background-repeat: no-repeat;
    
}


.liButton a{
  text-decoration: none!important;
  color:#010a05;
}
.liButton a:hover{
  text-decoration: none!important;
  color:#5f5f5f;
}

        
         .car .imgHeroes{
          background: url("images/tow-truck.jpg")!important;
          background-position:center center!important;
             background-size: contain!important;;
             background-repeat: no-repeat!important;
             color:#dce8e2;}


             .iskustvo .imgHeroes{
              background-image:url('images/slep\ sluzba\ pozarevac\ i\ okolina\ transport\ slupanih\ automobila.png')!important;
              padding: 0px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            }
            .oNamaSecond .imgHeroes{
              
              background-image:url('images/slep-sluzba-slep-poljoprivrednih-masina-pozarevac-i-okolina.jpg')!important;
              padding: 0px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;

            }
            .usluge .imgHeroes{
              background-image:url('images/slep\ sluzba\ pozarevac\ i\ okolina\ transport\ slupanih\ automobila.png')!important;
              padding: 0px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;

            }
            .oNama .imgHeroes{
              background-image:url('images/slep\ sluzba\ automobila\ i\ teretnih\ vozila\ pomoc\ na\ putu\ srbija.png')!important;
              padding: 0px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;

            }


.firstLead{
  padding-top: 2rem;
}
/*** prozori page nama page - end -  *****/



.productList{
padding-top:5rem;
padding-bottom:2rem;
}
.boxWithIcon h3{
font-size: 2.2rem;

}



.prednosti{
  padding-left: 2rem!important;
}


/*** prateca oprema  *****/

#prateca-oprema .productList{
  padding-bottom:5rem!important;
}
#prateca-oprema .bb{
  padding:0rem 0!important;
}
   #prateca-oprema .about-us{
  padding-right: 0rem!important;
}

/*** prateca oprema -- end --  *****/

/** kontakt**/

.paddBox{
  padding: 2rem;
}
.paddBox h3::after{
  width: 10rem;
}

 .contactBox .border{
  border:solid 1px rgb(133, 132, 132)!important;
 }
.contactBox a{
  text-decoration:none ;
  color: #333;

}
.contactBox a:hover{

  color: #333;
}
 
/** kontakt - END **/
  @media(max-width: 1200px){
      h3{
          font-size: 27px!important;
         
        } 
        h3:after{
        width: 23rem;
      margin: 1rem 0;
         }  
       h2{
         font-size: 40px!important;
       }
       
        a{
          font-size: 16px;
      }
      p{
        font-size: 17px;
          line-height: 2rem;
      }
     
      .titleHeroes{
        padding-left: 2rem!important;
      }
      .innerCTA .heroesTitle{
        padding-left: 10rem;
      }

      .innerCTA{
   
      margin: 10rem auto;
    
      }
      .header{
        display: none !important;
      }
    
   


      .contactInfo{
        display: none;
      }
    

      .leftText{
  
        padding: 30px;
      }
      .windows, .doors{
       
        height:350px;
      }
      
     
      .container-fluid .leadOnama{
        padding-left:0rem!important;
        padding-right:0rem!important;
      }
      .boxWithIcon h3{
        font-size: 2.2rem;
        
        }

  }
  @media(max-width: 992px){
    .header{
      display: none !important;
    }
    h3{
        font-size: 30px!important;
      }  
      h3:after{
        width: 17rem;
      margin: 0.5rem 0;
         }  
     h2{
       font-size: 40px!important;
     }
     
      a{
        font-size: 17px;
    }
    p{
      font-size: 17px;
        line-height: 2rem;
    }
    .contactInfo{
      display: none;
    }
    .firstLead{
      padding-left:0rem!important;
    }
    
    .secondLead{
      padding-right: 0rem!important;
    }


.back{

align-items: center;

background-color:transparent!important;
}
.titleHeroes{
display: inline-block!important;
}
.leftText{

padding: 30px;
}
.windows, .doors{
padding:0 1rem!important;
height:350px;
}
.cta .titleHeroes{
  padding: 3rem 3rem!important;
}

.oneq{

background-color: var(--g);;
height: 350px;
padding: 0 1rem;
margin-top: 1rem!important;

}

  .prednosti{
    padding-left: 0rem!important;
    padding-top: 1rem!important;
  }
  .boxWithIcon h3{
    font-size: 2rem;
    
    }
}
@media(max-width: 768px){

  h3{
      font-size: 25px!important;
    } 
    h3:after{
      width: 15rem;
    margin: 0.7rem 0;
       }   
   h2{
     font-size: 35px!important;
   }
   
    a{
      font-size: 16px;
  }
  p{

      line-height: 2rem;
  }
 
  .back{
    display:inline-block!important;
    align-items: center;
    height: auto!important;
    background-color:transparent!important;
  }
  
.imgHeight{
   height: 500px!important;
   margin-top: 1rem!important;
   margin-bottom: 2rem!important;
  }
  .columnReverse{
    flex-direction: column-reverse!important;
  }
  .moto{
    padding: 4rem 2rem;
  }
  #back .w-100 {
    width: 50% !important;
    text-align: center;
  }

  .prednostiImg{
    display: block!important;
  }
 
  .boxWithIcon h3{
    font-size: 2rem!important;
    
    }
    .boxWithIcon .py-5{
padding-top:1rem;
    }
  

    .windows{
     margin-top:3rem!important;
     }
     
    .oneq{
      margin-top:1rem!important;
    }
    footer h6{
      font-size: 1.5rem!important;
      padding-top:1rem!important;
    }
    .innerCTA{
   
      margin: 5rem auto;
    
      }
      .innerCTA .heroesTitle{
        padding-left: 0rem;
      }
    
    
      
      .container-fluid .leadOnama{
        padding-left:0rem!important;
      
      }
    
      .titleHeroes{
        padding-left: 0rem!important;
      }
    

}
  @media(max-width: 576px){

    .navbar-brand{
      margin-right:auto!important;
    }
    .titleHeroes{
      padding-left: 0rem!important;
    }
    .boxWithIcon .py-5{
      padding-top:1rem!important;
          }

      h3{
          font-size: 1.2rem!important;
          padding-bottom: 0.7rem;
          line-height: 2rem;
        }  
        .boxWithIcon h3{
          font-size: 2rem!important;
          
          }
      
          
            

       .onet h3:after, .oneq h3:after {
        width: 10rem!important;
        background-color: #dce8e2!important;
         } 
.album h3{
  font-size: 2.3rem!important;
}
         h3:after{
          margin-top: 0.7rem!important;
          }
          
       h2{
         font-size: 2rem!important;
        
       }
       footer h6{
        font-size: 1.5rem!important;
        padding-top:1rem!important;
      }
      .vozila {
        padding-bottom: 2rem!important;

      } 
       .header{
          
          padding: 0rem 0 0rem 0 !important;
         
        }
        a{
          font-size:20px;
      }
      p{
          font-size: 1.2rem;  
          line-height: 2rem;
          padding-top:1rem;
      }
     
      .copy, .copy a{
            font-size: 0.9rem!important;
      }
      .back{
        display:inline-block!important;
        align-items: center;
        height: auto!important;
        background-color:transparent!important;
      }

      .imgHeight{
        height: 300px!important;
        margin-bottom: 1rem!important;
       }
      .contactInfo{
        display: none;
      }
.firstLead{
  padding-left:0rem!important;
}
.titleHeroes{
  padding-left: 0rem!important;
}

.secondLead{
  padding-right: 0rem!important;
}

.leftText{
  padding: 20px!important;
}

.innerCTA .heroesTitle{
  padding-left: 0rem;
}

 
#back hr{
  display: none;
}

.innerCTA{
  padding-top: 2rem!important;
  padding-bottom:10rem!important ;
}
h1{
  font-size: 2.1rem!important;
 
}
.innerLi p{
padding-top: 0px !important ;
}
.navbar .container{

  padding-right:auto!important;
  
}
.sales .jumbotron{
  padding: 1rem 0!important;
}
.py-5 {
  padding-bottom: 0rem!important; 
}

  }
  @media(max-width: 350px){
   
    h1{
      font-size: 2.1rem!important;
     
    }
    .py-5 {
      
      padding-bottom: 0rem!important; 
  }

    .innerLi p{
      padding-top: 0px !important ;
      }
    .album h3{
      font-size: 2.2rem!important;
    }
    .innerCTA{
      padding-top: 2rem!important;
      padding-bottom:13rem!important ;
    }
    h2{
      font-size: 1.7rem!important;
     
    }
    .boxWithIcon .py-5{
      padding-top:1rem!important;
          }
    .boxWithIcon h3{
      font-size: 2rem!important;
      
      }
.sales .jumbotron{
  padding: 1rem 0!important;
}

 
footer h6{
  font-size: 1.5rem!important;
  padding-top:1rem!important;
}
.titleHeroes{
  padding-left: 0rem!important;
}
.innerLi{
  padding-left: 0rem!important;
}
.leftText{
  padding: 7px !important;
}

.imgHeight{
  height: 400px!important;
  margin-bottom: 0.5rem!important;
 }
 h3:after{
  margin-top: 2.5rem!important;
  }

  
}






/* ============ mobile view ============ */
@media(max-width: 991px){
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top:10px;
      
  }
  .nav-item ::after{
    content: "";
  display: block;
  width: 20rem;
  height: 0.7px;
  background: rgb(90, 90, 90);
margin: 1rem 0;
  }

.section-header {
    display: none !important;
  }

.sv{
  display: none!important;
}
}
/* ============ mobile view .end// ============ */