/* ======================================
   BHOTAHITI.COM
   Premium Liquid Glass UI
====================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    background:#f6f8fb;
    color:#222;
    position:relative;

}

/* ==============================
Background
==============================*/

.bg1,
.bg2,
.bg3{

    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    z-index:-5;
    animation:float 18s infinite alternate ease-in-out;

}

.bg1{

    width:450px;
    height:450px;
    background:#ff5353;
    top:-120px;
    left:-100px;

}

.bg2{

    width:500px;
    height:500px;
    background:#355cff;
    right:-120px;
    top:100px;

}

.bg3{

    width:500px;
    height:500px;
    background:#ffd85b;
    left:35%;
    bottom:-250px;

}

@keyframes float{

from{
transform:translateY(0px) translateX(0px);
}

to{
transform:translateY(-60px) translateX(40px);
}

}

/* ==============================
Glass
==============================*/

.glass-nav,
.card,
.category,
.glass-contact{

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

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

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

box-shadow:

0 10px 35px rgba(0,0,0,.08),

inset 0 1px 0 rgba(255,255,255,.45);

}

/* ===========================
NAVBAR
===========================*/

header{

position:sticky;

top:0;

z-index:9999;

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

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(0,0,0,.08);

}

.navbar{

max-width:1300px;

height:72px;

margin:auto;

padding:0 20px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:48px;

display:block;

}

.nav-links{

display:flex;

gap:28px;

list-style:none;

}

.nav-links a{

text-decoration:none;

font-size:15px;

font-weight:600;

color:#333;

transition:.3s;

}

.nav-links a:hover{

color:#d62828;

}

.nav-btn{

padding:10px 22px;

background:#d62828;

color:#fff;

border-radius:30px;

text-decoration:none;

font-size:14px;

font-weight:600;

transition:.3s;

}

.nav-btn:hover{

background:#b91c1c;

transform:translateY(-2px);

}

.menu-toggle{

display:none;

background:none;

border:none;

font-size:26px;

cursor:pointer;

color:#333;

}

/* ==============================
Hero
==============================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

max-width:1300px;

margin:auto;

padding:180px 30px 100px;

gap:60px;

}

.hero-left{

flex:1;

}

.hero-left h1{

font-size:65px;

line-height:1.1;

font-weight:800;

margin-bottom:25px;

}

.hero-left span{

display:block;

background:linear-gradient(90deg,#e63946,#1d4ed8);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-left p{

font-size:20px;

line-height:1.9;

color:#444;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.primary-btn{

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:700;

background:linear-gradient(135deg,#ff4040,#ff914d);

color:#fff;

transition:.35s;

box-shadow:0 12px 30px rgba(255,90,90,.35);

}

.primary-btn:hover{

transform:translateY(-5px);

}

.glass-btn{

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:700;

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

backdrop-filter:blur(18px);

color:#111;

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

transition:.3s;

}

.glass-btn:hover{

transform:translateY(-5px);

}

.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.hero-right img{

width:100%;

max-width:520px;

animation:logoFloat 6s infinite ease-in-out;

filter:drop-shadow(0 20px 40px rgba(0,0,0,.2));

}

@keyframes logoFloat{

0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}

}

/* ==============================
Stats
==============================*/

.stats{

max-width:1250px;

margin:auto;

padding:50px 30px;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.card{

padding:40px;

border-radius:25px;

text-align:center;

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

}

.card h2{

font-size:42px;

color:#e63946;

margin-bottom:10px;

}

.card p{

font-size:18px;

}

/* ==============================
Categories
==============================*/

.categories{

max-width:1300px;

margin:auto;

padding:100px 30px;

text-align:center;

}

.categories h2{

font-size:45px;

margin-bottom:60px;

}

.category-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.category{

padding:45px;

border-radius:28px;

transition:.35s;

cursor:pointer;

}

.category:hover{

transform:translateY(-12px) scale(1.03);

}

.category i{

font-size:50px;

margin-bottom:25px;

background:linear-gradient(135deg,#ff4040,#1d4ed8);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.category h3{

font-size:22px;

}

/* ==============================
About
==============================*/

.about{

padding:120px 30px;

max-width:900px;

margin:auto;

text-align:center;

}

.about h2{

font-size:45px;

margin-bottom:30px;

}

.about p{

font-size:20px;

line-height:2;

color:#555;

}

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

.contact{

padding:120px 25px;

display:flex;

justify-content:center;

}

.glass-contact{

max-width:850px;

width:100%;

padding:60px;

border-radius:35px;

text-align:center;

}

.contact-badge{

display:inline-block;

padding:8px 20px;

border-radius:50px;

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

font-weight:600;

margin-bottom:20px;

color:#d62828;

}

.glass-contact h2{

font-size:42px;

margin-bottom:20px;

}

.contact-text{

font-size:18px;

line-height:1.9;

color:#555;

max-width:650px;

margin:0 auto 40px;

}

.contact-info{

display:grid;

gap:18px;

margin-bottom:40px;

}

.info-box{

display:flex;

align-items:center;

justify-content:center;

gap:15px;

padding:18px;

border-radius:18px;

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

backdrop-filter:blur(16px);

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

font-size:18px;

font-weight:500;

}

.info-box i{

font-size:22px;

color:#d62828;

}

.social-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.facebook,
.whatsapp-btn{

display:flex;

align-items:center;

gap:10px;

padding:16px 34px;

border-radius:50px;

text-decoration:none;

font-weight:600;

font-size:17px;

transition:.35s;

color:#fff;

}

.facebook{

background:#1877F2;

box-shadow:0 15px 30px rgba(24,119,242,.3);

}

.facebook:hover{

transform:translateY(-5px);

}

.whatsapp-btn{

background:#25D366;

box-shadow:0 15px 30px rgba(37,211,102,.35);

}

.whatsapp-btn:hover{

transform:translateY(-5px);

}

.facebook i,
.whatsapp-btn i{

font-size:22px;

}

@media(max-width:768px){

.social-buttons{

flex-direction:column;

}

.facebook,
.whatsapp-btn{

justify-content:center;

width:100%;

}

.glass-contact{

padding:35px;

}

.glass-contact h2{

font-size:30px;

}

.contact-text{

font-size:16px;

}

}

/* ==============================
Footer
==============================*/

footer{

padding:40px;

text-align:center;

background:#0b1736;

color:#fff;

line-height:2;

}

/* ==============================
WhatsApp
==============================*/

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:72px;

height:72px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

background:#25D366;

color:white;

text-decoration:none;

box-shadow:0 20px 35px rgba(37,211,102,.45);

z-index:9999;

transition:.35s;

animation:pulse 2s infinite;

}

.whatsapp:hover{

transform:scale(1.1);

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.45);

}

70%{

box-shadow:0 0 0 25px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/* ==============================
Responsive
==============================*/

@media(max-width:1100px){

.hero{

flex-direction:column;

text-align:center;

}

.stats{

grid-template-columns:repeat(2,1fr);

}

.category-grid{

grid-template-columns:repeat(2,1fr);

}

.hero-left h1{

font-size:50px;

}

}

@media(max-width:768px){

.glass-nav{

flex-direction:column;

gap:20px;

padding:20px;

}

.glass-nav ul{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.hero{

padding-top:220px;

}

.hero-left h1{

font-size:38px;

}

.hero-left p{

font-size:17px;

}

.stats{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.categories h2,

.about h2,

.glass-contact h2{

font-size:34px;

}

.logo img{

height:55px;

}

.hero-right img{

max-width:350px;

}

.glass-contact{

padding:35px;

}

.whatsapp{

width:62px;

height:62px;

font-size:28px;

right:18px;

bottom:18px;

}

}
@media(max-width:768px){

.menu-toggle{

display:block;

}

.nav-links{

position:absolute;

top:72px;

left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

display:none;

padding:20px 0;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.nav-links.active{

display:flex;

}

.nav-links li{

margin:12px 0;

}

.nav-btn{

display:none;

}

.hero{

padding-top:80px;

}

}