You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
710 lines
11 KiB
710 lines
11 KiB
1 year ago
|
.top-bar {
|
||
|
border-bottom: 1px solid rgba($white, .2);
|
||
|
}
|
||
|
.untree_co-hero, .bg-img {
|
||
|
background-size: cover;
|
||
|
background-position: center center;
|
||
|
background-repeat: no-repeat;
|
||
|
position: relative;
|
||
|
|
||
|
&.overlay {
|
||
|
position: relative;
|
||
|
&:before {
|
||
|
position: absolute;
|
||
|
content: "";
|
||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||
|
background: rgba($primary, .85);
|
||
|
z-index: -0;
|
||
|
|
||
|
}
|
||
|
}
|
||
|
> .container {
|
||
|
position: relative;
|
||
|
z-index: 2;
|
||
|
}
|
||
|
&, & > .container > .row {
|
||
|
height: 100vh;
|
||
|
min-height: 650px;
|
||
|
@include media-breakpoint-down(sm) {
|
||
|
min-height: 750px;
|
||
|
}
|
||
|
}
|
||
|
&.inner-page, &.inner-page > .container > .row {
|
||
|
height: 50vh;
|
||
|
min-height: 450px;
|
||
|
@include media-breakpoint-down(sm) {
|
||
|
min-height: 450px;
|
||
|
}
|
||
|
}
|
||
|
.caption {
|
||
|
text-transform: uppercase;
|
||
|
color: $white;
|
||
|
font-size: 12px;
|
||
|
font-weight: 700;
|
||
|
letter-spacing: .1rem;
|
||
|
}
|
||
|
.heading {
|
||
|
font-size: 45px;
|
||
|
font-weight: 700;
|
||
|
line-height: 1.4;
|
||
|
@include media-breakpoint-down(md) {
|
||
|
font-size: 30px;
|
||
|
}
|
||
|
}
|
||
|
.link-highlight {
|
||
|
color: $white;
|
||
|
position: relative;
|
||
|
display: inline;
|
||
|
box-shadow: 0 2px 0 0 rgba($white, .3);
|
||
|
transition: .3s all ease;
|
||
|
&:hover {
|
||
|
box-shadow: 0 2px 0 0 rgba($white, 1);
|
||
|
}
|
||
|
}
|
||
|
.desc {
|
||
|
font-size: 18px;
|
||
|
max-width: 450px;
|
||
|
@include media-breakpoint-down(md) {
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.cta-section {
|
||
|
&, & > .container > .row {
|
||
|
height: 70vh;
|
||
|
min-height: 450px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
.untree_co-section {
|
||
|
padding: 100px 0;
|
||
|
position: relative;
|
||
|
@include media-breakpoint-down(md) {
|
||
|
padding: 50px 0;
|
||
|
}
|
||
|
.heading {
|
||
|
h3 {
|
||
|
font-size: 35px;
|
||
|
color: $black;
|
||
|
}
|
||
|
@include media-breakpoint-down(md) {
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
strong {
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
.position-relative {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
|
||
|
.block-v1 {
|
||
|
position: relative;
|
||
|
z-index: 8;
|
||
|
padding: 30px;
|
||
|
// margin-top: -40px;
|
||
|
@include media-breakpoint-down(md) {
|
||
|
margin-bottom: 70px;
|
||
|
}
|
||
|
|
||
|
@include media-breakpoint-down(sm) {
|
||
|
margin-top: 0px;
|
||
|
margin-bottom: 30px;
|
||
|
|
||
|
}
|
||
|
[class^="icon-"] {
|
||
|
font-size: 35px;
|
||
|
color: $white;
|
||
|
margin-bottom: 30px;
|
||
|
display: block;
|
||
|
width: 75px;
|
||
|
height: 75px;
|
||
|
line-height: 75px;
|
||
|
text-align: center;
|
||
|
background: rgba($white, .1);
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
h3 {
|
||
|
font-size: 20px;
|
||
|
color: $white;
|
||
|
}
|
||
|
p {
|
||
|
color: rgba($white, .7);
|
||
|
}
|
||
|
*:last-child {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
&.color-1 {
|
||
|
background-color: #5cb100;
|
||
|
}
|
||
|
&.color-2 {
|
||
|
background-color: #ec661f;
|
||
|
}
|
||
|
&.color-3 {
|
||
|
background-color: #4fb0dc;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
.feature {
|
||
|
margin-bottom: 40px;
|
||
|
border: 1px solid rgba($black, .05);
|
||
|
background: $white;
|
||
|
padding: 30px;
|
||
|
border-radius: 4px;
|
||
|
text-align: center;
|
||
|
[class^="flaticon-"],
|
||
|
[class^="icon-"],
|
||
|
[class^="uil uil-"] {
|
||
|
position: relative;
|
||
|
&:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 60px;
|
||
|
left: -5px;
|
||
|
top: -5px;
|
||
|
border-radius: 50%;
|
||
|
border: 1px solid rgba($primary, .2);
|
||
|
}
|
||
|
margin-bottom: 30px;
|
||
|
font-size: 30px;
|
||
|
color: $primary;
|
||
|
// background: rgba($primary, .1);
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
line-height: 50px;
|
||
|
display: inline-block;
|
||
|
border-radius: 50%;
|
||
|
text-align: center;
|
||
|
|
||
|
&.color-1 {
|
||
|
background: rgba(#5cb100, .1);
|
||
|
color: #5cb100;
|
||
|
&:after {
|
||
|
border: 1px solid rgba(#5cb100, .2);
|
||
|
}
|
||
|
}
|
||
|
&.color-2 {
|
||
|
background: rgba(#ec661f, .1);
|
||
|
color: #ec661f;
|
||
|
&:after {
|
||
|
border: 1px solid rgba(#ec661f, .2);
|
||
|
}
|
||
|
}
|
||
|
&.color-3 {
|
||
|
background: rgba(#4fb0dc, .1);
|
||
|
color: #4fb0dc;
|
||
|
&:after {
|
||
|
border: 1px solid rgba(#4fb0dc, .2);
|
||
|
}
|
||
|
}
|
||
|
&.color-4 {
|
||
|
background: rgba(#6b53ab, .1);
|
||
|
color: #6b53ab;
|
||
|
&:after {
|
||
|
border: 1px solid rgba(#6b53ab, .2);
|
||
|
}
|
||
|
}
|
||
|
&.color-5 {
|
||
|
background: rgba($primary, .1);
|
||
|
color: $primary;
|
||
|
&:after {
|
||
|
border: 1px solid rgba($primary, .2);
|
||
|
}
|
||
|
}
|
||
|
&.color-6 {
|
||
|
background: rgba(#fd9800, .1);
|
||
|
color: #fd9800;
|
||
|
&:after {
|
||
|
border: 1px solid rgba(#fd9800, .2);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
h3 {
|
||
|
font-size: 18px;
|
||
|
color: $primary;
|
||
|
}
|
||
|
p {
|
||
|
font-size: 14px;
|
||
|
color: rgba($black, .5)!important;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
.bg-1 {
|
||
|
&:before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
width: 150%;
|
||
|
height: 70%;
|
||
|
right: -100%;
|
||
|
top: -40px;
|
||
|
z-index: -1;
|
||
|
background: rgba($primary, .2);
|
||
|
}
|
||
|
}
|
||
|
.bg-2 {
|
||
|
&:before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
// width: 150%;
|
||
|
height: 40%;
|
||
|
width: 70%;
|
||
|
left: -50%;
|
||
|
top: 0px;
|
||
|
// bottom: 0;
|
||
|
z-index: -1;
|
||
|
background: rgba(#ec661f, .1);
|
||
|
}
|
||
|
@include media-breakpoint-down(md) {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.line-bottom {
|
||
|
position: relative;
|
||
|
padding-bottom: 0px;
|
||
|
color: $primary;
|
||
|
&:before {
|
||
|
display: none;
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
width: 40px;
|
||
|
height: 3px;
|
||
|
background: #ec661f;
|
||
|
bottom: 0;
|
||
|
|
||
|
}
|
||
|
&.text-center {
|
||
|
&:before {
|
||
|
left: 50%;
|
||
|
transform: translateX(-50%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.media-h {
|
||
|
margin-bottom: 30px;
|
||
|
box-shadow: 0 15px 30px -10px rgba($black, .1);
|
||
|
background: $white;
|
||
|
figure {
|
||
|
flex: 0 0 170px;
|
||
|
position: relative;
|
||
|
margin-bottom: 0;
|
||
|
overflow: hidden;
|
||
|
img {
|
||
|
object-fit: cover;
|
||
|
position: absolute;
|
||
|
height: 100%;
|
||
|
margin-bottom: 0;
|
||
|
width: 100%;
|
||
|
transform: scale(1.0);
|
||
|
transition: .3s transform ease;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.media-h-body {
|
||
|
padding: 20px;
|
||
|
h2 {
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
}
|
||
|
&:hover {
|
||
|
img {
|
||
|
transform: scale(1.05);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
.meta {
|
||
|
font-size: 14px;
|
||
|
color: #ccc;
|
||
|
}
|
||
|
|
||
|
.video-play-btn {
|
||
|
width: 80px;
|
||
|
height: 80px;
|
||
|
border-radius: 50%;
|
||
|
position: relative;
|
||
|
border-radius: 50%;
|
||
|
background: $primary;
|
||
|
color: $white;
|
||
|
display: inline-block;
|
||
|
&:before {
|
||
|
width: 90px;
|
||
|
height: 90px;
|
||
|
border: 2px solid $primary;
|
||
|
position: absolute;
|
||
|
content: "";
|
||
|
border-radius: 50%;
|
||
|
left: -5px;
|
||
|
top: -5px;
|
||
|
}
|
||
|
span {
|
||
|
font-size: 20px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
color: $white;
|
||
|
transform: translate(-40%, -50%);
|
||
|
}
|
||
|
&:hover {
|
||
|
span {
|
||
|
color: $white;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.block-testimonial {
|
||
|
// text-align: center;
|
||
|
p {
|
||
|
font-size: 18px;
|
||
|
color: $black;
|
||
|
line-height: 2;
|
||
|
// margin-bottom: 30px;
|
||
|
}
|
||
|
.author {
|
||
|
display: block;
|
||
|
img {
|
||
|
margin: 0 auto;
|
||
|
width: 80px;
|
||
|
margin-bottom: 20px;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
h3 {
|
||
|
font-size: 18px;
|
||
|
color: $primary;
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
.position {
|
||
|
font-size: 14px;
|
||
|
// color: lighten($black, 70%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.wide-slider-testimonial {
|
||
|
.owl-dots {
|
||
|
position: absolute;
|
||
|
display: inline-block;
|
||
|
width: auto;
|
||
|
// text-align: left!important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.accordion-img {
|
||
|
flex: 0 0 180px;
|
||
|
}
|
||
|
|
||
|
.instagram-gallery {
|
||
|
display: flex;
|
||
|
flex-wrap: wrap;
|
||
|
margin-bottom: -8px;
|
||
|
margin-left: -8px;
|
||
|
li {
|
||
|
flex-basis: 33.333%;
|
||
|
max-width: 33.333%;
|
||
|
padding-left: 8px;
|
||
|
padding-bottom: 8px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.count-numbers {
|
||
|
.counter {
|
||
|
font-size: 26px;
|
||
|
font-family: $font-family;
|
||
|
color: $primary;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.pricing {
|
||
|
text-align: center;
|
||
|
padding: 40px;
|
||
|
border: 1px solid #efefef;
|
||
|
border-radius: 4px;
|
||
|
.pricing-plan-title {
|
||
|
color: $primary;
|
||
|
}
|
||
|
@include media-breakpoint-down(md) {
|
||
|
padding: 40px 25px;
|
||
|
}
|
||
|
.pricing-img {
|
||
|
width: 90px;
|
||
|
height: 90px;
|
||
|
margin: 0 auto;
|
||
|
&:before {
|
||
|
position: absolute;
|
||
|
content: "";
|
||
|
background: rgba($primary, .2);
|
||
|
z-index: -1;
|
||
|
width: 70px;
|
||
|
height: 70px;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
img {
|
||
|
height: 90px;
|
||
|
// max-width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.pricing-body {
|
||
|
.price {
|
||
|
margin-bottom: 20px;
|
||
|
|
||
|
.fig {
|
||
|
|
||
|
color: $primary;
|
||
|
font-size: 30px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.staff {
|
||
|
padding: 20px;
|
||
|
img {
|
||
|
border-radius: 40px;
|
||
|
width: 200px;
|
||
|
}
|
||
|
h3 {
|
||
|
font-size: 20px;
|
||
|
color: $primary;
|
||
|
}
|
||
|
.position {
|
||
|
color: rgba($dark, .5);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.custom-pagination {
|
||
|
li {
|
||
|
display: inline-block;
|
||
|
a {
|
||
|
display: inline-block;
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
line-height: 50px;
|
||
|
font-size: 18px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
&.active {
|
||
|
> a {
|
||
|
background: $primary;
|
||
|
color: $white;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.contact-info {
|
||
|
i {
|
||
|
font-size: 20px;
|
||
|
float: left;
|
||
|
width: 44px;
|
||
|
height: 44px;
|
||
|
background: $primary;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
border-radius: 50px;
|
||
|
transition: all 0.3s;
|
||
|
color: $white;
|
||
|
}
|
||
|
h4 {
|
||
|
font-size: 18px;
|
||
|
padding: 0 0 0 60px;
|
||
|
}
|
||
|
p {
|
||
|
padding: 0 0 0 60px;
|
||
|
margin-bottom: 0;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.item {
|
||
|
border: none;
|
||
|
margin-bottom: 30px;
|
||
|
border-radius: 4px;
|
||
|
display: block;
|
||
|
a {
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
border-radius: 4px;
|
||
|
display: block;
|
||
|
img {
|
||
|
position: relative;
|
||
|
transform: scale(1.0);
|
||
|
transition: .3s all ease-in-out;
|
||
|
}
|
||
|
}
|
||
|
.item-wrap {
|
||
|
display: block;
|
||
|
position: relative;
|
||
|
&:after {
|
||
|
z-index: 2;
|
||
|
position: absolute;
|
||
|
content: "";
|
||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||
|
background: rgba($black, .4);
|
||
|
visibility: hidden;
|
||
|
opacity: 0;
|
||
|
transition: .3s all ease-in-out;
|
||
|
}
|
||
|
> span {
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
z-index: 3;
|
||
|
transform: translate(-50%, -50%) scale(0.0);
|
||
|
color: $white;
|
||
|
font-size: 1.7rem;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
// margin-top: 10px;
|
||
|
transition: .3s all ease;
|
||
|
}
|
||
|
&:hover {
|
||
|
&:after {
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
}
|
||
|
span {
|
||
|
margin-top: 0px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
transform: translate(-50%, -50%) scale(1.0);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
a {
|
||
|
img {
|
||
|
transform: scale(1.05);
|
||
|
transition: .3s all ease-in-out;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.category {
|
||
|
display: inline-block;
|
||
|
padding: 20px;
|
||
|
background: rgba($primary, .05);
|
||
|
border-radius: 4px;
|
||
|
// margin-bottom: 30px;
|
||
|
text-decoration: none!important;
|
||
|
|
||
|
&, h3, span {
|
||
|
transition: .3s all ease;
|
||
|
}
|
||
|
h3 {
|
||
|
font-family: $font-family-sans-serif;
|
||
|
margin: 0;
|
||
|
font-size: 16px;
|
||
|
line-height: 1;
|
||
|
color: $dark;
|
||
|
}
|
||
|
span {
|
||
|
font-size: 13px;
|
||
|
color: rgba($dark, .4);
|
||
|
}
|
||
|
.uil {
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
color: $secondary;
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
border-radius: 10px;
|
||
|
margin-right: 20px;
|
||
|
background: $white;
|
||
|
font-size: 30px;
|
||
|
line-height: 40px;
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
background: $secondary;
|
||
|
h3, span {
|
||
|
color: $white;
|
||
|
}
|
||
|
span {
|
||
|
color: rgba($white, .5);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
.section-title {
|
||
|
.heading {
|
||
|
font-size: 30px;
|
||
|
font-weight: 700;
|
||
|
@include media-breakpoint-down(md) {
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.services-section {
|
||
|
background: $light;
|
||
|
padding: 70px 0;
|
||
|
}
|
||
|
|
||
|
.img-wrap-2 {
|
||
|
margin-top: -120px;
|
||
|
position: relative;
|
||
|
z-index: 9;
|
||
|
.dotted {
|
||
|
&:before {
|
||
|
position: absolute;
|
||
|
content: "";
|
||
|
background-image: url('../images/dotted.png');
|
||
|
height: 273px;
|
||
|
width: 313px;
|
||
|
z-index: -1;
|
||
|
bottom: -50px;
|
||
|
left: -50px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.custom-media {
|
||
|
background: $white;
|
||
|
box-shadow: 0 15px 30px -5px rgba($black, .1);
|
||
|
h3 {
|
||
|
font-family: $font-family-sans-serif;
|
||
|
font-size: 18px;
|
||
|
color: $black;
|
||
|
}
|
||
|
p {
|
||
|
color: rgba($black, .4);
|
||
|
}
|
||
|
.review {
|
||
|
color: $yellow;
|
||
|
}
|
||
|
.custom-media-body {
|
||
|
padding: 30px;
|
||
|
.price {
|
||
|
font-size: 22px;
|
||
|
color: $dark;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.form-box {
|
||
|
background: $white;
|
||
|
padding: 40px;
|
||
|
margin-top: -200px;
|
||
|
border-radius: 7px;
|
||
|
box-shadow: 0 15px 30px -5px rgba($black, .1);
|
||
|
|
||
|
}
|