/home/moonrcjl/template.moontelict.com/sass-agency/assets/sass/theme/_theme-class.scss
// Start Custom Mouse Cursor Style
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visibility: hidden;
}
.cursor-inner {
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
z-index: 10000001;
background-color: $mt__primary-color;
-webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cursor-inner.cursor-hover {
margin-left: -30px;
margin-top: -30px;
width: 70px;
height: 70px;
background-color: #5c5a5a;
background-blend-mode: multiply;
opacity: 0.5;
}
.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 45px;
height: 45px;
border: 2px solid $mt__primary-color;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10000000;
opacity: 0.5;
-webkit-transition: all 0.08s ease-out;
transition: all 0.08s ease-out;
}
.cursor-outer.cursor-hover {
opacity: 0;
}
.main-wrapper[data-magic-cursor=hide] .mouse-cursor {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -1111;
}
// End Custom Mouse Cursor Style
// Start Title Meta
.mt__services-title-meta{
display: inline-block;
font-size: 16px;
font-weight: 700;
color: $mt__secondary-color;
font-family: $mt__secondary-font;
text-align: center;
background-color: $mt__light-white02;
border-radius: 50px;
padding: 13px 26.5px;
margin-bottom: 30px;
@include mt__screen-767{
margin-bottom: 15px;
}
}
// End Title Meta
// Start Title Style 1
.mt__title-style-01{
font-size: 52px;
font-weight: 700;
color: $mt__secondary-color;
line-height: 62px;
text-transform: capitalize;
@include mt__screen-575{
font-size: 35px;
line-height: 45px;
br{
display: none;
}
}
}
// End Title Style 1
// Start Title Style 2
.mt__title-style-02{
font-size: 52px;
font-weight: 700;
color: $mt__primary-color;
line-height: 62px;
text-transform: capitalize;
@include mt__screen-575{
font-size: 35px;
line-height: 45px;
br{
display: none;
}
}
}
// End Title Style 2
// Start Sub Title Style 2
.mt__sub-title-style-02{
font-family: $mt__primary-font;
font-size: 16px;
font-weight: 400;
color: $mt__light-white03;
text-transform: capitalize;
@include mt__screen-575{
br{
display: none;
}
}
}
// End Sub Title Style 2
// Start Slider Arrow 1
.mt__next-prev-arrow{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mt__next-arrow,
.mt__prev-arrow{
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid $mt__primary-color;
display: inline-block;
text-align: center;
line-height: 55px;
&:hover{
background-color: $mt__blue;
border-color: transparent;
}
}
// End Slider Arrow 1
// Start Title Style 3
.mt__title-style3{
font-size: 52px;
font-weight: 700;
line-height: 62px;
text-transform: capitalize;
color: $mt__primary-color;
@include mt__screen-865{
font-size: 40px;
line-height: 50px;
br{
display: none;
}
}
@include mt__screen-767{
font-size: 35px;
line-height: 45px;
}
}
// End Title Style 3
// Start Pagination Bullet Point
.swiper-pagination{
display: flex;
align-items: center;
justify-content: center;
margin-top: 60px;
position: relative;
@include mt__screen-767{
margin-top: 30px;
}
.swiper-pagination-bullet{
width: 16px;
height: 16px;
border-radius: 50%;
background-color: $mt__primary-color;
&.swiper-pagination-bullet-active{
width: 50px;
position: relative;
border-radius: 50px;
&::before{
content: '';
position: absolute;
width: 50%;
border-radius: 50px;
height: 100%;
background: $mt__green;
top: 0;
left: 0;
}
}
}
}
// End Pagination Bullet Point
// Start Title Style 4
.mt__title-style4{
font-size: 52px;
font-weight: 700;
line-height: 62px;
text-transform: capitalize;
color: $mt__primary-color;
@include mt__screen-767{
font-size: 30px;
line-height: 40px;
br{
display: none;
}
}
@include mt__screen-575{
font-size: 25px;
line-height: 35px;
}
}
// End Title Style 4
// Start Home 3 Common Text Style
.mt__home-3-common-text{
font-size: 16px;
color: $mt__light-white03;
font-weight: 400;
line-height: 24px;
text-transform: capitalize;
@include mt__screen-767{
br{
display: none;
}
}
}
// End Home 3 Common Text Style
// Start Title Style 5
.mt__title-meta{
display: inline-block;
font-size: 16px;
font-weight: 700;
color: $mt__primary-color;
font-family: $mt__secondary-font;
text-align: center;
background-color: rgba(255, 255, 255, 0.10);
border-radius: 50px;
padding: 13px 26.5px;
margin-bottom: 30px;
@include mt__screen-767{
margin-bottom: 15px;
}
}
// End Title Style 5
// Start Back To Top
.scroll-up {
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px #5c5a5a;
z-index: 99;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
position: fixed;
right: 25px;
bottom: 35px;
height: 50px;
width: 50px;
transition: all 0.3s ease-in-out;
&::after {
position: absolute;
font-family: "Font Awesome 6 Pro";
content: "\f062";
text-align: center;
line-height: 50px;
font-weight: 700;
font-size: 18px;
color: $mt__primary-color;
left: 0;
top: 0;
height: 50px;
width: 50px;
cursor: pointer;
display: block;
z-index: 1;
transition: all 0.3s ease-in-out;
}
svg path {
fill: none;
}
svg.scroll-circle path {
stroke: $mt__primary-color;
stroke-width: 4px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
}
.scroll-up.active-scroll {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
// End Back To Top
// Start Theme Search Bar Popup
.mt__search-bar {
width: 100%;
height: 100vh;
position: absolute;
background: $mt__secondary-color;
z-index: 99999999999;
opacity: 0;
visibility: hidden;
scale: 0;
display: none;
&.mt__active {
scale: 1;
opacity: 1;
top: 0;
visibility: visible;
position: fixed;
}
.mt__search-popup {
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
width: 90%;
gap: 20px;
@media (max-width: 1399px) {
display: block;
}
input[type="text"] {
padding: 20px 28px;
border-radius: 4px;
background-color: $mt__primary-color;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 160%;
text-transform: capitalize;
color: $mt__secondary-color;
font-family: $mt__primary-font;
border: none;
outline: none;
width: 70%;
@media (max-width: 1399px) {
display: block;
width: 100%;
margin-bottom: 20px;
}
&::placeholder {
color: #5c5a5a;
}
}
input[type="submit"] {
border: none;
text-align: center;
display: block;
width: 6%;
padding: 0;
&:hover{
border: 1px solid $mt__primary-color;
}
@include mt__screen-1399{
width: unset;
padding: 10px 20px;
}
}
}
}
a {
font-size:35px;
padding: 10px 20px;
border-radius: 50%;
display: block;
text-align: center;
border: 4px solid transparent;
position: absolute;
top: 20px;
right: 20px;
line-height: 45px;
transition: 0.5s ease;
background-color: transparent;
color: $mt__primary-color;
}
}
// End Theme Search Bar Popup