File: /home/directinsuranceproviders/public_html/assets/scss/_hero.scss
/*=========================
03. Hero css
==========================*/
/* Hero Common css */
.hero-search-wrapper{
& form{
& .form_group{
& i{
position: absolute;
top: 29px;
right: 20px;
}
}
& .form_control{
padding: 0 20px;
height: 70px;
border-radius: 3px;
@media #{$xm}{
margin-bottom: 20px;
}
}
& .nice-select{
height: 70px;
line-height: 70px;
border-radius: 3px;
padding: 0 20px;
@media #{$xm}{
margin-bottom: 20px;
}
}
& .main-btn{
padding: 20px 25px;
line-height: 28px;
width: 100%;
justify-content: center;
border-radius: 4px;
}
}
}
.hero-content{
& h1{
@media #{$lg}{
font-size: 60px;
line-height: 75px;
}
@media #{$md}{
font-size: 42px;
line-height: 50px;
}
@media #{$xs}{
font-size: 32px;
line-height: 45px;
}
}
& h3{
@media #{$xm}{
font-size: 20px;
line-height: 30px;
}
}
}
/* Hero Area One css */
.hero-wrapper-one{
position: relative;
z-index: 1;
padding: 220px 0 270px;
&:after,&:before{
position: absolute;
top: 0;
content: '';
height: 100%;
}
&:after{
width: 43.5%;
right: 0;
background: url(../images/hero/hero-one-bg-2.jpg) no-repeat center center;
background-size: cover;
@media #{$xm}{
display: none;
}
}
&:before{
width: 56.5%;
left: 0;
background: url(../images/hero/hero-one-bg-1.jpg)no-repeat center center;
background-size: cover;
@media #{$xm}{
width: 100%;
}
}
& .hero-content{
position: relative;
z-index: 1;
& h1{
margin-bottom: 22px;
}
& h3{
margin-bottom: 45px;
}
& .hero-search-wrapper{
padding: 15px;
background-color: $white;
border-radius: 4px;
margin-bottom: 45px;
& form{
& .main-btn{
padding: 20px 22px;
@media #{$lp}{
padding: 20px 20px;
}
@media #{$lg}{
padding: 20px 10px;
font-size: 13px;
}
}
& .form_control{
background-color: $light-bg;
}
}
}
& p.tags{
color: $heading-color;
font-weight: 500;
& span{
margin-right: 10px;
}
}
}
}
/* Hero Area Two css */
.hero-wrapper-two{
position: relative;
z-index: 1;
padding: 244px 0 257px;
@media #{$md}{
padding: 244px 0 200px;
}
&:after{
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: rgba(17, 20, 41, 0.549);
z-index: -1;
}
& .hero-content{
text-align: center;
& h3,
& h1{
@extend %white;
}
& h1{
margin-bottom: 25px;
}
& h3{
letter-spacing: 2px;
font-size: 36px;
margin-bottom: 70px;
@media #{$xm}{
font-size: 20px;
line-height: 30px;
}
}
& .hero-search-wrapper{
padding: 15px;
background-color: rgba(255, 255, 255, 0.54);
border-radius: 4px;
margin-bottom: 45px;
@media #{$xm}{
padding: 15px 15px 0;
}
& form{
& .main-btn{
padding: 21px 24px;
@media #{$lg}{
padding: 21px 10px;
font-size: 13px;
}
}
}
}
& p.tags{
@extend %white;
& span{
@extend %secondary;
margin-right: 10px;
}
}
}
}
/* Hero Area Three css */
.hero-wrapper-three{
position: relative;
z-index: 1;
padding: 302px 0 185px;
&:after{
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: rgba(17, 20, 41, 0.75);
z-index: -1;
}
& .hero-content{
& h1{
@extend %white;
margin-bottom: 20px;
}
& h3{
font-weight: 500;
@extend %white;
margin-bottom: 30px;
}
& p.tags{
& span{
@extend %primary;
margin-right: 10px;
font-weight: 700;
}
}
}
& .hero-search-wrapper{
margin-top: 100px;
padding: 30px;
background-color: $white;
& .search-nav{
& .nav-tabs{
border-bottom: none;
}
& .nav-link{
border: none;
background-color: $secondary-color;
border-radius: 3px;
margin-right: 10px;
margin-bottom: 10px;
font: 700 18px $quicksand;
color: $heading-color;
padding: 11px 25px;
& i{
margin-right: 10px;
}
&.active{
@extend %bg-hover;
@extend %white;
}
}
}
& p.tags{
float: right;
@media #{$xm}{
float: left;
}
}
& form{
& .form_control{
border: 1px solid $border;
}
}
}
}
/* Breadcrumbs css */
.breadcrumbs-wrapper{
position: relative;
z-index: 1;
padding: 125px 0 100px;
&:after,&:before{
position: absolute;
top: 0;
content: '';
width: 50%;
height: 100%;
}
&:after{
right: 0;
background: url(../images/bg/breadcrumbs-bg-2.jpg) no-repeat center;
background-size: cover;
@media #{$xm}{
display: none;
}
}
&:before{
left: 0;
background: url(../images/bg/breadcrumbs-bg-1.jpg)no-repeat center;
background-size: cover;
@media #{$xm}{
width: 100%;
}
}
& .page-title{
& h1.title{
font-size: 60px;
margin-bottom: 20px;
@media #{$xm}{
font-size: 36px;
line-height: 45px;
}
}
& .breadcrumbs-link{
padding: 17px 35px;
display: inline-block;
border-radius: 29px;
background-color: rgba(255, 255, 255, 0.75);
& li{
display: inline-block;
color: #0d0d0d;
font-weight: 700;
& a{
font-weight: 700;
}
&:after{
content: '|';
display: inline-block;
margin-left: 10px;
margin-right: 7px;
}
&:last-child{
&:after{
display: none;
}
}
}
}
}
}
/* Listing-page-Breadcrumbs css */
.page-breadcrumbs-one{
border-bottom: 1px solid $border;
}
.page-breadcrumbs-two{
height: 500px;
}
.breadcrumbs-wrapper-one{
& .listing-info-name{
& .info-name{
align-items: center;
@media #{$xm}{
margin-bottom: 20px;
}
@media #{$xs}{
flex-direction: column;
align-items: flex-start;
}
& .thumb{
min-width: 120px;
max-width: 120px;
height: 120px;
margin-right: 40px;
@media #{$xs}{
margin-bottom: 20px;
}
& img{
border-radius: 3px;
}
}
}
}
& .listing-info-content{
margin-left: 70px;
@media #{$xm}{
margin-left: 0;
}
& .content{
& .listing-meta{
& ul{
& li{
margin-right: 30px;
display: inline-block;
&:last-child{
margin-right: 0;
}
& span{
& i{
margin-right: 10px;
}
}
}
}
}
}
}
& .button{
float: right;
@media #{$xs}{
float: none;
margin-top: 20px;
}
& .icon-btn{
width: 65px;
height: 65px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid $border;
font-size: 20px;
margin-left: 5px;
&:hover{
@extend %bg-hover;
@extend %white;
}
}
}
}