/*==========================================================
    ZAIN AL MAHAR
    Premium Landing Page
    Part 2 - Layout & Theme
==========================================================*/

/*--------------------------
    CSS Variables
--------------------------*/

:root{

    --bg:#080808;
    --surface:#101010;

    --white:#ffffff;
    --muted:#a8a8a8;

    --gold1:#5e4215;
    --gold2:#b88d37;
    --gold3:#d8b75a;
    --gold4:#fff3b0;
    --gold5:#6d4b1c;

    --cyan:#00f7ff;
    --purple:#b52eff;
    --pink:#ff4de3;
    --blue:#3d8cff;
    --emerald:#00ff95;
    --orange:#ff914d;

    --glass:rgba(255,255,255,.05);
    --glass-border:rgba(255,255,255,.12);

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

    --radius:22px;

    --transition:.45s cubic-bezier(.2,.8,.2,1);

}

/*--------------------------
    Reset
--------------------------*/

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

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:white;

    font-family:"Inter",sans-serif;

    overflow-x:hidden;

    min-height:100vh;

    position:relative;

    cursor:none;

}

/*--------------------------
    Selection
--------------------------*/

::selection{

    background:#d8b75a;
    color:black;

}

/*--------------------------
    Links
--------------------------*/

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

img{

    display:block;
    max-width:100%;

}

/*--------------------------
    Background
--------------------------*/

body::before{

    content:"";

    position:fixed;
    inset:0;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(0,255,255,.06),
    transparent 40%),

    radial-gradient(circle at 90% 20%,
    rgba(181,46,255,.07),
    transparent 35%),

    radial-gradient(circle at 70% 75%,
    rgba(255,120,120,.05),
    transparent 45%);

    z-index:-8;

}

/*==================================================
    Particle Canvas
==================================================*/

#particleCanvas{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:-5;

}

/*==================================================
    Mouse Light
==================================================*/

.mouse-light{

    position:fixed;

    width:420px;
    height:420px;

    border-radius:50%;

    pointer-events:none;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.08),
    rgba(0,255,255,.05),
    transparent 70%);

    mix-blend-mode:screen;

    filter:blur(40px);

    transform:translate(-50%,-50%);

    z-index:-2;

}

/*==================================================
    Noise
==================================================*/

.noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.03;

    z-index:3;

}

/*==================================================
    Glow Orbs
==================================================*/

.orb{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    mix-blend-mode:screen;

    pointer-events:none;

    z-index:-4;

}

.orb-1{

    width:380px;
    height:380px;

    background:#00ffee33;

    left:5%;
    top:12%;

}

.orb-2{

    width:500px;
    height:500px;

    background:#7f4dff22;

    right:-10%;
    top:15%;

}

.orb-3{

    width:450px;
    height:450px;

    background:#ff4ddb22;

    bottom:-12%;
    right:18%;

}

.orb-4{

    width:300px;
    height:300px;

    background:#00ff9530;

    bottom:8%;
    left:18%;

}

/*==================================================
    Main Page
==================================================*/

.page{

    width:min(1500px,92%);

    min-height:100vh;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    position:relative;

    z-index:10;

}

/*==================================================
    Left
==================================================*/

.hero-left{

    width:55%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:38px;

    padding:40px 0;
    align-items: center;

}

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

.logo-wrapper{

    width:300px;

}

.logo{

    width:100%;
    height:auto;

}

/*==================================================
    Navigation
==================================================*/

.navigation{

    width:max-content;

    backdrop-filter:blur(18px);

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

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

    border-radius:999px;

    padding:15px 26px;

}

.navigation ul{

    display:flex;

    gap:36px;

}

.navigation a{

    position:relative;

    font-size:.95rem;

    letter-spacing:.08em;

    color:#ececec;

    transition:var(--transition);

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:linear-gradient(90deg,var(--gold3),var(--gold4));

}

.navigation a:hover{

    color:white;

}

/*==================================================
    Content
==================================================*/

.hero-content{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.eyebrow{

    letter-spacing:.25em;

    color:#d9d9d9;

    font-size:.78rem;

}

.hero-title{

     font-family: "Montserrat", sans-serif;

    font-size:4rem;

    line-height:1.2;

    font-weight:700;

    max-width:650px;
    text-align: center;
    padding: 20px 0;

}

.hero-title span{

    display:block;

}

.hero-subtitle{

    font-family:"Poppins",serif;

    font-size:26px;

    font-weight:500;
 text-align: center;
    color:#ececec;
        margin-bottom: 50px;

}

.hero-description{
    color:#d8b75a;

    font-family:"Poppins",serif;
 text-align: center;
    font-size:26px;

    line-height:1.85;

}

/*==================================================
    CTA
==================================================*/

.hero-buttons{

    margin-top:10px;
    text-align: center;

}

.glass-btn{

    position:relative;

    overflow:hidden;

    border:none;

    cursor:pointer;

    color:white;

    padding:18px 44px;

    font-size:.95rem;

    letter-spacing:.12em;

    border-radius:999px;

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(216,183,90,.35);

    transition:var(--transition);

}

.glass-btn span{

    position:relative;

    z-index:3;

}

.ripple{

    position:absolute;

    inset:0;

}

/*==================================================
    Right
==================================================*/

.hero-right{

    width:45%;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
    Stage
==================================================*/

.hero-stage{

    position:relative;

    width:720px;

    max-width:100%;

    aspect-ratio:1;

}

/*==================================================
    Shadow
==================================================*/

.hero-shadow{

    position:absolute;

    left:50%;
    bottom:8%;

    width:68%;

    height:70px;

    transform:translateX(-50%);

    border-radius:50%;

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

    filter:blur(45px);

}

/*==================================================
    3D Wrapper
==================================================*/

.hero-3d{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    transform-style:preserve-3d;

    perspective:1800px;

}

/*==================================================
    Hero Image
==================================================*/

.hero-image{

    width:100%;

    position:relative;

    z-index:8;

    user-select:none;

    pointer-events:none;

}

/*==================================================
    Glass Layers
==================================================*/

.glass-layer{

    position:absolute;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

}

.glass-back{

    width:82%;
    height:82%;

    transform:translateZ(-90px);

}

.glass-middle{

    width:74%;
    height:74%;

    transform:translateZ(-45px);

}

.glass-front{

    width:66%;
    height:66%;

    transform:translateZ(30px);

}

/*==================================================
    Reflection
==================================================*/

.glass-reflection{

    position:absolute;

    inset:-10%;

    pointer-events:none;

    overflow:hidden;

    z-index:9;

}

.glass-reflection::before{

    content:"";

    position:absolute;

    width:25%;

    height:160%;

    left:-40%;

    top:-25%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.25),
    transparent);

    transform:rotate(25deg);

}

/*==================================================
    Hero Glow
==================================================*/

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    mix-blend-mode:screen;

}

.glow-1{

    width:260px;
    height:260px;

    background:#00f7ff55;

    left:8%;
    top:30%;

}

.glow-2{

    width:280px;
    height:280px;

    background:#b52eff44;

    right:10%;
    top:15%;

}

.glow-3{

    width:230px;
    height:230px;

    background:#ff4de344;

    bottom:12%;
    right:18%;

}

/*==================================================
    Footer
==================================================*/

.footer{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    color:#777;

    font-size:.8rem;

    letter-spacing:.1em;

}

/*==================================================
    Responsive
==================================================*/

@media(max-width:992px){
/* 
    #particleCanvas{
        opacity:0;
    }
    body{
    background-image: url(../images/design-mobile-fill.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    } */
.page{

    flex-direction:column;
    padding:0px 0 !important;
    width:100% !important;
    gap:0px;
    /*background-image: url(../images/design-mobile-fill.jpg);*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}

.hero-left,
.hero-right{

width:100%;
text-align:center;
}

.navigation{

margin:auto;

}

.hero-content{

align-items:center;

}

.hero-title{

font-size:3.6rem;

}

.hero-subtitle{

font-size:1.6rem;

}

.logo-wrapper{

margin:auto;

}

.hero-stage{

width:min(620px,95vw);

}
.footer{
    position: relative;
    text-align: center;
    width:100%;
}

}
/*==========================================================
    PART 3
    Premium Animations & Responsive Enhancements
==========================================================*/


/*==================================================
    GOLD METALLIC TEXT
==================================================*/

.hero-title{

    background:linear-gradient(
        90deg,
        #5e4215 0%,
        #b88d37 15%,
        #d8b75a 35%,
        #fff3b0 50%,
        #d8b75a 65%,
        #b88d37 85%,
        #5e4215 100%
    );

    background-size:300% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:
        shimmer 4s linear infinite,
        fadeUp 1s ease forwards;

}

.hero-subtitle{

    opacity:0;

    animation:
        fadeUp 1s .3s forwards;

}

.hero-description{

    opacity:0;

    animation:
        fadeUp 1s .6s forwards;

}

.hero-buttons{

    opacity:0;

    animation:
        fadeUp 1s .9s forwards;

}


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

.reveal{

    opacity:0;

    transform:translateY(50px);

}


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

.hero-3d{

    animation:

        heroFloat 8s ease-in-out infinite,

        heroZoom 10s ease-in-out infinite,

        heroRotate 12s ease-in-out infinite;

    will-change:transform;

}

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

.hero-image{

    filter:

        drop-shadow(0 30px 60px rgba(0,0,0,.35))

        drop-shadow(0 0 40px rgba(0,255,255,.10));

    transition:

        transform .6s ease,

        filter .6s ease;

}

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

.hero-stage:hover .hero-3d{

    transform:

        translateY(-10px)

        scale(1.03);

}

.hero-stage:hover .hero-image{

    filter:

        drop-shadow(0 40px 90px rgba(0,0,0,.5))

        drop-shadow(0 0 60px rgba(0,255,255,.25));

}

/*==================================================
    DYNAMIC SHADOW
==================================================*/

.hero-shadow{

    animation:

        shadowMove 8s ease-in-out infinite;

}

/*==================================================
    GLOWS
==================================================*/

.hero-glow{

    animation:

        glowMove 12s ease-in-out infinite alternate;

}

.glow-2{

    animation-delay:2s;

}

.glow-3{

    animation-delay:5s;

}

/*==================================================
    GLASS REFLECTION
==================================================*/

.glass-reflection::before{

    animation:

        shineSweep 6s linear infinite;

}

/*==================================================
    ORBS
==================================================*/

.orb{

    animation:

        orbFloat 22s ease-in-out infinite alternate;

}

.orb-2{

    animation-delay:3s;

}

.orb-3{

    animation-delay:6s;

}

.orb-4{

    animation-delay:9s;

}

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

.navigation a{

    transition:

        color .4s,

        transform .35s;

}

.navigation a:hover{

    transform:translateY(-2px);

    color:white;

}

.navigation a:hover::after{

    width:100%;

    transition:.35s;

}

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

.glass-btn{

    overflow:hidden;

    position:relative;

}

.glass-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent);

    transform:translateX(-180%);

}

.glass-btn:hover{

    transform:

        translateY(-6px)

        scale(1.04);

    border-color:#fff3b0;

    box-shadow:

        0 0 20px rgba(216,183,90,.45),

        0 15px 40px rgba(0,0,0,.35);

}

.glass-btn:hover::before{

    animation:

        buttonShine .9s ease;

}

.glass-btn:active{

    transform:scale(.97);

}

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

.logo{

    transition:.45s;

}

.logo:hover{

    transform:scale(1.04);

    filter:

        drop-shadow(0 0 20px rgba(216,183,90,.35));

}

/*==================================================
    CURSOR
==================================================*/

.cursor-dot{

    position:fixed;

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    pointer-events:none;

    z-index:9999;

}

.cursor-ring{

    position:fixed;

    width:42px;
    height:42px;

    border-radius:50%;

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

    pointer-events:none;

    z-index:9998;

    backdrop-filter:blur(2px);

}

/*==================================================
    KEYFRAMES
==================================================*/

@keyframes shimmer{

0%{

background-position:-250%;

}

100%{

background-position:250%;

}

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes heroFloat{

0%{

transform:translateY(-15px);

}

50%{

transform:translateY(15px);

}

100%{

transform:translateY(-15px);

}

}

@keyframes heroZoom{

0%{

scale:.98;

}

50%{

scale:1.03;

}

100%{

scale:.98;

}

}

@keyframes heroRotate{

0%{

rotate:0deg;

transform:

rotateX(2deg)

rotateY(-3deg);

}

50%{

transform:

rotateX(-2deg)

rotateY(3deg);

}

100%{

transform:

rotateX(2deg)

rotateY(-3deg);

}

}

@keyframes shadowMove{

0%{

transform:

translateX(-50%)

scale(.9);

opacity:.45;

filter:blur(50px);

}

50%{

transform:

translateX(-50%)

scale(1.15);

opacity:.25;

filter:blur(65px);

}

100%{

transform:

translateX(-50%)

scale(.9);

opacity:.45;

filter:blur(50px);

}

}

@keyframes glowMove{

0%{

transform:

translateY(0)

scale(1);

opacity:.35;

}

100%{

transform:

translateY(-25px)

scale(1.25);

opacity:.75;

}

}

@keyframes shineSweep{

0%{

left:-60%;

}

100%{

left:180%;

}

}

@keyframes orbFloat{

0%{

transform:

translate(0,0);

opacity:.45;

}

50%{

transform:

translate(60px,-40px);

opacity:.65;

}

100%{

transform:

translate(-40px,50px);

opacity:.4;

}

}

@keyframes buttonShine{

0%{

transform:translateX(-180%);

}

100%{

transform:translateX(180%);

}

}
.show-mobile{
    display:none;
}

.hide-mobile{
    display:block;
}
/*==================================================
    MOBILE
==================================================*/

@media (max-width:992px){
.show-mobile{
    display:block;
}
.hide-mobile{
    display:none;
}
body{
cursor:auto;
}

.cursor-dot,
.cursor-ring{

display:none;

}

.page{

padding:60px 5px;
gap:20px;

text-align:center;
 display:flex;
flex-direction:column;

}
.hero-right{

        order:1;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-bottom:0px;
        flex-direction:column;
    }

    /* Text second */

    .hero-left{
        order:2;
        width:100%;
        align-items:center;
        text-align:center;
        gap:0;
        padding:0px 0 40px;
    }



.navigation{

width:100%;

max-width:420px;

}

.navigation ul{

justify-content:center;

gap:22px;

flex-wrap:wrap;

}

.hero-title{

font-size:3rem;

line-height:1;

}

.hero-subtitle{

font-size:1.4rem;

}

.hero-description{

font-size:1rem;

max-width:90%;

}

.hero-stage{

width:100%;

max-width:700px;

margin:auto;

}

.hero-shadow{

width:55%;

}

.orb{

filter:blur(70px);

}

}

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

@media (max-width:576px){

.hero-title{

font-size:2.3rem;

}

.hero-subtitle{

font-size:1.2rem;

}

.eyebrow{

font-size:.7rem;

letter-spacing:.18em;

}

.navigation{

padding:12px 18px;

}

.navigation ul{

gap:16px;

}

.glass-btn{

padding:16px 32px;

}

.logo-wrapper{

width:180px;

}

.hero-stage{

width:100%;

}

.orb{

display:none;

}

}

    /* Custom button styling for the launching soon CTA */
    .btn-gradient-border {
      position: relative;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 1px; /* The border width */
      overflow: hidden;
      display: inline-block;
      transition: all 0.3s ease;
    }

    .btn-gradient-border::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(90deg, #ff00c1, #00d2ff);
      z-index: -1;
      opacity: 0.8;
    }

    .btn-content {
      background: rgba(18, 18, 18, 0.9);
      padding: 0.75rem 2.5rem;
      border-radius: 7px;
      color: #e5e7eb;
      font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 18px;
      display: block;
      transition: background 0.3s ease;
    }

    .btn-gradient-border:hover .btn-content {
      background: rgba(255, 255, 255, 0.1);
    }

    .btn-gradient-border:hover {
      box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
      transform: translateY(-2px);
    }