@font-face {
  font-family: "Roboto-Regular";

  src: url("../fonts/Roboto-Regular.ttf");

  src: url("../fonts/Roboto-Regular.ttf") format("embedded-opentype"),
    url("../fonts/Roboto-Regular.ttf") format("woff2"),
    url("../fonts/Roboto-Regular.ttf") format("woff"),
    url("../fonts/Roboto-Regular.ttf") format("truetype");
}

html,
body {
  height: 100%;
}

body {
  overflow: scroll;

  overflow-x: hidden;

  overflow-y: auto;
}

.summernote-content,
.summernote-content * {
  font-family: "Roboto-Regular", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p,
.p {
  font-family: "FontsFree-Net-AvenirLTStd-Book", arial;

  /* color:#F8F9FA; */

  font-weight: normal;
}

h1,
.h1 {
  font-size: 24pt;
}

h2,
.h2 {
  font-size: 22pt;
}

h3,
.h3 {
  font-size: 20pt;
}

h4,
.h4 {
  font-size: 18pt;
}

h5,
.h5 {
  font-size: 16pt;
}

h6,
.h6 {
  font-size: 14pt;
}

body,
p,
.p {
  font-size: 12pt;
}

small,
.small {
  font-size: 10pt;
}

b,
strong,
.font-weight-bold {
  font-family: "FontsFree-Net-greycliff-cf-bold", arial;
}

.fa {
  min-width: 20px;

  text-align: center;

  display: inline-block;
}

.btn .fa {
  min-width: auto;
}

.text-overflow-1,
.text-overflow-2,
.text-overflow-3,
.text-overflow-4,
.text-overflow-5,
.text-overflow-6,
.text-overflow-7,
.text-overflow-8,
.text-overflow-9,
.text-overflow-10,
.text-xl-overflow-1,
.text-xl-overflow-2,
.text-xl-overflow-3,
.text-xl-overflow-4,
.text-xl-overflow-5,
.text-xl-overflow-6,
.text-xl-overflow-7,
.text-xl-overflow-8,
.text-xl-overflow-9,
.text-xl-overflow-10,
.text-lg-overflow-1,
.text-lg-overflow-2,
.text-lg-overflow-3,
.text-lg-overflow-4,
.text-lg-overflow-5,
.text-lg-overflow-6,
.text-lg-overflow-7,
.text-lg-overflow-8,
.text-lg-overflow-9,
.text-lg-overflow-10,
.text-md-overflow-1,
.text-md-overflow-2,
.text-md-overflow-3,
.text-md-overflow-4,
.text-md-overflow-5,
.text-md-overflow-6,
.text-md-overflow-7,
.text-md-overflow-8,
.text-md-overflow-9,
.text-md-overflow-10,
.text-sm-overflow-1,
.text-sm-overflow-2,
.text-sm-overflow-3,
.text-sm-overflow-4,
.text-sm-overflow-5,
.text-sm-overflow-6,
.text-sm-overflow-7,
.text-sm-overflow-8,
.text-sm-overflow-9,
.text-sm-overflow-10 {
  display: block;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;
}

.text-overflow-1 {
  -webkit-line-clamp: 1;
}

.text-overflow-2 {
  -webkit-line-clamp: 2;
}

.text-overflow-3 {
  -webkit-line-clamp: 3;
}

.text-overflow-4 {
  -webkit-line-clamp: 4;
}

.text-overflow-5 {
  -webkit-line-clamp: 5;
}

.text-overflow-6 {
  -webkit-line-clamp: 6;
}

.text-overflow-7 {
  -webkit-line-clamp: 7;
}

.text-overflow-8 {
  -webkit-line-clamp: 8;
}

.text-overflow-9 {
  -webkit-line-clamp: 9;
}

.text-overflow-10 {
  -webkit-line-clamp: 10;
}

.btn,
a,
button,
input[type="submit"],
input[type="button"] {
  cursor: pointer !important;

  text-decoration: none !important;
}

.btn-outline-blue {
  color: #cdac23;

  border: 1px solid #cdac23;
}

.btn-outline-blue:hover {
  color: #fff;

  background: #cdac23;
}

ul li {
  list-style: none;
}

.btn-blue,
.btn-danger,
.btn-warning,
.btn-primary,
.btn-info,
.btn-seondary,
.btn-light,
.btn-dark,
.btn-outline-blue,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-primary,
.btn-outline-info,
.btn-outline-seondary,
.btn-outline-light,
.btn-outline-dark {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

  transition: all 0.3s easc;
}

.btn-blue:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-primary:hover,
.btn-info:hover,
.btn-seondary:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-outline-blue:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-seondary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.white-space-nowrap {
  white-space: nowrap;
}

.white-space-normal {
  white-space: normal;
}

.bg_nav {
  background-color: #2e3192;
}

.bg-blue {
  background-color: #2e3192;
}

.bg-transparent {
  background-color: transparent;
}

.hidden-overfolw {
  overflow: hidden;
}

.custom-rounded {
  border-radius: 5px !important;

  overflow: hidden;
}

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

/* OFF-CANVAS */

body.offcanvas-active {
  overflow: hidden;
}

.offcanvas-header {
  display: none;
}

/* GENERAL-CSS */

.btn:focus {
  box-shadow: none;
}

.form-control:focus {
  box-shadow: none;
}

.blank-img {
  max-width: 100%;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
p {
  font-family: "Roboto-Regular";
}

.uc-m-auto {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

/* RIGHT-BAR */

.right-bar {
  position: fixed;
  right: 0px;
  top: 25%;
  width: 45px;
  z-index: 9999;
}

.right-bar ul {
  padding: 0px;
}

.right-bar ul li {
  display: block;
}

.right-bar ul li a {
  float: right;
  margin-bottom: 5px;
  border-radius: 5px 0px 0px 5px;
}

.right-bar ul li a.facebook {
  background: rgb(23, 115, 234);
}

.right-bar ul li a.instagram {
  background: rgb(225, 48, 108);
}

.right-bar ul li a.tiktok {
  background: rgb(0, 0, 0);
}

.right-bar ul li a.youtube {
  background: rgb(255, 0, 0);
}

.right-bar ul li a.linkedin {
  background: rgb(0, 119, 181);
}

.right-bar ul li a.twitter {
  background: rgb(93, 169, 221);
}

.right-bar ul li a.podcast {
  background: rgb(0, 79, 197);
}

.right-bar ul li a > span {
  color: rgb(255, 255, 255);
  float: left;
  white-space: nowrap;
  font-size: 11px;
  height: 43px;
  line-height: 43px;
  width: 43px;
  transition: all 0.5s ease 0s;
  overflow: hidden;
}

.right-bar ul li a > span i.fa {
  width: 43px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  font-size: 20px;
  float: left;
  position: relative;
  margin-right: 10px;
  border-radius: 5px 0px 0px 5px;
}

.right-bar ul li a > span i.fa::after {
  content: "";
  background: rgb(255, 255, 255);
  height: 19px;
  width: 1px;
  position: absolute;
  right: -1px;
  top: 12px;
}

.right-bar ul li a > span span.social-text {
  height: 43px;
  line-height: 43px;
  float: left;
  width: 0px;
}

.right-bar ul li a:hover > span {
  width: 160px;
}

/* NAV-BAR */

.footer a img,
nav .navbar-brand img {
  max-width: 200px;
}

nav .navbar-collapse {
  padding: 7px 0px;
}

nav .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: #000;

  font-size: 16px;

  position: relative;

  text-decoration: none;

  display: inline-block;

  padding: 0px;

  font-family: "Roboto-Regular";

  transition: all 0.3s;
}

.btn-close {
  background: none;

  color: #fff;
}

.btn-close:hover {
  color: #00ffff;
}

/* BANNER */

.banner {
  background-image: url("../images/banner.jpg");

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;
}

.banner-2 {
}

.banner .banner-padding {
  padding: 90px 0px;
}

.nosotros-page form input.form-control,
.banner form input.form-control {
  border: 0px;

  padding: 0px;

  margin-bottom: 25px;

  border-radius: 0px;

  border-bottom: 1px solid #fff;
}

.nosotros-page form textarea.form-control:focus,
.banner form textarea.form-control:focus,
.nosotros-page form input.form-control:focus,
.banner form input.form-control:focus {
  border-color: #00ffff;
}

.nosotros-page form textarea.form-control,
.banner form textarea.form-control {
  border-radius: 5px;

  border-top: 0px;

  border-right: 0px;
}

.nosotros-page h3,
.nosotros-page form label,
.nosotros-page form input.form-control,
.nosotros-page form textarea.form-control,
.banner h3,
.banner form label,
.banner form input.form-control,
.banner form textarea.form-control {
  color: #fff;

  background: 0px;

  font-family: "Roboto-Regular";
}

.nosotros-page form input::placeholder,
.banner form input::placeholder,
.nosotros-page form textarea::placeholder,
.banner form textarea::placeholder {
  color: #fff;

  opacity: 0.7;
}

.nosotros-page .box-tinsel,
.banner .box-tinsel {
  /* border:1px solid #1B3D9E; */

  border-radius: 5px;

  background-color: #2e3192;

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* SECTION-GENERAL-CSS */

.section-padding {
  padding: 50px 0px;
}

.section-title {
  max-width: 400px;

  padding-bottom: 30px;

  margin: auto;

  color: #2e3192;
}

/* MEDIA-SECTION */

.media-section .media-frames iframe {
  border: 1px solid grey;
}

.media-section .box {
  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 300px;

  margin-top: auto;
}

.media-section .box .media .media-body h4 {
  color: #2e3192;
}

.media-section .box .media .media-body h4,
.media-section .box .media .media-body p {
  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;
}

/* BLOG */

.blog-tab .blog-tab-control {
  margin: 50px 0px;

  text-align: center;
}

.blog-tab .blog-tab-control button {
  position: relative;

  overflow: hidden;
}

.blog-tab .blog-tab-control button:focus {
  background: #2e3192;

  border-color: #2e3192;
}

.blog-tab .blog-tab-control button:after {
  content: "";

  width: 100%;

  height: 100%;

  position: absolute;

  left: auto;

  top: 0px;

  bottom: 0px;

  right: -100%;

  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0)
  );
}

.blog-tab .blog-tab-control button:hover:after {
  transition: all 0.3s linear;

  right: 100%;
}

#Grid .mix {
  opacity: 0;

  display: none;

  margin-bottom: 50px;
}

/* blog posts start */

.mixitup .card {
  transition: all 0.5s;

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.mixitup .card:hover {
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.mixitup .card .card-header {
  position: relative;
}

.mixitup .card .card-header h3 {
  padding: 15px 10px;
}

.mixitup .card .card-footer a span {
  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

  color: #fff;

  padding: 5px 5px;
}

.mixitup .card .card-footer a span:after {
  content: "\00bb";

  font-size: 30px;

  opacity: 0;

  position: absolute;

  top: 37%;

  left: 100%;

  transform: translate(-50%, -50%);

  transition: 0.3s;
}

.mixitup .card .card-footer a:hover span {
  padding-right: 25px;
}

.mixitup .card .card-footer a:hover span:after {
  opacity: 1;

  right: 0;
}

.mixitup .card .card-header .play-btn-wrapper {
  width: 40px;

  height: 40px;

  border-radius: 100%;

  text-align: center;

  bottom: 10px;

  right: 10px;

  position: absolute;

  border: 1px solid #2e3192;
}

.mixitup .card:hover .card-header .play-btn-wrapper {
  background-color: #2e3192;

  color: white;

  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.mixitup .card .card-header .play-btn-wrapper i {
  color: #2e3192;

  line-height: 37px;
}

.mixitup .card:hover .card-header .play-btn-wrapper i {
  color: white;
}

.open-video-modal .modal-content {
  position: relative;
}

.open-video-modal .modal-content button {
  border: solid black 1px;

  position: absolute;

  background-color: #f0f0f0;

  z-index: 999999;

  top: -10px;

  opacity: 1;

  right: -10px;

  width: 30px;

  height: 30px;

  border-radius: 100%;

  font-size: 14px;
}

.open-video-modal .modal-body .vidoe-box {
  position: relative;
}

.open-video-modal .modal-body .vidoe-box iframe {
  position: absolute;

  top: 0px;

  left: 0px;

  right: 0px;

  bottom: 0px;

  width: 100%;

  height: 100%;
}

/* READMORE */

.read-more .box.border-left {
  border-color: #2e3192 !important;
}

.read-more .box h3,
.read-more .box .media-body h4 {
  color: #2e3192;
}

.read-more .box h3,
.read-more .box p {
  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;
}

.read-more .readmore-image {
  position: relative;
}

.read-more .play-btn-wrapper {
  width: 45px;

  height: 45px;

  border-radius: 100%;

  text-align: center;

  bottom: 10px;

  right: 10px;

  position: absolute;

  border: 1px solid #2e3192;
}

.read-more .play-btn-wrapper:hover {
  background-color: #2e3192;

  color: white;

  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.read-more .play-btn-wrapper i {
  color: #2e3192;

  line-height: 43px;
}

.read-more .play-btn-wrapper:hover i {
  color: white;
}

.read-more .icons i {
  width: 40px;

  height: 40px;

  line-height: 42px;

  border-radius: 100%;

  font-size: 20px;

  box-shadow: inset 0px 0px 20px 4px rgba(46, 49, 146, 0.2);
}

.read-more .icons i:hover {
  box-shadow: 0px 0px 19px 4px rgba(46, 49, 146, 0.15);
}

.icon-whatsapp {
  color: #48a91f;
}

.icon-twitter {
  color: #00aced;
  color: rgb(0, 172, 237);
}

.icon-facebook {
  color: #3b5998;
  color: rgb(59, 89, 152);
}

.icon-googleplus {
  color: #dd4b39;
  color: rgb(221, 75, 57);
}

.icon-rss {
  color: #f26522;
  color: rgb(242, 101, 34);
}

.icon-pinterest {
  color: #cb2027;
  color: rgb(203, 32, 39);
}

.icon-linkedin {
  color: #007bb6;
  color: rgb(0, 123, 182);
}

.icon-youtube {
  color: #bb0000;
  color: rgb(187, 0, 0);
}

.icon-vimeo {
  color: #1ab7ea;
  color: rgb(26, 183, 234);
}

.icon-tumblr {
  color: #32506d;
  color: rgb(50, 80, 109);
}

.icon-instagram {
  color: #bc2a8d;
  color: rgb(188, 42, 141);
}

.icon-flickr {
  color: #ff0084;
  color: rgb(255, 0, 132);
}

.icon-dribbble {
  color: #ea4c89;
  color: rgb(234, 76, 137);
}

.icon-quora {
  color: #a82400;
  color: rgb(168, 36, 0);
}

.icon-foursquare {
  color: #0072b1;
  color: rgb(0, 114, 177);
}

.icon-forrst {
  color: #5b9a68;
  color: rgb(91, 154, 104);
}

.icon-vk {
  color: #45668e;
  color: rgb(69, 102, 142);
}

.icon-wordpress {
  color: #21759b;
  color: rgb(33, 117, 155);
}

.icon-stumbleupon {
  color: #eb4823;
  color: rgb(235, 72, 35);
}

.icon-yahoo {
  color: #7b0099;
  color: rgb(123, 0, 153);
}

.icon-blogger {
  color: #fb8f3d;
  color: rgb(251, 143, 61);
}

.icon-soundcloud {
  color: #ff3a00;
  color: rgb(255, 58, 0);
}

/* FOOTER */

.footer {
  background-image: url(../images/banner1.jpg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  color: #fff;

  position: relative;
}

.footer:before {
  position: absolute;

  content: "";

  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;

  background-color: rgba(0, 0, 0, 0.5);
}

/* WHATSAPP-BUTTON */

.joinchat {
  --btn: 80px !important;
}

.joinchat__button:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/*---------------login and register and forgot-password-------------------*/

.forgot-password .wrapper,
.register .wrapper,
.login .wrapper {
  z-index: 999;

  position: relative;
}

.reset-password .right-side {
  background-image: url("../images/unlock (3).jpg");
}

.forgot-password .right-side {
  background-image: url("../images/PasswordReset.jpg");
}

.register .right-side {
  background-image: url("../images/find-a-doctor-abroad.jpg");
}

.login .right-side {
  background-image: url("../images/login-bg3.jpg");
}

.reset-password .right-side,
.forgot-password .right-side,
.register .right-side,
.login .right-side {
  position: relative;

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  width: 100%;
}

.reset-password .log .form-control,
.forgot-password .log .form-control,
.register .log .form-control,
.login .log .form-control {
  outline: none;

  box-shadow: none;

  border: 1px solid transparent;
}

.reset-password .log,
.forgot-password .log,
.register .log,
.login .log {
  background-color: rgba(232, 232, 255, 0.6);
}

.reset-password .log .form-control::-webkit-input-placeholder,
.forgot-password .log .form-control::-webkit-input-placeholder,
.register .log .form-control::-webkit-input-placeholder,
.login .log .form-control::-webkit-input-placeholder {
  color: #1c4fa7;

  font-size: 18px;
}

.reset-password .log .form-control:focus,
.forgot-password .log .form-control:focus,
.register .log .form-control:focus,
.login .log .form-control:focus {
  color: #1c4fa7;

  font-size: 18px;
}

.reset-password .login_wrapper,
.forgot-password .login_wrapper,
.register .login_wrapper,
.login .login_wrapper {
  width: 75%;
}

.reset-password .login_wrapper .btn-login,
.reset-password .login_wrapper .input-wrap,
.forgot-password .login_wrapper .btn-login,
.forgot-password .login_wrapper .input-wrap,
.register .login_wrapper .btn-login,
.register .login_wrapper .input-wrap,
.login .login_wrapper .btn-login,
.login .login_wrapper .input-wrap {
  border-radius: 50px;

  background-color: rgba(6, 40, 88, 0.1);
}

.reset-password .login_wrapper .link_area span a,
.reset-password .log .input-group .input-group-text span a,
.forgot-password .login_wrapper .link_area span a,
.forgot-password .log .input-group .input-group-text span a,
.register .login_wrapper .link_area span a,
.register .log .input-group .input-group-text span a,
.login .login_wrapper .link_area span a,
.login .log .input-group .input-group-text span a {
  color: #1c4fa7;

  text-decoration: none;
}

.reset-password .login_wrapper .link_area span a:hover,
.reset-password .log .input-group .input-group-text span a:hover,
.forgot-password .login_wrapper .link_area span a:hover,
.forgot-password .log .input-group .input-group-text span a:hover,
.register .login_wrapper .link_area span a:hover,
.register .log .input-group .input-group-text span a:hover,
.login .login_wrapper .link_area span a:hover,
.login .log .input-group .input-group-text span a:hover {
  color: #abc8d3;
}

.bg-gray {
  background-color: #f7f7f7;
}

/* ---------------------llogin register popup--------------------------- */

/* ---------prospects-details -------------- */

.users {
  overflow: hidden !important;

  min-width: 185px !important;
}

.prospects-details .overflow-area {
  overflow: scroll;

  overflow-x: hidden;

  overflow-y: auto;

  height: 370px;
}

.prospects-details .overflow-area::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.prospects-details .overflow-area::-webkit-scrollbar {
  width: 7px;
}

.prospects-details .overflow-area::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
}

.prospects-details .overflow-area .msg-area1 {
  position: relative;
}

.prospects-details .overflow-area .msg-area1:before {
  background-image: url("../images/test1.png");

  position: absolute;

  content: "";

  top: 0px;

  left: -30px;

  background-size: content;

  background-repeat: no-repeat;

  width: 30px;

  height: 30px;
}

.prospects-details .overflow-area .msg-area2 {
  position: relative;
}

.prospects-details .overflow-area .msg-area2:before {
  background-image: url("../images/test2.png");

  position: absolute;

  content: "";

  top: 0px;

  right: -30px;

  background-size: content;

  background-repeat: no-repeat;

  width: 30px;

  height: 30px;
}

.admin-rounded {
  border-radius: 10px 0 10px 10px;
}

.client-rounded {
  border-radius: 0 10px 10px 10px;
}

.bg-sender {
  background-color: #e7fdd4;
}

.link-hover a {
  color: #fff;
}

.link-hover a:hover {
  color: #00ffff !important;
}

/* ================Notification=============== */

.notification {
  display: inline-block;

  position: fixed;

  bottom: 0;

  right: 0;

  visibility: hidden;

  z-index: 99999;
}

.notification .alert {
  position: relative;

  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.2);

  overflow: hidden;

  visibility: hidden;

  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */

  -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */

  animation-name: example;

  animation-duration: 5s;
}

.notification .alert-dismissible .close {
  position: absolute;

  padding: 0px;

  top: 0;

  bottom: 0;

  right: 10px;
}

@keyframes example {
  0% {
    visibility: hidden;
    opacity: 1;
  }

  1% {
    visibility: visible;
  }

  7% {
    visibility: visible;
    right: 20px;
  }

  90% {
    visibility: visible;
    opacity: 1;
  }

  100% {
    visibility: hidden;
    opacity: 1;
    right: 20px;
  }
}

/* MIN-WIDTH */

@media (min-width: 768px) {
  nav .navbar-collapse .navbar-nav .nav-item .nav-link {
    margin: 0px 0px 0px 25px;

    color: #fff;
  }

  nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: #00ffff;
  }

  nav .navbar-collapse .navbar-nav .nav-item .nav-link span::after {
    content: "";

    display: block;

    width: 0%;

    height: 2px;

    transition: 0.3s;
  }

  nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover span::after {
    width: 100%;

    background: #00ffff;
  }
}

@media (min-width: 992px) {
}

/* MAX-WIDTH */

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
  .footer .footer-logo {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .offcanvas-header {
    display: block;
  }

  .navbar-collapse {
    position: fixed;

    top: 0px;

    bottom: 0px;

    right: 100%;

    width: 250px;

    z-index: 2;

    padding-right: 1rem;

    padding-left: 1rem;

    visibility: hidden;

    transition: visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  .navbar-collapse.show {
    visibility: visible;

    transform: translateX(100%);
  }

  .screen-overlay {
    width: 0%;

    height: 100%;

    z-index: 1;

    position: fixed;

    top: 0;

    left: 0;

    opacity: 0;

    visibility: hidden;

    background-color: rgba(0, 0, 0, 0.9);

    transition: opacity 0.2s linear, visibility 0.1s, width 1s ease-in;
  }

  .screen-overlay.show {
    transition: opacity 0.5s ease, width 0s;

    opacity: 1;

    width: 100%;

    z-index: 2;

    visibility: visible;
  }

  /* SITE-NAV-CSS */

  nav .navbar-nav {
    padding-left: 20px;
  }

  nav.navbar .fa-bars {
    font-size: 25px;

    color: #fff;

    transition: all 0.3s;
  }

  nav.navbar .fa-bars:hover {
    color: #00ffff;
  }

  nav .navbar-collapse {
    background-image: url(../images/banner1.jpg);

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;
  }

  nav .navbar-collapse .navbar-nav .nav-item .nav-link {
    margin-bottom: 10px;

    display: block;

    color: #fff;
  }

  nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: #00ffff;
  }
}

@media (max-width: 575.98px) {
  .banner h3,
  .section-title h2,
  .blog .blog-title h2,
  .blog-tab .blog-tab-item h3,
  .read-more .rm-content h3 {
    font-size: 25px;
  }
}

@media (max-width: 375px) {
  .banner h3,
  .section-title h2,
  .blog .blog-title h2,
  .blog-tab .blog-tab-item h3,
  .read-more .rm-content h3 {
    font-size: 22px;
  }

  .blog-tab .blog-tab-control button {
    padding: 5px;

    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .banner .banner-padding {
    padding: 40px 0px;
  }

  .blog-tab .blog-tab-control button {
    padding: 5px;

    font-size: 13px;
  }
}

/*__________________________________________________________ */

/*-------------------------Picture Adjustment-------------

<div class="col-md-6">

	<div class="main-area">

		<div class="left-area" align="center">

			<img src="<?php echo $url_domain;?>/images/<?php echo $about_img;?>" width="100%">

		</div>

		<div class="right-area"></div>

	</div>

</div>





.main-area{

	display:table;

	width:100%;

	text-align:center;

	position:relative;

}

.main-area .left-area{

	display:table-cell;

	width:100%;

	max-height:100px;

	vertical-align:middle;

	position:relative;

}

.main-area .right-area{

	height:300px;

}

.main-area .left-area img{

	width:auto;

	max-width:100%;

	height:auto;

	max-height:300px;

	vertical-align:middle;

	

}-------------*/

/* Change this breakpoint if you change the breakpoint of the navbar */

.animate {
  animation-duration: 0.3s;

  -webkit-animation-duration: 0.3s;

  animation-fill-mode: both;

  -webkit-animation-fill-mode: both;
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);

    opacity: 0;
  }

  100% {
    transform: translateY(0rem);

    opacity: 1;
  }

  0% {
    transform: translateY(1rem);

    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;

    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);

    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);

    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;

  animation-name: slideIn;
}

/* -------------- */

/* .calculator .input-group-text input[type=checkbox]:checked:before { */

/* content: ""; */

/* display: block; */

/* position: absolute; */

/* width: 30px; */

/* height: 30px; */

/* border: 2px solid #9D9998; */

/* border-radius: 20px; */

/* background-color: #393333;   */

/* transition: all 0.2s linear; */

/* margin-top:-15px; */

/* } */

.calculator .input-group-text input[type="checkbox"]:before {
  content: "";

  display: block;

  position: absolute;

  width: 25px;

  height: 25px;

  border: 2px solid #2e3192;

  background-color: #fff;

  margin-top: -10px;
}

.calculator .input-group-text input[type="checkbox"]:after {
  content: "";

  display: block;

  width: 0px;

  height: 0px;

  border: solid #2e3192;

  border-width: 0 0px 0px 0;

  -webkit-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  transform: rotate(180deg);

  position: absolute;

  top: 0px;

  left: 50px;

  transition: all 0.2s linear;
}

.calculator .input-group-text input[type="checkbox"]:checked:after {
  content: "";

  display: block;

  width: 10px;

  height: 18px;

  border: solid #2e3192;

  border-width: 0 4px 4px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

  position: absolute;

  top: 3px;

  left: 28px;
}

/* -------------- */

/*__________________________________________________________ */

@media screen and (max-width: 1200px) {
  .text-xl-overflow-1 {
    -webkit-line-clamp: 1;
  }

  .text-xl-overflow-2 {
    -webkit-line-clamp: 2;
  }

  .text-xl-overflow-3 {
    -webkit-line-clamp: 3;
  }

  .text-xl-overflow-4 {
    -webkit-line-clamp: 4;
  }

  .text-xl-overflow-5 {
    -webkit-line-clamp: 5;
  }

  .text-xl-overflow-6 {
    -webkit-line-clamp: 6;
  }

  .text-xl-overflow-7 {
    -webkit-line-clamp: 7;
  }

  .text-xl-overflow-8 {
    -webkit-line-clamp: 8;
  }

  .text-xl-overflow-9 {
    -webkit-line-clamp: 9;
  }

  .text-xl-overflow-10 {
    -webkit-line-clamp: 10;
  }
}

@media screen and (max-width: 992px) {
  .text-lg-overflow-1 {
    -webkit-line-clamp: 1;
  }

  .text-lg-overflow-2 {
    -webkit-line-clamp: 2;
  }

  .text-lg-overflow-3 {
    -webkit-line-clamp: 3;
  }

  .text-lg-overflow-4 {
    -webkit-line-clamp: 4;
  }

  .text-lg-overflow-5 {
    -webkit-line-clamp: 5;
  }

  .text-lg-overflow-6 {
    -webkit-line-clamp: 6;
  }

  .text-lg-overflow-7 {
    -webkit-line-clamp: 7;
  }

  .text-lg-overflow-8 {
    -webkit-line-clamp: 8;
  }

  .text-lg-overflow-9 {
    -webkit-line-clamp: 9;
  }

  .text-lg-overflow-10 {
    -webkit-line-clamp: 10;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }

  h1,
  .h1 {
    font-size: 22pt;
  }

  h2,
  .h2 {
    font-size: 20pt;
  }

  h3,
  .h3 {
    font-size: 18pt;
  }

  h4,
  .h4 {
    font-size: 16pt;
  }

  h5,
  .h5 {
    font-size: 14pt;
  }

  h6,
  .h6 {
    font-size: 12pt;
  }

  body,
  p {
    font-size: 11pt;
  }
}

@media screen and (max-width: 576px) {
  .text-sm-overflow-1 {
    -webkit-line-clamp: 1;
  }

  .text-sm-overflow-2 {
    -webkit-line-clamp: 2;
  }

  .text-sm-overflow-3 {
    -webkit-line-clamp: 3;
  }

  .text-sm-overflow-4 {
    -webkit-line-clamp: 4;
  }

  .text-sm-overflow-5 {
    -webkit-line-clamp: 5;
  }

  .text-sm-overflow-6 {
    -webkit-line-clamp: 6;
  }

  .text-sm-overflow-7 {
    -webkit-line-clamp: 7;
  }

  .text-sm-overflow-8 {
    -webkit-line-clamp: 8;
  }

  .text-sm-overflow-9 {
    -webkit-line-clamp: 9;
  }

  .text-sm-overflow-10 {
    -webkit-line-clamp: 10;
  }

  .navbar .navbar-brand img {
    width: 135px;
  }
}

/* cards css................................................................................................  */

/* Center website */

.main {
  max-width: 1000px;

  margin: auto;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */

.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */

.column {
  float: left;

  width: 50%;

  display: none; /* Hide all elements by default */
}

@media screen and (max-width: 850px) {
  .column {
    float: left;

    width: 100% !important;

    display: none; /* Hide all elements by default */
  }
}

/* Clear floats after rows */

.row:after {
  content: "";

  display: table;

  clear: both;
}

/* Content */

.content {
  background-color: white;

  padding: 10px;
}

/* The "show" class is added to the filtered elements */

.show {
  display: block;
}

/* Style the buttons */

.card-btn {
  border: #007bff 1px solid;

  outline: none;

  padding: 0.375rem 0.75rem;

  background-color: white;

  cursor: pointer;

  color: #007bff;

  border-radius: 0px;

  transition: 0.5s;
}

.card-btn:hover {
  background-color: #007bff;

  color: #fff;
}

.card-btn.active {
  background-color: #007bff;

  color: white;
}
.faq-btn {
  width: 100%;
  text-align: left;
  font-weight: 600;
  text-decoration: none;
  color: #333;
}

.faq-btn:hover {
  text-decoration: none;
}

/* Active accordion */
.faq-btn:not(.collapsed) {
  background-color: #2e3192;
  color: #fff;
}

/* Icon container */
.faq-icon i {
  font-size: 18px;
}

/* Default: closed → eye-slash show */
.faq-btn.collapsed .twh-icon-rm-plus {
  display: none;
}

.faq-btn.collapsed .twh-icon-rm-minus {
  display: inline-block;
}

/* Open → eye show */
.faq-btn:not(.collapsed) .twh-icon-rm-plus {
  display: inline-block;
}

.faq-btn:not(.collapsed) .twh-icon-rm-minus {
  display: none;
}
.service-detail-content h2 {
  font-size: 18pt !important;
}

.btn-contact {
  background-color: #2e3192;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}

.btn-contact:hover {
  background-color: #242873;
  color: #ffffff;
}
.btn-process {
  background-color: #2e3192;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}

.btn-process:hover {
  background-color: #242873;
  color: #ffffff;
}
.social-icon {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background-color: #2e3192;
  color: #ffffff;
  border-radius: 50%;
  font-size: 18px;
  text-align: center;
  transition: 0.2s ease;
}

.social-icon:hover {
  background-color: #242873;
  color: #ffffff;
  text-decoration: none;
}

.btn-website {
  background-color: #2e3192;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}

.btn-website:hover {
  background-color: #242873;
  color: #ffffff;
}