/* =========================================================
BIBIDIBABIDIBU CLEANING LLC
PREMIUM CLEANING WEBSITE
GREEN / WHITE / PINK
========================================================= */

/* =========================================================
ROOT
========================================================= */

{

--green: #087a5c;
--green-dark: #034b3a;
--green-light: #20b88a;

--white: #ffffff;
--soft-white: #f7fffb;

--pink: #ff77ad;
--pink-light: #ffd5e6;

--dark: #12352d;

--gray: #63756f;

--shadow:
    0 20px 60px rgba(5, 86, 64, 0.12);

--radius: 24px;

}

/* =========================================================
RESET
========================================================= */

{

margin: 0;
padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

font-family: "Poppins", sans-serif;

background:
    radial-gradient(
        circle at 10% 20%,
        rgba(32, 184, 138, 0.10),
        transparent 30%
    ),

    radial-gradient(
        circle at 90% 10%,
        rgba(255, 119, 173, 0.10),
        transparent 25%
    ),

    linear-gradient(
        135deg,
        #ffffff,
        #f4fffa,
        #ffffff
    );

color: var(--dark);

overflow-x: hidden;

}

body::before {

content: "";

position: fixed;

inset: 0;

pointer-events: none;

z-index: -3;

background-image:

    linear-gradient(
        rgba(8, 122, 92, 0.025) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(8, 122, 92, 0.025) 1px,
        transparent 1px
    );

background-size: 55px 55px;

}

/* =========================================================
MAGIC CURSOR
========================================================= */

#magicCursor {

position: fixed;

width: 18px;
height: 18px;

border-radius: 50%;

pointer-events: none;

z-index: 99999;

transform:
    translate(-50%, -50%);

background:
    radial-gradient(
        circle,
        #ffffff 0%,
        var(--pink) 25%,
        rgba(255, 119, 173, 0.3) 50%,
        transparent 75%
    );

box-shadow:

    0 0 10px #ffffff,
    0 0 25px var(--pink),
    0 0 50px rgba(255, 119, 173, 0.8);

transition:
    width 0.2s,
    height 0.2s;

}

/* =========================================================
MAGIC SPARKLES
========================================================= */

.magic-sparkle {

position: fixed;

width: 8px;
height: 8px;

border-radius: 50%;

pointer-events: none;

z-index: 99998;

background: white;

box-shadow:

    0 0 10px white,
    0 0 20px var(--pink),
    0 0 30px var(--green-light);

animation:
    sparkleFade 0.8s linear forwards;

}

@keyframes sparkleFade {

0% {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

}

100% {

    opacity: 0;

    transform:
        translate(
            calc(-50% + var(--x)),
            calc(-50% + var(--y))
        )
        scale(0);

}

}

/* =========================================================
BACKGROUND PARTICLES
========================================================= */

.particles {

position: fixed;

inset: 0;

pointer-events: none;

overflow: hidden;

z-index: -2;

}

.particles span {

position: absolute;

bottom: -50px;

width: 5px;
height: 5px;

border-radius: 50%;

background: white;

box-shadow:

    0 0 8px white,
    0 0 20px var(--green-light),
    0 0 35px var(--pink);

animation:

    particleRise
    linear
    infinite;

}

.particles span(1) {

left: 5%;
animation-duration: 10s;

}

.particles span(2) {

left: 14%;
animation-duration: 14s;
animation-delay: 2s;

}

.particles span(3) {

left: 23%;
animation-duration: 11s;
animation-delay: 5s;

}

.particles span(4) {

left: 35%;
animation-duration: 16s;

}

.particles span(5) {

left: 45%;
animation-duration: 12s;
animation-delay: 3s;

}

.particles span(6) {

left: 55%;
animation-duration: 15s;

}

.particles span(7) {

left: 64%;
animation-duration: 10s;
animation-delay: 4s;

}

.particles span(8) {

left: 72%;
animation-duration: 18s;

}

.particles span(9) {

left: 80%;
animation-duration: 13s;

}

.particles span(10) {

left: 88%;
animation-duration: 17s;
animation-delay: 2s;

}

.particles span(11) {

left: 94%;
animation-duration: 11s;

}

.particles span(12) {

left: 30%;
animation-duration: 19s;

}

@keyframes particleRise {

0% {

    transform:
        translateY(0)
        scale(0);

    opacity: 0;

}

20% {

    opacity: 1;

}

100% {

    transform:
        translateY(-110vh)
        translateX(80px)
        scale(1.8);

    opacity: 0;

}

}

/* =========================================================
INTRO SCREEN
========================================================= */

#introScreen {

position: fixed;

inset: 0;

display: flex;

align-items: center;
justify-content: center;

z-index: 100000;

background:

    radial-gradient(
        circle,
        rgba(255, 255, 255, 0.95),
        rgba(233, 255, 246, 0.98)
    );

transition:

    opacity 1s ease,
    visibility 1s ease;

}

#introScreen.hide {

opacity: 0;

visibility: hidden;

}

.introLogo {

width: min(380px, 75vw);

max-height: 300px;

object-fit: contain;

animation:

    logoIntro
    2s ease-in-out infinite alternate;

}

.introGlow {

position: absolute;

width: 400px;
height: 400px;

border-radius: 50%;

background:

    radial-gradient(
        circle,
        rgba(32, 184, 138, 0.3),
        rgba(255, 119, 173, 0.15),
        transparent 70%
    );

filter: blur(30px);

}

@keyframes logoIntro {

from {

    transform:
        scale(0.95);

    filter:
        drop-shadow(
            0 0 15px rgba(32, 184, 138, 0.4)
        );

}

to {

    transform:
        scale(1.05);

    filter:
        drop-shadow(
            0 0 40px rgba(255, 119, 173, 0.5)
        );

}

}

/* =========================================================
HEADER
========================================================= */

#header {

position: fixed;

top: 0;
left: 0;

width: 100%;

z-index: 9999;

transition:

    background 0.3s,
    box-shadow 0.3s;

}

#header.scrolled {

background:

    rgba(255, 255, 255, 0.88);

backdrop-filter:

    blur(20px);

box-shadow:

    0 10px 40px rgba(0, 0, 0, 0.08);

}

.header-container {

width: min(1400px, 92%);

margin: auto;

min-height: 82px;

display: flex;

align-items: center;

justify-content: space-between;

}

.logo img {

width: 150px;

height: 65px;

object-fit: contain;

transition:

    transform 0.3s;

}

.logo img {

transform:
    scale(1.05);

}

/* =========================================================
NAVIGATION
========================================================= */

.nav-links {

display: flex;

align-items: center;

gap: 26px;

list-style: none;

}

.nav-links a,
.dropdown-toggle {

font-family: inherit;

font-size: 0.88rem;

font-weight: 600;

text-decoration: none;

color: var(--dark);

border: none;

background: none;

cursor: pointer;

transition:

    color 0.3s;

}

.nav-links a,
.nav-links a.active,
.dropdown-toggle {

color: var(--green);

}

.dropdown {

position: relative;

}

.dropdown-toggle {

display: flex;

align-items: center;

gap: 7px;

}

.dropdown-menu {

position: absolute;

top: calc(100% + 18px);

left: 0;

width: 240px;

padding: 12px;

list-style: none;

border-radius: 18px;

background:

    rgba(255, 255, 255, 0.96);

backdrop-filter:

    blur(20px);

box-shadow:

    var(--shadow);

opacity: 0;

visibility: hidden;

transform:
    translateY(10px);

transition:

    0.25s ease;

}

.dropdown .dropdown-menu,
.dropdown.active .dropdown-menu {

opacity: 1;

visibility: visible;

transform:
    translateY(0);

}

.dropdown-menu a {

display: block;

padding: 12px 15px;

border-radius: 10px;

}

.dropdown-menu a {

background:

    rgba(32, 184, 138, 0.08);

}

/* =========================================================
MOBILE MENU
========================================================= */

.menu-toggle {

display: none;

width: 45px;
height: 45px;

border: none;

border-radius: 12px;

background:

    rgba(8, 122, 92, 0.1);

cursor: pointer;

}

.menu-toggle span {

display: block;

width: 23px;
height: 2px;

margin: 5px auto;

background:

    var(--green);

transition:

    0.3s;

}

/* =========================================================
GENERAL SECTIONS
========================================================= */

.section {

position: relative;

padding:

    120px 0;

}

.section-container {

width: min(1250px, 90%);

margin: auto;

}

.alternate-section {

background:

    linear-gradient(
        135deg,
        rgba(220, 255, 244, 0.6),
        rgba(255, 255, 255, 0.9),
        rgba(255, 231, 241, 0.45)
    );

}

.section-heading {

max-width: 760px;

margin-bottom: 65px;

}

.section-heading.center {

margin-left: auto;
margin-right: auto;

text-align: center;

}

.section-tag {

display: inline-block;

margin-bottom: 15px;

padding:

    8px 16px;

border-radius: 30px;

font-size: 0.72rem;

font-weight: 700;

letter-spacing: 2px;

color: var(--green);

background:

    rgba(32, 184, 138, 0.1);

}

.section-heading h2 {

font-family:

    "Playfair Display",
    serif;

font-size:

    clamp(2.2rem, 4vw, 4rem);

line-height: 1.15;

margin-bottom: 20px;

}

.section-heading p {

color: var(--gray);

line-height: 1.9;

}

/* =========================================================
HERO
========================================================= */

.hero-section {

position: relative;

min-height: 100vh;

padding:

    160px 5% 90px;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

.hero-section::before {

content: "";

position: absolute;

inset: 0;

background:

    radial-gradient(
        circle at 20% 50%,
        rgba(32, 184, 138, 0.15),
        transparent 30%
    ),

    radial-gradient(
        circle at 80% 30%,
        rgba(255, 119, 173, 0.13),
        transparent 25%
    );

pointer-events: none;

}

.hero-content {

position: relative;

z-index: 2;

max-width: 850px;

text-align: center;

}

.eyebrow {

display: inline-flex;

align-items: center;

gap: 10px;

padding:

    10px 20px;

border-radius: 40px;

background:

    rgba(255, 255, 255, 0.8);

box-shadow:

    0 10px 30px rgba(8, 122, 92, 0.08);

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 1.5px;

color: var(--green);

}

.hero-content h1 {

margin:

    25px 0;

font-family:

    "Playfair Display",
    serif;

font-size:

    clamp(3rem, 7vw, 6.8rem);

line-height: 0.98;

}

.hero-content h1 span {

display: block;

color: var(--green);

text-shadow:

    0 0 30px rgba(32, 184, 138, 0.2);

}

.hero-description {

max-width: 720px;

margin:

    0 auto 35px;

font-size: 1.05rem;

line-height: 1.9;

color: var(--gray);

}

.hero-buttons {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 15px;

}

/* =========================================================
BUTTONS
========================================================= */

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 10px;

padding:

    15px 25px;

border-radius: 50px;

font-family: inherit;

font-weight: 600;

text-decoration: none;

border: none;

cursor: pointer;

transition:

    transform 0.3s,
    box-shadow 0.3s;

}

.btn {

transform:
    translateY(-3px);

}

.btn-primary {

color: white;

background:

    linear-gradient(
        135deg,
        var(--green),
        var(--green-light)
    );

box-shadow:

    0 15px 35px rgba(8, 122, 92, 0.25);

}

.btn-primary {

box-shadow:

    0 20px 45px rgba(8, 122, 92, 0.35);

}

.btn-secondary {

color: var(--green);

background: white;

box-shadow:

    0 10px 30px rgba(0, 0, 0, 0.08);

}

/* =========================================================
SOCIAL PROOF
========================================================= */

.social-proof {

margin-top: 35px;

}

.social-proof > span {

display: block;

margin-bottom: 13px;

color: var(--gray);

font-size: 0.85rem;

}

.social-icons {

display: flex;

justify-content: center;

gap: 12px;

}

.social-icons a {

display: flex;

align-items: center;
justify-content: center;

width: 42px;
height: 42px;

border-radius: 50%;

text-decoration: none;

color: var(--green);

background:

    white;

box-shadow:

    0 10px 25px rgba(0, 0, 0, 0.08);

transition:

    transform 0.3s,
    background 0.3s;

}

.social-icons a {

color: white;

background:

    var(--pink);

transform:
    translateY(-5px);

}

/* =========================================================
HERO SIDE IMAGES
========================================================= */

.hero-image-left,
.hero-image-right {

position: absolute;

width:

    min(300px, 22vw);

z-index: 1;

opacity: 0.85;

}

.hero-image-left {

left: -2%;

bottom: 5%;

}

.hero-image-right {

right: -2%;

top: 20%;

}

.hero-image-left img,
.hero-image-right img {

width: 100%;

object-fit: contain;

filter:

    drop-shadow(
        0 20px 30px rgba(8, 122, 92, 0.15)
    );

animation:

    floatingImage
    5s ease-in-out infinite alternate;

}

@keyframes floatingImage {

from {

    transform:
        translateY(-10px);

}

to {

    transform:
        translateY(15px);

}

}

.hero-bottom-glow {

position: absolute;

bottom: -200px;

width: 800px;
height: 400px;

border-radius: 50%;

background:

    radial-gradient(
        ellipse,
        rgba(32, 184, 138, 0.18),
        transparent 70%
    );

filter: blur(40px);

}

/* =========================================================
INFINITE TICKER
========================================================= */

.services-ticker {

padding:

    22px 0;

overflow: hidden;

background:

    linear-gradient(
        90deg,
        var(--green-dark),
        var(--green),
        var(--green-light)
    );

color: white;

}

.ticker-track {

width: max-content;

}

.ticker-content {

display: flex;

align-items: center;

gap: 50px;

width: max-content;

animation:

    tickerMove
    35s linear infinite;

}

.ticker-content span {

display: flex;

align-items: center;

gap: 10px;

white-space: nowrap;

font-weight: 600;

}

.ticker-content i {

color:

    var(--pink-light);

}

@keyframes tickerMove {

from {

    transform:
        translateX(0);

}

to {

    transform:
        translateX(-50%);

}

}

/* =========================================================
PURPOSE
========================================================= */

.purpose-grid {

display: grid;

grid-template-columns:

    repeat(3, 1fr);

gap: 25px;

}

.purpose-card {

padding:

    40px;

border-radius:

    var(--radius);

background:

    rgba(255, 255, 255, 0.8);

box-shadow:

    var(--shadow);

transition:

    transform 0.3s;

}

.purpose-card {

transform:
    translateY(-10px);

}

.purpose-icon {

display: flex;

align-items: center;
justify-content: center;

width: 60px;
height: 60px;

margin-bottom: 25px;

border-radius: 18px;

color: white;

background:

    linear-gradient(
        135deg,
        var(--green),
        var(--green-light)
    );

}

.purpose-card h3 {

margin-bottom: 12px;

font-size: 1.25rem;

}

.purpose-card p {

color: var(--gray);

line-height: 1.8;

}

/* =========================================================
CATEGORIES
========================================================= */

.categories-grid {

display: grid;

grid-template-columns:

    repeat(3, 1fr);

gap: 25px;

}

.category-card {

padding:

    35px;

text-align: center;

border-radius:

    var(--radius);

background:

    rgba(255, 255, 255, 0.9);

transition:

    0.3s;

}

.category-card {

transform:

    translateY(-8px);

box-shadow:

    var(--shadow);

}

.category-card i {

font-size: 2.2rem;

margin-bottom: 20px;

color: var(--pink);

}

.category-card h3 {

margin-bottom: 12px;

}

.category-card p {

color: var(--gray);

line-height: 1.7;

}

/* =========================================================
MISSION VISION
========================================================= */

.mission-vision-grid {

display: grid;

grid-template-columns:

    repeat(2, 1fr);

gap: 30px;

}

.mission-card,
.vision-card {

position: relative;

padding:

    60px;

overflow: hidden;

border-radius:

    35px;

}

.mission-card {

color: white;

background:

    linear-gradient(
        135deg,
        var(--green-dark),
        var(--green)
    );

}

.vision-card {

background:

    linear-gradient(
        135deg,
        #fff4f8,
        #ffffff
    );

border:

    1px solid rgba(255, 119, 173, 0.2);

}

.mv-icon {

display: flex;

align-items: center;
justify-content: center;

width: 65px;
height: 65px;

margin-bottom: 25px;

border-radius: 20px;

background:

    rgba(255, 255, 255, 0.15);

font-size: 1.5rem;

}

.vision-card .mv-icon {

color: white;

background:

    var(--pink);

}

.mission-card span,
.vision-card span {

display: block;

margin-bottom: 12px;

font-size: 0.75rem;

font-weight: 700;

letter-spacing: 2px;

}

.vision-card span {

color: var(--pink);

}

.mission-card h2,
.vision-card h2 {

font-family:

    "Playfair Display",
    serif;

font-size: 2.2rem;

margin-bottom: 20px;

}

.mission-card p {

line-height: 1.9;

color:

    rgba(255, 255, 255, 0.85);

}

.vision-card p {

line-height: 1.9;

color: var(--gray);

}

/* =========================================================
SERVICE LISTS
========================================================= */

.service-list-grid {

display: grid;

grid-template-columns:

    repeat(3, 1fr);

gap: 25px;

}

.service-list-card {

padding:

    35px;

border-radius:

    var(--radius);

background:

    white;

box-shadow:

    0 10px 35px rgba(8, 122, 92, 0.08);

}

.service-list-card h3 {

display: flex;

align-items: center;

gap: 12px;

margin-bottom: 25px;

color: var(--green);

}

.service-list-card ul {

list-style: none;

}

.service-list-card li {

position: relative;

padding:

    9px 0 9px 24px;

color: var(--gray);

}

.service-list-card li::before {

content: "✓";

position: absolute;

left: 0;

color: var(--green-light);

font-weight: 700;

}

/* =========================================================
COMMERCIAL
========================================================= */

.commercial-grid {

display: grid;

grid-template-columns:

    repeat(4, 1fr);

gap: 20px;

}

.commercial-card {

padding:

    30px;

border-radius:

    22px;

background:

    rgba(255, 255, 255, 0.8);

border:

    1px solid rgba(8, 122, 92, 0.08);

transition:

    0.3s;

}

.commercial-card {

transform:
    translateY(-7px);

background: white;

box-shadow:

    var(--shadow);

}

.commercial-card i {

font-size: 1.8rem;

margin-bottom: 20px;

color: var(--green);

}

.commercial-card h3 {

margin-bottom: 10px;

}

.commercial-card p {

color: var(--gray);

line-height: 1.7;

font-size: 0.9rem;

}

/* =========================================================
ADDITIONAL SERVICES
========================================================= */

.additional-grid {

display: grid;

grid-template-columns:

    repeat(4, 1fr);

gap: 20px;

}

.additional-card {

padding:

    30px 20px;

text-align: center;

border-radius:

    20px;

background: white;

transition:

    0.3s;

}

.additional-card {

transform:

    translateY(-8px)
    scale(1.02);

box-shadow:

    var(--shadow);

}

.additional-card i {

display: block;

margin-bottom: 15px;

font-size: 2rem;

color: var(--pink);

}

.additional-card h3 {

font-size: 0.95rem;

}

/* =========================================================
ABOUT
========================================================= */

.about-grid {

display: grid;

grid-template-columns:

    1.2fr 0.8fr;

gap: 70px;

align-items: center;

}

.about-content p {

margin-bottom: 20px;

color: var(--gray);

line-height: 1.9;

}

.about-stats {

display: flex;

flex-wrap: wrap;

gap: 30px;

margin:

    35px 0;

}

.about-stats div {

display: flex;

flex-direction: column;

}

.about-stats strong {

font-size: 2rem;

color: var(--green);

}

.about-stats span {

font-size: 0.8rem;

color: var(--gray);

}

.about-image-box {

padding:

    70px 40px;

text-align: center;

border-radius:

    40px;

color: white;

background:

    linear-gradient(
        135deg,
        var(--green),
        #0fb986
    );

box-shadow:

    0 30px 70px rgba(8, 122, 92, 0.25);

}

.about-image-box i {

font-size: 3rem;

color: var(--pink-light);

margin-bottom: 25px;

}

.about-image-box h3 {

font-size: 1.8rem;

margin-bottom: 20px;

}

/* =========================================================
REVIEWS
========================================================= */

.reviews-section {

padding:

    120px 0;

background:

    linear-gradient(
        135deg,
        #fff,
        #f0fff9
    );

}

.reviews-grid {

display: grid;

grid-template-columns:

    repeat(3, 1fr);

gap: 25px;

}

.review-card {

padding:

    35px;

border-radius:

    var(--radius);

background: white;

box-shadow:

    var(--shadow);

}

.stars {

margin-bottom: 20px;

color: #ffb400;

letter-spacing: 3px;

}

.review-card > p {

margin-bottom: 30px;

color: var(--gray);

line-height: 1.9;

font-style: italic;

}

.review-author {

display: flex;

align-items: center;

gap: 14px;

}

.avatar {

display: flex;

align-items: center;
justify-content: center;

width: 45px;
height: 45px;

border-radius: 50%;

color: white;

font-size: 0.75rem;

font-weight: 700;

background:

    linear-gradient(
        135deg,
        var(--pink),
        var(--green-light)
    );

}

.review-author h4 {

font-size: 0.95rem;

}

.review-author span {

font-size: 0.75rem;

color: var(--gray);

}

/* =========================================================
GALLERY
========================================================= */

.gallery-grid {

display: grid;

grid-template-columns:

    repeat(4, 1fr);

gap: 16px;

}

.gallery-item {

height: 260px;

overflow: hidden;

border-radius: 20px;

background:

    #e9f8f2;

cursor: pointer;

}

.gallery-item img {

width: 100%;
height: 100%;

object-fit: cover;

transition:

    transform 0.5s;

}

.gallery-item img {

transform:

    scale(1.1);

}

/* =========================================================
CONTACT
========================================================= */

.contact-section {

background:

    linear-gradient(
        135deg,
        #effff8,
        #ffffff,
        #fff3f8
    );

}

.contact-wrapper {

display: grid;

grid-template-columns:

    0.8fr 1.2fr;

gap: 35px;

}

.contact-info {

padding:

    45px;

border-radius:

    30px;

color: white;

background:

    linear-gradient(
        135deg,
        var(--green-dark),
        var(--green)
    );

}

.contact-info h3 {

font-family:

    "Playfair Display",
    serif;

font-size: 2rem;

margin-bottom: 15px;

}

.contact-info > p {

margin-bottom: 35px;

line-height: 1.8;

color:

    rgba(255, 255, 255, 0.8);

}

.contact-social {

display: flex;

align-items: center;

gap: 15px;

padding:

    15px;

margin-bottom: 12px;

border-radius: 15px;

text-decoration: none;

color: white;

background:

    rgba(255, 255, 255, 0.08);

transition:

    0.3s;

}

.contact-social {

transform:
    translateX(8px);

background:

    rgba(255, 255, 255, 0.16);

}

.contact-form {

padding:

    45px;

border-radius:

    30px;

background:

    rgba(255, 255, 255, 0.92);

box-shadow:

    var(--shadow);

}

.form-grid {

display: grid;

grid-template-columns:

    repeat(2, 1fr);

gap: 20px;

}

.form-group {

display: flex;

flex-direction: column;

gap: 8px;

}

.form-group.full {

margin-top: 20px;

}

.form-group label {

font-size: 0.82rem;

font-weight: 600;

}

.form-group input,
.form-group select,
.form-group textarea {

width: 100%;

padding:

    14px 16px;

border:

    1px solid rgba(8, 122, 92, 0.15);

outline: none;

border-radius: 12px;

font-family: inherit;

background:

    #fcfffd;

transition:

    border 0.3s,
    box-shadow 0.3s;

}

.form-group textarea {

resize: vertical;

}

.form-group input,
.form-group select,
.form-group textarea {

border-color:

    var(--green-light);

box-shadow:

    0 0 0 4px rgba(32, 184, 138, 0.1);

}

.form-check {

display: flex;

gap: 12px;

align-items: flex-start;

margin:

    25px 0;

}

.form-check input {

margin-top: 5px;

}

.form-check label {

font-size: 0.78rem;

line-height: 1.7;

color: var(--gray);

}

.submit-btn {

width: 100%;

}

.form-message {

margin-top: 15px;

text-align: center;

font-weight: 600;

}

/* =========================================================
PRIVACY
========================================================= */

.privacy-container {

max-width: 1250px;

}

.privacy-grid {

display: grid;

grid-template-columns:

    repeat(3, 1fr);

gap: 25px;

}

.privacy-card {

padding:

    35px;

border-radius:

    24px;

background:

    rgba(255, 255, 255, 0.85);

box-shadow:

    0 10px 30px rgba(0, 0, 0, 0.05);

}

.privacy-card i {

display: block;

margin-bottom: 20px;

font-size: 1.8rem;

color: var(--green);

}

.privacy-card h3 {

margin-bottom: 15px;

}

.privacy-card p {

color: var(--gray);

line-height: 1.8;

font-size: 0.9rem;

}

/* =========================================================
FOOTER
========================================================= */

footer {

padding-top: 80px;

color: white;

background:

    #062d24;

}

.footer-container {

width: min(1250px, 90%);

margin: auto;

display: grid;

grid-template-columns:

    2fr 1fr 1fr;

gap: 60px;

padding-bottom: 60px;

}

.footer-brand img {

width: 190px;

height: 80px;

object-fit: contain;

background: white;

border-radius: 15px;

padding: 5px;

margin-bottom: 20px;

}

.footer-brand p {

max-width: 400px;

line-height: 1.8;

color:

    rgba(255, 255, 255, 0.65);

}

.footer-links {

display: flex;

flex-direction: column;

gap: 12px;

}

.footer-links h4 {

margin-bottom: 10px;

color: var(--pink-light);

}

.footer-links a {

color:

    rgba(255, 255, 255, 0.7);

text-decoration: none;

transition:

    color 0.3s;

}

.footer-links a {

color: white;

}

.footer-bottom {

padding:

    25px;

text-align: center;

border-top:

    1px solid rgba(255, 255, 255, 0.08);

font-size: 0.8rem;

color:

    rgba(255, 255, 255, 0.5);

}

/* =========================================================
BACK TO TOP
========================================================= */

.back-to-top {

position: fixed;

right: 25px;
bottom: 25px;

width: 48px;
height: 48px;

border: none;

border-radius: 50%;

color: white;

background:

    linear-gradient(
        135deg,
        var(--green),
        var(--green-light)
    );

box-shadow:

    0 10px 30px rgba(8, 122, 92, 0.3);

cursor: pointer;

opacity: 0;

visibility: hidden;

transform:
    translateY(20px);

transition:

    0.3s;

z-index: 999;

}

.back-to-top.show {

opacity: 1;

visibility: visible;

transform:
    translateY(0);

}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

.commercial-grid {

    grid-template-columns:

        repeat(3, 1fr);

}

.additional-grid {

    grid-template-columns:

        repeat(3, 1fr);

}

.gallery-grid {

    grid-template-columns:

        repeat(3, 1fr);

}

}

@media (max-width: 900px) {

.menu-toggle {

    display: block;

    z-index: 10001;

}


#navbar {

    position: fixed;

    top: 0;
    right: -100%;

    width:

        min(360px, 88vw);

    height: 100vh;

    padding:

        110px 30px 40px;

    background:

        rgba(255, 255, 255, 0.97);

    backdrop-filter:

        blur(25px);

    transition:

        right 0.4s ease;

    box-shadow:

        -20px 0 60px rgba(0, 0, 0, 0.08);

}


#navbar.active {

    right: 0;

}


.nav-links {

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

}


.nav-links li {

    width: 100%;

}


.nav-links a,
.dropdown-toggle {

    display: flex;

    width: 100%;

    justify-content: space-between;

    padding:

        15px 0;

    font-size: 1rem;

}


.dropdown-menu {

    position: static;

    display: none;

    width: 100%;

    padding:

        5px 0 5px 15px;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    background: transparent;

}


.dropdown.active .dropdown-menu {

    display: block;

}


.dropdown-menu a {

    font-size: 0.85rem;

}


.purpose-grid,
.categories-grid,
.service-list-grid {

    grid-template-columns:

        repeat(2, 1fr);

}


.mission-vision-grid,
.about-grid,
.contact-wrapper {

    grid-template-columns:

        1fr;

}


.reviews-grid {

    grid-template-columns:

        1fr;

}


.privacy-grid {

    grid-template-columns:

        repeat(2, 1fr);

}


.footer-container {

    grid-template-columns:

        1fr 1fr;

}


.footer-brand {

    grid-column:

        1 / -1;

}

}

@media (max-width: 650px) {

.header-container {

    min-height: 72px;

}


.logo img {

    width: 125px;

    height: 55px;

}


.hero-section {

    min-height: auto;

    padding:

        145px 6% 80px;

}


.hero-image-left,
.hero-image-right {

    width: 170px;

    opacity: 0.3;

}


.hero-image-left {

    left: -70px;

}


.hero-image-right {

    right: -70px;

}


.section {

    padding:

        85px 0;

}


.purpose-grid,
.categories-grid,
.service-list-grid,
.commercial-grid,
.additional-grid,
.gallery-grid,
.privacy-grid {

    grid-template-columns:

        1fr;

}


.mission-card,
.vision-card {

    padding:

        40px 30px;

}


.form-grid {

    grid-template-columns:

        1fr;

}


.contact-info,
.contact-form {

    padding:

        30px 22px;

}


.about-stats {

    gap: 20px;

}


.footer-container {

    grid-template-columns:

        1fr;

    gap: 35px;

}


.footer-brand {

    grid-column: auto;

}


.gallery-item {

    height: 300px;

}


#magicCursor {

    display: none;

}

}

/* =========================================================
   TEXT COLOR FIX
   ALL TEXT BLACK
========================================================= */

/* TODO EL TEXTO GENERAL EN NEGRO */

body,
p,
span,
li,
label,
input,
select,
textarea,
.form-check label,
.footer-links a,
.footer-brand p,
.review-author span,
.social-proof > span,
.category-card p,
.purpose-card p,
.commercial-card p,
.privacy-card p,
.about-content p,
.section-heading p,
.form-group label,
.form-message {

    color: #000000 !important;

}


/* LINKS Y BOTONES DE NAVEGACION */

.nav-links a,
.dropdown-toggle,
.dropdown-menu a {

    color: #000000 !important;

}


/* =========================================================
   TITULOS NEGROS ANIMADOS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.hero-content h1,
.section-heading h2,
.mission-card h2,
.vision-card h2,
.about-content h2,
.contact-info h3 {

    color: #000000 !important;

    animation:
        blackTitleGlow
        3s ease-in-out infinite;

}


/* ANIMACION PREMIUM NEGRA */

@keyframes blackTitleGlow {

    0% {

        text-shadow:

            0 0 0 rgba(0, 0, 0, 0);

        transform:
            translateY(0);

    }

    50% {

        text-shadow:

            0 3px 15px rgba(0, 0, 0, 0.18),
            0 0 25px rgba(0, 0, 0, 0.08);

        transform:
            translateY(-2px);

    }

    100% {

        text-shadow:

            0 0 0 rgba(0, 0, 0, 0);

        transform:
            translateY(0);

    }

}


/* =========================================================
   TEXTOS QUE ANTES ERAN BLANCOS
========================================================= */

/* MISSION */

.mission-card,
.mission-card p,
.mission-card span,
.mission-card h2 {

    color: #000000 !important;

}


/* CONTACT */

.contact-info,
.contact-info h3,
.contact-info p {

    color: #000000 !important;

}


/* CONTACT SOCIAL BUTTONS */

.contact-social,
.contact-social span {

    color: #000000 !important;

}


/* FOOTER */

footer,
.footer-brand,
.footer-links,
.footer-bottom,
.footer-bottom p {

    color: #000000 !important;

}


/* =========================================================
   INPUTS
========================================================= */

input,
select,
textarea {

    color: #000000 !important;

}


input::placeholder,
textarea::placeholder {

    color: rgba(0, 0, 0, 0.55) !important;

}


/* =========================================================
   KEEP BUTTON TEXT VISIBLE
========================================================= */

.btn-primary {

    color: #ffffff !important;

}


.btn-secondary {

    color: #000000 !important;

}


/* =========================================================
   SECTION TAGS
========================================================= */

.section-tag,
.eyebrow {

    color: #000000 !important;

    border:

        1px solid rgba(0, 0, 0, 0.1);

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-list-card h3,
.commercial-card h3,
.additional-card h3,
.category-card h3,
.purpose-card h3,
.review-author h4,
.privacy-card h3 {

    color: #000000 !important;

}

/* =========================================================
PREMIUM GREEN CLEANING THEME
ADD THIS AT THE END OF STYLE.CSS
========================================================= */

/* =========================================================
MAIN GREEN CLEANING BACKGROUND
========================================================= */

body {

background:

    radial-gradient(
        circle at 15% 20%,
        rgba(84, 255, 183, 0.28) 0%,
        transparent 25%
    ),

    radial-gradient(
        circle at 85% 15%,
        rgba(255, 119, 173, 0.10) 0%,
        transparent 20%
    ),

    radial-gradient(
        circle at 50% 80%,
        rgba(13, 190, 123, 0.22) 0%,
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #dfffee 0%,
        #bff7d7 30%,
        #eafff4 55%,
        #c9f9df 75%,
        #f5fffa 100%
    ) !important;

background-attachment: fixed;

}

/* =========================================================
CLEANING PATTERN
========================================================= */

body::after {

content: "";

position: fixed;

inset: 0;

pointer-events: none;

z-index: -2;

opacity: 0.35;

background-image:

    radial-gradient(
        circle,
        rgba(255,255,255,0.9) 1px,
        transparent 2px
    ),

    radial-gradient(
        circle,
        rgba(8,122,92,0.10) 2px,
        transparent 3px
    );

background-size:

    45px 45px,
    90px 90px;

animation:

    cleaningBackgroundMove
    20s linear infinite;

}

@keyframes cleaningBackgroundMove {

from {

    background-position:

        0 0,
        0 0;

}

to {

    background-position:

        120px -120px,
        -100px 100px;

}

}

/* =========================================================
MORE CLEANING PARTICLES
========================================================= */

.particles span {

width: 8px !important;

height: 8px !important;

background:

    radial-gradient(
        circle,
        #ffffff 0%,
        #d9fff0 35%,
        #43dca1 65%,
        transparent 75%
    ) !important;

box-shadow:

    0 0 8px #ffffff,
    0 0 18px #65f0bd,
    0 0 35px rgba(0, 180, 110, 0.7) !important;

}

/* =========================================================
HERO CLEANING ATMOSPHERE
========================================================= */

.hero-section {

background:

    radial-gradient(
        circle at 15% 50%,
        rgba(55, 220, 150, 0.30),
        transparent 25%
    ),

    radial-gradient(
        circle at 85% 30%,
        rgba(255,255,255,0.85),
        transparent 22%
    ),

    linear-gradient(
        135deg,
        rgba(197,255,224,0.85),
        rgba(235,255,246,0.95),
        rgba(179,247,211,0.65)
    );

}

.hero-section::after {

content: "✦ ✧ ✦ ✧";

position: absolute;

top: 25%;

left: 10%;

font-size: 2rem;

letter-spacing: 60px;

color:

    rgba(255,255,255,0.85);

text-shadow:

    0 0 15px #ffffff,
    0 0 30px #62e9b2;

animation:

    cleaningSparkles
    5s ease-in-out infinite;

}

@keyframes cleaningSparkles {

0% {

    transform:

        translateY(0)
        rotate(0deg);

    opacity: 0.4;

}

50% {

    transform:

        translateY(-25px)
        rotate(10deg);

    opacity: 1;

}

100% {

    transform:

        translateY(0)
        rotate(0deg);

    opacity: 0.4;

}

}

/* =========================================================
GREEN ANIMATED CONTACT SECTION
========================================================= */

.contact-section {

position: relative;

overflow: hidden;

background:

    linear-gradient(
        135deg,
        #c8ffe1,
        #f1fff8,
        #b8f7d3,
        #ffffff
    ) !important;

}

.contact-section::before {

content: "";

position: absolute;

width: 500px;
height: 500px;

border-radius: 50%;

background:

    radial-gradient(
        circle,
        rgba(23, 201, 129, 0.35),
        transparent 70%
    );

top: -200px;
left: -100px;

filter: blur(30px);

animation:

    greenCleaningGlow
    8s ease-in-out infinite alternate;

}

@keyframes greenCleaningGlow {

from {

    transform:

        translate(
            -40px,
            -20px
        )
        scale(0.9);

}

to {

    transform:

        translate(
            120px,
            80px
        )
        scale(1.3);

}

}

/* =========================================================
CONTACT INFORMATION BOX
========================================================= */

.contact-info {

position: relative;

overflow: hidden;

color: #000000 !important;

background:

    linear-gradient(
        135deg,
        #0a7f5d,
        #19b981,
        #55e5ad,
        #0d8d67
    ) !important;

background-size:

    300% 300%;

animation:

    animatedGreenBox
    8s ease infinite;

box-shadow:

    0 25px 70px rgba(0, 130, 90, 0.30);

}

@keyframes animatedGreenBox {

0% {

    background-position:
        0% 50%;

}

50% {

    background-position:
        100% 50%;

}

100% {

    background-position:
        0% 50%;

}

}

/* LIGHT MOVING EFFECT */

.contact-info::before {

content: "";

position: absolute;

width: 250px;
height: 250px;

border-radius: 50%;

background:

    rgba(255,255,255,0.20);

filter:

    blur(40px);

animation:

    contactLightMove
    7s linear infinite;

}

@keyframes contactLightMove {

0% {

    transform:

        translate(
            -100px,
            -100px
        );

}

50% {

    transform:

        translate(
            300px,
            200px
        );

}

100% {

    transform:

        translate(
            -100px,
            -100px
        );

}

}

.contact-info h3,
.contact-info p {

position: relative;

z-index: 2;

color: #000000 !important;

}

/* =========================================================
SOCIAL MEDIA GREEN ANIMATED BUTTONS
========================================================= */

.contact-social {

position: relative;

z-index: 2;

overflow: hidden;

color: #000000 !important;

border:

    1px solid rgba(255,255,255,0.5);

background:

    linear-gradient(
        135deg,
        rgba(255,255,255,0.85),
        rgba(192,255,221,0.85),
        rgba(255,255,255,0.75)
    ) !important;

background-size:

    250% 250%;

animation:

    socialGreenAnimation
    6s ease infinite;

}

@keyframes socialGreenAnimation {

0% {

    background-position:
        0% 50%;

}

50% {

    background-position:
        100% 50%;

}

100% {

    background-position:
        0% 50%;

}

}

.contact-social::before {

content: "";

position: absolute;

top: 0;
left: -100%;

width: 60%;
height: 100%;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );

transform:

    skewX(-25deg);

animation:

    socialShine
    4s infinite;

}

@keyframes socialShine {

0% {

    left: -100%;

}

100% {

    left: 180%;

}

}

.contact-social span,
.contact-social i {

position: relative;

z-index: 2;

color: #000000 !important;

}

.contact-social {

transform:

    translateX(10px)
    scale(1.02) !important;

box-shadow:

    0 10px 35px rgba(0, 120, 80, 0.25);

}

/* =========================================================
CONTACT FORM GREEN PREMIUM BOX
========================================================= */

.contact-form {

position: relative;

overflow: hidden;

border:

    1px solid rgba(18, 180, 120, 0.25);

background:

    linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(220,255,237,0.95),
        rgba(255,255,255,0.90)
    ) !important;

box-shadow:

    0 25px 70px rgba(0, 120, 80, 0.15);

}

.contact-form::before {

content: "";

position: absolute;

inset: -2px;

border-radius: 30px;

pointer-events: none;

background:

    linear-gradient(
        120deg,
        transparent,
        rgba(42,220,150,0.25),
        transparent
    );

background-size:

    200% 100%;

animation:

    formBorderMove
    5s linear infinite;

}

@keyframes formBorderMove {

from {

    background-position:
        200% 0;

}

to {

    background-position:
        -200% 0;

}

}

.contact-form > * {

position: relative;

z-index: 2;

}

/* =========================================================
GREEN INPUT FIELDS
========================================================= */

.form-group input,
.form-group select,
.form-group textarea {

background:

    linear-gradient(
        135deg,
        #ffffff,
        #effff6
    ) !important;

border:

    1px solid rgba(0, 145, 95, 0.25) !important;

}

.form-group input,
.form-group select,
.form-group textarea {

border-color:

    #16bd82 !important;

box-shadow:

    0 0 0 4px rgba(22,189,130,0.14),
    0 0 25px rgba(22,189,130,0.18) !important;

}

/* =========================================================
GREEN ANIMATED SUBMIT BUTTON
========================================================= */

.submit-btn {

background:

    linear-gradient(
        120deg,
        #047a58,
        #20c48b,
        #6bf0bc,
        #0a7a5b
    ) !important;

background-size:

    300% 300%;

animation:

    animatedSubmitButton
    6s ease infinite;

}

@keyframes animatedSubmitButton {

0% {

    background-position:
        0% 50%;

}

50% {

    background-position:
        100% 50%;

}

100% {

    background-position:
        0% 50%;

}

}

/* =========================================================
CLEANING CARDS GREEN HOVER
========================================================= */

.purpose-card,
.category-card,
.service-list-card,
.commercial-card,
.additional-card,
.review-card,
.privacy-card {

background:

    linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(228,255,240,0.85)
    ) !important;

border:

    1px solid rgba(0, 145, 95, 0.10);

}

.purpose-card,
.category-card,
.service-list-card,
.commercial-card,
.additional-card,
.review-card,
.privacy-card {

background:

    linear-gradient(
        135deg,
        #ffffff,
        #caffdf
    ) !important;

box-shadow:

    0 20px 50px rgba(0, 145, 95, 0.18);

}

/* =========================================================
CLEANING ICON GLOW
========================================================= */

.purpose-icon,
.mv-icon {

animation:

    iconCleaningGlow
    3s ease-in-out infinite;

}

@keyframes iconCleaningGlow {

0% {

    box-shadow:

        0 0 0 rgba(32,184,138,0);

}

50% {

    box-shadow:

        0 0 25px rgba(32,184,138,0.55),
        0 0 50px rgba(255,119,173,0.18);

}

100% {

    box-shadow:

        0 0 0 rgba(32,184,138,0);

}

}

/* =========================================================
SECTION BACKGROUND IMPROVEMENTS
========================================================= */

.alternate-section {

background:

    linear-gradient(
        135deg,
        rgba(195,255,220,0.75),
        rgba(255,255,255,0.90),
        rgba(210,255,230,0.75)
    ) !important;

}

/* =========================================================
MOBILE IMPROVEMENTS
========================================================= */

@media (max-width: 650px) {

.contact-info,
.contact-form {

    border-radius: 25px;

}

.hero-section::after {

    font-size: 1.2rem;

    letter-spacing: 30px;

}

}

/* =========================================================
SERVICES MENU - CLICK ONLY
========================================================= */

/* Prevent automatic opening on hover */

.dropdown .dropdown-menu {

opacity: 0 !important;

visibility: hidden !important;

transform:
    translateY(10px) !important;

}

/* Open only when JavaScript adds .active */

.dropdown.active .dropdown-menu {

opacity: 1 !important;

visibility: visible !important;

transform:
    translateY(0) !important;

}

/* Mobile version */

@media (max-width: 900px) {

.dropdown:hover .dropdown-menu {

    display: none !important;

}

.dropdown.active .dropdown-menu {

    display: block !important;

}

}

/* =========================================================
HOME SOCIAL ICONS
ANIMATED PREMIUM GREEN
========================================================= */

/* ICONOS DE REDES SOCIALES DEL INICIO */

.hero-social a,
.home-social a,
.social-links a {

position: relative;

display: inline-flex;

align-items: center;

justify-content: center;

overflow: hidden;

background:

    linear-gradient(
        135deg,
        #057a57,
        #16c98b,
        #70f5bd,
        #0b8d63,
        #057a57
    ) !important;

background-size: 300% 300%;

color: #ffffff !important;

animation:

    animatedGreenSocial
    5s ease infinite,
    socialFloat
    3s ease-in-out infinite;

box-shadow:

    0 0 10px rgba(20, 190, 125, 0.35),
    0 0 25px rgba(20, 190, 125, 0.25);

transition:

    transform 0.3s ease,
    box-shadow 0.3s ease;

}

/* ICONOS INTERNOS */

.hero-social a i,
.hero-social a svg,
.home-social a i,
.home-social a svg,
.social-links a i,
.social-links a svg {

position: relative;

z-index: 2;

color: #ffffff !important;

fill: currentColor;

}

/* ANIMACION DEL VERDE */

@keyframes animatedGreenSocial {

0% {

    background-position:
        0% 50%;

}

50% {

    background-position:
        100% 50%;

}

100% {

    background-position:
        0% 50%;

}

}

/* EFECTO DE FLOTACION */

@keyframes socialFloat {

0%,
100% {

    transform:
        translateY(0);

}

50% {

    transform:
        translateY(-5px);

}

}

/* BRILLO QUE RECORRE EL ICONO */

.hero-social a::before,
.home-social a::before,
.social-links a::before {

content: "";

position: absolute;

top: -50%;

left: -100%;

width: 55%;

height: 200%;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.85),
        transparent
    );

transform:
    rotate(25deg);

animation:

    socialIconShine
    3.5s linear infinite;

}

@keyframes socialIconShine {

0% {

    left: -120%;

}

100% {

    left: 160%;

}

}

/* EFECTO AL PASAR EL MOUSE */

.hero-social a,
.home-social a,
.social-links a {

transform:

    translateY(-8px)
    scale(1.15) !important;

box-shadow:

    0 0 15px rgba(25, 220, 145, 0.65),
    0 0 35px rgba(25, 220, 145, 0.45),
    0 0 60px rgba(255, 119, 173, 0.18);

}

/* =========================================================
   FULLSCREEN CLEANING VIDEO
   HOME / HERO COVER
========================================================= */

.hero-section {

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    isolation: isolate;

}


/* VIDEO */

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: -3;

    pointer-events: none;

}


/* =========================================================
   VIDEO CLEANING OVERLAY
========================================================= */

.hero-video-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        linear-gradient(
            135deg,
            rgba(0, 70, 48, 0.72),
            rgba(0, 120, 78, 0.42),
            rgba(255, 255, 255, 0.18),
            rgba(0, 80, 55, 0.58)
        );

}


/* =========================================================
   SOFT WHITE CLEANING GLOW
========================================================= */

.hero-video-overlay::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,0.28),
            transparent 35%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(83,255,184,0.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,0.18),
            transparent 28%
        );

}


/* =========================================================
   MAKE HOME CONTENT STAY ABOVE VIDEO
========================================================= */

.hero-content {

    position: relative;

    z-index: 5;

}


/* LEFT AND RIGHT DECORATIVE IMAGES */

.hero-image-left,
.hero-image-right {

    position: absolute;

    z-index: 4;

}


/* BUTTONS ABOVE VIDEO */

.hero-buttons,
.social-proof {

    position: relative;

    z-index: 6;

}


/* =========================================================
   VIDEO EDGE EFFECT
========================================================= */

.hero-section::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    box-shadow:

        inset 0 0 180px rgba(0, 65, 45, 0.65);

}


/* =========================================================
   MOBILE VIDEO
========================================================= */

@media (max-width: 900px) {

    .hero-video {

        object-position: center;

    }

    .hero-video-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(0,70,48,0.78),
                rgba(0,120,78,0.48),
                rgba(0,60,40,0.70)
            );

    }

}


@media (max-width: 600px) {

    .hero-section {

        min-height: 100svh;

    }

    .hero-video {

        object-position: center center;

    }

}

/* =========================================================
FOOTER CONTACT INFORMATION
========================================================= */

.footer-contact {

width: 100%;

display: flex;

justify-content: center;

align-items: center;

gap: 70px;

padding: 25px 20px;

margin-top: 25px;

border-top:

    1px solid rgba(0, 120, 80, 0.18);

background:

    linear-gradient(
        135deg,
        rgba(220,255,237,0.95),
        rgba(255,255,255,0.95),
        rgba(204,255,225,0.95)
    );

box-shadow:

    0 -10px 35px rgba(0, 120, 80, 0.08);

}

/* CONTACT ITEM */

.footer-contact-item {

display: flex;

align-items: center;

gap: 15px;

color: #000000;

}

/* ICON */

.footer-contact-item > i {

width: 45px;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

color: #ffffff;

font-size: 18px;

background:

    linear-gradient(
        135deg,
        #087b58,
        #18c98b,
        #55e8b0,
        #087b58
    );

background-size: 300% 300%;

animation:

    footerIconGreen
    5s ease infinite;

box-shadow:

    0 0 15px rgba(20,190,125,0.35);

}

@keyframes footerIconGreen {

0% {

    background-position:
        0% 50%;

}

50% {

    background-position:
        100% 50%;

}

100% {

    background-position:
        0% 50%;

}

}

/* TITLE */

.footer-contact-item strong {

display: block;

margin-bottom: 4px;

color: #000000;

font-size: 14px;

text-transform: uppercase;

letter-spacing: 1px;

}

/* PHONE AND EMAIL LINKS */

.footer-contact-item a {

display: block;

margin: 2px 0;

color: #000000 !important;

text-decoration: none;

font-size: 14px;

transition:

    color 0.3s ease,
    transform 0.3s ease;

}

/* HOVER */

.footer-contact-item a {

color: #087b58 !important;

transform:
    translateX(4px);

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

.footer-contact {

    flex-direction: column;

    gap: 22px;

    align-items: flex-start;

    padding: 25px;

}

.footer-contact-item {

    width: 100%;

}

}