/* body*/

body{
    background-color: rgb(255, 255, 255);
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

/* 
 *****************************************************************************
 Global
 *****************************************************************************
 */

h1 {
    color: #670E36;
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 0;
    
}


.h1container {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
    width: max-content;
}

 .h1container h1::after {
    background: #95BFE5;
    border-radius: 5px;
    display: block;
    content: "";
    height: 10px;
    margin-top: 10px;
    width: 100%;
 }

h2 {
    font-family: 'Open Sans', sans-serif;
    color: #670E36;
    
    text-align: center;
    
}

.h2container {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
    width: max-content;
    width: fit-content;
}

 .h2container h2::after {
    background: #95BFE5;
    border-radius: 5px;
    display: block;
    content: "";
    height: 7px;
    margin-top: 10px;       
}


h3 {
    font-family: 'Open Sans', sans-serif;
    color: #670E36;
    
} 

.h3container {
    display: block;
    margin: auto;
    text-align: center;
    width: max-content;
}

.h3container h3::after {
    background: #95BFE5;
    border-radius: 5px;
    display: block;
    content: "";
    height: 5px;
    margin-top: 10px;
    width: 100%;
}


p {
    font-family: 'Open Sans', sans-serif;
    line-height: 25px;
    font-size: 15px;
}

.container {
    background-color: #ffffff;
    margin: auto;
    
    width: 75%;
}

.learnmore {
    background-color: #670E36;
    border: 5px #670E36 solid;
    border-radius: 10%;
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    height: 38px;
    margin: 20px;
    padding: 15px, 15px, 15px, 15px;
    transition: all ease-in-out, 0.8s;

 }

 .learnmore:hover{
     background-color: rgb(184, 105, 140);
     border: 5px rgb(184, 105, 140) solid;
     
 }

 /* 
 *****************************************************************************
 Harvard QMS Branding
 *****************************************************************************
 */

 #branding {
    background-color: rgb(255, 255, 255);
    display: inline-block;
    font-family: 'Jockey One', sans-serif;
    height: 90px;
    margin-left: 10px;
    margin-top: 5px;
    max-height: 100px;
    width: 290px;
}

#brandingcontainer{
    box-sizing: border-box;
    margin-top: -18px;
    padding: 0px;
}

#brandingcontainer img{
    
    margin-top: 23px;
    margin-right: 10px;
   
}


#Harvard h1 {
    box-sizing: border-box;
    font-size: 42px;
    letter-spacing: 15px;
    font-family: 'Gentium Book Basic', serif;
    padding: 0;
    
    text-align: center;
    text-decoration: none;
    text-shadow: 4px 4px #ccc;
    width: 100%;
    
}

#Harvard h1::after {
    background: #95BFE5;
    border-radius: 5px;
    display: block;
    content: "";
    width: 100%;
    height: 10px;

}


#QualityManagement {
    color: #670E36;
    font-weight: 500;
    margin: 0;
    font-family: 'Gentium Book Basic', serif;
    text-align: left;
    font-size: 22px;
    
}

#logobar {
    
    background-color: #ffffff;
    max-height: 100px;
    padding: 0px;
    width:100%;
   
}

#logobar .container{
    align-content: center;
    
    display: flex;
    justify-content: start;
    margin-left:auto;
    margin-right:auto;
    max-height: 100px;
    width: 80%;
}

.sticky{
    border-bottom: #FEE505 5px solid;
    position: fixed;
    top: 0;
    z-index: 1;
}



#logobar a {   
    color: #670E36;
    
    text-decoration: none;
    

}

#logo {
     
    margin-right: 0;
    max-height: 90px;
    max-width: 70px;
    min-width: 70px;
    width: 10%;
}

/*
******************************************************************************
Header section
******************************************************************************
*/


header {
    border-bottom: #FEE505 5px solid;
        
}


.topbar {
    background-color: #95bfe5;
    border-bottom: 5px solid #FEE505;
    height: 50px;
    max-height: 75px;
    text-align: right;
    width: 100%;
    
}

.contactinfo {
    color: #670E36;
    display: inline-block;

}

.contactinfo ul {
    
    margin: auto;
    padding: 10px;
}

.contactinfo ul li{
    display: inline-block;
    padding: 3px 10px;
}

.sociallinks {
    display: inline;
    margin: 20px;
}

.topbar .sociallinks a{
    color: #670E36;
    text-decoration: none;
    transition: all .5s ease-in-out;
}

.topbar .sociallinks a:hover{
    color: white;
}


header i {
    padding: 5px;
}

/*
**************************************************************************
NAVIGATION
**************************************************************************
 */


nav {
    
    color: #670E36;
    margin-left: auto;
    
    height: 100px;
    text-align: center;
   

}

nav ul {
    height: 100px;
    margin:0;
    padding: 0px;
    width: 100%;
}

nav li{
   display: inline-block;
   list-style: none;
   font-size: 20px; 
   padding: 35px 20px;
   text-align: center;  
}

nav ul li:hover{
    background-color:rgb(236, 240, 247);
}




   

nav a:hover {
    color: #670E36;
    font-weight: 700;
}

.current {
    color: #670E36;
    font-weight: 900;
    

}

.courses  {
    position: relative;
    
}

.courses:hover .submenu_1{
    background-color: white;
    border: 0px, 1px, 1px, 1px, solid rgb(241, 234, 234);
    border-radius: 5px;
    box-shadow: 5px 5px 8px lightgray;
    display: flex;
    padding: 0;
    position: absolute;
    
    left: -175px;
    top: 100px;
    width: 600px;
    z-index: 1;
}


.submenu_1 {
    
    display: none;
    transition: all 1s ease-in;
}

.submenu_1_column{
    background-color: rgb(236, 240, 247);
    height: 300px;
    padding-top: 10px;
    width: 27%;
}

.Six_sigma{
    width: 46%;
}



.submenu_1_column span{
    font-weight: 700;
}



.submenu_1 li {
    background-color:rgb(236, 240, 247);
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    
    

}

.submenu_1 ul li:hover {
    background-color: #dbe1e7;
    
}

.submenu_1 li a{
    
    padding: 0;
    
}



.submenu_2{
    display: none;
    
}

.submenu_2 li{
    display: block;
}




.hoverwebdesign{
    position: relative;
}

.hoverwebdesign:hover .submenu_2{
    background-color: #ffffff;
    box-shadow: 5px 5px 8px lightgray;
    display: block;
    position: absolute;
    left: 200px;
    top: 0px;
    width:180px;
    
}

.responsivenav{
    background-color: white;
    border:none;
    display: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    position: relative;
    outline: none;
    transition: .2s ease-in;
}

.responsivenav:hover, .responsivenav:focus{
    background-color: rgb(236, 240, 247);
    
}

#hamburger_1:hover{
    cursor: pointer;

}

#navdropdown {
    background-color: rgb(236, 240, 247);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    margin:0;
    padding:0;
    position: absolute;
    text-align: center;
    right: 0;
    top: 98px;
    width: 300px;
    z-index: 1;
    
}


#navdropdown li{
    display: block;
    padding: 10px;
    
}



#navdropdown li:hover{
    background-color: rgb(211, 219, 236);
    display: block;
    font-weight: bold;
    
    
}

#navdropdown li i{
    font-size: 20px;
    float: right;
    margin: 0;
    padding:0;
}

#navdropdown li a {
    width: 100%;
    height: 100%;
    display: block;
}

#navdropdown.show {
    display: block;
}

.submenu_3 {
    background-color: white;
    color: #670E36;
    display: none;
    font-size: 20px;
}



/* 
*************************************************************************
Contact form
*************************************************************************
*/

#contact {
    background-color: #670E36;
    margin-top: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
    width: 100%;
}

#contact .container{
    background-color: #670E36;
    
}

#contact .quickcontact{
   display: inline-block;
   margin: 10px;
   width: 30%;
}

.quickcontact h1{
   color: #ffffff;
}

.quickcontact p{
   color: #ffffff;
   margin-top: 40px;
    

}

.quickcontact span{
    color: #4CAF50;
    font-weight: 800;
    text-decoration: underline;
}

.quickcontact a{
   color: #ffffff;
   
}

#contact .form{
   display: inline-block;
   margin: 8px;
   vertical-align:top;
   width: 30%;

}

.form form{
   text-align: center;
}

input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;

}

input[type=submit]{
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;


}

input[type=submit]:hover{
    background-color: rgb(50, 128, 53);
    
}

textarea{
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 156px;
margin-bottom: 2px;
margin-top: 8px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
resize: none;

}

#contact .sociallinks{
    
    display: block;
    font-size: 30px;
    width: 100%;
}

#contact .sociallinks i{
    color: white;
    display: inline;
    font-size: 50px;
    margin: 20px 20px 0px 10px;
    transition: all 0.5s ease-in-out;
}

#contact .sociallinks i:hover{
    transform: scale(2);
}

#contact .sociallinks a{
    text-decoration: none;
}




/*
*********************************************************************
HOME PAGE
**********************************************************************
*/

#showcase {
    display: block;
    background-color: #ffffff;  
    margin-bottom: 20px;
    overflow: hidden;
    padding: 0;  
    position: relative;
       
    
}

.slides {
    
    display:block;
    

}

.caption .h3container {
    color: #ffffff;
}

@-webkit-keyframes fade{
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade{
    from {opacity: .4}
    to {opacity: 1}
}


.fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 2.5s;
   animation-name: fade;
   animation-duration: 2.5s; 
}

.slides img {
    
    
    max-height: 100%;
   
    width: 100%;
    z-index: -1;

    
}

.slides .caption{
    
    color: black;
    position:absolute;
    left: 50%;
}

.dotscontainer {
   display: block;
   margin: auto;
   margin-top: 20px;
   text-align: center;

}

.dot {
    background-color: lightgrey;
    border-radius: 50%;
    margin: 0px 5px;
    height: 15px;
    width: 15px;
    display: inline-block;
    transition: background-color 0.6 ease;


}

.activedot {
    background-color: darkgray;
    border-radius: 50%;
    margin: 0px 5px;
    height: 15px;
    width: 15px;
    display: inline-block;
}



#ourservices {
    background-color: #ffffff;
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
    
    
}


#ourservices h1 {
    margin-bottom: 30px;
   
    padding: 10px;         
    text-align: center;
    text-decoration-line: underline ;
}
         
  
   
#ourservices .services {
  
   display: inline-block;
   margin: auto;
   vertical-align: top;
   text-align: center;
   width: 32%;
    
  
   
}


.services img {
   width: 100px;
}





#parapsyco{
   margin-bottom: 30px;
}





#whyus {
    background-color: rgb(236, 240, 247);
    border-top: #FEE505 5px solid;
    margin: auto;
    padding: 30px, 0;
    width: 100%;
}

#whyus .container {
    background-color:rgb(236, 240, 247) ;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    
}

.whychooseus {
    display: inline-block;
    text-align: center;
    width: 100%;
}





.testimonials {
    display: inline-block;
    
    text-align: center;
    width: 100%;
}    


.box {
   background-color: #ffffff;
   border-radius: 10px;
   box-shadow: 8px 8px 8px lightgray;
   display: inline-block;
   margin: 30px 30px; 
   
   padding: 20px;
   width: 30%;
   vertical-align: middle;
   
}






#endorsements {
    background-color: rgb(255, 255, 255);
    text-align: center;
    
}

#endorsements .container {
    background-color: rgb(255, 255, 255);
}

.firmlogo{
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 32%;
    
}

.firmlogo img{
    margin: 10px;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100px;
}
#guarantee{
    margin: 20px 0;
}
#guarantee .container{
    text-align: center;
    
}

.IQ  {
    background-color: #95BFE5;
    display:inline-block;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    width: 40%;
    
}
.in{
    margin-right: 20px;

}

.in input{
    display: block;
    font-size: 20px;
    margin:auto;
    margin-top: 15px;
    text-align: center;
    width: 50%;
}

.out {
    background-color: #670E36;
    color: white;
    margin-left: 20px;
           
}

.out p{

    color: #4CAF50;
    display: block;
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: 800;
}

#IQoutput {
    color: #4CAF50;
    font-weight: 800;
    font-size: 30px;
}



/*
*********************************************************************
FOOTER
**********************************************************************
*/

footer{
    background-color: #95bfe5;
    border-top: 5px solid #FEE505;
    color: #670E36;
    display: inline-block;
    margin-top: 20px;
    text-align: center;
    width: 100%;

}


/*
*********************************************************************
MEDIA QUERIES
**********************************************************************
*/

@media screen and (max-width: 1200px) {
#logobar nav {
     display: none;
 }

 .responsivenav {
    display: block;  
    margin-left: auto;
    position: relative;    
 }

 .responsivenav i{
     color: #670E36;
     font-size: 35px;
     margin-top: 25px;
     
 }



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

 #ourservices .services{
    display: block;
    margin: 10px, 0px, 10px, 0px;
    width: 90%;
 }

 #contact .quickcontact {
    display: block;
    margin: 10px;
    width: 100%;
 }

 #contact .form{
     display: block;
     margin: auto;
     width: 90%;
 }

 #contact .sociallinks{
     margin:auto;
     margin-top: 20px;
 }
 
}

@media screen and (max-width: 1000px){
    #whyus .box{
        display: block;
        margin: auto;
        margin-top:20px;
        width: 90%;
    }
}

@media screen and (max-width: 591px){
    #branding {
        display: none;
    }

    .sociallinks{
        display: none;
    }

    .contactinfo span{
        font-size: 10px;
    }
}




}