* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: 'Poppins', sans-serif;overflow-x: hidden}

.header {position: fixed;top: 0;left: 0;width: 100%;height: 60px;background: #343b91;z-index: 1000;}
.navbar {max-width: 1280px;height: 60px;margin: auto;display: flex;align-items: center;justify-content: center;position: relative;}
.logo {position: absolute;left: 25px;top: 8px;width: 135px;z-index: 20;}
.logo img {width: 100%;height: auto;display: block;}
.nav-menu {display: flex;gap: 45px;}
.nav-menu a {color: white;text-decoration: none;font-size: 15px;transition: 0.3s;}
.nav-menu a:hover {opacity: 0.7;}
.menu-toggle {display: none;background: none;border: none;color: white;font-size: 25px;cursor: pointer;}
.hero {position: relative;height: 750px;min-height: 650px;margin-top: 60px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(215,241,115,.8));}
.hero-background {position: absolute;inset: 0;background:url("../images/background.png")center / cover no-repeat;}
.hero-grid {position: absolute;width: 90%;height: 100%;left: 5%;top: 0;}
.hero-card {position: absolute;overflow: hidden;background: white;border: 8px solid white;box-shadow:0 10px 25px rgba(0,0,0,.15);transition:transform .45s ease,box-shadow .45s ease,z-index .2s;}
.hero-card img {width: 100%;height: 100%;object-fit: cover;display: block;transition:transform .5s ease,filter .5s ease;}
.hero-card:hover {box-shadow:0 20px 45px rgba(0,0,0,.3);}
.hero-card:hover img {transform: scale(1.08);filter:brightness(1.08)saturate(1.15);}
/*.hero-card.active {z-index: 30;transform:translateY(-15px)scale(1.05)rotate(0deg);}*/
.hero-card-1 {width: 27%;height: 52%;top: -1%;left: 6%;transform: rotate(-6deg);z-index:2;}
.hero-card-2 {width: 27%;height: 52%;top: -6%;left: 37%;transform: rotate(7deg);}
.hero-card-3 {width: 29%;height: 78%;top: -10%; left: 70%;transform: rotate(-10deg);}
.hero-card-4 {width: 27%;height: 52%;bottom: -2.3%;left: 5.5%;transform: rotate(4deg);z-index:1;}
.hero-card-5 {width: 27%;height: 52%;bottom: -5%;left: 40%;transform: rotate(-6deg);}
.hero-card-6 {width: 26%;height: 62%;bottom: -12%;right: -0.5%;transform: rotate(8deg);}
.hero-title {position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%)rotate(-1deg);z-index: 50;text-align: center;padding: 20px 35px;border-radius: 50px;width: max-content;}
.hero-title h1 {font-size:clamp(35px, 5vw, 85px);line-height: .9;font-weight: 900;letter-spacing: -3px;}
.product-section {position: relative;min-height: 700px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.1),rgba(220,242,155,.8));}
.product-section::before {content: "";position: absolute;inset: 0;background:url("../images/background2.png")center / cover no-repeat;z-index: 0;}
.product-overlay {position: absolute;inset: 0;background:rgba(240,250,205,.25);}
.product-container {position: relative;max-width: 1200px;min-height: 700px;margin: auto;padding:70px 30px 30px;}
.product-info {position: absolute;left: 3%;top: 70px;z-index: 5;}
.product-logo {width: 290px;display: block;margin-bottom: 20px;}
.product-info p {font-size: 23px;line-height: 1.25;font-weight: 600;color: #333;}
.product-info h2 {margin-top: 25px;font-size: 42px;color: #00a936;font-style: italic;font-weight: 900;}
.supermarket {width: 125px;height: 125px;margin-top: 30px;border-radius: 50%;background: #3cae45;border: 8px solid #fff;display: flex;justify-content: center;align-items: center;text-align: center;color: white;font-weight: bold;transform: rotate(-10deg);}
.buy-button {position: absolute;right: 40px;top: 80px;display: flex;align-items: center;gap: 15px;padding:10px 20px;background: #343b91;color: white;text-decoration: none;border-radius: 35px;font-size: 18px;font-weight: bold;box-shadow:0 6px 15px rgba(0,0,0,.25);transition: .3s;z-index: 20;}
.buy-button:hover {transform:translateY(-5px)scale(1.04);}
.cart-icon {background: white;color: #343b91;width: 40px;height: 40px;border-radius: 50%;display: flex;justify-content: center;align-items: center;}
.products {position: absolute;bottom: 20px;left: 30%;width: 68%;display: flex;align-items: flex-end;justify-content: center;gap: 20px;z-index: 10;}
.product-item {display: block;width: 24%;transition:transform .4s ease;}
.product-item img {width: 100%;height: auto;display: block;filter:drop-shadow(0 15px 12pxrgba(0,0,0,.3));transition:transform .4s ease;}
.product-item:hover {transform:translateY(-20px)scale(1.05);}
.footer {background: #343b91;color: white;padding:25px 10% 10px;}
.footer-container {max-width: 1200px;margin: auto;display: grid;grid-template-columns:1fr 1fr;gap: 30px;}
.footer-logo img {width: 180px;}
.footer-social {display: flex;justify-content: flex-end;gap: 20px;margin-right:2rem;transform:translateY(50px);}
.footer-social a {color: white;text-decoration: none;font-size: 28px;transition: .3s;}
.footer-social a:hover {transform:translateY(-4px);}
.footer-contact {grid-column: 2;justify-self: end;}
.footer-contact h3 {margin-bottom: 20px;}
.footer-contact p { font-size: 15px;display: flex;align-items: center;gap: 8px;line-height: 1.0;margin: 0 0 18px 0;}
.copyright {max-width: 1200px;margin:50px auto 0;padding-top: 12px;border-top:1px solid rgba(255,255,255,.7);font-size: 13px;}


@media (max-width: 1024px) {   
    .hero {position: relative;height: 520px;min-height: 450px;margin-top: 50px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(215,241,115,.8));}
    .hero-card-1{width:25%;height:53%;top:1%;left:6%;transform:rotate(-6deg);z-index:2;}
    .hero-card-2{width:25%;height:50%;top:-5%;left:35%;transform:rotate(6deg);}
    .hero-card-3{width:27%;height:72%;top:-5%;left:65%;transform:rotate(-9deg);}
    .hero-card-4{width:25%;height:53%;bottom:-3%;left:5%;transform:rotate(5deg);z-index:1;}
    .hero-card-5{width:25%;height:55%;bottom:-8%;left:35%;transform:rotate(-5deg);}
    .hero-card-6{width:24%;height:55%;bottom:-7%;right:7.8%;transform:rotate(8deg);}
    .hero-title{width:58%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;}
    .hero-title img{width:100%;height:auto;}
    .product-section {min-height: 30rem;}
    .product-container {min-height: 30rem;}
    .product-info {position: relative;left: auto;top: auto;text-align: center;display: flex;flex-direction: column;align-items: center;}
    .buy-button {top: 50px;right: 50%;transform:translateX(410px);}
    .buy-button:hover {transform: translateX(410px) scale(1.04);}
    .products {left: 5%;width: 90%;bottom: 20px;}
    .footer-social {display: flex;justify-content: flex-end;gap: 20px;margin-right:1.5rem;transform:translateY(40px);}
}

@media (max-width: 900px) {
    .hero {position: relative;height: 400px;min-height: 450px;margin-top: 50px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(215,241,115,.8));}
    .hero-card-1{width:25%;height:53%;top:2%;left:6%;transform:rotate(-6deg);z-index:2;}
    .hero-card-2{width:25%;height:50%;top:-5%;left:35%;transform:rotate(6deg);}
    .hero-card-3{width:27%;height:72%;top:-5%;left:66%;transform:rotate(-9deg);}
    .hero-card-4{width:25%;height:53%;bottom:-3%;left:5%;transform:rotate(5deg);z-index:1;}
    .hero-card-5{width:25%;height:55%;bottom:-8%;left:35%;transform:rotate(-5deg);}
    .hero-card-6{width:24%;height:55%;bottom:-7%;right:6.8%;transform:rotate(8deg);}
    .hero-title{width:58%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;}
    .hero-title img{width:100%;height:auto;}
    .product-section {min-height: 30rem;}
    .product-container {min-height: 30rem;}
    .product-info {position: relative;left: auto;top: auto;text-align: center;display: flex;flex-direction: column;align-items: center;}
    .buy-button {top:50px;right: 50%;transform:translateX(160%);}
    .buy-button:hover {transform: translateX(160%) scale(1.04);}
    .products {left: 5%;width: 90%;bottom: 20px;}
    .footer-social {display: flex;justify-content: flex-end;gap: 20px;margin-right:1.5rem;transform:translateY(40px);}
}


@media (max-width: 768px) {
    .header,
    .navbar {height: 55px;}
    .logo {left: 15px;width: 110px;}
    .nav-menu {position: absolute;top: 55px;left: 0;width: 100%;background: #343b91;display: none;flex-direction: column;align-items: center;gap: 0;}
    .nav-menu.active {display: flex;}
    .nav-menu a {width: 100%;text-align: center;padding: 15px;}
    .menu-toggle {display: block;position: absolute;right: 20px;}
    .hero {position: relative;height: 300px;min-height: 400px;margin-top: 50px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(215,241,115,.8));}
    .hero-card-1{width:25%;height:55%;top: 0.1%;left:6%;transform:rotate(-6deg);z-index:2;}
    .hero-card-2{width:25%;height:50%;top:-5%;left:35%;transform:rotate(6deg);}
    .hero-card-3{width:27%;height:72%;top:-5%;left:65%;transform:rotate(-9deg);}
    .hero-card-4{width:25%;height:53%;bottom:-3%;left:5%;transform:rotate(5deg);z-index:1;}
    .hero-card-5{width:25%;height:55%;bottom:-8%;left:35%;transform:rotate(-5deg);}
    .hero-card-6{width:24%;height:55%;bottom:-7%;right:7.8%;transform:rotate(8deg);}
    .hero-title{width:58%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;}
    .hero-title img{width:100%;height:auto;}
    .product-section {min-height: 25rem;}
    .product-container {min-height: 25rem;padding:45px 20px;}
    .product-info {top: 0;}
    .product-logo {width: 220px;}
    .product-info p {font-size: 17px;}
    .product-info h2 {font-size: 32px;}
    .buy-button {top:50px;font-size: 14px; padding: 5px 15px;transform: translateX(320px);}
    .buy-button:hover {transform: translateX(320px) scale(1.04);}
    .products {left: 5%;width: 90%;display: grid;grid-template-columns:repeat(2, 1fr);gap: 15px;bottom: 20px;}
    .product-item {width: 100%;}
    .footer-container {grid-template-columns: 1fr;text-align: center;}
    .footer-logo img {width: 150px;}
    .footer-social {display: flex;justify-content: center;gap: 20px;margin-right:1.5rem;transform:translateY(5px);}
    .footer-contact {grid-column: auto;justify-self: center;}
    .footer-contact h3 {margin-bottom: 20px;transform:translateX(-35px);}
    .copyright {text-align: center;line-height: 1.5;}

}

@media (max-width: 480px) {
    .header,
    .navbar {height: 55px;}
    .logo {left: 15px;width: 110px;}
    .nav-menu {position: absolute;top: 55px;left: 0;width: 100%;background: #343b91;display: none;flex-direction: column;align-items: center;gap: 0;}
    .nav-menu.active {display: flex;}
    .nav-menu a {width: 100%;text-align: center;padding: 15px;}
    .menu-toggle {display: block;position: absolute;right: 20px;}
    .hero {position: relative;height: 200px;min-height: 220px;margin-top: 50px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(215,241,115,.8));}
    .hero-card {position: absolute;overflow: hidden;background: white;border: 3.5px solid white;box-shadow:0 10px 25px rgba(0,0,0,.15);transition:transform .45s ease,box-shadow .45s ease,z-index .2s;}
    .hero-card-1{width:25%;height:53%;top: 4%;left:7%;transform:rotate(-6deg);z-index:2;}
    .hero-card-2{width:25%;height:50%;top:-5%;left:35%;transform:rotate(6deg);}
    .hero-card-3{width:27%;height:72%;top:-5%;left:65%;transform:rotate(-9deg);}
    .hero-card-4{width:25%;height:53%;bottom:-3%;left:6%;transform:rotate(5deg);z-index:1;}
    .hero-card-5{width:25%;height:55%;bottom:-8%;left:35%;transform:rotate(-5deg);}
    .hero-card-6{width:24%;height:55%;bottom:-7%;right:7.6%;transform:rotate(8deg);}
    .hero-title{width:67%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;}
    .hero-title img{width:100%;height:auto;}
    .product-section {min-height: 13rem;}
    .product-container {min-height: 13rem;padding:45px 20px;}
    .product-info {top: 0;}
    .product-logo {width: 220px;}
    .product-info p {font-size: 17px;}
    .product-info h2 {font-size: 32px;}
    .buy-button {top:20px;font-size: 10px;padding: 3px 8px 4px 12px;transform: translateX(170px)}
    .buy-button:hover {transform: translateX(170px) scale(1.04);}
    .cart-icon {background: white;color: #343b91;width: 25px;height: 25px;border-radius: 60%;display: flex;justify-content: center;align-items: center;}
    .products {left: 5%;width: 90%;display: grid;grid-template-columns:repeat(2, 1fr);gap: 15px;bottom: 20px;}
    .product-item {width: 100%;}
    .footer-container {grid-template-columns: 1fr;text-align: center;}
    .footer-logo img {width: 150px;}
    .footer-social {display: flex;justify-content: center;gap: 20px;margin-right:1rem;transform:translateY(5px);}
    .footer-contact {grid-column: auto;justify-self: center;}
    .copyright {text-align: center;line-height: 1.5;}
}


@media (max-width: 360px) {
    .header,
    .navbar {height: 55px;}
    .logo {left: 15px;width: 110px;}
    .nav-menu {position: absolute;top: 55px;left: 0;width: 100%;background: #343b91;display: none;flex-direction: column;align-items: center;gap: 0;}
    .nav-menu.active {display: flex;}
    .nav-menu a {width: 100%;text-align: center;padding: 15px;}
    .menu-toggle {display: block;position: absolute;right: 20px;}
    .hero {position: relative;height: 150px;min-height: 180px;margin-top: 50px;overflow: hidden;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(215,241,115,.8));}
    .hero-card {position: absolute;overflow: hidden;background: white;border: 3.5px solid white;box-shadow:0 10px 25px rgba(0,0,0,.15);transition:transform .45s ease,box-shadow .45s ease,z-index .2s;}
    .hero-card-1{width:25%;height:53%;top: 6%;left:7%;transform:rotate(-6deg);z-index:2;}
    .hero-card-2{width:25%;height:50%;top:-5%;left:35%;transform:rotate(6deg);}
    .hero-card-3{width:27%;height:72%;top:-5%;left:65%;transform:rotate(-9deg);}
    .hero-card-4{width:25%;height:53%;bottom:-7%;left:6%;transform:rotate(5deg);z-index:1;}
    .hero-card-5{width:25%;height:55%;bottom:-8%;left:35%;transform:rotate(-5deg);}
    .hero-card-6{width:24%;height:55%;bottom:-7%;right:7.6%;transform:rotate(8deg);}
    .hero-title{width:67%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;}
    .hero-title img{width:100%;height:auto;}
    .product-section {min-height: 10rem;}
    .product-container {min-height: 10rem;padding:45px 20px;}
    .product-info {top: 0;}
    .product-logo {width: 220px;}
    .product-info p {font-size: 17px;}
    .product-info h2 {font-size: 32px;}
    .buy-button {top:10px;font-size: 8px;padding: 3px 8px 4px 12px;transform: translateX(140px)}
    .buy-button:hover {transform: translateX(140px) scale(1.04);}
    .cart-icon {background: white;color: #343b91;width: 23px;height: 23px;border-radius: 60%;display: flex;justify-content: center;align-items: center;}
    .products {left: 5%;width: 90%;display: grid;grid-template-columns:repeat(2, 1fr);gap: 15px;bottom: 20px;}
    .product-item {width: 100%;}
    .footer-container {grid-template-columns: 1fr;text-align: center;}
    .footer-logo img {width: 150px;}
    .footer-social {display: flex;justify-content: center;gap: 20px;margin-right:1rem;transform:translateY(5px);}
    .footer-contact {grid-column: auto;justify-self: center;}
    .copyright {text-align: center;line-height: 1.5;}

}