/* ===================================================
   IMMO FIX LAB
   Premium Theme
=================================================== */

:root{

--primary:#0EA5E9;
--secondary:#0284C7;
--dark:#05070B;
--dark2:#0F172A;
--white:#FFFFFF;
--gray:#CBD5E1;

--radius:18px;

--shadow:0 20px 60px rgba(0,0,0,.35);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:linear-gradient(180deg,#05070B,#08111F,#101827);

color:white;

overflow-x:hidden;

}

.container{

width:min(1280px,92%);

margin:auto;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:.35s;

}

section{

padding:110px 0;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:rgba(5,7,11,.82);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.logo{

font-size:30px;

font-weight:800;

color:white;

letter-spacing:1px;

}

.logo i{

color:var(--primary);

margin-right:10px;

}

.nav-link{

color:white!important;

margin-left:20px;

font-weight:500;

}

.nav-link:hover{

color:var(--primary)!important;

}

.btn-primary{

background:linear-gradient(135deg,#008CFF,#00C2FF);

border:none;

padding:15px 34px;

border-radius:50px;

font-weight:700;

box-shadow:0 20px 40px rgba(0,140,255,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}

.hero:before{

content:"";

position:absolute;

width:700px;

height:700px;

right:-250px;

top:-200px;

background:#008CFF;

filter:blur(220px);

opacity:.18;

}

.hero:after{

content:"";

position:absolute;

width:500px;

height:500px;

left:-180px;

bottom:-180px;

background:#00C2FF;

filter:blur(180px);

opacity:.14;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

margin-bottom:25px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

margin-bottom:30px;

}

.hero p{

font-size:19px;

color:#CBD5E1;

line-height:1.9;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-image{

animation:float 5s ease-in-out infinite;

filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/* =========================================
   SERVICIOS
========================================= */

.services{

background:#08111F;

}

.services .row{

margin-top:60px;

}

.service-card{

background:rgba(255,255,255,.05);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:45px 35px;

height:100%;

transition:.35s;

box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.service-card:hover{

transform:translateY(-12px);

border-color:#00C2FF;

box-shadow:0 30px 80px rgba(0,140,255,.25);

}

.service-icon{

width:90px;

height:90px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#009DFF,#00C2FF);

margin-bottom:28px;

box-shadow:0 20px 45px rgba(0,140,255,.35);

}

.service-icon i{

font-size:38px;

color:white;

}

.service-card h3{

font-size:28px;

font-weight:700;

margin-bottom:20px;

}

.service-card p{

font-size:16px;

line-height:1.9;

color:#CBD5E1;

}

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

.about-section{

background:#05070B;

}

.section-tag{

display:inline-block;

color:#00C2FF;

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:18px;

}

.about-section h2{

font-size:52px;

font-weight:800;

margin-bottom:25px;

}

.about-section p{

font-size:18px;

line-height:1.9;

color:#CBD5E1;

}

.about-list{

list-style:none;

padding:0;

margin-top:35px;

}

.about-list li{

padding:12px 0;

font-size:17px;

}

.about-list i{

color:#00C2FF;

margin-right:12px;

}

/* =========================================
INFO CARDS
========================================= */

.info-card{

background:rgba(255,255,255,.05);

border-radius:20px;

padding:35px;

text-align:center;

margin-bottom:25px;

border:1px solid rgba(255,255,255,.05);

transition:.35s;

}

.info-card:hover{

transform:translateY(-10px);

border-color:#00C2FF;

}

.info-card i{

font-size:45px;

margin-bottom:18px;

color:#00C2FF;

}

.info-card h3{

font-size:34px;

font-weight:800;

}

.info-card p{

margin-top:10px;

color:#CBD5E1;

}

/* =========================================
BRANDS
========================================= */

.brands{

background:#08111F;

}

.brand-card{

background:rgba(255,255,255,.04);

padding:30px 20px;

text-align:center;

border-radius:18px;

transition:.35s;

border:1px solid rgba(255,255,255,.05);

}

.brand-card:hover{

transform:translateY(-8px);

border-color:#00C2FF;

background:rgba(255,255,255,.08);

}

.brand-card i{

font-size:38px;

color:#00C2FF;

margin-bottom:18px;

}

.brand-card h5{

font-size:18px;

font-weight:600;

margin:0;

}

/*=========================================
ESTADÍSTICAS
=========================================*/

.stats-section{

padding:90px 0;

background:#05070B;

}

.stats-section h2{

font-size:60px;

font-weight:800;

color:#00C2FF;

margin-bottom:15px;

}

.stats-section p{

color:#CBD5E1;

font-size:18px;

}

/*=========================================
GALERÍA
=========================================*/

.gallery-section{

background:#08111F;

}

.gallery-card{

overflow:hidden;

border-radius:20px;

position:relative;

}

.gallery-card img{

transition:.5s;

}

.gallery-card:hover img{

transform:scale(1.08);

}

/*=========================================
TESTIMONIOS
=========================================*/

.testimonials{

background:#05070B;

}

.testimonial-card{

background:rgba(255,255,255,.05);

padding:40px;

border-radius:20px;

height:100%;

border:1px solid rgba(255,255,255,.05);

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

border-color:#00C2FF;

}

.stars{

font-size:26px;

color:#FFD54F;

margin-bottom:20px;

}

.testimonial-card p{

font-size:17px;

line-height:1.9;

color:#CBD5E1;

}

.testimonial-card h4{

margin-top:25px;

font-weight:700;

}

/*=========================================
CONTACTO
=========================================*/

.contact-section{

background:#08111F;

}

.contact-section h2{

font-size:48px;

font-weight:800;

margin-bottom:25px;

}

.contact-section p{

font-size:18px;

line-height:1.8;

color:#CBD5E1;

}

.contact-section .btn-success{

padding:16px 34px;

border-radius:50px;

font-size:18px;

font-weight:700;

}

/*=========================================
CTA
=========================================*/

.cta-section{

padding:120px 0;

background:linear-gradient(135deg,#009DFF,#00C2FF);

text-align:center;

}

.cta-section h2{

font-size:52px;

font-weight:800;

margin-bottom:25px;

}

.cta-section p{

font-size:20px;

max-width:800px;

margin:auto;

margin-bottom:40px;

}

/*=========================================
WHATSAPP
=========================================*/

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

background:#25D366;

border-radius:50%;

font-size:34px;

color:white;

z-index:99999;

box-shadow:0 20px 50px rgba(0,0,0,.35);

transition:.35s;

}

.floating-whatsapp:hover{

transform:scale(1.1);

color:white;

}

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

.footer{

background:#05070B;

padding:70px 0;

}

.footer h3,
.footer h4{

margin-bottom:20px;

}

.footer-links{

list-style:none;

padding:0;

}

.footer-links li{

padding:8px 0;

}

.footer-links a{

color:#CBD5E1;

}

.footer-links a:hover{

color:#00C2FF;

}

.copyright{

text-align:center;

padding-top:35px;

color:#94A3B8;

border-top:1px solid rgba(255,255,255,.05);

margin-top:40px;

}

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

.hero{

padding-top:140px;

}

.hero .container{

position:relative;

z-index:5;

}

.hero h1{

max-width:700px;

background:linear-gradient(90deg,#ffffff,#8fdcff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

max-width:620px;

}

.hero-stats{

display:flex;

gap:35px;

margin-top:60px;

flex-wrap:wrap;

}

.hero-stats div{

background:rgba(255,255,255,.05);

padding:22px 28px;

border-radius:18px;

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

min-width:140px;

transition:.35s;

}

.hero-stats div:hover{

transform:translateY(-8px);

border-color:#00C2FF;

}

.hero-stats h3{

font-size:42px;

font-weight:800;

color:#00C2FF;

margin:0;

}

.hero-stats span{

font-size:15px;

color:#CBD5E1;

}

/*=========================================
 TITLES
=========================================*/

.section-tag{

display:inline-block;

padding:10px 18px;

border-radius:40px;

background:rgba(0,194,255,.12);

color:#00C2FF;

font-size:14px;

font-weight:700;

letter-spacing:2px;

margin-bottom:18px;

text-transform:uppercase;

}

section h2{

font-size:54px;

font-weight:800;

margin-bottom:22px;

line-height:1.15;

}

section p{

font-size:18px;

line-height:1.9;

color:#CBD5E1;

}

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

.btn{

transition:.35s;

}

.btn:hover{

transform:translateY(-4px);

}

.btn-outline-light{

border-radius:50px;

padding:15px 34px;

font-weight:700;

}

/*=========================================
 GLASS EFFECT
=========================================*/

.glass{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:22px;

}

/*=========================================
 SHADOWS
=========================================*/

.shadow-xl{

box-shadow:

0 20px 60px rgba(0,0,0,.35);

}

.shadow-blue{

box-shadow:

0 25px 70px rgba(0,140,255,.35);

}

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

.card-premium{

background:rgba(255,255,255,.04);

border-radius:22px;

padding:35px;

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.card-premium:hover{

transform:translateY(-10px);

border-color:#00C2FF;

box-shadow:0 20px 60px rgba(0,140,255,.20);

}

/*=========================================
 ICONS
=========================================*/

.big-icon{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:linear-gradient(135deg,#008CFF,#00C2FF);

font-size:40px;

color:white;

margin-bottom:25px;

}

/*=========================================
 DIVIDERS
=========================================*/

.divider{

width:120px;

height:4px;

background:linear-gradient(90deg,#008CFF,#00C2FF);

border-radius:20px;

margin:30px auto;

}

/*=========================================
 SPACING
=========================================*/

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

.pt-120{

padding-top:120px;

}

.pb-120{

padding-bottom:120px;

}

/*=========================================
 PREMIUM BACKGROUNDS
=========================================*/

.hero::before{

content:"";

position:absolute;

top:-250px;

right:-250px;

width:700px;

height:700px;

background:#008CFF;

border-radius:50%;

filter:blur(220px);

opacity:.12;

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

bottom:-250px;

left:-250px;

width:600px;

height:600px;

background:#00C2FF;

border-radius:50%;

filter:blur(220px);

opacity:.10;

pointer-events:none;

}

/*=========================================
 SECTION BACKGROUNDS
=========================================*/

.services,
.gallery-section,
.contact-section{

position:relative;

overflow:hidden;

}

.services::before,
.gallery-section::before,
.contact-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#008CFF;

filter:blur(180px);

opacity:.06;

right:-180px;

top:-180px;

}

.services::after,
.gallery-section::after,
.contact-section::after{

content:"";

position:absolute;

width:450px;

height:450px;

background:#00C2FF;

filter:blur(180px);

opacity:.05;

left:-150px;

bottom:-150px;

}

/*=========================================
 FORM
=========================================*/

.contact-section input,
.contact-section textarea,
.contact-section select{

width:100%;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

padding:18px;

border-radius:16px;

color:#fff;

margin-bottom:20px;

transition:.35s;

}

.contact-section input:focus,
.contact-section textarea:focus,
.contact-section select:focus{

outline:none;

border-color:#00C2FF;

background:rgba(255,255,255,.08);

box-shadow:0 0 0 4px rgba(0,194,255,.12);

}

/*=========================================
 WPFORMS
=========================================*/

.wpforms-container{

margin-top:20px;

}

.wpforms-submit{

background:linear-gradient(135deg,#009DFF,#00C2FF)!important;

border:none!important;

padding:16px 34px!important;

border-radius:50px!important;

font-weight:700!important;

color:#fff!important;

transition:.35s!important;

}

.wpforms-submit:hover{

transform:translateY(-4px);

}

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

.footer{

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#008CFF;

filter:blur(220px);

opacity:.06;

right:-200px;

bottom:-200px;

}

.footer p{

line-height:1.9;

color:#AEB8C5;

}

.footer i{

color:#00C2FF;

margin-right:8px;

}

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

.social{

display:flex;

gap:16px;

margin-top:30px;

}

.social a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

font-size:22px;

color:#fff;

transition:.35s;

}

.social a:hover{

background:#00C2FF;

transform:translateY(-6px);

}

/*=========================================
 HOVER EFFECTS
=========================================*/

img{

transition:.45s;

}

img:hover{

transform:scale(1.02);

}

.service-card:hover .service-icon{

transform:rotate(8deg) scale(1.08);

transition:.35s;

}

.brand-card:hover i{

transform:scale(1.15);

transition:.35s;

}

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

@media (max-width:1400px){

.hero h1{

font-size:60px;

}

section h2{

font-size:48px;

}

}

@media (max-width:1200px){

.hero{

padding-top:140px;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:17px;

}

.hero-stats{

gap:20px;

}

.hero-image{

max-width:90%;

margin:auto;

}

}

@media (max-width:992px){

.header{

padding:10px 0;

}

.navbar{

padding:10px 0;

}

.hero{

text-align:center;

}

.hero h1{

font-size:46px;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.about-section{

text-align:center;

}

.about-list{

display:inline-block;

text-align:left;

margin-top:30px;

}

.info-card{

margin-bottom:25px;

}

section{

padding:90px 0;

}

section h2{

font-size:40px;

}

}

@media (max-width:768px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:38px;

line-height:1.2;

}

.hero-tag{

font-size:13px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

flex-direction:column;

align-items:center;

}

.hero-stats div{

width:240px;

}

.service-card{

padding:30px;

}

.info-card{

padding:30px;

}

.brand-card{

padding:25px;

}

.testimonial-card{

padding:30px;

}

.contact-section h2{

font-size:34px;

}

.cta-section h2{

font-size:36px;

}

.footer{

text-align:center;

}

.social{

justify-content:center;

}

}

@media (max-width:576px){

.hero h1{

font-size:31px;

}

.hero p{

font-size:15px;

}

section h2{

font-size:30px;

}

.big-icon{

width:75px;

height:75px;

font-size:32px;

}

.service-icon{

width:75px;

height:75px;

}

.service-icon i{

font-size:30px;

}

.btn{

font-size:15px;

padding:14px 22px;

}

.floating-whatsapp{

width:60px;

height:60px;

font-size:30px;

right:18px;

bottom:18px;

}

}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#05070B;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(#008CFF,#00C2FF);

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#00C2FF;

}

/*=========================================
TEXT SELECTION
=========================================*/

::selection{

background:#00C2FF;

color:white;

}

/*=========================================
SMOOTH TRANSITIONS
=========================================*/

*{

transition:

background .25s,

color .25s,

border-color .25s,

box-shadow .25s;

}

/*=========================================
 PREMIUM EFFECTS
=========================================*/

.hero,
.services,
.about-section,
.brands,
.gallery-section,
.contact-section,
.footer{

position:relative;

z-index:1;

}

.hero>*,
.services>*,
.about-section>*,
.brands>*,
.gallery-section>*,
.contact-section>*,
.footer>*{

position:relative;

z-index:2;

}

/*=========================================
 GLOW
=========================================*/

.glow{

position:relative;

}

.glow::after{

content:"";

position:absolute;

inset:-2px;

border-radius:inherit;

background:linear-gradient(135deg,#008CFF,#00C2FF);

filter:blur(22px);

opacity:.18;

z-index:-1;

}

/*=========================================
 HOVER SCALE
=========================================*/

.scale{

transition:.35s;

}

.scale:hover{

transform:scale(1.04);

}

/*=========================================
 FADE
=========================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/*=========================================
 BORDERS
=========================================*/

.border-blue{

border:1px solid rgba(0,194,255,.25);

}

.border-blue:hover{

border-color:#00C2FF;

}

/*=========================================
 SHADOWS
=========================================*/

.shadow-premium{

box-shadow:

0 30px 90px rgba(0,0,0,.35);

}

/*=========================================
 BADGES
=========================================*/

.badge-premium{

display:inline-block;

padding:10px 18px;

background:rgba(0,194,255,.12);

border-radius:40px;

color:#00C2FF;

font-weight:700;

font-size:14px;

}

/*=========================================
 IMAGE OVERLAY
=========================================*/

.overlay{

position:relative;

overflow:hidden;

}

.overlay::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

180deg,

transparent,

rgba(5,7,11,.55)

);

opacity:0;

transition:.35s;

}

.overlay:hover::before{

opacity:1;

}

/*=========================================
 LOADER
=========================================*/

.loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#05070B;

z-index:999999;

}

.loader.hide{

opacity:0;

visibility:hidden;

transition:.5s;

}

/*=========================================
 UTILITIES
=========================================*/

.text-blue{

color:#00C2FF;

}

.round{

border-radius:20px;

}

.w-100{

width:100%;

}

.h-100{

height:100%;

}

.text-center{

text-align:center;

}

.mt-5{

margin-top:3rem;

}

.mb-5{

margin-bottom:3rem;

}

.py-5{

padding-top:5rem;

padding-bottom:5rem;

}

/*=========================================
 END
=========================================*/