/* ==== RESET ==== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Montserrat',sans-serif;
}

body{
  background: radial-gradient(circle at top,#1a0000,#000000 60%);
  color:white;
}

/* ==== HEADER ==== */
header{
  position:fixed;
  top:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 60px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,0,0,0.2);
  z-index:1000;
}

.logo img{
    height:50px;           /* можеш да регулираш височината */
    width:50px;            /* квадрат, за да стане кръгло */
    border-radius:50%;     /* прави изображението кръгло */
    border:2px solid #ff0000; /* червен кант за акцент */
    box-shadow:0 4px 15px rgba(255,0,0,0.6); /* лека сянка за 3D ефект */
    object-fit:cover;      /* запазва съотношението, но запълва кръга */
    transition:0.3s transform,0.3s box-shadow;
}

.logo img:hover{
    transform:scale(1.1);
    box-shadow:0 6px 25px rgba(255,0,0,0.8);
}

nav a{
  margin-left:30px;
  color:white;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
}

nav a:hover{
  color:#ff0000;
}

/* ==== HERO ==== */
.hero{
  height:100vh;
  background:url("https://i.imgur.com/GAmkfPS.png") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

.hero::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom,rgba(0,0,0,0.3),#000);
}

.overlay{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
}

.hero-content{
  background:rgba(0,0,0,0.65);
  padding:50px 70px;
  border-radius:20px;
  backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  position:relative;
  z-index:2;
}

/* HERO TEXT */
.hero h1{
  font-size:90px;
  color:#ff0000;
  letter-spacing:8px;
  text-shadow:0 0 20px rgba(255,0,0,0.7),0 0 40px rgba(255,0,0,0.5);
}

.hero p{
  margin-top:10px;
  font-size:20px;
}

/* BUTTONS */
.btn{
  display:inline-block;
  margin-top:30px;
  padding:14px 35px;
  background:#ff0000;
  color:white;
  text-decoration:none;
  font-weight:bold;
  border-radius:10px;
  transition:0.3s transform, 0.3s box-shadow, 0.2s background;
}

.btn:hover{
  background:#b30000;
  box-shadow:0 0 20px rgba(255,0,0,0.6);
  transform:translateY(-2px);
}

.btn:active{
  transform:translateY(2px) scale(0.98);
  box-shadow:0 0 10px rgba(255,0,0,0.4);
}

/* ==== SECTIONS ==== */
section{
  padding:120px 12%;
  position:relative;
}

.about{
  background:#0a0a0a;
  border-top:1px solid #111;
  border-bottom:1px solid #111;
}

#products{
  background:linear-gradient(180deg,#000,#0a0000);
}

#contact{
  background:#0a0a0a;
}

#questions{
  background:linear-gradient(180deg,#0a0000,#000);
}

/* HEADINGS */
h2{
  font-size:42px;
  margin-bottom:40px;
  color:#ff0000;
}

h2::after{
  content:"";
  width:80px;
  height:3px;
  background:#ff0000;
  display:block;
  margin-top:10px;
}

/* ABOUT CARD */
.about-card{
  max-width:800px;
  background:#111;
  padding:40px;
  border-radius:20px;
  border:1px solid #1a1a1a;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  margin:auto;
}

/* PRODUCT GRID */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
  margin-top:40px;
}

.product-card{
  background:linear-gradient(145deg,#0a0a0a,#111);
  padding:40px;
  border-radius:20px;
  border:1px solid rgba(255,0,0,0.15);
  text-decoration:none;
  color:white;
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

.product-card::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background:linear-gradient(45deg,transparent,rgba(255,0,0,0.2),transparent);
  top:-50%;
  left:-50%;
  transform:rotate(25deg);
  opacity:0;
  transition:0.4s;
}

.product-card:hover::before{
  opacity:1;
}

.product-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 10px 40px rgba(255,0,0,0.3);
}

.product-card h3{
  color:#ff0000;
  margin-bottom:10px;
}

/* PRODUCT PAGE ITEMS */
.product-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px;
}

.item{
  background:#111;
  padding:20px;
  border-radius:15px;
  text-align:center;
  transition:0.3s all;
}

.item img{
  width:100%;
  border-radius:10px;
}

.item:hover{
  transform:translateY(-5px);
  box-shadow:0 0 20px rgba(255,0,0,0.5);
}

.price{
  display:block;
  margin-top:10px;
  color:#ff0000;
  font-weight:bold;
}

/* ==== CONTACT SECTION ==== */
.contact-info{
    max-width:600px;
    margin:auto;
    background:rgba(20,0,0,0.85);
    padding:30px 40px;
    border-radius:20px;
    border:1px solid rgba(255,0,0,0.3);
    box-shadow:0 10px 30px rgba(255,0,0,0.4);
    text-align:left;
}

.contact-info p{
    font-size:18px;
    color:#fff;
    margin-bottom:15px;
    transition:0.3s;
}

.contact-info p strong{
    color:#ff0000;
    margin-right:5px;
}

.contact-info p a{
    color:#ff5555;
    text-decoration:none;
    transition:0.3s;
}

.contact-info p a:hover{
    color:#ff0000;
    text-decoration:underline;
}

/* FORM */
form{
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}

input, textarea{
  padding:15px;
  border-radius:10px;
  border:none;
  background:rgba(20,20,20,0.9);
  color:white;
  font-size:16px;
  transition:0.3s all;
  resize:none;
}

input:focus, textarea:focus{
  outline:none;
  box-shadow:0 0 15px rgba(255,0,0,0.6);
  background:rgba(30,0,0,0.95);
}

textarea{
  min-height:120px;
}

button{
  padding:14px;
  background:#ff0000;
  border:none;
  color:white;
  font-weight:bold;
  cursor:pointer;
  border-radius:10px;
  transition:0.3s all;
}

button:hover{
  background:#b30000;
  box-shadow:0 0 20px rgba(255,0,0,0.6);
  transform:translateY(-2px);
}

/* BACK BUTTON */
.back-btn{
  display:inline-block;
  padding:14px 35px;
  background:#ff0000;
  color:white;
  text-decoration:none;
  font-weight:bold;
  border-radius:10px;
  transition:0.3s transform,0.3s box-shadow,0.2s background;
}

.back-btn:hover{
  background:#b30000;
  box-shadow:0 0 20px rgba(255,0,0,0.6);
  transform:translateY(-2px);
}

.back-btn:active{
  transform:translateY(2px) scale(0.98);
  box-shadow:0 0 10px rgba(255,0,0,0.4);
}

/* MESSAGES */
.success{
  color:lime;
  margin-bottom:10px;
}

.error{
  color:red;
  margin-bottom:10px;
}

/* FOOTER */
footer{
  text-align:center;
  padding:30px;
  border-top:1px solid #111;
}

/* MEDIA QUERIES */
@media(max-width:768px){
  header{padding:10px 30px;}
  .hero h1{font-size:60px;}
  .hero-content{padding:30px 40px;}
  section{padding:80px 8%;}
}

.success{
    color:lime;
    margin-top:15px;
    font-weight:bold;
    text-align:center;
}

.error{
    color:red;
    margin-top:15px;
    font-weight:bold;
    text-align:center;
}

form .btn{
  background:#ff0000;
  border-radius:10px;
  padding:14px 35px;
  font-weight:bold;
  transition:0.3s;
}

form .btn:hover{
  background:#b30000;
  box-shadow:0 0 20px rgba(255,0,0,0.6);
  transform:translateY(-2px);
}

form input, form textarea{
  background:#111;
  border:none;
  padding:12px;
  margin-bottom:15px;
  border-radius:8px;
  color:white;
}

.success{
  color:lime;
  text-align:center;
  margin-top:10px;
}

.error{
  color:red;
  text-align:center;
  margin-top:10px;
}

form input, form textarea{
  background:#111;
  border:none;
  padding:12px;
  margin-bottom:15px;
  border-radius:8px;
  color:white;
  width:100%;
  font-size:16px;
}