/* ===================================
   SHAKTIPAY PROFESSIONAL STYLE.CSS
   PART 1
=================================== */

/* =========================
   RESET
========================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Segoe UI',sans-serif;
background:linear-gradient(to bottom,#f7faff,#eef4ff);
color:#222;
line-height:1.8;
overflow-x:hidden;
}

/* =========================
   CONTAINER
========================= */

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

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

header{
position:sticky;
top:0;
z-index:9999;

background:linear-gradient(
135deg,
#001f54,
#0b3d91,
#ff8c00
);

background-size:300% 300%;

animation:headerMove 8s ease infinite;

padding:15px 30px;

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

box-shadow:
0 5px 25px rgba(0,0,0,.15);
}

@keyframes headerMove{

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

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

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

}

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

.logo-section{
display:flex;
align-items:center;
gap:12px;
}

.logo-section img{

width:60px;
height:60px;

border-radius:50%;

background:#fff;

padding:4px;

box-shadow:
0 0 15px rgba(255,140,0,.5),
0 0 30px rgba(0,31,84,.3);

transition:.4s;
}

.logo-section img:hover{

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

}

.logo-section h1{

color:#fff;

font-size:24px;

font-weight:800;

letter-spacing:.5px;

text-shadow:
0 2px 8px rgba(0,0,0,.2);

}

/* =========================
   NAVIGATION
========================= */

nav ul{

display:flex;

list-style:none;

gap:10px;

}

nav ul li a{

display:block;

padding:10px 16px;

color:#fff;

text-decoration:none;

font-weight:600;

border-radius:10px;

transition:.3s;

}

nav ul li a:hover{

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

color:#FFD54F;

}

/* =========================
   MOBILE MENU ICON
========================= */

.menu-btn{

display:none;

font-size:32px;

color:#fff;

cursor:pointer;

}

.close-btn{

display:none;

}

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

.hero{

max-width:1200px;

margin:40px auto;

padding:30px;

background:#fff;

border-radius:25px;

box-shadow:
0 10px 40px rgba(0,31,84,.08);

text-align:center;

}

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

.hero-image{

width:100%;

max-height:600px;

object-fit:cover;

border-radius:20px;

border:4px solid #ff9800;

box-shadow:
0 0 25px rgba(255,152,0,.2),
0 10px 30px rgba(0,0,0,.1);

}

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

.hero-content{

margin-top:30px;

}

.hero-content h2{

font-size:46px;

font-weight:800;

line-height:1.3;

background:
linear-gradient(
90deg,
#001f54,
#0b3d91,
#ff8c00
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:15px;

}

.hero-content p{

font-size:18px;

max-width:900px;

margin:auto;

color:#555;

}

/* =========================
   BUTTON AREA
========================= */

.hero-buttons{

margin-top:30px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

padding:16px 34px;

border-radius:50px;

font-size:18px;

font-weight:700;

text-decoration:none;

transition:.3s;

display:inline-block;

}

/* =========================
   REGISTER BUTTON
========================= */

.register-btn{

background:
linear-gradient(
135deg,
#001f54,
#0b3d91
);

color:#fff;

box-shadow:
0 8px 20px rgba(0,31,84,.25);

}

.register-btn:hover{

transform:
translateY(-4px);

box-shadow:
0 12px 25px rgba(0,31,84,.35);

}

/* =========================
   DOWNLOAD BUTTON
========================= */

.download-btn{

background:
linear-gradient(
135deg,
#ff8c00,
#ffb300
);

color:#fff;

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

}

.download-btn:hover{

transform:
translateY(-4px);

box-shadow:
0 12px 25px rgba(255,140,0,.35);

}
/* ===================================
   SHAKTIPAY PROFESSIONAL STYLE.CSS
   PART 2
=================================== */

/* =========================
   INTRO SECTION
========================= */

.intro{

max-width:1200px;

margin:30px auto;

padding:35px;

background:#fff;

border-radius:20px;

border-left:6px solid #ff8c00;

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

}

.intro h2{

font-size:32px;

color:#001f54;

font-weight:800;

margin-bottom:15px;

position:relative;

padding-bottom:10px;

}

.intro h2::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:80px;
height:4px;

background:#ff8c00;

border-radius:10px;

}

.intro p{

font-size:17px;

color:#444;

}

/* =========================
   SEO CONTENT SECTION
========================= */

.seo-content{

max-width:1200px;

margin:25px auto;

padding:35px;

background:#fff;

border-radius:20px;

border-left:6px solid #ff8c00;

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

transition:.3s;

}

.seo-content:hover{

transform:translateY(-5px);

box-shadow:
0 15px 35px rgba(0,0,0,.12);

}

.seo-content h2{

font-size:30px;

color:#001f54;

font-weight:800;

margin-bottom:15px;

position:relative;

padding-bottom:10px;

}

.seo-content h2::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:80px;
height:4px;

background:#ff8c00;

border-radius:10px;

}

.seo-content p{

font-size:17px;

color:#444;

}

/* =========================
   FAQ SECTION
========================= */

.faq-section{

max-width:1200px;

margin:50px auto;

padding:20px;

}

.faq-section h2{

text-align:center;

font-size:36px;

color:#001f54;

font-weight:800;

margin-bottom:30px;

}

.faq-box{

background:#fff;

padding:25px;

margin-bottom:20px;

border-radius:15px;

border-left:5px solid #ff8c00;

box-shadow:
0 5px 20px rgba(0,0,0,.08);

transition:.3s;

}

.faq-box:hover{

transform:translateY(-3px);

}

.faq-box h3{

font-size:22px;

color:#001f54;

margin-bottom:10px;

}

.faq-box p{

font-size:16px;

color:#444;

}

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

footer{

margin-top:60px;

background:
linear-gradient(
135deg,
#001f54,
#002f6c
);

color:#fff;

}

.footer-container{

max-width:1200px;

margin:auto;

padding:60px 20px;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.footer-box h3{

font-size:22px;

margin-bottom:15px;

color:#ffb300;

}

.footer-box p{

margin-bottom:10px;

color:#ddd;

}

.footer-box ul{

list-style:none;

}

.footer-box ul li{

margin-bottom:10px;

}

.footer-box a{

color:#fff;

text-decoration:none;

transition:.3s;

}

.footer-box a:hover{

color:#ffb300;

padding-left:5px;

}

.copyright{

text-align:center;

padding:20px;

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

font-size:15px;

}

/* =========================
   SOCIAL ICON BUTTONS
========================= */

.social-links{

display:flex;

gap:12px;

margin-top:15px;

flex-wrap:wrap;

}

.social-links a{

display:inline-block;

padding:10px 16px;

border-radius:8px;

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

color:#fff;

text-decoration:none;

transition:.3s;

}

.social-links a:hover{

background:#ff8c00;

}

/* =========================
   BACK TO TOP BUTTON
========================= */

#topBtn{

position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:
linear-gradient(
135deg,
#ff8c00,
#ffb300
);

color:#fff;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:
0 5px 15px rgba(255,140,0,.4);

}

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

@media(max-width:900px){

.menu-btn{

display:block;

}

nav{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#001f54;

padding-top:70px;

transition:.4s;

z-index:9999;

}

nav.active{

right:0;

}

nav ul{

flex-direction:column;

padding-left:25px;

}

nav ul li{

margin-bottom:20px;

}

.close-btn{

display:block;

position:absolute;

top:15px;

right:20px;

font-size:30px;

color:#fff;

cursor:pointer;

}

.logo-section h1{

font-size:18px;

}

.hero-content h2{

font-size:30px;

}

.hero-content p{

font-size:16px;

}

.btn{

width:90%;

max-width:320px;

}

.intro h2,
.seo-content h2{

font-size:24px;

}

.faq-section h2{

font-size:28px;

}

}

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

@media(max-width:500px){

.hero{

padding:15px;

}

.hero-content h2{

font-size:24px;

}

.hero-content p{

font-size:15px;

}

.logo-section img{

width:45px;

height:45px;

}

.logo-section h1{

font-size:16px;

}

.intro,
.seo-content,
.faq-box{

padding:20px;

}

}