@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  font-family: "Poppins", sans-serif;
}



hr {
  color: blue;
  height: 2px;
  border-width: 0;
  background-color: blue;
}

.spaced-paragraph::before {
  content: " "; /* Insert a space before the words */
}
 

 .social-text {
  font-weight: bold; 
  color: #333;
  font-size: 20px; 
  align-self: start;
}

.social-handles a{
  display: inline-block;
  padding: 10px 10px;
  border-radius: 5%;
  margin: 30px;
  justify-content :space-evenly;
  align-items : center
}

.social-handles a i{
   font-size: 3em;
   opacity: 0.9;
  
}

.instagram-icon .fa-instagram {
  color: #f01048;
}

.facebook-icon .fa-facebook {
  color: #0d6ce9;
}

.youtube-icon {
  color:#f01010
}

.social-handles a:hover{
  background-color: rgb(229, 243, 242);
  transition: 0.5s;
}

.social-handles a:hover i{
  color:white;
  transition: 0.5s;
}

.column img{
  margin-bottom: -100px;
 }
/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) { } */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) { } */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {
  .top-section {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
 
 
  .social-handles {
    display: block;
    width: 100%;
  }

  .contact {
    display: block;
    width: 100%;
  }
 } */


 
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .top-section, .product-top-items, .product-middle-items, .product-bottom-items {
    display: block !important;

   
  }
  .column {
    flex-direction: column;
    
  }

  .column p, .about-info {
    background-color: beige;
    padding: 15px;
    border-radius: 5px;
    text-align: justify;

  }

  h1 {
    margin-top: 15px;
    font-size: 25px !important;
    font-weight: bolder !important;
    text-align: justify !important;
    margin-bottom: -30px;

  }


  .column p, .column img{
   
    width: 100% !important;
    
  }

  .column img {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: -80px;
  }

  .product-top-items, .product-middle-items, .product-bottom-items {
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #read-more {
    width: 90%;
    text-align: center;
    margin: 0 auto;

  }

  .read-more {
    width: 100%;
  }

.card {
  width: 100% !important
}

  .social-handles {
    width: 100% !important;
    margin-bottom: 30px;
  }

  .social-handles a{
    width: 50px;
    margin: 0px;
    margin-right: 10px !important;
    margin-top: -50px;
  }
  
  .social-handles a i{
     font-size: 3em;
     opacity: 0.9; 
  }

  .contact {
   
    width: 100% !important;
  }
  .form-btn-about-div{
    width: 90% !important;
    margin: 0 auto !important;
  }

  .form-btn {
    margin-top: 10px;
    width: 95% !important;
  }

  .card-width {
    
    width: 93%;
    margin: 10px auto !important;
  }

  .form-btn-about {
    margin-top: 10px;
    width: 100% !important;

  }

  /* .product-top-items, .product-middle-items, .product-bottom-items {
    display: inline;
     overflow-y: scroll; 
  } */

  .service h1, .productt h1{
    margin-bottom: 10px !important;
  }

  .services-container, .services-middle {
    padding: 0px !important;
  }

  .services-items, .services-middle-items {
    display: flex;
    flex-direction: column;
  }

}



/* .container {
  display: flex;
} */

.column {
  flex: 1;
  padding: 20px;
  /* border: 1px solid #ccc; */
  margin: 10px;
  text-align: center;
}

.column:nth-child(1) {
  background-color: white;
}

.column:nth-child(2) {
  background-color: white;
}

.image {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.read-more {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.read-more:hover {
  background-color: #0056b3;
  .services-items, .services-middle-items {
    display: inline!important;
    overflow-y: scroll !important;
    
  }

}