body{
  overflow-x: hidden;
  font-family: 'montserrat',sans-serif;
  color: #616971;
  text-decoration: none;
}

/* top Header */
.top-bar{
  background: #808181;
  height: 3rem;
  padding: .5rem;
  position: relative;
  z-index: 1022;
}
.top-bar ol > li{
    display: inline-block;
}
.top-bar ol > li > a{
  color: white;
text-decoration: none;
font-size: 1.2rem;
font-weight: 600;
padding-top: 8px;
}
#a2{
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  padding-top: 8px;
}

#a2:hover{
  color: rgb(8, 187, 246);
transition-duration: 1.5s;
}

.hov:hover{
  color: rgb(8, 187, 246);
  transition-duration: 1.5s;
}

.top-bar ol > li > a:hover{
color: rgb(8, 187, 246);
transition-duration: 1.5s;
}


.navbar{
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1rem;
  box-shadow: 0 .5rem .5rem rgba(0, 0, 0, .1);
  height: 4.2rem;
  padding-top: 0%;
}

.nav-link{
  color: #2b0d04!important;
}

.nav-link.active,.nav-link:hover{
  color: #f1390b!important;
}
 .divid{
  width: 0.5px;
  height: 23px;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: -5px;
  display: inline-block;

 }
 .divid2{
  width: 0.5px;
  height: 23px;
  background-color: black;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: -20px;
  margin-top: 11px;
  display: inline-block;
 }
.space{
  letter-spacing: .9rem;
  padding-top: 8px;
}
.dropdown-item{
  font-family: 'montserrat';
  font-weight: 600;
  font-size: 1rem;
}
.dropdown-item:hover{
  color: #f1390b!important;
  background-color: rgb(230, 232, 236)!important;
  
}
.dropdown{
  padding-left: 10px;
  padding-right: 10px;
}
.dropdown:hover .dropdown-menu {
  display: block;
}

#serch{
  padding-top:9px;
}

.navbar-brand img{
  height: 3rem;
  width: 9rem;
  padding-top: 0;}
/* .board1{ */
  /* background-image: url("map-pattern-1.png"); */
 /* height: 20%; */
  /* width: 100%; */
/* } */
.col{
  padding: 5rem;
  border: 2px solid rgb(228, 231, 228);
  height: 20em;
  background-image:url('../images/Affric_Bg.png');
  background-size:cover;
}
.col>h2{
  text-align: center;
  font-size: xx-large;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #691f09!important;
  
}
.card:hover{
  transform: scale(1.05);

}
.card{
  margin: 1rem;

}
.card-body>p>a {
  text-decoration: none;
  color: #000;
}
.space{
  height: 2rem;
}
.item2{
  color: #efeae9;
  font-weight: 400;
  font-size: 1rem;
  
}
.item2:hover{
  color: #efd01f!important;
  /*background-color: rgb(94, 89, 90)!important;*/
  text-decoration-line: none ;
}

.auto-container{
  text-align: center;
  
  /*background-image: url(images/bgpic.jpg);*/
 padding: 2rem;
 

}
.auto-container>h1{
  color: #515253;
  font-weight: 700;
  font-size: 3rem;

}
.page-breadcrumb{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  
  font-size: 17px;
  font-weight: 600;
  color: #515253;
  
}
.page-breadcrumb>li>a{
  color: #ef4d4d !important;
  text-decoration: none ;
}

.page-title{
  background-image:url('../Images/bg.jpg');
  height: 15rem;
  border-end-end-radius: 10px;
}
.page-title_2{
  background-image:url('../Images/bg1.jpg');
  height: 15rem;
  border-end-end-radius: 10px;
}

.page-title_cu{
  background-image:url('../Images/bg1_cu.jpg');
  height: 15rem;
  border-end-end-radius: 10px;
}



.angle{
  margin-left: 2px;
  margin-right: 3px;
  color: #efeae9;
}
/*About Us Page*/
.responsive{
  width: 100%;
  height: 30rem;
}
.btn-group {
  background-color: #e5e8e2; /* Green background */
  border: 1px solid rgb(128, 107, 0); /* Green border */
  color: rgb(53, 49, 49); /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 100%; /* Full width */
  display: block; /* Make the buttons appear below each other */
  margin-top: 0.1rem;
  margin-left: 0rem;
  margin-right: 1rem;
  border-end-end-radius: 10px;
}

.btn-group:hover {
  background-color: #0679f4; /* Darker green on hover */
  color: rgb(253, 253, 248);
  
}

.bbt{
  margin-left: 0.3rem;
  font: bolder;
  width: 7rem;
}

/*About Us Page End

.Aboutwt{
  height: 15rem !important;
  padding-top: 0.1rem;
  

}
.fwt{
  width: 100%;
}
  */

.reserved{
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  background-color: #2c2a2a;
  height: 4rem;
  width: 100%;
  color: #e5e8e2;
}

/*get Page*/
.txt1{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: rgb(34, 33, 33);
}
.txt2{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:bold;
  color: rgb(106, 105, 105);
}
.custom-button {
  font-size: 16px;
  padding: 16px 32px;
  margin-top: 1rem;
  border-color: #000;
  width: 22rem;
}
.custom-button:hover {
  background-color: rgb(1, 8, 10);
  color: rgb(240, 244, 245);
}
.dim{
  margin-top: 2rem;
}
.sty{
  width:100%;
  height: 20rem;
  max-width: 1920px; 
  position: relative;
    display: inline-block;
}
.overlay-button {
  position: absolute;
  top: 55%;
  left: 15%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: rgb(0, 0, 0);
  color: white;
  border: rgb(8, 0, 0);
  cursor: pointer;
  font-size: 16px;
  width: 13rem;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.overlay-button:hover{
  box-shadow: 0 5px 15px rgba(0, 0.4, 0.4, 0.4);
}
.labs{
  position: absolute;
  top: 35%;
  left: 15%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: rgb(240, 240, 240);
  color: black;
  font-size: 3rem;
}
.carou1{
  width: 100%;
  height: 600px;
}
.carou{
  width: 100%;
  height: 600px;
}
.caroumain{
  width: 100%;
  height: 600px;
}

.carousel-caption-left {
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(-10%, -10%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 5px;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.carousel-item.active .carousel-caption-left {
  opacity: 1;
}
/* Testimonial Section */
.testimonial {
  text-align: center;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.testimonial p {
  font-size: 1.2rem;
  font-style: italic;
  color: #555;
}

.testimonial h5 {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}

/*This code creates a testimonial section with a Bootstrap carousel. Each testimonial is styled with a background color, padding, and a box shadow for a clean and modern look. The text is centered and styled for readability.
 Testimonial Section */
.testimonial {
  text-align: center;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.testimonial p {
  font-size: 1.2rem;
  font-style: italic;
  color: #555;
}

.testimonial h5 {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}
 
/* Section Title */
.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.section-title h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
}

.section-title p {
  font-size: 1.2rem;
  color: #666;
}

/* Service Item */
.service-item {
  background-color: rgba(248, 249, 250, 0.9);
  padding: 2px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}
.service-item-text {
  background-color: rgba(248, 249, 250, 0.61);
  padding: 10px;
border-radius: 3px;
 
}
.service-item-text2 {
  background-color: rgba(248, 249, 250, 0.413);
  padding: 10px;
border-radius: 12px;
 
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.service-item .icon {
  font-size: 3rem;
  color: #569de8;
  margin-bottom: 1rem;
}

.service-item h3 {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.service-item p {
  font-size: 1rem;
  color: #666;
}

.service-item .stretched-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-decoration: none;
}

/* Custom Button */
.custom-button {
  font-size: 16px;
  padding: 10px 20px;
  margin-top: 1rem;
  border-color: #000;
  width: auto;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-button:hover {
  background-color: rgb(1, 8, 10);
  color: rgb(240, 244, 245);
}

/* About Section */
.Aboutwt {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.Aboutwt img {
  border-radius: 3rem;

}

h1 {
  padding-top: 2rem;
  margin-left: 1rem;
}

p {
  padding-left: 2rem;
  padding-right: 2rem;
}

ul {
  padding-left: 2rem;
  padding-right: 2rem;
  list-style-type: none;
}

ul li {
  margin-bottom: 0.5rem;
}

/* Statistics Section */
#statistics {
    background-color:#e4eef8 ; /* Primary background color */
    color: #ffffff; /* Text color */
    padding: 60px 0;
}

.statistic-item {
    background: #ffffff;
    color: #007bff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.statistic-item:hover {
    transform: scale(1.05);
}

.statistic-item .counter {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0c4b8d;
}

.statistic-item p {
    margin-top: 10px;
    font-size: 1.2rem;
    color: #666;
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
/* Why Us Section */
.why-us .icon-box i {
  color: skyblue;
  margin-bottom: 30px;
  font-size: 32px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: 0.3s;
}
.embossed-panel{
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 10px;
  background-color: #e4eef8;
  border-radius: 10px;

}
.why-us .why-box {
  color: var(--contrast-color);
  background:#e4eef8 ;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.why-us .why-box:hover {
  transform: translateY(-10px);
}

.why-us .why-box h3 {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.why-us .why-box p {
  margin-bottom: 30px;
  font-size: 15px;
}

.why-us .why-box .more-btn {
  display: inline-block;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  padding: 8px 40px 10px 40px;
  color: var(--contrast-color);
  transition: all ease-in-out 0.4s;
  border-radius: 50px;
}

.why-us .why-box .more-btn i {
  font-size: 14px;
}

.why-us .why-box .more-btn:hover {
  color: var(--accent-color);
  background: var(--surface-color);
}

.why-us .icon-box {
  background-color: #e4eef8;
  text-align: center;
  padding: 40px 30px;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.why-us .icon-box:hover {
  transform: translateY(-10px);
}

.why-us .icon-box i {
  color: skyblue;
  margin-bottom: 30px;
  font-size: 32px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: 0.3s;
}

.why-us .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 30px 0;
}

.why-us .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .icon-box:hover i {
  color: white;
  background: skyblue;
}
.imgpad{
padding-left: 1rem;  
}
.bgc{
  background-color: #e4eef8;
}

@media (max-width: 767px) {
  header {
      display: none;
  }
}

@media (max-width: 767px) {
  .navbar-nav {
      text-align: center;
      
  }

  .navbar-nav .nav-item {
      display: block;
      margin: 0.5rem 0;
  }

  .nav-link{
    background-color: rgba(255, 255, 255, 0.5);
    color: #0d0e0e!important;
    font-weight: bold;
  }

  .navbar-brand img {
      width: 100px;
  }

  .carousel-inner img {
      height: auto;
  }

  .aboutwt img {
      width: 100%;
      height: auto;
  }

  .aboutwt h1 {
      font-size: 1.5rem;
  }

  .aboutwt p, .aboutwt ul {
      padding: 0 1rem;
  }

  .aboutwt button {
      width: 100%;
      margin-top: 1rem;
  }

  .why-box, .icon-box {
      text-align: center;
  }

  .parallax {
      height: 300px;
      background-attachment: scroll;
  }

  .parallax h2, .parallax p {
      font-size: 1.2rem;
  }

  .parallax button {
      width: 100%;
      margin-top: 1rem;
  }

  .service-item {
      text-align: center;
  }

  .service-item h3 {
      font-size: 1.2rem;
  }

  .service-item p {
      font-size: 0.9rem;
  }

  .testimonial {
      text-align: center;
  }

  .testimonial p {
      font-size: 1rem;
  }

  .testimonial h5 {
      font-size: 0.9rem;
  }

  .statistic-item {
      margin-bottom: 2rem;
  }

  .statistic-item h2 {
      font-size: 2rem;
  }

  .statistic-item p {
      font-size: 1rem;
  }

  footer {
      text-align: center;
  }

  footer .row {
      display: block;
  }

  footer .col-lg-6, footer .col-lg-3 {
      margin-bottom: 1rem;
  }
}
.overlay-container {
  position: relative;
}

.overlay-text {
  position: absolute;
  top: 2%;
  left: 25%;
  transform: translate(-30%, -2%);
  color: #0a05b0;
  font-size: 20px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.5); /* Transparent background */
  padding: 10px;
  border-radius: 5px;
}

/* About Section */
.about-section {
    padding: 5rem 0;
}

.about-section h2 {
    color: #333;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.about-section p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

.about-section .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.about-section .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Mission and Vision Section */
.mission-vision-section {
    background-color: #f8f9fa;
    padding: 4rem 0;
}

.mission-vision-section h3 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.mission-vision-section p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

/* Team Section */
.team-section {
    padding: 5rem 0;
}

.team-section h2 {
    color: #333;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
}

.team-section .team-member {
    text-align: center;
    margin-bottom: 2rem;
}

.team-section .team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.team-section .team-member h4 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.team-section .team-member p {
    font-size: 1.1rem;
    color: #666;
}

/* Values Section */
.values-section {
    background-color: #f8f9fa;
    padding: 4rem 0;
}

.values-section h2 {
    color: #333;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
}

.values-section .value-box {
    text-align: center;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.values-section .value-box h4 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.values-section .value-box p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}
.styless{
 padding: 0;
}

.product_title{
  font-weight: bold;
  text-align: center;
}
.more_title{
  font-weight: bold;
  font-style: italic;
}