/* START: ***************************** Common ************************** */
h1,
h2,
h3,
h4,
h5,
h6 {
/* font-family: "El Messiri", sans-serif; */
font-feature-settings: "lnum" 1;
/* font-variant-numeric: lining-nums; */
font-weight: 400;
line-height: 1;
word-break: break-word;
}
/* ==============START: Font Size Classes ========================= */
.fs_10 {
font-size: 10px;
}
.fs_20 {
font-size: 20px;
}
.fs_30 {
font-size: 30px;
}
.fs_40 {
font-size: 40px;
}
/* ==============END: Font Size Classes ========================= */
/* ==============START: Padding Classes ========================= */
.p_10 {
padding: 10px;
}
.p_20 {
padding: 20px;
}
/* top */
.pt_20 {
padding-top: 20px;
}
.mt_30 {
margin-top: 20px;
}
/* ==============END: Padding Classes ========================= */
/* ==============START: Margin Classes ========================= */
.m_10 {
margin: 10px;
}
/* top */
.mt_20 {
margin-top: 20px;
}
.mt_30 {
margin-top: 20px;
}
/* bottom */
.mb_20 {
margin-bottom: 20px;
}
.mb_30 {
margin-bottom: 20px;
}
/* top */
.mt_20 {
margin-top: 20px;
}
.mt_30 {
margin-top: 20px;
}
/* ==============END: Margin Classes ========================= */
.sec-name {
font-size: 40px !important;
color: var(--color_primary);
text-transform: capitalize;
margin: 0px;
position: relative;
padding-bottom: 0px;
line-height: inherit;
text-align: center;
font-size: 2.4em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
0 20px 20px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 768px) {
.sec-name {
font-size: 35px !important;
}
}
@media screen and (max-width: 425px) {
.sec-name {
font-size: 28px !important;
}
}
.fa {
color: var(--site_color_6);
}
.fa:hover {
color: var(--color_secondary) !important;
}
@keyframes pulsate {
0% {
transform: scale(0.8);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 1;
}
}
/* END: ***************************** Common ************************** */
/* START: ***************************** Header ************************** */
.logo img {
/* width: auto; */
width: 300px;
/* width: -webkit-fill-available; */
}
.logo_footer img {
width: 250px;
}
@media screen and (max-width: 768px) {
.logo img {
width: 230px;
}
}
@media screen and (max-width: 1024px) {
.logo img {
width: 250px;
}
}
#header marquee {
border-radius: 20px;
color: white;
font-size: 20px;
background-color: red;
padding: 5px;
/* text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6); */
span {
font-family: Garamond, serif;
line-height: 1em;
/* color: white; */
font-weight: bold;
font-size: 30px;
}
}
li.contact_now_button a {
background-color: #b50000;
color: white !important;
padding: 10px !important;
border-radius: 40px;
}
/* END: ***************************** Header ************************** */
/* START: ***************************** Contact Form ************************** */
.contact_form {
/* border-top: 20px solid var(--color_primary); */
margin-bottom: 20px;
/* background-color: var(--color_primary); */
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
padding: 0px 0px 0px 0px;
.form_heading {
padding: 17px 17px 17px 17px;
background-color: var(--color_secondary);
font-size: 20px;
color: #fff;
}
.form_body {
padding: 10px 30px 10px 30px;
input,
textarea {
width: 100%;
border-radius: 5px;
margin: 0 0 15px;
padding: 9px 17px;
border: 1px solid #ff00159c;
border-radius: 0px;
}
input {
height: 36px;
}
}
button {
color: white;
font-size: 18px;
border: 0px;
width: 100%;
margin-bottom: 10px;
/* border-radius: 20px; */
padding: 10px;
background-color: var(--color_primary);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
}
button:hover,
button:active,
button:focus {
color: white !important;
border: none;
outline: none;
background-color: var(--color_primary);
}
}
/* END: ***************************** Contact Form ************************** */
/* START: ***************************** why choose us ************************** */
/* #why_choose_us .choose-box {
padding: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
#why_choose_us .choose-name {
color: #000000;
font-size: 20px;
font-weight: 600;
margin-top: 71px;
}
#why_choose_us .choose-box > span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 40px;
color: #fff;
width: 80px;
height: 80px;
background: #b50000;
position: absolute;
top: -8px;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 0px 0px 50% 50%;
} */
/* END: ***************************** why choose us ************************** */
/* START: ***************************** contact us page ************************** */
.contact_page {
.contact_page_details {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
border-radius: 20px;
padding-top: 5px;
h2 {
margin-bottom: 20px;
}
.contact_part {
margin-top: 10px;
p {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
border-radius: 20px;
margin-bottom: 30px;
color: white;
font-size: 18px;
font-weight: 500;
padding: 5px;
background-color: var(--color_primary);
/* border-radius: 50px; */
a {
font-size: 20px;
color: white;
}
i {
font-size: 30px;
margin-right: 5px;
/* border: 1px solid red; */
padding: 10px;
}
.fa {
color: white;
&:hover {
color: white !important;
}
}
}
}
}
}
@media screen and (max-width: 767px) {
.contact_page {
p {
padding: 20px;
i {
font-size: 30px;
padding-left: 5px;
}
}
}
}
/* .location_map {
padding: 30px;
background-color: var(--color_primary);
} */
/* END: ***************************** contact us page ************************** */
/* START: ***************************** Home Page ************************** */
.about_image {
margin-bottom: 20px;
img {
border-left: 1px solid white;
border-right: 1px solid white;
width: 100%;
border-radius: 20px;
box-shadow: -1px 2px 16px -2px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: -1px 2px 16px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 16px -2px rgba(0, 0, 0, 0.75);
}
}
.sub-head {
display: block;
font-size: 17px;
color: var(--color_primary);
text-transform: capitalize;
padding: 0px 0px 0px;
font-weight: 600;
}
.sec-head-col {
padding: 0px 15px 30px;
text-align: center;
}
.about-sec {
padding: 50px 0px;
.sub-head {
font-size: 30px;
}
.why_section_heading {
padding: 20px;
h2 {
background-color: var(--color_primary);
color: white;
padding: 10px;
border-radius: 10px;
}
}
.why_each_item {
background-color: var(--site_color_2);
box-shadow: 0 15px 13px 0px rgba(0, 0, 0, 0.3);
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
color: white;
border-radius: 10px;
padding: 10px;
h4 {
border-bottom: 2px solid red;
text-align: center;
padding-bottom: 5px;
}
}
.why_each_item1 {
border: 10px solid var(--color_primary);
}
.why_each_item2 {
border: 10px solid var(--site_color_4);
}
.why_each_item3 {
border: 10px solid darkorchid;
}
.why_each_item4 {
border: 10px solid green;
}
}
/* END: ***************************** Home Page ************************** */
/* START: ***************************** Side Contact Buttons ************************** */
.desktop_contact_fixed_buttons {
display: none;
width: 60px;
position: fixed;
z-index: 999;
bottom: 5px;
left: 5px;
img {
filter: drop-shadow(5px 5px 10px #000000);
}
}
@media only screen and (min-width: 767px) {
.desktop_contact_fixed_buttons {
display: block !important;
}
}
/* END: ***************************** Side Contact Buttons ************************** */
/* START: *****************************About Us Page ************************** */
#about_us_page .sec-name {
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
background: red;
border-radius: 20px;
color: white;
}
/* END: ***************************** About Us Page ************************** */
/* START: ****************************Service Details Page ************************** */
.service_page_image {
text-align: center;
img {
width: 100%;
height: 400px;
}
}
@media screen and (max-width: 767px) {
.service_page_image img {
width: 350px;
height: 350px;
}
}
@media screen and (max-width: 425px) {
.service_page_image img {
width: 300px;
height: 300px;
}
}
.service_page_block {
margin-top: 20px;
margin-bottom: 20px;
img {
width: 100%;
}
.content {
h2 {
margin-bottom: 25px;
color: black !important;
}
}
}
@media screen and (max-width: 767px) {
.service_page_block {
.content {
h2 {
font-size: 20px;
}
}
}
}
/* END: ***************************** Service Details Page ************************** */
/* START: *************************** Service Details Page: Block ******************* */
#related_services_block {
/* background: var(--color_primary); */
padding: 20px 30px 30px 30px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
/* bg */
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.9;
.row {
background: var(--color_secondary);
}
img {
animation: rotating-animation 20s linear infinite;
}
h2 {
color: white !important;
border-bottom: 1px solid white;
padding-bottom: 10px;
margin-bottom: 30px;
}
ol li {
list-style: decimal;
color: white;
margin-bottom: 20px;
font-family: verdana;
font-weight: 700;
color: #f5f5f5;
text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191;
a {
color: white;
}
a:hover {
color: var(--color_third);
}
}
}
@media screen and (max-width: 767px) {
#related_services_block {
h2 {
font-size: 20px;
}
ol li {
font-weight: unset;
}
}
}
/* END: ***************************** Service Details Page: Block ******************* */
/* START: *************************** Locations Page ******************************** */
#locations_page {
padding: 30px 0;
background: yellow;
.each_location_section {
transition: transform 0.2s;
&:hover {
transform: scale(0.9);
}
.each_location {
border-radius: 20px;
border: 2px solid white;
h2 {
border-radius: 20px;
color: white;
/* font-size: 18px; */
margin: 0px;
padding: 10px;
background-color: var(--color_secondary);
}
}
}
}
/* END: ******************************** Locations Page ************************** */
/* START: ******************************** Counts Page ************************** */
#experience_counts_block {
padding: 15px 10px 15px 10px !important;
/* background: #e2dddd; */
.our_counts {
/* padding-top: 30px; */
color: white;
.each_count {
border-radius: 20px;
box-shadow: -1px 2px 16px -2px var(--color_primary);
background-color: red;
padding: 10px;
border: 2px solid white;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
/* text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6); */
}
.each_count i,
.each_count span {
font-size: 25px;
font-weight: bold;
}
.each_count i {
/* color: var(--color_primary); */
}
h3 {
font-size: 25px;
font-weight: 600;
margin-top: 15px;
color: var(--color_primary);
}
}
}
/* END: ******************************** Counts Page ************************** */
/* START: ******************************** Satisfaction Block ************************** */
/*
100% Satisfaction Guarantee
*/
/* .satisfation_block_left {
background-color: blue;
color: white;
div {
padding: 30px;
}
h2 {
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
span {
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
font-size: 50px !important;
}
}
ol {
list-style: auto !important;
li {
margin-bottom: 10px;
}
}
}
.satisfation_block_right {
background-color: #fed200;
div {
padding: 30px;
}
h2 {
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
span {
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
font-size: 50px !important;
}
}
ol {
list-style: auto !important;
li {
margin-bottom: 10px;
text-align: justify;
}
}
}
@media screen and (max-width: 425px) {
.satisfation_block_right,
.satisfation_block_left {
div {
padding: 10px !important;
}
}
}
@media screen and (max-width: 768px) {
.satisfation_block_right,.pop-up-left > b
.satisfation_block_left {
div {
padding: 20px;
}
}
} */
/* END: ******************************** Satisfaction Block ************************** */
/* START: ******************************** Contact Buttons ************************** */
/* START: header button --------------------*/
.contact_button_group_header {
text-align: center;
button {
border: 0;
text-align: center;
margin-bottom: 10px;
font-size: 28px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: #fff;
font-weight: bold;
font-family: Helvetica;
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6);
border: 1px solid white;
}
.contact_button_phone {
/* animation: zoom-in-zoom-out 1s ease-in infinite; */
padding: 8px;
border-radius: 20px;
margin-right: 40px;
background: var(--color_primary);
}
.contact_button_whatsapp {
animation: zoom-in-zoom-out 1s ease-in infinite;
padding: 8px;
border-radius: 20px;
background-color: var(--site_color_9);
}
a {
color: white;
}
a:hover,
a:focus {
color: white;
}
img {
animation: zoom-in-zoom-out 0.8s ease-in infinite;
width: 40px;
filter: drop-shadow(5px 5px 10px #000000);
}
}
@media screen and (max-width: 425px) {
.contact_button_group_header {
button {
padding: 10px !important;
font-size: 18px !important;
img {
width: 30px;
}
}
.contact_button_phone {
display: none;
}
}
}
@media screen and (max-width: 768px) {
.contact_button_group_header {
button {
font-size: 20px !important;
img {
width: 30px;
}
}
.contact_button_phone {
margin-right: 10px !important;
}
}
#header marquee {
font-size: 18px;
span {
line-height: 1em;
font-size: 20px;
}
}
}
@media screen and (max-width: 1024px) {
.contact_button_group_header {
button > img {
width: 30px !important;
height: 30px !important;
}
button {
font-size: 22px;
img {
width: 30px;
}
}
.contact_button_phone {
margin-right: 10px;
}
}
}
/* END: header button --------------------*/
/* START: Other small button --------------------*/
.contact_button_group_small {
text-align: center;
button {
border: 0;
text-align: center;
margin-bottom: 10px;
font-size: 30px;
animation: zoom-in-zoom-out 1s ease-in infinite;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: #fff;
font-weight: bold;
font-family: Helvetica;
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6);
border: 1px solid white;
}
.contact_button_phone {
border-left: 10px solid var(--color_third);
background: var(--color_primary);
}
.contact_button_whatsapp {
border-left: 10px solid var(--color_third);
background-color: var(--site_color_9);
}
a {
color: white;
}
a:hover,
a:focus {
color: var(--color_secondary);
}
img {
width: 40px;
filter: drop-shadow(5px 5px 10px #000000);
}
}
@media screen and (max-width: 425px) {
.contact_button_group_small {
button {
padding: 10px !important;
font-size: 18px !important;
img {
width: 50px;
}
}
.contact_button_phone {
display: none;
}
}
}
@media screen and (max-width: 1024px) {
.contact_button_group_small {
button {
.contact_button_phone,
.contact_button_whatsapp {
font-size: 22px;
}
}
.contact_button_phone {
margin-right: 10px !important;
}
}
}
/* END: Other small button --------------------*/
/* START: big button --------------------*/
.contact_button_group_big {
margin-top: 30px;
margin-bottom: 30px;
button {
border: 0;
background: none;
animation: zoom-in-zoom-out 1s ease-in infinite;
a {
animation: blink-animation 1s ease-in infinite;
font-size: 37px;
font-weight: 700;
background: var(--color_primary);
border-radius: 50px;
padding: 12px 50px 19px;
color: white;
}
a:hover {
color: white;
}
p {
border-radius: 50px;
font-size: 30px;
font-weight: bold;
background: yellow;
padding: 20px;
padding-bottom: 10px;
margin: 0;
}
}
}
@media screen and (max-width: 426px) {
.contact_button_group_big {
button {
a {
border-left: none !important;
border-right: none !important;
}
p {
font-size: 18px !important;
}
}
}
}
@media screen and (max-width: 767px) {
.contact_button_group_big a {
font-size: 20px !important;
padding: 15px 25px !important;
img {
width: 30px !important;
}
}
}
/* END: big button --------------------*/
/* END: ******************************** Contact Buttons ************************** */
/* START: ******************************** Animations **************************/
/* =========== #1. Zoom-In-Zoom-Out ===========*/
/* Keyframes for the zoom in zoom out animation */
@keyframes zoom-in-zoom-out {
/* At the beginning of the animation */
0% {
/* Scale the element to its original size */
transform: scale(1, 1);
}
/* At the middle of the animation */
50% {
/* Scale the element to 1.2 times its original size */
transform: scale(1.1, 1.1);
}
/* At the end of the animation */
100% {
/* Scale the element back to its original size */
transform: scale(1, 1);
}
}
/* Keyframes for the blink animation */
@keyframes blink-animation {
/* At the beginning of the animation */
0%,
49% {
background-color: darkblue;
color: #fff !important;
}
50%,
100% {
background-color: red;
color: #fff !important;
}
}
/* Keyframes for the rotate animation */
@keyframes rotating-animation {
/* At the beginning of the animation */
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
/* END: ******************************** Animations **************************/
/* START: ******************************** Contact Block **************************/
.contact_block {
padding-top: 20px;
margin-bottom: 20px;
}
/* END: ******************************** Contact Block **************************/
/* START: ******************************** Headings **************************/
.header_1 {
text-align: center;
/* font-family: Garamond, serif; */
line-height: 1em;
/* color: var(--color_secondary) !important; */
font-weight: 500;
font-size: 40px;
text-transform: capitalize;
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.1);
}
/* NOT USED */
.header_2_NOT_USED {
text-align: center;
font-size: 50px !important;
font-family: "Arial Black", Gadget, sans-serif;
text-shadow: 0px 0px 0 rgb(250, 188, 2), 1px 1px 0 rgb(245, 183, 0),
2px 2px 0 rgb(240, 178, 0), 3px 3px 0 rgb(235, 173, 0),
4px 4px 0 rgb(230, 168, 0), 5px 5px 0 rgb(225, 163, 0),
6px 6px 0 rgb(220, 158, 0), 7px 7px 0 rgb(215, 153, 0),
8px 8px 0 rgb(210, 148, 0), 9px 9px 0 rgb(205, 143, 0),
10px 10px 0 rgb(200, 138, 0), 11px 11px 10px rgba(0, 0, 0, 0.6),
11px 11px 1px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
.header_1 {
font-size: 28px !important;
}
}
@media screen and (max-width: 425px) {
.header_1 {
font-size: 22px !important;
}
}
/* END: ******************************** Headings **************************/
/* START: ******************************** Page Top Header **************************/
#header {
background: white;
/* background-image: linear-gradient(
180deg,
var(--color_primary),
var(--color_secondary)
); */
}
/* END: ******************************** Page Top Header **************************/
/* START: ******************************** Add-on Page Block **********************/
/* #addon_block_1 {
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
.addon_content {
text-align: left;
ul {
margin-bottom: 20px;
li {
font-size: 30px;
font-weight: 500;
margin: 10px 0;
display: inline-flex;
background-image: url(../images/icons/star_red.png);
background-repeat: no-repeat;
padding-left: 65px;
background-size: 45px;
}
}
}
.addon_block_call_now {
margin-bottom: 20px;
button {
border: 0;
background: none;
animation: zoom-in-zoom-out 1s ease-in infinite;
}
a {
font-size: 37px;
font-weight: 700;
background-image: linear-gradient(
180deg,
var(--color_primary),
var(--color_secondary)
);
border-radius: 50px;
padding: 12px 50px 19px;
color: #fff;
}
}
.addon_gif_text {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 20px;
font-size: 37px;
background: linear-gradient(
180deg,
var(--color_primary),
var(--color_secondary)
);
color: #fff;
padding: 20px;
}
}
@media screen and (max-width: 767px) {
#addon_block_1 {
.addon_content {
ul {
padding: 0;
li {
font-size: 18px;
padding-left: 50px;
background-size: 36px;
}
}
}
.addon_block_call_now a {
font-size: 20px;
padding: 15px 25px;
img {
width: 30px !important;
}
}
.addon_gif_text {
font-size: 20px;
padding: 10px 10px;
}
}
} */
/* END: ******************************** Add-on Page Block ************************/
.home_about_image img {
width: -webkit-fill-available;
}
/* START: Services List ==================================== */
#astrology_services {
text-align: center;
.title > p {
font-size: 16px;
color: var(--color_primary);
}
.each_service {
/* border-top-left-radius: 30px; */
/* border-bottom-right-radius: 30px; */
min-height: 350px;
margin-bottom: 40px;
transition: all 0.3s ease-in-out;
box-shadow: -1px 2px 16px -2px var(--color_primary);
h4 {
background: linear-gradient(
45deg,
var(--color_secondary) 50%,
var(--color_primary) 50%
);
/* border-top-left-radius: 30px; */
/* border-bottom-right-radius: 30px; */
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6);
/* background-color: #0b00ff; */
margin-top: 0px;
margin-bottom: 15px;
color: white;
font-size: 23px;
font-weight: 600;
padding: 10px;
text-transform: uppercase;
/* border-left: 20px solid var(--color_primary); */
}
div > a:hover {
color: #fff;
}
img {
filter: contrast(120%);
width: 100%;
height: auto;
height: 250px;
transition: 0.5s;
/* border-radius: 28px; */
}
/* img:hover {
color: var(--color_primary);
box-shadow: 0 0 5px var(--color_primary);
text-shadow: 0 0 5px var(--color_primary);
} */
p {
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
}
.read_more_section {
padding-bottom: 10px;
.read_more_button {
font-weight: 500;
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6);
text-transform: capitalize;
padding: 10px 30px 10px 30px;
font-size: 14px;
background: var(--color_secondary);
color: white;
border-radius: 20px;
/* border: 2px solid white !important; */
animation: zoom-in-zoom-out 1s ease-in infinite;
}
.read_more_button:hover {
transform: scale(1.2);
transition: all 0.3s;
}
}
}
}
@media screen and (max-width: 768px) {
.each_service {
text-align: center;
}
}
/* .each_service:hover {
transform: scale(1.1);
} */
/* new style block ---------------------------*/
.service_list_card {
position: relative;
height: 400px;
width: 100%;
margin: 10px 0;
transition: ease all 2.3s;
perspective: 1200px;
&:hover {
.cover {
transform: rotateX(0deg) rotateY(-180deg);
&:before {
transform: translateZ(30px);
}
&:after {
background-color: black;
}
h1 {
transform: translateZ(100px);
}
.price {
transform: translateZ(60px);
}
a {
transform: translateZ(-60px) rotatey(-180deg);
}
}
}
.cover {
position: absolute;
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition: ease all 2.3s;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
&:before {
content: "";
position: absolute;
border: 5px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 2;
transition: ease all 2.3s;
transform-style: preserve-3d;
transform: translateZ(0px);
}
&:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2;
transition: ease all 1.3s;
background: rgba(0, 0, 0, 0.4);
}
h1 {
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6);
font-weight: 600;
position: absolute;
bottom: 55px;
left: 50px;
color: white;
transform-style: preserve-3d;
transition: ease all 2.3s;
z-index: 3;
font-size: 3em;
transform: translateZ(0px);
}
.price {
text-shadow: 4px 6px 2px rgba(0, 0, 0, 0.6);
font-weight: 200;
position: absolute;
top: 55px;
right: 50px;
color: white;
transform-style: preserve-3d;
transition: ease all 2.3s;
z-index: 4;
font-size: 2em;
transform: translateZ(0px);
}
}
.card-back {
position: absolute;
height: 100%;
width: 100%;
background: var(--color_primary);
/* background: #0b0f08; */
transform-style: preserve-3d;
transition: ease all 2.3s;
transform: translateZ(-1px);
display: flex;
align-items: center;
justify-content: center;
a {
transform-style: preserve-3d;
transition: ease transform 2.3s, ease background 0.5s;
transform: translateZ(-1px) rotatey(-180deg);
background: transparent;
border: 1px solid white;
font-weight: 200;
font-size: 1.3em;
color: white;
/* padding: 14px 32px; */
outline: none;
text-decoration: none;
&:hover {
background-color: white;
color: #0b0f08;
.fa {
color: black;
}
}
.fa {
color: white;
}
}
}
}
/* END: Services List ==================================== */
/* START: Testimonials ==================================== */
#testimonials {
padding: 50px 0;
background-color: #efefef;
background-size: cover;
background-repeat: no-repeat;
.title {
text-align: center;
span {
color: var(--site_color_5);
}
h2 {
color: var(--color_primary);
}
p {
color: #fff;
}
}
.owl-dots {
display: none !important;
}
.owl-nav.disabled {
left: 310px;
position: absolute;
top: 130px;
display: none;
}
}
.testimonial-right {
border-radius: 20px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
background-color: var(--color_secondary);
box-shadow: 1px 3px 13px 0px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
margin-left: 2px;
margin-right: 2px;
margin-top: 20px;
transition: all 0.3s ease-in-out;
padding: 30px;
/* border-left: 20px solid var(--color_secondary); */
text-align: center;
color: white;
font-style: italic;
div {
width: 100%;
img {
width: 80px !important;
height: 80px;
display: unset !important;
border-radius: 100%;
}
}
.user_testi {
background-color: var(--color_third);
border-radius: 10px;
font-weight: bold;
text-align: center;
font-size: 25px;
color: black;
padding: 5px 20px 5px 20px;
}
p::before {
color: #fff;
background: #fff;
content: "";
display: block;
width: 30px;
height: 30px;
background-size: cover;
background: url(../images/icons/quote-left-solid.svg);
margin-bottom: 20px;
}
p::after {
color: #fff;
background: #fff;
content: "";
display: block;
width: 30px;
height: 30px;
background-size: cover;
background: url(../images/icons/quote-right-solid.svg);
position: absolute;
right: 80px;
}
}
@media screen and (max-width: 767px) {
.testimonial-right {
padding: 20px !important;
.user_testi {
font-size: 20px;
text-align: left;
}
}
}
/* END: Testimonials ==================================== */