@import "variables";
.main-bg {
width: 70%;
height: 80vh;
background-color: $blue;
position: relative;
overflow: hidden;
top: 75px;
margin: auto;
border-radius: 20px;
@media (max-width: 1499px) {
width: 90%;
height: 80vh;
}
@media (max-width: 1299px) {
width: 95%;
height: 90vh;
top: 50px;
}
@media (max-width: 1199px) {
width: 100%;
height: 100vh;
top: 0;
border-radius: 0;
}
}
.main-header {
position: absolute;
overflow-y: auto;
width: 320px;
height: 100%;
bottom: 0;
min-width: 320px;
z-index: 2;
.hero-img {
width: 100%;
height: 250px;
}
}
.icon-box {
bottom: -20px;
left: 12px;
}
.social-icon {
background: $primary;
border-radius: 50px;
display: inline-block;
width: 40px;
height: 40px;
background-color: transparent;
a {
display: flex;
padding: 12px;
}
i {
border-radius: 10px;
font-size: 22px !important;
}
svg,
img {
width: 22px !important;
max-width: 22px !important;
}
i::before {
color: $white;
}
}
#pages-menu, #pages-menu1 {
display: none;
}
.top-header {
position: absolute;
left: 320px;
right: 0;
top: 0px;
z-index: 9999;
border-left: 0px solid transparent;
box-sizing: border-box;
@media (max-width: 991px) {
left: 0px;
background-color: $dark;
}
.home {
i {
padding: 10px;
border-radius: 5px;
background-image: $primary;
}
}
.sharedropbtn {
border: none;
cursor: pointer;
@media (max-width: 991px) {
padding: 6px 12px;
}
}
.contact {
i {
background-image: $primary;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.dropbtn, .copy-referral-btn {
border: none;
cursor: pointer;
@media (max-width: 991px) {
padding: 7px 10px;
}
@media (max-width: 575px) {
padding: 9px 12px;
}
}
.dropdown {
position: relative;
display: inline-block;
}
.fa-solid.fa-sort-down {
position: relative;
bottom: 2px;
}
.dropdown-content {
padding: 15px 15px 0px 15px;
display: none;
position: absolute;
background-color: #222739;
right: 0;
min-width: 160px;
max-height:500px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 9999999999;
@media (max-width: 991px) {
top: 50px;
}
}
.dropdown-content a {
color: $white;
padding: 0 0 15px 0;
font-size: 14px;
text-decoration: none;
display: block;
@media (max-width: 575px) {
font-size: 12px;
}
img {
width: 18px;
height: 18px;
}
}
.dropdown-content {
a:hover, .active, :focus {
background-image: $primary;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.show {
display: block;
}
.sharedropdown {
position: relative;
display: inline-block;
}
.sharedropdown-content {
padding: 10px;
display: none;
position: absolute;
background-color: #222739;
right: 0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 9999999;
@media (max-width: 991px) {
top: 50px;
}
}
.sharedropdown-content a {
color: $white;
padding: 0 0 15px 0;
font-size: 14px;
text-decoration: none;
display: block;
@media (max-width: 575px) {
font-size: 12px;
}
}
// .sharedropdown-content a:hover ,.active {
// background-image: $primary;
// background-clip: text;
// -webkit-text-fill-color: transparent;
// }
.activetab {
display: block;
}
.share-icon {
background: $primary;
border-radius: 50px;
display: inline-block;
width: 30px;
height: 30px;
background-color: transparent;
&:hover, &:focus, &.active {
background: transparent;
border: $border;
i::before {
background-image: $primary;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
a {
padding: 10px;
}
i {
border-radius: 10px;
}
i::before {
color: $white;
}
}
}
.nav-tabs {
background-color: transparent;
border: $border;
border-radius: 10px;
.nav-link.active {
// background-image: $primary;
background-clip: text;
// -webkit-text-fill-color: transparent;
border-bottom: $border;
}
.nav-link {
text-align: start;
background-color: transparent;
border: 0;
border-bottom: $border;
width: 100%;
color: $white;
position: relative;
padding: 10px 12px;
&.active,
&:hover,
&:focus,
&:visited {
background-color: transparent;
border: 0;
border-bottom: $border;
}
i {
width: 18px;
height: 18px;
background-image: $primary;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-plus {
position: absolute;
right: 10px;
top: 14px;
}
}
}
.custom-social-position {
top: 228px !important;
}
#videobtn{
background-color: rgb(24, 183, 24);
border: none;
height: 40px !important;
width: 50px !important;
border-radius: 5px !important;
}
.dropdown-content {
li {
list-style: none !important;
}
}
.slick-slider .slick-track {
padding-top: 30px !important;
}
.main-bg[dir="rtl"] {
.top-header,
.tab-content {
right: 320px;
left: 0;
@media (max-width: 991px) {
right: 0;
}
}
.bars {
right: 26px;
left: auto;
i {
width: 34px !important;
height: 32px !important;
}
}
.me-1 {
margin-left: 0.25rem !important;
margin-right: 0 !important;
}
.me-2 {
margin-left: 0.5rem !important;
margin-right: 0 !important;
}
.me-3 {
margin-left: 1rem !important;
margin-right: 0 !important;
}
.me-4 {
margin-left: 1.5rem !important;
margin-right: 0 !important;
}
.ms-3 {
margin-right: 1rem !important;
margin-left: 0 !important;
}
.ps-2 {
padding-right: 0.5rem !important;
padding-left: 0 !important;
}
.ps-3 {
padding-right: 1rem !important;
padding-left: 0 !important;
}
.ps-4 {
padding-right: 1.5rem !important;
padding-left: 0 !important;
}
.ps-5 {
padding-right: 3rem !important;
padding-left: 0 !important;
}
.text-start {
text-align: right !important;
}
.offcanvas-start {
right: 0 !important;
left: auto;
transform: translateX(100%);
}
.offcanvas.show {
transform: none !important;
}
@media (min-width: 576px) {
.me-sm-3 {
margin-left: 1rem !important;
margin-right: 0 !important;
}
.ms-sm-4 {
margin-right: 1.5rem !important;
margin-left: 0 !important;
}
.ps-sm-4 {
padding-right: 1.5rem !important;
padding-left: 0 !important;
}
}
form {
.form-control {
padding-right: 55px;
padding-left: 0.75rem;
}
.input-icon {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.text-area {
.input-icon {
border-bottom-right-radius: 0 !important;
}
}
}
.services-section,
.contact-info-section,
.testimonials-section {
.card {
.tag {
left: 20px;
right: auto;
}
}
}
.slick-slider {
.prev-arrow {
left: 50px;
right: auto !important;
}
.next-arrow {
left: 10px;
right: auto !important;
}
}
.vcard11-icon-container {
left: 15px;
right: auto;
}
.icon-search-container.active .wp-btn {
right: 85%;
left: auto;
}
.icon-search-container .search-input {
right: 50px;
left: auto;
}
.top-header .sharedropdown-content,
.top-header .dropdown-content {
right: auto;
left: 0;
}
}
|