/* ==================== RESET ==================== */

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

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, Helvetica, sans-serif;
color: #e9fbff;
background:
radial-gradient(circle at 50% 0%, #123b49 0%, #071d26 45%, #031117 100%);
min-height: 100vh;
line-height: 1.6;
}

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

.site-header {
position: sticky;
top: 0;
z-index: 1000;

display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
padding: 18px 5%;

background: rgba(3, 17, 23, 0.88);
border-bottom: 1px solid rgba(120, 220, 240, 0.12);

backdrop-filter: blur(14px);
}

.logo {
display: flex;
align-items: center;
gap: 10px;

color: #eaffff;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 1px;
}

.logo-icon {
display: grid;
place-items: center;

width: 32px;
height: 32px;

border-radius: 50%;

color: #03202a;
background: #48d7ef;

box-shadow:
0 0 20px rgba(72, 215, 239, 0.35);
}

.main-nav {
display: flex;
gap: 30px;
}

.main-nav a {
color: #a8c7cf;
text-decoration: none;
font-size: 0.95rem;

transition:
color 0.2s ease,
transform 0.2s ease;
}

.main-nav a:hover {
color: #48d7ef;
transform: translateY(-1px);
}

.cart-button {
border: 1px solid rgba(72, 215, 239, 0.25);
border-radius: 999px;

padding: 10px 16px;

color: #eaffff;
background: rgba(72, 215, 239, 0.08);

font: inherit;
cursor: pointer;

transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}

.cart-button:hover {
background: rgba(72, 215, 239, 0.16);
border-color: rgba(72, 215, 239, 0.5);
transform: translateY(-2px);
}

#cart-count {
display: inline-grid;
place-items: center;

min-width: 22px;
height: 22px;

margin-left: 5px;

border-radius: 50%;

color: #03202a;
background: #48d7ef;

font-size: 0.75rem;
font-weight: 800;
}

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

.hero {
position: relative;

display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;

min-height: 650px;

padding: 80px 7%;

overflow: hidden;
}

.hero-content {
position: relative;
z-index: 2;

max-width: 620px;
}

.eyebrow {
color: #48d7ef;

font-size: 0.8rem;
font-weight: 800;
letter-spacing: 3px;
}

.hero h1 {
margin: 15px 0 25px;

color: #f2fdff;

font-size: clamp(3.2rem, 6vw, 6.5rem);
line-height: 0.98;
letter-spacing: -3px;
}

.hero h1 span {
display: block;
color: #48d7ef;
}

.hero-text {
max-width: 530px;

margin-bottom: 35px;

color: #9bb8c2;

font-size: 1.1rem;
line-height: 1.8;
}

.hero-button {
display: inline-block;

padding: 14px 24px;

border-radius: 999px;

color: #03202a;
background: #48d7ef;

text-decoration: none;
font-weight: 800;

box-shadow:
0 10px 30px rgba(72, 215, 239, 0.18);

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.hero-button:hover {
transform: translateY(-3px);

box-shadow:
0 15px 35px rgba(72, 215, 239, 0.3);
}

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

.hero-aquarium {
position: relative;

width: min(450px, 90%);
aspect-ratio: 1;

margin-left: auto;

border-radius: 50%;

background:
radial-gradient(
circle at 50% 35%,
rgba(72, 215, 239, 0.3),
rgba(15, 75, 90, 0.2) 45%,
transparent 70%
);

overflow: hidden;
}

.water-glow {
position: absolute;
inset: 15%;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(72, 215, 239, 0.15),
transparent 70%
);

filter: blur(10px);
}

.hero-fish {
position: absolute;

top: 40%;
left: 38%;

font-size: 5rem;

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

.hero-plant {
position: absolute;
bottom: 0;

width: 12px;
height: 150px;

border-radius: 100% 0 100% 0;

background: linear-gradient(
to top,
#0c6f62,
#36c99c
);

transform-origin: bottom;
animation: plant-sway 3s ease-in-out infinite;
}

.plant-one {
left: 25%;
height: 180px;
}

.plant-two {
right: 25%;
height: 130px;
animation-delay: -1s;
}

.hero-bubble {
position: absolute;

width: 12px;
height: 12px;

border: 2px solid rgba(200, 250, 255, 0.5);
border-radius: 50%;

animation: bubble-rise 5s linear infinite;
}

.bubble-one {
left: 30%;
bottom: 15%;
}

.bubble-two {
left: 55%;
bottom: 5%;
animation-delay: 1.5s;
}

.bubble-three {
left: 70%;
bottom: 25%;
animation-delay: 3s;
}

/* ==================== SHOP ==================== */

.shop-section {
max-width: 1200px;

margin: 0 auto;

padding: 100px 30px;
}

.section-heading {
margin-bottom: 45px;
}

.section-heading h2 {
margin-top: 10px;

color: #effcff;

font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.05;
}

/* ==================== SHOP CONTROLS ==================== */

.shop-controls {
display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

margin-bottom: 35px;
}

.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.filter-button {
padding: 9px 16px;

border: 1px solid rgba(120, 220, 240, 0.18);
border-radius: 999px;

color: #9bb8c2;
background: rgba(255, 255, 255, 0.03);

font: inherit;

cursor: pointer;

transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}

.filter-button:hover,
.filter-button.active {
color: #03202a;
background: #48d7ef;
border-color: #48d7ef;
}

.search-box {
display: flex;
align-items: center;
gap: 10px;

color: #8faeb7;
}

.search-box span {
font-size: 0.85rem;
}

.search-box input {
width: 220px;

padding: 10px 14px;

border: 1px solid rgba(120, 220, 240, 0.2);
border-radius: 999px;

outline: none;

color: #eaffff;
background: rgba(255, 255, 255, 0.04);

font: inherit;
}

.search-box input:focus {
border-color: #48d7ef;
}

/* ==================== PRODUCT GRID ==================== */

.product-grid {
display: grid;

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

gap: 22px;
}

.product-card {
position: relative;

display: flex;
flex-direction: column;

min-height: 380px;

padding: 20px;

border: 1px solid rgba(120, 220, 240, 0.12);
border-radius: 20px;

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.02)
);

overflow: hidden;

transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}

.product-card:hover {
transform: translateY(-7px);

border-color: rgba(72, 215, 239, 0.35);

box-shadow:
0 20px 50px rgba(0, 0, 0, 0.25);
}

.product-image {
display: grid;
place-items: center;

height: 210px;

margin-bottom: 20px;

border-radius: 15px;

background:
radial-gradient(
circle,
rgba(72, 215, 239, 0.15),
rgba(255, 255, 255, 0.02)
);

font-size: 5rem;
}

.product-category {
margin-bottom: 5px;

color: #48d7ef;

font-size: 0.75rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}

.product-card h3 {
margin-bottom: 8px;

color: #eaffff;

font-size: 1.3rem;
}

.product-description {
color: #8faeb7;

font-size: 0.9rem;
}

.product-bottom {
display: flex;
align-items: center;
justify-content: space-between;

margin-top: auto;
padding-top: 20px;
}

.product-price {
color: #f0fdff;

font-size: 1.2rem;
font-weight: 800;
}

.add-to-cart {
padding: 9px 14px;

border: none;
border-radius: 10px;

color: #03202a;
background: #48d7ef;

font-weight: 800;

cursor: pointer;

transition:
transform 0.2s ease,
filter 0.2s ease;
}

.add-to-cart:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}

/* ==================== ABOUT ==================== */

.about-section {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 70px;

max-width: 1100px;

margin: 0 auto;

padding: 100px 30px;

border-top: 1px solid rgba(120, 220, 240, 0.08);
}

.about-section h2 {
margin-top: 12px;

color: #effcff;

font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.05;
}

.about-section > p {
align-self: center;

color: #9bb8c2;

line-height: 1.9;
}

/* ==================== CONTACT ==================== */

.contact-section {
max-width: 1100px;

margin: 0 auto;

padding: 100px 30px;

display: grid;

grid-template-columns: 0.9fr 1.1fr;

gap: 70px;

align-items: start;
}

.contact-section .section-heading {
position: sticky;
top: 120px;
}

.contact-section h2 {
margin: 15px 0 25px;

color: #e9fbff;

font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.05;
}

.contact-section .section-heading > p:last-child {
max-width: 450px;

color: #9bb8c2;

line-height: 1.8;
}

/* ==================== CONTACT FORM ==================== */

.contact-form {
padding: 35px;

border: 1px solid rgba(120, 220, 240, 0.15);
border-radius: 24px;

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

box-shadow:
0 20px 60px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);
}

.form-row {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;
}

.form-group {
display: flex;
flex-direction: column;

margin-bottom: 22px;
}

.form-group label {
margin-bottom: 9px;

color: #dffaff;

font-size: 0.95rem;
font-weight: 600;
}

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

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;

padding: 14px 16px;

border: 1px solid rgba(120, 220, 240, 0.2);
border-radius: 12px;

outline: none;

color: #f2fcff;
background: rgba(5, 30, 40, 0.75);

font: inherit;

transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #66828c;
}

.form-group select {
cursor: pointer;
}

.form-group select option {
color: white;
background-color: #09252f;
}

.form-group textarea {
min-height: 150px;

resize: vertical;
}

/* ==================== FORM FOCUS ==================== */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #48d7ef;

background-color: rgba(5, 40, 52, 0.9);

box-shadow:
0 0 0 3px rgba(72, 215, 239, 0.12),
0 0 25px rgba(72, 215, 239, 0.08);
}

/* ==================== FORM VALIDATION ==================== */

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: #ff6b81;
}

.form-error {
min-height: 18px;

margin-top: 6px;

color: #ff7f91;

font-size: 0.8rem;
}

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

.contact-submit {
width: 100%;

padding: 15px 20px;

border: none;
border-radius: 12px;

color: #03202a;

background:
linear-gradient(
135deg,
#42d8ef,
#168bb0
);

font: inherit;
font-weight: 800;

cursor: pointer;

transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}

.contact-submit:hover {
transform: translateY(-2px);

box-shadow:
0 10px 30px rgba(66, 216, 239, 0.25);

filter: brightness(1.08);
}

.contact-submit:active {
transform: translateY(0);
}

/* ==================== SUCCESS MESSAGE ==================== */

.form-success {
min-height: 24px;

margin-top: 18px;

color: #6ee7b7;

text-align: center;

font-weight: 600;
}

/* ==================== CART PANEL ==================== */

.cart-panel {
position: fixed;

z-index: 2000;

top: 0;
right: 0;

width: min(420px, 90vw);
height: 100vh;

display: flex;
flex-direction: column;

background:
linear-gradient(
180deg,
#092a35,
#041820
);

border-left: 1px solid rgba(120, 220, 240, 0.15);

box-shadow:
-20px 0 60px rgba(0, 0, 0, 0.35);

transform: translateX(100%);

transition: transform 0.35s ease;
}

.cart-panel.open {
transform: translateX(0);
}

.cart-header {
display: flex;
align-items: center;
justify-content: space-between;

padding: 25px;

border-bottom: 1px solid rgba(120, 220, 240, 0.1);
}

.cart-header h2 {
color: #effcff;
}

#close-cart {
width: 38px;
height: 38px;

border: none;
border-radius: 50%;

color: #dffaff;
background: rgba(255, 255, 255, 0.06);

font-size: 1.5rem;

cursor: pointer;
}

.cart-items {
flex: 1;

padding: 25px;

overflow-y: auto;
}

.empty-cart {
color: #7f9da6;

text-align: center;
margin-top: 50px;
}

.cart-item {
display: grid;

grid-template-columns: 55px 1fr auto;

gap: 12px;

align-items: center;

margin-bottom: 15px;
padding: 12px;

border-radius: 12px;

background: rgba(255, 255, 255, 0.04);
}

.cart-item-image {
display: grid;
place-items: center;

width: 55px;
height: 55px;

border-radius: 10px;

background: rgba(72, 215, 239, 0.08);

font-size: 1.8rem;
}

.cart-item h3 {
color: #eaffff;

font-size: 0.95rem;
}

.cart-item p {
color: #7f9da6;

font-size: 0.8rem;
}

.cart-item-price {
color: #48d7ef;

font-weight: 700;
}

/* ==================== CART ITEM CONTROLS ==================== */

.cart-item-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 10px;
}

.quantity-button {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 1px solid rgba(72, 215, 239, 0.25);
  border-radius: 8px;

  color: #eaffff;
  background: rgba(72, 215, 239, 0.08);

  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.quantity-button:hover {
  color: #03202a;
  background: #48d7ef;
  border-color: #48d7ef;

  transform: translateY(-1px);
}

.quantity-button:active {
  transform: translateY(0);
}

.cart-item-controls > span {
  min-width: 24px;

  color: #eaffff;

  font-size: 0.95rem;
  font-weight: 800;

  text-align: center;
}

.remove-item {
  margin-left: auto;

  padding: 7px 10px;

  border: 1px solid rgba(255, 107, 129, 0.2);
  border-radius: 8px;

  color: #ff8b9d;
  background: rgba(255, 107, 129, 0.06);

  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.remove-item:hover {
  color: #fff;
  background: #d94b62;
  border-color: #d94b62;

  transform: translateY(-1px);
}

.cart-footer {
padding: 25px;

border-top: 1px solid rgba(120, 220, 240, 0.1);
}

.cart-total {
display: flex;
align-items: center;
justify-content: space-between;

margin-bottom: 20px;

color: #a8c7cf;
}

.cart-total strong {
color: #effcff;

font-size: 1.4rem;
}

.checkout-button {
width: 100%;

padding: 14px;

border: none;
border-radius: 12px;

color: #03202a;
background: #48d7ef;

font-weight: 800;

cursor: pointer;
}

/* ==================== CART OVERLAY ==================== */

.cart-overlay {
position: fixed;

z-index: 1500;

inset: 0;

background: rgba(0, 0, 0, 0.55);

opacity: 0;
visibility: hidden;

transition:
opacity 0.3s ease,
visibility 0.3s ease;
}

.cart-overlay.active {
opacity: 1;
visibility: visible;
}

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

footer {
display: flex;

flex-direction: column;
align-items: center;

gap: 12px;

padding: 60px 30px;

border-top: 1px solid rgba(120, 220, 240, 0.08);

color: #78959e;

text-align: center;
}

footer .logo {
margin-bottom: 5px;
}

.copyright {
color: #506b73;

font-size: 0.8rem;
}

/* ==================== ANIMATIONS ==================== */

@keyframes fish-float {

0%,
100% {
transform: translateY(0) rotate(-3deg);
}

50% {
transform: translateY(-18px) rotate(3deg);
}

}

@keyframes plant-sway {

0%,
100% {
transform: rotate(-4deg);
}

50% {
transform: rotate(5deg);
}

}

@keyframes bubble-rise {

0% {
transform: translateY(0) scale(0.8);
opacity: 0;
}

20% {
opacity: 1;
}

100% {
transform: translateY(-250px) scale(1.2);
opacity: 0;
}

}

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

@media (max-width: 900px) {

.hero {
grid-template-columns: 1fr;

gap: 50px;

text-align: center;

}

.hero-content {
margin: 0 auto;
}

.hero-text {
margin-left: auto;
margin-right: auto;
}

.hero-aquarium {
margin: 0 auto;
}

.product-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.about-section {
grid-template-columns: 1fr;

gap: 30px;

}

.contact-section {
grid-template-columns: 1fr;

gap: 40px;

padding: 80px 20px;

}

.contact-section .section-heading {
position: static;
}

}

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

@media (max-width: 650px) {

.site-header {
padding: 15px 20px;
}

.main-nav {
display: none;
}

.hero {
min-height: auto;

padding: 80px 20px;

}

.hero h1 {
font-size: 3.3rem;

letter-spacing: -2px;

}

.hero-aquarium {
width: 300px;
}

.shop-section {
padding: 70px 20px;
}

.shop-controls {
flex-direction: column;

align-items: stretch;

}

.filter-buttons {
justify-content: center;
}

.search-box {
flex-direction: column;

align-items: stretch;

}

.search-box input {
width: 100%;
}

.product-grid {
grid-template-columns: 1fr;
}

.about-section {
padding: 70px 20px;
}

.contact-section {
padding: 70px 20px;
}

.contact-form {
padding: 25px 20px;

border-radius: 18px;

}

.form-row {
grid-template-columns: 1fr;
}

.cart-panel {
width: 92vw;
}

}

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

@media (max-width: 400px) {

.logo {
font-size: 1.05rem;
}

.cart-button {
padding: 8px 11px;
}

.hero h1 {
font-size: 2.8rem;
}

.hero-aquarium {
width: 260px;
}

.contact-form {
padding: 20px 15px;
}
}