


/*===========================
       13.Car Logo css 
===========================*/

.car-logo-area{
      & .wrapper{
             border-top: 1px solid #d7dce6;
             padding-top: 112px;         
             
             @media #{$lg}{
                    padding-top: 92px;
             }
             @media #{$md}{
                    padding-top: 72px;
             }
             @media #{$xs}{
                    padding-top: 55px;
             }
      }
}

.car-logo-row{
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
       -moz-flex-wrap: wrap;
       flex-wrap: wrap;

       & .car-logo-col{
              width: 12.5%;
              padding: 0 5px;
       }
}

.single-car-logo{
       border: 1px solid #d7dce6;
       padding: 20px;
       text-align: center;
       border-radius: 5px;
       height: 140px;
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       -webkit-box-align: flex-end;
       -ms-flex-align: flex-end;
       align-items: flex-end;
       -webkit-box-pack: center;
       -ms-flex-pack: center;
       justify-content: center;
       position: relative;
       margin-top: 50px;
       @include transition(0.3s);

       & a{
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              left: 0;
       }

       & .car-logo-wrapper{
              & img{
                     display: inline-block;
              }
              & .title{
                     font-family: $font-2;
                     color: $heading-color;
                     font-size: 14px;
                     text-transform: uppercase;
                     margin-top: 25px;
                     @include transition(0.3s);
              }
       }

       &:hover{
              border-color: $theme-color;

              & .car-logo-wrapper{
                     & .title{
                            color: $theme-color;
                     }
              }
       }
}


.car-logo-active{
       & .slick-arrow{
              font-size: 16px;
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;              
              border-radius: 2px;
              color: $white;
              background: #c2cad9;
              cursor: pointer;
              @include transition(0.3s);
              position: absolute;
              top: -25px;
              right: 0;
              z-index: 5;
              padding: 0;

              @media #{$xs}{
                     width: 25px;
                     height: 25px;
                     line-height: 25px;
              }
              
              &.prev{
                     right: 40px;

                     @media #{$xs}{
                            right: 30px;
                     }
              }

              &:hover{
                     background-color: $theme-color;
                     color: $white;
              }
      }

       & .slick-dots{
              text-align: center;
              width: 100%;
              margin-top: 20px;
                            
              & li{
                     display: inline-block;
                     margin: 0 5px;

                     & button{
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            font-size: 0;
                            background-color: #737f96;
                            border: 0;
                            cursor: pointer;
                            @include transition(0.3s);
                     }

                     &.slick-active{
                            & button{
                                   background-color: $theme-color;
                            }
                     }
              }
       }
}


/*===== Car Logo Dark ======*/

.car-logo-dark{
       background-color: #1a1f28;

       & .wrapper{
              border-top: 1px solid rgba(122, 131, 149, 0.15);
       }

       & .section-title-2{
              & .title{
                   color: $white;
              }
       }

       & .single-car-logo{
              border: 1px solid #3e485a;              
       
              & .car-logo-wrapper{                     
                     & .title{
                            color: $white;
                     }
              }
       
              &:hover{
                     border-color: $theme-color;
       
                     & .car-logo-wrapper{
                            & .title{
                                   color: $theme-color;
                            }
                     }
              }
       }

       & .car-logo-active{
              & .slick-arrow{
                    color: $white;
                    background: #3e485a;
      
                    &:hover{
                          background-color: $theme-color;
                          color: $white;
                    }
              }
        }
}







