.advance-search{
    margin-top: 35px;
    margin-bottom: 20px;
    color: $color-white;
    .form-control {
        display: block;
        width: 100%;
        height: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #ffffff;
        background-color:transparent;
        background-clip: padding-box;
        border: 1px solid #ffffff;
       border-radius: 0 !important;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

        &::placeholder { 
            color:$color-white;
            opacity: 1;
          }
    }
}


//product

.product_single{

    margin-top: 90px;
    margin-bottom: 90px;
    .product_preview{

        .head{
            color: $color-brand2;
            font-weight: 600;
            font-size: 25px;
        }
        .product_type{
            margin-top: 20px;
            display: flex;
            .wrapper{
                padding-right: 40px;
            }
            span{
                color: $color-font;
                font-size: 14px;
            }
            a{
                color: $color-brand2;
                font-size: 15px;
                padding-left: 5px;
               
                &:hover{
                    color: grey;
                    text-decoration: none;
                }
            }
        }
    }

    .trending_body1{
        margin-top: 90px;
        margin-bottom: 150px;

        .card{
           max-width: 450px;
            border: none;
            margin: auto;

            @media screen and(max-width:768px) {
    
                      max-width: 350px;   
            }
            img{
                width: 100%;
            }
        }
    }


    .tabs{
        @media screen and(max-width:992px ){
            margin-bottom: 70px;
        }
        
       
       .nav-pills{
        justify-content: center;
        .nav-item{
           
               .nav-link{
                   border-radius: 0;
                   padding: 20px 30px;
                   color: $color-black;
                   margin-right: 5px;

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

       .tab-content{
           .tab-pane{
                .p_details{
                    padding-top: 20px;
                    h4{
                        color: $color-brand2;
                        font-weight: 700;
                        font-size: 22px;
                        margin-top: 10px;
                        width: 100%;
                        border: 1px solid;
                        border-color: transparent;
                        border-bottom-color: $color-border !important;
                        padding-bottom: 10px;
                    }
                    p{
                        color: $color-font;
                        padding-top: 20px;
                        line-height: 25px;
                    }
                    .youtube{
                        width: 100%;
                    }
                }

                .p_spec{
                    padding-top: 20px;
                    h4{
                        color: $color-brand2;
                        font-weight: 700;
                        font-size: 22px;
                        margin-top: 10px;
                        width: 100%;
                        border: 1px solid;
                        border-color: transparent;
                        border-bottom-color: $color-border !important;
                        padding-bottom: 10px; 
                    }
                }

                .P_review{
                    padding-top: 20px;
                    h4{
                        color: $color-brand2;
                        font-weight: 700;
                        font-size: 22px;
                        margin-top: 10px;
                        width: 100%;
                        border: 1px solid;
                        border-color: transparent;
                        border-bottom-color: $color-border !important;
                        padding-bottom: 10px; 
                    }
                    .u_review{
                        margin-top: 20px;
                        margin-bottom: 50px;

                        .wrapper{
                            display: flex;
                      
                        }
                        .user_img{
                            max-width: 75px;
                            margin-right: 50px;
                            img{
                                width: 100%;
                            }
                        }
                        .review_details{
                            padding-top: 20px;
                            .rating{
                                display: flex;
                                span{

                                    color: grey;
                                    font-size: 14px;
                                    padding-right: 10px;
                                }
                            }
                            h5{
                                padding: 10px 0;
                            }

                            .date{
                                color: $color-font;
                                padding-bottom: 10px;

                            }
                            p{
                                color: $color-font;
                                line-height: 25px;
                            }
                        }
                    }
                }

                .sub_review{
                    .rating{
                        padding-top: 20px;
                        span{
                            color: $color-grey;
                            font-size: 14px;
                            padding-right: 10px;
                            &:hover{
                                color: $color-black;
                            }
                        }
                    }
                    .review-submit{
                        margin-top: 20px;
                     

                        .form-control{
                            height: 50px;
                            margin-bottom: 20px;
                        }
                        textarea{
                            height: 200px !important;
                        }
                    }
                }
           }
       }
    }

    .single_sidebar{
        .price{
            background-color: $color-brand;
            text-align: center;
            padding: 30px;
            margin-bottom: 50px;
            p{
                color: $color-white;
               font-size: 18px;
               font-weight: 600;
               padding-bottom: 5px;
            }

            .value{
                color: $color-white;
                font-size: 30px;
                font-weight: 700;
            }
        }

        .user_info{
            text-align: center;
            padding-top: 20px;
            .user_img{
                max-width: 150px;
                margin: auto;
                img{
                    border-radius: 50%;
                    width: 100%;
                }
            }
            h5{
                color: $color-brand2;
                margin-top: 30px;
                font-size: 22px;
                font-weight: 600;
            }
            .date{
                color: $color-font;
            }
            a{
                text-decoration: none;
                color: $color-brand2;
                font-size: 18x;
                &:hover{
                    color: $color-brand;
                }
            }
            .buttons{
                padding-top: 30px;
                border: 1px solid;
                border-color: transparent;
                border-bottom-color: $color-border !important;
                padding-bottom: 30px; 
            }
            .map{
                width: 100%;
margin-top: 30px;
margin-bottom: 30px;
                padding: 20px;
                .mapouter {
                    position: relative;
                    text-align: right;
                    height: 300px;
                    width: 100%;
                }

                .gmap_canvas {
                    overflow: hidden;
                    background: none !important;
                    height: 300px;
                    width: 100%
                }
            
            }

            .side_rate{
                p{
                    font-size: 16px;
                    padding-bottom: 25px;
                    font-weight: 600;
                    border: 1px solid;
                border-color: transparent;
                border-bottom-color: $color-border !important;

                }

                .rating{
                    padding-top: 15px;
                    border: 1px solid;
                border-color: transparent;
                border-bottom-color: $color-border !important;
                padding-bottom: 25px;
                    span{
                        color: $color-hover;
                        font-size: 18px;
                        margin-right: 12px;
                    }
                }

               
            }

            .listing{
                margin-top: 30px;
                background-color: $color-brand;
                padding: 30px;
                margin-bottom: 50px;
                border-radius: 3px;
                p{
                    color: $color-white;
                   font-size: 18px;
                   font-weight: 600;
                   padding-bottom: 5px;
                   text-align: left !important;
                }
                
            }

        }
    }
}
.safty{
                   
    h5{
        color: $color-brand2;
        font-weight: 600;
        text-align: left !important;
        border: 1px solid;
        border-color: transparent;
        border-bottom-color: $color-border !important;
        padding-bottom: 25px;
    }
    p{
        color: $color-font;
        line-height: 22px;
        text-align: left !important;
        border: 1px solid;
        border-color: transparent;
        border-bottom-color: $color-border !important;
        padding-bottom: 25px;
    }
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color:$color-brand;
}

// .owl-carousel button.owl-dot span {
//     height: 100px;
//     width: 100px;
//     color: $color-black;
// padding-left: 20px;
  
//     display: flex;
//     background-position: center;
//     background-size: cover;
//     background-repeat: no-repeat;
//     display: block;
//     font-weight: 700;
//     margin: 5px;
// }
// .owl-carousel button.owl-dot.active span{
//     color:$color-hover;
// }


// .owl-carousel{

//     .owl-dots{
//             position: absolute;
// width: 100%;

   
// }
// }


@keyframes fadeInOut {
    0% {
      opacity: 0;
    }
  
    45% {
      opacity: 1;
    }
  
    100% {
      opacity: 0%;
    }
  }


  .trending_body1{
    .owl-carousel .owl-nav{
        overflow: hidden;
        height: 0px;
      
      }
    
      .owl-carousel .nav-btn{
        height: 38px;
        position: absolute;
        width: 38px;
        cursor: pointer;
        top: 100px !important;
        border-radius: 50%;
        padding-top: 8px;
        padding-left: 2px;
    }
    
    .owl-carousel .owl-prev.disabled,
    .owl-carousel .owl-next.disabled{
      pointer-events: none;
      opacity: 0.2;
    }
    
    .owl-carousel .prev-slide{
    background-color: $color-brand;
        left: -33px;
    
    @media screen and(max-width:768px) {
        
        left:-13px;
    
    }
    @media screen and(max-width:568px) {
        
        left:0 !important;
        top: 31px !important;
    
    }
    
        span{
            color: white;
            font-size: 21px; 
            padding-right: 5px;
            
        }
    }
    .owl-carousel .next-slide{
        background-color:  $color-brand;
        right: -33px;
        @media screen and(max-width:768px) {
        
            right:-13px;
        
        }
        @media screen and(max-width:568px) {
        
            right:0 !important;
            top: 31px !important;
        }
        span{
            color: $color-white;
            font-size: 21px; 
            
        }
    
    }
    .owl-carousel .prev-slide:hover{
       background-position: 0px -53px;
    }
    .owl-carousel .next-slide:hover{
      background-position: -24px -53px;
    }
    
    .slider-nav { 
        
        // position: absolute; 
        // bottom: 0; 
        // left: 0; right: 0;
        //  z-index: 10;
          background-color: #fff; 
          margin-bottom: 75px;
        }
            
    .thumbs { width: 100%; display: table; table-layout: fixed; padding: 0; margin: 0;  }
    
    .thumb { width: 5%; display: table-cell; vertical-align: middle; position: relative; 
         cursor: pointer; background-color: #000; }
    .thumb img { width: 100%; height: auto; display: block; }
    .thumb span { font-size: 1.2em; 
        line-height: 1; color: transparent;
         text-align: center; font-weight: bold;
          text-decoration: none; display: block;
           position: absolute;
            top: 50%; left: 0; 
            right: 0; padding: 1em 0;
             margin-top: -1.6em; 
            
     }
    
    // .thumb:hover span,
    // .thumb.active span { color: rgba(255, 255, 255, 0); border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0.253); }
    
    
    
    .owl-carousel button.owl-dot span {
      
        display: inline-block;
        color:transparent;
       
        font-size: 20px;
        font-weight: 700;
        margin: 5px;
    }
    .owl-carousel button.owl-dot.active span{
        color:$color-font;
        background-color:#64646400;
        height: 100%;
        width: 100%
    }
    
    
    .owl-carousel{
    
        .owl-dots{
                position: absolute;
                width: 5%; display: table-cell; vertical-align: middle; position: relative; 
                cursor: pointer;
        width: 100%; table-layout: fixed; padding: 0; margin: 0;
        display: flex;
        position: absolute;
        bottom: -58px;
      
    }
    }
    .owl-carousel button.owl-dot{
    width: 100%;  table-layout: fixed; padding: 0; margin: 0;
    }
  }
  
 