*{
    box-sizing:border-box;
}


body{

    margin:0;
    min-height:100vh;

    font-family:"Segoe UI",Arial,sans-serif;

    background:
    radial-gradient(circle at top,#ffffff 0%,transparent 35%),
    linear-gradient(135deg,#e8fbfc,#b9e9ed,#f9ffff);

    color:#005f69;

}


/* LOGO HEADER */

.brand-header{

    text-align:center;

    padding:30px 20px 10px;

}


.logo{

    width:420px;
    max-width:90%;
    height:auto;

}


.subtitle{

    margin-top:15px;

    font-size:22px;

    letter-spacing:1px;

    color:#FC6A03;

}




/* TITLE */

.hero-title{

    text-align:center;

    padding:20px;

}


.hero-title h1{

    margin:10px 0;

    font-size:65px;

    letter-spacing:8px;

    color:#FC6A03;

}


.hero-title p{

    font-size:28px;

    color:#555;

}




/* CATEGORY AREA */

.category-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    padding:40px 20px;

    flex-wrap:wrap;

}




/* GLASS EFFECT */

.glass{

    background:
    rgba(255,255,255,0.45);


    backdrop-filter:
    blur(20px);


    -webkit-backdrop-filter:
    blur(20px);


    border:

    1px solid rgba(255,255,255,0.7);



    box-shadow:

    0 20px 45px rgba(0,120,130,0.18);



    border-radius:35px;


}



/* CATEGORY TABS */

.category{

    width:330px;

    height:130px;


    display:flex;

    align-items:center;

    justify-content:center;


    gap:18px;


    font-size:22px;

    font-weight:600;


    color:#FC6A03;


    cursor:pointer;


    transition:.35s;

}



.category:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 60px rgba(0,120,130,.30);

}



.icon{

    font-size:38px;

}




/* GALLERY */

.container{

    padding:20px;

}



.hidden{

    display:none;

}



button{

    background:#007985;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:30px;

    font-size:16px;

    cursor:pointer;

}




.grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(170px,1fr));

    gap:20px;

}



.product{

    padding:15px;

}



.product img{

    width:100%;

    height:260px;

    object-fit:contain;

    border-radius:20px;

    cursor:pointer;

    transition:.3s;

}



.product img:hover{

    transform:scale(1.05);

}



#largeImage{

    display:block;

    max-width:95%;

    max-height:80vh;

    margin:auto;

    border-radius:25px;

}