/* ===========================================
   BEAUTY GIRL PHOTOS
   STYLE.CSS PART - 1
=========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f7f8fc;

color:#222;

padding-bottom:90px;

}

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}

.section{

padding:18px;

}

/* HEADER */

.header{

position:sticky;

top:0;

left:0;

width:100%;

background:#fff;

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 18px;

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

z-index:999;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo i{

width:50px;

height:50px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#ff4fa1;

color:#fff;

font-size:22px;

}

.logo h2{

font-size:20px;

font-weight:700;

color:#ff2d8d;

}

.logo span{

font-size:12px;

color:#777;

}

.header-right{

display:flex;

align-items:center;

gap:10px;

}

.search-icon{

width:42px;

height:42px;

border-radius:50%;

background:#f3f3f3;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

cursor:pointer;

}

.login-btn{

background:#ff4fa1;

color:#fff;

padding:10px 18px;

border-radius:25px;

font-size:14px;

font-weight:600;

}

.register-btn{

background:#6c63ff;

color:#fff;

padding:10px 18px;

border-radius:25px;

font-size:14px;

font-weight:600;

}

.profile-btn{

background:#00b894;

color:#fff;

padding:10px 18px;

border-radius:25px;

font-size:14px;

}

/* HERO */

.hero{

padding:20px;

background:linear-gradient(135deg,#ff4fa1,#6c63ff);

color:#fff;

border-radius:0 0 25px 25px;

}

.hero h1{

font-size:30px;

font-weight:700;

margin-top:10px;

}

.hero p{

margin-top:12px;

line-height:1.8;

font-size:15px;

opacity:.95;

}

.welcome{

display:inline-block;

background:#ffffff25;

padding:8px 15px;

border-radius:20px;

font-size:14px;

}

.hero-right{

margin-top:25px;

text-align:center;

}

.hero-right img{

width:250px;

margin:auto;

}

/* SEARCH */

.search-box{

margin-top:22px;

background:#fff;

display:flex;

border-radius:35px;

overflow:hidden;

}

.search-box input{

flex:1;

border:none;

outline:none;

padding:15px;

font-size:15px;

}

.search-box button{

width:60px;

border:none;

background:#ff4fa1;

color:#fff;

font-size:18px;

cursor:pointer;

}

/* STATS */

.stats{

display:grid;

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

gap:12px;

margin-top:25px;

}

.stats div{

background:#ffffff20;

padding:15px;

text-align:center;

border-radius:15px;

backdrop-filter:blur(8px);

}

.stats h3{

font-size:22px;

}

.stats span{

font-size:13px;

}

/* QUICK MENU */

.quick-menu{

display:grid;

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

gap:15px;

padding:20px;

}

.quick-menu a{

background:#fff;

padding:18px;

border-radius:18px;

text-align:center;

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

transition:.3s;

}

.quick-menu a:hover{

transform:translateY(-4px);

}

.quick-menu i{

display:block;

font-size:24px;

margin-bottom:10px;

color:#ff4fa1;

}

.quick-menu span{

font-size:14px;

font-weight:600;

}
/* ===========================================
   STYLE.CSS PART - 2
   AI TOOLS + CATEGORIES + PHOTO CARDS
===========================================*/

/* SECTION TITLE */

.section-title{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.section-title h2{
font-size:20px;
font-weight:700;
color:#222;
}

.section-title a{
color:#ff4fa1;
font-size:14px;
font-weight:600;
}

/* AI GRID */

.ai-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.tool-card{
background:#fff;
border-radius:18px;
padding:18px 10px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.08);
transition:.3s;
cursor:pointer;
}

.tool-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.tool-card i{
font-size:32px;
margin-bottom:12px;
color:#ff4fa1;
}

.tool-card span{
display:block;
font-size:14px;
font-weight:600;
}

/* CATEGORY */

.category-slider{
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:10px;
scrollbar-width:none;
}

.category-slider::-webkit-scrollbar{
display:none;
}

.category-slider a{
white-space:nowrap;
background:#fff;
padding:12px 18px;
border-radius:30px;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,.08);
transition:.3s;
}

.category-slider a:hover{
background:#ff4fa1;
color:#fff;
}

/* PHOTO GRID */

.photo-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.photo-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:.3s;
}

.photo-card:hover{
transform:translateY(-5px);
}

.photo-card img{
width:100%;
height:240px;
object-fit:cover;
}

/* PHOTO INFO */

.photo-info{
padding:12px;
}

.photo-info h3{
font-size:15px;
font-weight:600;
margin-bottom:10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.photo-icons{
display:flex;
justify-content:space-between;
align-items:center;
}

.photo-icons span{
font-size:13px;
color:#666;
display:flex;
align-items:center;
gap:5px;
}

.photo-icons a{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#ff4fa1;
color:#fff;
font-size:16px;
transition:.3s;
}

.photo-icons a:hover{
background:#6c63ff;
}

/* BADGES */

.badge{
position:absolute;
top:10px;
left:10px;
background:#ff4fa1;
color:#fff;
padding:6px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.photo-card{
position:relative;
}

/* PREMIUM BADGE */

.premium{
background:gold;
color:#000;
}

/* NEW BADGE */

.new{
background:#00b894;
}

/* TRENDING BADGE */

.trending{
background:#ff3d00;
}

/* LOAD MORE */

.load-more{
text-align:center;
margin-top:25px;
}

.load-more a{
display:inline-block;
padding:14px 28px;
background:#ff4fa1;
color:#fff;
border-radius:30px;
font-weight:600;
transition:.3s;
}

.load-more a:hover{
background:#6c63ff;
}

/* CARD ANIMATION */

.photo-card,
.tool-card,
.category-slider a{
transition:all .35s ease;
}

/* ===========================================
   STYLE.CSS PART - 3
   AI BANNER + FEATURES + FOOTER + BOTTOM NAV
===========================================*/

/* AI BANNER */

.ai-banner{
padding:20px;
display:flex;
flex-direction:column;
gap:20px;
}

.banner-card{
background:linear-gradient(135deg,#ff4fa1,#6c63ff);
border-radius:22px;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.banner-card.pink{
background:linear-gradient(135deg,#ff7a59,#ff2d8d);
}

.banner-text h2{
font-size:22px;
margin-bottom:10px;
}

.banner-text p{
font-size:14px;
line-height:1.7;
opacity:.95;
margin-bottom:15px;
}

.banner-btn{
display:inline-block;
background:#fff;
color:#ff2d8d;
padding:12px 22px;
border-radius:30px;
font-weight:700;
transition:.3s;
}

.banner-btn:hover{
background:#222;
color:#fff;
}

.banner-icon i{
font-size:70px;
opacity:.25;
}

/* FEATURES */

.features{
padding:20px;
}

.features h2{
text-align:center;
font-size:26px;
margin-bottom:20px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.feature-box{
background:#fff;
padding:20px;
border-radius:20px;
text-align:center;
box-shadow:0 5px 18px rgba(0,0,0,.08);
transition:.3s;
}

.feature-box:hover{
transform:translateY(-5px);
}

.feature-box i{
font-size:34px;
color:#ff4fa1;
margin-bottom:12px;
}

.feature-box h3{
font-size:18px;
margin-bottom:8px;
}

.feature-box p{
font-size:14px;
color:#666;
line-height:1.6;
}

/* FOOTER */

.footer{
margin-top:40px;
padding:35px 20px 100px;
background:#181818;
color:#fff;
text-align:center;
}

.footer h3{
font-size:24px;
margin-bottom:12px;
}

.footer p{
font-size:14px;
color:#bbb;
line-height:1.8;
}

.social-icons{
display:flex;
justify-content:center;
gap:15px;
margin:25px 0;
}

.social-icons a{
width:50px;
height:50px;
border-radius:50%;
background:#333;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
transition:.3s;
}

.social-icons a:hover{
background:#ff4fa1;
}

.copyright{
margin-top:15px;
font-size:13px;
color:#888;
}

/* BOTTOM NAVIGATION */

.bottom-nav{
position:fixed;
left:0;
bottom:0;
width:100%;
height:75px;
background:#fff;
display:flex;
justify-content:space-around;
align-items:center;
box-shadow:0 -5px 20px rgba(0,0,0,.12);
z-index:999;
}

.bottom-nav a{
display:flex;
flex-direction:column;
align-items:center;
font-size:13px;
color:#666;
transition:.3s;
}

.bottom-nav a i{
font-size:22px;
margin-bottom:4px;
}

.bottom-nav a.active{
color:#ff4fa1;
}

.upload-btn{
width:65px;
height:65px;
border-radius:50%;
background:linear-gradient(135deg,#ff4fa1,#6c63ff);
display:flex!important;
justify-content:center;
align-items:center;
color:#fff!important;
margin-top:-35px;
box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.upload-btn i{
font-size:28px!important;
margin:0!important;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-thumb{
background:#ff4fa1;
border-radius:20px;
}

/* RESPONSIVE */

@media(max-width:768px){

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

.hero-right img{
width:200px;
}

.ai-grid{
grid-template-columns:repeat(2,1fr);
}

.photo-grid{
grid-template-columns:repeat(2,1fr);
}

.feature-grid{
grid-template-columns:1fr;
}

.banner-card{
flex-direction:column;
text-align:center;
gap:20px;
}

.banner-icon i{
font-size:55px;
}

.logo h2{
font-size:18px;
}

.login-btn,
.register-btn{
padding:8px 12px;
font-size:12px;
}

}

@media(max-width:480px){

.photo-card img{
height:180px;
}

.hero{
padding:18px;
}

.stats{
grid-template-columns:repeat(2,1fr);
}

.quick-menu{
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.tool-card{
padding:15px 8px;
}

.tool-card i{
font-size:26px;
}

.bottom-nav a span{
font-size:11px;
}

}