@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {  font-family: "Poppins", sans-serif;}
a {color: #1d1d1d; text-decoration:none;   font-family: "Poppins", sans-serif;}
h1, h2, h3, h4, h5, h6 {  font-family: "Poppins", sans-serif;}
p { color: #414141; font-size: 17px; margin: 0 0 10px 0; line-height: 1.6; letter-spacing: .3px; font-family: "Poppins", sans-serif;}

.ser-bx {background: #eee;width: 100%;border: #0030497d solid 2px;position: relative;z-index: 0;border-radius: 4px;margin:10px auto;transition:.5s;min-height: 484px;}
.ser-bx:hover .fa-chevron-right{animation: move 0.5s linear  alternate; }
 @keyframes move {
     49%{ transform: translate(0px); rotate: -35deg; opacity: 0;}
     51%{opacity: 1;transform: translate(-10px);rotate: -35deg;}
 }
.ser-bx .img {width: 100%; height: 240px;  display: block;}
.ser-bx .img .icon {width: 70px; height: 70px; background: #003049;  margin: 0 auto;  opacity: 0;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
.ser-bx .img-bx{padding:8px;}
.ser-bx .img-bx .fa{font-size: 35px; background: #003049; line-height: 80px; border-radius: 50%; width: 80px; height: 80px;  text-align: center; color:#eee;}
.ser-bx .text{ position: relative; padding:0 20px 20px; margin: 0 auto; text-align:justify; -moz-transition: all 0.3s ease;    -o-transition: all 0.3s ease;  -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;    -moz-box-shadow: 0px 15px 46px -16px rgba(0, 0, 0, 0.1);}

.ser-bx .text h3 {font-size: 16px; font-weight: 700; text-transform: uppercase; text-align:center; margin: 0; line-height: 40px;}
.ser-bx .text p {/* font-size: 15px; */}
.ser-bx .text p.rd-mr a{color:#000; font-weight:bold; line-height:30px;}
.ser-bx .text p.rd-mr .fa{color:#000; font-weight:bold; line-height:30px; width:40px; height:40px; line-height:40px; border-color:#003049 !important; transition:.3s;}
.ser-bx:hover p.rd-mr .fa{background:#003049; color:#eee;}

.heading{ text-align: center;}
.heading h2 { font-size: 40px; text-transform: uppercase; letter-spacing: 1px; position: relative; font-weight: 700; color: #3a3a3a; margin: 0 0 10px 0;}
.heading h2::after { position: absolute; content: ''; left: 0; right: 0; bottom: -14px; width: 130px; height: 1px; background: #1d1d1d; margin: 0 auto;}
.heading i { font-size: 32px; color: #3a3a3a;}

.banner-section { background-image: url(image/banner.jpg); background-size: cover; padding: 20% 0 15% 0;}
.banner-section h1 { text-align: center; color: #fff; font-size: 58px; margin: 0 0 20px 0; font-weight: 600; text-shadow: 3px 3px 3px #202020;}
.banner-section p { color: #fff; margin: 0; font-size: 21px; text-align: center; text-shadow: 3px 3px 3px #202020; margin: 0;}

.about-section { padding: 5% 0; background: #ececec;}

.service-section {padding: 5% 0;}
.service-section .ser-card { margin: 20px 0 0 0; padding: 10px;}
.service-section .ser-card .icon {background: #ddd;text-align: center;border: 1px solid #1d1d1d;margin: 0 0 15px 0;font-size: 34px;color: #3a3a3a;padding: 6px;}
.service-section .ser-card h5 { color: #3a3a3a; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; font-weight: 600;} 
.service-section .ser-card p { font-size: 15px; line-height: 1.5;}
.service-section .ser-card a { display: inline-block; background: #ddd; border: 1px solid #1d1d1d; margin: 0 0 15px 0; font-size: 14px; font-weight: 500; color: #1d1d1d; padding: 6px 20px;}

.contact-section {padding: 5% 0; background: #ececec;}
.contact-section .contact-form { background: #fff; padding: 30px;}
.contact-section .contact-form .form-control { margin: 0 0 5px 0; padding: 8px; border-radius: 0; font-size: 15px;}
.contact-section .contact-form label { text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: #303030; font-weight: 600;}
.contact-section .social-icon a{ display: inline-block; background: #757575; color: #fff; width: 35px; height: 35px; font-size: 14px; text-align: center; border-radius: 50%; line-height: 2.5; transition: all .2s ease-in-out; border: 1px solid #}
.contact-section .social-icon a:hover { background: #212121;}


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

footer { text-align: center; padding: 50px 0; background: #1d1d1d;}
footer p { color: #f8f8f8;}
.credits, .credits a { color: #fff;}

/* ===========================
--- Elements
============================ */
.btn-circle { width: 70px; height: 70px; margin-top: 15px; margin-bottom: 20px; padding: 7px 16px; border: 2px solid #fff; border-radius: 50%; font-size: 40px; color: #fff; background: 0 0; transition: background .3s ease-in-out;}
.btn-circle:hover,.btn-circle:focus { outline: 0; color: #fff; background: rgba(255,255,255,.1);}

.contact-info { background: #ddd; padding: 20px; margin: 10px 0;}
.contact-info i { color: #303030; font-size: 30px;}
.contact-info h5 {color: #1d1d1d; text-transform: uppercase; font-size: 18px; font-weight: 600;}
.contact-info p, .contact-info p a { color: #303030; margin: 0;}

@media (min-width: 320px) and ( max-width: 768px) {
    p { font-size: 15px}
    .banner-section { padding: 15% 0}
    .banner-section h1 { font-size: 32px;}
    .banner-section p { font-size: 16px;}
    
    .heading h2 { font-size: 27px;}
    .heading i { font-size: 25px; color: #3a3a3a;}
}

#ser_carousel .carousel-control-prev { height: 50px; background: #003049; width: 50px; border-radius: 50%; top:50%; }
#ser_carousel .carousel-control-prev .carousel-control-prev-icon{filter: brightness(1) contrast(1) !important;}
#ser_carousel .carousel-control-next { height: 50px; background: #003049; width: 50px; border-radius: 50%; top:50%; }
#ser_carousel .carousel-control-next .carousel-control-next-icon{filter: brightness(1) contrast(1) !important;}
#ser_carousel .carousel-inner{padding:4%;}

.button-52 {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 20px 13px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display:inline-block;
  color: #fff;
  z-index: 2;
}

.button-52:before {
  content: "";
  background-color: #1d1d1d;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}
.button-52:hover{color:#fff;}

.button-52:hover:before {
  top: 0px;
  left: 0px;
}

@media (min-width: 768px) {
  .button-52 {
    padding: 13px 50px 13px;
  }
}