/* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* GLOBAL */

body{

background:linear-gradient(135deg,#020617,#0f172a,#020617);

color:white;

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

padding-top:80px;

line-height:1.6;

}

/* NAVBAR */

.navbar{

background:linear-gradient(90deg,#020617,#0f172a,#020617) !important;

backdrop-filter:blur(12px);

border-bottom:1px solid rgba(255,255,255,0.05);

transition:0.4s;

}


/* LOGO */

.navbar-brand{

font-size:26px;

font-weight:600;

letter-spacing:1px;

color:white !important;

transition:0.3s;

}

.navbar-brand:hover{

color:#22c55e !important;

transform:scale(1.05);

}


/* NAV LINKS */

.nav-link{

font-weight:500;

margin-left:15px;

color:#cbd5f5 !important;

position:relative;

transition:0.3s;

}


/* HOVER COLOR */

.nav-link:hover{

color:#22c55e !important;

}


/* ANIMATED UNDERLINE */

.nav-link::after{

content:"";

position:absolute;

width:0%;

height:2px;

left:0;

bottom:-4px;

background:#22c55e;

transition:0.3s;

}

.nav-link:hover::after{

width:100%;

}


/* ACTIVE PAGE */

.nav-link.active{

color:#22c55e !important;

}

.nav-link.active::after{

width:100%;

}


/* MOBILE MENU BUTTON */

.navbar-toggler{

border:none;

outline:none;

}

.navbar-toggler:focus{

box-shadow:none;

}


/* NAVBAR SHADOW ON SCROLL */

.navbar.scrolled{

box-shadow:0px 10px 30px rgba(0,0,0,0.6);

}


/* HERO */

.hero{

padding:120px 20px;

text-align:center;

background:radial-gradient(circle at top,#1e293b,#020617);

}

.hero h1{

font-size:48px;

font-weight:700;

margin-top:20px;

}

.hero p{

max-width:700px;

margin:auto;

color:#cbd5f5;

}


.hero-img{

max-width:360px;

border-radius:15px;

box-shadow:0px 20px 40px rgba(0,0,0,0.6);

transition:0.4s;

}

.hero-img:hover{

transform:scale(1.05);

}


/* BUTTON */

.btn-success{

background:#2563eb !important;   /* blue */

border:none;

padding:12px 25px;

font-weight:500;

border-radius:8px;

transition:0.3s;

}

.btn-success:hover{

background:#1e40af !important;   /* dark blue */

transform:translateY(-2px);

box-shadow:0px 8px 20px rgba(0,0,0,0.4);

}


/* FEATURE CARDS */

.feature-card{

background:linear-gradient(145deg,#1e293b,#0f172a);

border:none;

border-radius:12px;

overflow:hidden;

transition:0.35s;

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

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0px 20px 40px rgba(0,0,0,0.6);

}

.img-fluid{

width:100%;
height:auto;
display:block;

border-radius:14px;

box-shadow:0px 10px 30px rgba(0,0,0,0.6);

transition:all 0.4s ease;

border:1px solid rgba(255,255,255,0.05);

object-fit:cover;

}


/* hover animation */

.img-fluid:hover{

transform:scale(1.05);

box-shadow:0px 20px 50px rgba(0,0,0,0.8);

}

.card-img-top{
height:210px;
object-fit:cover;
}


.card-body h4{

font-weight:600;

margin-bottom:10px;

}

.card-body p{

color:#cbd5f5;

font-size:14px;

}


/* ABOUT SECTION */

section h2{

font-weight:600;

margin-bottom:20px;

}


section p{

color:#cbd5f5;

}


/* BENEFITS SECTION */

.col-md-4 h5{

font-weight:600;

margin-bottom:10px;

color:#22c55e;

}

.col-md-4 p{

color:#cbd5f5;

}


/* FOOTER */

footer{

background:#020617;

border-top:1px solid #1e293b;

color:#94a3b8;

}
.hero-img,
.prompt-img,
.example-img,
.practice-img{

width:100%;
max-width:100%;
height:auto;

display:block;

margin:auto;

border-radius:14px;

object-fit:cover;

}

/* RESPONSIVE */

@media (max-width:768px){

.hero h1{
font-size:32px;
}

.hero-img{
max-width:250px;
}

}
/* PLAYGROUND PAGE */

.playground-container{

margin-top:30px;
padding-bottom:60px;

}


/* HERO SECTION */

.hero{

padding:90px 20px 40px 20px;

}


/* HERO IMAGE */

.hero-img{

max-width:320px;
border-radius:14px;
box-shadow:0px 20px 40px rgba(0,0,0,0.6);
transition:0.4s;

}

.hero-img:hover{

transform:scale(1.05);

}


/* SECTION TEXT */

.playground-container p{

max-width:650px;
margin:auto;
color:#cbd5f5;

}


/* PROMPT TEXTAREA */

.prompt-box{

height:180px;
background:#1e293b;
color:white;

border:none;

padding:16px;

border-radius:12px;

font-size:15px;

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

}

.prompt-box:focus{

outline:none;

box-shadow:0px 0px 12px #22c55e;

}


/* OUTPUT BOX */

.output-box{

background:#1e293b;

min-height:180px;

padding:20px;

border-radius:12px;

color:#cbd5f5;

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

font-size:15px;

line-height:1.6;

}


/* BUTTONS */

.btn-success{

background:#22c55e;

border:none;

padding:10px 22px;

font-weight:500;

border-radius:8px;

}

.btn-success:hover{

background:#16a34a;

}

.btn-outline-light{

border-radius:8px;

}


/* EXAMPLE PROMPTS */

.example-prompts{

list-style:none;

padding-left:0;

margin-top:10px;

}

.example-prompts li{

cursor:pointer;

color:#22c55e;

margin-bottom:6px;

font-size:14px;

transition:0.3s;

}

.example-prompts li:hover{

color:#4ade80;

transform:translateX(6px);

}


/* HEADINGS */

.playground-container h4{

margin-bottom:14px;

font-weight:600;

}


/* ALIGN PROMPT + OUTPUT BOX */

.row.g-4{

align-items:stretch;

}


/* MOBILE */

@media(max-width:768px){

.hero{

padding:70px 20px 30px 20px;

}

.prompt-box{

height:140px;

}

.output-box{

margin-top:20px;

}

}

/* PROMPT TYPES PAGE */

.prompt-types-container{

margin-top:120px;

}

.intro-text{

max-width:700px;

margin:auto;

color:#cbd5f5;

margin-bottom:30px;

}

.prompt-img{

max-width:500px;

display:block;

margin:auto;

border-radius:14px;

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

}
/* PROMPT CONCEPT SECTION */

.concept-section{

margin-top:60px;

}

.concept-card{

background:linear-gradient(145deg,#1e293b,#0f172a);

padding:25px;

border-radius:12px;

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

transition:0.3s;

}

.concept-card:hover{

transform:translateY(-8px);

box-shadow:0px 20px 40px rgba(0,0,0,0.6);

}

.concept-card h4{

color:#22c55e;

margin-bottom:10px;

}

.concept-card p{

color:#cbd5f5;

font-size:14px;

}

/* PROMPT CARDS */

.prompt-card{

background:linear-gradient(145deg,#1e293b,#0f172a);

padding:25px;

border-radius:12px;

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

transition:0.3s;

}

.prompt-card:hover{

transform:translateY(-8px);

box-shadow:0px 20px 40px rgba(0,0,0,0.6);

}

.prompt-card h4{

color:#22c55e;

margin-bottom:10px;

}

.prompt-card p{

color:#cbd5f5;

font-size:14px;

}

/* PROMPT EXAMPLES PAGE */

.examples-container{

margin-top:120px;

}


.intro-text{

max-width:700px;

margin:auto;

color:#cbd5f5;

margin-bottom:30px;

}


.example-img{

max-width:550px;

display:block;

margin:auto;

border-radius:12px;

box-shadow:0px 15px 40px rgba(0,0,0,0.6);

}


/* EXAMPLE CARDS */

.example-card{

background:linear-gradient(145deg,#1e293b,#0f172a);

padding:25px;

border-radius:12px;

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

transition:0.3s;

}

.example-card:hover{

transform:translateY(-8px);

box-shadow:0px 20px 40px rgba(0,0,0,0.6);

}


/* PROMPT TEXT */

.prompt-text{

background:#020617;

padding:12px;

border-radius:8px;

font-weight:500;

margin-bottom:10px;

color:#22c55e;

}


/* WEAK PROMPT COLOR */

.example-card.weak{

border-left:4px solid #ef4444;

}


/* STRONG PROMPT COLOR */

.example-card.strong{

border-left:4px solid #22c55e;

}

/* BEST PRACTICES PAGE */

.practices-container{

margin-top:120px;

}


.practice-img{

max-width:550px;

display:block;

margin:auto;

border-radius:14px;

box-shadow:0px 15px 40px rgba(0,0,0,0.6);

}


.practice-card{

background:linear-gradient(145deg,#1e293b,#0f172a);

padding:25px;

border-radius:12px;

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

transition:0.3s;

}


.practice-card:hover{

transform:translateY(-8px);

box-shadow:0px 20px 40px rgba(0,0,0,0.6);

}


.practice-card h4{

color:#22c55e;

margin-bottom:10px;

}


.practice-card p{

color:#cbd5f5;

font-size:14px;

}

@media (max-width:768px){

.hero-img{

max-width:260px;
margin-bottom:20px;

}

.prompt-img,
.example-img,
.practice-img{

max-width:100%;
padding:0 10px;

}

.card-img-top{

height:180px;

}

.img-fluid{

margin-top:10px;

}

}

@media (max-width:576px){

.container{

padding-left:20px;
padding-right:20px;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

}

}
.prompt-img,
.example-img,
.practice-img{
width:100%;
max-width:100%;
height:auto;
display:block;
margin:auto;
}

@media (max-width:768px){

.hero-img{
max-width:240px;
margin-bottom:20px;
}

.card-img-top{
height:auto;
}

.prompt-img,
.example-img,
.practice-img{
width:100%;
max-width:100%;
}

}