/*
Theme Name: astra-child
Template: astra
Version: 1.0
Author: Ghazan Khan Blogger
Description: Child theme for Ruby’s Makeup School Pakistan | Beautician Courses, Beauty Salon & Ladies Suits
*/


/* =================================
ROOT VARIABLES
================================= */

:root{

--primary:#FD1C03;
--dark:#111;
--light:#ffffff;
--grey:#E8E8E8;
--accent:#facc15;

--shadow-light:0 10px 30px rgba(0,0,0,0.08);
--shadow-hover:0 20px 40px rgba(0,0,0,0.12);

}


/* =================================
GLOBAL
================================= */

html{
box-sizing:border-box;
scroll-behavior:smooth;
}

*,*::before,*::after{
box-sizing:inherit;
}

body{
margin:0;
font-family:'Poppins',sans-serif;
background:var(--grey);
padding-top:56px;
color:#333;
line-height:1.6;
}


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

.custom-header{
position:fixed;
top:0;
left:0;
right:0;
height:56px;
background:var(--dark);
z-index:9999;

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

padding:0 15px;
}

.header-inner{
position:relative;
width:100%;
max-width:1200px;

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


/* LOGO */

.logo-center{
position:absolute;
left:50%;
transform:translateX(-50%);
}

.yyyyy {
color:#fff;
font-weight:700;
font-size:18px;
text-decoration:none;
letter-spacing:1px;
}

.brand-text{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px; /* space between logo and text */
  text-decoration:none;
}

.logo-img{
  height:20px;
  width:auto;
}


/* HEADER BUTTONS */

.menu-toggle,
.search-toggle{

font-family:Arial,sans-serif;
font-size:22px;
color:#fff;

background:none;
border:none;

cursor:pointer;
transition:all .3s ease;

}

.menu-toggle:hover,
.search-toggle:hover{
opacity:.7;
}


/* =================================
SLIDE MENU
================================= */

.slide-menu{

position:fixed;
top:0;
left:-260px;

width:250px;
height:100%;

background:var(--primary);

padding-top:70px;

transition:.35s ease;
z-index:998;

}

.slide-menu.active{
left:0;
}

.mobile-menu{
list-style:none;
padding:0;
margin:0;
}

.mobile-menu li{
padding:12px 22px;
}

.mobile-menu a{
color:#fff;
text-decoration:none;
font-weight:500;
display:block;
transition:.3s;
}

.mobile-menu a:hover{
opacity:.7;
}


/* =================================
SEARCH BOX
================================= */

.search-box{

position:absolute;
top:45px;
right:15px;

background:var(--dark);
padding:10px;

display:none;
z-index:998;

border-radius:6px;

}

.search-box.active{
display:block;
}

.search-box input{

width:200px;
padding:8px;

border:none;
outline:none;

}


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

.hero{

height:90vh;

background:url("https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9")
center/cover;

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

text-align:center;

position:relative;
color:#fff;

}

.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
);

}

.hero-content{
position:relative;
z-index:2;
}

.hero h1{

font-family:'Playfair Display',serif;
font-size:52px;
margin-bottom:15px;

}

.hero p{

font-size:20px;
margin-bottom:30px;

}

.hero-buttons a{
margin:10px;
}


/* =================================
BUTTONS
================================= */

.btn-primary{

background:var(--primary);
color:#fff;

padding:14px 30px;

border-radius:30px;
text-decoration:none;
font-weight:500;

transition:all .3s ease;

}

.btn-primary:hover{

transform:translateY(-2px);
box-shadow:var(--shadow-hover);

}

.btn-secondary{

border:2px solid #fff;
color:#fff;

padding:12px 28px;

border-radius:30px;
text-decoration:none;

transition:all .3s ease;

}

.btn-secondary:hover{

background:#fff;
color:#000;

}


/* =================================
CONTENT WRAPPER
================================= */

.content-wrapper{

max-width:900px;
width:90%;

margin:60px auto;

padding:50px 40px;

background:#fff;

border-radius:18px;
box-shadow:var(--shadow-light);

}

.content-wrapper h2{

font-size:24px;
margin:40px 0 15px;

border-left:8px solid var(--primary);
padding-left:12px;

}

.content-wrapper ul{
list-style:none;
padding:0;
}

.content-wrapper ul li{

padding-left:25px;
position:relative;
margin-bottom:10px;

}

.content-wrapper ul li::before{

content:"✓";
position:absolute;
left:0;
color:#FD1C03;

}


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

.container{

width:85%;
margin:auto;

display:flex;
align-items:center;

gap:40px;
padding:80px 0;

background:#fafafa;

}


/* =================================
ABOUT SECTION
================================= */

.about-image img{

width:100%;
border-radius:12px;

box-shadow:var(--shadow-light);

}


/* =================================
COURSES
================================= */

.courses{

padding:80px 10%;
text-align:center;
background:var(--grey);

}

.courses h2{

font-family:'Playfair Display',serif;
margin-bottom:40px;

}

.course-grid{

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

}

.course-card{

background:#fff;

padding:30px;

border-radius:12px;

box-shadow:var(--shadow-light);

transition:all .35s ease;

}

.course-card:hover{

transform:translateY(-10px);
box-shadow:var(--shadow-hover);

}


/* =================================
GALLERY
================================= */

.gallery{

padding:80px 10%;
text-align:center;
background:#fff;

}

.gallery h2{

margin-bottom:40px;
font-family:'Playfair Display',serif;

}

.gallery-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;

}

.gallery img{

width:100%;
border-radius:10px;

transition:all .35s ease;

}

.gallery img:hover{

transform:scale(1.05);

}


/* =================================
TESTIMONIAL
================================= */

.testimonial{

padding:80px 20%;
text-align:center;

background:#fff;
font-style:italic;

}

.testimonial h2{

font-family:'Playfair Display',serif;
margin-bottom:20px;

}


/* =================================
CTA
================================= */

.cta{

padding:80px 10%;
text-align:center;

background:var(--primary);
color:#fff;

}


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

footer{

text-align:center;
padding:40px 20px;

background:#000;
color:#ddd;

font-size:14px;

}


/* =================================
FILTER BUTTONS
================================= */

.category-filters{

display:flex;
flex-wrap:wrap;

gap:12px;

justify-content:center;

margin:40px 0;

}

.filter-btn{

padding:10px 20px;

background:#111;
color:#fff;

border-radius:30px;

text-decoration:none;
font-weight:600;

transition:.3s;

}

.filter-btn:hover{

background:var(--accent);
color:#111;

}


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

@media(max-width:768px){

.container{

flex-direction:column;
padding:50px 20px;

}

.hero{
height:70vh;
}

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

.hero p{
font-size:16px;
}

}