*{

box-sizing:border-box;

margin:0;

padding:0;

}



body{

font-family:Arial,sans-serif;

background:#f7fafc;

color:#294145;

line-height:1.5;

}



/* HEADER (TOP BAR) */



.top-header{

  background:#0066AE;

  padding:12px 20px;

}



.header-container{

  max-width:1200px;

  margin:auto;



  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;

}



/* LOGO */

.logo{

  width:170px;

  max-width:100%;

  display:block;

}



/* SOCIAL ICONS */

.social-icons{

  display:flex;

  align-items:center;

  gap:12px;

}



.social-icons span{

  color:#fff;

  font-weight:700;

}



.social-icons img{

  width:28px;

  height:28px;

  object-fit:contain;

}





/* NAVBAR (ORANGE BAR UNDER HEADER) */



.navbar{

  background:#F86112;

  padding:18px;

}



.nav-container{

  max-width:1200px;

  margin:auto;



  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;

}



.nav-links{

  display:flex;

  gap:20px;

  flex-wrap:wrap;

}



.nav-links a{

  color:#fff;

  text-decoration:none;

  font-weight:700;

}



.nav-links a:hover{

  opacity:.8;

}



/* HERO */



.hero{

background:#0066AE;

padding:80px 20px;

text-align:center;

}



.hero-content{

max-width:800px;

margin:auto;

}



.hero h1{

color:#fff;

font-size:52px;

margin-bottom:20px;

}



.hero p{

color:#fff;

font-size:20px;

line-height:1.7;

}



.hero-button{

display:inline-block;

background:#F86112;

color:#fff;

padding:14px 24px;

border-radius:14px;

margin-top:25px;

font-weight:700;

text-decoration:none;

border:none;

cursor:pointer;

}



/* SECTIONS */



.section{

padding:60px 20px;

}



.section-header{

text-align:center;

margin-bottom:35px;

}



.section-header h2{

color:#0066AE;

font-size:36px;

margin-bottom:10px;

}



/* SEARCH */



.search-wrapper{

max-width:700px;

margin:0 auto 40px auto;

}



#searchInput{

width:100%;

padding:18px;

border-radius:16px;

border:2px solid #dbe4ea;

font-size:18px;

}



/* CATEGORY GRID */



.category-grid{

max-width:1200px;

margin:auto;



display:grid;

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

gap:20px;

}



.category-card{

  overflow:hidden;

  box-shadow:0 5px 15px rgba(0,0,0,.1);

  cursor:pointer;

  transition:.3s;

  border-radius:18px;

}



.category-card img{

  width:100%;

  height:180px;

  object-fit:cover;

  display:block;

}



/* PRODUCTS */



.product-grid{

max-width:1200px;

margin:auto;



display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));



gap:22px;

}



.product-card{

background:#fff;

padding:20px;

border-radius:20px;



box-shadow:

0 5px 15px rgba(0,0,0,.1);



text-align:center;

}



.product-card img{

width:100%;

height:240px;

object-fit:contain;

}



.product-title{

font-weight:700;

margin:14px 0;

min-height:65px;

}



.product-price{

color:#80BA65;

font-size:28px;

font-weight:700;

margin-bottom:10px;

}



.product-meta{

margin:6px 0;

}



/* BUTTONS */



.blue-btn{

display:inline-block;

background:#0066AE;

color:#fff;

padding:12px 20px;

border-radius:14px;

margin-top:10px;

text-decoration:none;

font-weight:700;

}



.amazon-btn{

display:inline-block;

background:#F86112;

color:#fff;

padding:14px 24px;

border-radius:16px;

margin-top:18px;

text-decoration:none;

font-weight:700;

}



/* PRODUCT PAGE */



.product-page{

max-width:1200px;

margin:auto;

padding:40px 20px;

}



.product-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:start;

}



.product-image img{

width:100%;

background:#fff;

padding:20px;

border-radius:20px;

}



.product-details h1{

margin-bottom:20px;

color:#0066AE;

}



.product-details p{

color:#294145;

margin-bottom:12px;

}



.back-button{

background:#0066AE;

color:#fff;

border:none;

padding:12px 18px;

border-radius:12px;

cursor:pointer;

margin-bottom:20px;

}



/* CHART */



.chart-wrapper{

position:relative;

width:100%;

max-width:1000px;

height:420px;



margin:40px auto 0 auto;



background:#fff;

padding:20px;

border-radius:20px;

}



.chart-wrapper canvas{

width:100%!important;

height:400px!important;

}



/* TEXT PAGES */



.text-page{

max-width:1000px;

margin:auto;

padding:60px 20px;

}



.text-page h1{

color:#0066AE;

margin-bottom:20px;

}



.text-page h2{

margin-top:30px;

margin-bottom:10px;

color:#0066AE;

}



.text-page p{

color:#294145;

margin-bottom:18px;

}



/* FOOTER */



.footer{

margin-top:60px;

padding:30px;

text-align:center;

background:#0066AE;

color:#fff;

}



/* MOBILE */



@media(max-width:900px){



.category-grid{

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

}



.product-layout{

grid-template-columns:1fr;

}



}



@media(max-width:768px){



.hero h1{

font-size:38px;

}



.hero p{

font-size:18px;

}



.nav-container{

flex-direction:column;

text-align:center;

}



.category-grid{

grid-template-columns:1fr;

}



.chart-wrapper{

height:320px;

}



.chart-wrapper canvas{

height:320px!important;

}



}



/* RSS FEED WRAPPER *//* RSS FEED WRAPPER:1200px;

  margin:20px auto 0 auto;

  padding:10px;



  background:#fff;

  border-radius:20px;

  box-shadow:0 5px 15px rgba(0,0,0,.1);

}



.rss-feed-wrapper{





#fitness-feed{

  padding-bottom:80px;

}



/* LOGIN IN NAVBAR */



.auth-box{

  display:flex;

  gap:8px;

  align-items:center;

}



.auth-box input{

  padding:6px 10px;

  border-radius:8px;

  border:none;

  font-size:14px;

}



.auth-box button{

  background:#0066AE;

  color:#fff;

  border:none;

  padding:8px 12px;

  border-radius:8px;

  font-weight:700;

  cursor:pointer;

}



.auth-box button:hover{

  opacity:.85;

}



@media(max-width:768px){



  .auth-box{

    width:100%;

    justify-content:center;

    margin-top:10px;

  }



}



/* MODAL BACKGROUND */

.modal{

  display:none;

  position:fixed;

  z-index:1000;

  left:0;

  top:0;



  width:100%;

  height:100%;



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

}



/* MODAL BOX */

.modal-content{

  background:#fff;

  padding:30px;

  border-radius:20px;



  width:300px;

  max-width:90%;



  position:absolute;

  top:50%;

  left:50%;

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



  text-align:center;

}



/* CLOSE BUTTON */

.close{

  position:absolute;

  top:10px;

  right:15px;

  font-size:24px;

  cursor:pointer;

}



/* FORM */

.modal-content input{

  width:100%;

  padding:10px;

  margin:10px 0;

  border-radius:10px;

  border:1px solid #ccc;

}



.modal-content button{

  width:100%;

  padding:10px;

  margin-top:10px;



  border:none;

  border-radius:10px;



  background:#F86112;

  color:#fff;

  font-weight:700;

  cursor:pointer;

}



.modal-content button:hover{

  opacity:.9;

}



.welcome-text{

  color:white;

  font-weight:700;

  margin-right:10px;

}



.auth-box{

  display:flex;

  align-items:center;

  gap:10px;

}



.auth-box button{

  background:#0066AE;

  color:white;

  border:none;

  padding:8px 12px;

  border-radius:8px;

  cursor:pointer;

}



.auth-box button:hover{

  opacity:0.85;

}