/* *{ */

     /* font-family: "Roboto", sans-serif; */

     /* box-sizing: border-box; */

  /* max-width: 100%; */

  /* padding: 0;

  margin: 0;

 } */

 html, body {

  overflow-x: hidden;

}





.camera-section {

  width: 100%;

   margin-left: 5px; 
  padding: 20px 25px;

  background-color: #F9F9FF;

  text-align: center;

}



.camera-section h2 {

  font-size: 36px;

  font-weight: 700;

  color: #222;

  margin-bottom: 50px;

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* Grid */

.camera-grid {

  display: grid;

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

  gap: 25px;

  max-width: 1200px;

  margin: 0 auto;

}



/* Card */

.camera-card {

  

  background-color: #f9f9f9;

  border-radius: 12px;

  overflow: hidden;

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

  transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.camera-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);

}



.camera-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}



.camera-card h3 {

  font-size: 20px;

  font-weight: 600;

  color: #222;

  margin-top: 15px;

}



.camera-card p {

  font-size: 15px;

  font-weight: 700;

  color: #555;

  padding-top: 10px;

  /* margin-bottom: 15px; */

}



/* ✅ Responsive Fix */

@media (max-width: 1024px) {

  .camera-grid {

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

  }

}



@media (max-width: 640px) {

  .camera-grid {

    grid-template-columns: 1fr;

    gap: 20px;

  }



  .camera-card img {

    height: 300px;

    width: 100%;

  }



  .camera-card{

    /* width: 400px; */

    margin-left: 5px;

  }

  .camera-section h2 {

    font-size: 28px;

  }

}

@media (max-width:768px){

  .camera-card{

    width: 350px;

    /* margin-left: 10px; */

  }

}