.home{
   .homeItem{
    height: 50vh;
    background-image: url(../images/homebg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    &::after{
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(0,0,0,0.4);
    }
   }
}
.header{ 
  position: absolute;
  top: 200px;
  width: 100%;
      .nav{
        padding: 10px 10px; 
        background-color: white; 
        box-shadow: 1px 1.332px 4px 1px #7c7c7c4d;
        z-index: 3;
        width: 85%;
        border-radius: 5px;
        margin: 0 auto;
        .navBar{
            display: flex !important;
            justify-content: space-between !important;   
            align-items: center ;
          .logo{ 
                 width: 110px;
                 height: 70px;
             img{
                 max-width: 100%;
                 max-height: 100%;
             }
          }
          .nav_item{
              ul{
                    li{
                        padding:0 15px; 
                        cursor: pointer;
                        position: relative;
                        display: inline-block;
                        &:hover .HoverUnder::after{
                        opacity: 1;
                        transition: all linear .5s;

                        }
                        &:hover .HoverUnder::before{
                            opacity: 1;
                            transition: all linear .5s;
                            }
                        &:hover a{
                           width: 100%;
                        }  
                        &:hover .sub_down{
                            top: 40px;
                            opacity: 1 !important;
                            margin-top: 0;
                            visibility: visible;
                            padding: 10px 10px 10px 10px;
                        }
            
                        a{
                            font-size: 16px;
                            font-weight: 500;
                            color: black; 
                            font-family: $font-1;
                            .droppper{
                                font-size: 15px;
                            }
                            &:hover{
                                color: $primaryColor;
                            }
                        }
                        .HoverUnder{
                          &::after{
                                position: absolute;
                                content: '';
                                bottom:-32px;
                                left:0; 
                                height: 4px;
                                width: 100%;
                                background-color: $primaryColor;
                                opacity: 0;
                            }
                            &::before{
                                position: absolute;
                                content: '';
                                width: 0;
                                height: 0;
                                border: 0 solid transparent;
                                border-right-width: 7px;
                                border-left-width: 7px;
                                border-bottom: 7px solid $primaryColor;
                                bottom: -29px;
                                left: 50%;
                                transform: translateX(-50%);
                                opacity: 0;
                            }
                        }
                        .sub_down{ 
                            background-color: $white;
                            border-radius: 10px;
                            padding: 10px 10px 10px 10px;
                            box-shadow: 1px 1.732px 20px 0px rgba(0,0,0,0.3);   
                            -webkit-transition: all 0.3s ease-in-out;
                            transition: all 0.3s ease-in-out;
                            position: absolute;
                            visibility: hidden;
                            display: block;
                            width: 250px; 
                            border: none !important;
                            opacity: 0;
                            top: 70px;
                            left: 0;
                            padding: 0;
                            z-index: 999;
                          li{
                               padding: 10px 10px;
                               width: 100%;
                               &:hover{
                                   background-color: $primaryColor;
                                   width: 100%;
                               } 
                               &:hover a{
                                color: $white ; 
                            } 
                              a{
                                font-size: 17px;
                                font-weight: 500;
                                color: black;
                                font-family: $font-1;
                              }
                     }
                    }
                  }
              }
          }
          .searchB{
            cursor: pointer;
            i{
              height: 45px;
              width: 45px;
              background-color: $primaryColor;
              color: $white;
              text-align: center;
              line-height: 45px;
              font-size: 25px;
              border-radius: 5px;
            }
        }
        } 
      }

      .banner{
        position: relative;
        overflow: hidden;
        width: 86%;
        margin: 0 auto;
        .slick-active .bannerItem{
            -webkit-transform: scale(1.15);
            transform: scale(1.15);
        }
        .prev{
            height: 80px;
            width: 80px;
            color: white;
            font-size: 50px;
            background-color: rgba(226, 225, 225, 0.418);
            text-align: center;
            line-height: 80px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 5%;
            z-index: 2;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .next{
            height: 80px;
            width: 80px;
            color: white;
            font-size: 50px;
            background-color: rgba(226, 225, 225, 0.418);
            text-align: center;
            line-height: 80px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 5%;
            z-index: 2;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .bannerItem{
            padding: 330px 0;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
            transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
            transition: transform 7000ms ease, opacity 1500ms ease-in;
            transition: transform 7000ms ease, opacity 1500ms ease-in, -webkit-transform 7000ms ease;
            z-index: 1;
            border-radius: 5px;
            &::after{
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: rgba(0,0,0,0.2);
                z-index: -1;
                border-radius: 5px;
            }
        }
    
    
       
    }
    .navNewClass{
        position: fixed;
        top: 0;
        left: 0;
        width: 100% !important;
        padding: 8px 140px !important;
        z-index: 3;
        border-radius: 0px;
        box-shadow: 1px 1.332px 4px 3px #7c7c7c4d;
    }

}
.SubPage_Header{
    position: absolute;
    top: 0px;
    width: 100%;
    .nav{
        width: 100%;
        padding: 8px 130px;
    }
    
}