html {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
body > * {
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ================= TOP BAR ================= */
.top-bar {
width: 100%;
min-height: 55px;
background:
linear-gradient(
rgba(55, 15, 5, 0.88),
rgba(55, 15, 5, 0.88)
),
url("images/bg.jpg");
background-size: cover;
background-position: center;
display: flex;
align-items: center;
border-bottom: 2px solid #d6a84f;
}
.top-bar-container {
width: 95%;
max-width: 1400px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
/* ================= CONTACT ================= */
.top-contact {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.contact-icon {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 17px;
background: #fff;
box-shadow: 0 0 8px rgba(255,255,255,0.25);
}
.contact-content {
display: flex;
align-items: center;
gap: 7px;
}
.contact-label {
color: #f5d78c;
font-size: 14px;
font-weight: 600;
}
.contact-number {
color: #fff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.contact-number:hover {
color: #ffd76a;
}
/* ================= MARQUEE ================= */
.top-marquee {
flex: 1;
overflow: hidden;
border-left: 1px solid rgba(255,255,255,0.25);
padding-left: 20px;
}
.top-marquee marquee {
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
}
.top-marquee span {
color: #ffd66b;
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {
.top-bar {
min-height: auto;
padding: 10px 0;
}
.top-bar-container {
width: 92%;
flex-direction: column;
gap: 8px;
}
.top-contact {
justify-content: center;
}
.top-marquee {
width: 100%;
border-left: none;
border-top: 1px solid rgba(255,255,255,0.2);
padding: 7px 0 0;
}
.top-marquee marquee {
font-size: 13px;
}
.contact-label {
font-size: 12px;
}
.contact-number {
font-size: 14px;
}
.contact-icon {
width: 30px;
height: 30px;
font-size: 14px;
}
}
@media (max-width: 400px) {
.contact-content {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.top-contact {
gap: 8px;
}
}
/* ================= 3 LOGO SECTION ================= */
.three-logo-section {
width: 100%;
padding: 18px 0;
background: #fff;
}
.three-logo-container {
width: 95%;
max-width: 1400px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
.logo-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
overflow: hidden;
transition: all 0.3s ease;
}
.logo-box:hover {
transform: translateY(-4px);
box-shadow:
0 8px 20px rgba(0,0,0,0.12);
border-color: #c99a35;
}
.logo-box a {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box img {
max-width: 100%;
object-fit: contain;
display: block;
}
/* ================= TABLET ================= */
@media (max-width: 900px) {
.three-logo-container {
}
}
/* ================= MOBILE ================= */
@media (max-width: 600px) {
.three-logo-section {
padding: 12px 0;
}
.three-logo-container {
width:100%;
grid-template-columns: 1fr;
}
.logo-box img {
max-width: 100%;
}
}
/* ================= BLINK CONTACT SECTION ================= */
.blink-contact-section {
width: 100%;
padding: 5px 0;
background:
linear-gradient(
135deg,
#4b1308,
#7b260d,
#4b1308
);
border-top: 2px solid #d5a84a;
border-bottom: 2px solid #d5a84a;
}
.blink-contact-container {
width: 95%;
max-width: 1400px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
/* ================= BLINK TEXT ================= */
.blink-text-box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
}
.blink-text {
color: #ffffff;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.3px;
animation: textBlink 1.4s infinite;
}
.blink-dot {
color: #ffd45c;
font-size: 18px;
animation: starBlink 1.4s infinite;
}
/* ================= BLINK ANIMATION ================= */
@keyframes textBlink {
0% {
opacity: 1;
}
50% {
opacity: 0.35;
}
100% {
opacity: 1;
}
}
@keyframes starBlink {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.2;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ================= CONTACT BUTTON ================= */
.contact-btn-box {
flex-shrink: 0;
}
.contact-us-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 155px;
padding: 12px 24px;
background: #d6a338;
color: #ffffff;
text-decoration: none;
font-size: 16px;
font-weight: 700;
border-radius: 5px;
border: 1px solid #f4d77e;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
transition: all 0.3s ease;
}
.contact-us-btn i {
font-size: 15px;
}
.contact-us-btn:hover {
background: #f0c34e;
color: #4b1308;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
/* ================= TABLET ================= */
@media (max-width: 900px) {
.blink-text {
font-size: 15px;
}
.contact-us-btn {
min-width: 135px;
padding: 10px 18px;
font-size: 14px;
}
}
/* ================= MOBILE ================= */
@media (max-width: 650px) {
.blink-contact-section {
padding: 12px 0;
}
.blink-contact-container {
width: 92%;
flex-direction: column;
gap: 12px;
}
.blink-text-box {
width: 100%;
}
.blink-text {
font-size: 14px;
line-height: 1.4;
}
.blink-dot {
font-size: 14px;
}
.contact-btn-box {
width: 100%;
text-align: center;
}
.contact-us-btn {
width: 180px;
}
}
/* =====================================================
FULL WIDTH BANNER
===================================================== */
.astrology-banner {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
line-height: 0;
background: #ffffff;
}
/* =====================================================
BANNER LINK
===================================================== */
.astrology-banner a {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* =====================================================
BANNER IMAGE
===================================================== */
.astrology-banner img {
display: block;
width: 100%;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
/* =====================================================
PROMOTIONAL SECTION
===================================================== */
.promo-section {
width: 100%;
padding: 55px 20px;
background:
linear-gradient(
135deg,
#fffaf0,
#ffffff,
#fff7e5
);
border-top: 1px solid #ead6a5;
border-bottom: 1px solid #ead6a5;
}
/* =====================================================
CONTAINER
===================================================== */
.promo-container {
width: 100%;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 1fr 340px;
gap: 45px;
align-items: center;
}
/* =====================================================
BADGE
===================================================== */
.promo-badge {
display: inline-block;
margin-bottom: 13px;
padding: 7px 14px;
color: #8a5a08;
background: #f9e8b5;
border-left: 4px solid #c8942e;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
/* =====================================================
HEADING
===================================================== */
.promo-content h2 {
margin: 0 0 18px;
color: #4b1609;
font-size: 34px;
line-height: 1.2;
font-weight: 800;
}
/* =====================================================
PARAGRAPHS
===================================================== */
.promo-content p {
margin: 0 0 14px;
color: #555;
font-size: 16px;
line-height: 1.75;
}
.promo-content strong {
color: #7a300e;
}
/* =====================================================
FEATURES
===================================================== */
.promo-features {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 22px 0;
}
.promo-feature {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
background: #ffffff;
border: 1px solid #ead7a8;
border-radius: 4px;
color: #54200d;
font-size: 13px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.promo-feature span {
color: #c28c25;
font-size: 15px;
}
/* =====================================================
MAIN BUTTON
===================================================== */
.promo-button {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 22px;
background: #741f0c;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
box-shadow: 0 5px 15px rgba(86,24,7,0.25);
transition: all 0.3s ease;
}
.promo-button:hover {
background: #c18b29;
color: #ffffff;
transform: translateY(-2px);
}
/* =====================================================
RIGHT HIGHLIGHT CARD
===================================================== */
.promo-highlight {
padding: 8px;
background:
linear-gradient(
135deg,
#5b1708,
#8a2e0e
);
border-radius: 8px;
box-shadow:
0 12px 30px rgba(68,20,7,0.20);
}
.highlight-inner {
padding: 30px 25px;
text-align: center;
border: 1px solid rgba(232,190,88,0.65);
border-radius: 5px;
color: #ffffff;
}
.highlight-icon {
width: 58px;
height: 58px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e0b64f;
color: #5b1708;
font-size: 23px;
}
.highlight-inner h3 {
margin: 0 0 10px;
color: #f5d276;
font-size: 25px;
}
.highlight-inner p {
margin: 0 0 18px;
color: #fff;
font-size: 14px;
line-height: 1.6;
opacity: 0.92;
}
.highlight-number {
margin-bottom: 18px;
color: #ffffff;
font-size: 20px;
font-weight: 800;
letter-spacing: 0.5px;
}
.highlight-inner a {
display: inline-block;
padding: 10px 24px;
background: #e0b64f;
color: #541606;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
transition: all 0.3s ease;
}
.highlight-inner a:hover {
background: #ffffff;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 900px) {
.promo-container {
grid-template-columns: 1fr;
gap: 30px;
}
.promo-highlight {
max-width: 450px;
width: 100%;
margin: auto;
}
.promo-content h2 {
font-size: 30px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.promo-section {
padding: 35px 15px;
}
.promo-content h2 {
font-size: 25px;
}
.promo-content p {
font-size: 14px;
line-height: 1.65;
}
.promo-features {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.promo-feature {
font-size: 13px;
}
.promo-button {
width: 100%;
justify-content: center;
text-align: center;
font-size: 13px;
}
.highlight-inner {
padding: 25px 18px;
}
.highlight-number {
font-size: 18px;
}
}
/* =====================================================
MARQUEE SECTION
===================================================== */
.marquee-service-section {
width: 100%;
padding: 13px 0;
background:
linear-gradient(
90deg,
#4b1308,
#781f0b,
#4b1308
);
border-top: 2px solid #d5a746;
border-bottom: 2px solid #d5a746;
overflow: hidden;
}
/* =====================================================
MARQUEE WRAPPER
===================================================== */
.marquee-wrapper {
width: 100%;
}
/* =====================================================
MARQUEE
===================================================== */
.marquee-wrapper marquee {
width: 100%;
color: #ffffff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
}
/* =====================================================
MARQUEE ITEM
===================================================== */
.marquee-item {
display: inline-flex;
align-items: center;
gap: 7px;
color: #ffffff;
margin: 0 12px;
}
.marquee-item i {
color: #f0c85b;
font-size: 14px;
}
/* =====================================================
SEPARATOR
===================================================== */
.marquee-separator {
display: inline-block;
color: #f0c85b;
font-size: 16px;
margin: 0 8px;
}
/* =====================================================
HOVER EFFECT
===================================================== */
.marquee-item:hover {
color: #f5cf66;
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.marquee-service-section {
padding: 11px 0;
}
.marquee-wrapper marquee {
font-size: 13px;
scrollamount: 5;
}
.marquee-item {
margin: 0 8px;
gap: 5px;
}
.marquee-item i {
font-size: 12px;
}
.marquee-separator {
margin: 0 5px;
font-size: 13px;
}
}
/* =====================================================
CTA SECTION
===================================================== */
.cta-section {
width: 100%;
min-height: 330px;
background-image:
url("images/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
/* =====================================================
DARK OVERLAY
===================================================== */
.cta-overlay {
width: 100%;
min-height: 330px;
padding: 55px 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background:linear-gradient(rgb(0 0 0 / 77%), rgb(0 0 0 / 92%));
}
/* =====================================================
CONTENT
===================================================== */
.cta-content {
width: 100%;
max-width: 800px;
margin: auto;
color: #ffffff;
}
/* =====================================================
SMALL TITLE
===================================================== */
.cta-small-title {
display: inline-block;
margin-bottom: 12px;
color: #f1cb69;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
}
/* =====================================================
HEADING
===================================================== */
.cta-content h2 {
margin: 0 0 14px;
color: #ffffff;
font-size: 35px;
line-height: 1.2;
font-weight: 800;
text-shadow:
0 3px 10px rgba(0,0,0,0.4);
}
/* =====================================================
DESCRIPTION
===================================================== */
.cta-content p {
max-width: 650px;
margin: 0 auto 25px;
color: #f8f8f8;
font-size: 16px;
line-height: 1.6;
}
/* =====================================================
BUTTONS
===================================================== */
.cta-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.cta-btn {
min-width: 145px;
padding: 12px 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
transition: all 0.3s ease;
}
/* CALL */
.cta-call {
color: #551807;
background: #e3b64d;
border: 1px solid #f5d984;
}
.cta-call:hover {
background: #ffffff;
color: #551807;
transform: translateY(-2px);
}
/* WHATSAPP */
.cta-whatsapp {
color: #ffffff;
background: #1f9d55;
border: 1px solid #52d889;
}
.cta-whatsapp:hover {
background: #28b965;
transform: translateY(-2px);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 900px) {
.cta-section,
.cta-overlay {
min-height: 300px;
}
.cta-content h2 {
font-size: 32px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.cta-section,
.cta-overlay {
min-height: 280px;
}
.cta-overlay {
padding: 40px 15px;
}
.cta-small-title {
font-size: 10px;
letter-spacing: 1.5px;
}
.cta-content h2 {
font-size: 25px;
}
.cta-content p {
font-size: 14px;
line-height: 1.5;
margin-bottom: 20px;
}
.cta-buttons {
width: 100%;
flex-direction: column;
gap: 9px;
}
.cta-btn {
width: 200px;
padding: 10px 18px;
font-size: 14px;
}
}
/* =====================================================
SERVICES SECTION
===================================================== */
.services-section {
width: 100%;
padding: 65px 20px;
background:
linear-gradient(
135deg,
#fffdf7,
#fff7e6
);
}
/* =====================================================
CONTAINER
===================================================== */
.services-container {
width: 100%;
max-width: 1200px;
margin: auto;
}
/* =====================================================
HEADING
===================================================== */
.services-heading {
text-align: center;
margin-bottom: 40px;
}
.services-heading > span {
color: #b27a16;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.services-heading h2 {
margin: 8px 0 10px;
color: #4d1609;
font-size: 34px;
font-weight: 800;
}
.services-heading p {
margin: auto;
max-width: 650px;
color: #000;
font-size: 15px;
line-height: 1.6;
}
/* =====================================================
GRID
===================================================== */
.services-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 25px;
}
/* =====================================================
SERVICE CARD
===================================================== */
.service-card {
position: relative;
overflow: hidden;
background: #ffffff;
border-radius: 8px;
border: 1px solid #ead9b1;
box-shadow:
0 8px 25px rgba(71,25,8,0.10);
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.service-card:hover {
transform: translateY(-9px);
box-shadow:
0 18px 40px rgba(71,25,8,0.18);
}
/* =====================================================
IMAGE
===================================================== */
.service-image {
position: relative;
height: 260px;
overflow: hidden;
background: #4b1508;
}
.service-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 0.6s ease;
}
.service-card:hover .service-image img {
transform: scale(1.08);
}
/* =====================================================
IMAGE OVERLAY
===================================================== */
.service-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(48,10,3,0.05),
rgba(48,10,3,0.60)
);
}
/* =====================================================
CONTENT
===================================================== */
.service-content {
padding: 25px 20px 22px;
text-align: center;
}
.service-content h3 {
margin: 0 0 10px;
color: #531707;
font-size: 21px;
font-weight: 800;
}
.service-content p {
margin: 0 0 20px;
color: #000;
font-size: 14px;
line-height: 1.6;
}
/* =====================================================
BUTTONS
===================================================== */
.service-buttons {
display: flex;
gap: 8px;
}
.service-buttons a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 7px;
border-radius: 4px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: all 0.3s ease;
}
/* CALL */
.service-call {
color: #ffffff;
background: #641b09;
border: 1px solid #641b09;
}
.service-call:hover {
background: #8d2c12;
transform: translateY(-2px);
}
/* WHATSAPP */
.service-whatsapp {
color: #ffffff;
background: #199b50;
border: 1px solid #199b50;
}
.service-whatsapp:hover {
background: #24b961;
transform: translateY(-2px);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 950px) {
.services-grid {
grid-template-columns:
repeat(2, 1fr);
}
.service-card:last-child {
grid-column:
1 / -1;
max-width: 450px;
width: 100%;
margin: auto;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.services-section {
padding: 45px 15px;
}
.services-heading {
margin-bottom: 28px;
}
.services-heading h2 {
font-size: 27px;
line-height: 1.25;
}
.services-heading p {
font-size: 14px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-card:last-child {
grid-column: auto;
max-width: none;
}
.service-image {
height: 180px;
}
.service-content {
padding-left: 17px;
padding-right: 17px;
}
.service-content p {
min-height: auto;
}
}
/* =====================================================
MAIN SECTION
===================================================== */
.why-counter-section {
width: 100%;
padding: 70px 20px;
background:
linear-gradient(
135deg,
#fffdf8,
#fff5df
);
}
/* =====================================================
CONTAINER
===================================================== */
.why-counter-container {
width: 100%;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 1fr 430px;
gap: 60px;
align-items: center;
}
/* =====================================================
WHY CONTENT
===================================================== */
.why-label {
display: inline-block;
color: #b47d1b;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.why-content h2 {
margin: 8px 0 15px;
color: #4d1608;
font-size: 35px;
line-height: 1.2;
font-weight: 800;
}
.why-intro {
max-width: 650px;
margin: 0 0 25px;
color: #000;
font-size: 15px;
line-height: 1.75;
}
/* =====================================================
WHY ITEM
===================================================== */
.why-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: rgba(255,255,255,0.75);
border: 1px solid #ead9b2;
border-radius: 6px;
transition: all 0.3s ease;
}
.why-item:hover {
transform: translateX(5px);
box-shadow:
0 7px 20px rgba(75,22,8,0.10);
border-color: #d0a34a;
}
/* =====================================================
WHY ICON
===================================================== */
.why-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
135deg,
#e4bc59,
#b47c18
);
color: #531707;
font-size: 18px;
}
.why-item h3 {
margin: 0 0 5px;
color: #541807;
font-size: 17px;
font-weight: 800;
}
.why-item p {
margin: 0;
color: #000;
font-size: 13px;
line-height: 1.55;
}
/* =====================================================
COUNTER AREA
===================================================== */
.counter-area {
position: relative;
padding: 30px;
background:
linear-gradient(
145deg,
#4b1207,
#7c250d
);
border-radius: 10px;
border: 1px solid #c89b3e;
box-shadow:
0 15px 35px rgba(70,20,7,0.20);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
/* =====================================================
COUNTER TITLE
===================================================== */
.counter-title {
grid-column: 1 / -1;
text-align: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.counter-title span {
color: #e8c566;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.counter-title h3 {
margin: 7px 0 0;
color: #ffffff;
font-size: 21px;
font-weight: 800;
}
/* =====================================================
COUNTER BOX
===================================================== */
.counter-box {
padding: 17px 10px;
text-align: center;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(232,194,102,0.20);
border-radius: 6px;
transition: all 0.3s ease;
}
.counter-box:hover {
background: rgba(255,255,255,0.13);
transform: translateY(-3px);
border-color: rgba(232,194,102,0.55);
}
/* =====================================================
COUNTER ICON
===================================================== */
.counter-icon {
margin-bottom: 8px;
color: #e4bd5a;
font-size: 21px;
}
/* =====================================================
COUNTER NUMBER
===================================================== */
.counter-number {
color: #ffffff;
font-size: 28px;
line-height: 1;
font-weight: 800;
}
.counter-number span:last-child {
color: #e4bd5a;
font-size: 20px;
}
.counter-box p {
margin: 7px 0 0;
color: rgba(255,255,255,0.78);
font-size: 12px;
}
/* =====================================================
CTA BUTTON
===================================================== */
.why-call-btn {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 5px;
padding: 12px 15px;
color: #531707;
background: #e3b64d;
border: 1px solid #f4d67d;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
font-weight: 800;
transition: all 0.3s ease;
}
.why-call-btn:hover {
background: #ffffff;
transform: translateY(-2px);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 950px) {
.why-counter-container {
grid-template-columns: 1fr;
gap: 35px;
}
.counter-area {
max-width: 600px;
width: 100%;
margin: auto;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.why-counter-section {
padding: 45px 15px;
}
.why-content h2 {
font-size: 27px;
}
.why-intro {
font-size: 14px;
}
.why-item {
padding: 12px;
gap: 11px;
}
.why-icon {
width: 42px;
height: 42px;
font-size: 16px;
}
.why-item h3 {
font-size: 15px;
}
.why-item p {
font-size: 12px;
}
.counter-area {
padding: 18px;
gap: 10px;
}
.counter-number {
font-size: 24px;
}
.counter-title h3 {
font-size: 18px;
}
}
/* ---------------------------------------------------------
MAIN SECTION
--------------------------------------------------------- */
.quick-services-section {
width: 100%;
position: relative;
background-image:
url("images/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* ---------------------------------------------------------
DARK OVERLAY
--------------------------------------------------------- */
.quick-services-overlay {
width: 100%;
padding: 70px 20px;
background:
linear-gradient(
135deg,
rgba(38, 7, 2, 0.95),
rgba(83, 19, 7, 0.91)
);
}
/* ---------------------------------------------------------
CONTAINER
--------------------------------------------------------- */
.quick-services-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* ---------------------------------------------------------
HEADING
--------------------------------------------------------- */
.quick-heading {
text-align: center;
margin-bottom: 42px;
}
.quick-heading span {
display: inline-block;
color: #e9c45e;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.5px;
}
.quick-heading h2 {
margin: 9px 0 11px;
color: #ffffff;
font-size: 36px;
line-height: 1.2;
font-weight: 800;
}
.quick-heading p {
max-width: 650px;
margin: 0 auto;
color: rgba(255,255,255,0.78);
font-size: 15px;
line-height: 1.6;
}
/* ---------------------------------------------------------
SERVICES GRID
--------------------------------------------------------- */
.quick-services-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 22px;
}
/* ---------------------------------------------------------
SERVICE CARD
--------------------------------------------------------- */
.quick-service-card {
position: relative;
display: flex;
min-height: 175px;
padding: 12px;
gap: 16px;
overflow: hidden;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.14),
rgba(255,255,255,0.055)
);
border: 1px solid
rgba(232,194,91,0.38);
border-radius: 12px;
backdrop-filter: blur(8px);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* ---------------------------------------------------------
GOLDEN CORNER DESIGN
--------------------------------------------------------- */
.quick-service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 55px;
height: 55px;
border-top: 3px solid #e6bd50;
border-left: 3px solid #e6bd50;
border-radius: 12px 0 0 0;
pointer-events: none;
}
.quick-service-card::after {
content: "";
position: absolute;
right: -25px;
bottom: -25px;
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid rgba(230,189,80,0.25);
pointer-events: none;
}
.quick-service-card:hover {
transform: translateY(-7px);
border-color: #e5bf58;
box-shadow:
0 15px 35px rgba(0,0,0,0.28);
}
/* ---------------------------------------------------------
SERVICE IMAGE
--------------------------------------------------------- */
.quick-service-image {
position: relative;
flex: 0 0 112px;
height: 145px;
overflow: hidden;
border-radius: 9px;
border: 2px solid
rgba(232,194,91,0.70);
transform: skewY(-3deg);
box-shadow:
5px 7px 0
rgba(218,171,60,0.18);
}
/* ---------------------------------------------------------
IMAGE
--------------------------------------------------------- */
.quick-service-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform:
skewY(3deg)
scale(1.08);
transition:
transform 0.5s ease;
}
.quick-service-card:hover
.quick-service-image img {
transform:
skewY(3deg)
scale(1.18);
}
/* ---------------------------------------------------------
IMAGE SHINE
--------------------------------------------------------- */
.quick-service-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.22),
transparent 45%
);
pointer-events: none;
}
/* ---------------------------------------------------------
CONTENT
--------------------------------------------------------- */
.quick-service-content {
flex: 1;
padding: 8px 5px 5px 0;
}
.quick-service-content h3 {
margin: 0 0 7px;
color: #ffffff;
font-size: 17px;
line-height: 1.2;
font-weight: 800;
}
.quick-service-content p {
margin: 0 0 12px;
color: rgba(255,255,255,0.68);
font-size: 12px;
line-height: 1.45;
}
/* ---------------------------------------------------------
ACTION BUTTONS
--------------------------------------------------------- */
.quick-actions {
display: flex;
gap: 6px;
}
.quick-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 9px;
border-radius: 4px;
text-decoration: none;
font-size: 10px;
font-weight: 800;
transition: all 0.3s ease;
}
.quick-call {
color: #4d1206;
background: #e5bd51;
}
.quick-call:hover {
background: #ffffff;
transform: translateY(-2px);
}
.quick-wa {
color: #ffffff;
background: #179c50;
}
.quick-wa:hover {
background: #27bc66;
transform: translateY(-2px);
}
/* ---------------------------------------------------------
BOTTOM CTA
--------------------------------------------------------- */
.quick-bottom-cta {
margin-top: 32px;
padding-top: 22px;
border-top:
1px solid rgba(255,255,255,0.18);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.quick-bottom-cta span {
color: #ffffff;
font-size: 15px;
font-weight: 700;
}
.quick-bottom-cta a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
background: #1ca657;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-size: 13px;
font-weight: 700;
transition: all 0.3s ease;
}
.quick-bottom-cta a:hover {
background: #28bf69;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.quick-services-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.quick-services-section {
background-attachment: scroll;
}
.quick-services-overlay {
padding: 48px 15px;
}
.quick-heading {
margin-bottom: 28px;
}
.quick-heading h2 {
font-size: 27px;
line-height: 1.25;
}
.quick-heading p {
font-size: 13px;
}
.quick-services-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.quick-service-card {
min-height: 145px;
padding: 10px;
gap: 13px;
}
.quick-service-image {
flex: 0 0 95px;
height: 125px;
}
.quick-service-content {
padding: 6px 3px 4px 0;
}
.quick-service-content h3 {
font-size: 15px;
}
.quick-service-content p {
font-size: 11px;
margin-bottom: 9px;
}
.quick-actions {
gap: 5px;
}
.quick-actions a {
padding: 7px;
font-size: 9px;
}
.quick-bottom-cta {
flex-direction: column;
gap: 10px;
}
.quick-bottom-cta a {
width: 100%;
justify-content: center;
}
}
/* =========================================================
CLIENT FEEDBACK SECTION
========================================================= */
.client-feedback-section {
width: 100%;
padding: 75px 20px;
background: #fffaf2;
}
.feedback-container {
width: 100%;
max-width: 1200px;
margin: auto;
}
/* =========================================================
FEEDBACK HEADING
========================================================= */
.feedback-heading {
text-align: center;
margin-bottom: 45px;
}
.feedback-heading span {
display: inline-block;
color: #a47718;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.feedback-heading h2 {
margin: 8px 0 10px;
color: #4b1207;
font-size: 36px;
line-height: 1.2;
font-weight: 800;
}
.feedback-heading p {
max-width: 650px;
margin: auto;
color: #000;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
FEEDBACK GRID
========================================================= */
.feedback-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 22px;
}
/* =========================================================
FEEDBACK CARD
========================================================= */
.feedback-card {
position: relative;
padding: 25px;
overflow: hidden;
background: #ffffff;
border: 1px solid #ead9b5;
border-radius: 14px;
box-shadow:
0 8px 25px rgba(80,35,10,0.07);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.feedback-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 4px;
background: #c99a2e;
}
.feedback-card:hover {
transform: translateY(-7px);
border-color: #d3a83f;
box-shadow:
0 15px 35px rgba(80,35,10,0.13);
}
/* =========================================================
CLIENT TOP
========================================================= */
.feedback-top {
display: flex;
align-items: center;
gap: 12px;
}
/* =========================================================
CLIENT IMAGE
========================================================= */
.client-image {
width: 58px;
height: 58px;
flex-shrink: 0;
padding: 3px;
border-radius: 50%;
background:
linear-gradient(
135deg,
#e9c45c,
#a87518
);
box-shadow:
0 4px 12px rgba(113,74,10,0.20);
}
.client-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 50%;
border: 2px solid #ffffff;
}
/* =========================================================
CLIENT INFORMATION
========================================================= */
.client-info {
flex: 1;
}
.client-info h3 {
margin: 0 0 3px;
color: #401108;
font-size: 16px;
font-weight: 800;
}
.client-info span {
color: #999;
font-size: 12px;
}
/* =========================================================
QUOTE ICON
========================================================= */
.quote-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #b3831d;
background: #fff6dd;
font-size: 13px;
}
/* =========================================================
STARS
========================================================= */
.feedback-stars {
margin: 18px 0 10px;
color: #d49e28;
font-size: 15px;
letter-spacing: 2px;
}
/* =========================================================
FEEDBACK TEXT
========================================================= */
.feedback-text {
margin: 0;
color: #000;
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
FEEDBACK CTA
========================================================= */
.feedback-cta {
margin-top: 35px;
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background:
linear-gradient(
135deg,
#4b1207,
#731e0b
);
border-radius: 10px;
}
.feedback-cta h3 {
margin: 0 0 5px;
color: #ffffff;
font-size: 19px;
}
.feedback-cta p {
margin: 0;
color: rgba(255,255,255,0.72);
font-size: 13px;
}
.feedback-cta-buttons {
display: flex;
gap: 8px;
}
.feedback-cta-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 17px;
text-decoration: none;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
}
.feedback-call {
color: #4b1207;
background: #e8c45c;
}
.feedback-whatsapp {
color: #ffffff;
background: #1ca657;
}
/* =========================================================
FAQ SECTION
========================================================= */
.faq-section {
width: 100%;
padding: 30px 20px;
background:
linear-gradient(
135deg,
#fffdf8,
#f8efe1
);
}
.faq-container {
width: 100%;
max-width: 950px;
margin: auto;
}
/* =========================================================
FAQ HEADING
========================================================= */
.faq-heading {
text-align: center;
margin-bottom: 40px;
}
.faq-heading span {
display: inline-block;
color: #a47718;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.faq-heading h2 {
margin: 8px 0 10px;
color: #4b1207;
font-size: 35px;
line-height: 1.2;
font-weight: 800;
}
.faq-heading p {
max-width: 650px;
margin: auto;
color: #000;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
FAQ WRAPPER
========================================================= */
.faq-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
/* =========================================================
FAQ ITEM
========================================================= */
.faq-item {
overflow: hidden;
background: #ffffff;
border: 1px solid #ead9b5;
border-radius: 8px;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.faq-item.active {
border-color: #d1a33b;
box-shadow:
0 8px 20px rgba(85,40,10,0.07);
}
/* =========================================================
FAQ QUESTION
========================================================= */
.faq-question {
width: 100%;
padding: 19px 22px;
border: 0;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
text-align: left;
background: transparent;
color: #461208;
font-family: inherit;
font-size: 14px;
font-weight: 700;
}
.faq-question i {
width: 29px;
height: 29px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #9b711b;
background: #fff5d9;
border-radius: 50%;
font-size: 11px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.faq-item.active
.faq-question i {
transform: rotate(45deg);
background: #f5df9d;
}
/* =========================================================
FAQ ANSWER
========================================================= */
.faq-answer {
display: none;
padding: 0 22px 20px;
}
.faq-item.active
.faq-answer {
display: block;
}
.faq-answer p {
margin: 0;
padding-top: 2px;
color: #000;
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
FAQ BOTTOM CTA
========================================================= */
.faq-bottom {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.faq-bottom p {
margin: 0;
color: #000;
font-size: 14px;
font-weight: 600;
}
.faq-bottom a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 18px;
color: #ffffff;
background: #1ca657;
text-decoration: none;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
transition: all 0.3s ease;
}
.faq-bottom a:hover {
background: #28bd68;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.feedback-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.client-feedback-section,
.faq-section {
padding: 50px 15px;
}
.feedback-heading h2,
.faq-heading h2 {
font-size: 28px;
}
.feedback-heading p,
.faq-heading p {
font-size: 13px;
}
.feedback-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.feedback-card {
padding: 20px;
}
.client-image {
width: 52px;
height: 52px;
}
.feedback-cta {
padding: 22px 18px;
flex-direction: column;
text-align: center;
}
.feedback-cta h3 {
font-size: 17px;
}
.feedback-cta-buttons {
width: 100%;
}
.feedback-cta-buttons a {
flex: 1;
}
.faq-question {
padding: 16px;
font-size: 13px;
}
.faq-answer {
padding: 0 16px 17px;
}
.faq-answer p {
font-size: 12px;
}
.faq-bottom {
flex-direction: column;
}
.faq-bottom a {
width: 100%;
}
}
/* =========================================================
MAIN FOOTER
========================================================= */
.main-footer {
width: 100%;
color: #ffffff;
background:
#300b05;
}
/* =========================================================
FOOTER TOP
========================================================= */
.footer-top {
width: 100%;
padding: 65px 20px 55px;
background:
linear-gradient(
135deg,
#2b0804 0%,
#4a1007 48%,
#260704 100%
);
}
.footer-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* =========================================================
FOOTER GRID
========================================================= */
.footer-grid {
display: grid;
grid-template-columns:
1.35fr
1fr
1.2fr
1.25fr;
gap: 45px;
}
/* =========================================================
FOOTER ABOUT
========================================================= */
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.footer-logo h2 {
margin: 0;
color: #ffffff;
font-size: 19px;
line-height: 1.2;
font-weight: 800;
}
.footer-logo h2 span {
display: block;
margin-top: 2px;
color: #e5bf58;
font-size: 15px;
}
.footer-about > p {
max-width: 330px;
margin: 0;
color: rgba(255,255,255,0.67);
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
SOCIAL ICONS
========================================================= */
.footer-social {
display: flex;
gap: 8px;
margin-top: 22px;
}
.footer-social a {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
color: #e7c35f;
background:
rgba(255,255,255,0.08);
border: 1px solid
rgba(229,191,88,0.3);
border-radius: 50%;
text-decoration: none;
font-size: 13px;
transition: all 0.3s ease;
}
.footer-social a:hover {
color: #4b1007;
background: #e7c35f;
transform: translateY(-3px);
}
/* =========================================================
FOOTER HEADINGS
========================================================= */
.footer-column h3 {
margin: 3px 0 9px;
color: #ffffff;
font-size: 17px;
font-weight: 800;
}
.footer-heading-line {
width: 42px;
height: 3px;
margin-bottom: 20px;
background:
linear-gradient(
90deg,
#e4bd55,
transparent
);
}
/* =========================================================
FOOTER LINKS
========================================================= */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 11px;
}
.footer-links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.68);
text-decoration: none;
font-size: 12px;
transition: all 0.3s ease;
}
.footer-links a i {
color: #dcb54d;
font-size: 9px;
}
.footer-links a:hover {
color: #e8c55f;
padding-left: 5px;
}
/* =========================================================
CONTACT ITEMS
========================================================= */
.footer-contact-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 17px;
color: #ffffff;
text-decoration: none;
}
.footer-contact-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #4b1007;
background: #e4bd55;
border-radius: 8px;
font-size: 14px;
}
.footer-contact-icon.whatsapp-icon {
color: #ffffff;
background: #159c4e;
}
.footer-contact-item span {
display: block;
margin-bottom: 3px;
color: rgba(255,255,255,0.55);
font-size: 10px;
}
.footer-contact-item strong {
display: block;
color: #ffffff;
font-size: 13px;
}
/* =========================================================
CONSULTATION BOX
========================================================= */
.footer-consultation {
display: flex;
align-items: center;
gap: 10px;
margin: 5px 0 15px;
padding: 13px;
background:
rgba(255,255,255,0.06);
border-left: 3px solid #dcb54d;
border-radius: 5px;
}
.footer-consultation > i {
color: #e4bd55;
font-size: 18px;
}
.footer-consultation strong {
color: #ffffff;
font-size: 12px;
}
.footer-consultation p {
margin: 3px 0 0;
color: rgba(255,255,255,0.55);
font-size: 10px;
}
/* =========================================================
WHATSAPP BUTTON
========================================================= */
.footer-whatsapp-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 15px;
color: #ffffff;
background: #159c4e;
border-radius: 5px;
text-decoration: none;
font-size: 12px;
font-weight: 700;
transition: all 0.3s ease;
}
.footer-whatsapp-btn:hover {
background: #22b963;
transform: translateY(-2px);
}
/* =========================================================
FOOTER CTA
========================================================= */
.footer-cta {
padding: 25px 20px;
background:
linear-gradient(
90deg,
#6a1b09,
#491006
);
border-top:
1px solid rgba(230,191,88,0.25);
border-bottom:
1px solid rgba(230,191,88,0.20);
}
.footer-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.footer-cta-inner > div:first-child span {
color: #e4bd55;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.footer-cta-inner h2 {
margin: 5px 0 0;
color: #ffffff;
font-size: 23px;
}
/* =========================================================
CTA BUTTONS
========================================================= */
.footer-cta-buttons {
display: flex;
gap: 9px;
}
.footer-cta-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 12px 19px;
border-radius: 5px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition: all 0.3s ease;
}
.footer-call-btn {
color: #4b1007;
background: #e4bd55;
}
.footer-call-btn:hover {
background: #ffffff;
}
.footer-wa-btn {
color: #ffffff;
background: #159c4e;
}
.footer-wa-btn:hover {
background: #22b963;
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.footer-bottom {
padding: 18px 20px;
background: #210603;
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.footer-bottom p {
margin: 0;
color: rgba(255,255,255,0.5);
font-size: 11px;
}
.footer-bottom p strong {
color: #dcb54d;
}
.footer-bottom-links {
display: flex;
align-items: center;
gap: 9px;
}
.footer-bottom-links a {
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 11px;
}
.footer-bottom-links a:hover {
color: #e4bd55;
}
.footer-bottom-links span {
color: rgba(255,255,255,0.25);
font-size: 10px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.footer-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 40px 30px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.footer-top {
padding: 50px 18px 40px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-about > p {
max-width: 100%;
}
.footer-cta {
padding: 28px 18px;
}
.footer-cta-inner {
flex-direction: column;
text-align: center;
}
.footer-cta-inner h2 {
font-size: 20px;
}
.footer-cta-buttons {
width: 100%;
}
.footer-cta-buttons a {
flex: 1;
padding: 11px 8px;
}
.footer-bottom {
padding: 18px;
}
.footer-bottom-inner {
flex-direction: column;
text-align: center;
}
.footer-bottom-links {
flex-wrap: wrap;
justify-content: center;
}
}
/* =========================================================
FLOATING CONTACT CONTAINER
========================================================= */
.floating-contact-buttons {
position: fixed;
right: 22px;
bottom: 25px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 13px;
}
/* =========================================================
COMMON BUTTON
========================================================= */
.floating-btn {
position: relative;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 50%;
box-shadow:
0 7px 20px rgba(0,0,0,0.25);
transition:
width 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* =========================================================
ICON
========================================================= */
.floating-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
font-size: 23px;
}
.floating-call .floating-icon {
background:linear-gradient(135deg, #f51211, #d00201);
}
.floating-whatsapp .floating-icon {
background:
linear-gradient(
135deg,
#119447,
#25d366
);
}
/* =========================================================
RIPPLE / PULSE EFFECT
========================================================= */
.floating-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
animation: floatingPulse 2s infinite;
z-index: -1;
}
.floating-call::before {
background: rgba(197,76,31,0.45);
}
.floating-whatsapp::before {
background: rgba(37,211,102,0.40);
}
@keyframes floatingPulse {
0% {
transform: scale(1);
opacity: 0.8;
}
70% {
transform: scale(1.45);
opacity: 0;
}
100% {
transform: scale(1.45);
opacity: 0;
}
}
/* =========================================================
LABEL
========================================================= */
.floating-label {
position: absolute;
right: 68px;
top: 50%;
transform:
translateY(-50%)
translateX(10px);
padding: 8px 13px;
color: #ffffff;
background: #3b0c05;
border-radius: 5px;
white-space: nowrap;
font-size: 11px;
font-weight: 700;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow:
0 5px 15px rgba(0,0,0,0.18);
}
/* LABEL ARROW */
.floating-label::after {
content: "";
position: absolute;
right: -5px;
top: 50%;
width: 10px;
height: 10px;
transform:
translateY(-50%)
rotate(45deg);
background: #3b0c05;
}
/* =========================================================
HOVER
========================================================= */
/* =========================================================
CALL BUTTON HOVER
========================================================= */
.floating-call:hover .floating-icon {
background:linear-gradient(135deg, #f51211, #d00201);
}
/* =========================================================
WHATSAPP BUTTON HOVER
========================================================= */
.floating-whatsapp:hover .floating-icon {
background:
linear-gradient(
135deg,
#0b803b,
#25d366
);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.floating-contact-buttons {
right: 14px;
bottom: 18px;
gap: 11px;
}
.floating-btn {
width: 52px;
height: 52px;
}
.floating-icon {
width: 52px;
height: 52px;
font-size: 20px;
}
/* Disable expanding label on mobile */
.floating-btn:hover {
width: 52px;
border-radius: 50%;
transform: translateY(-3px);
}
.floating-label {
display: none;
}
}