body, html {
    height: 100%;
    margin: 0;
    font-family:sans-serif;
    width: 100%;
    overflow-x: hidden;
    padding: 0px;
  }
  @media screen and (max-width: 650px) {
    body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    }
  }
  a{
    text-decoration: underline;
    color: #ffffff;
  }

      
footer{
  width: 100%;
  background: linear-gradient(to right,#B28A37,#1F3449);
  height: 10.5rem;
  padding-top: 0.938rem;
  margin-top: 1.25rem;
  display: block;
  text-align: center;
  
    }

    
  .footertext{

    font-size: 1rem;
    margin-bottom: 0;
    padding-left: 0.313rem;
    color:white;
    
  }
  @media screen and (max-width: 650px) {
    .footertext {
    font-size: 0.75rem ;

    }
  }

    
/* Style all font awesome icons */
.fa {
  margin-top: 0.625rem;
  display: inline-block ;
  margin-left: 1.25rem;
  padding-top: 1.375rem;
  
  padding: 0.7rem;
  width: 1.875rem;
  height: 0.5em;
  text-align: center;
  text-decoration: none;
  margin: 0.313rem 0.313rem;
  }
  
  .fa-brands {
    margin-top: 0.625rem;
    display: inline-block ;
    margin-left: 1.25rem;
    padding-top: 1.375rem;
    
    padding: 0.7rem;
    width: 1.875rem;
    height: 0.5em;
    text-align: center;
    text-decoration: none;
    margin: 0.313rem 0.313rem;
    }
    

  
  /* Add a hover effect */
  .fa:hover {
    transform: scale(1.1);
  }

  .fa-brands:hover {
    transform: scale(1.1);
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
    color: #ffffff ;
  }
  
  /* Twitter */
  .fa-x-twitter {
    color:  #ffffff;
  }
  .fa-instagram{
  color: rgb(255, 255, 255);
  }

  .fa-envelope{
    color: rgb(255, 255, 255);  
  }
 
  .fa-whatsapp{
    color: rgb(255, 255, 255);
  }
.fa-linkedin{
  color: #ffffff;
}

  .hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 3s;
  }

  @media screen and (max-width: 650px) {
    .hidden{
      transition: all 1s;  
    }
  }

  .show{
    opacity: 1;
    filter: blur(0px);
    transition: all 3s;
    transform: translateX(0);
  }

  @media screen and (max-width: 650px) {
    .show{
      transition: all 1s;  
    }
  }
  .animate__animated.animate__zoomIn{
    animation-duration: 3s;
text-align: center;
display: block;

  }


  .bg{
    
    /* The image used */
    background-image: url("images/gavel2.jpg"); 
   /* Full height */
    height: 100%;
   /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
   margin-top: 2rem;
   filter: brightness(100%);
   
  
    }
  

        @media screen and (max-width: 650px) {
          .bg{
          margin-top: 3%;      
   -webkit-animation: slidein 3s;
   animation: slidein 3s;
  
          }
        }    

        @media screen and (max-width: 650px) {
          @-webkit-keyframes slidein {
            from {background-position: center; background-size:1300px; }
            to {background-position:  center; background-size:1200px;}
            }
            
            @keyframes slidein {
            from {background-position: center;background-size:1300px; }
            to {background-position:   center;background-size:1200px;}
            
            }
        }    
        
        
    .bg h1{
        font-size: 5rem;
        color: white;
        text-align: center;
        padding-top: 10rem;
        text-shadow: 3px 3px 8px black;
    }

    @media screen and (max-width: 650px) {
      .bg h1{
      font-size: 2.75rem;
      text-align:center;
  
      }
    }

    .bg p{
        font-size: 1.5rem;
        color: white;
        text-align: center;
        padding-top: 5rem;
        text-shadow: 3px 3px 8px black;  
        font-style: italic;
    }

    @media screen and (max-width: 650px) {
      .bg p{
      font-size:1.1rem;
     margin-top:200px;
     padding-top: 2rem;
  
      }
    }

    
/* MOBILE NAVIGATION MENU */

.topnav {
  overflow: hidden;
  background: linear-gradient(to right,#B28A37,#1F3449);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2; 
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
}

.mobilelogo{
margin-left: 2px;
width: 100px;
}

.mobilelog{
height: 60px;
width: 60px;
}



/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
 
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration:none;
  font-size: 22px;
  display: block;
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
  
  
}



/* Style the hamburger menu */
.topnav a.icon {
  color: white;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 20px;
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
        
  
}


/* Add a grey background color on mouse-over */
.topnav a:hover {
  color: #fcd3d0;
}

/* Dont display MOBILE navbar on BIG screens */
@media screen and (min-width: 970px) {
  .topnav {
  display: none;
  }
}

    
/*Desktop Navigation bar*/
nav
{
	width: 100%;
	height: 5.5rem;
  background: linear-gradient(to right,#B28A37,#1F3449) ;
	text-align: right;
	top: 0;
	position: fixed;
	overflow:hidden;
  z-index: 2;
	
}


.logo {
    margin-top: 0.5rem;
    margin-left: 1rem;
    width: 0.313rem;
    height: 0.313rem;
    -webkit-transition: all 0.3s linear;
      -khtml-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
             transition: all 0.3s linear;
        
  }
  .logo:hover{
  transform: scale(1.05);
  }
  
  
  ul li
  {
  display: inline-block;
  line-height: 6.25rem;
  padding:0 0.938rem;
  font-size: 1.25rem;
  text-decoration: none;
  margin-top: -3.125rem;
  padding-top: 20px;
  }
  
  ul li a
  {
      text-decoration: none;
      color: rgb(255, 255, 255);
      padding: 5px;
      border-radius: 5px;
      -webkit-transition: all 0.3s linear;
      -khtml-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
             transition: all 0.3s linear;
  
  }
  
  ul li a:hover
  {
  color: #B28A37;
  background-color: white;
  padding: 10px;
  }
       
  h2{
    color: #1F3449 ;
    font-size: 2.4rem;
}

@media screen and (max-width: 650px) {
  h2{
 font-size: 18px;

  }
}

h3{
    color:  #1F3449  ;
    font-size: 1.25rem;
    text-align: center;
}
@media screen and (max-width: 650px) {
  h3{
 font-size: 16px;

  }
}

.container1{
   width: 90%;
   display:flex;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (max-width: 650px) {
  .container1{
  width: 100%;
  display: block;

  }
}

.container1text{
    width: 50%;
    padding: 34px;
   font-size: 18px;
   line-height: 35px;
   background-color: #f1d8a4;
   margin-right: 20px;
}

@media screen and (max-width: 650px) {
  .container1text{
  width: 90%;
margin-left: auto;
margin-right: auto;
  text-align: left;
  font-weight: 300;
  padding: 10px;

  }
}

.container2text{
  width: 50%;
  padding: 34px;
 font-size: 18px;
 line-height: 35px;
 margin-right: 20px;
}

@media screen and (max-width: 650px) {
  .container2text{
  width: 90%;
margin-left: auto;
margin-right: auto;
  text-align: left;
  font-weight: 300;
  padding: 10px;

  }
}



.nurse2{
    width: 55%;
    height: 410px;
    padding: 2px;
    margin-top: 20px;
  }
  
    @media (min-width: 1920px) and (max-width: 2560px)  {
    .nurse2{
     height: 510px;
  }
}

  @media screen and (max-width: 650px) {
    .nurse2{
    width: 100%;
    height:250px;
   
  
    }
  }



.container2img{
  width: 50%;
  height: 600px;
  padding: 2px;
  margin-top: 20px;
}

@media screen and (max-width: 650px) {
  .container2img{
  width: 100%;
  height:500px;
 

  }
}

    @media (min-width: 1920px) and (max-width: 2560px)  {
    .container2img{
     height: 750px;
  }
}


     
/*HOMEPAGE CARDS STYLING*/

/* Three columns side by side */
.column {
  float: left;
  width: 26%;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
  margin-left: 4.375rem;
  
}


  @media (min-width: 1920px) and (max-width: 2560px) {
      
    .column{
      margin-left: 7.375rem;
  }
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
.column {
  width: 100%;
  display: block;
  margin-left:15px;
  margin-right: auto;
}
}

.card {
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.473);
  width: 19.25rem;

  font-weight: 500;
  margin-bottom: 20px;
  text-align: left;
  border-radius: 10px;
  padding-top: 10px;
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;
}


  @media (min-width: 1920px) and (max-width: 2560px)  {
    .card{
      width: 22rem; 
  }
}
  
  
@media screen and (max-width: 650px) {
  .card {
  width: 90%;
  font-size: 1rem;
  font-weight: 300;
  }
  }
  
.card:hover{
  border: 1px solid  #f5bd4f;
  box-shadow: 0 5px 8px 0 #f8b93c;
  transform: scale(1.03);
}

 
  /* Some left and right padding inside the container */
  .container {
    padding: 0 1rem;
  }
  
  /* Clear floats */
  .container::after, .row::after {
    content: "";
    clear: both;
    display: table;
  }

  
  .bg2{
    
    /* The image used */
    background-image: url("images/gavel2.jpg"); 
   /* Full height */
    height: 60%;
   /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
   margin-top: 4%;
   filter: brightness(100%);
  }

  @media screen and (max-width: 650px) {
    .bg2{
    margin-top: 4%;
    height:50%;
    }
  }    


  .bg2 h1{
    font-size: 5rem;
    color: white;
    text-align: center;
    padding-top: 8.5rem;
    text-shadow: 3px 3px 8px black;
}

@media screen and (max-width: 650px) {
  .bg2 h1{
  font-size: 2.75rem;
  text-align:center;
 

  }
}


.africa{
  width: 45%;
  height: 420px;
  padding: 10px;
 
}

@media screen and (max-width: 650px) {
  .africa{
  width: 100%;
  height:360px;
 

  }
}


 
  /*///////////////// CONTACTS PAGE STYLING////////////////////////////////////////////////////////////////////////////////////////////////*/

.bg3{
    
  /* The image used */
  background-image: url("images/mountains.jpg"); 
 /* Full height */
  height: 50%;
 /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
 margin-top: 3%;
 filter: brightness(100%);
}

.bg3 h1{
  font-size: 5rem;
  color: white;
  text-align: center;
  padding-top: 10rem;
  text-shadow: 3px 3px 8px black;
}


.contactuscard {
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.568);
  width: 18.75rem;
  border-radius: 10px;
  padding-top: 1.25rem;
  font-weight: 500;
  padding-bottom: 1.25rem ;
  margin-bottom: 40px;
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;

  
}


@media screen and (max-width: 650px) {
  .contactuscard {
    width: 90%;
   margin-left: 10px;
  }
}



.contactuscard:hover{
  
  box-shadow: 0 5px 8px 0 #f8b93c ;
  transform: scale(1.05);
}




.button2 {
  border: 2px solid #1F3449 ;
  border-radius: 4px;
  outline: 0;
  display:inline-block;
  padding: 0.625rem;
  margin-top: 5px;
  color: white;
  background-color:#1F3449;
  text-align: center;
  font-weight:600;
  font-size: 1.25rem;
  cursor: pointer;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;

}

.button2:hover {
color: white;
border: 2px solid #f8b93c ;
background-color: #f8b93c;
font-weight: 600;
      width: 210px;
}


.button3 {
  border: 2px solid #1F3449 ;
  border-radius: 4px;
  outline: 0;
  display:inline-block;
  padding: 0.625rem;
  margin-top: 5px;
  color: white;
  background-color:#1F3449;
  text-align: center;
  font-weight:600;
  font-size: 1.25rem;
  cursor: pointer;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;

}


.button3:hover {
color: white;
border: 2px solid #f8b93c ;
background-color: #f8b93c;
font-weight: 600;
      width: 210px;
      

}

 
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; 
  border: 2px solid #B28A37; /* Gray border */    
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=number], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; 
  border: 2px solid #B28A37; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

 
label{
  font-weight: 600;
  color: black;
}


  
  /* Style the submit button */
  input[type=submit ] {
    background-color: #1F3449;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
           width: 250px;
  }

  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #f8b93c;
    -webkit-box-shadow: #f8b93c;
           box-shadow: #f8b93c;
           transform: scale(1.05);
  }
  
  /* Add a background color and some padding around the form */
  .container3 {
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    box-sizing : border-box;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  
@media screen and (max-width: 650px) {
  .container3{
    width: 100%;
  }
}
  

 /* ABOUT PAGE STYLING/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



 .countercard{
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.397);
  width: 18.75rem;
  padding-top: 1.25rem;
  font-weight: 500;
  padding-bottom: 1.25rem ;
  margin-bottom: 40px;
  margin-top: 50px;
  border-radius: 5px;
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;
}

@media screen and (max-width: 650px) {
  .countercard {
  width: 90%;
  margin-left:10px;
  font-size: 1rem;
  font-weight: 300;
  padding-top: 5px;
  margin-top: 10px;
  padding-bottom: 5px;
  }
  }

  .counter{
    font-size: 40px;
  }
  

  @media screen and (max-width: 650px) {
    iframe{
      width: 100%;
        height:330px;
  
    }
  }
  
/* GALLERY/////////////////////////////////////////////////////////////////////////////////////////// */

.gallery {
  line-height:0;
  -webkit-column-count:3; /* split it into 5 columns */
  -webkit-column-gap:5px; /* give it a 5px gap between columns */
  -moz-column-count:3;
  -moz-column-gap:5px;
  column-count:3;
  column-gap:5px;
}

.gallery img {
  width: 100% !important;
  height: auto !important;
  margin-bottom:5px; /* to match column gap */
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;
}

.gallery img:hover {
  transform:scale(1.03);
}

@media (max-width: 1200px) {
  .gallery {
   -moz-column-count:    4;
   -webkit-column-count: 4;
   column-count:         4;
  }
}

@media (max-width: 1000px) {
  .gallery {
   -moz-column-count:    3;
   -webkit-column-count: 3;
   column-count:         3;
  }
}

@media (max-width: 800px) {
  .gallery {
   -moz-column-count:    2;
   -webkit-column-count: 2;
   column-count:         2;
  }
}

@media (max-width: 400px) {
  .gallery {
   -moz-column-count:    1;
   -webkit-column-count: 1;
   column-count:         1;
  }
}



*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
  
  .video {
      width:60%;
      height:60%;
      display: flex;
      justify-content: center;
      margin-left:auto;
      margin-right:auto;
}

@media screen and (max-width: 650px) {
  .video  {
 width: 100%;
 height:330px;
display: block;

  }
  }