/home/moonrcjl/template.moontelict.com/sass-agency/assets/sass/pages/_index-2.scss
// Start Crm Solution Area Home 2
.mt__crm-solution-area{
position: relative;
z-index: 1;
padding-bottom: 155px;
padding-top: 155px;
background-color: $mt__secondary-color;
@include mt__screen-991{
padding-top: 80px;
padding-bottom: 80px;
}
@include mt__screen-767{
padding-top: 60px;
padding-bottom: 60px;
}
.mt__crm-solution-shep-1{
position: absolute;
top: 10%;
left: 10%;
animation: mt__scalingAnimation 4s linear infinite;
@include mt__screen-767{
top: 4%;
left: -2%;
}
}
.mt__title-icon-home-2{
margin-left: auto;
margin-right: auto;
margin-bottom: 23px;
}
.mt__crm-solution-title{
position: relative;
span{
position: relative;
&::after{
content: '';
position: absolute;
left: 0;
bottom: 10px;
background-color: $mt__green;
width: 100%;
height: 15px;
border-radius: 20px;
z-index: -1;
@include mt__screen-865{
height: 8px;
bottom: 5px;
}
}
}
}
.mt__crm-solution-wrapper{
margin-top: 55px;
@include mt__screen-767{
margin-top: 35px;
}
.mt__crm-solution-itmes{
display: flex;
align-items: center;
justify-content: space-between;
@include mt__screen-1199{
flex-wrap: wrap;
row-gap: 24px;
justify-content: center;
column-gap: 24px;
}
.mt__crm-solution-itme{
transition: linear 0.3s;
img{
@include mt__screen-767{
margin-left: auto;
margin-right: auto;
}
}
&:hover{
& .mt__crm-item-title{
color: $mt__green;
text-decoration: underline;
}
}
.mt__crm-item-title{
font-size: 24px;
font-weight: 700;
line-height: 34px;
text-transform: capitalize;
color: $mt__primary-color;
transition: linear 0.3s;
font-family: $mt__secondary-font;
margin-top: 28px;
margin-bottom: 17px;
display: block;
@include mt__screen-767{
text-align: center;
}
&:hover{
// color: $mt__green;
// text-decoration: underline;
}
}
.mt__crm-solution-item-sub-title{
font-size: 16px;
font-weight: 400;
color: $mt__light-white03;
line-height: 26px;
@include mt__screen-767{
text-align: center;
}
}
.mt__crm-solution-plus-items{
margin-top: 17px;
.mt__crm-solution-plus-item{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__primary-color;
display: block;
@include mt__screen-767{
text-align: center;
}
&:last-child{
margin-top: 8px;
}
}
}
}
}
.mt__crm-solution-btn{
margin-top: 65px;
@include mt__screen-767{
margin-top: 35px;
}
}
}
}
// End Crm Solution Area Home 2
// Start CRM Implement Area Home 2
.mt__crm-imp-area{
position: relative;
background-color: $mt__secondary-color;
z-index: 1;
.mt__crm-imp-shep-1{
position: absolute;
bottom: 10%;
left: 10%;
z-index: -1;
animation: mt__scalingAnimation 4s linear infinite;
}
.mt__crm-imp-shep-2{
position: absolute;
top: 10%;
right:3%;
z-index: -1;
animation: mt__bounceY 4s linear infinite;
}
.mt__crm-imp-title-part{
display: flex;
align-items: center;
justify-content: space-between;
@include mt__screen-1099{
display: block;
text-align: center;
}
.mt__crm-imp-sub-title{
font-size: 16px;
font-weight: 400;
color: $mt__light-white03;
line-height: 26px;
@include mt__screen-1099{
margin-top: 15px;
}
@include mt__screen-767{
br{
display: none;
}
}
}
}
.mt__crm-imp-wrapper{
display: flex;
align-items: center;
justify-content: center;
@include mt__screen-1099{
flex-wrap: wrap;
row-gap: 24px;
column-gap: 24px;
margin-top: 50px;
}
}
.mt__crm-imp-item{
width: 25%;
border-right: 1px solid #212121;
@include mt__screen-1099{
width: unset;
}
&.mt__crm-imp-item2{
margin-top: 80px;
@include mt__screen-1099{
margin-top: 0;
}
}
&.mt__crm-imp-item3{
margin-top: 160px;
@include mt__screen-1099{
margin-top: 0;
}
}
&.mt__crm-imp-item4{
margin-top: 240px;
@include mt__screen-1099{
margin-top: 0;
}
}
.mt__crm-imp-item-btn{
padding: 15px 24px;
border: 1px solid $mt__green;
color: $mt__primary-color;
font-family: $mt__secondary-font;
border-radius: 50px;
float: right;
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
transition: linear 0.4s;
.mt__crm-imp-item-btn-number{
font-size: 24px;
font-weight: 700;
line-height: 34px;
}
.mt__crm-imp-item-btn-text{
font-size: 16px;
font-weight: 700;
line-height: 26px;
}
}
&:hover{
.mt__crm-imp-item-btn{
background-color: $mt__green;
color: $mt__secondary-color;
}
.mt__crm-imp-item-title{
color: $mt__primary-color;
}
.mt__crm-imp-item-img{
width: 100%;
}
}
.mt__crm-imp-item-title{
color: #2F3236;
font-size: 52px;
font-weight: 700;
line-height: 62px;
text-transform: capitalize;
text-align: right;
margin-top: 123px;
margin-bottom: 34px;
transition: linear 0.4s;
}
.mt__crm-imp-item-img{
max-width: max-content;
float: right;
width: 0;
transition: 0.4s;
}
}
}
// End CRM Implement Area Home 2
// Start Video Area Home 2
.mt__video-area-home-2{
position: relative;
background-color: $mt__secondary-color;
z-index: 1;
padding-top: 155px;
@include mt__screen-991{
padding-top: 80px;
}
@include mt__screen-767{
padding-top: 60px;
}
.mt__video-wrapper{
img{
margin-left: auto;
margin-right: auto;
}
position: relative;
a{
width: 110px;
height: 110px;
text-align: center;
display: inline-block;
border-radius: 50%;
background-color: #FD5B38;
line-height: 110px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
@include mt__screen-767{
width: 65px;
height: 65px;
line-height: 65px;
}
&::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
width: 70%;
height: 70%;
background-color: #fd5b3887;
animation: borderanimate2 2s linear infinite;
z-index: -1;
border-radius: 50%;
}
&::after {
position: absolute;
content: "";
left: 50%;
top: 50%;
width: 90%;
height: 90%;
transform: scale(1.5);
border: 1px solid #FD5B38;
animation: borderanimate2 2s linear infinite;
border-radius: 50%;
}
}
}
&.mt__video-area-home-3{
padding: 0;
.mt__video-wrapper{
a{
background-color: $mt__blue;
}
}
}
}
// End Video Area Home 2
// Start Testimonial Area Home 2
.mt__testimonial-area{
position: relative;
background-color: $mt__secondary-color;
z-index: 1;
padding-top: 155px;
padding-bottom: 155px;
@include mt__screen-991{
padding-top: 80px;
padding-bottom: 80px;
}
@include mt__screen-767{
padding-top: 60px;
padding-bottom: 60px;
}
.mt__testimonial-shep-1{
position: absolute;
z-index: -1;
left: 2%;
top: 15%;
animation: mt__scalingAnimation 4s linear infinite;
@include mt__screen-575{
left: -3%;
top: 4%;
}
}
.mt__title-icon-home-2 {
margin-left: auto;
margin-right: auto;
margin-bottom: 23px;
}
.mt__testimonial-items{
margin-top: 60px;
@include mt__screen-767{
margin-top: 40px;
}
}
.mt__testimonial-item{
background-color: #15171A;
padding: 32px 40px;
border-radius: 20px;
position: relative;
z-index: 1;
@include mt__screen-1299{
padding: 20px 20px;
}
.mt__testimonial-item-shep{
position: absolute;
top: 0;
right:0;
z-index: -1;
}
.mt__testimonial-part-top{
display: flex;
align-items: center;
justify-content: space-between;
.mt__testimonial-quets-home-2{
@include mt__screen-439{
width: 25px;
}
}
.mt__testimonial-img{
display: flex;
align-items: center;
gap: 16px;
.mt__testimonial-client-name-regi{
.mt__testimonial-client-name{
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: $mt__primary-color;
font-family: $mt__secondary-font;
margin-bottom: 12px;
}
.mt__testimonial-client-regi{
border-radius: 50px;
border: 1px solid rgba(205, 205, 205, 0.20);
font-size: 16px;
font-weight: 400;
line-height: 14px;
padding: 7px 16px;
}
}
}
}
.mt__testimonial-client-say{
font-size: 24px;
font-weight: 400;
font-style: italic;
line-height: 34px;
color: $mt__primary-color;
margin-top: 40px;
margin-bottom: 30px;
@include mt__screen-1299{
br{
display: none;
}
}
@include mt__screen-767{
font-size: 18px;
margin-top: 20px;
margin-bottom: 15px;
}
}
}
}
// End Testimonial Area Home 2
// Start Banner Area Home 2
.mt__banner-area-home-2{
position: relative;
z-index: 1;
padding-top: 7px;
.mt__banner-main-title{
color: $mt__secondary-color;
}
.mt__banner-big-title{
-webkit-text-stroke-width: 1px;
font-size: 200px;
font-style: normal;
font-weight: 700;
line-height: 166px;
text-transform: capitalize;
background: linear-gradient(180deg, #767676 72%, rgba(221, 218, 218, 0.6) 60%, #49444463 100%);
-webkit-background-clip: text;
position: relative;
top: 50px;
z-index: -1;
@media (max-width:1470px){
font-size: 145px;
line-height: 155px;
background: linear-gradient(180deg, #5a5353 72%, rgba(221, 218, 218, 0.6) 60%, rgba(73, 68, 68, 0.3882352941) 100%);
-webkit-background-clip: text;
-webkit-text-stroke-width: 1px;
}
@include mt__screen-1099{
font-size: 100px;
line-height: 110px;
}
@include mt__screen-767{
font-size: 70px;
line-height: 80px;
}
@include mt__screen-575{
font-size: 55px;
line-height: 65px;
}
}
}
// End Banner Area Home 2
// Start CRM Customar Home 2
.mt__crm-customar-area-home-2{
background-color: $mt__secondary-color;
position: relative;
padding-top: 90px;
.mt__crm-customar-wrappe{
display: flex;
align-items: start;
justify-content: center;
@include mt__screen-1299{
gap: 30px;
}
@include mt__screen-1099{
display: block;
}
.mt__crm-customar-left-img{
width: 50%;
padding-right: 40px;
@include mt__screen-1299{
width: 45%;
}
@include mt__screen-1199{
width: 40%;
}
@include mt__screen-1099{
width: 100%;
}
img{
@include mt__screen-1099{
margin-left: auto;
margin-right: auto;
}
}
}
.mt__crm-customar-right-text{
width: 50%;
@include mt__screen-1199{
width: 55%;
}
@include mt__screen-1099{
width: 100%;
text-align: center;
}
.mt__crm-customar-title{
position: relative;
z-index: 1;
span{
position: relative;
&::after{
content: '';
position: absolute;
left: 0;
bottom: 10px;
background-color: $mt__green;
width: 100%;
height: 15px;
border-radius: 20px;
z-index: -1;
@include mt__screen-865{
height: 8px;
bottom: 5px;
}
}
}
}
.mt__crm-customar-sub-title{
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: $mt__light-white03;
margin-top: 17px;
@include mt__screen-767{
br{
display: none;
}
}
}
.according-items-box{
margin-top: 10px;
.accordion-item{
position: relative;
border-bottom: 1px solid #212121;
padding-bottom: 16px;
padding-top: 16px;
@include mt__screen-1099{
width: 45%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
@include mt__screen-865{
width: 100%;
text-align: center;
}
&:hover{
cursor: pointer;
}
.accordion-title{
font-size: 24px;
line-height: 34px;
color: $mt__primary-color;
font-weight: 700;
@include mt__screen-439{
font-size: 20px;
line-height: 30px;
}
}
.accordion-header::after{
display: none;
}
.accordion-content{
p{
font-size: 16px;
line-height: 26px;
color: $mt__primary-color;
padding: 16px 0;
@include mt__screen-575{
br{
display: none;
}
}
}
}
}
}
}
}
}
// End CRM Customar Home 2
// Start Blog Area Home 2
.mt__blog-area-home-2{
position: relative;
background-color: $mt__secondary-color;
padding-top: 155px;
padding-bottom: 155px;
z-index: 1;
@include mt__screen-991{
padding-top: 80px;
padding-bottom: 80px;
}
@include mt__screen-767{
padding-top: 60px;
padding-bottom: 60px;
}
.mt__blog-area-title-part{
display: flex;
align-items: center;
justify-content: space-between;
@media (max-width:1150px){
display: block;
text-align: center;
}
.mt__blog-area-sub-title{
font-size: 16px;
font-weight: 400;
color: $mt__light-white03;
line-height: 26px;
@media (max-width:1150px){
margin-top: 15px;
}
@include mt__screen-767{
br{
display: none;
}
}
}
}
.mt__blog-area-items{
display: flex;
align-items: center;
gap: 24px;
margin-top: 60px;
justify-content: center;
@include mt__screen-1099{
flex-wrap: wrap;
row-gap: 24px;
}
@include mt__screen-767{
margin-top: 30px;
}
.mt__blog-area-item{
border-radius: 20px;
background: #151719;
padding: 24px;
&:hover{
.mt__blog-img{
a{
img{
scale: 1.4;
}
}
}
}
.mt__blog-img{
position: relative;
overflow: hidden;
a{
img{
transition: 0.7s;
}
}
.mt__blog-type{
display: flex;
align-items: center;
gap: 5px;
position: absolute;
left: 16px;
bottom: 16px;
.mt__blog-meta{
padding: 5px 15px;
background-color: $mt__secondary-color;
color: $mt__primary-color;
font-size: 16px;
line-height: 26px;
font-weight: 400;
border-radius: 50px;
}
}
}
.mt__blog-area-item-title{
.mt__blog-area-item-main-title{
margin-top: 33px;
&:hover{
a{
color: $mt__green;
}
}
a{
font-size: 24px;
line-height: 34px;
font-weight: 700;
color: $mt__primary-color;
font-family: $mt__secondary-font;
transition: linear 0.3s;
@include mt__screen-1399{
br{
display: none;
}
}
@include mt__screen-1099{
br{
display: block;
}
}
}
}
.mt__blog-item-arrow{
margin-top: 12px;
display: block;
&:hover{
svg{
path{
fill: $mt__green;
}
}
}
svg{
path{
transition: 0.3s;
}
}
}
}
}
}
}
// End Blog Area Home 2
.mt__banner-btn-group a {
background-color: #000000;
color: #FFFFFF;
border-color: #BCF906;
border-radius: 50px !important;
padding: 15px 25px;
border: 2px solid #BCF906;
}
.mt__btn-3.active {
background: #BCF906;
color: #000;
}
.mt__banner-btn-group a:hover {
background-color: #BCF906;
color: #000000;
}