/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/
/*-------- #Baseline-------- */
/*$baseline: 20px*/
/* -----#Font Base------- */
/*$line-height-base: 1.5*/
/*$line-height-content: 1.8*/
/*$site-font: 'Nunito'*/
/*$decoration-base: none*/
/*------ #Font Size Base --------*/
/* $font-size-base: 18px */
/* $font-size-h1: 52px */
/* $font-size-h2: 42px */
/* $font-size-h3: 38px */
/* $font-size-h4: 32px */
/* $font-size-h5: 24px */
/* $font-size-h6: 18px */
/* $font-size-button: 14px */
/* header-size: 36px */
/* $logo-font: 28.8px */
/* $header-size-mobile: 24px */
/* $font-size-base-mobile: 14px */
/*------ #Letter Spacing ------*/
/* $logo-letter-spacing: 3.06px */
/* ------#Background Base------- */
/*$background-base: no-repeat center center fixed*/
/*$background-size-base: cover*/
/*--------#Icon Base ----------*/
/*$awesome: fontawesome*/
/* Border-Radius Base */
/*$radius-5: 5px*/
/*$radius-6: 6px*/
/*$radius-10: 10px*/
/*$radius-50: 50% */
/************************************************************************************************************\
 #Media Queries Base Variables
\************************************************************************************************************/
/*-------#Max Variables--------*/
/* $xs: 575px; Mobile Displays and Smaller*/
/* $sm: 767px; Tablets and Smaller */
/* $md: 991px; Medium Displays and Smaller */
/* $lg: 1199px; Large Displays and smaller */
/*--------#Min Variables-----------*/
/*$xs-min: 576px; Mobile Displays and Larger */
/* $sm-min: 768px; Tablets Displays and Larger */
/* $md-min: 992px; Medium Displays and Larger */
/* $lg-min: 1200px; Large Displays and Larger */
/*------Custom Media Queries----------*/
/* $sz-1500: 1500px; Screen Size 1500px */
/* $sz-375: 375px; Screen Size 1500px */
/*------------------------------------*\
    #END OF VARIABLES
\*------------------------------------*/
/********************************************************************************************************\
      #Media Queries Mixins
\*********************************************************************************************************/
/*Note: Values for Media Queries present in `_variables.scss`. Media query mixins in the Mixin file in SCSS/base/_mixin.scss*/
/*************************************************************************************************\
#Custom Media Queries
\*************************************************************************************************/
/*Add Media Queries that you require Here*/
/********************************************************************************************************\
      #End Media Queries Mixins
\*********************************************************************************************************/
.navbar-bg {
  background-color: #fff;
  z-index: 999;
  width: 100%;
  text-align: center;
}

@media (min-width: 992px) {
  .navbar-nav {
    gap: 20px;
  }
}
.navbar-nav .nav-link.active {
  color: #0984e3;
}

.main {
  padding-top: 106px;
}
@media (max-width: 991px) {
  .main {
    padding-top: 76px;
  }
}

.navbar-brand img {
  height: 80px;
  width: auto;
}
@media (max-width: 991px) {
  .navbar-brand img {
    height: 50px;
    width: auto;
  }
}

@media (max-width: 575px) {
  .main-title {
    font-size: 20px;
  }
}

.page-header {
  background-image: linear-gradient(90deg, #0984e3 0%, #003bb1 100%);
  color: #fff;
  min-height: 30vmin;
  position: relative;
  margin-bottom: 6vmin;
}
.page-header__content {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
}
.page-header h1 {
  font-size: 6vmin;
  color: #fff;
}
@media (max-width: 575px) {
  .page-header h1 {
    font-size: 20px;
  }
}

.cards-ui .card {
  height: 100%;
  border: 0;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}
.cards-ui .card .card-body {
  /* Font & Text */
  padding: 0;
}
.cards-ui .card .card-body ul {
  padding-left: 20px;
  text-align: left;
  margin-top: 20px;
}
.cards-ui .card .card-body ul li {
  margin-bottom: 0.5rem;
}
.cards-ui .card .card-body ul li:last-child {
  margin-bottom: 0;
}

footer {
  text-align: center;
}
footer .footer-top {
  background-color: #f9f9f961;
  border-style: solid;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 1px;
  border-top-color: #e6e6e6;
  border-bottom-width: 1px;
  border-bottom-color: #e6e6e6;
  padding: 1rem 0;
}
footer .footer-bottom {
  padding: 1.5rem 0;
}
footer h5 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
footer ul {
  list-style: none;
  padding: 0;
}
footer ul li {
  margin-bottom: 0.5rem;
}
footer ul li a {
  text-decoration: none;
  color: #000;
}
footer ul li a:hover {
  text-decoration: underline;
}
footer p {
  margin-bottom: 0;
}

/************************************************
        ##HOME
************************************************/
.hero {
  position: relative;
  overflow: hidden;
}
.hero video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.services-section img {
  max-width: 70px;
  display: block;
  margin: 0 auto 15px auto;
}
.services-section h5 {
  font-weight: 700;
}
.services-section ul {
  list-style-type: disc;
  list-style-position: outside;
}

.branch-grid .branch {
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 8px;
  height: 100%;
}
.branch-grid .branch iframe {
  border-radius: 10px;
}
.branch-grid .branch iframe * {
  border-radius: 8px;
}
.branch-grid .branch h3 {
  margin-bottom: 5px;
  font-size: 20px;
  margin-top: 15px;
}
.branch-grid .branch a {
  word-break: break-all;
}

.services-cards .card {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
  flex-direction: row;
}
.services-cards h5 {
  font-size: 20px;
  margin-bottom: 0;
}
.services-cards .card-img-left {
  max-width: 40px;
  height: auto;
}
.services-cards .card-body {
  padding: 0;
}

.contact-card {
  height: 100%;
  border: 0;
  padding: 30px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 30px;
  border-radius: 15px;
  transition: transform 0.2s;
}
.contact-card .card-body {
  padding: 0;
}
.contact-card .card-body p {
  font-size: 14px;
}
.contact-card .icon {
  color: #0984e3;
  border: 1px solid #0984e3;
  height: 50px;
  width: 50px;
  margin: 0 auto 20px auto;
  border-radius: 50px;
  position: relative;
}
.contact-card .icon i {
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contact-form {
  margin: 0 auto 20px auto;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  padding: 30px;
}