/*==================================================
QUEEN MARIE TATTOOS
Luxury App
STYLE.CSS
PART 1
==================================================*/

/*==================================
GOOGLE FONT
==================================*/

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

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050505;

    color:#ffffff;

    overflow-x:hidden;

    min-height:100vh;

}

/*==================================
ROOT COLORS
==================================*/

:root{

    --black:#050505;
    --black-light:#101010;

    --rose:#ff5ea8;
    --rose-light:#ff8fc4;

    --gold:#f6d28d;
    --rosegold:#d6a06d;

    --white:#ffffff;

    --text:#ececec;

    --glass:rgba(18,18,18,.88);

    --border:rgba(214,160,109,.35);

    --shadow:
        0 12px 30px rgba(0,0,0,.45);

    --transition:.35s ease;

}

/*==================================
BACKGROUND
==================================*/

body{

background:

radial-gradient(circle at top left,
rgba(255,94,168,.08),
transparent 35%),

radial-gradient(circle at top right,
rgba(214,160,109,.10),
transparent 35%),

#050505;

}

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

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea,
select{

    font-family:inherit;

    outline:none;

}

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

.app-container{

    width:100%;

    max-width:900px;

    margin:auto;

    padding:0 20px 120px;

}

/*==================================
COMMON SPACING
==================================*/

section{

    margin-bottom:28px;

}

/*==================================
HEADINGS
==================================*/

h1{

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    color:#ffffff;

}

h2{

    font-size:28px;

    font-weight:600;

    line-height:1.3;

    color:#ffffff;

}

h3{

    font-size:20px;

    font-weight:600;

    color:#ffffff;

}

p{

    font-size:17px;

    line-height:1.9;

    color:#d9d9d9;

}

/*==================================
SCROLLBAR
==================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--rosegold),
        var(--rose)
    );

    border-radius:20px;

}

/*==================================
TEXT SELECTION
==================================*/

::selection{

    background:var(--rose);

    color:#ffffff;

}

/*==================================================
PART 2
HEADER
LOGO
PAGE TITLE
==================================================*/

/*==================================
BACK BUTTON
==================================*/

.page-header{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:24px 0 10px;

}

.back-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--rosegold);

    font-size:17px;

    font-weight:600;

    transition:var(--transition);

}

.back-btn i{

    font-size:18px;

}

.back-btn:hover{

    color:var(--gold);

    transform:translateX(-4px);

}


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

.header-logo{

    display:block;

    width:600px;

    max-width:95%;

    height:auto;

    margin:18px auto 20px;

    border:none;

    background:none;

    object-fit:contain;

    filter:
        drop-shadow(0 0 10px rgba(255,94,168,.18))
        drop-shadow(0 0 24px rgba(214,160,109,.25));

}

/*==================================
PAGE TITLE
==================================*/

.page-title{

    text-align:center;

    margin-bottom:45px;

}

.page-title h1{

    font-size:42px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:16px;

}

.page-title p{

    max-width:650px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:#d6d6d6;

}

/*==================================
BOOKING HERO
==================================*/

.booking-hero{

    text-align:center;

    margin-bottom:45px;

}

.booking-hero h1{

    font-size:42px;

    margin-bottom:16px;

}

.booking-hero p{

    max-width:650px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:#d6d6d6;

}

/*==================================
DIVIDER
==================================*/

.hero-divider{

    width:90px;

    height:4px;

    margin:30px auto 0;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--rose),
        var(--rosegold)
    );

    box-shadow:

    0 0 15px rgba(255,94,168,.35);

}

/*==================================================
PART 3
GLASS CARDS
FEATURES
TIMELINE
==================================================*/

/*==================================
GLASS CARD
==================================*/

.glass-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:28px;

    padding:38px;

    margin-bottom:32px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(18px);

    transition:var(--transition);

}

.glass-card:hover{

    border-color:var(--gold);

    transform:translateY(-4px);

    box-shadow:

    0 18px 45px rgba(0,0,0,.45),

    0 0 20px rgba(214,160,109,.15);

}

/*==================================
CARD HEADINGS
==================================*/

.glass-card h2{

    text-align:center;

    margin-bottom:18px;

    font-size:30px;

    font-weight:700;

}

.glass-card p{

    text-align:center;

    max-width:700px;

    margin:0 auto 30px;

}

/*==================================
LISTS
==================================*/

.aftercare-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.aftercare-list li{

    padding:18px 22px;

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

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    font-size:17px;

    line-height:1.8;

    transition:.30s ease;

}

.aftercare-list li:hover{

    border-color:var(--gold);

    background:rgba(214,160,109,.08);

}

/*==================================
FEATURE GRID
==================================*/

.feature-grid{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

.feature-box{

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

    border:1px solid rgba(255,255,255,.05);

    border-radius:22px;

    padding:28px;

    text-align:center;

    transition:var(--transition);

}

.feature-box:hover{

    border-color:var(--gold);

    transform:translateY(-4px);

}

.feature-box i{

    font-size:34px;

    color:var(--rosegold);

    margin-bottom:18px;

}

.feature-box h3{

    margin-bottom:12px;

    font-size:22px;

}

.feature-box p{

    margin:0;

    font-size:16px;

    line-height:1.7;

}

/*==================================
TIMELINE
==================================*/

.timeline{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.timeline-item{

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

    border-left:4px solid var(--rosegold);

    border-radius:18px;

    padding:24px;

}

.timeline-item h3{

    margin-bottom:10px;

    color:var(--gold);

}

.timeline-item p{

    margin:0;

    text-align:left;

}

/*==================================
PROMO CODE
==================================*/

.promo-code-card{

    text-align:center;

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

    border:1px solid rgba(255,255,255,.05);

    border-radius:24px;

    padding:35px;

    margin-top:25px;

}

.promo-code-card h1{

    font-size:42px;

    letter-spacing:6px;

    color:var(--gold);

    margin:20px 0;

}

/*==================================
PROGRESS CARD
==================================*/

.progress-card{

    text-align:center;

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

    border:1px solid rgba(255,255,255,.05);

    border-radius:22px;

    padding:30px;

    margin-top:30px;

}

.progress-card progress{

    width:100%;

    height:14px;

    margin:18px 0;

}

/*==================================
EMPTY REVIEWS
==================================*/

.empty-reviews{

    text-align:center;

    padding:40px 20px;

}

.empty-reviews i{

    font-size:54px;

    color:var(--rosegold);

    margin-bottom:20px;

}

.empty-reviews h3{

    margin-bottom:15px;

}

/*==================================================
PART 4
FORMS
INPUTS
BUTTONS
==================================================*/

/*==================================
FORMS
==================================*/

form{

    width:100%;

    margin-top:30px;

}

.form-group{

    margin-bottom:26px;

}

.form-row{

    display:grid;

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

    gap:22px;

}

/*==================================
LABELS
==================================*/

.form-group label{

    display:block;

    margin-bottom:12px;

    font-size:16px;

    font-weight:600;

    color:var(--gold);

    letter-spacing:.4px;

}

/*==================================
INPUTS
==================================*/

input,
select,
textarea{

    width:100%;

    padding:18px 20px;

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    color:#ffffff;

    font-size:17px;

    transition:var(--transition);

}

input::placeholder,
textarea::placeholder{

    color:#a7a7a7;

}

textarea{

    resize:vertical;

    min-height:160px;

}

select{

    cursor:pointer;

}

/*==================================
FOCUS
==================================*/

input:focus,
select:focus,
textarea:focus{

    border-color:var(--gold);

    box-shadow:

    0 0 18px rgba(214,160,109,.18);

}

/*==================================
CHECKBOX
==================================*/

.checkbox-group{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:30px 0;

    line-height:1.8;

    color:#d9d9d9;

}

.checkbox-group input{

    width:20px;

    height:20px;

    margin-top:3px;

}

/*==================================
FORM NOTES
==================================*/

.form-note{

    margin-top:10px;

    font-size:14px;

    color:#bfbfbf;

    line-height:1.7;

}

/*==================================
BUTTON ROWS
==================================*/

.hero-buttons,
.contact-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

    margin-top:30px;

}

/*==================================
PRIMARY BUTTON
==================================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:220px;

    padding:18px 30px;

    background:linear-gradient(
        135deg,
        var(--rose),
        var(--rosegold)
    );

    color:#ffffff;

    border-radius:18px;

    font-size:17px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:

    0 10px 25px rgba(214,160,109,.25);

}

.primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 16px 35px rgba(214,160,109,.35);

}

/*==================================
SECONDARY BUTTON
==================================*/

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:220px;

    padding:18px 30px;

    background:transparent;

    border:2px solid var(--rosegold);

    color:var(--gold);

    border-radius:18px;

    font-size:17px;

    font-weight:600;

    transition:var(--transition);

}

.secondary-btn:hover{

    background:rgba(214,160,109,.08);

    border-color:var(--gold);

    transform:translateY(-3px);

}

/*==================================
FULL WIDTH BUTTON
==================================*/

.booking-submit{

    width:100%;

    margin-top:20px;

}

/*==================================
FILE INPUT
==================================*/

input[type="file"]{

    padding:16px;

    cursor:pointer;

}

/*==================================
DATE/TIME
==================================*/

input[type="date"],
input[type="time"]{

    color:#ffffff;

}

/*==================================================
PART 5
NAVIGATION
GALLERY
NOTIFICATIONS
ANIMATIONS
==================================================*/

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

.floating-buttons{

    position:fixed;

    right:22px;

    bottom:95px;

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:999;

}

.floating-btn{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--rose),
        var(--rosegold)
    );

    color:#fff;

    font-size:22px;

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

    transition:var(--transition);

}

.floating-btn:hover{

    transform:translateY(-4px) scale(1.08);

}

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

.bottom-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    background:#0b0b0b;

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

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:12px 0;

    z-index:1000;

    backdrop-filter:blur(18px);

}

.bottom-nav a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    color:#9d9d9d;

    font-size:13px;

    transition:.30s;

}

.bottom-nav i{

    font-size:21px;

}

.bottom-nav a.active{

    color:var(--gold);

}

.bottom-nav a:hover{

    color:var(--rose);

}

/*==================================
NOTIFICATION
==================================*/

.notification{

    position:fixed;

    left:50%;

    transform:translateX(-50%);

    top:25px;

    background:#111;

    color:#fff;

    padding:16px 26px;

    border-radius:16px;

    border:1px solid var(--gold);

    opacity:0;

    pointer-events:none;

    transition:.35s;

    z-index:9999;

}

.notification.show{

    opacity:1;

}

/*==================================
LOADER
==================================*/

#loader{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-spinner{

    width:60px;

    height:60px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid var(--rose);

    border-radius:50%;

    animation:spin .9s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

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

.gallery-grid{

display:grid;

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

gap:20px;

margin-top:20px;

}

.gallery-item{

overflow:hidden;

border-radius:24px;

background:#111;

}

.gallery-item img{

width:100%;

height:280px;

object-fit:cover;

display:block;

cursor:pointer;

transition:.4s;

}

.gallery-item:hover img{

transform:scale(1.05);

}

@media(max-width:992px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

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

}

.gallery-item img{

height:220px;

}

}

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

.gallery-grid{

display:grid;

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

gap:20px;

margin-top:25px;

}

.gallery-item{

overflow:hidden;

border-radius:24px;

background:#111;

transition:.35s;

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

}

.gallery-item img{

width:100%;

height:300px;

object-fit:cover;

display:block;

cursor:pointer;

transition:.4s;

}

.gallery-item:hover img{

transform:scale(1.05);

}

@media(max-width:1000px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

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

}

.gallery-item img{

height:220px;

}

}

@media(max-width:500px){

.gallery-item img{

height:180px;

}

}

/*==================================
IMAGE MODAL
==================================*/

#imageModal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#modalImage{

    max-width:92%;

    max-height:90%;

    border-radius:20px;

}

/*==================================
SECTION ANIMATION
==================================*/

section{

    opacity:0;

    transform:translateY(30px);

    transition:.7s;

}

section.show{

    opacity:1;

    transform:none;

}

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

@media(max-width:768px){

    .form-row{

        grid-template-columns:1fr;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:26px;

    }

    .glass-card{

        padding:28px;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        min-width:unset;

    }

    .hero-buttons,
    .contact-buttons{

        flex-direction:column;

    }

    .logo{

        max-width:300px;

    }

}

/*==================================================
PART 6
REVIEWS
REWARDS
FAQ
UTILITIES
==================================================*/

/*==================================
REVIEW CARDS
==================================*/

.review-card{

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:30px;

    margin-top:25px;

    transition:var(--transition);

}

.review-card:hover{

    border-color:var(--gold);

    transform:translateY(-3px);

}

.review-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:15px;

}

.review-stars{

    color:#FFD700;

    font-size:22px;

    margin-bottom:12px;

}

.review-text{

    line-height:1.9;

    margin-bottom:18px;

}

.review-photo{

    width:100%;

    border-radius:20px;

    margin-top:20px;

}

.verified{

    color:#7CFC98;

    font-size:15px;

    font-weight:600;

}

/*==================================
REWARDS
==================================*/

.reward-card{

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:28px;

    text-align:center;

}

.reward-card h2{

    color:var(--gold);

    margin:15px 0;

}

.reward-card p{

    margin:0;

}

/*==================================
BADGES
==================================*/

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        var(--rose),
        var(--rosegold)
    );

    color:#fff;

    font-size:14px;

    font-weight:600;

}

/*==================================
FAQ CARDS
==================================*/

.faq-card{

    margin-bottom:22px;

}

.faq-card h2{

    margin-bottom:14px;

}

.faq-card p{

    margin:0;

}

/*==================================
DIVIDER
==================================*/

.divider{

    width:100%;

    height:1px;

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

    margin:35px 0;

}

/*==================================
TABLES
==================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

th{

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

    padding:16px;

    color:var(--gold);

}

td{

    padding:16px;

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

    text-align:center;

}

/*==================================
STATUS COLORS
==================================*/

.success{

    color:#69ff8e;

}

.warning{

    color:#ffc857;

}

.error{

    color:#ff6b6b;

}

/*==================================
CENTER EVERYTHING
==================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

/*==================================
SMALL FADE IN
==================================*/

.fade-in{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}

}

/*==================================================
PART 7
LUXURY FINISH
FINAL POLISH
==================================================*/

/*==================================
SMOOTH TRANSITIONS
==================================*/

*{

transition:
background .30s ease,
color .30s ease,
border .30s ease,
box-shadow .30s ease,
transform .30s ease;

}

/*==================================
CARD GLOW
==================================*/

.glass-card:hover{

box-shadow:

0 20px 45px rgba(0,0,0,.45),

0 0 30px rgba(255,94,168,.10),

0 0 18px rgba(214,160,109,.15);

}

/*==================================
BUTTON GLOW
==================================*/

.primary-btn:hover{

box-shadow:

0 18px 40px rgba(255,94,168,.25),

0 0 18px rgba(214,160,109,.20);

}

.secondary-btn:hover{

box-shadow:

0 10px 30px rgba(214,160,109,.15);

}

/*==================================
INPUT HOVER
==================================*/

input:hover,
textarea:hover,
select:hover{

border-color:rgba(214,160,109,.60);

}

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

.logo{

transition:.40s ease;

}

.logo:hover{

transform:scale(1.03);

}

/*==================================
LINKS
==================================*/

a{

transition:.30s ease;

}

a:hover{

opacity:.95;

}

/*==================================
PAGE SPACING
==================================*/

.page-title{

padding-bottom:10px;

}

.glass-card{

margin-top:26px;

}

.hero-buttons{

margin-top:35px;

}

/*==================================
BUTTON ICONS
==================================*/

.primary-btn i,
.secondary-btn i{

font-size:18px;

}

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

.bottom-nav{

padding-bottom:calc(12px + env(safe-area-inset-bottom));

}

.bottom-nav a{

font-weight:500;

letter-spacing:.3px;

}

.bottom-nav i{

margin-bottom:4px;

}

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

.floating-btn{

backdrop-filter:blur(10px);

}

.floating-btn:hover{

transform:translateY(-5px) scale(1.08);

}

/*==================================
SCROLL ANIMATION
==================================*/

html{

scroll-padding-top:20px;

}

/*==================================
REVIEW PHOTO
==================================*/

.review-photo{

transition:.40s ease;

}

.review-photo:hover{

transform:scale(1.02);

}

/*==================================
SELECTION
==================================*/

::selection{

background:var(--rose);

color:#fff;

}

/*==================================
FOCUS ACCESSIBILITY
==================================*/

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus{

outline:none;

}

/*==================================
APP FEEL
==================================*/

body{

-webkit-tap-highlight-color:transparent;

}

/*==================================
END
==================================*/

/*==================================================
HOME PAGE ONLY
==================================================*/

.home-page .hero{

    margin-bottom:30px;

}

.home-page .hero-img{

    width:100%;

    border-radius:28px;

    display:block;

}

.home-page .action-section{

    margin:25px 0;

}

.home-page .action-buttons{

    display:flex;

    gap:20px;

    justify-content:center;

    flex-wrap:wrap;

}

/*==================================
HOME DASHBOARD
==================================*/

.home-page .dashboard{

    margin-top:30px;

}

.home-page .dashboard-grid{

    display:grid;

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

    gap:20px;

}

.home-page .dashboard-card{

    background:#111;

    border:1px solid rgba(214,160,109,.20);

    border-radius:24px;

    min-height:185px;

    padding:28px 18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s ease;

}

.home-page .dashboard-card svg{

    width:48px;

    height:48px;

    display:block;

    margin:0 auto 18px;

    stroke:#ff5ea8;

    stroke-width:1.75;

    fill:none;

    filter:
        drop-shadow(0 0 4px #ff5ea8)
        drop-shadow(0 0 10px rgba(255,94,168,.85))
        drop-shadow(0 0 18px rgba(255,94,168,.60));

    transition:.35s ease;

}

.home-page .dashboard-card:hover svg{

    stroke:#ffd46a;

    transform:scale(1.08);

    filter:
        drop-shadow(0 0 6px #ffd46a)
        drop-shadow(0 0 14px #ffd46a)
        drop-shadow(0 0 24px #ff5ea8);

}

.home-page .dashboard-card h3{

    font-size:17px;

    font-weight:600;

    color:#fff;

    text-align:center;

    margin-top:4px;

}

/*==================================
HOME RESPONSIVE
==================================*/

@media (max-width:1000px){

.home-page .dashboard-grid{

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

gap:18px;

}

}

@media (max-width:768px){

.home-page .dashboard-grid{

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

gap:16px;

}

.home-page .dashboard-card{

min-height:135px;

padding:24px 15px;

}

.home-page .dashboard-card svg{

width:40px;

height:40px;

}

.home-page .dashboard-card h3{

font-size:16px;

}

.home-page .action-buttons{

flex-direction:column;

align-items:center;

}

.home-page .action-btn{

width:100%;

max-width:340px;

}

}

@media (max-width:480px){

.home-page .dashboard-grid{

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

gap:14px;

}

.home-page .dashboard-card{

padding:20px 12px;

min-height:135px;

}

.home-page .dashboard-card svg{

width:36px;

height:36px;

margin-bottom:12px;

}

.home-page .dashboard-card h3{

font-size:15px;

}

}

/*==================================
HOME PAGE FINISH
==================================*/

.home-page .top-header{

padding:25px 0 10px;

text-align:center;

}

.home-page .header-logo{
    
width:520px;

max-width:95%;

height:auto;

display:block;

margin:0 auto;

background:none;

border:none;

box-shadow:none;

}

.home-page .hero{

max-width:1100px;

margin:20px auto 35px;

}

.home-page .hero-img{

width:100%;

display:block;

border-radius:30px;

box-shadow:

0 20px 45px rgba(0,0,0,.45);

}

.home-page .action-btn{

min-width:240px;

font-size:18px;

font-weight:600;

padding:18px 26px;

}

.home-page .floating-buttons{

right:20px;

bottom:95px;

}

.home-page .footer{

margin-top:50px;

text-align:center;

}



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

.flash-card .hero-buttons{

display:flex;

flex-direction:column;

gap:12px;

margin-top:auto;

}

.flash-card .primary-btn,
.flash-card .secondary-btn{

width:100%;

min-width:unset;

justify-content:center;

padding:16px;

font-size:16px;

font-weight:600;

}

.flash-card .primary-btn i,
.flash-card .secondary-btn i{

font-size:17px;

}

/*==================================
ROTATE SIDEWAYS FLASH IMAGES
==================================*/

.rotate-img{

transform:rotate(90deg);

object-fit:contain !important;

background:#111;

padding:20px;

}

/*==================================
FLASH SALE WEEKLY
==================================*/

.flash-grid{

display:grid;

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

gap:22px;

margin-top:25px;

}

.flash-card{

background:#111;

border-radius:22px;

overflow:hidden;

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

display:flex;

align-items:center;

justify-content:center;

height:220px;

}

.flash-card:hover{

transform:translateY(-6px);

}

.flash-card img{

width:100%;

height:100%;

object-fit:cover;

object-position:center;

display:block;

cursor:pointer;

}

.flash-card img:hover{

transform:scale(1.03);

}

.flash-info{

padding:18px;

text-align:center;

}

.flash-info h3{

font-size:20px;

font-weight:700;

color:#fff;

margin-bottom:8px;

}

.flash-info p{

font-size:15px;

color:#d7d7d7;

margin-bottom:18px;

}

.flash-info .hero-buttons{

display:flex;

flex-direction:column;

gap:12px;

}

.flash-info .secondary-btn,

.flash-info .primary-btn{

width:100%;

justify-content:center;

}

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

@media(max-width:992px){

.flash-grid{

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

}

}

@media(max-width:768px){

.flash-grid{

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

gap:16px;

}

.flash-card img{

height:210px;

}

.flash-info h3{

font-size:17px;

}

}

@media(max-width:480px){

.flash-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.flash-card{
height:170px;
}

.flash-card img{
width:100%;
height:170px !important;
object-fit:cover;
object-position:center;
}

.flash-info{
padding:14px;
}

.flash-info h3{
font-size:15px;
}

.flash-info p{
font-size:13px;
}

}

/* Rotated Flash Images */

.rotate90{
width:100%;
height:220px !important;
object-fit:cover !important;
object-position:center !important;
transform:rotate(90deg) scale(1.35);
display:block;
}

.rotate90large{
width:100%;
height:220px !important;
object-fit:cover !important;
object-position:center !important;
transform:rotate(90deg) scale(1.48);
display:block;
}