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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:#f3f3f5;

    color:#111;

    overflow-x:hidden;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{

    width:100%;
    max-width:1440px;

    margin:0 auto;

    padding-left:30px;
    padding-right:30px;

}

/* =========================================================
TOP BAR
========================================================= */

.dxb-topbar{

    background:#fff;

    border-bottom:
    1px solid rgba(0,0,0,0.06);

    padding:18px 0;

}

.dxb-topbar-grid{

    display:grid;

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

    gap:20px;

}

.dxb-top-item{

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:14px;

}

.dxb-top-item strong{

    font-size:18px;

}

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

.dxb-header{

    background:#fff;

    padding:28px 0;

}

.dxb-header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.dxb-logo{

    font-size:64px;

    font-weight:900;

    line-height:1;

}

.dxb-logo span{

    display:block;

    font-size:12px;

    letter-spacing:4px;

    margin-top:10px;

    color:#777;

}

.dxb-header-icons{

    display:flex;

    gap:14px;

}

.dxb-header-icons button{

    width:48px;
    height:48px;

    border-radius:50%;

    border:none;

    background:#f3f3f5;

    cursor:pointer;

}

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

.dxb-hero-v2{

    padding:40px 0 80px;

}

.dxb-hero-v2-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 320px;

    gap:24px;

    align-items:start;

}

/* BIG HERO */

.dxb-hero-big-card{

    position:relative;

    height:720px;

    border-radius:32px;

    overflow:hidden;

}

.dxb-hero-big-card img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.dxb-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.10)
    );

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}

.dxb-badge{

    display:inline-block;

    background:#ff6b4a;

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:10px 16px;

    border-radius:999px;

    width:max-content;

    text-transform:uppercase;

}

.dxb-hero-overlay h1{

    color:#fff;

    font-size:68px;

    line-height:1.1;

    margin:22px 0;

}

.dxb-hero-overlay p{

    color:rgba(255,255,255,0.82);

    font-size:18px;

    line-height:1.8;

    max-width:700px;

}

.dxb-readmore{

    margin-top:28px;

    background:#d9a441;

    color:#fff;

    padding:16px 24px;

    border-radius:14px;

    width:max-content;

    font-weight:700;

}

/* STACK */

.dxb-hero-stack{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.dxb-stack-card{

    position:relative;

    height:224px;

    border-radius:24px;

    overflow:hidden;

}

.dxb-stack-card img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.dxb-stack-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.80),
    rgba(0,0,0,0.10)
    );

    padding:24px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}

.dxb-stack-overlay span{

    color:#fff;

    font-size:12px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.dxb-stack-overlay h3{

    color:#fff;

    font-size:30px;

    line-height:1.3;

}

/* WIDGET */

.dxb-dubai-widget{

    background:#fff;

    border-radius:24px;

    padding:24px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}

.dxb-widget-head{

    margin-bottom:24px;

}

.dxb-widget-head h3{

    font-size:28px;

}

.dxb-widget-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.dxb-widget-box{

    background:#f7f8fa;

    border-radius:18px;

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:8px;

    font-weight:700;

}

.dxb-widget-box span{

    font-size:14px;

    color:#777;

}

/* =========================================================
CATEGORIES
========================================================= */

.dxb-categories{

    padding-bottom:80px;

}

.dxb-categories-row{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.dxb-category-box{

    background:#fff;

    padding:18px 26px;

    border-radius:18px;

    font-weight:700;

    transition:0.3s;

}

.dxb-category-box:hover{

    background:#111;

    color:#fff;

}

/* =========================================================
NEWSLETTER
========================================================= */

.dxb-newsletter{

    padding:90px 0;

}

.dxb-newsletter-inner{

    background:
    linear-gradient(
    135deg,
    #08142f,
    #101f49
    );

    border-radius:34px;

    padding:90px 50px;

    text-align:center;

    color:#fff;

}

.dxb-newsletter-inner h2{

    font-size:64px;

    margin-bottom:20px;

}

.dxb-newsletter-inner p{

    color:rgba(255,255,255,0.7);

    margin-bottom:40px;

}

.dxb-newsletter form{

    display:flex;

    justify-content:center;

    gap:14px;

}

.dxb-newsletter input{

    width:420px;

    height:58px;

    border:none;

    border-radius:14px;

    padding:0 20px;

}

.dxb-newsletter button{

    height:58px;

    border:none;

    padding:0 26px;

    border-radius:14px;

    background:#d9a441;

    color:#fff;

    font-weight:700;

}
@media(max-width:1200px){

    .dxb-hero-v2-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .container{

        padding-left:16px;
        padding-right:16px;

    }

    .dxb-topbar-grid{

        grid-template-columns:
        1fr 1fr;

    }

    .dxb-logo{

        font-size:48px;

    }

    .dxb-hero-big-card{

        height:520px;

    }

    .dxb-stack-card{

        height:240px;

    }

    .dxb-hero-overlay{

        padding:24px;

    }

    .dxb-hero-overlay h1{

        font-size:40px;

    }

    .dxb-stack-overlay h3{

        font-size:24px;

    }

    .dxb-newsletter-inner{

        padding:50px 24px;

    }

    .dxb-newsletter-inner h2{

        font-size:38px;

    }

    .dxb-newsletter form{

        flex-direction:column;

    }

    .dxb-newsletter input{

        width:100%;

    }

}