html {
  scroll-behavior: smooth;
}
body {
  padding: 0;
  margin: 0;
  background-color:#F7F7F7;
}

/*---------------------------------Start Preloader---------------------*/
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid black;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loaddiv
{
  display: none;
}


/*------------------------------End Preloader---------------------*/
.slider-container
	{
		margin: 2px;
		padding: 2px;	
		overflow:hidden;
	}
.slider-container img
	{
		/*height:500px;
		width:100%;*/
	}
.slides{display:none;}
.logo{
    
    height: 200px;
    margin-top: -62px;
    margin-bottom: -134px;
    margin-left: 115px;
}
/*---------------------NAVBAR---------------------*/

.topnav {
 
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color:red;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
@media only screen and (min-width: 320px) and (max-width:600px) {	
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
	
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media only screen and (min-width: 320px) and (max-width:600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*---------------------INTRO---------------------*/
.section1{
  
    background-color: peachpuff;
    height: 700px;
    
}
.section1 img{
    height: 700px;
    width: 100%
}
.info h2 {
        color: gainsboro;
   
    font-size: 48px;
    font-weight: 700;
    position: absolute;
    bottom: 350px;
}

.info h2 span {
  color: #74b5fc;
  text-decoration: underline;
}
.section1{
    position: relative;
}


/*---------------------INTRO---------------------*/
/*---------------------SERVICES---------------------*/
#services {
  padding: 60px 0 40px 0;
  box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
     
}
#services{
    
    background-color:#b3c3c85c; 
}
.section-header{
    text-align: center;
    margin-bottom: 50px;
    font-weight: 600;
}
.section-header h3{
        font-size: 36px;
    color: #5eaad0;
    text-align: center;
    font-weight: 500;
}
#clntp{
    color: white;
}

#services .box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 10px 40px 10px;
  background: #fff;
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
  transition: all 0.3s ease-in-out;
}

#services .box:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

#services .title {
  margin-left: 30px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#services .title a {
  color: #111;
}

#services .box:hover .title a {
  color: #007bff;
}

#services .description {
  font-size: 14px;
  margin-left: 30px;
  line-height: 24px;
  margin-bottom: 0;
}

/*---------------------SERVICES---------------------*/
/*---------------------Solution Area---------------------*/
#sol {
    background-color: royalblue;
  text-align: center;
    color: black;
    font-size: 36px;
  margin-bottom: 16px;
}

.solution_inner {
  margin: 150px 0px;    
  color:darkcyan;;
}

.solution_inner h4 {
  font-size: 36px;
  margin-bottom: 16px;
}

.solution_inner p {
  font-size: 20px;
  
  max-width: 770px;
  margin: 0px auto 35px;
}
.button {
  background-color: lavender; 
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid darkcyan;
  border-radius: 50px;    
}

.button1:hover {
  background-color: darkcyan;
  color: red;
}
.button1 a:hover {
  background-color: darkcyan;
  color: black;
}
/*---------------------Solution Area---------------------*/
/*---------------------Client---------------------*/



#clients{
    background-color:#c7a9a34d;    
     padding: 60px 0;
  box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}


.client-logo {
    margin-bottom: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  height: 160px;
 
   
}

#clients .client-logo:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

#clients img 
{
	width: 200px;
	transition: all 0.4s ease-in-out;
	margin-left: 5px;
}
/*---------------------Clients ---------------------*/
/*---------------------Team ---------------------*/

#team {
  background: #fff;
  padding: 60px 0;
  
}

#team .member {
  text-align: center;
  margin-bottom: 66px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

#team .member .member-info {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s;
}

#team .member .member-info-content {
  margin-top: 50px;
  transition: margin 0.2s;
}

#team .member:hover .member-info {
  background: rgba(0, 62, 128, 0.7);
  opacity: 1;
  transition: 0.4s;
}

#team .member:hover .member-info-content {
  margin-top: 0;
  transition: margin 0.4s;
}

#team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
  color: #fff;
}

#team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #fff;
}
/*---------------------Team ---------------------*/
/*---------------------Footer ---------------------*/
#footer {
  color: #eee;
  font-size: 14px;
}

#footer .footer-top {
  background: #030303;
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 34px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  color: #fff;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#footer .footer-top .footer-info p {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;
  color: #ecf5ff;
}

#footer .footer-top h4 {
  
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 10px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul li {
  padding: 0px 28px;
}



#footer .footer-top .footer-links ul a {
  color: #ecf5ff;
}

#footer .footer-top .footer-links ul a:hover {
  color: #74b5fc;
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact p {
  line-height: 26px;
}
.footer-bottom{
	width: 100%;
	padding: 7px 0;
	text-align: center;
	color: #fff;
	background: #0f0f0fb3;
}

/*---------------------Footer ---------------------*/



/*---------------------Services Page ---------------------*/

.services {
	padding:50px;
}

.services h4 {
    margin-top: 50px;
	margin-bottom:30px;
	font-weight:800;
}
.services h3 {
    
    color: red;
    margin-top: 50px;
	margin-bottom:30px;
	font-weight:800;
}
.services img{
    margin-top: 50px;
    height: 200px;
    width: 500px;
}
.services p {
	font-size:17px;
    text-align:left;
    margin-top: 25px;
}

.media h4 {
	font-size:20px;
	font-weight:600;
	color:red;
}

.sub-services img{
    margin-bottom: 15px;
    height: 400px;
    width: 550px;
}
.sub-services p{
    margin-bottom: 20px;
}
.sub-services {
	padding:50px;
	background:#ddd;
}
.sub-services h3 {  
    color: red;  
	margin-bottom:30px;
	font-weight:800;
	margin-top: -5px;
}
.services2 {
	padding:50px;
}

.services2 h3 {
    color: red;  
	margin-bottom:30px;
	font-weight:800;
}
.services2 img{
    margin-top: 30px;
 
}

 hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px;
    border-top-color: rgb(238, 238, 238);
    border-top-style: solid;
    border-top-width: 1px;
    border-top: 1px solid #eee;
}
/*---------------------Services Page ---------------------*/   
/*---------------------Product Page ---------------------*/        
.products {
	padding:50px;
}

.products h4 {
    margin-top: 10px;
	margin-bottom:30px;
	font-weight:800;
}
.products h3 {
    
    color: red;
    margin-top: -5px;
	margin-bottom:30px;
	font-weight:800;
}
.products img{
    margin-top: 10px;
}
.products p {
	font-size:17px;
    text-align:left;
    margin-top: 25px;
	text-align: justify;
}  

/****************** Training*******************/
.courses {
	padding:50px;
}
.desgn{
    font-family: cursive;
    margin-top: 250px;
    font-weight: 500;
    font-size: 70px;
}
.desgn2{
  border-radius: 25px;
  padding: 15px; 
  font-family: cursive, sans-serif;
font-size: 50px;
letter-spacing: 2px;
word-spacing: 2px;
color: #000000;
    background: linear-gradient(to right, #ce593757 0%, #1c6ea42b 50%, #c5923729 100%);
}
.Detail{
  margin-top: 50px;
  text-align: center;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 20px;
}
.pricing-table{
    padding: 0px 0px 41px 0px;
    text-align: center;
   background-color: #004a999c;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #636C80;
    border-radius: 4px 4px 4px 4px;
   box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.55);
}
.price{    
  font-style: italic;
  font-family: Sans-serif;
    font-size: 40px;
    }
  .more-detail{
    font-weight: bold;
  }
  .more-detail p{
    color:#ffffff;
    margin-top: 30px;
  }
.pricing-table h3{
  font-weight: bold;
 color:#1A2849;
background-color:#334f6d9c;
 padding: 30px 0px 32px 0px;
}
.price{
  color:#1A2849;
}
.butn{
    background-color: #E64B5F;
    color: #FFFFFF;
    padding: 12px 32px 12px 32px;
    border-radius: 4px 4px 4px 4px;
}
a.butn:hover{color: black}
.new{
    margin-left: 213px;
    margin-bottom: 50px;
}
.modal-dialog{
  margin-top: 150px;
  width: 300px;
}
  

    
@media only screen and (min-width: 320px) and (max-width: 425px) {
  .media img {
    width: 200px;
    height: 119px;
  }
}        
@media only screen and (min-width: 320px) and (max-width: 425px) {
  .sub-services img {
    width: 200px;
    height: 119px;
  }
}    

@media only screen and (min-width: 320px) and (max-width: 425px) {
  .products img {
    width: 200px;
    height: 119px;
  }
}   
@media only screen and (min-width: 320px) and (max-width: 425px) {    
    .nav-tabs>li {
            margin-right: -46px;
    }
}
@media only screen and (min-width: 320px) and (max-width: 768px) {    
    .logo {
            margin-left: 0px;
    }
}

@media only screen and (max-width: 1920px) 
{    
    .slider-container img {
           height:500px;
		width:100%;
    }
}
@media only screen and (min-width: 320px) and (max-width: 644px)  
{    
    .slider-container img {
        height:200px;
		width:100%;
    }
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}