 
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#041B13;
    color:white;
    overflow-x:hidden;
}

.heading-font{
    font-family:'Playfair Display',serif;
}

.gold{
    color:#D4AF37;
}

.navbar{
    position:fixed;
    top:0;
    width:100%;
    z-index:999;
    background:rgba(4,27,19,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(212,175,55,.12);
}

.nav-link{
    position:relative;
    transition:.3s ease;
}

.nav-link:hover{
    color:#D4AF37;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#D4AF37;
    transition:.3s ease;
}

.nav-link:hover::after{
    width:100%;
}

.active{
    color:#D4AF37;
}

.logo-main{
    width:110px;
    animation:floatLogo 5s ease-in-out infinite;
}

.footer-logo{
    width:150px;
}

@keyframes floatLogo{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

.hero{

    min-height:100vh;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#14553d 0%,transparent 25%),
    radial-gradient(circle at bottom right,#0a3d2a 0%,transparent 25%),
    linear-gradient(135deg,#03140F,#06281C,#041B13);

}

.hero::before{

    content:'';

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(rgba(212,175,55,.12) 1px, transparent 1px);

    background-size:40px 40px;

    opacity:.35;

}

.hero-title{
    font-size:clamp(2.7rem,8vw,5rem);
    line-height:1.1;
}

.feature-card{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(212,175,55,.12);

    backdrop-filter:blur(10px);

    transition:.4s ease;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

    box-shadow:0 15px 40px rgba(212,175,55,.15);

}

.hero-btn{
    transition:.35s ease;
}

.hero-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(212,175,55,.2);

}

.main-card{

    width:min(380px,85vw);

    border-radius:30px;

    box-shadow:
    0 0 40px rgba(212,175,55,.15),
    0 0 100px rgba(212,175,55,.08);

}

.input-box{

    width:100%;

    padding:20px 24px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(212,175,55,.2);

    color:white;

    outline:none;

}

.input-box:focus{
    border-color:#D4AF37;
}

footer{

    background:
    linear-gradient(to bottom,#06281C,#02110C);

    border-top:1px solid rgba(212,175,55,.15);

}

@media(max-width:768px){

    .logo-main{
        width:85px;
    }

    .footer-logo{
        width:120px;
    }

}
 
/* ====================== SMOOTH CUSTOM SCROLLBAR ====================== */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #041B13;
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(#D4AF37, #C9A02F);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#E5C76B, #D4AF37);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* For Firefox */
html, body {
    scrollbar-width: thin;
    scrollbar-color: #D4AF37 #041B13;
}

/* Optional: Make whole page scroll smoother */
html {
    scroll-behavior: smooth;
}
 

/* =========================================
   SAFE PREMIUM IMPROVEMENTS
========================================= */

/* Better image scaling */

img{
    max-width:100%;
    display:block;
}

/* Smooth selection */

::selection{
    background:#D4AF37;
    color:#041B13;
}

/* Better button feel */

.hero-btn{
    transition:
    transform .35s ease,
    box-shadow .35s ease,
    opacity .35s ease;
}

.hero-btn:hover{
    opacity:.95;
}

/* Better input transition */

.input-box{
    transition:
    border-color .3s ease,
    background .3s ease;
}

.input-box:focus{

    background:
    rgba(255,255,255,.07);

}

/* Social media hover */

.social-icon{
    transition:.35s ease;
}

.social-icon:hover{
    transform:
    translateY(-5px)
    scale(1.05);
}

/* Floating WhatsApp */

.whatsapp-float{
    animation:whatsappPulse 2.5s infinite;
}

@keyframes whatsappPulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }

    70%{
        box-shadow:0 0 0 15px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

/* Loader smooth hide */

#loader{
    transition:
    opacity .5s ease,
    visibility .5s ease;
}

/* Better mobile spacing */

@media(max-width:768px){

    .hero{
        padding-bottom:70px;
    }

    .feature-card{
        padding:35px 25px;
    }

}

/* Small device fix */

@media(max-width:480px){

    .hero-title{
        font-size:2.2rem;
    }

}
 
