body { margin: 0 auto;font-family: Arial, sans-serif;     width: 100%;  }
    #body1 {width: 1200px;margin: 0 auto; }

    /* Header */
    header {  display: flex;justify-content: space-between; align-items: center; padding: 15px 30px;background: #171515;color: #fff;position: relative;}

    .logo { font-size: 20px;font-weight: bold; color : red;}
.logo {   position: relative; z-index: 9999;}
.logo img { height: 50px;   /* increase this */  width: auto;}

    /* Menu */
    nav {    display: flex;gap: 25px;  flex-wrap: nowrap;}
    nav a {  color: #fff;  text-decoration: none;  }
    nav a:hover {color:  #BF1313;} 

    /* Hamburger */
    .menu-toggle {display: none;font-size: 26px;cursor: pointer;}

 

.banner {text-align: center; padding: 40px 20px;  position: relative;  padding: 50px;  color: #000; overflow: hidden;   /* IMPORTANT */  position: relative;z-index: 0;}
.banner::before {  content: "";  position: absolute;  top: -10px;  left: -10px;  right: -10px;  bottom: -10px;  background: url("photos/canon-m50-cinematic-video.jpg") center/cover no-repeat;  filter: blur(2px);  z-index: 0; z-index: -1;   /* send blur layer behind */}
.banner h1 {  position: relative;  z-index: 1;   /* keeps text above blur */}
        .banner h1 {background : #fff; padding : 2px ;   font-family:  verdana; }
    .banner span {color : #D93232;}
    #lowest img {max-width :  300px;  height : 50px; margin : 20px; margin-bottom : 0px; margin-bottom : 5px; border-radius : 6px;}

    /* Products */
    .products { display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 20px;   padding: 20px;  }
    .products h3 {color :#fff; margin-top : 0px;}
    .card { border: 1px solid #1F1F1F; padding: 15px; text-align: center;border-radius: 8px; background : #1F1F1F;   box-shadow: 0 0 15px #000;  max-width: 320px; margin: auto; padding-bottom : 5px;}
    .card img {  width: 100%;height: 300px;object-fit: cover; box-shadow: 0px 10px 20px rgba(0,0,0,0.3);}
    .card button {  font-size : 20px; margin-top: 0px;  font-weight : bold;  padding: 8px;   width: 90%;  background: gold;  color: #000; border: none; cursor: pointer; border-radius: 7px;  }
    .card p b {color: gold; box-shadow: 0 0 10px #707070; padding : 5px;}
    .card p span {color : #BABABA;} 
    

    /* Footer */
    footer {  text-align: center;   padding: 15px;   background: #111;   color: #fff; margin-top: 20px; }
    nav { box-sizing: border-box; position: relative;z-index: 9999;}

    nav a { display: block;   width: 100%;  word-wrap: break-word ;  white-space: nowrap;}
    
    footer h2 {color :  #328DBA; font-size: 20px;}
    #b2 h2 a {}
 
 #inside   {  }

#bas table {  width: 60%;  border-collapse: collapse; margin: auto; margin-top: 10px;}
#bas th  {     padding: 5px; width: 50%;}
    #bas table img {width :150px;}
    
    #direct  {  display: flex;  justify-content: center; margin : 20px; padding :10px;  }
     #direct button {width : 200px; height : 40px;  font-weight: bold; border-radius : 5px; margin-top }
    #orders {color :  #69CC5C;font-size : 13px; text-align : left; padding-top : 0px;  margin-top : -10px; font-weight : bold;}
    #orders span {font-size : 20px;}
    
    #praise { width : 80% ;  background :  #000;  margin : 0 auto; padding : 20px; font-size : 15px; border-radius : 5px; color : gold; margin-top : 25px; margin-bottom: 25px;} 
    #praise b {font-size :  20px; text-decoration :  underline;}
    #googlem img {width: 80%; background : red;} 
    
    

            #off table {  width: 90%;  border-collapse: collapse;  margin-top: 10px;     margin: auto;   margin-bottom :  20px; color : #fff;  }
            #off table #left {background: #AD2F18; padding: 20px; border-radius : 10px; font-size : 30px; width : 500px; margin: auto;  }
            #off table #right {background: #AD2F18; padding: 20px; border-radius : 10px; font-size : 30px; width : 500px;margin: auto;}
            
            #inside table {  width: 100%;  border-collapse: collapse;  margin-top: 10px;     margin: auto;   margin-bottom :  0px; color#fff;}
            #inside a { color:#fff;  text-decoration: none;}
            #inside table #left {background: #000; padding: 7px; border-radius : 7px; font-size : 12px;    width: 130px;margin: auto; box-shadow: 0 0 15px white;  }
            #inside table #right {background: #000; padding: 7px; border-radius : 7px; font-size : 12px;  width: 130px;  margin: auto; box-shadow: 0 0 15px white; }
             
             
             
#bottommain {  display: flex; justify-content: space-between; gap: 20px; padding: 10px;  text-align: left; flex-wrap: wrap;   }
#bottommain a {text-decoration :  none; font-size :18px; color:  #fff;   }
#bottommain div {  flex: 1;   min-width: 250px;   padding: 10px;  box-sizing: border-box;   }
@media (max-width: 768px) {  #bottommain {   flex-direction: column; }}
#aum { font-size :15px; margin-bottom : 40px;}             
             
         .logo1 { font-size: 20px;font-weight: bold; color : red;   padding: 10px; }
         .logo1 {   position: relative; z-index: 9999;}
         .logo1 img { height: 50px;   /* increase this */  width: auto;    display: block; margin-left: 0;}
         @media (max-width: 768px) { .logo1 img {    height: 35px;}} 
             
             
             
             
/* mobile */
@media (max-width: 600px) {  #bas th  {  font-size: 14px; }}
    /* 🔥 MOBILE RESPONSIVE */
    @media (max-width: 768px) {
        header {    flex-direction: row;      justify-content: space-between;   align-items: center;  }  
        .menu-toggle {     display: block;    position: relative; z-index: 9999;}
        nav {   display: none;  flex-direction: column;  background: #111;  position: absolute;  top: 60px; right: 0;  width: 100%;padding: 10px 15px;left: 0;}
        nav a {  padding: 10px 0;  border-top: 1px solid #333; }
        nav.active {     display: flex; }
         .card img {  height: 250px; } 
         
        .products {    grid-template-columns: repeat(2, 1fr);     padding : 0px; width : 300px;  }
        #mainsec1 { width : 300px; margin:  auto; }
        .card {width : 270px;}
        
        .banner { padding: 25px 10px; }
        #body1 {width: 100%;}
        #bas table img {width :100px;}
        
        #bas table {  width: 70%;}
        .banner {font-size : 12px;} 
         #off table {      margin: auto;    margin-bottom : 20px;    }
        #off table #left {background: #AD2F18; padding: 6px; border-radius : 10px;  width : 150px; font-size : 20px;  }
        #off table #right {background: #AD2F18; padding: 6px; border-radius : 10px; width : 150px; font-size : 20px;}
            
        #inside table #left {   width : 110px;  }
        #inside table #right {  width : 110px;   }  
         .card button {width : 80%; height : 35px; font-size : 15px; padding : 7px; }
        section {margin-top : 15px;}
        #direct button {width : 150px; font-size : 15px; } 
    } 

/* Mobile view */
@media (max-width: 600px) {

    #down table, #down tr,  #down th {     display: block;      width: 100%;  }
    #down th {   margin-bottom: 10px;   padding: 10px;    text-align: left;  }}
    @media (max-width: 600px) { .products {  grid-template-columns: 1fr; }}



    @media (max-width: 768px) { .logo img {    height: 35px;}}
    .contact-bar {  display: none; /* hide on desktop */}

@media (max-width: 768px) {
  .contact-bar  {    display: flex;    justify-content: center;    align-items: center;    position: fixed;    bottom: 2px;    left: 10px;    right: 10px;    padding: 5px;      z-index: 9999;      gap: 10px;   }
  .contact-bar a {    text-decoration: none;    color: black;    font-weight: bold;   }
  .contact-bar span {    padding-top:5px ; background: #4FA64B;   display: inline-block;    width: 150px;        /* same width */    height: 25px;    text-align: center;     border-radius: 5px; }
  
}