
.navbar-brand{
    display: flex;
}
.navbar-brand h3{
    color:  #4CAF50;
    margin-top: 16px;
}

#mainnav{

    height: 70px;
}

#navsecond{

    height: 70px;
}

#enquiry{

    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 20px;
    
}

p{
    color: white;
    font-weight: 600;
    margin-left: 600px;
    margin-top: 30px;
}

.youtube{

    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 10px;

}


.youtube a:hover{

    color: black;


   
}

.free{

    color: white;
}

.carousel-item img {
    width: 70%; 
    height: 400px; 
    object-fit: cover;
    margin: 0 auto; 
  }

   
    .carousel, .carousel-inner {
        height: 500px; 
      }
  
      .carousel-item {
        height: 100%;
      }
  
      .carousel-item img {
        width: 50%; 
        height: 60%;
        object-fit: cover; 
      }
  
      
      body, html {
        margin: 0;
        padding: 0;
        height: 100%;
      }
  
      .container-fluid {
        padding: 0;
      }
   
  .container {
    padding: 0; 
  }
  #conta{
    height: 330px;
  }

 

  /* boxes */
  #course{
    text-align: center;
    font-weight: 700;
  
    margin-top: 20px;
    
   
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .product-box {
    width: 340px;
    height: 380px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(15, 160, 15, 0.5);
    text-align: center;
    transition: transform 0.3s ease;
    margin: 0 auto; /* Center the boxes */
}
.product-box:hover {
    transform: translateY(-5px);
}
.product-image {
    height: 250px;
    
    width: 290px;
    margin-bottom: 15px;
    border-radius:50%
}
.btn-custom {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 15px;
}
.btn-custom:hover {
    background-color: #0056b3;
}


/* footer */
#hello{
  text-align: center;
  font-weight: 600;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Full viewport height */
  flex-direction: column;
}

/* Box style */
#hello h3, #hello h5 {
  text-align: center; /* Center the headings */
  margin-bottom: 5px; /* Reduced margin between heading and subheading */
}

/* Reduce space between the heading and the boxes */
#hello {
  margin-bottom: -90px; /* Removed extra margin between heading and boxes */
}

/* Center the wrapper */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 0; /* Remove margin-top to reduce space */
}

/* Box style */
.box {
  width: 200px;
  height: 100px;
  margin: 5px; /* Reduced margin to make the boxes more compact */
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;  /* Text color set to black */
  font-weight: 700;  /* Font weight set to 700 */
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* Flex container for wrapping boxes */
.box-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping of items */
  justify-content: center;
  gap: 5px; /* Reduced gap between boxes */
}

/* Ensure that there are 4 boxes on top and 2 boxes on the bottom */
.box-container .box:nth-child(1),
.box-container .box:nth-child(2),
.box-container .box:nth-child(3),
.box-container .box:nth-child(4) {
  flex: 0 0 45%; /* These 4 boxes will take 45% of the width each */
}

.box-container .box:nth-child(5),
.box-container .box:nth-child(6) {
  flex: 0 0 45%; /* These 2 boxes will take 45% of the width each */
}

/* Different background colors for each box */
.box.green { background-color: rgb(57, 209, 57); }
.box.red { background-color: red; }
.box.yellow { background-color: yellow; }
.box.pink { background-color: pink; }
.box.greenyellow { background-color: greenyellow; }
.box.blue { background-color: rgb(109, 109, 236); }

/* Hover effect */
.box:hover {
  transform: scale(1.1); /* Slightly enlarge the box */
  background-color: lightgray; /* Change background color on hover */
}




/* next Box */

#decres {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 20px;
}

#nextpart{
  text-align: center;
  font-weight: 700;
  margin-top: -90px;
  margin-bottom: 30px;
}
#box {
  height: 250px;
  width: 250px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.boxi:hover {
  transform: translateY(-10px);
}

.box i {
  font-size: 48px;
  color: #4CAF50;
  margin-bottom: 10px;
}

.box p {
  font-size: 16px;
  color: #333;
  margin: 0;
}