/* ==========================================================
   ZAKDE WEBSITE
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0d0d0d;
    color:#ffffff;
    overflow-x:hidden;
    line-height:1.6;
}

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

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

.header{
    position:sticky;
    top:0;
    width:100%;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(12px);
    z-index:999;
    border-bottom:1px solid rgba(255,215,0,.25);
}

.header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.logo-text{
    color:#FFD700;
    font-size:38px;
    font-weight:800;
    letter-spacing:2px;
}

nav{
    display:flex;
    gap:28px;
}

nav a{
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    transition:.3s;
}

nav a:hover{
    color:#FFD700;
}

.book-btn{
    background:#FFD700;
    color:#111;
    padding:12px 24px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.book-btn:hover{
    background:#fff;
    transform:translateY(-2px);
}

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

.hero{
    min-height:100vh;
    background:url("images/banner1.jpg") center/cover no-repeat;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.70);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
}

.hero-logo{
    font-size:72px;
    color:#FFD700;
    font-weight:800;
    margin-bottom:10px;
}

.hero-small{
    color:#fff;
    letter-spacing:6px;
    font-size:18px;
    margin-bottom:15px;
}

.hero-title{
    font-size:48px;
    color:#fff;
    max-width:900px;
    line-height:1.2;
}

.hero-text{
    margin-top:20px;
    font-size:22px;
    color:#ddd;
}

.hero-location{
    margin-top:12px;
    color:#FFD700;
    font-size:18px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
    flex-wrap:wrap;
}

.btn,
.btn-outline{
    padding:14px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.btn{
    background:#FFD700;
    color:#111;
}

.btn:hover{
    transform:translateY(-3px);
}

.btn-outline{
    border:2px solid #FFD700;
    color:#FFD700;
}

.btn-outline:hover{
    background:#FFD700;
    color:#111;
}

/* ==========================================================
   Counter • About • Why Choose • Services • Portfolio
========================================================== */

/* ===== Counter ===== */

.counter{
    background:#111;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    padding:60px 8%;
}

.counter-box{
    background:#1a1a1a;
    border:1px solid rgba(255,215,0,.25);
    border-radius:15px;
    text-align:center;
    padding:35px 20px;
    transition:.3s;
}

.counter-box:hover{
    transform:translateY(-8px);
    border-color:#FFD700;
}

.counter-box h2{
    color:#FFD700;
    font-size:42px;
    margin-bottom:10px;
}

.counter-box p{
    color:#ddd;
    font-size:18px;
}

/* ===== Section ===== */

section{
    padding:90px 8%;
}

section h2{
    text-align:center;
    color:#FFD700;
    font-size:40px;
    margin-bottom:45px;
}

/* ===== About ===== */

.about{
    background:#0f0f0f;
}

.about p{
    max-width:1000px;
    margin:auto;
    text-align:center;
    font-size:20px;
    line-height:1.9;
    color:#ddd;
}

/* ===== Why Choose ===== */

.why{
    background:#111;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.why-card{
    background:#1a1a1a;
    border-radius:15px;
    padding:35px;
    border:1px solid rgba(255,215,0,.20);
    transition:.3s;
}

.why-card:hover{
    transform:translateY(-8px);
    border-color:#FFD700;
}

.why-card h3{
    color:#FFD700;
    margin-bottom:15px;
    font-size:24px;
}

.why-card p{
    color:#ddd;
    line-height:1.7;
}

/* ===== Services ===== */

.services{
    background:#0d0d0d;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.service-card{
    background:#191919;
    border-radius:15px;
    padding:35px;
    text-align:center;
    border:1px solid rgba(255,215,0,.20);
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:#FFD700;
    box-shadow:0 15px 35px rgba(255,215,0,.12);
}

.service-card h3{
    color:#fff;
    font-size:22px;
}

/* ===== Portfolio ===== */

.event-slider{
    background:#111;
}

.slider{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.slider img{
    width:100%;
    height:240px;
    object-fit:cover;
    border-radius:15px;
    border:2px solid #222;
    transition:.3s;
}

.slider img:hover{
    border-color:#FFD700;
    transform:scale(1.03);
}

/* ==========================================================
   PART 2
   Gallery • Clients • Testimonials • Contact • Office
========================================================== */

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

.gallery-folder{
    background:#1b1b1b;
    border:2px solid #FFD700;
    border-radius:15px;
    padding:20px;
    margin:15px 0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:.3s;
}

.gallery-folder:hover{
    transform:translateY(-3px);
    box-shadow:0 0 15px rgba(255,215,0,.4);
}

.folder-icon{
    font-size:40px;
}

.gallery-folder h3{
    color:#FFD700;
    margin:0;
    font-size:22px;
}

.gallery-folder p{
    color:#fff;
    margin:0;
    font-size:15px;
}

/* ================= CLIENTS ================= */

.clients{
    background:#111;
}

.client-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    margin-top:35px;
}

.client-grid div{
    background:#1c1c1c;
    padding:25px;
    text-align:center;
    border-radius:12px;
    color:#FFD700;
    font-size:18px;
    font-weight:600;
    border:1px solid rgba(255,215,0,.15);
    transition:.3s;
}

.client-grid div:hover{
    transform:translateY(-6px);
    border-color:#FFD700;
}

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

.testimonials{
    background:#0d0d0d;
}

.testimonial-box{
    max-width:800px;
    margin:auto;
    background:#1b1b1b;
    padding:40px;
    border-radius:15px;
    text-align:center;
    border:1px solid rgba(255,215,0,.20);
}

.testimonial-box p{
    color:#ddd;
    margin:20px 0;
    line-height:1.8;
}

.testimonial-box h4{
    color:#FFD700;
}

/* ================= CONTACT ================= */

.contact{
    background:#111;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-bottom:50px;
}

.contact-card{
    background:#1b1b1b;
    border-radius:15px;
    padding:30px;
    text-align:center;
    border:1px solid rgba(255,215,0,.15);
}

.contact-card h3{
    color:#FFD700;
    margin-bottom:15px;
}

.contact-btn{
    display:inline-block;
    margin-top:15px;
    padding:10px 20px;
    background:#FFD700;
    color:#111;
    text-decoration:none;
    border-radius:8px;
    font-weight:700;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:35px;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
    background:#1c1c1c;
    color:#fff;
    border:1px solid #333;
    padding:15px;
    border-radius:10px;
    font-size:16px;
}

.contact-form textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form button{
    background:#FFD700;
    color:#111;
    padding:15px;
    border:none;
    border-radius:10px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
}

.contact-form button:hover{
    background:#fff;
}

/* ================= SOCIAL ================= */

.social-links{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:40px;
}

.social-btn{
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    color:#fff;
    font-weight:700;
}

.instagram{
    background:#E1306C;
}

.facebook{
    background:#1877F2;
}

/* ================= OFFICE ================= */

.office{
    background:#0d0d0d;
}

.office p{
    text-align:center;
    color:#ddd;
    font-size:18px;
    margin-top:20px;
}

/* ==========================================================
   PART 3 (FINAL)
   Payment • Company Profile • Map • Footer • WhatsApp
   Mobile Responsive • Animations
==========================================================*/

/* ================= PAYMENT ================= */

.payment{
    background:#111;
}

.payment-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-top:40px;
}

.pay-card{
    background:#1b1b1b;
    border:1px solid rgba(255,215,0,.20);
    border-radius:15px;
    padding:30px;
    text-align:center;
    transition:.3s;
}

.pay-card:hover{
    transform:translateY(-8px);
    border-color:#FFD700;
}

.pay-card h3{
    color:#FFD700;
    margin-bottom:20px;
}

.pay-card img{
    width:180px;
    height:180px;
    object-fit:contain;
    margin:20px auto;
    display:block;
}

/* ================= COMPANY PROFILE ================= */

.company-profile{
    background:#0d0d0d;
    text-align:center;
}

.download-btn{
    display:inline-block;
    margin-top:25px;
    padding:15px 35px;
    background:#FFD700;
    color:#111;
    text-decoration:none;
    border-radius:10px;
    font-weight:700;
    transition:.3s;
}

.download-btn:hover{
    background:#fff;
}

/* ================= GOOGLE MAP ================= */

.map-section iframe{
    border-radius:15px;
    overflow:hidden;
    margin-top:25px;
}

/* ================= WHATSAPP ================= */

.whatsapp-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    text-decoration:none;
    z-index:999;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    transition:.3s;
}

.whatsapp-btn:hover{
    transform:scale(1.1);
}

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

footer{
    background:#000;
    color:#fff;
    text-align:center;
    padding:50px 20px;
    border-top:2px solid #FFD700;
}

footer h3{
    color:#FFD700;
    font-size:32px;
    margin-bottom:15px;
}

footer p{
    color:#ccc;
    margin:8px 0;
}

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

.service-card,
.why-card,
.counter-box,
.gallery-item,
.contact-card,
.pay-card{
    transition:all .35s ease;
}

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

@media(max-width:992px){

.header .container{
    flex-direction:column;
    gap:20px;
}

nav{
    flex-wrap:wrap;
    justify-content:center;
}

.hero-logo{
    font-size:52px;
}

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

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

}

@media(max-width:768px){

section{
    padding:60px 20px;
}

.hero{
    min-height:85vh;
}

.hero-logo{
    font-size:40px;
}

.hero-title{
    font-size:28px;
}

.hero-text{
    font-size:18px;
}

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

.hero-buttons{
    flex-direction:column;
    width:100%;
}

.btn,
.btn-outline{
    width:100%;
    text-align:center;
}

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

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

.gallery-item img,
.gallery-grid img{
    height:140px;
}

.client-grid,
.service-grid,
.why-grid,
.contact-grid,
.payment-grid{
    grid-template-columns:1fr;
}

.logo-text{
    font-size:32px;
}

footer h3{
    font-size:26px;
}

}

@media(max-width:480px){

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

.gallery-item img,
.gallery-grid img{
    height:220px;
}

.whatsapp-btn{
    width:55px;
    height:55px;
    font-size:26px;
    right:15px;
    bottom:15px;
}

}

.gallery-folder{
    background:#fff;
    border-radius:12px;
    padding:20px;
    margin:10px 0;
    cursor:pointer;
    text-align:center;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:10px;
    margin-top:20px;
}

.gallery-thumb{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.gallery-thumb:hover{
    transform:scale(1.05);
}

.gallery-thumb-card{
    overflow:hidden;
    border-radius:10px;
}

.gallery-thumb{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
}

.gallery-thumb:hover{
    transform:scale(1.05);
}

.folder-cover{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:12px;
    margin-right:15px;
}

.folder-info{
    flex:1;
}

.folder-arrow{
    font-size:28px;
    color:#FFD700;
}

.gallery-counter{

background:#111;

color:#FFD700;

padding:15px;

margin-bottom:20px;

border-radius:10px;

text-align:center;

font-weight:bold;

font-size:18px;

}

.gallery-search{

margin:20px 0;

}

.gallery-search input{

width:100%;

padding:12px;

border-radius:10px;

border:2px solid #FFD700;

background:#111;

color:#fff;

font-size:16px;

outline:none;

}

.counter-box{

display:flex;

justify-content:space-around;

align-items:center;

gap:15px;

text-align:center;

}

.counter-box div{

background:#1b1b1b;

padding:15px;

border-radius:12px;

border:2px solid #FFD700;

flex:1;

color:#FFD700;

font-weight:bold;

}

.counter-box small{

display:block;

margin-top:5px;

color:white;

font-size:13px;

}

/* =========================
   Final Gallery Polish
========================= */

.gallery-thumb{

    transition:0.3s;

    cursor:pointer;

}

.gallery-thumb:hover{

    transform:scale(1.05);

    box-shadow:0 0 20px rgba(255,215,0,.5);

}

.gallery-folder{

    transition:0.3s;

}

.gallery-folder:hover{

    transform:translateY(-5px);

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

}

/* ======================
   Website Logo
====================== */

.logo{
    display:flex;
    align-items:center;
}

.website-logo{
    width:60px;
    height:60px;
    object-fit:contain;
    margin-right:12px;
}

/* ======================
   Full Screen Video
====================== */

.video-fullscreen-viewer{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.96);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.fullscreen-video{
    width:100%;
    height:100%;
    max-width:1200px;
    max-height:100vh;
    object-fit:contain;
}

.video-close-btn{
    position:absolute;
    top:20px;
    right:20px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#ffffff;
    color:#000000;
    font-size:22px;
    cursor:pointer;
    z-index:1000000;
}

/* =========================
   PHOTO POST DETAILS
========================= */

.gallery-thumb-card {
    background: #111;
    border: 1px solid #ffd700;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.gallery-thumb {
    width: 100%;
    display: block;
    cursor: pointer;
}

.photo-details {
    padding: 16px;
    background: #111;
    color: #fff;
}

.photo-details h3 {
    color: #ffd700;
    font-size: 20px;
    margin: 0 0 10px;
}

.photo-details p {
    color: #ddd;
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0;
}

.photo-description {
    color: #fff !important;
    font-size: 15px !important;
    white-space: pre-line;
}

/* =========================
   MAP ADDRESS BOX
========================= */

.map-address {
    background: #111;
    color: #fff;
    border: 1px solid #ffd700;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.map-address span {
    color: #fff;
}

.map-section iframe {
    border-radius: 15px;
    overflow: hidden;
}

/* =========================================
   ZAKDE MODERN PREMIUM UI - FINAL POLISH
   Paste at END of style.css
========================================= */

/* 1. MODERN PREMIUM BACKGROUND */
body {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 215, 0, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(55, 90, 140, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b0f17 0%,
            #111827 48%,
            #17130d 100%
        );

    background-attachment: fixed;
    color: #f5f5f5;
}


/* ALL MAIN SECTIONS - REMOVE OLD FLAT BLACK LOOK */
section {
    background: transparent !important;
}


/* 2. SERVICES - SMALLER MODERN CARDS */
.service-grid {
    gap: 14px !important;
}

.service-card {
    min-height: 90px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.88),
            rgba(15, 23, 42, 0.78)
        ) !important;

    border: 1px solid rgba(255, 215, 0, 0.28) !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25) !important;

    backdrop-filter: blur(10px);
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: #ffd700 !important;

    box-shadow:
        0 12px 28px rgba(255, 215, 0, 0.12) !important;
}


/* 3. WHY CHOOSE US - SMALLER BOXES */
.why-grid {
    gap: 14px !important;
}

.why-card {
    min-height: 110px !important;
    padding: 18px !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.88),
            rgba(17, 24, 39, 0.82)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

.why-card h3 {
    font-size: 21px !important;
    margin-bottom: 7px !important;
}

.why-card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}


/* 4. GALLERY FOLDERS - SMALLER + CLEANER */
.gallery-folder {
    min-height: 115px !important;
    padding: 12px !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.90),
            rgba(15, 23, 42, 0.82)
        ) !important;

    border: 1px solid rgba(255, 215, 0, 0.25) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

.folder-cover {
    width: 82px !important;
    height: 82px !important;
    border-radius: 12px !important;
    object-fit: cover;
}

.folder-info h3 {
    font-size: 17px !important;
}

.folder-info p {
    font-size: 13px !important;
}


/* 5. COUNTER BOX - COMPACT */
.gallery-counter {
    margin: 10px 0 18px !important;
}

.counter-box {
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 15px !important;

    background:
        rgba(15, 23, 42, 0.78) !important;

    border:
        1px solid rgba(255, 215, 0, 0.22) !important;
}

.counter-box > div {
    padding: 10px 12px !important;
    min-width: 90px !important;
    border-radius: 12px !important;
}


/* 6. VIDEO / PHOTO CARDS - MODERN */
.gallery-item,
.gallery-thumb-card {
    border-radius: 15px !important;
    overflow: hidden;

    background:
        rgba(17, 24, 39, 0.88) !important;

    border:
        1px solid rgba(255, 215, 0, 0.20) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.25) !important;
}


/* 7. MAP SECTION - REMOVE EXTRA SPACE */
.map-section {
    padding-top: 25px !important;
}

.map-section .container {
    display: flex;
    flex-direction: column;
}


/* ADDRESS EXACTLY ABOVE MAP */
.map-address {
    margin:
        0 0 5px 0 !important;

    padding:
        5px 10px !important;

    min-height: auto !important;

    font-size:
        12px !important;

    line-height:
        1.35 !important;

    border-radius:
        7px 7px 0 0 !important;

    background:
        rgba(17, 24, 39, 0.96) !important;

    color:
        #dce3ec !important;

    border:
        1px solid rgba(255, 215, 0, 0.32) !important;

    box-shadow:
        none !important;
}


/* MAP DIRECTLY TOUCH ADDRESS */
.map-section iframe {
    margin-top: 0 !important;

    border-radius:
        0 0 14px 14px !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28) !important;
}


/* 8. HEADINGS - MODERN SIZE */
section h2 {
    font-size: clamp(28px, 4vw, 42px) !important;
    margin-bottom: 24px !important;
}


/* 9. MOBILE OPTIMIZATION */
@media (max-width: 768px) {

    .service-grid,
    .why-grid {
        gap: 10px !important;
    }

    .service-card {
        min-height: 72px !important;
        padding: 12px !important;
    }

    .why-card {
        min-height: 90px !important;
        padding: 14px !important;
    }

    .why-card h3 {
        font-size: 17px !important;
    }

    .why-card p {
        font-size: 12px !important;
    }

    .gallery-folder {
        min-height: 95px !important;
        padding: 9px !important;
    }

    .folder-cover {
        width: 65px !important;
        height: 65px !important;
    }

    .map-address {
        font-size: 10px !important;
        padding: 4px 7px !important;
        margin-bottom: 3px !important;
    }

    .map-section iframe {
        height: 320px !important;
    }
}

/* =========================================
   ZAKDE - MODERN PREMIUM BACKGROUND
   STEP 1 : BACKGROUND + OVERALL PAGE LOOK
========================================= */

/* FULL WEBSITE BACKGROUND */
html {
    background: #080b12;
}

body {
    margin: 0;
    min-height: 100vh;

    color: #f4f7fb;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(255, 200, 0, 0.10),
            transparent 25%
        ),

        radial-gradient(
            circle at 88% 30%,
            rgba(40, 100, 180, 0.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 45% 75%,
            rgba(255, 190, 0, 0.05),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #080b12 0%,
            #0d1420 35%,
            #111827 68%,
            #15120d 100%
        );

    background-attachment: fixed;
}


/* REMOVE OLD FLAT BLACK FROM MAIN SECTIONS */
main,
section {
    background: transparent;
}


/* SOFT DIFFERENCE BETWEEN SECTIONS */
section:nth-of-type(even) {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 215, 0, 0.025),
            rgba(255, 255, 255, 0.018)
        );
}


/* MODERN SECTION SPACING */
section {
    position: relative;

    padding-top: 58px;
    padding-bottom: 58px;
}


/* SOFT PREMIUM DIVIDER */
section::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 0, 0.18),
            transparent
        );
}


/* MAIN CONTENT WIDTH */
.container {
    width: min(1120px, 92%);
    margin-left: auto;
    margin-right: auto;
}


/* PREMIUM HEADINGS */
section h2 {
    color: #ffd700;

    text-shadow:
        0 0 18px rgba(255, 215, 0, 0.10);

    letter-spacing: -0.5px;
}


/* NORMAL TEXT */
section p {
    color: #d6deea;
}


/* LINKS */
a {
    transition:
        color 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* SMOOTH WEBSITE */
html {
    scroll-behavior: smooth;
}


/* MOBILE */
@media (max-width: 768px) {

    body {
        background:
            radial-gradient(
                circle at 20% 5%,
                rgba(255, 200, 0, 0.08),
                transparent 22%
            ),

            radial-gradient(
                circle at 90% 35%,
                rgba(40, 100, 180, 0.10),
                transparent 28%
            ),

            linear-gradient(
                160deg,
                #080b12 0%,
                #0d1420 50%,
                #121722 100%
            );

        background-attachment: scroll;
    }

    section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .container {
        width: 92%;
    }
}

/* =========================================
   ZAKDE - YELLOW TO WHITE THEME
   Paste at END of style.css
========================================= */

/* MAIN HEADINGS */
h1,
h2,
h3,
h4,
section h2,
section h3 {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* LINKS / NAVIGATION */
nav a,
.nav-links a,
header a {
    color: #ffffff !important;
}

/* BOOK EVENT BUTTON */
.book-btn,
.btn,
button {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    box-shadow: 0 6px 18px rgba(255,255,255,0.08) !important;
}

/* SERVICES CARDS */
.service-card {
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}

.service-card:hover {
    border-color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(255,255,255,0.12) !important;
}

/* WHY CHOOSE CARDS */
.why-card {
    border-color: rgba(255,255,255,0.35) !important;
}

.why-card h3 {
    color: #ffffff !important;
}

/* GALLERY FOLDERS */
.gallery-folder {
    border-color: rgba(255,255,255,0.42) !important;
}

.gallery-folder:hover {
    border-color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(255,255,255,0.10) !important;
}

/* GALLERY COUNTER */
.counter-box {
    border-color: rgba(255,255,255,0.38) !important;
}

.counter-box > div {
    border-color: rgba(255,255,255,0.50) !important;
    color: #ffffff !important;
}

/* SEARCH BOX */
#gallerySearch,
.gallery-search input {
    border: 1px solid rgba(255,255,255,0.75) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#gallerySearch:focus,
.gallery-search input:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.10) !important;
}

/* PHOTO + VIDEO CARDS */
.gallery-item,
.gallery-thumb-card {
    border-color: rgba(255,255,255,0.35) !important;
}

/* MAP ADDRESS */
.map-address {
    border-color: rgba(255,255,255,0.55) !important;
    color: #ffffff !important;
}

/* ALL OLD YELLOW BORDERS COMMON CLASSES */
.card,
.stat-card,
.feature-card,
.info-card {
    border-color: rgba(255,255,255,0.35) !important;
}

/* SECTION DIVIDER - WHITE */
section::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.22),
        transparent
    ) !important;
}

/* YELLOW TEXT UTILITY OVERRIDE */
.highlight,
.gold-text,
.yellow-text {
    color: #ffffff !important;
}

/* =========================================================
   ZAKDE FINAL CLEAN THEME
   REPLACES OLD BLOCKS 5 + 6 + 7 + 8 + 9

   FINAL DECISIONS PRESERVED:
   - White website background
   - Normal text black
   - White cards + black borders
   - Green action buttons
   - Golden stars
   - Hero dark area text white
   - Stats dark cards text white
   - Testimonial dark card text white
   - Gallery dark folders text white
   - Footer dark text white
   - Find Us black
   - Second email/domain black
   - Map unchanged
   - Instagram/Facebook unchanged
========================================================= */


/* =========================================================
   1. WEBSITE BASE — PURE WHITE
========================================================= */

html,
body {
    background: #ffffff !important;
    color: #000000 !important;
}


/* =========================================================
   2. MAIN SECTIONS — WHITE
========================================================= */

main,
section,
.about,
.services,
.gallery,
.contact,
.company-profile,
.office,
.map-section,
#about,
#services,
#gallerySection,
#contact {
    background-color: #ffffff !important;
}


/* =========================================================
   3. NORMAL WEBSITE TEXT — BLACK
========================================================= */

body,
main,
section {
    color: #000000;
}

section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
    color: #000000 !important;
}

section p,
section span,
section label,
section small,
section strong,
section b,
section li {
    color: #000000;
}


/* =========================================================
   4. HEADER — WHITE
========================================================= */

header,
.header,
.navbar,
nav {
    background: #ffffff !important;
    color: #000000 !important;
}

header a,
nav a,
.navbar a {
    color: #000000 !important;
}


/* =========================================================
   5. STANDARD LIGHT CARDS
   WHITE INSIDE + BLACK BORDER + BLACK TEXT
========================================================= */

.card,
.service-card,
.contact-card,
.portfolio-card,
.why-card,
.feature-card {
    background: #ffffff !important;
    color: #000000 !important;

    border: 2px solid #000000 !important;

    box-shadow: none !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card p,
.card span,

.service-card h1,
.service-card h2,
.service-card h3,
.service-card h4,
.service-card p,
.service-card span,

.contact-card h1,
.contact-card h2,
.contact-card h3,
.contact-card h4,
.contact-card p,
.contact-card span,

.why-card h1,
.why-card h2,
.why-card h3,
.why-card h4,
.why-card p,
.why-card span,

.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card h4,
.feature-card p,
.feature-card span {
    color: #000000 !important;
}


/* =========================================================
   6. TOP BOOK EVENT BUTTON — GREEN
========================================================= */

a[href*="book"],
.book-event,
.book-event-btn,
.book-btn,
.btn-book {
    background: #16a34a !important;
    color: #ffffff !important;

    border: 2px solid #16a34a !important;
}

a[href*="book"] *,
.book-event *,
.book-event-btn *,
.book-btn *,
.btn-book * {
    color: #ffffff !important;
}


/* =========================================================
   7. CALL NOW + WHATSAPP CHAT NOW — GREEN

   IMPORTANT:
   Instagram and Facebook are NOT targeted here.
========================================================= */

a[href^="tel:"],
a[href*="wa.me"],
a[href*="whatsapp"] {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

a[href^="tel:"] *,
a[href*="wa.me"] *,
a[href*="whatsapp"] * {
    color: #ffffff !important;
}


/* =========================================================
   8. DOWNLOAD PDF — GREEN
========================================================= */

a[download],
.download-btn,
.pdf-btn,
.download-pdf,
.company-profile-btn {
    background: #16a34a !important;
    color: #ffffff !important;

    border: 2px solid #16a34a !important;
}

a[download] *,
.download-btn *,
.pdf-btn *,
.download-pdf *,
.company-profile-btn * {
    color: #ffffff !important;
}


/* =========================================================
   9. COMPANY PROFILE — BLACK TEXT
========================================================= */

.company-profile,
.company-profile h1,
.company-profile h2,
.company-profile h3,
.company-profile p,
.company-profile span,

.profile-download,
.profile-download h1,
.profile-download h2,
.profile-download h3,
.profile-download p,
.profile-download span,

.download-section,
.download-section h1,
.download-section h2,
.download-section h3,
.download-section p,
.download-section span {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   10. HERO DARK / GREY AREA
   KEEP BACKGROUND AS EXISTING
   ONLY TEXT WHITE
========================================================= */

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero p,
.hero span,
.hero strong,
.hero b,

.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content h4,
.hero-content p,
.hero-content span,
.hero-content strong {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* Hero buttons text white */

.hero .quote-btn,
.hero .quote-btn *,
.hero .btn-outline,
.hero .btn-outline *,
.get-quote,
.get-quote *,
.get-free-quote,
.get-free-quote * {
    color: #ffffff !important;
}


/* =========================================================
   11. STATS DARK CARDS
   EVENTS MANAGED / HAPPY CLIENTS /
   SUPPORT / ALL INDIA
========================================================= */

.stat-card,
.stats-card,
.stats-grid > div {
    color: #ffffff !important;
}

.stat-card h1,
.stat-card h2,
.stat-card h3,
.stat-card h4,
.stat-card p,
.stat-card span,
.stat-card strong,
.stat-card b,

.stats-card h1,
.stats-card h2,
.stats-card h3,
.stats-card h4,
.stats-card p,
.stats-card span,
.stats-card strong,
.stats-card b,

.stats-grid > div h1,
.stats-grid > div h2,
.stats-grid > div h3,
.stats-grid > div h4,
.stats-grid > div p,
.stats-grid > div span,
.stats-grid > div strong,
.stats-grid > div b {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   12. TESTIMONIAL / FIVE STAR DARK BOX
   DARK BOX STAYS
   ALL TEXT WHITE
========================================================= */

.testimonial-card,
.client-card,
.testimonial-box {
    color: #ffffff !important;
}

.testimonial-card h1,
.testimonial-card h2,
.testimonial-card h3,
.testimonial-card h4,
.testimonial-card p,
.testimonial-card span,
.testimonial-card strong,
.testimonial-card b,

.client-card h1,
.client-card h2,
.client-card h3,
.client-card h4,
.client-card p,
.client-card span,
.client-card strong,
.client-card b,

.testimonial-box h1,
.testimonial-box h2,
.testimonial-box h3,
.testimonial-box h4,
.testimonial-box p,
.testimonial-box span,
.testimonial-box strong,
.testimonial-box b {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   13. STARS — GOLDEN
========================================================= */

.stars,
.star,
.rating,
.rating-stars,
.star-rating,

.testimonial-card .stars,
.client-card .stars,
.testimonial-box .stars {
    color: #d4af37 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   14. EVENT GALLERY DARK / BLUE FOLDERS
   KEEP EXISTING BACKGROUND
   TEXT WHITE
========================================================= */

.gallery-folder {
    color: #ffffff !important;
}

.gallery-folder h1,
.gallery-folder h2,
.gallery-folder h3,
.gallery-folder h4,
.gallery-folder p,
.gallery-folder span,
.gallery-folder strong,
.gallery-folder b,

.gallery-card h1,
.gallery-card h2,
.gallery-card h3,
.gallery-card h4,
.gallery-card p,
.gallery-card span,
.gallery-card strong,
.gallery-card b,

.category-card h1,
.category-card h2,
.category-card h3,
.category-card h4,
.category-card p,
.category-card span,
.category-card strong,
.category-card b,

.folder-card h1,
.folder-card h2,
.folder-card h3,
.folder-card h4,
.folder-card p,
.folder-card span,
.folder-card strong,
.folder-card b {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* Gallery folder icon + arrow golden */

.gallery-folder .folder-icon,
.gallery-folder .folder-arrow,
.gallery-card .folder-icon,
.gallery-card .arrow,
.category-card .folder-icon,
.category-card .arrow,
.folder-card .folder-icon,
.folder-card .arrow {
    color: #ffd700 !important;
}


/* =========================================================
   15. GALLERY SEARCH BOX
   WHITE + BLACK BORDER
========================================================= */

#gallerySearch,
.gallery-search input,
.search-box,
.search-category,
#gallerySection input[type="search"],
#gallerySection input[type="text"] {
    background: #ffffff !important;
    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 10px !important;

    opacity: 1 !important;
    visibility: visible !important;
}

#gallerySearch::placeholder,
.gallery-search input::placeholder,
.search-box::placeholder,
.search-category::placeholder,
#gallerySection input::placeholder {
    color: #444444 !important;
    opacity: 1 !important;
}


/* =========================================================
   16. CONTACT SECTION NORMAL TEXT — BLACK
   INCLUDING SECOND EMAIL / DOMAIN
========================================================= */

.contact,
#contact {
    color: #000000 !important;
}

.contact h1,
.contact h2,
.contact h3,
.contact h4,
.contact p,
.contact span,

#contact h1,
#contact h2,
#contact h3,
#contact h4,
#contact p,
#contact span,

.contact-email,
.contact-email a,
.email-link,
.email-link a,
.website-link,
.website-link a,

.email-card h1,
.email-card h2,
.email-card h3,
.email-card h4,
.email-card p,
.email-card span,
.email-card a {
    color: #000000 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   17. CONTACT FORM
   WHITE + BLACK BORDER
========================================================= */

input,
textarea,
select {
    background: #ffffff !important;
    color: #000000 !important;

    border: 2px solid #000000 !important;
}

input::placeholder,
textarea::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
}


/* =========================================================
   18. FIND US — BLACK
========================================================= */

.find-us,
.find-us h1,
.find-us h2,
.find-us h3,

.find-us-title,
.find-title,
.location-title,
.map-title,

.map-section h1,
.map-section h2,
.map-section h3 {
    color: #000000 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   19. MAP ADDRESS DARK BAR
   KEEP BAR
   TEXT WHITE
========================================================= */

.map-address,
.map-address h1,
.map-address h2,
.map-address h3,
.map-address p,
.map-address span,

.address-bar,
.address-bar h1,
.address-bar h2,
.address-bar h3,
.address-bar p,
.address-bar span,

.location-bar,
.location-bar h1,
.location-bar h2,
.location-bar h3,
.location-bar p,
.location-bar span,

#officeText {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   20. FOOTER DARK
   ALL TEXT WHITE
========================================================= */

footer,
.footer {
    color: #ffffff !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer p,
footer span,
footer strong,
footer b,
footer a,

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer p,
.footer span,
.footer strong,
.footer b,
.footer a {
    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   21. IMAGES + MAP NORMAL
========================================================= */

img,
iframe {
    opacity: 1 !important;
    filter: none !important;
}


/* =========================================================
   22. LIGHT CARD HOVER
========================================================= */

.card:hover,
.service-card:hover,
.contact-card:hover,
.portfolio-card:hover,
.why-card:hover,
.feature-card:hover {
    background: #f7f7f7 !important;
    border-color: #000000 !important;
}

/* 1. SIGN IN BUTTON - GREEN + WHITE TEXT */
.sign-in,
.signin,
.sign-in-btn,
.signin-btn,
.login-btn,
a[href*="signin"],
a[href*="sign-in"] {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 2px solid #16a34a !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.sign-in *,
.signin *,
.sign-in-btn *,
.signin-btn *,
.login-btn *,
a[href*="signin"] *,
a[href*="sign-in"] * {
    color: #ffffff !important;
}


/* 2. SECOND EMAIL / GMAIL - BLACK + VISIBLE */
.email-card,
.email-card p,
.email-card span,
.email-card a,
.contact-email,
.contact-email a,
.email-link,
.email-link a {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* 3. ABOUT DESCRIPTION TEXT - BLACK + VISIBLE */
#about p,
#about span,
.about p,
.about span,
.about-section p,
.about-section span,
#aboutText {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====================================================
   ZAKDE - ONLY 3 EXACT FINAL FIXES
   बाकी किसी चीज को touch नहीं करेगा
===================================================== */


/* 1. TOP LOGO KE PAAS ZAKDE NAME - BLACK + VISIBLE */
header .logo-text,
header .brand-name,
header .site-name,
header .logo h1,
header .logo h2,
header .logo span,
.navbar .logo-text,
.navbar .brand-name {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* 2. EMAIL / GMAIL - BLACK + VISIBLE */
.email-card p,
.email-card span,
.email-card a,
.contact-email,
.contact-email a,
.email-link,
.email-link a {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* 3. SEND INQUIRY BUTTON - GREEN + WHITE TEXT */
#sendInquiry {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 2px solid #16a34a !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

#sendInquiry:hover {
    background: #15803d !important;
    border-color: #15803d !important;
}

/* ONLY EMAIL TEXT BLACK - FINAL FIX */

.email-card,
.email-card * {
    color: #000000 !important;
}

/* ==========================================================
   BLOCK 10 - ZAKDE FINAL WHITE 3D MASTER DESIGN
   FINAL MASTER REFERENCE THEME
   DO NOT DELETE OLD WORKING CODE
========================================================== */

/* =========================
   1. GLOBAL WHITE 3D THEME
========================= */

html,
body {
    background:
        radial-gradient(circle at 10% 5%, rgba(124, 58, 237, 0.07), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(236, 72, 153, 0.06), transparent 25%),
        radial-gradient(circle at 50% 90%, rgba(59, 130, 246, 0.05), transparent 28%),
        #f8fafc !important;

    color: #111827 !important;
}

body {
    overflow-x: hidden;
}


/* =========================
   2. ALL WEBSITE SECTIONS
   SAME PREMIUM STRUCTURE
========================= */

section,
.about,
.why,
.services,
.gallery,
.testimonials,
.contact,
.map-section,
.company-profile {
    background: transparent !important;
    color: #111827 !important;
}

section {
    position: relative;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}


/* =========================
   3. SECTION TITLES
========================= */

section h2 {
    color: #111827 !important;
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    margin-bottom: 34px !important;
    text-align: center;
}

section h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 5px;
    margin: 12px auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #ec4899,
            #f59e0b
        );
}


/* =========================
   4. HEADER WHITE 3D
========================= */

.header {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(18px) !important;

    border-bottom:
        1px solid rgba(15,23,42,0.08) !important;

    box-shadow:
        0 8px 30px rgba(15,23,42,0.08) !important;
}

.logo-text {
    color: #111827 !important;
}

nav a {
    color: #111827 !important;
    font-weight: 600 !important;
}

nav a:hover {
    color: #7c3aed !important;
}

.book-btn {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        ) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow:
        0 8px 18px rgba(34,197,94,0.25) !important;
}


/* =========================
   5. HERO
   KEEP PHOTO + PREMIUM DEPTH
========================= */

.hero {
    background:
        url("images/banner1.jpg")
        center/cover no-repeat !important;
}

.hero .overlay {
    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,0.82),
            rgba(30,41,59,0.68),
            rgba(15,23,42,0.78)
        ) !important;
}

.hero-logo {
    color: #ffffff !important;

    text-shadow:
        0 4px 0 rgba(0,0,0,0.18),
        0 12px 30px rgba(0,0,0,0.35) !important;
}

.hero-small,
.hero-title,
.hero-text {
    color: #ffffff !important;
}

.hero-location {
    color: #facc15 !important;
}

.hero .btn {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 10px 24px rgba(34,197,94,0.28) !important;
}

.hero .btn-outline {
    color: #ffffff !important;
    border: 2px solid #ffffff !important;

    background:
        rgba(255,255,255,0.10) !important;

    backdrop-filter: blur(10px);
}


/* =========================
   6. MAIN COUNTER
   SIX-LIKE COMPACT 3D FEEL
========================= */

.counter {
    background: #f8fafc !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;

    gap: 16px !important;

    padding:
        38px max(4%,20px) !important;
}

.counter > .counter-box {
    display: block !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef2f7
        ) !important;

    border:
        1px solid rgba(15,23,42,0.08) !important;

    border-radius:
        22px !important;

    padding:
        24px 12px !important;

    box-shadow:
        10px 10px 24px rgba(15,23,42,0.10),
        -8px -8px 20px rgba(255,255,255,0.95),
        inset 1px 1px 0 rgba(255,255,255,0.9) !important;
}

.counter > .counter-box h2 {
    color: #7c3aed !important;
    font-size: 28px !important;
    margin-bottom: 4px !important;
}

.counter > .counter-box p {
    color: #475569 !important;
    font-size: 13px !important;
}


/* =========================
   7. ABOUT 3D PANEL
========================= */

.about .container {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1f5f9
        ) !important;

    border:
        1px solid rgba(15,23,42,0.07);

    border-radius:
        28px;

    padding:
        42px 34px;

    box-shadow:
        14px 14px 34px rgba(15,23,42,0.10),
        -12px -12px 30px rgba(255,255,255,0.96);
}

.about p,
#aboutText {
    color: #334155 !important;
    font-size: 17px !important;
}


/* =========================
   8. WHY CHOOSE
   DESKTOP = ONE LINE
========================= */

.why-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:
        14px !important;
}

.why-card {
    position: relative;

    min-width: 0 !important;
    min-height: 145px !important;

    padding:
        22px 14px !important;

    text-align:
        center !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    box-shadow:
        10px 10px 24px rgba(15,23,42,0.10),
        -8px -8px 20px rgba(255,255,255,0.96),
        inset 1px 1px 0 rgba(255,255,255,0.9) !important;
}

.why-card::before {
    content: "✦";

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

    width: 42px;
    height: 42px;

    margin:
        0 auto 12px;

    border-radius:
        14px;

    color:
        #ffffff;

    font-size:
        20px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );

    box-shadow:
        0 8px 18px rgba(124,58,237,0.24);
}

.why-card:nth-child(2)::before {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );
}

.why-card:nth-child(3)::before {
    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ef4444
        );
}

.why-card:nth-child(4)::before {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
}

.why-card h3 {
    color:
        #111827 !important;

    font-size:
        16px !important;

    font-weight:
        800 !important;

    margin-bottom:
        6px !important;
}

.why-card p {
    color:
        #64748b !important;

    font-size:
        12px !important;

    line-height:
        1.35 !important;
}

.why-card:hover {
    transform:
        translateY(-7px) scale(1.02) !important;

    box-shadow:
        14px 18px 34px rgba(15,23,42,0.15),
        -8px -8px 20px rgba(255,255,255,0.95) !important;
}


/* =========================
   9. SERVICES
   DESKTOP 6 PER LINE
========================= */

.service-grid {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0,1fr)) !important;

    gap:
        14px !important;
}

.service-card {
    position:
        relative;

    min-width:
        0 !important;

    min-height:
        135px !important;

    padding:
        18px 8px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    box-shadow:
        9px 9px 22px rgba(15,23,42,0.10),
        -7px -7px 18px rgba(255,255,255,0.98),
        inset 1px 1px 0 rgba(255,255,255,0.9) !important;
}

.service-card h3 {
    color:
        #111827 !important;

    font-size:
        13px !important;

    line-height:
        1.25 !important;

    font-weight:
        700 !important;
}

.service-card::before {
    content:
        "◆";

    position:
        absolute;

    top:
        13px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        #7c3aed;

    font-size:
        20px;

    filter:
        drop-shadow(
            0 5px 6px rgba(124,58,237,0.25)
        );
}

.service-card h3 {
    padding-top:
        28px;
}

.service-card:nth-child(2n)::before {
    color:
        #2563eb;
}

.service-card:nth-child(3n)::before {
    color:
        #ec4899;
}

.service-card:nth-child(4n)::before {
    color:
        #16a34a;
}

.service-card:nth-child(5n)::before {
    color:
        #f59e0b;
}

.service-card:nth-child(6n)::before {
    color:
        #ef4444;
}

.service-card:hover {
    transform:
        translateY(-7px) scale(1.03) !important;

    border-color:
        rgba(124,58,237,0.20) !important;

    box-shadow:
        12px 16px 30px rgba(15,23,42,0.15),
        -8px -8px 20px rgba(255,255,255,0.96) !important;
}


/* =========================
   10. GALLERY SEARCH
========================= */

.gallery-search input {
    background:
        #ffffff !important;

    color:
        #111827 !important;

    border:
        1px solid rgba(15,23,42,0.12) !important;

    border-radius:
        18px !important;

    box-shadow:
        inset 4px 4px 10px rgba(15,23,42,0.07),
        inset -4px -4px 10px rgba(255,255,255,0.95) !important;
}

.gallery-search input::placeholder {
    color:
        #64748b !important;
}


/* =========================
   11. GALLERY COUNTER
========================= */

.gallery-counter {
    background:
        transparent !important;

    color:
        #111827 !important;
}

.gallery-counter .counter-box {
    display:
        grid !important;

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

    background:
        transparent !important;

    border:
        none !important;
}

.gallery-counter .counter-box > div {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    color:
        #111827 !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    box-shadow:
        8px 8px 20px rgba(15,23,42,0.10),
        -6px -6px 16px rgba(255,255,255,0.96) !important;
}

.gallery-counter small {
    color:
        #64748b !important;
}


/* =========================
   12. GALLERY FOLDERS
========================= */

.gallery-folder {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    border-radius:
        22px !important;

    box-shadow:
        10px 10px 24px rgba(15,23,42,0.10),
        -8px -8px 20px rgba(255,255,255,0.96) !important;
}

.gallery-folder h3,
.folder-info h3 {
    color:
        #111827 !important;
}

.gallery-folder p,
.folder-info p {
    color:
        #64748b !important;
}

.folder-arrow {
    color:
        #7c3aed !important;
}


/* =========================
   13. PHOTO DETAIL CARDS
========================= */

.gallery-thumb-card {
    background:
        #ffffff !important;

    border:
        1px solid rgba(15,23,42,0.08) !important;

    border-radius:
        20px !important;

    box-shadow:
        8px 10px 24px rgba(15,23,42,0.11) !important;
}

.photo-details {
    background:
        #ffffff !important;

    color:
        #111827 !important;
}

.photo-details h3 {
    color:
        #111827 !important;
}

.photo-details p,
.photo-description {
    color:
        #475569 !important;
}


/* =========================
   14. TESTIMONIAL
========================= */

.testimonial-box {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    color:
        #f59e0b !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    border-radius:
        26px !important;

    box-shadow:
        12px 12px 30px rgba(15,23,42,0.11),
        -10px -10px 26px rgba(255,255,255,0.96) !important;
}

.testimonial-box p {
    color:
        #475569 !important;
}

.testimonial-box h4 {
    color:
        #111827 !important;
}


/* =========================
   15. CONTACT CARDS
========================= */

.contact-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr)) !important;

    gap:
        16px !important;
}

.contact-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    border-radius:
        22px !important;

    box-shadow:
        10px 10px 24px rgba(15,23,42,0.10),
        -8px -8px 20px rgba(255,255,255,0.96) !important;
}

.contact-card h3,
.contact-card p,
.contact-card span {
    color:
        #111827 !important;
}

.contact-btn {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 8px 18px rgba(34,197,94,0.24) !important;
}


/* =========================
   16. CONTACT FORM
========================= */

.contact-form {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1f5f9
        ) !important;

    padding:
        28px !important;

    border-radius:
        26px !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    box-shadow:
        12px 12px 30px rgba(15,23,42,0.10),
        -10px -10px 26px rgba(255,255,255,0.96) !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    background:
        #ffffff !important;

    color:
        #111827 !important;

    border:
        1px solid rgba(15,23,42,0.13) !important;

    box-shadow:
        inset 3px 3px 8px rgba(15,23,42,0.05) !important;
}

.contact-form button {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 10px 22px rgba(34,197,94,0.24) !important;
}


/* =========================
   17. SOCIAL BUTTONS
========================= */

.social-btn {
    border-radius:
        16px !important;

    box-shadow:
        0 10px 22px rgba(15,23,42,0.14) !important;
}


/* =========================
   18. MAP
========================= */

.map-address {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    color:
        #111827 !important;

    border:
        1px solid rgba(15,23,42,0.08) !important;

    box-shadow:
        8px 8px 20px rgba(15,23,42,0.10),
        -6px -6px 16px rgba(255,255,255,0.96) !important;
}

.map-address span {
    color:
        #111827 !important;
}

.map-section iframe {
    border:
        8px solid #ffffff !important;

    border-radius:
        24px !important;

    box-shadow:
        12px 16px 32px rgba(15,23,42,0.14) !important;
}


/* =========================
   19. COMPANY PROFILE
========================= */

.company-profile .container {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf2f7
        ) !important;

    padding:
        40px 25px !important;

    border-radius:
        28px !important;

    border:
        1px solid rgba(15,23,42,0.07) !important;

    box-shadow:
        12px 12px 30px rgba(15,23,42,0.10),
        -10px -10px 26px rgba(255,255,255,0.96) !important;
}

.company-profile p {
    color:
        #475569 !important;
}

.download-btn {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 10px 22px rgba(34,197,94,0.24) !important;
}


/* =========================
   20. FOOTER
========================= */

footer {
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #111827
        ) !important;

    border-top:
        none !important;
}

footer h3 {
    color:
        #ffffff !important;
}

footer p {
    color:
        #cbd5e1 !important;
}


/* ==========================================================
   21. MOBILE FINAL RULE
   EXACTLY 6 CARDS IN ONE LINE
========================================================== */

@media (max-width: 768px) {

    .container {
        width:
            96% !important;
    }

    section {
        padding:
            44px 8px !important;
    }

    section h2 {
        font-size:
            25px !important;

        margin-bottom:
            24px !important;
    }


    /* WHY CARDS - ALL IN ONE LINE */

    .why-grid {
        grid-template-columns:
            repeat(4, minmax(0,1fr)) !important;

        gap:
            5px !important;
    }

    .why-card {
        min-height:
            108px !important;

        padding:
            8px 3px !important;

        border-radius:
            12px !important;
    }

    .why-card::before {
        width:
            27px !important;

        height:
            27px !important;

        border-radius:
            8px !important;

        font-size:
            12px !important;

        margin-bottom:
            6px !important;
    }

    .why-card h3 {
        font-size:
            8px !important;

        line-height:
            1.15 !important;
    }

    .why-card p {
        font-size:
            6.5px !important;

        line-height:
            1.2 !important;
    }


    /* SERVICES - EXACTLY 6 IN ONE LINE */

    .service-grid {
        grid-template-columns:
            repeat(6, minmax(0,1fr)) !important;

        gap:
            4px !important;
    }

    .service-card {
        min-width:
            0 !important;

        min-height:
            88px !important;

        padding:
            7px 2px !important;

        border-radius:
            11px !important;

        box-shadow:
            4px 5px 10px rgba(15,23,42,0.10),
            -3px -3px 8px rgba(255,255,255,0.96) !important;
    }

    .service-card::before {
        top:
            9px !important;

        font-size:
            13px !important;
    }

    .service-card h3 {
        font-size:
            7px !important;

        line-height:
            1.15 !important;

        padding-top:
            22px !important;

        word-break:
            normal !important;

        overflow-wrap:
            anywhere !important;
    }


    /* COUNTER */

    .counter {
        grid-template-columns:
            repeat(4, minmax(0,1fr)) !important;

        gap:
            5px !important;

        padding:
            24px 8px !important;
    }

    .counter > .counter-box {
        min-width:
            0 !important;

        padding:
            12px 3px !important;

        border-radius:
            12px !important;
    }

    .counter > .counter-box h2 {
        font-size:
            14px !important;
    }

    .counter > .counter-box p {
        font-size:
            7px !important;
    }


    /* CONTACT */

    .contact-grid {
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;

        gap:
            6px !important;
    }

    .contact-card {
        min-width:
            0 !important;

        padding:
            12px 4px !important;

        border-radius:
            13px !important;
    }

    .contact-card h3 {
        font-size:
            11px !important;
    }

    .contact-card p {
        font-size:
            7px !important;

        overflow-wrap:
            anywhere !important;
    }

    .contact-btn {
        font-size:
            8px !important;

        padding:
            7px 8px !important;
    }


    /* GALLERY */

    .gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            8px !important;
    }

    .gallery-folder {
        padding:
            8px !important;

        min-height:
            82px !important;

        border-radius:
            13px !important;
    }

    .folder-cover {
        width:
            48px !important;

        height:
            48px !important;

        margin-right:
            6px !important;
    }

    .folder-info h3 {
        font-size:
            9px !important;
    }

    .folder-info p {
        font-size:
            7px !important;
    }

    .folder-arrow {
        font-size:
            13px !important;
    }


    /* ABOUT */

    .about .container {
        padding:
            24px 15px !important;

        border-radius:
            20px !important;
    }

    .about p,
    #aboutText {
        font-size:
            13px !important;

        line-height:
            1.65 !important;
    }


    /* FORM */

    .contact-form {
        padding:
            16px !important;

        border-radius:
            18px !important;
    }

}


/* =========================
   VERY SMALL MOBILE
   STILL KEEP 6 SERVICES
========================= */

@media (max-width: 480px) {

    .service-grid {
        grid-template-columns:
            repeat(6, minmax(0,1fr)) !important;
    }

    .service-card {
        min-height:
            82px !important;
    }

    .service-card h3 {
        font-size:
            6.3px !important;
    }

    .service-card::before {
        font-size:
            12px !important;
    }

    .gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

}

/* =========================================
   FINAL FIX - ABOUT TEXT + MAP ADDRESS BLACK
========================================= */

/* About ZAKDE description text */
.about p,
.about #aboutText {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Find Us address text */
.map-address,
.map-address span,
#officeText {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}