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


* {
  font-family: 'Poppins', sans-serif;
}

.navbar {
  background-color: #0092A6;
}

#item {
  position: relative;
  left: 100%;
  transform: translateX(-50%);
}

#contactjambo {
  height: 400px;
  background-color: rgb(0, 0, 0);
  background-image: url("../img/contactus.jpg");
  background-size: cover;
}

.p-5 {
  /*background-image: url("https://static.euronews.com/articles/stories/04/47/19/86/1440x810_cmsv2_3f7d4d8d-f71e-5407-8910-df6056b8d768-4471986.jpg");
  height: 120%;
  background-color: rgba(0, 0, 0, 0.6);*/

  object-fit: cover;
}

#homejambo{
  background-size: 100% 140%;
  height: 160%;

  object-fit: cover;
}




#quote {
  text-align: left;

}
#productw {
  text-align: justify;
  color: #333333;
}

#productb {
  text-align: justify;
  color: #ffffff;
}

.d-block {
  height: 400px;
  width: 400px;
}

#container {
  background-color: #0092A6;
}

#socialicon {
  color: #ffffff;
}

#footer {
  background-color: #0092A6;
  color: #ffffff;
  text-align: center;
}

#itemspecs {
  text-align: left;
}

.map-container-2 {
  overflow: auto;
  padding-bottom: 56.25%;
  position: relative;
}
.map-container-2 iframe {
  position: absolute;
  width: 100%;
  left: 0;
  height: 500px;
}

.hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#map {
  background-color: rgb(255, 255, 255);
}

#socialiconcontact {
  color: rgb(255, 255, 255);
}

#slideimage {
  width: 500px;
  height: 500px;
}
#sliderphoto1 {
  height: 550px;
  width: 550px;
}
#sliderphoto2 {
  height: 550px;
  width: 550px;
}
#sliderphoto3 {
  height: 500px;
  width: 600px;
}

#sliderphoto4 {
  height: 300px;
  width: 600px;
  object-fit: cover;
}
#sliderphoto5 {
  height: 350px;
  width: 600px;
  object-fit: cover;
}
#sliderphoto6 {
  height: 350px;
  width: 600px;
  object-fit: cover;
}
#sliderphoto7 {
  height: 450px;
  width: auto;
  object-fit: cover;
}

/* For Chrome and Safari */
::-webkit-scrollbar {
  width: 10px;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
  background-color: #333333;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #b2a4f0;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  font-size: 14px;
  line-height: 1.5;
}
#more {
  display: none;
}

#comname {
  color: #ffffff;
  text-align: left;

}

.container {
  padding-top: 40px; /* Add space to the top */
  padding-bottom: 40px; /* Add space to the bottom */
}

#service_intro{
  padding-top: 40px; /* Add space to the top */
  padding-bottom: 0px; /* Add space to the bottom */
}

/* Style for section headers */


/* Style for the row and boxes */
.row {
  display: flex; /* Create a flex container for the boxes */
  justify-content: space-between; /* Space items evenly */
}

.box {
  flex: 1; /* Distribute available space equally among boxes */
  text-align: center; /* Center-align box content */
  padding: 20px; /* Add padding for spacing */
  
  box-sizing: border-box; /* Include padding and border in the box's total width */
}

/* Style for box headers */
.box-header {
  font-size: 24px; /* Set the font size for headers */
  font-weight: bold; /* Make headers bold */
  color: #0092A6;
  padding: 20px; /* Add padding for spacing */
}

/* Style for box icons/images */
.box img {
  max-width: 40%; /* Make sure images/icons don't exceed box width */
  margin-bottom: 10px; /* Add margin between header and icon/image */
  
}

/* Style for box descriptions */
.box-description {
  margin-top: 10px; /* Add margin between icon/image and description */
  text-align: justify;
  color: #01010a;
}

/* Style for the container within the footer */
.container {
  max-width: 1200px; /* Set a maximum width for the container */
  margin: 0 auto; /* Center the container horizontally */
}


#contactbutton {
  background-color: #0092A3; /* Custom background color */
  color: #fff; /* Custom text color */
  border: none; /* Remove the default button border */
  text-align: left; /* Center-align the text */

}

#contactbutton:hover {
  background-color: #ff4500; /* Change background color on hover */
}

#service_section {
  background-color: #0092A3; /* Custom background color */
  color: #fff; /* Custom text color */
  border: none; /* Remove the default button border */

}

#service_section:hover {
  background-color: #ff4500; /* Change background color on hover */
}


/* Custom CSS for the "About Us" container */
.about-container {
  border: 2px solid #0092A6; /* Border width and color */
  border-radius: 15px; /* Rounded corners */
  padding: 20px; /* Add padding for spacing */
  margin: 20px auto; /* Center the container horizontally with margin */
  background-color: #ffffff; /* Background color */

}

/* Custom CSS for the "About Us" title */
.about-title {
  font-size: 50px; /* Font size for the title */
  color: #0092A6; /* Text color */
  text-align: center; /* Center-align the title */
  font-family: 'AcuminVariableConcept', sans-serif;
}

/* Custom CSS for the "About Us" content */
.about-content {
  font-size: 20px; /* Font size for the content */
  color: #333; /* Text color */
  text-align: justify;
}

#seemorebutton{
  background-color: #0092A3; /* Custom background color */
  color: #fff; /* Custom text color */
  border: none; /* Remove the default button border */

}

#seemorebutton:hover {
  background-color: #ff4500; /* Change background color on hover */
}


/* Make social media icons appear horizontally */
.social-media li {
  display: inline-block;
  margin-right: 30px; /* Add some spacing between the icons if needed */
}


#myJumbotron {
  /* Background image styles */
  background-size: cover;
  background-position: center center;
  height: 500px; /* Default height */
  position: relative;
  margin-top: 40px;
}

/* Text styles (default) */
#myJumbotron h1 {
  text-align: center;
  font-size: 120px;
  padding: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.7); /* Default mask color and opacity */
  border-radius: 10px; /* Rounded corners for the mask */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  #myJumbotron {
    height: 400px; /* Adjust the height for smaller screens */
  }
  /* Text styles for smaller screens */
  #myJumbotron h1 {
    font-size: 80px; /* Adjust font size for smaller screens */
    padding: 10px; /* Adjust padding for smaller screens */
  }
}

/* Media query for even smaller screens */
@media (max-width: 576px) {
  #myJumbotron {
    height: 300px; /* Adjust the height for even smaller screens */
  }
  /* Text styles for even smaller screens */
  #myJumbotron h1 {
    font-size: 60px; /* Adjust font size for even smaller screens */
    padding: 5px; /* Adjust padding for even smaller screens */
  }
}

/* Define the button's primary styles */
#submit_button {
  display: inline-block;
  padding: 10px 20px; /* Adjust padding as needed */
  font-size: 16px; /* Adjust font size as needed */
  background-color: #ff4500; /* Set your desired background color */
  color: #fff; /* Set your desired text color */
  border: none; /* Remove button border */
  border-radius: 4px; /* Add rounded corners */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

/* Define button hover state */
#submit_button:hover {
  background-color: #333; /* Change color on hover */
}