/********** Template CSS **********/
:root {
    --primary: #D81324;
    --secondary: #0B2154;
    --light: #F2F2F2;
    --dark: #111111;
}

.fw-medium {
    font-weight: 600 !important;
}

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


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

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    text-transform: uppercase;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}
nav.navbar img {
    width: 90px;
    height: auto;
}
.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 85px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

@media (min-width: 1200px){
.display-3 {
    font-size: 2rem;
}
}
/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(88deg, #000000bd, #00000061);
    /* background: rgba(0, 0, 0, .6); */
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    border: 1px solid lightgrey;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(0, 0, 0, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** Facts ***/
.fact {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/carousel-bg-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*** Service ***/
.service .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.service .nav .nav-link.active {
    background: var(--primary);
}

.service .nav .nav-link.active h4 {
    color: #FFFFFF !important;
}


/*** Booking ***/
.booking {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/carousel-bg-2.jpg) center center no-repeat;
    background-size: cover;
}

.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/* --------------------------------------------------------------------------------------------------------------------------------------
@#$ INDEX PAGE TEAM MEMBER CSS START INDEX PAGE TEAM MEMBER CSS START  INDEX PAGE TEAM MEMBER CSS START  INDEX PAGE    
--------------------------------------------------------------------------------------------------------------------------------------*/
/*** Team ***/
.team-item .team-overlay {
    display: flex;
    align-items: center;
 background: #0000007d;
    justify-content: center;
    /* background: var(--primary); */
    transform: scale(0);
    transition: .5s;
}

.team-item:hover .team-overlay {
    transform: scale(1);
}

.team-item .team-overlay .btn {
    color: var(--primary);
    background: #FFFFFF;
}

.team-item .team-overlay .btn:hover {
    color: #FFFFFF;
    background: var(--secondary)
}


/* --------------------------------------------------------------------------------------------------------------------------------------
 @#$ INDEX PAGE TESTIMONIAL SLIDER CSS START INDEX PAGE TESTIMONIAL SLIDER CSS START  INDEX PAGE TESTIMONIAL SLIDER CSS START  INDEX PAGE     
--------------------------------------------------------------------------------------------------------------------------------------*/
.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

/* --------------------------------------------------------------------------------------------------------------------------------------
 @#$ INDEX PAGE FOOTER CSS START INDEX PAGE FOOTER CSS START  INDEX PAGE FOOTER CSS START  INDEX PAGE FOOTER CSS START     
--------------------------------------------------------------------------------------------------------------------------------------*/
/*** Footer ***/
section#Footer {
    padding: 0px 0px 0px 0px;
}
.footer {
    background: linear-gradient(45deg, #000000e8, #000000db), url(../img/carousel-bg-1.png) center center no-repeat;
    background-size: cover;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}
/* --------------------------------------------------------------------------------------------------------------------------------------
 INDEX.HTML PAGE  OUR ABOUT US CSS START  INDEX.HTML PAGE  OUR ABOUT US CSS START  INDEX.HTML PAGE  OUR ABOUT US CSS START   
--------------------------------------------------------------------------------------------------------------------------------------*/
section#about {
    padding: 30px 0px;
}
.section-title {
    text-align: center;
    padding: 0px 0px 20px 0px;
}

.section-title h6 {
    font-size: 13px;
    color: #ffffff !important;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    background: black;
    margin: 0px 40% 10px 40%;
    padding: 5px 1px
}

.section-title h1 {
    font-size: 2.0rem;
    text-transform: uppercase;
    margin-top: 3px;
    margin-bottom: 0px;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.section-title p {
    font-weight: 500;
    margin-top: 10px;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 0rem;
}
/* --------------------------------------------------------------------------------------------------------------------------------------
   INDEX.HTML PAGE  OUR TESTIMONIAL SLIDER CSS START INDEX.HTML PAGE  OUR TESTIMONIAL SLIDER CSS START INDEX.HTML PAGE SLIDER CSS START 
--------------------------------------------------------------------------------------------------------------------------------------*/
section#Business-testimonials {
    background: linear-gradient(45deg, #000000e8, #000000db), url(../img/carousel-bg-1.png);
}

/* ------------------------------------------------------------------------------------------------------------------------------------
#@ INDEX PAGE PORTFOLIO CSS START INDEX PAGE PORTFOLIO CSS START  INDEX PAGE PORTFOLIO CSS START  INDEX PAGE PORTFOLIO CSS START   
------------------------------------------------------------------------------------------------------------------------------------*/
.portfolio-section {
    padding: 50px 0;
    background-color: #fff;
  }
  .portfolio-section h2 {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
  }
  .portfolio-menu {
    text-align: center;
  }
  .control {
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #343a40;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
    -webkit-transition: all 05s ease;
    -moz-transition: all 05s ease;
    -ms-transition: all 05s ease;
    -o-transition: all 05s ease;
    transition: all 0.5s ease;
  }
  .control:hover {
    background: #df1324;
    border: #df1324;
  }
  .mixitup-control-active {
    color: #fff;
    background: #df1324;
    border: #df1324;
  }
  .fancybox-container button:focus {
    outline: 0;
    box-shadow: none;
  }
  .portfolio-item {
    padding-top: 0px;
    list-style-type: none;
    padding-left: 0px;
  }
  .pd {
    padding: 0;
    padding: 10px;
  }
  .pd img {
    height: 180px;
    width: 100%;
    transition: all 0.5s;
  }
  .portfolio-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    transition: all 0.5s;
    transform: scale(0);
  }
  .portfolio-overlay p,
  .portfolio-overlay a {
    position: relative;
    z-index: 4;
  }
  .portfolio-overlay::before {
    content: "";
    width: 0;
    height: 0;
    border-width: 0;
    position: absolute;
    left: 10%;
    top: 10%;
    transition: 50ms height ease 150ms;
    z-index: 3;
  }
  .portfolio-overlay::after {
    content: "";
    width: 0;
    height: 0;
    border-width: 0;
    position: absolute;
    right: 10%;
    bottom: 10%;
    transition: 100ms width ease 200ms;
    z-index: 3;
  }
  .portfolio-item:hover .portfolio-overlay::before {
    width: 80%;
    height: 80%;
    border-top: 1px solid #50977f;
    border-right: 1px solid #50977f;
    transition: width 0.1s ease 0.3s, height 0.1s ease 0.5s;
  }
  .portfolio-item:hover .portfolio-overlay::after {
    width: 80%;
    height: 80%;
    border-bottom: 1px solid #50977f;
    border-left: 1px solid #50977f;
    transition: width 0.1s ease 0.6s, height 0.1s ease 0.7s;
  }
  .portfolio-item li:hover .portfolio-overlay {
    visibility: visible;
    transform: scale(1);
  }
  .portfolio-overlay .category {
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
  }
  .portfolio-overlay .magnify-icon {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #50977f;
    margin: 0 5px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.25s;
  }
  .portfolio-overlay .magnify-icon:hover {
    background: #000;
  }
  .portfolio-overlay .magnify-icon p span i {
    font-size: 15px;
    color: #fff;
    line-height: 40px;
    cursor: pointer;
  }
/* --------------------------------------------------------------------------------------------------------------------------------------
  ALL PAGE CSS START ALL PAGE CSS START ALL PAGE CSS START ALL PAGE CSS START ALL PAGE CSS START ALL PAGE CSS START ALL PAGE CSS START 
--------------------------------------------------------------------------------------------------------------------------------------*/
/*div#header-carousel {
    height: 80vh;
}*/
div#header-carousel {
    height: 82vh !important;
}
.carousel-item {
    height: 82vh !important;
}
.carousel-control-prev, .carousel-control-next {
    width: 5% !important;
}
p.text-white.text-uppercase.mb-4.animated.slideInDown {
    line-height: 1.8;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.35rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
@media (min-width: 992px){
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    left: -72px;
}
}
section {
    padding: 30px 0px;
}
.contents-service h5 {
    font-size: 1.21rem;
    text-transform: uppercase;
}
.service-fully {
    padding: 20px 20px;
}
section#Slider {
    padding: 0px;
}
/*  */
section#Services {
    background: linear-gradient(45deg, #000000e8, #000000db), url(../img/carousel-bg-1.png);
}
img.footer-logo {
    width: 127px;
}
.service-fully img {
    width: 90px;
    height: 90px
}
/*  */
.booking-call h6 {
    color: #aaaaaa;
}

.booking-call h1 {
    color: white;
}

.booking-call p {
    color: #c8c8c8;
    line-height: 2;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 15px;
}
.contact-icons {
    text-align: center;
    box-shadow: inset 0px 2px 20px rgb( 0 0 0 /20%);
    background: white !important;
}

.contact-icons i.icon-full {
    font-size: 32px;
    color: #D81324;
    border-radius: 50%;
    padding: 8px 7px;
    border: 2px dotted #D81324;
    margin: 5px 40% 20px 40%;
}
.treatment-points h6 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 0rem;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    line-height: 1.1;
    color: #0B2154;
}
/* --------------------------------------------------------------------------------------------------------------------------------------
.HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START 
.HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START 
.HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START 
.HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START .HTML PAGE CSS START 
--------------------------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------------------------------------------------------------------------
@#@#@$# ABOUT.HTML PAGE CSS START ABOUT.HTML PAGE CSS START ABOUT.HTML PAGE CSS START ABOUT.HTML PAGE CSS START 
--------------------------------------------------------------------------------------------------------------------------------------*/
section#about-us {
    background: linear-gradient(45deg, #0000004f, #00000021), url(..//img/carousel-bg-1.png) center center no-repeat;
    padding: 0px 0px;
}

section#about-center {
    background: linear-gradient(45deg, #000000c7, #000000db), url(../img/carousel-bg-1.png) center center no-repeat;
}
.bg-boxes{
    background-color: #ffffff54 !important;
}

.about-cent h6 {
    margin-top: 0;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #b2b2b2;
}

.about-cent h1 {
    margin-top: 0;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.about-cent p {
    color: #cdcdcd;
    text-transform: capitalize;
    line-height: 1.7;
    font-weight: 500;
    font-size: 16px;
}
.about-fully {
    text-align: center;
    display: flex;
    box-shadow: 0px 2px 20px rgb( 0 0 0 /19%);
    background: white !important;
    border: 3px solid #dddddd;
        height: 270px;
}

.about-fully img {
    width: 45%;
    height: auto;
}

.contents-about {
    text-align: center;
}

/*  */

.about .icon-box {
    padding: 10px 25px;
    box-shadow: 0px 2px 20px rgb( 0 0 0/10%);
    border: 3px solid #e8e8e8;
    border-radius: 10px;
    transition: all 0.3s ease-out 0s;
    background-color: var(--color-box-background);
  }
  
  .about .icon-box i {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      font-size: 32px;
      line-height: 0;
      border: 1px solid;
      transition: all 0.4s ease-out 0s;
      background-color: rgba(var(--color-primary-rgb), 0.05);
      color: var(--color-primary);
  }
  
  .about .icon-box h3 {
       color: var(--color-secondary);
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      text-transform: uppercase;
  }
  .about-content p {
      font-size: 14px;
      line-height: 1.8;
      margin-top: 0;
      margin-bottom: 1rem;
      color: #2b2b2b;
      font-weight: 500;
  }


/* --------------------------------------------------------------------------------------------------------------------------------------
@#@# @MEDIA QUERY.HTML PAGE CSS START @#@# @MEDIA QUERY.HTML PAGE CSS START @#@# @MEDIA QUERY.HTML PAGE CSS START @MEDIA QUERY
--------------------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------------------------
@#@# @MEDIA QUERY.HTML PAGE CSS START @#@# @MEDIA QUERY.HTML PAGE CSS START @#@# @MEDIA QUERY.HTML PAGE CSS START @MEDIA QUERY
--------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 768px){

.section-title h6 {
    margin: 0px 25% 10px 25% !important;
}
.team-item {
    text-align: center !important;
}
.leadership-text {
    width: 100% !important;
}
.leadership-img {
    width: 100% !important; 
}
.team-item {
    display: block !important;
}
.service-fully img {
    width: 100% !important;
    height: auto !important;
}




}
/* END MEDIA QUERY */