// Header left right padding .header-transparrent { position: absolute; top: 0; right: 0; left: 0; z-index: 9; } // Header Bottom .main-header{ // position: relative; z-index: 3; // header smoll device padding @media #{$md}{ padding: 11px 0; } @media #{$sm}{ padding: 11px 0; } @media #{$xs}{ padding: 11px 0; } .main-menu{ @media #{$laptop}{ margin-right: 30px; } & ul{ & li{ display: inline-block; position: relative; z-index: 1; margin: 0 5px; & > a{ color: #450b78; font-weight: 400; padding: 39px 16px; font-weight: 400; @media #{$lg}{ padding: 39px 15px; } display: block; font-size: 16px; @include transition(.3s); text-transform: capitalize; &::before{ position: absolute; content: ""; left: 0; bottom: 20px; background:#a60dcf; height: 2px; width: 0; transition: .3s; } } &:hover{ & > a{ // color:$theme-color; &::before{ width: 100%; } } } &.active{ & > a::before{ width: 100%; } } } & ul.submenu{ position: absolute; width: 170px; background: #fff; left: 0; top: 80%; visibility: hidden; opacity: 0; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); padding: 17px 0; // border-top: 5px solid #4043bc; @include transition(.3s); & > li{ margin-left: 7px; display: block; & > a{ padding: 6px 10px !important; font-size: 14px; text-transform: capitalize; &::before{ position: absolute; content: ""; left: -5px; background:#a60dcf; height: 2px; width: 0; transition: .3s; top: 50%; } &:hover{ padding-left: 15px !important; &::before{ width: 10px; } } } } } } } .logo{ & img{ } } } .header-area .header-top .header-info-right .header-social a i { @include transition(.4s); transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } .header-area .header-top .header-info-right .header-social a:hover i { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .main-header ul > li:hover > ul.submenu { visibility: visible; opacity: 1; top: 100%; } .top-bg{ background:#002d5b; } // header Sticky Responsive .header-sticky ul li a { padding: 10px 19px; } .header-sticky.sticky-bar.sticky .main-menu ul>li>a { padding: 25px 16px; } .header-sticky.sticky-bar.sticky .main-menu ul>li>a::before { bottom: 11px; } .slicknav_menu .slicknav_icon-bar { background-color: $theme-color !important; } .slicknav_nav { margin-top: 0px; } // Sticky Menu .header-sticky.sticky-bar.sticky .header-btn { & .get-btn{ padding: 20px 20px; } } .header-area .slicknav_btn { top: -43px; } .slicknav_menu .slicknav_nav a:hover { background: transparent; color: $theme-color; } .slicknav_menu { background: transparent; margin-top: 5px !important; } .mobile_menu { position: absolute; right: 0px; width: 100%; z-index: 99; } // .slider-area .slider-bottom .slider-video { // position: absolute; // right: 0; } // .slider-area .slider-bottom .slider-video a { // background: #fff; // width: 50px; // height: 50px; // display: block; // text-align: center; // line-height: 50px; // border-radius: 50%; // position: relative; // right: -25px; } // .slider-area .slider-bottom .slider-video a::before { // position: absolute; // border: 37px solid rgba(255, 255, 255, 0.302); // content: ""; // border-radius: 50%; // left: -12px; // top: -12px; // right: 0; // z-index: -1; } // .slider-area .slider-bottom .slider-video a img { // display: inline-block; // left: 2px; // top: -1px; // position: relative; }