/*======================================
  Adi Kailash Jatadhari Tourism
  Premium Under Construction
=======================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    min-height:100vh;
    overflow:hidden;
    color:#fff;

    background:
    linear-gradient(rgba(3,8,18,.70),rgba(5,10,25,.82)),
    url("bg.jpg") center center/cover no-repeat fixed;

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

    position:relative;

}


/*========================
Overlay
=========================*/

.overlay{

position:absolute;
inset:0;

background:

radial-gradient(circle at top,#c79a3240,transparent 35%),
linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.45));

z-index:1;

}


/*========================
Golden Glow
=========================*/

.glow{

position:absolute;
border-radius:50%;
filter:blur(80px);

z-index:0;

}

.glow1{

width:420px;
height:420px;

background:#d4a43740;

top:-120px;
right:-120px;

animation:floatGlow 8s ease-in-out infinite;

}

.glow2{

width:300px;
height:300px;

background:#1d8cff20;

left:-100px;
bottom:-100px;

animation:floatGlow2 10s ease-in-out infinite;

}

@keyframes floatGlow{

50%{

transform:translateY(30px);

}

}

@keyframes floatGlow2{

50%{

transform:translateX(30px);

}

}


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

.hero{

position:relative;

width:100%;
padding:40px;

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

z-index:5;

}


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

.glass-card{

width:100%;
max-width:900px;

padding:55px;

border-radius:30px;

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

backdrop-filter:blur(18px);

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

box-shadow:

0 20px 60px rgba(0,0,0,.45),
0 0 50px rgba(212,164,55,.15);

text-align:center;

animation:fadeUp 1.2s ease;

}


/*========================
Logo
=========================*/

.logo{

width:170px;

margin-bottom:25px;

filter:drop-shadow(0 12px 35px rgba(255,215,0,.35));

transition:.4s;

}

.logo:hover{

transform:scale(1.05);

}


/*========================
Tag
=========================*/

.tag{

display:inline-block;

padding:10px 24px;

background:linear-gradient(45deg,#d4a437,#f4d16d);

color:#111;

font-size:14px;
font-weight:700;

border-radius:40px;

margin-bottom:25px;

}


/*========================
Heading
=========================*/

h1{

font-family:'Cinzel',serif;

font-size:58px;

line-height:1.15;

margin-bottom:15px;

}

h1 span{

color:#d4a437;

}

h3{

font-size:20px;

font-weight:400;

color:#f4d88d;

margin-bottom:28px;

}

p{

max-width:760px;

margin:auto;

font-size:17px;

line-height:1.9;

opacity:.92;

margin-bottom:38px;

}


/*========================
Buttons
=========================*/

.button-group{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:18px;

margin-bottom:35px;

}

.btn{

padding:15px 28px;

border-radius:60px;

text-decoration:none;

font-weight:600;

font-size:15px;

display:flex;

align-items:center;

gap:10px;

transition:.35s;

}

.btn i{

font-size:18px;

}


/* WhatsApp */

.whatsapp{

background:#25D366;

color:#fff;

}

.whatsapp:hover{

transform:translateY(-5px);

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

}


/* Call */

.call{

background:transparent;

border:2px solid #d4a437;

color:#fff;

}

.call:hover{

background:#d4a437;

color:#111;

transform:translateY(-5px);

}


/* Instagram */

.insta{

background:linear-gradient(
45deg,
#833AB4,
#C13584,
#E1306C,
#FD1D1D,
#FCAF45
);

color:#fff;

}

.insta:hover{

transform:translateY(-5px);

box-shadow:0 12px 35px rgba(225,48,108,.45);

}


/*========================
Divider
=========================*/

.divider{

height:1px;

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

margin:25px auto;

width:90%;

}


/*========================
Address
=========================*/

.address{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

font-size:17px;

line-height:1.7;

}

.address i{

font-size:28px;

color:#d4a437;

}


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

.floating-whatsapp{

position:fixed;

right:25px;
bottom:25px;

width:65px;
height:65px;

border-radius:50%;

background:#25D366;

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

font-size:30px;

color:#fff;

text-decoration:none;

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

z-index:999;

transition:.3s;

}

.floating-whatsapp:hover{

transform:scale(1.1);

}


/*========================
Animation
=========================*/

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}


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

@media(max-width:768px){

body{

overflow:auto;
padding:25px 0;

}

.glass-card{

padding:35px 25px;

}

.logo{

width:130px;

}

h1{

font-size:36px;

}

h3{

font-size:16px;

}

p{

font-size:15px;

}

.button-group{

flex-direction:column;

}

.btn{

width:100%;
justify-content:center;

}

.address{

flex-direction:column;

font-size:15px;

}

}

/*==========================================
   SNOW FALL ANIMATION
==========================================*/

.snow,
.snow::before,
.snow::after{

content:"";

position:absolute;

top:-100%;

left:0;

width:100%;
height:300%;

pointer-events:none;

background-image:

radial-gradient(4px 4px at 80px 120px,#ffffff,transparent),
radial-gradient(3px 3px at 180px 250px,#ffffff,transparent),
radial-gradient(3px 3px at 280px 420px,#ffffff,transparent),
radial-gradient(4px 4px at 420px 180px,#ffffff,transparent),
radial-gradient(3px 3px at 520px 360px,#ffffff,transparent),
radial-gradient(4px 4px at 700px 280px,#ffffff,transparent),
radial-gradient(3px 3px at 860px 460px,#ffffff,transparent),
radial-gradient(4px 4px at 980px 120px,#ffffff,transparent),
radial-gradient(3px 3px at 1100px 310px,#ffffff,transparent),
radial-gradient(4px 4px at 1280px 200px,#ffffff,transparent);

animation:snowFall 22s linear infinite;

opacity:.45;

z-index:2;

}

.snow::before{

opacity:.28;

transform:scale(.8);

animation-duration:30s;

}

.snow::after{

opacity:.18;

transform:scale(1.25);

animation-duration:40s;

}

@keyframes snowFall{

0%{

transform:translateY(-20%);

}

100%{

transform:translateY(50%);

}

}


/*==========================================
   SHIMMER BORDER
==========================================*/

.glass-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:30px;

padding:1px;

background:linear-gradient(
135deg,
transparent,
rgba(255,255,255,.35),
transparent
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

animation:borderMove 5s linear infinite;

}

@keyframes borderMove{

0%{

filter:hue-rotate(0deg);

}

100%{

filter:hue-rotate(360deg);

}

}


/*==========================================
   BUTTON SHINE
==========================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60px;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.6),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn:hover::before{

left:140%;

}


/*==========================================
   LOGO FLOAT
==========================================*/

.logo{

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

}

@keyframes logoFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}


/*==========================================
   CARD FLOAT
==========================================*/

.glass-card{

position:relative;

animation:

fadeUp 1s ease,

cardFloat 7s ease-in-out infinite;

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==========================================
   GOLDEN STARS
==========================================*/

body::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background-image:

radial-gradient(circle,#d4a437 2px,transparent 2px),
radial-gradient(circle,#ffffff 1px,transparent 1px);

background-size:

240px 240px,
180px 180px;

opacity:.18;

animation:starsMove 60s linear infinite;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(300px);

}

}


/*==========================================
   SOCIAL BUTTON PULSE
==========================================*/

.floating-whatsapp{

animation:pulse 2.3s infinite;

}

@keyframes pulse{

0%{

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

}

70%{

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

}

100%{

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

}

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111d;

}

::-webkit-scrollbar-thumb{

background:#d4a437;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#f2ca62;

}


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

@media (max-width:768px){

.snow{

opacity:.25;

}

.glow1{

width:220px;
height:220px;

}

.glow2{

width:180px;
height:180px;

}

.tag{

font-size:12px;

padding:8px 18px;

}

.floating-whatsapp{

width:58px;
height:58px;

font-size:28px;

right:18px;
bottom:18px;

}

}

/* Ripple Effect */

.btn{
    position:relative;
    overflow:hidden;
}

.ripple{

position:absolute;

width:10px;
height:10px;

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

border-radius:50%;

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

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

0%{

width:0;
height:0;
opacity:.7;

}

100%{

width:450px;
height:450px;
opacity:0;

}

}