/* =========================================================
   PREMIUM INTERIOR DESIGN
   Luxury / LED / 3D / Glassmorphism
========================================================= */

:root {
    --lux-bg: #08090b;
    --lux-bg-2: #0d0f12;
    --lux-card: rgba(255, 255, 255, 0.045);

    --lux-gold: #d8b36a;
    --lux-gold-light: #f2d28b;
    --lux-gold-dark: #9b7735;

    --lux-white: #ffffff;
    --lux-text: #eeeeee;
    --lux-muted: #a7a7a7;

    --lux-border: rgba(216, 179, 106, 0.18);

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

    --lux-glow:
        0 0 30px rgba(216, 179, 106, .16);

    --lux-transition:
        all .45s cubic-bezier(.16, 1, .3, 1);

    --lux-radius: 20px;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

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

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(216, 179, 106, .055),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(216, 179, 106, .035),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #07080a 0%,
            #0b0d10 45%,
            #08090b 100%
        );

    color: var(--lux-text);

    overflow-x: hidden;
}


/* =========================================================
   LUXURY BACKGROUND GRID
========================================================= */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -2;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );
}


/* =========================================================
   AMBIENT LED LIGHT
========================================================= */

body::after {
    content: "";

    position: fixed;

    width: 650px;
    height: 650px;

    top: -250px;
    right: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,179,106,.10) 0%,
            rgba(216,179,106,.04) 35%,
            transparent 70%
        );

    filter: blur(20px);

    pointer-events: none;

    z-index: -1;

    animation: ambientLight 10s ease-in-out infinite alternate;
}

@keyframes ambientLight {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .55;
    }

    100% {
        transform: translate3d(-100px, 80px, 0) scale(1.2);
        opacity: .9;
    }
}


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

::selection {
    background: var(--lux-gold);
    color: #090909;
}


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

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


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

.container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}


/* =========================================================
   PREMIUM SECTION
========================================================= */

section {
    position: relative;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title,
.page-title,
.section-heading {
    position: relative;

    color: var(--lux-white);

    font-weight: 800;

    letter-spacing: -.5px;
}

.section-title::after,
.page-title::after,
.section-heading::after {
    content: "";

    display: block;

    width: 70px;
    height: 2px;

    margin-top: 15px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lux-gold),
            transparent
        );

    box-shadow:
        0 0 15px rgba(216,179,106,.7);
}


/* =========================================================
   PREMIUM CARDS
========================================================= */

.card,
.service-card,
.project-card,
.product-card,
.offer-card,
[class*="card"] {
    position: relative;

    overflow: hidden;

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

    border-radius: var(--lux-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(14px);

    transition: var(--lux-transition);

    transform-style: preserve-3d;
}


/* LED line */

.card::before,
.service-card::before,
.project-card::before,
.product-card::before,
.offer-card::before,
[class*="card"]::before {

    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,179,106,.75),
            transparent
        );

    opacity: .5;

    transition: var(--lux-transition);
}


/* Glow */

.card::after,
.service-card::after,
.project-card::after,
.product-card::after,
.offer-card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,179,106,.13),
            transparent 70%
        );

    pointer-events: none;

    transition: var(--lux-transition);
}


/* Hover */

.card:hover,
.service-card:hover,
.project-card:hover,
.product-card:hover,
.offer-card:hover,
[class*="card"]:hover {

    transform:
        translateY(-10px)
        perspective(1000px)
        rotateX(1deg);

    border-color:
        rgba(216,179,106,.32);

    box-shadow:
        0 35px 90px rgba(0,0,0,.48),
        0 0 40px rgba(216,179,106,.07),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.card:hover::before,
.service-card:hover::before,
.project-card:hover::before,
.product-card:hover::before,
.offer-card:hover::before {

    opacity: 1;

    box-shadow:
        0 0 15px rgba(216,179,106,.65);
}


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

.card img,
.service-card img,
.project-card img,
.product-card img,
.offer-card img {

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        filter .5s ease;
}

.card:hover img,
.service-card:hover img,
.project-card:hover img,
.product-card:hover img,
.offer-card:hover img {

    transform: scale(1.06);

    filter:
        brightness(.85)
        saturate(1.08);
}


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

.btn,
button,
input[type="submit"] {

    font-family: inherit;
}


/* Premium buttons */

.btn-primary,
.btn-gold,
.primary-btn,
.cta-btn {

    position: relative;

    overflow: hidden;

    border: 1px solid
        rgba(242,210,139,.55);

    border-radius: 999px;

    padding:
        12px 25px;

    color: #111 !important;

    background:
        linear-gradient(
            135deg,
            var(--lux-gold-light),
            var(--lux-gold)
        );

    font-weight: 800;

    box-shadow:
        0 10px 35px rgba(216,179,106,.16);

    transition: var(--lux-transition);
}


/* button shine */

.btn-primary::before,
.btn-gold::before,
.primary-btn::before,
.cta-btn::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -40%;

    width: 30%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform: rotate(25deg);

    transition: left .7s ease;
}

.btn-primary:hover,
.btn-gold:hover,
.primary-btn:hover,
.cta-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 45px rgba(216,179,106,.28),
        0 0 25px rgba(216,179,106,.12);

    color: #090909 !important;
}

.btn-primary:hover::before,
.btn-gold:hover::before,
.primary-btn:hover::before,
.cta-btn:hover::before {

    left: 130%;
}


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

.btn-outline-light,
.btn-outline,
.secondary-btn {

    border: 1px solid
        rgba(216,179,106,.35);

    color: var(--lux-gold-light) !important;

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

    backdrop-filter: blur(10px);

    transition: var(--lux-transition);
}

.btn-outline-light:hover,
.btn-outline:hover,
.secondary-btn:hover {

    color: #111 !important;

    background: var(--lux-gold);

    border-color: var(--lux-gold);

    box-shadow:
        0 0 30px rgba(216,179,106,.18);
}


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

input,
textarea,
select {

    color: #fff !important;

    background:
        rgba(255,255,255,.045) !important;

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

    border-radius: 12px !important;

    transition: var(--lux-transition);

    backdrop-filter: blur(10px);
}

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

    outline: none !important;

    border-color:
        rgba(216,179,106,.6) !important;

    box-shadow:
        0 0 0 3px rgba(216,179,106,.07),
        0 0 25px rgba(216,179,106,.08) !important;
}


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

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

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

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            var(--lux-gold-dark),
            var(--lux-gold)
        );

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lux-gold-light);
}


/* =========================================================
   NAVBAR
========================================================= */

.site-header {

    position: relative;

    z-index: 1000;
}


.main-navbar {

    position: relative;

    background:
        rgba(7,9,11,.72);

    border-bottom:
        1px solid rgba(216,179,106,.10);

    backdrop-filter:
        blur(22px)
        saturate(140%);

    box-shadow:
        0 15px 50px rgba(0,0,0,.18);
}


/* LED line under navbar */

.main-navbar::after {

    content: "";

    position: absolute;

    bottom: -1px;

    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,179,106,.55),
            transparent
        );

    box-shadow:
        0 0 18px rgba(216,179,106,.35);
}


/* navbar inner */

.navbar-inner {

    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


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

.navbar-brand {

    display: flex;

    align-items: center;

    min-width: 190px;

    transition: var(--lux-transition);
}

.navbar-brand:hover {

    transform: translateY(-2px);

    filter:
        drop-shadow(
            0 0 14px
            rgba(216,179,106,.22)
        );
}


.navbar-brand img {

    max-width: 180px;
    max-height: 62px;

    object-fit: contain;
}


/* text logo */

.brand-text {

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.brand-text strong {

    color: #fff;

    font-size: 20px;

    font-weight: 900;

    text-shadow:
        0 0 20px rgba(255,255,255,.08);
}

.brand-text span {

    color: var(--lux-gold);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 700;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.navbar-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    flex: 1;
}


.nav-link {

    position: relative;

    padding:
        10px 14px;

    color:
        rgba(255,255,255,.70) !important;

    font-size: 13px;

    font-weight: 700;

    transition: var(--lux-transition);
}


.nav-link::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;

    height: 2px;

    background: var(--lux-gold);

    transform: translateX(-50%);

    box-shadow:
        0 0 12px rgba(216,179,106,.75);

    transition:
        width .35s ease;
}


.nav-link:hover,
.nav-link.active {

    color: var(--lux-gold-light) !important;

    text-shadow:
        0 0 18px rgba(216,179,106,.15);
}


.nav-link:hover::after,
.nav-link.active::after {

    width: 55%;
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.navbar-actions {

    display: flex;

    align-items: center;

    gap: 12px;
}


/* language */

.language-switcher {

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        9px 12px;

    color: #fff;

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

    border-radius: 10px;

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

    transition: var(--lux-transition);
}

.language-switcher i {

    color: var(--lux-gold);

    font-size: 15px;
}

.language-switcher:hover {

    color: var(--lux-gold-light);

    border-color:
        rgba(216,179,106,.35);

    background:
        rgba(216,179,106,.06);
}


/* =========================================================
   NAV PHONE
========================================================= */

.navbar-contact {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 1px;

    padding:
        8px 14px;

    border-right:
        1px solid rgba(216,179,106,.18);
}

.navbar-contact span {

    color: var(--lux-muted);

    font-size: 10px;

    font-weight: 600;
}

.navbar-contact strong {

    direction: ltr;

    color: var(--lux-gold-light);

    font-size: 13px;

    font-weight: 800;

    text-shadow:
        0 0 14px rgba(216,179,106,.15);
}


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

.mobile-menu {

    background:
        rgba(8,10,12,.96) !important;

    border-top:
        1px solid rgba(216,179,106,.15) !important;

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55) !important;
}


.mobile-menu-inner > a {

    position: relative;

    border-bottom:
        1px solid rgba(255,255,255,.055) !important;

    transition: var(--lux-transition);
}

.mobile-menu-inner > a:hover,
.mobile-menu-inner > a.active {

    color: var(--lux-gold-light) !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,179,106,.06),
            transparent
        ) !important;

    padding-right: 24px;
}

.mobile-menu-inner > a i {

    color: var(--lux-gold) !important;

    filter:
        drop-shadow(
            0 0 7px
            rgba(216,179,106,.35)
        );
}


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

.site-footer {

    position: relative;

    margin-top: 100px;

    padding:
        80px 0 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(216,179,106,.065),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0c0e11,
            #060709
        );

    border-top:
        1px solid rgba(216,179,106,.12);

    overflow: hidden;
}


/* footer LED */

.site-footer::before {

    content: "";

    position: absolute;

    top: 0;

    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lux-gold),
            transparent
        );

    box-shadow:
        0 0 25px rgba(216,179,106,.45);
}


/* footer ambient circle */

.site-footer::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,179,106,.07),
            transparent 70%
        );

    pointer-events: none;
}


/* footer main */

.footer-main {

    position: relative;

    display: grid;

    grid-template-columns:
        1.3fr
        1fr
        1.2fr
        1.4fr;

    gap: 45px;

    padding-bottom: 60px;

    z-index: 2;
}


/* company */

.footer-company {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;
}


.footer-logo {

    display: inline-flex;

    align-items: center;

    transition: var(--lux-transition);
}


.footer-logo img {

    max-width: 190px;
    max-height: 75px;

    object-fit: contain;
}


.footer-logo strong {

    color: #fff;

    font-size: 22px;

    font-weight: 900;
}


.footer-logo:hover {

    transform: translateY(-3px);

    filter:
        drop-shadow(
            0 0 18px
            rgba(216,179,106,.25)
        );
}


.footer-website-name {

    color: var(--lux-gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* footer columns */

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.footer-column h4 {

    position: relative;

    margin:
        0 0 12px;

    color: #fff;

    font-size: 15px;

    font-weight: 800;
}


.footer-column h4::after {

    content: "";

    display: block;

    width: 35px;

    height: 2px;

    margin-top: 9px;

    background: var(--lux-gold);

    box-shadow:
        0 0 10px rgba(216,179,106,.45);
}


.footer-column > a {

    position: relative;

    width: fit-content;

    color: rgba(255,255,255,.57);

    font-size: 13px;

    transition: var(--lux-transition);
}


.footer-column > a:hover {

    color: var(--lux-gold-light);

    transform: translateX(-5px);

    text-shadow:
        0 0 15px rgba(216,179,106,.16);
}


/* contact */

.footer-contact > a {

    display: flex;

    align-items: center;

    gap: 10px;
}


.footer-contact > a i,
.footer-address i {

    width: 28px;
    height: 28px;

    display: inline-flex;

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

    flex-shrink: 0;

    color: var(--lux-gold);

    border:
        1px solid rgba(216,179,106,.18);

    border-radius: 8px;

    background:
        rgba(216,179,106,.045);

    transition: var(--lux-transition);
}


.footer-contact > a:hover i {

    background:
        rgba(216,179,106,.10);

    box-shadow:
        0 0 18px rgba(216,179,106,.12);

    transform: scale(1.08);
}


/* address */

.footer-address {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: rgba(255,255,255,.57);

    font-size: 12px;

    line-height: 1.9;
}


/* social */

.footer-social {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 10px;
}


.footer-social a {

    width: 40px;
    height: 40px;

    display: flex;

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

    color: rgba(255,255,255,.7);

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

    border-radius: 10px;

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

    transition: var(--lux-transition);
}


.footer-social a:hover {

    color: #111;

    background: var(--lux-gold);

    border-color: var(--lux-gold);

    transform:
        translateY(-5px);

    box-shadow:
        0 10px 30px rgba(216,179,106,.18);
}


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

.footer-bottom {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        22px 0;

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

    z-index: 2;
}


.footer-bottom p {

    margin: 0;

    color:
        rgba(255,255,255,.42);

    font-size: 11px;
}


.footer-tagline {

    color:
        rgba(216,179,106,.55);

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 700;
}


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

.whatsapp-float {

    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

    background:
        #20c863;

    box-shadow:
        0 12px 35px rgba(0,0,0,.35),
        0 0 30px rgba(32,200,99,.18);

    z-index: 9999;

    transition: var(--lux-transition);
}

.whatsapp-float:hover {

    transform:
        translateY(-6px)
        scale(1.05);

    box-shadow:
        0 18px 45px rgba(0,0,0,.4),
        0 0 40px rgba(32,200,99,.25);
}

.whatsapp-float i {

    font-size: 25px;
}


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

[data-aos] {

    will-change: transform, opacity;
}


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

@media (max-width: 991px) {

    .navbar-inner {

        min-height: 78px;
    }

    .navbar-menu,
    .navbar-actions {

        display: none !important;
    }

    .mobile-actions {

        display: flex !important;
    }

    .mobile-menu-toggle {

        display: flex !important;
    }

    .footer-main {

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

        gap: 40px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 767px) {

    .container {

        width:
            min(
                100% - 24px,
                1180px
            );
    }

    .footer-main {

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-company {

        align-items: center;

        text-align: center;
    }

    .footer-column {

        text-align: center;

        align-items: center;
    }

    .footer-contact {

        align-items: center;
    }

    .footer-address {

        justify-content: center;

        text-align: center;
    }

    .footer-social {

        justify-content: center;
    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;
    }
}


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

@media (max-width: 575px) {

    .site-footer {

        margin-top: 70px;

        padding-top: 60px;
    }

    .navbar-brand img {

        max-width: 145px;

        max-height: 50px;
    }

    .brand-text strong {

        font-size: 16px;
    }

    .brand-text span {

        font-size: 8px;
    }

    .footer-logo img {

        max-width: 160px;
    }

    .whatsapp-float {

        right: 16px;
        bottom: 16px;

        width: 54px;
        height: 54px;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }
}