/*
Theme Name: Lili Dominican Salon
Theme URI: https://devjoynal.com
Author: Joynal Abdin
Author URI: https://devjoynal.com
Description: A luxury burgundy and gold salon theme designed for Elementor editing. Includes a finished front page and Elementor-friendly full width template.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: lili-dominican-salon
*/

:root {
    --burgundy: #5b0618;
    --deep: #16070b;
    --gold: #c99a4a;
    --cream: #fff9f0;
    --text: #23181a;
    --muted: #6d5b5d;
}

/* 📱 গ্লোবাল রেসপন্সিভ রিসেট */
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* মোবাইলে সাইট যেন ডানে-বামে ফালতুভাবে না নড়ে */
    margin: 0;
    padding: 0;
}

body {
    font-family: Montserrat, Arial, sans-serif;
    background: var(--cream);
    color: var(--text);
}

h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: .02em;
}

img {
    max-width: 100%;
    height: auto;
}

/* লেআউট কন্টেইনার */
.wrap {
    max-width: 1180px;
    margin: auto;
    padding: 0 20px;
}

/* ১. শুরুতে হেডারের নরমাল ডিজাইন (শুরুতে ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট থাকবে এবং পেজের সাথে উপরে চলে যাবে) */
header.topbar {
    position: absolute; /* absolute দেওয়ার কারণে এটি ব্যানারের উপরে ভাসমান থাকবে এবং ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট দেখাবে */
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent; /* শুরুতে সম্পূর্ণ ট্রান্সপারেন্ট */
    transition: transform 0.3s ease-in-out;
}

/* ২. স্ক্রল করে নিচে নামার পর যখন জাভাস্ক্রিপ্ট 'sticky' ক্লাস যোগ করবে */
header.topbar.sticky {
    position: fixed; /* স্ক্রিনে ফিক্সড হয়ে যাবে */
    top:0px;
    background-color: #800020; /* স্টিকি অবস্থায় সলিড বারগান্ডি ব্যাকগ্রাউন্ড কালার */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: smoothScrollDown 0.4s ease-out forwards; /* উপর থেকে নেমে আসার অ্যানিমেশন */
}

/* ৩. উপর থেকে নিচে নামার অ্যানিমেশন ইফেক্ট */
@keyframes smoothScrollDown {
    0% {
        transform: translateY(-100%); /* শুরুতে স্ক্রিনের বাইরে লুকিয়ে থাকবে */
    }
    100% {
        transform: translateY(0); /* অ্যানিমেশন হয়ে নিচে নেমে আসবে */
    }
}

/* ==========================================================================
   ২. মোবাইল রেসপন্সিভ সিএসএস (২ লাইনের পারফেক্ট লেআউট)
   ========================================================================== */
@media (max-width: 768px) {
    header.topbar {
        top: 0 !important; /* টপ থেকে একদম ০ হবে */
    }

    /* মেইন কন্টেইনারকে ফ্লেক্স ডিরেকশন কলাম করা হলো যাতে ২টা লাইন তৈরি হয় */
    .wrap.nav {
        display: flex;
        flex-direction: column !important; /* ১ম লাইন ও ২য় লাইন লম্বালম্বি হবে */
        gap: 12px; /* দুই লাইনের মধ্যবর্তী গ্যাপ */
        padding: 12px 10px;
    }

    /* ১ম লাইন: লোগো, সোশ্যাল, বাটন ও কল আইকনকে পাশাপাশি ১ লাইনে রাখার জন্য একটি অদৃশ্য বা ভার্চুয়াল রো ট্রিক */
    .wrap.nav > div:first-child, /* লোগো ও সোশ্যাল কন্টেইনার */
    .wrap.nav .btn, 
    .wrap.nav a[href^="tel:"] {
        /* এই উপাদানগুলো ১ম লাইনে থাকবে */
    }

    /* আসলে এইচটিএমএল স্ট্রাকচার অনুযায়ী সব উপাদানকে ১ম লাইনে পাশাপাশি ছড়ানোর জন্য প্যারেন্ট ফ্লেক্স ট্রিক */
    .wrap.nav {
        flex-wrap: wrap !important;
        flex-direction: row !important; /* উপাদানগুলো পাশাপাশি বসবে */
        justify-content: space-between;
    }
	
/* একদম নতুন ক্লাসের জন্য সিএসএস */
.header-social-round-icons {
    display: flex !important;
    gap: 15px !important; 
    align-items: center !important;
}

.header-social-round-icons a {
    display: block !important;
    width: 45px !important;  
    height: 45px !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
}

.header-social-round-icons a:hover {
    transform: scale(1.08) !important;
}

/* ইমেজ দুটিকে গোল করার মেইন কোড */
.header-social-round-icons a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   
    border-radius: 50% !important;  /* ৫০% গোল করার জন্য */
}

    /* মেনু সেকশনকে জোর করে ২য় লাইনে নামিয়ে দেওয়া এবং পাশাপাশি স্ক্রোল করার ব্যবস্থা */
    .menu {
        display: flex !important; /* মোবাইলে মেনু শো করবে */
        width: 100% !important; /* পুরো প্রস্থ নিবে যাতে নিচে নেমে যায় */
        order: 99; /* এটিকে সবার নিচে (২য় লাইনে) পাঠানোর জন্য */
        justify-content: center; /* মেনুগুলো মাঝখানে থাকবে */
        gap: 12px; /* মেনুর ভেতরের লিঙ্কগুলোর দূরত্ব */
        flex-wrap: wrap; /* জায়গা না হলে পরের লাইনে ভাঙবে (অথবা স্ক্রোলেবল করা যাবে) */
        padding-top: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* ২ লাইনের মাঝে হালকা বর্ডার */
    }
	
	

	
	
    /* মোবাইলের মেনু লিঙ্কগুলোর সাইজ */
    .menu a {
        font-size: 13px !important;
        color: #fff !important;
        text-decoration: none;
    }

    /* ১ম লাইনের উপাদানগুলোর সাইজ অ্যাডজাস্টমেন্ট */
    .logo {
        width:60px !important;
        height: auto;
    }

    .top-social-icons {
        display: flex;
        gap: 6px;
    }

    .top-social-icons a {
        font-size: 11px !important;
        background: rgba(255, 255, 255, 0.2);
        padding: 4px 6px;
        border-radius: 4px;
    }

    .wrap.nav .btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
        white-space: nowrap;
    }

    .wrap.nav a[href^="tel:"] {
        font-size: 24px !important;
    }
}
/* ==========================================================================
   💇‍♂️ হেডার ও নেভিগেশন (ডেক্সটপ ফ্রেন্ডলি)
   ========================================================================== */
.topbar {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px 0;
    background: linear-gradient(180deg, rgba(30, 0, 8, .75), transparent);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    width: 170px;
}

.menu {
    display: flex;
    gap: 28px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, #f0c777, #ad7529);
    color: #fff;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 2px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    white-space: nowrap; /* লেখা যেন দুই লাইনে না ভাঙে */
}

/* হিরো সেকশন */
.hero {

    min-height: 900px;
    background-image: url('https://lilidominicanhairsal6864.live-website.com/wp-content/uploads/2026/06/Home-Page-Banner.png?v=2') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    color: #fff;
    padding-top: 100px;
}

.hero-text {
    max-width: 560px;
opacity:0;
}

.eyebrow {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.hero h1 {
    font-size: 70px;
    line-height: .95;
    margin: 10px 0;
}

.script {
    font-family: 'Brush Script MT', cursive;
    color: var(--gold);
    font-size: 86px;
    display: block;
    margin-top: -18px;
}

.hero p {
    font-size: 19px;
    line-height: 1.6;
}

.play {
    margin-left: 22px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
}

/* ৩/৪ কলামের ফিচার সেকশন */
.features {
    margin-top: -58px;
    position: relative;
    z-index: 2;
}

.feature-grid {
    background: linear-gradient(135deg, #3c0712, #13080a);
    border: 1px solid var(--gold);
    box-shadow: 0 18px 35px rgba(0,0,0,.25);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.feature {
    padding: 30px;
    color: #fff;
    border-right: 1px solid rgba(201,154,74, .35);
}

.feature:last-child {
    border-right: 0;
}

.icon {
    font-size: 35px;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
}

.feature h4 {
    margin: 0 0 8px;
    color: var(--gold);
    text-transform: uppercase;
}

.feature p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* সেকশন ও টাইটেল */
.section {
    padding: 70px 0;
}

.center {
    text-align: left;
}

.small-title {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 800;
}

.section h2 {
    font-size: 36px;
    margin: 8px 0 28px;
}

/* সার্ভিস সেকশন */
.services {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.card {
    background: #fff;
    border: 1px solid #e5d8c9;
    text-align: center;
    box-shadow: 0 8px 22px rgba(35, 20, 15, .06);
}

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

.badge {
    width: 56px;
    position: relative; /* 👈 এই লাইনটি মাস্ট লাগবে, তাহলেই z-index একটিভ হবে */
    z-index: 999 !important;
    height: 56px;
    border-radius: 50%;
    background: var(--burgundy);
    color: #fff;
    display: grid;
    place-items: center;
    margin: -28px auto 12px;
    border: 2px solid var(--gold);
    font-size: 24px;
}

.card h3 {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.card p {
    font-size: 13px;
    line-height: 1.45;
    padding: 0 15px;
}

.card a {
    display: block;
    color: var(--burgundy);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 14px 0 20px;
}

/* অ্যাবাউট সেকশন */
.about {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: center;
}

.about img {
    width: 100%;
    border-radius: 2px;
}

.about-copy {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 35px;
    align-items: center;
}

.about h2 {
    margin: 0;
    font-size: 32px;
}

.about .script2 {
    font-family: 'Brush Script MT', cursive;
    color: var(--burgundy);
    font-size: 48px;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-weight: 900;
    text-transform: uppercase;
}

.benefit span {
    background: #dfbc77;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* ট্রান্সফর্মেশন/গ্যালারি */
.transform {
    background: linear-gradient(135deg, #620617, #2b030a);
    color: #fff;
    padding: 38px 0;
    text-align: center;
}

.transform h2 {
    color: var(--gold);
    font-family: 'Brush Script MT', cursive;
    font-size: 42px;
    margin: 0 0 20px;
}

.transform img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--gold);
}

/* রিভিউ/টেস্টিমোনিয়াল */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review {
    background: #fff;
    border: 1px solid #e5d8c9;
    padding: 22px;
}

.stars {
    color: var(--gold);
    letter-spacing: 2px;
}

/* ফুটার সেকশন (৪ কলাম) */
.footer {
    background: linear-gradient(135deg, #5b0618, #1a0509);
    color: #fff;
    padding: 48px 0 18px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
    gap: 26px;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer li {
    list-style: none;
    margin: 7px 0;
}

.footer ul {
    padding: 0;
    margin: 0;
}

.cta-box {
    border: 1px solid var(--gold);
    padding: 22px;
    text-align: center;
}

.copyright {
    text-align: center;
    margin-top: 30px;
    color: #d8c2bd;
    font-size: 12px;
}


/* ==========================================================================
   📱 সম্পূর্ণ রেসপন্সিভ মিডিয়া কোয়েরি (গ্লোবাল ব্রেকপয়েন্ট সিস্টেম)
   ========================================================================== */

/* 💻 ট্যাবলেট এবং ছোট স্ক্রিনের জন্য (১০২৪ পিক্সেল এবং তার নিচে) */
@media (max-width: 1024px) {
    .wrap {
        padding: 0 24px;
    }
    .services {
        grid-template-columns: repeat(3, 1fr); /* ৬ কলাম ছোট ল্যাপটপে ৩ কলাম হবে */
    }
}

/* 📠 ট্যাবলেট পোর্ট্রেট মোডের জন্য (৯০০ পিক্সেল এবং তার নিচে) */
@media (max-width: 900px) {
    /* 🛠️ হেডারের আমূল পরিবর্তন */
    .topbar {
        position: relative; /* অ্যাবসোলিউট চেঞ্জ করে রিলেティブ করা হলো যাতে হিরোর লেখা না ঢেকে যায় */
        background: var(--deep);
        padding: 16px 0;
    }
    
    .nav {
        flex-wrap: wrap; /* কন্টেন্ট ওভারফ্লো ঠেকাতে */
        justify-content: space-between;
        gap: 15px;
    }
    
    /* লোগো আর বাটনকে পাশাপাশি পারফেক্ট রাখার জন্য */
    .logo {
        width: 140px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 12px;
    }

    /* ডেক্সটপ মেনু হাইড না করে প্রফেশনাল মোবাইল লিঙ্ক-বারে রূপান্তর */
    .menu {
        display: flex; /* ডিলিট বা হাইড না করে ফ্লেক্স রাখা হলো */
        order: 3; /* লোগো আর বাটনের ঠিক নিচে বসবে */
        width: 100%;
        justify-content: center;
        gap: 12px;
        padding-top: 15px;
        border-top: 1px solid rgba(201,154,74,0.15);
        flex-wrap: wrap;
    }
    
    .menu a {
        font-size: 12px;
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 4px;
    }
    
    .section {
        padding: 50px 0;
    }
    
    /* 🛠️ ফিক্সড: হিরো সেকশনেও নতুন ইমেজ লিঙ্ক আপডেট করা হলো এবং ডার্ক গ্রেডিয়েন্ট বাদ দেওয়া হলো */
    .hero {
    min-height: 220px;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
    /* ফিক্সড: ইমেজের আগে একটি কালো ওভারলে (linear-gradient) যুক্ত করা হয়েছে */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url('https://lilidominicanhairsal6864.live-website.com/wp-content/uploads/2026/06/Home-Page-Banner.png?v=2')   background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
    
    .hero-text {
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    
    .hero h1 {
        font-size: 46px;
        line-height: 1.1;
    }
    
    .script {
        font-size: 62px;
        margin-top: 5px;
    }
    
    .hero p {
        font-size: 16px;
    }
    
    .play {
        display: block;
        margin-left: 0;
        margin-top: 15px;
    }
    
    /* ফিচার বক্স ভাঙন রোধ */
    .features {
        margin-top: 0;
        padding: 30px 0 0;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr); /* ৪ কলাম ট্যাবলেটে ২ কলাম */
    }
    
    .feature {
        border-right: 0;
        border-bottom: 1px solid rgba(201, 154, 74, .25);
    }
    
    /* গ্রিডগুলোকে ২ কলাম বা নিচে নিচে নামানো */
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about, .about-copy, .testimonials {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* ফুটার ৪ কলাম থেকে ২ কলাম */
        gap: 35px;
    }
}

/* 📱 পিওর মোবাইল স্ক্রিনের জন্য (৬০০ পিক্সেল এবং তার নিচে) */
@media (max-width: 600px) {
    .wrap {
        padding: 0 15px;
    }
    
    .hero h1 {
        font-size: 34px !important;
    }
    
    .script {
        font-size: 46px !important;
    }
    
    .section h2 {
        font-size: 26px;
    }
    
    /* মোবাইলে সব গ্রিড এবং জটিল কলাম ১০০% সিঙ্গেল কলাম */
    .feature-grid, .services, .footer-grid {
        grid-template-columns: 1fr !important;
    }
    
    .feature {
        border-bottom: 1px solid rgba(201, 154, 74, .25) !important;
        text-align: left;
        padding: 25px;
    }
    
    .feature:last-child {
        border-bottom: 0 !important;
    }
    
    .footer {
        text-align: left; /* মোবাইলে ফুটারের লেখা সেন্টারে প্রফেশনাল লাগে */
    }
    
    .menu {
        gap: 8px;
    }
    
    .menu a {
        font-size: 11px;
        padding: 5px 8px;
    }
}