363 lines
11 KiB
SCSS
363 lines
11 KiB
SCSS
|
.header-area{
|
||
|
|
// position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
z-index: 9;
|
||
|
|
position: absolute;
|
||
|
|
// padding-top: 28px;
|
||
|
|
@media #{$mobile_device} {
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
@media #{$tablet_device} {
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
.main-header-area{
|
||
|
|
padding: 18px 0;
|
||
|
|
background: #fff;
|
||
|
|
background: transparent;
|
||
|
|
// &.details_nav_bg{
|
||
|
|
// background: #727272;
|
||
|
|
// padding-bottom: 0;
|
||
|
|
// @media #{$mobile_device} {
|
||
|
|
// padding-bottom: 10px;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
padding: 30px 150px;
|
||
|
|
@media #{$mobile_device} {
|
||
|
|
padding: 10px 0px;
|
||
|
|
}
|
||
|
|
@media #{$tablet_device} {
|
||
|
|
padding: 10px 10px;
|
||
|
|
}
|
||
|
|
@media #{$mid_device} {
|
||
|
|
padding: 10px 20px;
|
||
|
|
}
|
||
|
|
@media #{$large_device} {
|
||
|
|
padding: 10px 50px;
|
||
|
|
}
|
||
|
|
.logo-img{
|
||
|
|
text-align: center;
|
||
|
|
@media #{$mobile_device} {
|
||
|
|
// padding-left: 20px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
@media #{$tablet_device} {
|
||
|
|
// padding-left: 20px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
@media #{$mid_device} {
|
||
|
|
// padding-left: 20px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
img{
|
||
|
|
@media #{$mobile_device} {
|
||
|
|
// padding-left: 20px;
|
||
|
|
width: 70px;
|
||
|
|
}
|
||
|
|
@media #{$tablet_device} {
|
||
|
|
// padding-left: 20px;
|
||
|
|
width: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.social_icon{
|
||
|
|
ul{
|
||
|
|
li{
|
||
|
|
display: inline-block;
|
||
|
|
a{
|
||
|
|
display: inline-block;
|
||
|
|
width: 35px;
|
||
|
|
height: 35px;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 35px;
|
||
|
|
@include border-radius(50%);
|
||
|
|
border: 1px solid #41393A;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 6px;
|
||
|
|
&:hover{
|
||
|
|
color: #ED1B1B;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.Appointment{
|
||
|
|
@include flexbox();
|
||
|
|
@include align-items(center);
|
||
|
|
@include justify-content(flex-end);
|
||
|
|
.search_button{
|
||
|
|
@media #{$mid_device} {
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
@media #{$large_device} {
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
|
||
|
|
i{
|
||
|
|
color: #E8E8E8;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.socail_links{
|
||
|
|
ul{
|
||
|
|
li{
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
a{
|
||
|
|
color: #A8A7A0;
|
||
|
|
margin: 0 10px;
|
||
|
|
font-size: 15px;
|
||
|
|
&:hover{
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.book_btn{
|
||
|
|
margin-left: 30px;
|
||
|
|
@media #{$mid_device} {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
@media #{$large_device} {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
background: #ED1B1B;
|
||
|
|
padding: 12px 26px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
color: #fff;
|
||
|
|
@include border-radius(4px);
|
||
|
|
@media #{$mid_device} {
|
||
|
|
padding: 12px 20px;
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
background:#ED1B1B;
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #ED1B1B;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.main-menu{
|
||
|
|
text-align: center;
|
||
|
|
padding: 12px 0;
|
||
|
|
ul{
|
||
|
|
li{
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
margin: 0 10px;
|
||
|
|
// @media #{$mid_device} {
|
||
|
|
// margin-right: 20px;
|
||
|
|
// }
|
||
|
|
// @media #{$large_device} {
|
||
|
|
// margin-right: 15px;
|
||
|
|
// }
|
||
|
|
a{
|
||
|
|
color: #fff;
|
||
|
|
font-size: 15px;
|
||
|
|
text-transform: capitalize;
|
||
|
|
font-weight: 400;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0px 0px 0px 0px;
|
||
|
|
font-family: $font1;
|
||
|
|
position: relative;
|
||
|
|
text-transform:capitalize;
|
||
|
|
|
||
|
|
@media #{$mid_device} {
|
||
|
|
// padding: 41px 0px 10px 0px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
@media #{$large_device} {
|
||
|
|
// padding: 41px 0px 10px 0px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
i{
|
||
|
|
font-size: 9px;
|
||
|
|
@media #{$mobile_device}{
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
@media #{$tablet_device}{
|
||
|
|
display: none !important;;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// &::before {
|
||
|
|
// position: absolute;
|
||
|
|
// content: "";
|
||
|
|
// background: #fff;
|
||
|
|
// width: 100%;
|
||
|
|
// height: 2px;
|
||
|
|
// bottom: 0;
|
||
|
|
// left: 0;
|
||
|
|
// opacity: 0;
|
||
|
|
// transform: scaleX(0);
|
||
|
|
// @include transition(.3s);
|
||
|
|
// }
|
||
|
|
&:hover::before{
|
||
|
|
opacity: 1;
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
&.active{
|
||
|
|
&::before{
|
||
|
|
opacity: 1;
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
color: #ED1B1B;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.submenu {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 160%;
|
||
|
|
background: #fff;
|
||
|
|
width: 200px;
|
||
|
|
z-index: 2;
|
||
|
|
box-shadow: 0 0 10px rgba(0,0,0,.02);
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
text-align: left;
|
||
|
|
@include transition(.6s);
|
||
|
|
li{
|
||
|
|
display: block;
|
||
|
|
a{
|
||
|
|
padding: 10px 15px;
|
||
|
|
position: inherit;
|
||
|
|
@include transition(.3s);
|
||
|
|
display: block;
|
||
|
|
color: #000;
|
||
|
|
&::before{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover a{
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover > .submenu{
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
top: 150%;
|
||
|
|
}
|
||
|
|
&:hover > a::before{
|
||
|
|
opacity: 1;
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
&:first-child a {
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.sticky {
|
||
|
|
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
top: -70px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 990;
|
||
|
|
transform: translateY(70px);
|
||
|
|
transition: transform 500ms ease, background 500ms ease;
|
||
|
|
-webkit-transition: transform 500ms ease, background 500ms ease;
|
||
|
|
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
|
||
|
|
// padding: 10px 150px;
|
||
|
|
background: rgba(255, 255, 255,.96);
|
||
|
|
background: #001D38;
|
||
|
|
padding-bottom: 0;
|
||
|
|
padding: 20px 150px;
|
||
|
|
@media #{$mobile_device} {
|
||
|
|
padding: 10px 10px;
|
||
|
|
}
|
||
|
|
@media #{$tablet_device} {
|
||
|
|
padding: 10px 10px;
|
||
|
|
}
|
||
|
|
@media #{$mid_device} {
|
||
|
|
padding: 20px 50px;
|
||
|
|
}
|
||
|
|
@media #{$large_device} {
|
||
|
|
padding: 10px 20px
|
||
|
|
}
|
||
|
|
.main-menu{
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.header_bottom_border{
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.header_bottom_border.white_border {
|
||
|
|
border-bottom: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
// .header-top_area{
|
||
|
|
// padding: 12px 0;
|
||
|
|
// background: rgba(44, 44, 44, 0.50);
|
||
|
|
// .social_media_links{
|
||
|
|
// @media #{$mobile_device} {
|
||
|
|
// text-align: center;
|
||
|
|
// }
|
||
|
|
// a{
|
||
|
|
// font-size: 15px;
|
||
|
|
// color: #fff;
|
||
|
|
// margin-right: 12px;
|
||
|
|
// &:hover{
|
||
|
|
// color: #ED1B1B;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// .short_contact_list{
|
||
|
|
// text-align: right;
|
||
|
|
// @media #{$mobile_device} {
|
||
|
|
// text-align: center;
|
||
|
|
// }
|
||
|
|
// ul{
|
||
|
|
// li{
|
||
|
|
// display: inline-block;
|
||
|
|
// a{
|
||
|
|
// font-size: 13px;
|
||
|
|
// color: #fff;
|
||
|
|
// margin-left: 50px;
|
||
|
|
// @media #{$mobile_device}
|
||
|
|
// {
|
||
|
|
// margin-left: 0;
|
||
|
|
// margin: 0 5px;
|
||
|
|
// }
|
||
|
|
// i{
|
||
|
|
// color: #ED1B1B;
|
||
|
|
// margin-right: 7px;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
// .header_bottom_border {
|
||
|
|
// border-bottom: 1px solid #4B4E50;
|
||
|
|
// padding-bottom: 22px;
|
||
|
|
// &.white_border{
|
||
|
|
// border-bottom: 1px solid rgba(255,255,255,.2) !important;
|
||
|
|
// @media #{$mobile_device}{
|
||
|
|
// padding: 0;
|
||
|
|
// border-bottom: none;;
|
||
|
|
// }
|
||
|
|
// @media #{$mobile_device}{
|
||
|
|
// padding: 0;
|
||
|
|
// border-bottom: none !important ;;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// @media #{$mobile_device}{
|
||
|
|
// padding: 0;
|
||
|
|
// border-bottom: none;;
|
||
|
|
// }
|
||
|
|
// }
|