*
{
    margin: 0;
    padding: 0;
}
@import '~mdb-ui-kit/css/mdb.min.css';

/*----about-----*/


#about 
{
    
    padding: 50px;
    padding-bottom: 50px;
    color: rgb(100, 116, 121);
    
    width: 90%;
    margin: 4% auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#about .btn
{
    margin-top: 20px;
    margin-bottom: 30px;
}


.about-content
{
padding-top: 20px;
}
#aside
{float: left;
    width: 400px;
   
   
	background-color:#FFE4C4;
	text-align: center;
}


.skills-bar  p
{      
    font-weight: 700;
    margin-bottom: 3px;
}    
.progress-bar
{
    border-radius: 16px;
}
.progress
{
    border-radius: 16px!important;

}
/*----services-----*/
#services
{
   
    background-image: linear-gradient(rgba(0,0,0,0,8),rgba(0,0,0,0,8)),url(images/butterflys.jpg);
    background-size: cover;
    background-position: center;
    color: #efefef!important;
    background-attachment: fixed;
    padding-top: 50px;
    padding-bottom: 50px;

}
#services h1
{
    text-align: center;
    color: #efefef!important;
    padding-bottom: 50px;
}
/*------get in touch--*/

#contact h1
{
    text-align: center;
   
    padding-bottom: 5px;
}
#contact
{
    
    background: #efefef;
    padding-top: 9px;
    padding-bottom: 9px;
    color: #777;
}
.contact-from
{
    padding: 30%;
}
.from-group
{
    border-radius: 0 !important;
    border: none !important;
}
::placeholder
{
    color: #999 !important;
}
.contact .col-md-3:hover
{
background: #007bff;
cursor: 0.7s;
}

* {
    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;
  }
  
  
  /* Contuner */


  /* Style the container/contact section */
  .containe {
    border-radius: 50px;
    background-color: #f2f2f2;
    padding: 20px;
  }

  /* Contuner */
  
 .hk
 {
     text-align: center;
 }
  /* Create two columns that float next to eachother */
  .column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
  }
  
  /* Clear floats after the columns */
  .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: 600px) {
    .column, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }
  article {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}


footer {
    display: flex;
    justify-content: center;
    padding: 5px;
    background-color: #45a1ff;
    color: #fff;
}

/***********************/

#team
{
    padding-top: 50px;
    padding-bottom: 50px;
    color: #555;
}
h1
{
    text-align: center;
    color: #555 !important;
    padding-bottom: 10px;
}
h1::after
{
    content: '';
    background: #007bff;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px;
}
.profile-pic
{
  margin-top: 25px;
}
.profile-pic  .imag-box
{
  opacity: 1;
  display: block;
  position: relative;
}
.profile-pic  .imag-box img
{
  filter: grayscale(1);
}
.profile-pic  .imag-box img:hover
{
  filter: grayscale(0);
  cursor: pointer;
}
.profile-pic h2
{
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
    color: #007bff !important;
}
.profile-pic h3
{
    font-size: 15px;
    font-weight: bold;
    margin-top: 15px;
    
}
#team  .fab
{
    height: 45px;
    width: 45px;
    color: #007bff !important;
    background: #fff;
    padding: 14px;
    border-radius: 50%;
}


.imag-box ul
{
    padding: 15px 0;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}
.imag-box ul li
{
padding: 5px;
display: inline-block;
}
.imag-box:hover ul
{
opacity: 1;
}
.imag-box ul, .imag-box ul li
{
transition: 0.5s;
}


    .row1
    {
        background: #e9e8e1;
        width: 90%;
        margin: 4% auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .col1
    {
        flex-basis: 25%;
        text-align: center;
        overflow: hidden;
        position: relative;
    }
    .col1 img
    {
        width: 100%;
        cursor: pointer;
        transition: 1s;
    }
    .col1 p
    {
        margin: 20px 0;
    }
    .social-link1 .fa
    {
        width: 35px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #000;
        margin: 0 7px;
        cursor: pointer;
        transition: transform .5s;
    
    }
    .social-link1 .fa:hover
    {
        background: #000;
        color: #ffe501;
        transform: translateY(-7px);
    }
    .social-link1 .fab
    {
        width: 35px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #000;
        margin: 0 7px;
        cursor: pointer;
        transition: transform .5s;
    
    }
    .social-link1 .fab:hover
    {
        background: #000;
        color: #ffe501;
        transform: translateY(-7px);
    }
    .social-link1 .fas
    {
        width: 35px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #000;
        margin: 0 7px;
        cursor: pointer;
        transition: transform .5s;
    
    }
    .social-link1 .fas:hover
    {
        background: #000;
        color: #ffe501;
        transform: translateY(-7px);
    }
    .col1:hover img
    {
        transform: scale(1.1);
    }
    .col1 span 
    {
        width: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 15px solid #e6e5e0;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 2;
    }
    .col1 .arrow
    {
        right: unset;
        left: 0;
    border-left: 15px solid #ecece6;
    border-right: 15px solid transparent;
    }











   /*
  =========================================================================================
                                    footer
  =========================================================================================
  */
   /*
  =========================================================================================
                                    footer
  =========================================================================================
  */
.round-btn {display: inline;height: 40px; width: 40px; background:#fff;border-radius: 50%;float: left;margin: 15px 8px;box-shadow: 2px 2px 5px 0px rgb(82, 0, 67);border: 1px solid;/*border: 1px solid #622657;*/}
.round-btn a {display: block !important;padding: 7px 12px;font-size: 18px;border-radius: 50%;}
.round-btn .icon {padding: 3px;}
.round-btn .icon img{height: 24px; width: 32px;margin-top: 6px;}
.btn-facebook a {color: #3b5998;padding: 8px 13px;}
.btn-linkedin a {color: #007bb6;}
.btn-twitter a{color: #1c9deb;}
.btn-instagram a{color: #dd3f5c;}
.btn-whatsapp a{color: #155E54;}
.btn-envelop a{color: #D6403A;font-size: 15px; padding: 9px 12px;}
.standard_header .standard_social_links {margin-left: 1rem;}

  /*
  =========================================================================================
                                    footer
  =========================================================================================
  */
  
  .footer-wrap {
    padding-top: 43px;
    background-size: cover;
}

.footer-wrap h3 {
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.footer-wrap p {
    font-size: 13px;
    line-height: 24px;
    color: #b3b3b3;
    margin-top: 15px;
}

.footer-wrap p a {
    color: #fff;
    text-decoration: underline;
    font-style: italic;
}

.footer-wrap p a:hover {
    text-decoration: none;
    color: #ff7800;
}

.footer-links li a {
    font-size: 13px;
    line-height: 30px;
    color: #ccc;
    text-decoration: none;
}


.footer-links li:before {
    content: "\f105";
    font-family: 'FontAwesome';
    padding-right: 10px;
    color: #ccc;
}

.footer-category li a {
    font-size: 13px;
    line-height: 30px;
    color: #ccc;
    text-decoration: none;
}

.footer-category li:before {
    content: "\f105";
    font-family: 'FontAwesome';
    padding-right: 10px;
    color: #b3b3b3;
}

.address {
    
    color: #b3b3b3;
    font-size: 14px;
    position: relative;
    padding-left: 30px;
    line-height: 30px;
}

.address:before {
    content: "\f277";
    font-family: 'FontAwesome';
    position: absolute;
    top: 0;
    left: 0;
}

.info a {
 
    color: #b3b3b3;
    font-size: 14px;
    line-height: 30px;
    font-weight: normal;
}

.fa-phone:before {
    content: "\f095";
}

.info a {

    color: #b3b3b3;
    font-size: 14px;
    line-height: 30px;
    font-weight: normal;
}

.fa-fax:before {
    content: "\f1ac";
}

.copyright {
    border-top: 1px solid #111;
    font-size: 14px;
    color: #ccc;
    padding-top: 15px;
    text-align: center;
    padding-bottom: 15px;
    background: #222;
}
footer .second_class{
    border-bottom: 1px solid #444;
    padding-bottom: 25px;
}
footer .first_class {
    padding-bottom: 21px;
    border-bottom: 1px solid #444;
}
footer .first_class p, footer .first_class h3{
    margin: 0 0;
    
}
footer{
    background: #333;
}

footer .newsletter input[type="text"] {
    width: 100%;
    background: #fff;
    color: #333;
    border: 1px solid #222;
    padding: 14px 20px;
    border-radius: 50px;
    margin-top: 12px;
}

.newsletter .newsletter_submit_btn {
    background: #fff;
    position: absolute;
    right: 30px;
    border: 0;
    top: 26px;
    font-size: 17px;
    color: #333;
}


footer .second_class_bdr{
    padding-top: 25px;
    border-top:1px solid #222;
}

footer .btn-facebook a {
    padding: 6px 14px !important;
}

footer .btn-envelop a {
    color: #D6403A;
    font-size: 15px;
    padding: 12px 12px;
}

footer .round-btn a {
    padding: 6px 12px;
}

footer .round-btn {
    box-shadow: 2px 2px 5px 0px #222 !important;}

footer .round-btn {
    margin: 15px 4px;}
  
footer dl, ol, ul {
    padding-left: 5px;
}
  footer li{
    list-style: none;
  }

@media(max-width:768px){
    .footer-wrap h3 {
    margin-top: 27px;}
    
    footer .round-btn {
    margin: 15px 4px;}
}
@media(max-width:320px){
.copyright {
    font-size: 13px;}
} 
/*_____________________________*/
h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */
  
  .slick-slide {
      margin: 0px 20px;
  }
  
  .slick-slide img {
      width: 100%;
  }
  
  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
  
  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
  
  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }
  
  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }