/********** Template CSS **********/
:root {
  --primary: #06A3DA;
  --secondary: #F57E57;
  --light: #EEF9FF;
  --dark: #091E3E;
}

/* Typography */
h1, h2, .font-weight-bold { font-weight: 700 !important; }
h3, h4, .font-weight-semi-bold { font-weight: 600 !important; }
h5, h6, .font-weight-medium { font-weight: 500 !important; }

/* Buttons */
.btn {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  transition: .5s;
}
.btn-primary, .btn-secondary { color: #fff; }
.btn-primary:hover { background: var(--secondary); border-color: var(--secondary); }
.btn-secondary:hover { background: var(--primary); border-color: var(--primary); }
.btn-square, .btn-sm-square, .btn-lg-square {
  padding: 0; text-align: center;
}
.btn-square { width: 36px; height: 36px; }
.btn-sm-square { width: 28px; height: 28px; }
.btn-lg-square { width: 46px; height: 46px; }

/* Spinner */
#spinner {
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 99999;
}
#spinner.show { opacity: 1; visibility: visible; transition: opacity .5s ease-out; }

/* Back to top */
.back-to-top {
  position: fixed; display: none;
  right: 45px; bottom: 45px; z-index: 99;
}

/* Shape */
.top-shape::before {
  content: ""; position: absolute; top: 0; left: -17px;
  width: 35px; height: 100%;
  background: var(--primary); transform: skew(40deg);
}

/* Navbar */
.navbar-light .nav-link {
  font-family: 'Jost', sans-serif;
  font-size: 18px; color: var(--dark);
  padding: 35px 15px; transition: .5s;
}
.sticky-top.navbar-light .nav-link { padding: 20px 15px; }
.navbar-light .nav-link:hover,
.navbar-light .nav-link.active { color: var(--primary); }
@media (max-width: 991.98px) {
  .navbar-light .nav-link { padding: 10px 0; }
}

/* Carousel */
.carousel-caption {
  inset: 0; background: rgba(9,30,62,.5); z-index: 1;
}
@media (max-width: 576px) {
  .carousel-caption h5 { font-size: 14px; font-weight: 500 !important; }
  .carousel-caption h1 { font-size: 30px; font-weight: 600 !important; }
}
.carousel-control-prev, .carousel-control-next { width: 10%; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; }

/* Banner */
@media (min-width: 991.98px) {
  .banner { position: relative; margin-top: -90px; z-index: 1; }
}

/* Section Title */
.section-title h5::before, .section-title h5::after {
  content: ""; position: absolute; bottom: 11px; height: 3px;
}
.section-title h5::before { right: -55px; width: 45px; background: var(--primary); }
.section-title h5::after  { right: -75px; width: 15px; background: var(--secondary); }

/* Backgrounds */
.twentytwenty-wrapper { height: 100%; }
.hero-header, .bg-appointment {
  background: linear-gradient(rgba(9,30,62,.5), rgba(9,30,62,.5)),
              url(../img/carousel-1.webp) center/cover no-repeat;
}
.bg-offer { background: url(../img/carousel-1.jpg) center/cover no-repeat; }
.bg-testimonial { background: url(../img/carousel-2.webp) center/cover no-repeat; }
.appointment-form { background: rgba(6,163,218,.7); }
.offer-text, .testimonial-carousel { background: rgba(6,163,218,.85); }

/* Services & Team */
.service-item img,
.service-item .bg-light,
.service-item .bg-light h5,
.team-item .team-text { transition: .5s; }
.service-item:hover img { transform: scale(1.15); }
.team-item .team-text::after,
.service-item .bg-light::after {
  content: ""; position: absolute; left: 15px; right: 15px;
  top: 50%; bottom: 0; border-radius: 100px/15px;
  box-shadow: 0 0 15px rgba(0,0,0,.7);
  opacity: 0; transition: .5s; z-index: -1;
}
.team-item:hover .team-text::after,
.service-item:hover .bg-light::after { opacity: 1; }

/* Carousels */
.price-carousel .owl-nav,
.testimonial-carousel .owl-nav {
  position: absolute; display: flex; justify-content: space-between;
  top: 50%; transform: translateY(-50%);
  transition: .5s;
}
.price-carousel .owl-nav { width: calc(100% + 45px); left: -22.5px; height: 45px; opacity: 0; }
.price-carousel:hover .owl-nav { opacity: 1; }
.testimonial-carousel .owl-nav { width: calc(100% + 46px); left: -23px; height: 46px; z-index: 1; }

.price-carousel .owl-prev, .price-carousel .owl-next,
.testimonial-carousel .owl-prev, .testimonial-carousel .owl-next {
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--primary);
  border-radius: 2px; font-size: 22px; transition: .5s;
}
.price-carousel .owl-prev, .price-carousel .owl-next { width: 45px; height: 45px; }
.testimonial-carousel .owl-prev, .testimonial-carousel .owl-next { width: 46px; height: 46px; }
.price-carousel .owl-prev:hover, .price-carousel .owl-next:hover,
.testimonial-carousel .owl-prev:hover, .testimonial-carousel .owl-next:hover {
  background: var(--secondary);
}

.testimonial-carousel .owl-item img { width: 120px; height: 120px; }



.box{padding: 5px 10px;font:600 16px Arial;color:#060606;border:2px solid blue;border-radius:0 0 10px 10px;box-shadow:0 10px 10px -5px rgba(0,0,0,.5)}
.box .title{background:#060606;font:600 20px Arial;color:#fff;padding:5px 10px}
.box .link{color:#060606;padding:5px;display:block;text-decoration:none;transition:.3s}
.box .link::before{content:'\27A4';margin-right:10px;color:red}
.box .link:last-child{margin-bottom:10px}
.box .link:hover{background:#00f;color:#fff;font-weight:600}

.stylein {opacity:0;}
.warning {display:inline-block;padding:5px 10px;background:#FFF9E0;color:#A81C00;font:600 18px Arial;}
.error {display:inline-block;margin:10px 0;padding:5px 10px;background:#FFF0F0;color:#A80000;font:600 18px Arial;}
.success {display:inline-block;margin:10px 0;padding:5px 10px;background:#DBFFCC;color:#175200;font:600 18px Arial;}
.title{font:600 20px Arial; padding:2px 5px;color:#fff; background-color:#870033;}
.animated {animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite {animation-iteration-count: infinite;}
.animated.hinge {animation-duration: 2s;}
.animated.bounceIn,.animated.bounceOut {animation-duration: .75s;}
.fadeIn {animation-name: fadeIn;}
.fadeInUp {animation-name: fadeInUp;}
.fadeInDown {animation-name: fadeInDown;}
.fadeInLeft {animation-name: fadeInLeft;}
.fadeInRight {animation-name: fadeInRight;}
.bounceInTop {animation-name: bounceInTop;}
.zoomIn {animation-name: zoomIn;}
@keyframes zoomIn {0% {opacity: 0;transform:scale(5);animation-timing-function:ease-in;}35% {transform:scale(1);animation-timing-function:ease-out;opacity:1;}55% {transform:scale(1.5);animation-timing-function:ease-in;}70% {transform:scale(1);animation-timing-function:ease-out;}80% {transform:scale(1.24);animation-timing-function:ease-in;}90% {transform:scale(1);animation-timing-function:ease-out;}95% {transform:scale(1.04);animation-timing-function:ease-in;}100% {opacity: 1;transform:scale(1);animation-timing-function:ease-out;}}
@keyframes bounceInTop {0%, 38% {opacity: 0;transform: translateY(-200px);}38%, 72%, 90%, 100% {opacity: 1;transform: translateY(0);}55% {transform: translateY(-65px);}81% {transform: translateY(-28px);}95% {transform: translateY(-10px);}}
@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}
@keyframes fadeInDown {from {opacity: 0;transform: translate3d(0, -100%, 0);}to {opacity: 1;transform: none;}}
@keyframes fadeInLeft {from {opacity: 0;transform: translate3d(-100%, 0, 0);}to {opacity: 1;transform: none;}}
@keyframes fadeInRight {from {opacity: 0;transform: translate3d(100%, 0, 0);}to {opacity: 1;transform: none;}}
@keyframes fadeInUp {from {opacity: 0;transform: translate3d(0, 100%, 0);}to {opacity: 1;transform: none;}}


.styleBox {position: relative; max-width: 100%; background: linear-gradient(to right, #750000 0%, #BA0055 50%, #750000 100%); border-radius: 5px; padding: 10px; color: #fff; margin: 0 auto; text-align: center; font: 600 20px Arial; box-shadow: inset 0 0 0 2px white; transition: .3s ease-in-out;}
.styleBox::before, .styleBox::after {content: ""; position: absolute; bottom: 15px; width: calc(50% - 5px); height: 25px; box-shadow: 0 15px 15px rgba(0, 0, 0, 1); z-index: -1;}
.styleBox:hover {color: #3300AA; letter-spacing: 0px;}
.styleBox::before {left: 5px; transform: rotate(-3deg);}
.styleBox::after {right: 5px; transform: rotate(3deg);}