/* ===================================================
   Tropical Reef Aquarium Website
   Main Stylesheet
   Author: ChatGPT
   =================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ===== CSS VARIABLES ===== */

:root{

--primary:#0077b6;
--secondary:#00b4d8;
--accent:#48cae4;
--dark:#023e8a;
--light:#caf0f8;
--white:#ffffff;
--grey:#f5f5f5;
--text:#333333;
--success:#2ecc71;

--shadow:0 10px 30px rgba(0,0,0,.15);

--radius:15px;

}

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

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#eef9ff;
color:var(--text);
line-height:1.7;

}

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

header{

position:sticky;
top:0;
z-index:999;

background:linear-gradient(90deg,
var(--dark),
var(--primary));

box-shadow:var(--shadow);

}

.logo{

font-size:2rem;
font-weight:700;
color:white;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

.navbar{

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

padding:18px 0;

}

nav ul{

display:flex;
list-style:none;

}

nav ul li{

margin-left:25px;

}

nav a{

text-decoration:none;
color:white;
font-weight:500;
transition:.3s;

}

nav a:hover{

color:#90e0ef;

}

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

.hero{

height:90vh;

background:
linear-gradient(
rgba(0,60,100,.45),
rgba(0,0,40,.55)
),

url("https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1600&q=80");

background-size:cover;
background-position:center;

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

text-align:center;
color:white;

}

.hero-content{

max-width:800px;
padding:30px;

}

.hero h1{

font-size:3.5rem;
margin-bottom:20px;

}

.hero p{

font-size:1.2rem;
margin-bottom:35px;

}

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

.btn{

display:inline-block;

padding:14px 32px;

background:var(--secondary);

color:white;

text-decoration:none;

border-radius:40px;

transition:.4s;

font-weight:600;

}

.btn:hover{

background:var(--dark);

transform:translateY(-3px);

}

/* ===== SECTIONS ===== */

section{

padding:70px 0;

}

.section-title{

text-align:center;
font-size:2.4rem;
margin-bottom:40px;
color:var(--dark);

}

/* ===== CARDS ===== */

.cards{

display:grid;

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

gap:30px;

}

.card{

background:white;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.card:hover{

transform:translateY(-8px);

}

.card img{

width:100%;
height:220px;
object-fit:cover;

}

.card-content{

padding:25px;

}

.card h3{

margin-bottom:15px;

color:var(--primary);

}

/* ===== GLASS CARDS ===== */

.glass{

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

backdrop-filter:blur(10px);

border-radius:20px;

padding:30px;

box-shadow:var(--shadow);

}

/* ===== GALLERY ===== */

.gallery{

display:grid;

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

gap:20px;

}

.gallery img{

width:100%;

height:250px;

object-fit:cover;

border-radius:15px;

transition:.5s;

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.05);

}

/* ===== TABLE ===== */

table{

width:100%;

border-collapse:collapse;

margin:30px 0;

background:white;

box-shadow:var(--shadow);

}

th{

background:var(--primary);

color:white;

padding:15px;

}

td{

padding:15px;

border:1px solid #ddd;

}

tr:nth-child(even){

background:#f9f9f9;

}

/* ===== CHECKLIST ===== */

.checklist{

display:grid;

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

gap:20px;

}

.check-item{

background:white;

padding:25px;

border-left:5px solid var(--accent);

box-shadow:var(--shadow);

border-radius:10px;

}

/* ===== STATISTICS ===== */

.stats{

display:grid;

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

gap:25px;

text-align:center;

}

.stat{

background:white;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

}

.stat h2{

font-size:2.5rem;

color:var(--primary);

}

/* ===== FORMS ===== */

form{

background:white;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

}

label{

display:block;

margin-top:15px;

font-weight:600;

}

input,
textarea{

width:100%;

padding:15px;

margin-top:8px;

border:1px solid #ccc;

border-radius:10px;

font-family:inherit;

}

textarea{

resize:vertical;

min-height:180px;

}

button{

margin-top:20px;

padding:15px 30px;

background:var(--primary);

color:white;

border:none;

border-radius:40px;

cursor:pointer;

font-size:1rem;

transition:.3s;

}

button:hover{

background:var(--dark);

}

/* ===== ALERTS ===== */

.success{

background:#d4edda;

color:#155724;

padding:15px;

border-radius:10px;

margin-bottom:20px;

}

.error{

background:#f8d7da;

color:#721c24;

padding:15px;

border-radius:10px;

margin-bottom:20px;

}

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

footer{

background:var(--dark);

color:white;

padding:50px 0;

margin-top:60px;

}

.footer-grid{

display:grid;

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

gap:30px;

}

footer a{

color:#90e0ef;

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}

/* ===== SOCIAL ICONS ===== */

.social{

display:flex;

gap:15px;

margin-top:20px;

}

.social a{

font-size:1.5rem;

color:white;

transition:.3s;

}

.social a:hover{

transform:scale(1.2);

color:var(--accent);

}

/* ===== SCROLL TO TOP ===== */

#topBtn{

position:fixed;

bottom:25px;

right:25px;

display:none;

background:var(--secondary);

color:white;

padding:15px;

border-radius:50%;

cursor:pointer;

box-shadow:var(--shadow);

z-index:1000;

}

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

.menu-toggle{

display:none;

font-size:2rem;

color:white;

cursor:pointer;

}

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

.fade{

animation:fadeIn 1s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.float{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:900px){

.hero h1{

font-size:2.6rem;

}

nav ul{

display:none;

flex-direction:column;

background:var(--dark);

position:absolute;

right:20px;

top:70px;

padding:20px;

border-radius:10px;

}

nav ul.show{

display:flex;

}

.menu-toggle{

display:block;

}

.navbar{

position:relative;

}

}

@media(max-width:768px){

.hero{

height:70vh;

}

.hero h1{

font-size:2rem;

}

.hero p{

font-size:1rem;

}

.section-title{

font-size:2rem;

}

}

@media(max-width:500px){

.hero{

padding:20px;

}

.btn{

display:block;

margin:10px auto;

width:220px;

text-align:center;

}

}