/*==========================================
            GOOGLE FONT RESET
===========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#02131f;

    color:#fff;

    overflow-x:hidden;

}

/*==========================================
                BACKGROUND
===========================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    linear-gradient(rgba(0,30,60,.45),rgba(0,20,40,.65)),
    url("../images/hero-bg.webp");

    background-size:cover;

    background-position:center;

    z-index:-3;

}

/*==========================================
            SEA OVERLAY
===========================================*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:url("../images/sea-bg.webp");

    background-size:cover;

    background-position:center bottom;

    opacity:.18;

    mix-blend-mode:screen;

    animation:waveMove 18s linear infinite;

    z-index:-2;

}

@keyframes waveMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(-40px);

}

100%{

transform:translateX(0);

}

}

/*==========================================
                LOADER
===========================================*/

#loader{

    position:fixed;

    inset:0;

    background:#03131f;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loader-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.2);

    border-top:5px solid #00e0ff;

    animation:spin 1s linear infinite;

}

#loader h1{

    margin-top:25px;

    font-size:42px;

    color:#7fffd4;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    max-width:1400px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

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

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    z-index:999;

}

.logo{

    font-size:30px;

    font-weight:700;

    color:#7fffd4;

}

/*==========================================
            SEARCH BAR
===========================================*/

.search{

    width:480px;

    height:52px;

    display:flex;

    overflow:hidden;

    border-radius:50px;

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

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

}

.search input{

    flex:1;

    border:none;

    background:transparent;

    color:white;

    padding:0 20px;

    outline:none;

    font-size:16px;

}

.search input::placeholder{

    color:#d9faff;

}

.search button{

    width:60px;

    border:none;

    background:#00bfff;

    color:white;

    cursor:pointer;

    transition:.35s;

}

.search button:hover{

    background:#008cff;

}

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

.header-icons{

    display:flex;

    gap:20px;

    font-size:24px;

}

.header-icons i{

    cursor:pointer;

    transition:.35s;

}

.header-icons i:hover{

    color:#7fffd4;

    transform:translateY(-3px);

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    rgba(0,20,40,.35),
    rgba(0,20,40,.60)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

    padding:20px;

}

.hero-content h4{

    font-size:22px;

    color:#7fffd4;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:82px;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-content p{

    font-size:22px;

    color:#e6ffff;

    margin-bottom:40px;

}

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

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

.buttons button{

    width:180px;

    height:58px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    transition:.4s;

}

.shop{

    background:#00c6ff;

    color:white;

}

.learn{

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

    color:white;

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

}

.shop:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 30px rgba(0,198,255,.35);

}

.learn:hover{

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

}

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

.hero-container{

display:flex;

justify-content:space-between;

align-items:center;

width:90%;

max-width:1400px;

margin:auto;

position:relative;

z-index:2;

}

.hero-left{

width:50%;

}

.hero-right{

width:50%;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.hero-title span{

color:#7fffd4;

}

.hero-tag{

display:inline-block;

padding:10px 20px;

border-radius:30px;

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

backdrop-filter:blur(10px);

margin-bottom:25px;

}

.hero-text{

max-width:520px;

line-height:1.8;

}

.medicine-circle{

width:450px;

height:450px;

border-radius:50%;

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

backdrop-filter:blur(25px);

display:flex;

justify-content:center;

align-items:center;

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

box-shadow:0 0 60px rgba(0,198,255,.25);

}

.medicine-circle img{

width:300px;

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

}

.glass-box{

position:absolute;

bottom:20px;

right:30px;

padding:20px;

border-radius:20px;

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

backdrop-filter:blur(20px);

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

.scroll-down{

position:absolute;

bottom:25px;

left:50%;

transform:translateX(-50%);

font-size:30px;

animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

0%{

transform:translate(-50%,0);

}

50%{

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

}

100%{

transform:translate(-50%,0);

}

}

/*==============================
        PRODUCTS
===============================*/

.products{

padding:120px 8%;

position:relative;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading span{

color:#7fffd4;

font-size:18px;

}

.section-heading h2{

font-size:52px;

margin:15px 0;

}

.section-heading p{

color:#ddd;

}

.product-search{

width:550px;

height:55px;

margin:40px auto;

display:flex;

overflow:hidden;

border-radius:50px;

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

backdrop-filter:blur(20px);

}

.product-search input{

flex:1;

border:none;

background:none;

padding:20px;

color:white;

outline:none;

}

.product-search button{

width:70px;

background:#00c6ff;

border:none;

cursor:pointer;

color:white;

}

.product-grid{

display:grid;

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

gap:35px;

}

.product-card{

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

backdrop-filter:blur(25px);

border-radius:25px;

padding:25px;

position:relative;

transition:.5s;

text-align:center;

}

.product-card:hover{

transform:translateY(-15px);

box-shadow:0 20px 50px rgba(0,198,255,.25);

}

.product-card img{

width:220px;

height:220px;

object-fit:contain;

}

.discount{

position:absolute;

top:18px;

left:18px;

background:#00c6ff;

padding:8px 15px;

border-radius:30px;

font-size:14px;

}

.price{

font-size:24px;

margin:20px 0;

color:#7fffd4;

}

.price span{

margin-left:12px;

text-decoration:line-through;

color:#aaa;

font-size:18px;

}

.buttons{

display:flex;

gap:15px;

margin-top:25px;

}

.cart-btn{

flex:1;

height:48px;

background:#00c6ff;

border:none;

color:white;

border-radius:40px;

cursor:pointer;

}

.buy-btn{

flex:1;

height:48px;

background:#1db954;

border:none;

color:white;

border-radius:40px;

cursor:pointer;

}

/*==========================

PRODUCT ACTIONS

===========================*/

.product-actions{

position:absolute;

top:18px;

right:18px;

display:flex;

flex-direction:column;

gap:12px;

}

.product-actions button{

width:45px;

height:45px;

border:none;

border-radius:50%;

cursor:pointer;

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

backdrop-filter:blur(15px);

color:white;

transition:.35s;

}

.product-actions button:hover{

background:#00c6ff;

transform:scale(1.1);

}

.rating{

margin-top:15px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

gap:8px;

}

.stars{

color:gold;

}

.delivery{

padding:120px 8%;

}

.delivery-box{

max-width:650px;

margin:auto;

padding:40px;

border-radius:30px;

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

backdrop-filter:blur(20px);

text-align:center;

}

.delivery-input{

display:flex;

margin-top:30px;

border-radius:50px;

overflow:hidden;

}

.delivery-input input{

flex:1;

padding:18px;

border:none;

outline:none;

font-size:18px;

}

.delivery-input button{

width:170px;

border:none;

background:#00c6ff;

color:white;

font-size:18px;

cursor:pointer;

}

#deliveryResult{

margin-top:25px;

font-size:20px;

font-weight:600;

color:#7fffd4;

}


/*==========================================
        CATEGORY SECTION
==========================================*/

.categories{

padding:110px 8%;

position:relative;

}

.category-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.category-card{

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

backdrop-filter:blur(18px);

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

border-radius:25px;

padding:35px;

text-align:center;

transition:.4s;

cursor:pointer;

overflow:hidden;

position:relative;

}

.category-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:rgba(0,255,255,.08);

border-radius:50%;

top:-130px;

right:-130px;

transition:.5s;

}

.category-card:hover::before{

transform:scale(1.5);

}

.category-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(0,255,255,.18);

}

.category-icon{

font-size:65px;

margin-bottom:20px;

}

.category-card h3{

font-size:26px;

margin-bottom:15px;

}

.category-card p{

line-height:1.8;

color:#ddd;

}

/*==========================================
        WHY US
==========================================*/

.why{

padding:110px 8%;

}

.why-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.why-card{

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

backdrop-filter:blur(18px);

border-radius:25px;

padding:35px;

text-align:center;

transition:.4s;

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 45px rgba(0,255,255,.2);

}

.why-card i{

font-size:55px;

margin-bottom:20px;

color:#55f6ff;

}

.why-card h3{

margin-bottom:12px;

font-size:24px;

}

.why-card p{

color:#ddd;

}

/*==========================================
        REVIEW SECTION
==========================================*/

.reviews{

padding:120px 8%;

}

.review-wrapper{

display:grid;

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

gap:35px;

margin-top:60px;

}

.review-card{

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

backdrop-filter:blur(18px);

border-radius:30px;

padding:35px;

text-align:center;

transition:.4s;

}

.review-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(0,255,255,.22);

}

.review-card img{

width:95px;

height:95px;

border-radius:50%;

border:4px solid #4ef4ff;

margin-bottom:18px;

}

.review-card h3{

margin-bottom:10px;

}

.review-card p{

line-height:1.8;

color:#ddd;

}

.stars{

margin:15px 0;

font-size:22px;

color:#FFD700;

}

/*==========================================
        RESPONSIVE
==========================================*/

@media(max-width:1100px){

.category-grid{

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

}

.why-grid{

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

}

.review-wrapper{

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

}

}

@media(max-width:768px){

.category-grid,

.why-grid,

.review-wrapper{

grid-template-columns:1fr;

}

}

/*==========================================
        CART SIDEBAR
==========================================*/

.cart-sidebar{

position:fixed;

top:0;

right:-420px;

width:400px;

height:100vh;

background:rgba(8,25,40,.95);

backdrop-filter:blur(20px);

z-index:99999;

transition:.5s;

display:flex;

flex-direction:column;

box-shadow:-10px 0 40px rgba(0,0,0,.4);

}

.cart-sidebar.active{

right:0;

}

.cart-header{

padding:25px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid rgba(255,255,255,.15);

}

.cart-header h2{

font-size:28px;

}

.cart-header button{

background:none;

border:none;

font-size:28px;

color:white;

cursor:pointer;

}

.cart-items{

flex:1;

padding:20px;

overflow-y:auto;

}

.empty-cart{

text-align:center;

margin-top:120px;

color:#ddd;

}

.empty-cart i{

font-size:70px;

margin-bottom:20px;

color:#53F3FF;

}

.cart-footer{

padding:25px;

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

}

.checkout-btn{

width:100%;

height:55px;

border:none;

border-radius:40px;

margin-top:20px;

background:#00c8ff;

color:white;

font-size:18px;

cursor:pointer;

transition:.35s;

}

.checkout-btn:hover{

background:#009fd4;

}

.cart-overlay{

position:fixed;

inset:0;

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

opacity:0;

visibility:hidden;

transition:.4s;

z-index:99990;

}

.cart-overlay.active{

opacity:1;

visibility:visible;

}

/*=========================================
        CART PRODUCTS
=========================================*/

.cart-product{

display:flex;

align-items:center;

gap:15px;

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

padding:15px;

border-radius:18px;

margin-bottom:18px;

}

.cart-product img{

width:75px;

height:75px;

object-fit:contain;

border-radius:12px;

background:white;

padding:5px;

}

.cart-info{

flex:1;

}

.cart-info h4{

font-size:18px;

margin-bottom:8px;

}

.cart-info p{

color:#53F3FF;

margin-bottom:10px;

}

.qty{

display:flex;

align-items:center;

gap:10px;

}

.qty button{

width:30px;

height:30px;

border:none;

border-radius:50%;

cursor:pointer;

background:#00C8FF;

color:white;

}

.remove{

background:none;

border:none;

font-size:22px;

cursor:pointer;

color:#ff5f5f;

}

/* Quantity Hover */

.qty button:hover{

transform:scale(1.1);

background:#00a8ff;

transition:.3s;

}

/* Remove */

.remove:hover{

color:#ff0000;

transform:rotate(15deg);

transition:.3s;

}

/* Cart Scroll */

.cart-items::-webkit-scrollbar{

width:7px;

}

.cart-items::-webkit-scrollbar-thumb{

background:#00d5ff;

border-radius:20px;

}

/*==========================================
        WISHLIST
==========================================*/

.wishlist-icon{

position:relative;

cursor:pointer;

}

#wishlistCount{

position:absolute;

top:-10px;

right:-12px;

width:22px;

height:22px;

background:#ff2d55;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:700;

color:#fff;

}

/*==========================================
        SEARCH EFFECT
==========================================*/

.product-card.hide{

display:none;

}

.search input{

transition:.35s;

}

.search input:focus{

box-shadow:0 0 20px rgba(0,220,255,.4);

}
.wishlist-btn.added{

background:#ff2d55 !important;

color:white;

transform:scale(1.1);

}

/*==========================================
        GLASS HOVER EFFECT
==========================================*/

.product-card,
.category-card,
.why-card,
.review-card{

transition:.45s ease;

}

.product-card:hover,
.category-card:hover,
.why-card:hover,
.review-card:hover{

transform:translateY(-12px);

box-shadow:
0 20px 60px rgba(0,255,255,.18);

}

/*==========================================
        SCROLL BAR
==========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#03151f;

}

::-webkit-scrollbar-thumb{

background:#00d4ff;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#00b4ff;

}