/* =========================================================
   LUXORGEL - MAIN STYLE.CSS
   LIGHT / PREMIUM DARK THEME
   PAGE CONTENT SECTION KE STYLES SAME RAKHE GAYE HAIN
========================================================= */


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

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


/* =========================================================
   BODY
========================================================= */

body{
    background:#242424;
    color:#f5f5f5;
    min-height:100vh;
}


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

a{
    transition:.25s ease;
}


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

header,
.site-header{
    background:#2b2b2b;
    padding:20px 50px;

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

    border-bottom:1px solid #383838;

    box-shadow:
        0 3px 15px rgba(0,0,0,.22);
}


.logo{
    font-size:30px;
    font-weight:bold;
    color:#FFD700;
}


nav a,
.nav a{
    color:#eeeeee;
    text-decoration:none;
    margin-left:30px;
    transition:.3s;
}


nav a:hover,
.nav a:hover{
    color:#FFD700;
}


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

.hero{
    padding:35px 20px;

    text-align:center;

    background:
        linear-gradient(
            rgba(20,20,20,.60),
            rgba(20,20,20,.75)
        ),
        url(images/hero.jpg);

    background-size:cover;
    background-position:center;

    min-height:190px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}


.hero h1{
    font-size:40px;
    margin-bottom:8px;
    color:#fff;

    text-shadow:
        0 3px 15px rgba(0,0,0,.5);
}


.hero p{
    font-size:16px;
    color:#d5d5d5;
    margin-bottom:15px;
}


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

.btn,
.post-btn{
    display:inline-block;

    background:#FFD700;
    color:#000;

    padding:16px 40px;

    border-radius:7px;

    text-decoration:none;

    font-weight:bold;

    border:none;

    box-shadow:
        0 4px 14px rgba(255,215,0,.15);

    transition:.25s;
}


.btn:hover,
.post-btn:hover{
    background:#ffca28;

    color:#000;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255,215,0,.25);
}


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

footer,
.site-footer{
    background:#2b2b2b;

    padding:35px 20px;

    text-align:center;

    margin-top:120px;

    color:#aaa;

    border-top:1px solid #383838;
}


/* =========================================================
   LATEST ADS
========================================================= */

.latest-ads{
    width:95%;
    max-width:1400px;

    margin:auto;

    padding:70px 20px;
}


.latest-ads h2{
    text-align:center;

    margin-bottom:50px;

    font-size:42px;

    color:#fff;
}


/* =========================================================
   ADS GRID
========================================================= */

.ads-grid{
    display:grid;

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

    gap:25px;
}


/* =========================================================
   AD CARD
========================================================= */

.ad-card{
    background:#303030;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #383838;

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

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


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

    border-color:#4a4a4a;

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


/* =========================================================
   AD IMAGES
========================================================= */

.ad-card img,
.ad-image{
    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

    background:#2b2b2b;

    transition:.4s;
}


.ad-card:hover img{
    transform:scale(1.02);
}


/* =========================================================
   AD CARD TITLE
========================================================= */

.ad-card h3{
    padding:15px;

    font-size:24px;

    color:#fff;
}


.ad-card p{
    padding:0 15px 10px;

    color:#c8c8c8;
}


.ad-card a{
    display:block;

    margin:15px;

    text-align:center;

    background:#FFD700;

    color:#000;

    padding:14px;

    text-decoration:none;

    border-radius:7px;

    font-weight:bold;
}


.ad-card a:hover{
    background:#ffca28;
}


/* =========================================================
   AD CARD CONTENT
========================================================= */

.ad-card-content{
    padding:16px;

    background:#303030;
}


.ad-card-content h3{
    margin:0 0 8px;

    color:#fff;
}


.ad-card-content p{
    margin:7px 0;

    color:#c8c8c8;
}


.ad-card-content .price{
    color:#FFD700;

    font-size:20px;

    font-weight:bold;
}


/* =========================================================
   PRICE
========================================================= */

.price{
    color:#FFD700;

    font-size:26px;

    font-weight:bold;

    padding:0 18px;

    margin-top:10px;
}


/* =========================================================
   NO IMAGE
========================================================= */

.no-image{
    height:260px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#343434;

    color:#999;
}


/* =========================================================
   NO RESULTS
========================================================= */

.no-results{
    width:100%;

    text-align:center;

    padding:60px 20px;

    background:#303030;

    border:1px solid #383838;

    border-radius:12px;
}


.no-results h3{
    font-size:26px;

    color:#fff;
}


.no-results p{
    color:#aaa;

    margin-bottom:25px;
}


/* =========================================================
   POST AD CONTAINER
========================================================= */

.post-ad-container{
    width:90%;

    max-width:900px;

    margin:60px auto;

    background:#2b2b2b;

    padding:30px;

    border-radius:12px;

    border:1px solid #383838;

    box-shadow:
        0 8px 30px rgba(0,0,0,.22);
}


.post-ad-container h2{
    text-align:center;

    margin-bottom:30px;

    color:#fff;
}


.post-ad-container form{
    display:block !important;
}


.post-ad-container label{
    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:bold;

    color:#eeeeee;
}


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

.post-ad-container input,
.post-ad-container select,
.post-ad-container textarea{

    width:100%;

    padding:15px;

    background:#343434;

    color:#f5f5f5;

    border:1px solid #444;

    border-radius:8px;

    font-size:16px;

    transition:
        border-color .2s,
        background .2s,
        box-shadow .2s;
}


.post-ad-container input::placeholder,
.post-ad-container textarea::placeholder{
    color:#999;
}


.post-ad-container input:focus,
.post-ad-container select:focus,
.post-ad-container textarea:focus{

    outline:none;

    background:#383838;

    border-color:#FFD700;

    box-shadow:
        0 0 0 2px
        rgba(255,215,0,.08);
}


.post-ad-container textarea{
    height:150px;

    resize:vertical;
}


/* =========================================================
   POST BUTTON
========================================================= */

.post-ad-container button{

    width:100%;

    margin-top:25px;

    padding:16px;

    background:#FFD700;

    color:#000;

    border:none;

    border-radius:8px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;
}


.post-ad-container button:hover{

    background:#ffca28;

    transform:translateY(-2px);

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


.post-ad-container button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;
}


/* =========================================================
   SERVICES - POST AD
========================================================= */

.services-grid{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;
}


.services-grid input{

    width:100%;

    padding:15px;

    background:#343434;

    color:#f5f5f5;

    border:1px solid #444;

    border-radius:8px;

    font-size:15px;

    box-sizing:border-box;
}


.services-grid input::placeholder{
    color:#999;
}


.services-grid input:focus{

    outline:none;

    background:#383838;

    border-color:#FFD700;

    box-shadow:
        0 0 0 2px
        rgba(255,215,0,.08);
}


/* =========================================================
   AD DETAILS
========================================================= */

.ad-details{

    width:95%;

    max-width:1400px;

    margin:60px auto;

    display:grid;

    grid-template-columns:
        1.2fr 1fr;

    gap:40px;
}


.gallery{

    width:100%;

    background:#242424;

    padding:20px;

    border-radius:12px;

    border:1px solid #383838;

    box-shadow:
        0 6px 25px rgba(0,0,0,.22);
}


.main-image{

    width:100%;

    height:600px;

    object-fit:contain;

    background:#2b2b2b;

    border-radius:10px;
}


.thumbs{

    display:flex;

    gap:12px;

    margin-top:15px;

    flex-wrap:wrap;
}


.thumb{

    width:100px;

    height:100px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    border:2px solid #444;

    transition:.3s;
}


.thumb:hover{

    border-color:#FFD700;

    transform:translateY(-2px);
}


.ad-info{

    background:#242424;

    padding:30px;

    border-radius:12px;

    border:1px solid #383838;

    height:fit-content;

    box-shadow:
        0 6px 25px rgba(0,0,0,.22);
}


.ad-info h1{

    font-size:38px;

    margin-bottom:20px;

    color:#fff;
}


.ad-info p{

    margin:15px 0;

    color:#d0d0d0;

    font-size:18px;
}


.ad-info .price{

    font-size:40px;

    color:#FFD700;

    font-weight:bold;

    margin:25px 0;
}


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

.call-btn,
.wa-btn{

    display:block;

    text-align:center;

    text-decoration:none;

    padding:16px;

    border-radius:8px;

    margin-top:15px;

    font-size:18px;

    font-weight:bold;

    transition:.3s;
}


.call-btn{

    background:#FFD700;

    color:#000;
}


.call-btn:hover{

    background:#ffca28;

    transform:translateY(-2px);
}


.wa-btn{

    background:#25D366;

    color:#fff;
}


.wa-btn:hover{

    background:#20c15d;

    transform:translateY(-2px);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.description-box{

    width:95%;

    max-width:1400px;

    margin:60px auto;

    background:#242424;

    padding:30px;

    border-radius:12px;

    border:1px solid #383838;

}


.description-box h2{

    margin-bottom:20px;

    color:#fff;
}


.description-box p{

    color:#d0d0d0;

    line-height:1.8;
}


/* =========================================================
   RELATED ADS
========================================================= */

.related-ads{

    width:95%;

    max-width:1400px;

    margin:60px auto;
}


.related-ads h2{

    margin-bottom:30px;

    text-align:center;

    color:#fff;
}


/* =========================================================
   SEARCH SECTION
========================================================= */

.search-section{

    width:90%;

    max-width:1200px;

    margin:40px auto 60px;
}


.search-form,
.search-box{

    display:grid;

    grid-template-columns:
        2fr
        1.2fr
        1.2fr
        1fr
        1fr
        auto
        auto;

    gap:12px;

    align-items:center;
}


.search-form input,
.search-form select,
.search-box input,
.search-box select{

    width:100%;

    height:48px;

    padding:0 14px;

    box-sizing:border-box;

    background:#343434;

    color:#f5f5f5;

    border:1px solid #444;

    border-radius:8px;

    font-size:15px;

    outline:none;

    transition:.2s;
}


.search-form input::placeholder,
.search-box input::placeholder{

    color:#999;
}


.search-form input:focus,
.search-form select:focus,
.search-box input:focus,
.search-box select:focus{

    background:#383838;

    border-color:#FFD700;

    box-shadow:
        0 0 0 2px
        rgba(255,215,0,.08);
}


.search-form select,
.search-box select{

    cursor:pointer;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.search-btn{

    height:48px;

    padding:0 24px;

    background:#FFD700;

    color:#000;

    border:0;

    border-radius:8px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;
}


.search-btn:hover{

    background:#ffca28;

    transform:translateY(-2px);

}


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

.reset-btn{

    height:48px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    background:#3a3a3a;

    color:#fff;

    border:1px solid #4a4a4a;

    border-radius:8px;

    text-decoration:none;

}


.reset-btn:hover{

    background:#484848;

    color:#fff;

}


/* =========================================================
   CITY MEGA MENU
========================================================= */

.city-mega-wrapper{

    position:relative;

    width:100%;
}


.city-mega-button{

    width:100%;

    height:48px;

    padding:0 14px;

    background:#343434;

    color:#f5f5f5;

    border:1px solid #444;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    font-size:14px;

    text-align:left;

}


.city-mega-button:hover{

    border-color:#FFD700;

}


.city-mega-button .arrow{

    color:#aaa;

    font-size:11px;
}


.city-mega-menu{

    display:none;

    position:absolute;

    top:55px;

    left:0;

    width:700px;

    max-width:calc(100vw - 40px);

    background:#242424;

    border:1px solid #444;

    border-radius:10px;

    padding:18px;

    z-index:99999;

    box-shadow:
        0 12px 40px
        rgba(0,0,0,.45);
}


.city-mega-menu.active{

    display:block;
}


.city-mega-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:12px;

    margin-bottom:14px;

    border-bottom:1px solid #3d3d3d;
}


.city-mega-header strong{

    color:#FFD700;

    font-size:16px;
}


#cityCount{

    color:#aaa;

    font-size:13px;
}


.city-grid{

    display:grid;

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

    gap:8px;

    max-height:360px;

    overflow-y:auto;

    padding-right:4px;
}


.city-item{

    min-height:40px;

    border:1px solid transparent;

    background:#2c2c2c;

    color:#eee;

    padding:9px 10px;

    border-radius:6px;

    cursor:pointer;

    text-align:left;

    font-size:13px;
}


.city-item:hover{

    background:#FFD700;

    color:#000;
}


.city-item.selected{

    background:#FFD700;

    color:#000;

    font-weight:bold;
}


.city-item.all-city{

    background:#3a3a3a;

    color:#FFD700;

    font-weight:bold;
}


.city-grid::-webkit-scrollbar{

    width:7px;
}


.city-grid::-webkit-scrollbar-track{

    background:#2b2b2b;
}


.city-grid::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:10px;
}


.city-grid::-webkit-scrollbar-thumb:hover{

    background:#777;
}


/* =========================================================
   LATEST SECTION
========================================================= */

.latest-section{

    max-width:1250px;

    margin:55px auto;

    padding:0 20px;
}


.latest-section h2{

    text-align:center;

    font-size:38px;

    margin-bottom:35px;

    color:#fff;
}


.latest-section .ads-grid{

    display:grid;

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

    gap:25px;
}


/* =========================================================
   LATEST AD CARD
========================================================= */

.latest-section .ad-card{

    background:#303030;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #383838;

}


.ad-content{

    padding:20px;
}


.ad-content h3{

    font-size:20px;

    margin-bottom:10px;

    color:#fff;
}


.ad-location{

    color:#bbb;

    font-size:14px;

    margin-bottom:10px;
}


.ad-price{

    color:#FFD700;

    font-size:20px;

    font-weight:bold;

    margin-bottom:15px;
}


.view-btn{

    display:inline-block;

    background:#FFD700;

    color:#000;

    padding:10px 18px;

    border-radius:6px;

    text-decoration:none;

    font-weight:bold;
}


.view-btn:hover{

    background:#ffca28;

}


/* =========================================================
   NO ADS
========================================================= */

.no-ads{

    text-align:center;

    color:#999;

    padding:50px;

    background:#303030;

    border:1px solid #383838;

    border-radius:12px;
}


/* =========================================================
   PAGE CONTENT
   !!! KEEPING YOUR EXISTING CONTENT STYLE SAME !!!
========================================================= */

.page-content-section{
    width:95%;
    max-width:1200px;
    margin:20px auto 70px;
    padding:45px 50px;

    background:#1b1b1b;

    border:1px solid #292929;
    border-radius:12px;

    box-shadow:0 8px 30px rgba(0,0,0,.30);
}


/* Main Content Title */

.page-content-title{
    text-align:center;

    color:#FFD700;

    font-size:36px;
    line-height:1.35;

    margin:0 0 35px;

    font-weight:bold;
}


/* Content Body */

.page-content-body{
    color:#d5d5d5;

    font-size:17px;

    line-height:1.85;
}


/* Paragraph */

.page-content-body p{
    color:#d0d0d0;

    margin:0 0 20px;
}


/* H1 */

.page-content-body h1{
    color:#FFD700;

    font-size:34px;

    margin:35px 0 18px;

    line-height:1.35;
}


/* H2 */

.page-content-body h2{
    color:#FFD700;

    font-size:28px;

    margin:32px 0 16px;

    padding-bottom:10px;

    border-bottom:1px solid #333;

    line-height:1.4;
}


/* H3 */

.page-content-body h3{
    color:#fff;

    font-size:22px;

    margin:25px 0 12px;

    line-height:1.4;
}


/* Strong */

.page-content-body strong{
    color:#fff;

    font-weight:bold;
}


/* Links */

.page-content-body a{
    color:#FFD700;

    text-decoration:none;

    font-weight:bold;
}


.page-content-body a:hover{
    text-decoration:underline;
}


/* Lists */

.page-content-body ul,
.page-content-body ol{
    margin:15px 0 25px 25px;

    padding-left:15px;
}


.page-content-body li{
    margin-bottom:10px;

    padding-left:5px;
}


/* Blockquote */

.page-content-body blockquote{
    margin:25px 0;

    padding:18px 22px;

    background:#202020;

    border-left:4px solid #FFD700;

    border-radius:6px;

    color:#ccc;
}


/* Horizontal Line */

.page-content-body hr{
    border:0;

    border-top:1px solid #333;

    margin:30px 0;
}


/* Tables */

.page-content-body table{
    width:100%;

    border-collapse:collapse;

    margin:25px 0;

    background:#202020;
}


.page-content-body th{
    background:#FFD700;

    color:#000;

    padding:13px;

    text-align:left;
}


.page-content-body td{
    padding:13px;

    border:1px solid #333;

    color:#ddd;
}


/* Images */

.page-content-body img{
    display:block;

    max-width:100%;

    height:auto;

    margin:25px auto;

    border-radius:10px;
}


/* FAQ */

.page-content-body .faq{
    background:#202020;

    border:1px solid #303030;

    border-radius:8px;

    padding:20px;

    margin:15px 0;
}


.page-content-body .faq-question{
    color:#FFD700;

    font-size:18px;

    font-weight:bold;

    margin-bottom:8px;
}


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

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


::-webkit-scrollbar-track{
    background:#242424;
}


::-webkit-scrollbar-thumb{
    background:#444;

    border-radius:10px;
}


::-webkit-scrollbar-thumb:hover{
    background:#666;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media(max-width:1100px){

    .search-box,
    .search-form{

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

    }


    .ads-grid,
    .latest-section .ads-grid{

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

    }


    .city-grid{

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

    }


    .ad-details{

        grid-template-columns:1fr;

    }

}


/* =========================================================
   RESPONSIVE - 900
========================================================= */

@media(max-width:900px){

    .search-form,
    .search-box{

        grid-template-columns:
            1fr 1fr;

    }


    .ad-details{

        grid-template-columns:1fr;

    }


    .main-image{

        height:400px;

    }


    .thumb{

        width:80px;

        height:80px;

    }


    .ad-info h1{

        font-size:30px;

    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media(max-width:700px){

    header,
    .site-header{

        height:auto;

        padding:18px 20px;

        flex-direction:column;

        gap:15px;

    }


    nav a,
    .nav a{

        margin-left:10px;

        margin-right:10px;

    }


    .nav{

        gap:15px;

        flex-wrap:wrap;

        justify-content:center;

    }


    .hero{
        min-height:115px !important;
        height:115px !important;
        padding:14px 12px !important;
    }


    .hero h1{
        font-size:26px !important;
        line-height:1.05 !important;
        margin-bottom:5px !important;
    }


    .hero p{
        font-size:12px !important;
        line-height:1.1 !important;
        margin-bottom:8px !important;
    }


    .search-box,
    .search-form{

        grid-template-columns:1fr;

    }


    .search-btn,
    .reset-btn{

        width:100%;

        box-sizing:border-box;

    }


    .city-mega-menu{

        width:100%;

        max-width:none;

    }


    .city-grid{

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

        max-height:320px;

    }


    .ads-grid,
    .latest-section .ads-grid{

        grid-template-columns:1fr;

    }


    .latest-section h2{

        font-size:30px;

    }


    .latest-ads h2{

        font-size:32px;

    }


    .post-ad-container{

        width:94%;

        padding:20px;

        margin:35px auto;

    }


    .services-grid{

        grid-template-columns:1fr;

    }


    .main-image{

        height:350px;

    }


    .no-image{

        height:230px;

    }


    .ad-info{

        padding:22px;

    }


    .ad-info h1{

        font-size:27px;

    }


    .ad-info .price{

        font-size:32px;

    }


    .buttons{

        display:flex;

        flex-direction:column;

    }


    .page-content-section{

        width:92%;

        margin:20px auto 50px;

        padding:30px 20px;

        border-radius:10px;

    }


    .page-content-title{

        font-size:27px;

        margin-bottom:25px;

    }


    .page-content-body{

        font-size:15px;

        line-height:1.8;

    }


    .page-content-body h1{

        font-size:27px;

    }


    .page-content-body h2{

        font-size:23px;

        margin-top:25px;

    }


    .page-content-body h3{

        font-size:19px;

    }


    .page-content-body table{

        display:block;

        overflow-x:auto;

    }


    footer,
    .site-footer{

        margin-top:70px;

    }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media(max-width:450px){

    .logo{

        font-size:25px;

    }


    .hero h1{
        font-size:24px !important;
        line-height:1.05 !important;
    }


    .hero p{
        font-size:11px !important;
    }


    .city-grid{

        grid-template-columns:1fr;

    }


    .latest-section{

        padding:0 12px;

    }


    .ad-card h3{

        font-size:20px;

    }

}

/* =========================================================
   LUXORGEL LIGHT PREMIUM THEME
   FORCE OVERRIDE
   PAGE CONTENT NOT TOUCHED
========================================================= */

body{
    background:#242424 !important;
    color:#f2f2f2 !important;
}

header{
    background:#2b2b2b !important;
    border-bottom:1px solid #3a3a3a !important;
}

footer{
    background:#2b2b2b !important;
    color:#aaa !important;
    border-top:1px solid #383838 !important;
}


/* CARDS */

.ad-card{
    background:#303030 !important;
    border:1px solid #383838 !important;
    box-shadow:0 6px 20px rgba(0,0,0,.25) !important;
}

.ad-card-content{
    background:#303030 !important;
}

.ad-card h3{
    color:#fff !important;
}

.ad-card p{
    color:#ccc !important;
}


/* POST AD */

.post-ad-container{
    background:#2b2b2b !important;
    border:1px solid #383838 !important;
    border-radius:12px !important;
    box-shadow:0 8px 25px rgba(0,0,0,.25) !important;
}

.post-ad-container input,
.post-ad-container select,
.post-ad-container textarea{
    background:#343434 !important;
    color:#f5f5f5 !important;
    border:1px solid #444 !important;
}

.post-ad-container input:focus,
.post-ad-container select:focus,
.post-ad-container textarea:focus{
    background:#303030 !important;
    border-color:#FFD700 !important;
}


/* SEARCH */

.search-form input,
.search-form select,
.search-box input,
.search-box select{
    background:#343434 !important;
    color:#f5f5f5 !important;
    border:1px solid #444 !important;
}

.search-form input:focus,
.search-form select:focus,
.search-box input:focus,
.search-box select:focus{
    background:#303030 !important;
    border-color:#FFD700 !important;
}


/* SEARCH BUTTON */

.search-btn,
.btn{
    background:#FFD700 !important;
    color:#000 !important;
}

.search-btn:hover,
.btn:hover{
    background:#ffca28 !important;
}


/* AD DETAILS */

.gallery{
    background:#242424 !important;
    border:1px solid #383838 !important;
}

.ad-info{
    background:#242424 !important;
    border:1px solid #383838 !important;
}

.ad-info h1{
    color:#fff !important;
}

.ad-info p{
    color:#d0d0d0 !important;
}

.main-image{
    background:#2b2b2b !important;
}


/* DESCRIPTION */

.description-box{
    background:#242424 !important;
    border:1px solid #383838 !important;
}

.description-box p{
    color:#d0d0d0 !important;
}


/* SERVICES */

.services-grid input{
    background:#343434 !important;
    color:#f5f5f5 !important;
    border:1px solid #444 !important;
}

.services-grid input:focus{
    background:#303030 !important;
    border-color:#FFD700 !important;
}


/* NO IMAGE */

.no-image{
    background:#343434 !important;
    color:#999 !important;
}


/* RESET */

.reset-btn{
    background:#3a3a3a !important;
    color:#fff !important;
}

.reset-btn:hover{
    background:#4a4a4a !important;
}


/* PAGE CONTENT
   DO NOT CHANGE
*/

.page-content-section{
    background:#1b1b1b;
}

.page-content-body{
    color:#d5d5d5;
}

/* =========================================================
   FINAL COMPACT HERO OVERRIDE
========================================================= */
.hero{
    min-height:190px !important;
    height:190px !important;
    max-height:190px !important;
    padding:25px 15px !important;
    overflow:hidden !important;
}

.hero h1{
    font-size:40px !important;
    line-height:1.05 !important;
    margin:0 0 8px !important;
}

.hero p{
    font-size:16px !important;
    line-height:1.15 !important;
    margin:0 0 14px !important;
}

.hero .btn,
.hero .post-btn{
    padding:10px 24px !important;
    font-size:14px !important;
}

@media(max-width:700px){
    .hero{
        min-height:115px !important;
        height:115px !important;
        max-height:115px !important;
        padding:12px 10px !important;
    }

    .hero h1{
        font-size:26px !important;
        line-height:1.05 !important;
        margin:0 0 5px !important;
    }

    .hero p{
        font-size:12px !important;
        line-height:1.1 !important;
        margin:0 0 8px !important;
    }

    .hero .btn,
    .hero .post-btn{
        padding:7px 18px !important;
        font-size:12px !important;
    }
}

@media(max-width:450px){
    .hero{
        min-height:105px !important;
        height:105px !important;
        max-height:105px !important;
    }

    .hero h1{
        font-size:24px !important;
    }

    .hero p{
        font-size:11px !important;
    }
}

/* =========================================================
   HERO - FINAL COMPACT FIX
   This intentionally overrides every previous .hero rule.
========================================================= */

body section.hero{
    min-height:160px !important;
    height:160px !important;
    max-height:160px !important;
    padding:0 20px !important;
    margin:0 !important;
    overflow:hidden !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
}

body section.hero h1{
    font-size:40px !important;
    line-height:1.05 !important;
    margin:0 0 8px !important;
}

body section.hero p{
    font-size:16px !important;
    line-height:1.2 !important;
    margin:0 0 14px !important;
}

body section.hero .btn,
body section.hero .post-btn{
    padding:10px 26px !important;
    font-size:14px !important;
    line-height:1.2 !important;
}

@media(max-width:700px){
    body section.hero{
        min-height:105px !important;
        height:105px !important;
        max-height:105px !important;
        padding:0 10px !important;
    }

    body section.hero h1{
        font-size:25px !important;
        line-height:1.05 !important;
        margin:0 0 5px !important;
        max-width:300px !important;
    }

    body section.hero p{
        font-size:12px !important;
        line-height:1.1 !important;
        margin:0 0 7px !important;
    }

    body section.hero .btn,
    body section.hero .post-btn{
        padding:7px 18px !important;
        font-size:12px !important;
    }
}

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

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

.logo a{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    width:150px;
    height:auto;
    display:block;
}

@media(max-width:600px){
    .logo img{
        width:105px;
    }
}