/* ==========================================
MITTIVAH CREATOR COINS
PART 1
========================================== */

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

body{

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

background:
linear-gradient(
180deg,
#f7fbf4,
#eef8eb,
#f7fbf4
);

color:#234126;

overflow-x:hidden;

}


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

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:

radial-gradient(
circle at top left,
rgba(92,170,70,.12),
transparent 40%
),

radial-gradient(
circle at bottom right,
rgba(255,198,0,.10),
transparent 40%
);

z-index:-2;

}



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

.hero{

width:100%;

padding:

40px 20px
25px;

text-align:center;

}



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

.logo{

margin-bottom:20px;

}

.logo img{

width:110px;

height:auto;

filter:

drop-shadow(
0 6px 18px
rgba(0,0,0,.12)
);

}



/* =======================================
TITLE
======================================= */

.hero h1{

font-size:58px;

font-weight:700;

color:#1f5e2e;

margin-bottom:12px;

line-height:1.2;

}


.hero h3{

font-size:25px;

font-weight:600;

color:#5c8d4d;

margin-bottom:18px;

}


.hero p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.8;

color:#666;

}



/* =======================================
TOP FEATURES
======================================= */

.top-features{

margin:

45px auto 0;

display:grid;

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

gap:18px;

max-width:1100px;

}



.top-features div{

background:

rgba(255,255,255,.75);

backdrop-filter:
blur(12px);

border-radius:22px;

padding:

28px 20px;

box-shadow:

0 10px 30px
rgba(0,0,0,.08);

transition:.35s;

border:

1px solid
rgba(255,255,255,.7);

}



.top-features div:hover{

transform:

translateY(-8px);

box-shadow:

0 18px 35px
rgba(31,94,46,.18);

}



.top-features div{

font-size:42px;

}



.top-features h4{

margin-top:15px;

font-size:22px;

color:#1f5e2e;

font-weight:700;

}



.top-features span{

display:block;

margin-top:10px;

font-size:16px;

color:#666;

line-height:1.6;

}



/* =======================================
TABLET
======================================= */

@media(max-width:900px){

.hero h1{

font-size:42px;

}

.hero h3{

font-size:21px;

}

.top-features{

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

}

}



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

@media(max-width:600px){

.hero{

padding:

30px 16px;

}

.logo img{

width:90px;

}

.hero h1{

font-size:34px;

}

.hero h3{

font-size:18px;

}

.hero p{

font-size:15px;

line-height:1.6;

}

.top-features{

grid-template-columns:1fr;

gap:15px;

}

.top-features div{

padding:22px;

}

}

/* ==========================================
LOGIN CARD
PART - 2
========================================== */

.login-card{

width:100%;

max-width:520px;

margin:60px auto;

padding:45px 35px;

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

backdrop-filter:blur(18px);

border-radius:30px;

box-shadow:

0 15px 45px rgba(0,0,0,.10);

border:

1px solid rgba(255,255,255,.8);

text-align:center;

transition:.35s;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:

0 22px 55px rgba(31,94,46,.18);

}


/* Badge */

.badge{

display:inline-block;

padding:10px 20px;

background:#e8f6e5;

color:#1f5e2e;

font-size:14px;

font-weight:600;

border-radius:50px;

margin-bottom:18px;

}


/* Login Heading */

.login-card h2{

font-size:32px;

color:#1f5e2e;

margin-bottom:12px;

font-weight:700;

}

.login-card p{

color:#666;

font-size:16px;

line-height:1.7;

margin-bottom:28px;

}


/* Inputs */

.login-card input{

width:100%;

padding:16px 18px;

margin-bottom:18px;

border:1px solid #d8e6d4;

border-radius:15px;

background:#fff;

font-size:16px;

outline:none;

transition:.30s;

}

.login-card input:focus{

border-color:#3f8b44;

box-shadow:

0 0 0 4px rgba(63,139,68,.12);

}


/* Forgot Password */

.forgot{

text-align:right;

margin-bottom:22px;

}

.forgot a{

text-decoration:none;

color:#2f7b38;

font-size:14px;

font-weight:500;

}

.forgot a:hover{

text-decoration:underline;

}


/* Login Button */

.login-card button{

width:100%;

padding:17px;

border:none;

border-radius:16px;

background:linear-gradient(

90deg,

#2f7b38,

#4da84d

);

color:#fff;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.login-card button:hover{

transform:translateY(-3px);

box-shadow:

0 12px 25px rgba(47,123,56,.30);

}


/* Apply Section */

.apply{

margin-top:28px;

font-size:15px;

color:#666;

}

.apply a{

text-decoration:none;

color:#2f7b38;

font-weight:700;

margin-left:6px;

}

.apply a:hover{

text-decoration:underline;

}


/* Mobile */

@media(max-width:600px){

.login-card{

margin:35px 15px;

padding:30px 22px;

border-radius:22px;

}

.login-card h2{

font-size:25px;

}

.login-card p{

font-size:14px;

}

.login-card input{

padding:14px;

font-size:15px;

}

.login-card button{

padding:15px;

font-size:16px;

}

}

/* ==========================================
BOTTOM FEATURES
PART - 3
========================================== */

.bottom-features{

width:100%;

max-width:1200px;

margin:40px auto;

display:grid;

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

gap:20px;

padding:0 20px;

}

.bottom-features div{

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

backdrop-filter:blur(14px);

border-radius:22px;

padding:28px 20px;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.bottom-features div:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(31,94,46,.18);

}

.bottom-features div{

font-size:42px;

}

.bottom-features b{

display:block;

margin-top:15px;

font-size:20px;

color:#1f5e2e;

}

.bottom-features p{

margin-top:10px;

font-size:15px;

color:#666;

line-height:1.6;

}


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

footer{

margin:50px 0 30px;

text-align:center;

font-size:15px;

color:#777;

padding:0 20px;

}


/* ==========================================
FLOATING COINS
========================================== */

body::after{

content:"🪙";

position:fixed;

font-size:34px;

left:8%;

bottom:-60px;

animation:coinFloat 12s linear infinite;

opacity:.18;

pointer-events:none;

}

@keyframes coinFloat{

0%{

transform:translateY(0) rotate(0deg);

opacity:0;

}

15%{

opacity:.25;

}

50%{

transform:translateY(-50vh) rotate(180deg);

}

100%{

transform:translateY(-110vh) rotate(360deg);

opacity:0;

}

}


/* ==========================================
FLOATING LEAF
========================================== */

.hero::after{

content:"🍃";

position:absolute;

right:8%;

top:60px;

font-size:34px;

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

opacity:.30;

}

@keyframes leafMove{

0%{

transform:translateY(0) rotate(0deg);

}

50%{

transform:translateY(20px) rotate(12deg);

}

100%{

transform:translateY(0) rotate(0deg);

}

}


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

@media(max-width:900px){

.bottom-features{

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

}

}

@media(max-width:600px){

.bottom-features{

grid-template-columns:1fr;

padding:0 15px;

}

.bottom-features div{

padding:22px;

}

footer{

font-size:13px;

}

}

/* ==========================================
PREMIUM UPGRADE
PART - 4
========================================== */

/* Premium Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

body{

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

}

/* Premium Heading */

.hero h1{

font-family:'Playfair Display',serif;

letter-spacing:.5px;

text-shadow:

0 8px 20px rgba(0,0,0,.08);

}

/* Animated Background */

body{

background:

linear-gradient(
-45deg,
#f6fbf4,
#eef8eb,
#fdfefb,
#f4f8f0
);

background-size:400% 400%;

animation:bgMove 12s ease infinite;

}

@keyframes bgMove{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}


/* Glass Effect Upgrade */

.login-card,
.top-features div,
.bottom-features div{

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

box-shadow:

0 18px 45px rgba(0,0,0,.08);

}


/* Hover Glow */

.login-card:hover{

box-shadow:

0 25px 60px rgba(31,94,46,.22);

}


/* Login Button Premium */

.login-card button{

background:

linear-gradient(
90deg,
#1f6b2f,
#4CAF50,
#1f6b2f
);

background-size:250%;

}

.login-card button:hover{

background-position:right center;

}


/* Floating Coins */

.coin1,
.coin2,
.coin3{

position:fixed;

font-size:28px;

opacity:.18;

pointer-events:none;

z-index:-1;

animation:floatCoin 18s linear infinite;

}

.coin1{

left:8%;

bottom:-50px;

}

.coin2{

left:52%;

bottom:-120px;

animation-delay:6s;

}

.coin3{

right:8%;

bottom:-80px;

animation-delay:10s;

}

@keyframes floatCoin{

0%{

transform:translateY(0) rotate(0deg);

opacity:0;

}

20%{

opacity:.20;

}

100%{

transform:translateY(-120vh) rotate(360deg);

opacity:0;

}


/* Inputs */

.login-card input{

transition:.30s;

}

.login-card input:hover{

border-color:#4CAF50;

}


/* Feature Cards */

.top-features div:hover,
.bottom-features div:hover{

background:#ffffff;

}


/* Badge */

.badge{

box-shadow:

0 8px 20px rgba(76,175,80,.18);

}


/* Footer */

footer{

font-weight:500;

letter-spacing:.4px;

}