/home/moonrcjl/template.moontelict.com/sass-agency/assets/sass/pages/_index-1.scss
// Start Brand Area Home 1
.mt__brand-logo-itme img {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.mt__brand-logo-area-home-01{
position: relative;
background-color: $mt__secondary-color;
padding-bottom: 155px;
&.mt-about-brand {
padding-bottom: 30px;
}
&.mt__brand-logo-area-home-02{
padding-top: 0;
padding-bottom: 0;
}
&.mt__brand-blog-inner{
padding-bottom: 100px;
@include mt__screen-991{
padding-bottom: 70px;
}
@include mt__screen-767{
padding-bottom: 60px;
}
}
@include mt__screen-991{
margin-top: -80px;
z-index: 1;
}
@include mt__screen-575{
margin-top: -80px;
z-index: 1;
}
.swiper-slide {
text-align: center;
white-space: nowrap;
}
.swiper-wrapper {
display: flex;
justify-content: space-between !important;
}
.mt__brand-logo-title-part{
text-align: center;
margin-bottom: 65px;
@include mt__screen-575{
margin-bottom: 30px;
}
.mt__brand-logo-title{
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
line-height: 34px;
margin: 0;
}
}
.mt__brand-logo-icon{
transition: linear 0.3s;
&:hover{
opacity: 0.5;
}
}
}
// End Brand Area Home 1
// Start Our Services Area Home 1
.mt__our-services-area-home-1{
position: relative;
background-color: $mt__secondary-color;
padding-bottom: 100px;
z-index: 1;
@include mt__screen-991{
padding-bottom: 70px;
}
@include mt__screen-767{
padding-bottom: 50px;
padding-top: 60px;
}
&.mt-service-aboutpage{
@include mt__screen-767{
padding-top: 140px;
}
}
.mt__our-services-area-bg-shep-1{
display:inline-block;
width: 424px;
height: 424px;
border-radius: 424px;
opacity: 0.5;
background: #FD5B38;
filter: blur(250px);
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.mt__our-services-wrapper{
background-color: $mt__primary-color;
border-radius: 50px;
padding: 105px 102px 105px 102px;
position: relative;
.mt__services-area-shep-home-1{
position: absolute;
top: -55px;
z-index: 1;
right: -130px;
@include mt__screen-575{
top: -148px;
z-index: 1;
right: -64px;
}
}
@include mt__screen-1499{
padding-left: 50px;
padding-right: 50px;
}
.mt__title-style-01{
margin-top: 26px;
@include mt__screen-767{
margin-top: 5px;
}
}
.mt__our-services-inner{
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 60px;
flex-wrap: wrap;
@include mt__screen-439{
display: grid;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.mt__services-item{
background-image: url(../images/bg/services-bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 21px;
position: relative;
transition: 1.3s ease;
width: 306px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
background-position: center center;
&:hover{
background-image: url(../images/bg/services-bg-hover.png);
cursor: pointer;
.mt__services-icon{
background-color: #5177FF;
opacity: 0.5;
svg{
path{
fill:$mt__primary-color;
}
}
}
.mt__services-item-shep-1{
svg{
path{
stroke:$mt__primary-color;
opacity: 0.4;
}
}
}
.mt__services-item-title{
color: $mt__primary-color;
}
.mt__services-item-short-discription{
color: $mt__primary-color;
}
.mt__services-read-more-icon{
color: $mt__primary-color;
}
}
.mt__services-item-shep-1{
position: absolute;
top: 32px;
right: 25.5px;
z-index: 1;
}
.mt__services-icon{
width: 60px;
height: 60px;
display: inline-block;
text-align: center;
line-height: 55px;
background-color: $mt__border-color02;
border-radius: 50%;
}
.mt__services-item-title{
font-size: 24px;
font-weight: 700;
color: $mt__secondary-color;
line-height: 34px;
text-transform: capitalize;
margin-top: 26px;
}
.mt__services-item-short-discription{
color: $mt__border-color01;
font-size: 16px;
font-weight: 400;
margin-top: 18px;
}
.mt__services-read-more-icon{
display: flex;
align-items: center;
margin-top: 26px;
gap: 10px;
font-size: 16px;
font-weight: 700;
color: $mt__secondary-color;
font-weight: $mt__secondary-font;
line-height: 26px;
}
}
}
}
}
// End Our Services Area Home 1
// Start Sass Design Area Home 1
.mt__sass-design-area-home-1{
position: relative;
background-color:$mt__secondary-color;
padding-top: 55px;
padding-bottom: 90px;
@include mt__screen-991{
padding-bottom: 150px;
}
.mt__sass-design-wrapper{
display: flex;
align-items: center;
gap: 60px;
justify-content: center;
margin-bottom: 60px;
@include mt__screen-991{
display: block;
}
.mt__sass-design-img-content{
@include mt__screen-1299{
width: 40%;
}
@include mt__screen-1199{
width: unset;
}
@include mt__screen-991{
margin-left: auto;
margin-right: auto;
max-width: max-content;
}
}
.mt__sass-desing-text-content{
@include mt__screen-991{
text-align: center;
margin-top: 45px;
}
.mt__sub-title-style-02{
margin-top: 20px;
margin-bottom: 25px;
}
.mt__title-style-02{
@include mt__screen-1199{
br{
display: none;
}
}
}
.mt__sass-design-options{
margin-bottom: 60px;
@include mt__screen-991{
margin-left: auto;
margin-right: auto;
max-width: max-content;
margin-bottom: 35px;
}
ul{
li{
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
&:last-child{
margin-bottom: 0;
}
.mt__sass-design-option{
font-size: 16px;
font-weight: 700;
color: $mt__primary-color;
font-family: $mt__secondary-font;
line-height: 26px;
}
}
}
&.mt__analytics-wrapper{
.mt__analytics-itmes{
display: flex;
align-items: center;
gap: 62px;
@include mt__screen-575{
display: block;
}
.mt__analytics-item{
display: flex;
align-items: center;
gap: 12px;
&:last-child{
@include mt__screen-575{
margin-top: 15px;
}
}
@include mt__screen-439{
display: block;
}
&:hover{
.mt__analytic-icon{
transform: rotateY(360deg);
}
}
.mt__analytic-text{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__primary-color;
text-transform: capitalize;
font-family: $mt__secondary-font;
@include mt__screen-575{
margin-top: 8px;
br{
display: none;
}
}
}
.mt__analytic-icon{
transition: 0.5s;
@include mt__screen-439{
max-width: max-content;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
}
}
}
}
}
.mt__sass-design-area-btn{
display: flex;
border-radius: 50px;
padding-left: 22px;
padding-right: 22px;
align-items: center;
max-width: max-content;
@include mt__screen-991{
margin-left: auto;
margin-right: auto;
}
}
}
}
}
// End Sass Design Area Home 1
// Start Testimonial Area Home 1
.mt__testimonial-area-home-1{
position: relative;
background-color: $mt__secondary-color;
padding-bottom: 100px;
.mt__testimonial-area-title-part{
.mt__services-title-meta{
background-color: #272729;
color: $mt__primary-color;
}
.mt__title-style-01{
color: $mt__primary-color;
}
}
.mt__testimonial-inner{
margin-top: 60px;
position: relative;
.mt__testimonial-items{
margin-bottom: 60px;
}
.mt__testimonial-item{
background-color: $mt__primary-color;
border-radius: 20px;
padding: 51px 25px;
.mt__testimonial-logo-part{
display: flex;
align-items: center;
justify-content: space-between;
.mt__testimonial-logo{
display: flex;
align-items: center;
gap: 15px;
.mt__client-name-regi-wrapper{
.mt__testimonial-client-name{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__secondary-color;
}
.mt__testimonial-client-regi{
font-size: 16px;
font-weight: 400;
color: #596171;
font-family: $mt__primary-font;
color: $mt__secondary-color;
}
}
}
.mt__testimonial-client-review{
ul{
display: flex;
align-items: center;
gap: 2px;
li{
i{
color: #FD5B38;
}
}
}
}
}
.mt__testimonial-client-discription{
margin-top: 25px;
padding-bottom: 32px;
border-bottom: 1px solid #C8C8C8;
@include mt__screen-439{
br{
display: none;
}
}
.mt__testimonial-client-say{
font-size: 18px;
color: #767676;
line-height: 28px;
font-family: $mt__primary-font;
font-weight: 400;
}
}
.mt__testimonial-client-agency-logo{
margin-top: 35px;
}
}
}
}
// End Testimonial Area Home 1
// Start Our Blog Area Home 1
.mt__blog-area-home-1{
position: relative;
background-color: $mt__secondary-color;
.mt__blog-area-wrapper-inner{
padding-top: 150px;
@include mt__screen-991{
padding-top: 70px;
}
@include mt__screen-767{
padding-top: 60px;
}
}
.mt__blog-page-numbaring-wrappe{
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
border-top: 1px solid #212121;
border-bottom: 1px solid #212121;
margin-top: 60px;
flex-wrap: wrap;
row-gap: 15px;
@include mt__screen-991{
margin-top: 35px;
}
.mt__blog__prev-next{
font-size: 16px;
font-weight: 700;
color: $mt__primary-color;
font-family: $mt__secondary-font;
line-height: 26px;
transition: linear 0.3s;
display: flex;
align-items: center;
gap: 6px;
&:hover{
color: $mt__blue;
}
}
.mt__blog-page-center{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
row-gap: 5px;
.mt__blog-number-arrow,
.mt__blog-page-number{
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
color: $mt__primary-color;
border-radius: 50%;
border: 1px solid $mt__primary-color;
transition: linear 0.3s;
&:hover{
border-color: transparent;
background-color: $mt__blue;
}
}
}
}
.mt__blog-area-title-part{
margin-bottom: 60px;
.mt__services-title-meta{
background-color: #272729;
color: $mt__primary-color;
}
.mt__title-style-01{
color: $mt__primary-color;
}
}
.mt__blog-area-single-part{
margin-bottom: 60px;
@include mt__screen-991{
margin-bottom: 30px;
}
.mt__blog-area-single-part-img{
display: flex;
align-items: center;
gap: 60px;
justify-content: center;
padding-bottom: 60px;
position: relative;
border-bottom: 1px solid $mt__border-color01;
@include mt__screen-1299{
gap: 30px;
}
@include mt__screen-1199{
gap: 15px;
}
@include mt__screen-1099{
display: block;
img{
margin: auto;
}
}
@include mt__screen-991{
padding-bottom: 30px;
}
.mt__blog-area-single-part-text-content{
@include mt__screen-1099{
text-align: center;
}
.mt__blog-area-home-1-meta-wrapper{
@include mt__screen-1099{
justify-content: center;
margin-top: 30px;
}
}
.mt__blog-writer{
@include mt__screen-1099{
justify-content: center;
}
}
}
}
.mt__blog-discription{
padding-bottom: 30px;
border-bottom: 1px solid $mt__border-color01;
@include mt__screen-1099{
border-bottom: none;
padding-bottom: 0;
}
}
}
.mt__blog-area-items-wrapper{
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
@include mt__screen-991{
display: grid;
grid-template-columns: 1fr 1fr;
}
@include mt__screen-767{
grid-template-columns: 1fr;
gap: 30px;
}
&.mt__blog-area-items-wrapper-inner{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 40px;
@include mt__screen-991{
display: grid;
grid-template-columns: 1fr 1fr;
}
@include mt__screen-767{
grid-template-columns: 1fr;
}
.mt__blog-area-items{
@include mt__screen-1299{
width: unset;
}
}
}
}
.mt__blog-area-home-1-meta-wrapper{
display: flex;
align-items: center;
gap: 16px;
.mt__blog-area-home-1-tag{
font-size: 16px;
font-weight: 400;
color:$mt__light-white03;
border-radius: 50px;
border: 1px solid $mt__border-color01;
padding: 3px 24.5px;
font-family: $mt__primary-font;
}
.mt__blog-posted-date{
font-size: 16px;
font-weight: 400;
color: $mt__primary-color;
font-family: $mt__primary-font;
line-height: 26px;
}
}
.mt__blog-title{
margin-top: 28px;
margin-bottom: 15px;
a{
font-size: 24px;
font-weight: 700;
color: $mt__primary-color;
line-height: 34px;
font-family: $mt__secondary-font;
transition: linear 0.3s;
&:hover{
color: $mt__blue;
}
@include mt__screen-1299{
br{
display: none;
}
}
}
}
.mt__blog-discription{
font-size: 16px;
font-weight: 400;
color:$mt__light-white03;
line-height: 26px;
font-family: $mt__primary-font;
@include mt__screen-1299{
br{
display: none;
}
}
}
.mt__blog-writer{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
@include mt__screen-991{
justify-content: center;
}
.mt__blog-writer-part{
display: flex;
align-items: center;
gap: 16px;
.mt__blog-writer-name-regi-part{
.mt__blog-writer-name{
font-size: 18px;
font-weight: 700;
color: $mt__primary-color;
line-height: 28px;
}
.mt__blog-writer-regi{
font-size: 16px;
font-weight: 400;
line-height: 26px;
font-family: $mt__primary-font;
color: $mt__light-white03;
}
}
}
.mt__blog-comment{
@include mt__screen-1299{
display: none;
}
a{
display: flex;
align-items: center;
gap: 10px;
&:hover{
.mt__blog-comment-count{
color: $mt__blue;
}
svg{
path{
fill:$mt__blue;
}
}
}
.mt__blog-comment-count{
font-size: 16px;
font-weight: 400;
color: $mt__light-white03;
line-height: 26px;
font-family: $mt__primary-font;
transition: linear 0.3s;
}
svg{
path{
transition: linear 0.3s;
}
}
}
}
}
.mt__blog-area-items{
@include mt__screen-1299{
width: 30%;
}
@include mt__screen-991{
width: unset;
max-width: max-content;
img{
margin: auto;
}
}
.mt__blog-area-home-1-meta-wrapper{
margin-top: 30px;
@include mt__screen-991{
justify-content: center;
}
}
.mt__blog-title{
padding-bottom: 25px;
border-bottom: 1px solid $mt__border-color01;
@include mt__screen-991{
border: none;
text-align: center;
padding-bottom: 0;
}
}
}
}
// End Our Blog Area Home 1
// Start Footer Banner Area Home 1
.mt__footer-banner-home-1{
position: relative;
background-color: $mt__secondary-color;
padding-top: 150px;
padding-bottom: 150px;
&.mt-teampage-footer {
background-color: #101012;
}
@include mt__screen-991{
padding-top: 70px;
padding-bottom: 70px;
}
@include mt__screen-767{
padding-top: 50px;
padding-bottom: 50px;
}
.mt__footer-banner-wrapper{
border-radius: 20px;
background: #161719;
padding: 72px 20px;
text-align: center;
@include mt__screen-767{
padding: 50px 20px;
}
.mt__footer-banner-title{
font-size: 52px;
font-weight: 700;
color: $mt__primary-color;
line-height: 62px;
@include mt__screen-1099{
font-size: 45px;
line-height: 55px;
}
@include mt__screen-767{
br{
display: none;
}
}
@include mt__screen-575{
font-size: 35px;
line-height: 45px;
br{
display: none;
}
}
}
.mt__footer-banner-sub-title{
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: $mt__primary-color;
font-family: $mt__primary-font;
margin-bottom: 0;
margin-top: 27px;
@include mt__screen-767{
br{
display: none;
}
}
}
.mt__footer-banner-btn-group{
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 60px;
@include mt__screen-767{
margin-top: 35px;
}
@include mt__screen-575{
display: block;
}
.mt__footer-banner-free-tail-btn{
padding: 12px 25px;
@include mt__screen-575{
width: 100%;
text-align: center;
display: block;
}
}
.mt__footer-banner-view-demo-btn{
padding-top: 12px;
padding-bottom: 12px;
@include mt__screen-575{
width: 100%;
text-align:center;
display: block;
margin-top: 15px;
}
}
}
}
}
// End Footer Banner Area Home 1
// Start Sass Skill Area Home 1
.mt__sass-skill-area-home-1{
background-color: #000000;
position: relative;
z-index: 1;
.mt__sass-skill-sehp-2{
position: absolute;
top: -15%;
right: 0;
}
.mt__sass-skill-area-shep-1{
display: inline-block;
width: 424px;
height: 424px;
border-radius: 424px;
opacity: 0.5;
background: #FD5B38;
filter: blur(250px);
position: absolute;
bottom: 0;
left: 0;
z-index: -1 !important;
}
.mt__sass-skill-wrapper{
background-color: $mt__primary-color;
border-radius: 50px;
padding: 105px 102px 200px 102px;
position: relative;
@include mt__screen-1199{
padding: 65px 65px 200px 65px;
}
@include mt__screen-575{
padding: 113px 45px 200px 45px;
}
.mt__sass-skill-shep-man-1{
position: absolute;
top: -145px;
left: -95px;
}
.mt__sass-skill-imgages{
margin-top: 53px;
img{
margin-left: auto;
margin-right: auto;
@include mt__screen-865{
scale: 1.2;
}
@include mt__screen-575{
scale: 1.3;
}
}
}
}
.mt__video-banner-home-1{
position: relative;
top: -135px;
.mt__video-banner-wrapper{
position: relative;
a{
position: absolute;
top: 37%;
left: 45%;
transform: translate(-50%, -50%);
background-color: $mt__secondary-color;
border-radius: 50%;
display: inline-block;
text-align: center;
width: 110px;
height: 110px;
line-height: 110px;
@include mt__screen-767{
top: 30%;
width: 65px;
height: 65px;
line-height: 65px;
svg{
width: 25px;
height: 25px;
}
}
}
}
}
}
// End Sass Skill Area Home 1
// Start Pricing Area Home 1
.mt__pricing-area-home-1{
background-color: $mt__secondary-color;
padding-top: 53px;
padding-bottom: 150px;
padding-left: 20px;
padding-right: 20px;
position: relative;
z-index: 1;
.mt__pricing-area-shep-1{
display: inline-block;
width: 424px;
height: 424px;
border-radius: 424px;
opacity: 0.5;
background: #FD5B38;
filter: blur(250px);
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.mt__services-title-meta{
background-color: #272729;
color: $mt__primary-color;
}
.mt__title-style-01{
color: $mt__primary-color;
}
.mt__pricing-button-part{
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
margin-top: 70px;
position: relative;
padding-top: 40px;
&.pricing-disc{
justify-content: end;
margin-top: 0;
display: inherit;
& .mt__pricing-btn-shep-1 {
left: 77%;
@include mt__screen-1099{
left: 35%;
}
@include mt__screen-767{
left: 45%;
}
}
& .mt__discount-price {
left: 86%;
@include mt__screen-1099{
left: 45%;
}
@include mt__screen-767{
left: 60%;
}
}
}
.mt__pricing-btn-shep-1{
position: absolute;
top: 0px;
left: 54%;
z-index: 1;
}
.mt__discount-price{
position: absolute;
font-size: 16px;
font-weight: 400;
color: $mt__primary-color;
line-height: 26px;
top: -4px;
left: 56.5%;
@include mt__screen-1499{
left: 58.5%;
}
@include mt__screen-1099{
left: 60.5%;
}
@include mt__screen-767{
left: 65.5%;
}
@include mt__screen-575{
left: 70.5%;
}
}
.mt__pricing-pack-name{
font-size: 16px;
font-weight: 700;
color: $mt__primary-color;
}
ul{
background-color: $mt__secondary-color;
background-color: #242426;
border-radius: 20px;
padding: 5.5px 5.5px;
border: none;
button{
width: 28px;
height: 30px;
background-color: transparent;
border-radius: 50%;
border: none;
display: inline-block;
&.active{
background-color: $mt__blue;
}
}
}
}
.mt__pricing-box-wrapper{
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
margin-top: 57px;
@include mt__screen-1099{
display: grid;
grid-template-columns: 1fr 1fr;
}
@include mt__screen-991{
grid-template-columns: 1fr;
}
.mtprice__shape {
position: absolute;
right: 30%;
top: 25%;
}
.mt__pricing-item{
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
padding: 32px 24px;
border-radius: 20px;
position: relative;
@include mt__screen-1099{
background-position: unset;
}
@media (max-width:471px){
background-position: right center;
}
.mt__pricing-item-pack-name{
font-size: 24px;
font-weight: 700;
color: $mt__secondary-color;
line-height: 34px;
margin-bottom: 18px;
}
.mt__pricing-pack-info{
font-size: 16px;
font-weight: 400;
color: $mt__border-color01;
line-height: 26px;
@include mt__screen-1299{
br{
display: none;
}
}
}
.mt__price{
font-size: 96px;
font-weight: 800;
color: $mt__secondary-color;
margin-top: 12px;
}
.pack-parchuse-btn{
font-size: 16px;
font-weight: 700;
color: $mt__secondary-color;
line-height: 26px;
display: block;
text-align: center;
position: relative;
padding-top: 11px;
padding-bottom: 11px;
border-radius: 20px;
border: 1px solid $mt__border-color02;
transition: linear 0.3s;
font-family: $mt__secondary-font;
margin-top: 12px;
&.active{
background-color: #2555FF;
color: #fff;
svg{
path{
fill: $mt__primary-color;
}
}
}
svg{
path{
transition: linear 0.3s;
}
}
&:hover{
background-color: $mt__blue;
border-color: transparent;
color: $mt__primary-color;
svg{
path{
fill: $mt__primary-color;
}
}
}
}
.mt__pack-including-item{
margin-top: 32px;
li{
font-size: 16px;
font-weight: 400;
color: $mt__border-color01;
line-height: 26px;
margin-bottom: 24px;
&:last-child{
margin-bottom: 0;
}
}
&.mt__pack-line-throue{
li{
text-decoration: line-through;
&:last-child{
text-decoration: none;
}
}
}
}
}
}
}
// End Pricing Area Home 1