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

body{
    background:#020202;
    font-family:'Montserrat',sans-serif;
    color:white;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
}

/* BACKGROUND GRID */

.bg-grid{
    position:fixed;
    inset:0;
    background:
    linear-gradient(rgba(255,179,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,179,0,0.04) 1px, transparent 1px);
    background-size:70px 70px;
    z-index:-10;
}

/* AMBIENT */

.ambient{
    position:fixed;
    border-radius:50%;
    filter:blur(130px);
    z-index:-9;
    opacity:0.22;
}

.ambient1{
    width:500px;
    height:500px;
    background:#ff9d00;
    top:-100px;
    left:-100px;
    animation:float1 14s infinite alternate;
}

.ambient2{
    width:600px;
    height:600px;
    background:#ff7300;
    bottom:-200px;
    right:-100px;
    animation:float2 18s infinite alternate;
}

@keyframes float1{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(80px,60px);
    }
}

@keyframes float2{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(-80px,-60px);
    }
}

/* CURSOR */

.cursor{
    width:14px;
    height:14px;
    background:#ffca57;
    border-radius:50%;
    position:fixed;
    pointer-events:none;
    z-index:999;
    transform:translate(-50%,-50%);
}

.cursor-blur{
    width:220px;
    height:220px;
    background:rgba(255,179,0,0.18);
    position:fixed;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
    z-index:998;
    transform:translate(-50%,-50%);
}

/* SIDE TEXT */

.side-text{
    position:fixed;
    top:50%;
    transform:translateY(-50%) rotate(-90deg);
    letter-spacing:14px;
    color:rgba(255,196,87,0.15);
    font-size:1rem;
    font-weight:700;
    z-index:1;
}

.left{
    left:-80px;
}

.right{
    right:-80px;
}

/* HERO */

.hero{
    width:100%;
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:30px;
}

/* TOP */

.hero-top{
    position:absolute;
    top:30px;
    width:90%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    width:180px;
}

.logo img{

    width:150px;
    height:auto;

    object-fit:contain;

    filter:
    drop-shadow(0 0 8px rgba(212,175,55,.5));

    animation:logoGlow 4s infinite ease-in-out;

}


@keyframes logoGlow{

    0%{
        filter:
        drop-shadow(0 0 5px rgba(212,175,55,.3));
    }

    50%{
        filter:
        drop-shadow(0 0 20px rgba(212,175,55,.8));
    }

    100%{
        filter:
        drop-shadow(0 0 5px rgba(212,175,55,.3));
    }

}
/* CENTERPIECE */

.centerpiece{
    position:relative;
    width:700px;
    height:700px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ROTATING */

.rotating-circle{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:1px solid rgba(255,196,87,0.15);
    animation:rotate 25s linear infinite;
}

.rotating-circle::before{
    content:"";
    position:absolute;
    width:30px;
    height:30px;
    background:#ffca57;
    border-radius:50%;
    top:10%;
    left:50%;
    box-shadow:0 0 30px #ffca57;
}

.rotating-circle.two{
    width:520px;
    height:520px;
    animation-direction:reverse;
    animation-duration:18s;
}

@keyframes rotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* CONTENT */

.main-content{
    text-align:center;
    z-index:5;
}

.main-content h1{
    font-size:7rem;
    line-height:0.95;
    font-weight:900;
    color:#fff2d1;
    text-shadow:
    0 0 20px rgba(255,196,87,0.2),
    0 0 50px rgba(255,196,87,0.15);
}

.main-content h1 span{
    display:block;
    color:#ffca57;
}

.main-content p{
    width:650px;
    max-width:90%;
    margin:auto;
    margin-top:35px;
    line-height:2;
    color:#d2b47b;
    font-size:1.05rem;
}

/* HUB */

.quality-hub{
    width:90%;
    margin:auto;
    margin-top:-120px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    position:relative;
    z-index:5;
    padding-bottom:100px;
}

/* BOX */

.quality-box{
    position:relative;
    min-height:420px;
    padding:45px;
    overflow:hidden;
    text-decoration:none;
    background:
    linear-gradient(135deg,
    rgba(255,179,0,0.05),
    rgba(0,0,0,0.9));
    border:1px solid rgba(255,196,87,0.15);
    border-radius:35px;
    backdrop-filter:blur(20px);
    transition:0.5s;
}

.quality-box:hover{
    transform:translateY(-18px);
    border-color:#ffca57;
    box-shadow:
    0 30px 80px rgba(255,166,0,0.15);
}

/* LIQUID */

.liquid{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top left,
    rgba(255,196,87,0.18),
    transparent 35%);
    opacity:0;
    transition:0.5s;
}

.quality-box:hover .liquid{
    opacity:1;
}

/* NUMBER */

.box-no{
    position:absolute;
    top:30px;
    right:35px;
    font-size:5rem;
    font-weight:900;
    color:rgba(255,196,87,0.06);
}

/* ICON */

.icon{
    width:100px;
    height:100px;
    border-radius:30px;
    background:linear-gradient(145deg,#ffca57,#8d5c00);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.5rem;
    color:black;
    box-shadow:
    0 0 40px rgba(255,196,87,0.4);
}

/* TITLE */

.quality-box h2{
    margin-top:40px;
    font-size:3rem;
    color:#fff1cc;
}

/* LINE */

.line{
    width:80px;
    height:4px;
    margin-top:25px;
    border-radius:10px;
    background:#ffca57;
}

/* TEXT */

.quality-box p{
    margin-top:30px;
    color:#d2b47b;
    line-height:2;
    font-size:1rem;
}

/* EXPLORE */

.explore{
    margin-top:50px;
    letter-spacing:5px;
    color:#ffca57;
    font-size:13px;
    font-weight:700;
    transition:0.4s;
}

.quality-box:hover .explore{
    letter-spacing:7px;
}

/* ORBS */

.orb{
    position:fixed;
    border-radius:50%;
    background:#ffb300;
    filter:blur(120px);
    opacity:0.12;
    z-index:-2;
}

.orb1{
    width:250px;
    height:250px;
    top:20%;
    left:10%;
}

.orb2{
    width:300px;
    height:300px;
    bottom:10%;
    right:10%;
}

.orb3{
    width:180px;
    height:180px;
    top:60%;
    left:50%;
}

/* RESPONSIVE */

@media(max-width:900px){

    .main-content h1{
        font-size:4rem;
    }

    .centerpiece{
        width:500px;
        height:500px;
    }

    .quality-hub{
        margin-top:-40px;
    }
}

@media(max-width:600px){

    .main-content h1{
        font-size:3rem;
    }

    .centerpiece{
        width:350px;
        height:350px;
    }

    .hero-top{
        flex-direction:column;
        gap:20px;
    }

    .quality-box{
        padding:35px;
    }

    .quality-box h2{
        font-size:2.3rem;
    }

    .side-text{
        display:none;
    }
}