@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');
html{
  font-size: 62.5%;
}
 
:root{
--blueflower-1:#2857a6;
--blueflower-2:#213f74;
--bf-font: 'Open Sans', sans-serif;
  --bf-body-font-weight:300;
 --bf-body-font-weight-b:600;
 --bf-body-line-height:150%;
 --bf-body-body-bg:#fff;
 --bf-body-body-bg-2:#2857a6;;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family:var(--bf-font);
   font-weight: var(--bf-body-font-weight);
  line-height: var(--bf-body-line-height);
  color: var(--bf-body-color);
   background-color: var(--bf-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: var(--bf-font);
  font-weight: var(--bf-body-font-weight-b);
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 5rem;
  }
}

h2, .h2 {
  font-size: 2rem;
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 3rem;
  }
}

h3, .h3 {
  font-size: 1.7rem;
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 2rem;
  }
}

h4, .h4 {
  font-size: 1.5rem;
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.8rem;
  }
}

h5, .h5 {
  font-size: 1rem;
}

h6, .h6 {
  font-size: 1.25rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

/* Navbar */


#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--blueflower-1);
}
#mainNav .navbar-toggler {
  padding: 0.75rem;
  font-size:1.3rem;
  border-radius: 0;
  text-transform:uppercase;
  font-weight: 600;
}
#mainNav .navbar-brand {
 
   font-weight: 600;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
#mainNav .navbar-brand img {
  height: 4rem;
}
#mainNav .navbar-nav .nav-item .nav-link {
   font-size: 1.8rem;
   font-weight: var(--bf-body-font-weight-b);
  color: #fff;
  letter-spacing: 0.0625em;
}
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #ffc800;
}

@media (min-width: 992px) {
  #mainNav {
    font-size: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border: none;
    background-color: transparent;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
  }
  #mainNav .navbar-brand img {
    height: 6rem;
    transition: height 0.3s ease-in-out;
  }
  #mainNav.navbar-shrink {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color:var( --blueflower-1);
    border:0;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 3rem;
  }
  #mainNav.navbar-shrink .navbar-brand svg,
#mainNav.navbar-shrink .navbar-brand img {
    height: 3rem;
  }
  #mainNav .navbar-nav .nav-item {
    margin-right: 2rem;
  }
  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
}



.book-now{
    font-size: 1.5rem;
     font-weight: 600; 
      
  }
  .book-now a{
     text-decoration: none;
     color:var(--blueflower-1);
      
  }
  .book-now a:hover{
     color:var(--blueflower-2);
     
  }
  
  .btn-primary {
    color: #fff;
    background-color: var(--blueflower-1);
    border-color:var(--blueflower-1);}
  
  .btn-primary:hover {
     background-color: var(--blueflower-2);
    border-color:var(--blueflower-2);
  }
  .btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: var(--blueflower-2);
    border-color: var(--blueflower-2);
    box-shadow: 0 0 0 0.25rem var(--blueflower-1);
  }
  
  .btn-message {
    color: #fff;
    background-color:#25D366;
    border-color:#25D366}
  
.btn-message:hover {
     background-color: var(--blueflower-2);
    border-color:var(--blueflower-2);
  }
.btn-primary:focus, .btn-message:focus {
    color: #fff;
    background-color: var(--blueflower-2);
    border-color: var(--blueflower-2);
    box-shadow: 0 0 0 0.25rem var(--blueflower-1);
  }

  .card-title {
      margin: 1rem 0 0 0;
  }

  .card-footer {
    padding: 2rem 1rem;
 }
  .heading-high{
    width: 100%;
    height: 100%;
     padding: 2rem 0;
  
 }
  .heading-high-box{
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0;
     width: 100%;
    height: 100%;      
  }  
  .heading-high-box h2{
    font-size: 3rem;
    padding: 2rem;
    font-weight:400;
  }
  .heading-high{
    background-color:var(--blueflower-2);
    background-image:none;
    background-size:cover;
    background-position: 0%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
 }
  @media (min-width: 768px) {
   .heading-high{
       background-image:url(../assets/img/cars/car-dog.jpg);
       background-size:cover;
       background-position: 0%;
       height: 100vh;
       display: flex;
       align-items: center;
       justify-content: flex-start;
    }
    .heading-high-box{
       color: #fff;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-left: 5%;
       width: 40%;
      height: 40%;      
    }  
    .heading-high-box h2{
      font-size: 5rem;
      padding: 2rem;
    }

  }
   .services{
     padding: 4em;
      max-width: 50rem;
     background-color: var(--blueflower-2);
     color: #fff;
     margin: 4rem;
      
   }
    h3.sub{
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      font-size: 1.4rem;
      font-weight: 600;
    }
   
    .filter-g {
      filter: grayscale(80%);
    }
    .filter-g:hover{
      filter: grayscale(0);
    }
    h2.section-heading{
      margin-bottom: 2rem;
    }

  .cta-bg{
    background-color: var(--blueflower-2);
    color: #fff;
    padding:5rem
  }
 
  .page-section {
    padding: 6rem 1.5rem 3rem;
  }
  .page-section h2.section-heading, .page-section .section-heading.h2 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .page-section h3.section-subheading, .page-section .section-subheading.h3 {
    font-size: 1.8rem;
    font-weight: 600;
     margin-bottom: 4rem;
     line-height: 2.6rem;
   }
  .section-subheading{
    max-width: 80rem;
    margin: auto;
    margin-bottom: 4rem;
  }
  /* Portfolio section */
#portfolio .portfolio-item {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background:var(--blueflower-1);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity ease-in-out 0.25s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 2rem;
  color: white;
}
#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-caption {
  padding: 1.5rem;
  text-align: center;
  background-color: #fff;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
  font-size: 1.5rem;
   font-weight: 700;
  margin-bottom: 0;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
  font-style: italic;
 }

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}
.portfolio-modal .modal-content {
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}
.portfolio-modal .modal-content h2, .portfolio-modal .modal-content .h2 {
  font-size: 3rem;
  line-height: 3rem;
}
.portfolio-modal .modal-content p.item-intro {
  font-style: italic;
  margin-bottom: 2rem;
 }
.portfolio-modal .modal-content p {
  margin-bottom: 2rem;
}
.portfolio-modal .modal-content ul.list-inline {
  margin-bottom: 2rem;
}
.portfolio-modal .modal-content img {
  margin-bottom: 2rem;
}
.portfolio-modal .close-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  background-color: transparent;
}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}