/* Fonts */
:root {
    --default-font: "Wellingtons",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Garet",  sans-serif;
    --nav-font: "Wellingtons",  sans-serif;
  }

  :root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #555353; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #000000; /* Color for headings, subheadings and title throughout the website */
    --accent-color: rgba(0,109,166); /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  }


  @font-face {
    font-family: 'Garet';
    src: url("inc/fonts/Garet-Book.otf") format("opentype");
  }
  
  @font-face {
    font-family: 'Wellingtons';
    font-weight: bold;
    src: url("inc/fonts/Wellingtons.otf") format("opentype");
  }

  body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
  }

  a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
  }
  h3{
    color: var(--accent-color);

  }


a.nav-link{
    color: var(--accent-color);
}
a.nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.6);
    color: #fbfbfc;
    border-radius: 15px !important;
  }
.navbar-toggler {
    color: var(--accent-color);
    border-color: var(--accent-color);
  }


  
.navbar-nav a:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.6);
    color: #fbfbfc;
    border-radius: 15px !important;
  }

  /* .dropdown-menu.show {
    background-color: rgba(var(--contrast-color));

  } */

  .dropdown-menu li{
    position: relative;
}
.dropdown-menu .submenu{ 
    display: none;
    position: absolute;
    left:100%; top:-7px;
}
.dropdown-menu .submenu-left{ 
    right:100%; left:auto;
}

.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
    display: block;
}


/* Slider */
.slider {
    width: 75vw;
    height: auto;
    margin: auto;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 15% 85%, transparent 100%);
}

.slider .slide-track {
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(200px * 14);
}

.slider .slide {
    width: 200px;
}

.slider .slide img {
    width: 100%;
}


@keyframes scroll {
    0%{
        -webkit-transform: translateX(0);
        transform:translateX(0);
    }
    100%{
        -webkit-transform: translateX(calc(-200px * 7));
        transform:translateX(calc(-200px * 7));
    }
}
/* End Slider */


/* Card */
.box-shadow{
	-webkit-box-shadow: 0 1px 1px rgba(72,78,85,.6);
	box-shadow: 0 1px 1px rgba(72,78,85,.6);
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.box-shadow:hover{
	-webkit-box-shadow: 0 20px 40px rgba(72,78,85,.6);
	box-shadow: 0 20px 40px rgba(72,78,85,.6);
	-webkit-transform: translateY(-15px);
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	-o-transform: translateY(-15px);
	transform: translateY(-15px);
}

.card{
	border-radius: 25px;
	
}

.card img{
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.card:hover svg{
	filter:drop-shadow(2px -9px 4px rgba(0, 69, 134, 0.4));
}
/* End Card */

.fab{
  position: fixed;
  z-index: 999;
  bottom: 15px;
  right: 15px;

}
.fab_img {
  width: 64px;
}

/***** Contact Validation *****/
.contact-form{
  --form-ok-color:#5eff00;
  --form-error-color:#f80707;
}
.contact-form textarea{
  resize: none;
}
.contact-form [required]:valid{
  border:outset var(--form-ok-color)!important;
}
.contact-form [required]:invalid{
  border:outset var(--form-error-color)!important;
}
.contact-form-error{
  margin-top: -1rem;
  font-size: 80%;
  background-color: var(--form-error-color);
  color:#fff;
  transition: all 800ms ease;
}
.contact-form-error.is-active{
  display: block;
  animation: show-message 1 1s normal 0s ease-out both;
}
.none{
  display: none;
}

@keyframes show-message {
  0%{
    visibility: hidden;
    opacity: 0;
  }
  100%{
    visibility: visible;
    opacity: 1;
  }
}


/* Small devices (landscape phones, 576px and up) */

 @media (min-width: 320px) {

    h1.card-title{
        padding-top: 150px !important;        
        font-size: 40px; 
    }
    /* Whatsapp */
    .fab{
      padding-right: 10%!important;
      position: fixed;
      z-index: 99;
      bottom: 15px;
      right: 15px;
    
    }
    .fab_img {
      width: 64px;
    }
    

} 



@media (min-width: 576px) { 
    .img-fluid{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 60% !important;
    }
    .top-info a{   
        font-size: 18px;    
    }

    h1.card-title{
        padding-top: 180px !important;        
        font-size: 40px; 
    }

        /* Whatsapp */
        /* .fab{
          padding-right: 40%!important;
          position: fixed;
          z-index: 99;
          bottom: 15px;
          right: 15px;
        
        }
        .fab_img {
          width: 64px;
        }  */


}

@media (min-width: 768px) { 
    h1.card-title{
        padding-top: 50px !important;  
        font-size: 20px; 
    }
}

@media (min-width: 992px) { 
    h1.card-title{
        padding-top: 50px !important;       
        font-size: 30px; 
    }

 }

 @media (min-width: 1200px) {
    h1.card-title{
        padding-top: 80px !important;
         font-size: 35px;  
    }

 }