body{
    display: flex;
    flex-direction: column;
    margin: 0;
   font-family: 'Titillium Web'; 
}


h1, h2, h3, p {font-family: 'Montserrat', }

.nav-mobile {display: none;}

.carousel-caption{
    font-size: 20px;
    background: rgba(1,1,1,0.4);
    margin-bottom: 4%;
}

#span {
  color: #2c2c2c;
}
#Director {
  color: black;
}
#last {
  color: black;
}


#front-buttons {display: flex;flex-direction: row;justify-content: space-between;width: 100%;}

#info {margin-top: 48%;}
#videoWrap { width: 100%;
 }
#myVideo {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
 width: 100%;
 
 
}
#shadow { position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;}
#hygiene {
margin-left: 33.333%;margin-right: auto;}
.media { 
  display: flex;
  flex-direction: column;
 height: 500px;
  background-color: white;
  margin: 3%;
  padding-bottom: 50px;

  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);  }

.media img {width: 100%;}

.media button { background-color: #56a7dc;
padding: 15px;
border: 1px solid #56a7dc;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
align-self: center;
border-radius: 5px;
margin-top: 50px;
font-family: 'Titillium Web';
}
.media button:hover { background-color: #56a7dc;
  padding: 15px;
  border: 1px solid #56a7dc;
  color: black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  align-self: center;
  border-radius: 5px;
  margin-top: 50px;
  font-family: 'Titillium Web';
  }
.media   h3 {
   font-family: 'Titillium Web';
 color: #2c2c2c;
text-align: center;
font-weight: bold;
margin: 20px; 
font-size: 20px;}



.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #A5A5A5;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5B9BD5;
  color: white;
}

.media p {

 color: #2c2c2c;
text-align: justify;
padding-left: 40px;
line-height: 23px;
padding-right: 40px;
font-size: 13px;

}

.header{ z-index: 10;
background-color: transparent; 
}

.banner { width:100%;
 height: 85px;
 background-color: transparent;
  
  padding-top: 6px;
 padding-left: 3%;
 padding-right: 3%;
 z-index: 50;
 position: fixed;
}

.banner ul { 
 list-style-type: none;
 display: inline-block;
 margin-right: 10%;
 margin-top: 10px;
 float: right;


}
.banner li { 
 display: inline-block;
 font-size: 13px;
 
 color: white;
 padding-left: 8px;
 padding-right: 8px;
 padding-bottom: 10px;
 padding-top: 10px;
 list-style: none;

}



.banner li:hover { 
border-bottom: 1px solid white;


}


/* main title this */


#main-title { margin: auto;
width: 70%;

margin-top: 13%; 
margin-bottom: auto;
 }


#main-title h1 { color:#56a7dc;
font-weight: bolder; 
font-size: 2.7rem;
text-align: justify;
font-family: 'Teko';
text-align: center;
padding: 1rem;
}

#main-title p { font-size: 1.2rem;
   font-family: 'Titillium Web';
   text-align: center;
padding: 1rem;
font-weight: bold;
 }


 
#complex-case2 {
  width: 300px;
  padding:20px;
  font-size: 1rem;
  font-family: 'Titillium Web';
border: 1px solid #56a7dc;

color: black;
font-weight: bold;


font-size: 1rem;
  background-color: red;
  border-radius: 0.5rem;
  border: none;
  
 }
 #complex-case2:hover {background-color: transparent;
  color: red;
border: 1px solid white;  }


#why { 
  width: 300px;
  padding:1rem;
  font-family: 'Titillium Web';
border: 1px solid #56a7dc;
background-color:   #56a7dc;
color: white;
font-weight: bold;
border-radius: 0.5rem;

font-size: 1rem;}

#why:hover {background-color: transparent;
  color: white;
border: 1px solid white;  }





 #why3{ width: 25%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding:20px;
  font-family: 'Titillium Web';
border: 1px solid red;
background-color:   red;
color: white;
font-weight: bold;
border-radius: 10px;
justify-self: center;
font-size: 15px;}

#why3:hover {background-color: transparent;
  color: red;
border: 1px solid white;  }







.banner img {margin-top: 10px;
float: left;
margin-left: 5%;
}





.banner a { 
 text-decoration: none;
 color: white;}






#clidir {z-index: 30;
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 50px;
  

font-family: 'Titillium Web';}









#overlay, #overlay1, #overlay2, #overlay3, #overlay4, #overlay5, #overlay6, #overlay7,
 #overlay8, #overlay9, #overlay10 {
   display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

#text, #text1, #text2, #text3, #text4, #text5, #text6,
#text7, #text8, #text9, #text10  {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
   font-size: 15px;
   color: black;
}

#text, #text1,#text2,  #text3 , #text4, #text5, #text6,
#text7, #text8, #text9, #text10 p {color:black; font-size: 15px;

}







#mobile-bg {display: none;}

































#contact-half {background-color: transparent;}


#complex-case {

  background-color: red;
  border-radius: 10px;
  border: none;
  margin-left: 10px;
 
 }




.banner button { background-color: #56a7dc;
border: none;
margin-left: 10px;
border-radius: 10px;
}


.banner button:hover { background-color: transparent;
  border: 1px solid white;
text-decoration: none;}

.banner button li:hover { border: none; }


#complex-case {

  background-color: red;
  border-radius: 10px;
  border: none;
  margin-left: 10px;
 
 }




.banner a:hover {text-decoration: none;
color: white;}


.show {display:block;}



















#main-title h3 { color:#56a7dc;

display: none; }




@media only screen and (max-width: 1200px) {
.banner { display: none;}


#why3{ width: 200px;
  display: block;
  margin-left: 0;
  margin-right: auto;
  padding:1rem;
  margin-top: 10px;
  font-family: 'Titillium Web';
border: 1px solid red;
background-color:   red;
color: white;
font-weight: bold;
border-radius: 10px;
justify-self: center;
font-size: 0.8rem;}

#why3:hover {background-color: transparent;
  color: red;
border: 1px solid white;  }
#front-buttons {display: flex;flex-direction: column;justify-content: center;width: 100%;}
#front-buttons button {

margin-top: 30px;

}
  .nav-mobile {
    position: fixed; /* Make the navbar fixed */
    top: 0; /* Position it at the top of the viewport */
    left: 0; /* Position it at the left of the viewport */
    width: 100%; /* Make it full width */
    display: flex;
  
    justify-content: space-between;
    align-items: center;
    background-color: #2c2c2c;
    padding: 10px;
    z-index: 10000;
  }
  
  .nav-mobile ul {
    margin: 0;
    padding: 0;
  }
  
  .nav-mobile li {
    list-style: none;
  }
  
  .dropdown {
    order: 2;
  }
  
  .custom-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    width: 100vw;
    background-color: #2c2c2c;
    color: white;
    z-index: 1;
    display: none;
    animation: slideDown 0.5s ease-out;
  }
  
  .custom-dropdown.show {
    display: block;
  }
  
  .custom-dropdown ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center; /* Center the content */
  }
  
  .custom-dropdown ul li {
    border-bottom: 1px solid rgb(155, 155, 155);
    padding: 20px 0; /* Add space around each section */
  }
  
  .custom-dropdown ul li:last-child {
    border-bottom: none;
  }
  
  .custom-dropdown ul li a {
    display: inline-block;
    text-decoration: none;
    color: white;
  }
  
  .custom-dropdown ul li a:hover {
    background-color: #222;
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  



  #complex-case2 {
    width: 200px;
    padding:0.8rem;
    font-size: 1rem;
    font-family: 'Titillium Web';
  border: 1px solid #56a7dc;
  
  color: rgb(255, 255, 255);
  font-weight: bold;
  
  
  font-size:0.7rem;
    background-color: red;
    border-radius: 0.5rem;
    border: none;
    
   }
   #complex-case2:hover {background-color: transparent;
    color: red;
  border: 1px solid white;  }
  
  
  #why { 
    width: 200px;
    padding:0.8rem;
    font-family: 'Titillium Web';
  border: 1px solid #56a7dc;
  background-color:   #56a7dc;
  color: white;
  font-weight: bold;
  border-radius: 0.5rem;
  
  font-size: 0.7rem;}
  
  #why:hover {background-color: transparent;
    color: white;
  border: 1px solid white;  }
  
  
  






















  #overlay, #overlay1, #overlay2, #overlay3, #overlay4, #overlay5, #overlay6, #overlay7,
  #overlay8, #overlay9, #overlay10 {
    display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 100; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
 }
 
 #text, #text1, #text2, #text3, #text4, #text5, #text6,
 #text7, #text8, #text9, #text10  {
   background-color: #fefefe;
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
    font-size: 15px;
    color: black;
 }
 
 #text, #text1,#text2,  #text3 , #text4, #text5, #text6,
 #text7, #text8, #text9, #text10 p {color:black; font-size: 15px;
 
 }
 
 
 
 #about h3 {font-size: 20px;}
 
 
 #main-title { margin: auto;
 width: 80%;
 text-align: left;
 margin-top: 9%; }
 
 
 
 #main-title h1 { color:#56a7dc;
 font-weight: bold; 
 font-size: 1.5rem;
padding: 0;
text-align: left; }
 
 #main-title p { font-size: 0.9rem;
  text-align: left;
padding: 0; }


 
 
 
 
 }
 







 @media only screen and (max-width: 950px) { 

  #shadow { position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;}
  
  #clidir {z-index: 30;
    background-color:#2c2c2c;
    padding-top: 50px;
  }
  #span {
    color: white;
  }

  #Director {
    color: white;
  }
  #last {
    color: white;
  }
  
  .media p {
  display: none;
   color: #2c2c2c;
  text-align: justify;
  padding-left: 40px;
  line-height: 23px;
  padding-right: 40px;
  font-size: 13px;
  
  }
  
  .media { 
   height: 300px;
    background-color: white;
    margin: 3%;
    padding-bottom: 50px;
   
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);  }

  /* .media button { background-color: #31859c; 
padding: 17px;
border: 1px solid #31859c;
color: white;

bottom: 0;
float: none;} */

#hygiene {
margin-left: 0;margin-right: 0;}




 .banner {display: none;}




}






@media only screen and (max-width: 900px) { 
  .banner {display: none;}

  #main-title { margin: auto;
    width: 90%;
    text-align: left;
    margin-top: 130px; }
    
    
    
    #main-title h1 { color:#56a7dc;
    font-weight: bold; 
    font-size: 1.7rem;
   padding: 0;
   text-align: left; 
  text-shadow: 1px 1px #ffffff;}
    
    #main-title p { font-size: 0.9rem;
     text-align: justify;
    font-weight: lighter;
      text-shadow: 1px 1px #000000;
   padding: 0; }


  #front-buttons {display: flex;flex-direction: column;justify-content: space-around;width: 100%;}

.media { 
 height: auto;
  background-color: white;
  margin: 3%;
  padding-bottom: 50px;
 
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);  }


  #info h2 { font-size: 20px; 
   font-family: 'Titillium Web';}
#about h2 {font-size: 20px;
 font-family: 'Titillium Web';}
#clidir h2 {font-size: 20px;
 font-family: 'Titillium Web';}
#contact h2 {font-size: 20px;
 font-family: 'Titillium Web';}

 input[type="submit"].disabled {
  opacity: 0.7; /* Dim the button */
  cursor: not-allowed; /* Change cursor style */
  /* Add any other styles to visually indicate disabled state */
}

#hygiene {
margin-left: 0;margin-right: 0;}

#info {margin-top: -10%;}





  #shadow {background-color: transparent;}


#myVideo {display: none;}
#mobile-bg {display: block;
margin-top: 50px;


}





















}









 #this {
  display: block;
  margin-left: auto;
  margin-right: auto;
}











.header .navbar-brand img{
    width: 170px;
    height: auto;
}

.header .navbar-brand .logo{
    border-radius: 11px;
    margin-left: 60px;
}

.header .navbar-brand .chamber{
    width: 300px;
    height: auto;
}

.navbar .navbar-collapse ul{
    margin-left: 220px;
    color: white;
    
}


.navbar .navbar-collapse a{
 
    font-size: 15px;
    
    font-weight: 500px;
}

.container .text{
    margin-top: 20px;
}

.container .inner-text h3{
    margin-left: 36%;
    padding-bottom: 15px;
}

.container .inner-text h2{
    margin-top: 30px;

    padding-bottom: 15px;
    border-bottom: solid 1px black;
    color:#56a7dc;
}

.container .inner-text h5{
    text-align: center;
}

.footer{
    padding-top: 8px;
    position: relative;
    bottom: 0px;
    width: 100%;
    background-color: #31859C;
    height: 40px;
    z-index: 10000;
    padding-left: 8%;
    
}

.footer a{
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.footer a:hover{
    text-decoration: underline;
}

.footer .linkedin{
    margin-left: 19%;
}

.footer .contactUS{
    margin-left: 34%;
}


/*----------------------------------------------------------------------------------*/


.container .OCD-Name{
    width: 60%;
    display: inline-block;
    text-align: left; 
    

}

.container .OCD-specs{
    width: 60%;
    text-align: left;
margin-left: 20%;
    font-size: 15px;
    line-height: 20px;

    color: black;
    
   
    

}

/*--------------------------------------------------------------------------------------*/


.container .reff-img{
    height: 350px;
    width: auto; 
    margin-left: 25%;
}

/*-----------------------------------------------------------------------------------*/

.container .med-img{
    height: 350px;
    width: auto; 
    margin-left: 20%;
}

/*------------------------------------------------------------------------------------*/

.container .ads-img{
    height: 350px;
    width: auto; 
    margin-left: 20%;
}

/*-----------------------------------------------------------------------------------*/

.container .cntc-img{
    height: 300px;
    width: auto; 
    margin-left: 23%;
}

/*------------------------------------------------------------------------------*/




/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */


/*-------------------------------------------------------------------------------------------*/

.AbsMng img{
    margin-top: 13px;
}

.CaseMng img{
    margin-left: 60px;
}

.Fit4work img{
    margin-top: 7px;
    margin-left: 58px;
}

.AsbestosMedicals img{
    margin-top: -4px;
    margin-left: 54px;
}

.CMO img{
    margin-left: 57px;
    margin-top: 0px;
}

.hygene img{
    margin-left: 390px;
    margin-bottom: 20px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.IRM img{
    margin-left: 65px;
}

.OurServices .r3 {
    margin-top: 10px;
}