* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}



body {

background: #66c7ff;

color: #333;

line-height: 1.6;

}



header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 5%;

background: #66c7ff;

border-bottom: 1px solid #38bdf8;

gap: 2rem;

}



h1, h2, h3 {

color: #0b3d91;

}



.logo img {

max-height: 50px;

}



* Navigation *

header nav ul {

display: flex;

list-style: none;

margin: 0;

padding: 0;

gap: 1.5rem;

}



header nav ul li a {

text-decoration: none;

color: #333;

font-weight: 500;

font-size: 1rem;

position: relative;

transition: color 0.3s ease;

}



header nav ul li a::after {

content: "";

position: absolute;

width: 0;

height: 2px;

bottom: -4px;

left: 0;

background-color: #0b3d91;

transition: width 0.3s ease;

}



header nav ul li a:hover {

color: #0b3d91;

}



header nav ul li a:hover::after {

width: 100%;

}



* Right side *

.header-right {

display: flex;

align-items: center;

gap: 1.5rem;

}



* Search box *

.search-box {

display: flex;

align-items: center;

border: 1px solid #0b3d91;

border-radius: 25px;

padding: 0.3rem 0.8rem;

gap: 0.5rem;

}



.search-box input {

border: none;

outline: none;

font-size: 0.9rem;

width: 180px;

}



* Icons *

.icons {

display: flex;

gap: 1rem;

font-size: 1.2rem;

cursor: pointer;

}



.icons i:hover {

color: #0b3d91;

}



.product {

display: flex;

justify-content: space-between;

align-items: flex-start;

padding: 2rem 5%;

gap: 3rem;

}



* Left side gallery *

.gallery {

flex: 1;

text-align: center;

}



.main-img {

width: 100%;

max-width: 500px;

border-radius: 10px;

}



.price {

font-size: 1.5rem;

color: #0b3d91;

font-weight: bold;

margin: 1rem 0;

}



.thumbnails {

display: flex;

justify-content: center;

margin-top: 1rem;

gap: 1rem;

}



.thumbnails img {

width: 60px;

border-radius: 10px;

border: 2px solid transparent;

cursor: pointer;

transition: border 0.3s ease;

}



.thumbnails img:hover {

border: 2px solid #0b3d91;

}



* Right side details *

.details {

flex: 1;

}



.details h3 {

color: #777;

font-size: 1rem;

margin-bottom: 0.5rem;

}



.details h1 {

margin-bottom: 0.5rem;

font-size: 1.8rem;

}



.rating {

color: #60a5fa;

font-size: 1.2rem;

}



.rating .reviews {

color: #0b3d91;

font-size: 0.9rem;

margin-left: 0.5rem;

}



.stock {

font-size: 0.9rem;

margin: 0.5rem 0;

}



.stock .in-stock {

color: rgb(94, 255, 0);

font-weight: bold;

}



* Colors *

.colors {

display: flex;

gap: 10px;

margin: 1rem 0;

}



.colors span {

width: 25px;

height: 25px;

border-radius: 50%;

cursor: pointer;

border: 2px solid #38bdf8;

transition: transform 0.2s;

}



.colors span:hover {

transform: scale(1.2);

border: 2px solid #0b3d91;

}



* Specs list *

.specs {

list-style: none;

margin: 1rem 0;

padding: 0;

color: #333;

}



.specs li {

margin: 0.4rem 0;

}



* Description *

.desc {

font-size: 0.9rem;

color: #555;

margin: 1rem 0;

}



* Quantity *

.quantity {

margin: 1.5rem 0;

}



.qty-box {

display: flex;

align-items: center;

border: 2px solid #38bdf8;

border-radius: 12px;

overflow: hidden;

width: 120px;

box-shadow: 0 2px 6px rgba(0,0,0,0.1);

}



.qty-box button {

flex: 1;

border: none;

background: #0b3d91;

color: #66c7ff;

font-size: 1.2rem;

font-weight: bold;

padding: 0.5rem;

cursor: pointer;

transition: background* 0.3s, transform 0.2s;

}



.qty-box button:hover {

background: #082f6b;

transform: scale(1.05);

}



.qty-box input {

width: 50px;

text-align: center;

border: none;

outline: none;

font-size: 1.2rem;

font-weight: 600;

}



* Buttons *

.buttons {

display: flex;

gap: 1rem;

}



.add-cart, .buy-now {

flex: 1;

padding: 0.8rem 1rem;

font-size: 1rem;

font-weight: bold;

border: none;

border-radius: 25px;

cursor: pointer;

transition: 0.3s;

text-align: center;

text-decoration: none;

display: inline-block;

}



* Login button *

.add-cart {

background: #0b3d91;

color: #66c7ff;

}



.add-cart:hover {

background: #082f6b;

color: #66c7ff;

}



* Register button *

.buy-now {

background: #f8f8f8;

border: 2px solid #0b3d91;

color: #0b3d91;

}



.buy-now:hover {

background: #0b3d91;

color: #66c7ff;

}



* Reviews *

.gallery .reviews {

margin-top: 2rem;

text-align: left;

}



.reviews {

margin-top: 1.5rem;

padding: 1rem;

background: #f9f9f9;

border-radius: 12px;

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

animation: fadeInUp 1s ease-in-out;

}



.reviews h3 {

font-size: 1.3rem;

color: #0b3d91;

margin-bottom: 1rem;

text-align: left;

}



.review {

padding: 0.8rem;

border-bottom: 1px solid #38bdf8;

opacity: 0;

transform: translateY(20px);

animation: fadeSlide 0.8s ease forwards;

}



.review:last-child {

border-bottom: none;

}



.review:nth-child(2) {

animation-delay: 0.3s;

}

.review:nth-child(3) {

animation-delay: 0.6s;

}



* Animations *

@keyframes fadeInUp {

from { opacity: 0; transform translateY(30px); }

to { opacity: 1; transform: translateY(0); }

}



@keyframes fadeSlide {

to { opacity: 1; transform: translateY(0); }

}



* Footer *

.footer {

background: #0b3d91;

padding: 3rem 5%;

font-family: Arial, sans-serif;

color: #333;

}



.footer-container {

display: grid;

grid-template-columns: 2fr 1fr 1fr 1fr;

gap: 2rem;

}



.footer-col h3,

.footer-col .logo {

margin-bottom: 1rem;

font-weight: bold;

}



.footer-col p {

margin: 0.5rem 0;

}



.footer-col ul {

list-style: none;

padding: 0;

}



.footer-col ul li {

margin: 0.4rem 0;

}



.footer-col ul li a {

text-decoration: none;

color: #333;

transition: color 0.3s ease;

}



.footer-col ul li a:hover {

color: #0b3d91;

}



* Brand subscribe *

.subscribe {

margin-top: 1rem;

display: flex;

flex-direction: column;

gap: 0.5rem;

}



.subscribe input {

padding: 0.5rem;

border: none;

border-bottom: 2px solid #333;

background: transparent;

outline: none;

}



.subscribe button {

background: #000;

color: #66c7ff;

border: none;

padding: 0.6rem;

cursor: pointer;

transition: *background* 0.3s;

}



.subscribe button:hover {

background: #0b3d91;

}



* Social Icons *

.socials {

display: flex;

gap: 1rem;

margin-top: 1rem;

}



.socials a {

color: #333;

font-size: 1.5rem;

transition: color 0.3s ease;

}



.socials a:hover {

color: #0b3d91;

}



* Footer Bottom *

.footer-bottom {

margin-top: 2rem;

text-align: center;

font-size: 0.9rem;

border-top: 1px solid #38bdf8;

padding-top: 1rem;

}



* Responsive *



* Footer  Tablet *

@media (max-width: 768px) {

.footer-container {

grid-template-columns: 1fr 1fr;

}

}



* Footer - Mobile Small *

@media (max-width: 480px) {

.footer-container {

grid-template-columns: 1fr;

text-align: center;

}

.socials {

justify-content: center;

}

}



* Tablets (landscape & portrait) *

@media (max-width: 1024px) {

.product {

flex-direction: column;

align-items: center;

text-align: center;

}



.details {

display: flex;

flex-direction: column;

text-align: left;

margin-top: 2rem;

width: 100%;

}



* Order for product details *

.details .buttons { order: 1; margin-bottom: 1.5rem; flex-direction: column; display: flex; }

.details h3 { order: 2; }

.details h1 { order: 3; }

.stock { order: 4; }

.rating { order: 5; }

.colors { order: 6; }

.quantity { order: 7; }

.price { order: 8; }

.desc,

.specs { order: 9; margin-top: 1rem; }

.reviews { order: 10; margin-top: 2rem; }



.gallery .reviews {

text-align: center;

}



.qty-box {

width: 140px;

}

}



* Mobile Large (max-width: 768px) *

@media (max-width: 768px) {

header {

flex-direction: column;

gap: 1rem;

text-align: center;

}



header nav ul {

flex-wrap: wrap;

justify-content: center;

gap: 1rem;

}



.header-right {

flex-direction: column;

gap: 1rem;

}



.product {

flex-direction: column;

gap: 2rem;

}



.main-img {

order: 0;

max-width: 90%;

}



* Buttons under image *

.gallery .buttons {

order: 2;

display: flex;

justify-content: center;

flex-direction: column;

gap: 1rem;

margin-top: 1rem;

width: 100%;

}



.gallery .buttons a {

flex: 1;

min-width: 120px;

text-align: center;

}



.footer-container {

grid-template-columns: 1fr 1fr;

gap: 1.5rem;

}

}



* Mobile Small (max-width: 480px) *

@media (max-width: 480px) {

body {

font-size: 0.9rem;

}



header {

padding: 1rem 2%;

}



.logo img {

max-height: 40px;

}



.search-box input {

width: 140px;

font-size: 0.8rem;

}



.main-img {

order: 0;

max-width: 100%;

}



* Stack buttons vertically *

.gallery .buttons {

order: 2;

flex-direction: column;

margin-top: 10px;

width: 100%;

}



.gallery .buttons a {

width: 100%;

text-align: center;

}



.thumbnails img {

width: 45px;

}



.qty-box {

width: 100px;

}



.qty-box button {

font-size: 1rem;

padding: 0.4rem;

}



.qty-box input {

width: 35px;

font-size: 1rem;

}



.footer-container {

grid-template-columns: 1fr;

text-align: center;

}



.socials {

justify-content: center;

}

}