html { scroll-behavior: smooth; } 
/*navigation start*/

h1, h2, h3 {
  font-weight: bold;
}

.fixd{
  padding-top: 13px;
  background-color: #ffffff;
}

.logo{
  float: left;
  padding-left: 10px;
  width: 110px;
  height: ;
  margin-left: 10px;
}

@media screen and (max-width: 600px) {
  .logo{
  right: 50%;
  padding-left: 0px;
  width: 120px;
  margin-bottom: 2px;
}
}

.navtop{
  text-align: center;
  padding-bottom: ;
}


/*new navbar start*/

.my-nav{
  background-color: transparent;
}

/*new navbar end*/




/* Add a black background color to the top navigation */
.topnav {
  /*background-color: #F0F8FF;*/
  /*background-color: #2c292f;*/
  /*background-color: transparent;*/
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  /*margin-top: 20px;*/
  padding-left: 33%;
  /*position: absolute;*/
  right: 0px;
  width: 100%;
  top:0px;
  /*margin-top: -70px;*/
  top: 0;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  /*margin-top: 30px;*/
  margin-right: 7px;

}

@media screen and (max-width: 800px) {
  .topnav {
  padding-left: 18%;
}
}

.topnav-top {
  /*background-color: #f1f1f1;*/
  background-color: #ffffff;
  overflow: hidden;
  /*margin-top: 20px;*/
  /*position: fixed;*/
}

/* Change the color of links on hover */
.topnav a:hover {
  /*background-color: #ddd;*/
  color: #6495ED;
  /*font-size: 21px;*/
  transition-duration:0.1s;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: transparent;
  color: #6495ED;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    color: black;
    font-size: 30px;
    padding: 14px 16px;
  }
  .topnav a{
    font-size: 17px;
    color: black;
    padding: 4px 16px;
    float: left;
  }
  .topnav {
    background-color: #ffffff;
    text-align: center;
  }
}


/* 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 screen and (max-width: 750px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive a.active {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a.active {
    float: left;
    /*display: none;*/
    text-align: left;
  }

  /*.logo{
    display: none;
    text-align: center
  }*/
}

/*navigation end*/


/*home slider start*/
  * {box-sizing:border-box}

/* Slideshow container */

.slimg{
  height: 450px;
  opacity: .9;
  /*border-Ftextius: 15px; */
}

@media screen and (max-width: 650px) {
  .slimg{
  height: 50%;
}
}

.slideshow-container {
  /*max-width: 1000px;*/

  width: 100%;
  position: relative;
  margin: auto;
  /*margin-top: 10px;*/
}

/* Hide the images by default */
.mySlides {
  display: block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  /*color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;*/
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;

}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 6s;
  animation-name: fade;
  animation-duration: 6s;
}

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

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



.content1 {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.4); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 20px; /* Some padding */
  text-align: center;
}



@media screen and (max-width: 600px) {
  .content1 h1{
    font-size: 20px;

}

.content1 p{
    font-size: 12px;
    
}

}

/*.content2 {
  position: absolute; 
  top: 0; 
  background: rgb(0, 0, 0); 
  background: rgba(0, 0, 0, 0.7); 
  color: #f1f1f1; 
  width: 20%;
  height:73.5%;
  padding: 20px;
  right: 0px; 
  text-align: center;
}*/


/*home slider end*/


/*tab content*/

/*tab contnent end*/


/*footer*/
.footer {
/*  position: fixed;*/
  height: 100px;
  left: 0;
  bottom: 0;
  width: 100%;
  /*background-color: #628fe0;*/  /*a7c5fb  07709f*/
  /*background-color: #2e302e;*/
  background-color: #001437;
  color: white;
  text-align: left;
  padding-top: 20px;
   
}


@media screen and (max-width: 600px) {
  .footer{
  height: 250px;
}

.social i{
  float: left;
}

}

.social i {
  width: 20px;
  height: 20px;
  margin-top: 9px;
  margin-right: 20px;
  float: right;
  color: #ffffff;
  /*background-color: red;*/
}

.social i:hover{
  color: #25488a ;
}

.copyright{
  font-size: 17px;
  margin-top: 5px;
  margin-left: 20px;
}


/*news page start*/


/* Dropdown Button */
.dropbtn {
  background-color: #ddd;
  color: black;
  padding: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-right: 50px;
  margin-top: 10px;
  width: auto;
  border-radius: 10px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  /*padding-left: 10px;*/
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  /*padding-right: 20px;*/
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  left: 50px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


.create-post{
  margin-left: 180px;
  margin-right: 180px;
}

@media screen and (max-width: 900px) {
  .create-post{
    margin: 0px;
    }
}

.news-form{
  padding:20px;border:1px solid black;border-radius:10px; width:30%;
}

@media screen and (max-width: 1000px) {
  .news-form{
   width:70%;
}
}

@media screen and (max-width: 800px) {
  .news-form{
   width:100%;
}
}

.post-card {
  background-color: white;
  padding: 20px;
  /*margin-top: 20px;*/
  margin: 20px;
  border: 1px solid black;
  border-radius: 10px;
}

.card-text{
  border:1px solid red;
  width: 100%;
  padding-right: 5px;
}

.pimg{
  width: auto;
  max-width: 915px;
  height: 400px;
  /*margin-right: 10px;*/
/*  max-height: 900px;*/
border:1px solid #ddd; margin:20px; margin-left:-1px;
}

@media screen and (max-width: 1300px) {
  .pimg{
  max-width: 845px;
  height: 400px;
    }
}

@media screen and (max-width: 1200px) {
  .pimg{
  max-width: 780px;
  height: 350px;
    }
}

@media screen and (max-width: 1100px) {
  .pimg{
  max-width: 650px;
  height: 350px;
    }
}


@media screen and (max-width: 1000px) {
  .pimg{
  max-width: 550px;
  height: 350px;
    }
}



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


/*@media screen and (max-width: 600px) {
  .pimg{
  width: 100%;
  height: 300px;
    }
}
*/


.post-name{
  border:1px solid #ddd; width:100%; height:50px; font-size:20px;
}

.post-description{
  border: 1px solid #ddd ; width:100%; height:200px; font-size:16px;
}

.save-btn{
  width: 100px;
  height: 50px;
  border:1px solid green; 
  border-radius: 10px;
  transition:.2s;
  background-color: #F0FFFF;
  font-size: 26px;
  float: right;
  color: green;
}

.cancel-btn{
  width: 100px;
  height: 50px;
  border:1px solid red; 
  border-radius: 10px;
  transition:.2s;
  background-color: #FFF0F5;
  font-size: 26px;
  float: left;
  color: red;
}

.cancel-btn:hover{
  background-color: red;
  color: white;
}

.save-btn:hover{
  background-color: green;
  color: white;
}


.msg-red{
  font-size: 20px;
  color: red;
  text-align: center;
  border: 1px solid red;
  border-radius: 10px;
  background-color: #FFEBCD;
}

.msg-green{
  font-size: 20px;
  color: green;
  text-align: center;
  border: 1px solid green;
  border-radius: 10px;
  background-color: #F0F8FF;
}

* {box-sizing: border-box}

/* Set a style for all buttons */
.delete-btn {
  /*background-color: #FFF0F5;*/
  background-color: none;
  color: red;
  /*padding: 10px 10px;*/
  /*margin: 8px 0;*/
  /*border: 1.5px solid red;*/
  border: none;
  cursor: pointer;
  /*width: 5%;*/
  opacity: 0.9;
  float: right;
  font-size: 20px;
 /* border-radius: 90px;*/
}

.popular{
margin-right: 20px;
background-color: none;
color: blue;
border: none;
cursor: pointer;
opacity: 0.9;
float: right;
font-size: 20px;
}

button:hover {
  opacity:1;
}

/* Float cancel and delete buttons and add an equal width */
.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}

/* Add a color to the cancel button */
.cancelbtn {
  background-color: #ccc;
  color: black;
}

/* Add a color to the delete button */
.deletebtn {
  background-color: #f44336;
}

/* Add padding and center-align text to the container */
.post-container {
  padding: 16px;
  text-align: center;
  width: 100%;
}

/* The Modal (background) */
.post-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: ;*/
  padding-top: 50px;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  padding-right: 10px;
  padding-right: 10px;
}


/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 26px;
  /*height: 20px;*/
  padding-left:9px;
  color: red;
  border:1px solid red;
  border-radius: 90px;
  margin-left: 20px;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 7px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* The Modal Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 480px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
  .modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto;
  margin-right:  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

.modal-content h1{
    font-size: 20px;
}

.modal-content 0{
    font-size: 15px;
}

}

body {
  /*padding: 20px;*/
  /*background: #f1f1f1;*/
  /*font-family: Amaranth;*/
  font-family: arial;
  /*padding: 2px;*/
  /*background: #ecf0f2;*/
  /*background: #f8f9fb;*/
  /*background-color: #F5F5F5;*/
  background-color: #ffffff;
}


.full {
  padding: 20px;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  /*font-size: 40px;*/
  /*text-align: center;*/
  background: white;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 90%;
  /*padding: 1px;*/
padding-left: 110px;
}

/* Rigt column */
.rightcolumn {
  float: left;
  width: 10%;
  padding-left: 5px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
/*.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}*/

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/*news page end*/



/*contact page start*/

    * {
  box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: none;
  border-radius: 10px;
}

input[type=submit] {
  background-color: #5f93ee;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Style the container/contact section */
.contact-container {
  border-radius: 5px;
  background-color: #ffffff;
  padding: 10px;
}

/* Create two columns that float next to eachother */
.contact-column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.contact-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .contact-column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

/*contact page end*/


/*service page start*/

.textbox1{
    width: 70%;
    float: left;
    padding: 20px;

}

.textbox2{
    width: 30%;
    float: left;
    text-align: left;
    padding:20px;
    /*background-color: #c3f8c0;*/ 
    background-color: #c3f8c0;
    border-radius: 10px;
} 


@media screen and (max-width: 900px) {
  .textbox1{
    width: 60%;
    

}

.textbox2{
    width: 40%;
    
}

}

@media screen and (max-width: 700px) {
  .textbox1{
    width: 100%;
    

}

.textbox2{
    width: 100%;
    
}

}


.service-img{
  /*margin-left: 50px;
  margin-right: 50px;*/
  width: 80%;
  /*height: 80%;*/
  /*position: static;*/
}


@media screen and (max-width: 1100px) {
  .service-img{
    width: 70%;
   /* height: 70%;*/
  }
}

@media screen and (max-width: 900px) {
  .service-img{
    width: 100%;
    /*height: 60%;*/
  }
}

@media screen and (max-width: 600px) {
  .service-img{
    width: 100%;
    /*height: 50%;*/
  }
}




.se-container{
  padding:10px;
 /* background-color: red;*/
  

}
      /* Create four equal columns that floats next to each other */
.se-column {
  float: left;
  width: 24%;
  /*height: 50%;*/
  background-color: #a8fba3;
  margin: 5px;
  /*margin-top: 80px;*/
  /*text-align: left;*/
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 20px;
}

.se-column-tag {
  float: left;
  width: 100%;
  /*height: 50%;*/
  /*background-color: #a8fba3;*/
  margin: 5px;
  /*margin-top: 80px;*/
  /*text-align: left;*/
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  color: #ffffff;
}

.one{
  background-color: #4472c4;
}

.two{
  background-color: #43beb9;
}

.three{
  background-color: #45b664;
}

.four{
  background-color: #70ad47;
}


.se-column:hover{
  background-color: #85fa7e;
  transition-duration: 0.3s;
}

.se-column-full{
  text-align: left;
  float: left;
  width: 100%;
  /*height: 40%;*/
  /*background-color: gray;*/
  
  padding-bottom: 20px;
}

.se-column-half{
  text-align: left;
  float: left;
  width: 50%;
  /*height: 40%;*/
  /*padding-top: 20px;*/
  /*padding-bottom: 20px;*/
  /*border: 1px solid black;*/
  padding: 10px;
}

.text-box-blue{
  background-color: #90EE90;
  /*color: #ffffff;*/
  margin-right: 0px;
  margin-top: 20px;
  padding: 25px 10px 25px 23px;
  /*border: 4px solid #90EE90;
  border-radius: 5px;*/
/*  box-shadow: -6px 0px 8px 0px #90EE90;*/
}

.text-box-blue h3{
  /*color: #ffffff;*/
  font-weight: bold;
}

/*.text-box-blue {
  color: #ffffff;
}*/


.key-services{
  padding: 20px;
  background-color: #ffffff;
  margin-top: 10px;
  padding-left: 50px;
}

.home-header{
  text-align: left;
  float: left;
  width: 97%;
  padding-top: 20px;
  padding-left: 30px;
  padding-left: 30px;
  /*border: 4px solid #1E90FF;*/
  margin: 30px 50px 30px 20px;
  /*box-shadow: -6px 0px 8px 0px #90EE90;*/

}

.home-header h1{
  font-weight: bold;
}

/*.home-header h2{
  color: #1E90FF;
}*/

.se-column-1{
  text-align: left;
  float: left;
  width: 60%;
  /*height: 40%;*/
  padding-top: 20px;
  /*padding-bottom: 20px;*/
  /*border: 1px solid black;*/
  padding: 10px;
  padding-left: 30px;
}

.se-column-2{
  text-align: left;
  float: left;
  width: 40%;
  /*height: 40%;*/
  /*padding-top: 20px;*/
  /*padding-bottom: 20px;*/
  /*border: 1px solid black;*/
  /*padding: 10px;*/
  padding-right: 30px;
}

.se-column-3{
  text-align: right;
  float: left;
  width: 35%;
  /*height: 40%;*/
  /*padding-top: 20px;*/
  /*padding-bottom: 20px;*/
  /*border: 1px solid black;*/
  padding: 10px;
}

.se-column-half-half{
  text-align: left;
  float: left;
  width: 25%;
  /*height: 40%;*/
  /*padding-top: 20px;*/
  /*padding-bottom: 20px;*/
  /*border: 1px solid black;*/
  padding: 10px;
}

/* Clear floats */
.se-row:after {
  content: "";
  display: table;
   clear: both;
   /*margin-bottom: 50px;*/
}

.line{
  height: 6px;
  width: 100%;
  background-color: #90EE90;
 /* margin-bottom: 40px;*/
  /*margin-top: 40px;*/
  border-radius: 10px;
}

.service-box{
  padding: 20px 30px 20px 40px;
  text-align: center;
  margin-top: 20px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/*@media screen and (max-width: 1200px) {
  .se-column {
    width: 32%;
    margin-bottom: 10px;
  }
}
*/
/*@media screen and (max-width: 1200px) {
  .se-column-tag {
    width: 48%;
    margin-bottom: 5px;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .se-column-tag {
    width: 100%;
    margin-bottom: 2px;
  }
  .se-column-half {
    width: 100%;
  }

  .se-column-1{
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
    padding-left: 0px;
  }

  .se-column-2{
    width: 50%;
    text-align: center;
  }

  .home-header{
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
    padding-left: 0px;
    margin-left: 0px;
  }

  .service-box{
  padding: 10px;
  text-align: center;
  margin-top: 20px;
}

}


@media screen and (max-width: 600px) {
  .se-column-tag {
    width: 100%;
    margin-bottom: 2px;
  }
  .se-column-half {
    width: 100%;
  }

  .se-column-1{
    width: 100%;
    margin-bottom: 40px;
  }

  .se-column-2{
    width: 100%;
    margin-bottom: 40px;
  }

}
/*service page end*/



/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  /*color: #ffffff;*/
  cursor: pointer;
  padding: 12px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
 /* transition: 0.4s;*/
  font-size: 18px;
  margin-bottom: 10px;
  /*border-radius: 10px;*/
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion:hover {
  opacity: .7;
}
.active{
  background-color: none;
}

/* Style the accordion panel. Note: hidden by default */
/*.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
*/

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


.accordion:after {
  /*content: '\02795';*/ /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  /*color: #777;*/
  float: right;
  margin-left: 5px;
}

.active:after {
  /*content: "\2796";*/ /* Unicode character for "minus" sign (-) */
}

/*scroll top btn*/
    #myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555 ; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  /*padding: 5px;*/ /* Some padding */
  /*border-radius: 90px;*/ /* Rounded corners */
  font-size: 22px; 
  /* Increase font size */
  opacity: .6;
  width: 50px;
  height: 50px;
}



@media screen and (max-width: 600px) {
  #mybtn {
    font-size: 18px;
     width: 35px;
  height: 35px;
  }

}

#myBtn:hover {
  background-color: #ddd; /* Add a dark-grey background on hover */
}
/*scroll top btn end*/

.team-card{
    width: 20%;
}

.team-img{
  width: 50%;
}

.team-details{
  width: 50%
}


.contactds{
  margin-top: 20px;
  /*margin-left: 83px;*/
  text-align: center;
}


/* Style the icon bar links */
.icon-bar a {
  /*display: block;*/
  float: left;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 18px;
  border-radius: 10px;
  margin-right: 10px;
  margin-top:20px;
  width: 50px;
  opacity: .8;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.icon-bar {
 opacity: .8;
}


.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.instagram {
  background: #d429df;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}


/*social bar end*/


/*new footer start*/

  footer{
  position: fixed;
  bottom: 0;
}
 
@media (max-height:800px){
  footer { position: static; }
  header { padding-top:40px; }
}
 
 
.footer-distributed{
  background-color: #2c292f;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px sans-serif;
  padding: 50px 50px 60px 50px;
  margin-top: 80px;
}
 
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
  display: inline-block;
  vertical-align: top;
}
 
/* Footer left */
 
.footer-distributed .footer-left{
  width: 30%;
}
 
.footer-distributed h3{
  color:  #ffffff;
  font: normal 36px 'Cookie';
  margin: 0;
}
 
/* The company logo */
 
.footer-distributed .footer-left img{
  width: 30%;
}
 
.footer-distributed h3 span{
  color:  #e0ac1c;
}
 
/* Footer links */
 
.footer-distributed .footer-links{
  color:  #ffffff;
  margin: 20px 0 12px;
}
 
.footer-distributed .footer-links a{
  display:inline-block;
  line-height: 1.8;
  text-decoration: none;
  color:  #4169E1;

}
 
.footer-distributed .footer-company-name{
  color:  #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}
 
/* Footer Center */
 
.footer-distributed .footer-center{
  width: 35%;
}
 
 
.footer-distributed .footer-center i{
  /*background-color:  #33383b;*/
  color: #4169E1;
  font-size: 25px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 15px 15px;
  vertical-align: middle;
}
 
.footer-distributed .footer-center i.fa-envelope{
  font-size: 17px;
  line-height: 38px;
}
 
.footer-distributed .footer-center p{
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin:0;
}
 
.footer-distributed .footer-center p span{
  display:block;
  font-weight: normal;
  font-size:14px;
  line-height:2;
}
 
.footer-distributed .footer-center p a{
  color:  #e0ac1c;
  text-decoration: none;;
}
 
 
/* Footer Right */
 
.footer-distributed .footer-right{
  width: 30%;
}
 
.footer-distributed .footer-company-about{
  line-height: 20px;
  color:  #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}
 
.footer-distributed .footer-company-about span{
  display: block;
  color:  #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
 
.footer-distributed .footer-icons{
  margin-top: 25px;
}
 
.footer-distributed .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  /*background-color:  #33383b;*/
  border-radius: 2px;
 
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
 
  margin-right: 3px;
  margin-bottom: 5px;
}

.footer-icons i{
  color: #4169E1;
}
 
/* Here is the code for Responsive Footer */
/* You can remove below code if you don't want Footer to be responsive */
 
 
@media (max-width: 880px) {
 
  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right{
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }
 
  .footer-distributed .footer-center i{
    margin-left: 0;
  }
 
}

/*new footer end*/



/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar-h {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 40px;
  opacity: .7;
  display: none;

}

/* Style the icon bar links */
.icon-bar-h a {
  margin-bottom: 10px;
  border-radius: 10px;
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar-h a:hover {
  background-color: #000;
}

@media (max-width: 800px) {
 
  .icon-bar-h{
    right: 5px;
    opacity: .5;
    font-size: 12px;
  }
 
}