:root {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-size: 16px;
  --gutter: 12px;
  /* color variables start */
    --primary-color: #1B3664;
    --primary-light-color: #1a4ca1;
    --primary-dark-color: #1B3664;
    --secondary-color: #CD2027;
    --secondary-light-color: #e6393f;
    --secondary-dark-color: #CD2027;
    --tertiary-color: #2293D6;
    --tertiary-light-color: #2aa8f1;
    --tertiary-dark-color: #2293D6;
    --dark-color: #24242C;
    --dark-light-color: #444453;
    --dark-dark-color: #24242C;
    --dark-translucent-color: #24242CAA;
    --medium-color: #e2f6fd;
    --medium-color-subtle: #E5D0CB88;
    --medium-light-color: #E5D0CB;
    --medium-dark-color: #E5D0CB;
    --light-color: #edf1fa;
    --light-light-color: #f1f2f5;
    --light-dark-color: #E0E5F0;
  /* color variables end */
}

/* color start */

/* backgrounds */
.bg-light {
  color: var(--dark-color);
  background-color: var(--light-color);
}

.bg-medium {
  color: var(--dark-color);
  background-color: var(--medium-color);
}

.bg-dark {
  color: var(--light-color);
  background-color: var(--dark-color);
}

.bg-secondary-color {
  color: var(--light-color);
  background-color: var(--secondary-color);
}

.bg-tertiary-color {
  color: var(--light-color);
  background-color: var(--tertiary-color);
}

.bg-dark-translucent {
  color: var(--light-color);
  background-color: rgba(0, 0, 0, .85);
  background-blend-mode: multiply;
}

/* text */
.text-light-color {
  color: var(--light-color);
}

.text-primary-color {
  color: var(--primary-color);
}

.text-secondary-color {
  color: var(--secondary-color);
}

.text-tertiary-color {
  color: var(--tertiary-color);
}

/* buttons */

.btn-primary-color {
  color: white;
  background-color: var(--primary-color);
  &:hover {
    color: white;
    background-color: var(--primary-light-color);
  }
}

.btn-secondary-color {
  color: white;
  background-color: var(--secondary-color);
  &:hover {
    color: white;
    background-color: var(--secondary-light-color);
  }
}

.btn-tertiary-color {
  color: white;
  background-color: var(--tertiary-color);
  &:hover {
    color: white;
    background-color: var(--tertiary-light-color);
  }
}

.btn-light-outline {
  color: white;
  background-color: transparent;
  border: 2px solid white;
  &:hover {
    border-color: white;
    background-color: rgba(255, 255, 255, 0.15);
  }
}

/* sections */

.filtered-background {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
    mix-blend-mode: multiply;
    pointer-events: none;
    ;
  }
  &.primary-filter::before {
    background-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 0%);
  }
  &.secondary-filter::before {
    background-color: var(--secondary-color);
    background-color: color-mix(in srgb, var(--secondary-color), transparent 0%);
  }
  &.tertiary-filter::before {
    background-color: var(--tertiary-color);
    background-color: color-mix(in srgb, var(--tertiary-color), transparent 0%);
  }
}

#nosotros {
  background-image: url(../img/slide02.jpeg);
  background-size: cover;
}

#services-background-1 {
  background-image: url(../img/sprinter/sprinter-1x1.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center left;
}

#services-background-2, #sent {
  background-image: url(../img/obelisco-dia.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}

#services-background-3 {
  background-image: url(../img/obelisco-noche.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}


#porque {
  background-image: url(../img/interior01.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#mision {
  background-image: url(../img/minibus/mision-xs.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
}

#joinus {
  background-image: url(../img/driver.jpg);
  background-position: top;
  background-size: cover;
}

.filter-invert {
  filter: invert();
}

/* color end */

/* animations */

@keyframes x-scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes slide-from-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slide-from-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.animate-on-viewport {
  animation-timeline: view();
  animation-fill-mode: both;
  &.slide-from-left {
    animation-name: slide-from-left;
  }
  &.slide-from-right {
    animation-name: slide-from-right;
  }
  &.range-start-0 {animation-range-start:entry 0%;}
  &.range-start-10 {animation-range-start:entry 10%;}
  &.range-start-20 {animation-range-start:entry 20%;}
  &.range-start-30 {animation-range-start:entry 30%;}
  &.range-start-40 {animation-range-start:entry 40%;}
  &.range-start-50 {animation-range-start:entry 50%;}
  &.range-start-60 {animation-range-start:entry 60%;}
  &.range-start-70 {animation-range-start:entry 70%;}
  &.range-start-80 {animation-range-start:entry 80%;}
  &.range-start-90 {animation-range-start:entry 90%;}
  &.range-start-100 {animation-range-start:entry 100%;}
  &.range-end-0 {animation-range-end: cover 0%;}
  &.range-end-10 {animation-range-end: cover 10%;}
  &.range-end-20 {animation-range-end: cover 20%;}
  &.range-end-30 {animation-range-end: cover 30%;}
  &.range-end-40 {animation-range-end: cover 40%;}
  &.range-end-50 {animation-range-end: cover 50%;}
  &.range-end-60 {animation-range-end: cover 60%;}
  &.range-end-70 {animation-range-end: cover 70%;}
  &.range-end-80 {animation-range-end: cover 80%;}
  &.range-end-90 {animation-range-end: cover 90%;}
  &.range-end-100 {animation-range-end: cover 100%;}

}

/* animations-end */

/* interactions start */

.gallery-link {
  &:hover {
    & .overlay-text {
      transition: all 100ms ease;
      display: block !important;
    }
    & > img {
      transition: all 300ms ease;
      filter: brightness(40%);
    }
  }
}

/* interactions end */

/* positioning start */

html {
  scroll-padding-top: 5rem;
  scroll-behavior: smooth;
}

section {
  position: relative;
}

#float-logo {
  width: 20%;
  right: 1rem;
  bottom: 1rem;
  transform: translateX(-1rem) translateY(0%);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, .5);
}

/* positioning end */

.track {
  padding: 0 20px;
  overflow: hidden;
  display: flex;
  &:hover .feature-group{
    animation-play-state: paused;
  }
}

.feature-group {
  display: flex;
  gap: 20px;
  will-change: transform;
  animation: x-scrolling 30s linear infinite;
}

.feature {
  width: 300px;
}


/* sizing start */

.text-small {font-size: 0.75rem;}

.icon-16 {height: 16px;}
.icon-32 {height: 32px;}
.icon-64 {height: 64px; color: var(--tertiary-color);}

.vp-height-25 {min-height: 25dvh;}
.vp-height-50 {min-height: 50dvh;}
.vp-height-75 {min-height: 75dvh;}
.vp-height-100 {min-height: 100dvh;}

.navbar {
  min-height: 5rem;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, .25);
}

.carousel-inner > .carousel-item > img {
  width: 100%; /* Ensures the image spans the container width */
  max-height: 90vh; /* Set a fixed height */
  object-fit: cover; /* Maintains aspect ratio and fills the container */
}


.card-image {
  overflow: hidden;
}

#sent {
  min-height: 90dvh;
}

.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}

#contact-form-container {
  max-width: 992px;
}

.mirror-h {
  transform: scaleX(-1);
}

/* sizing end */

/* layout customization start */

.masonry {
  column-gap: 1rem;
  & .masonry-item {
    margin-bottom: 1rem;
  }
}

/* layout customization end */

/* bootstrap customization start */
#toggler-icon {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-brand {
  color: var(--light-color);
}

.navbar-nav {
  & .nav-link {
    /* color: var(--light-color); */
    border-bottom: 2px solid transparent;
    &:hover {
      color: var(--tertiary-color);
      border-color: var(--tertiary-color);
    }
    &.active {
      /* color: var(--light-color); */
      font-weight: 600;
      border-color: var(--light-color);
      &:hover {
        color: var(--tertiary-color);
        border-color: var(--tertiary-color);
      }
    }
  }
}

.navbar-toggler {
  /* color: var(--light-color); */
  border: none;
  font-size: 1.5rem;
  &:focus {
    outline: none;
    box-shadow: none;
  }
  &:active #toggler-icon {
    transform: rotate(90deg);
    opacity: 0.5;
  }
}

.rounded-pill {
  padding: .5rem 1.5rem;
}

.carousel-item img {
  filter:brightness(75%)
}

.carousel-caption {
  height: 100%;
  top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 0 15px rgba(0, 0, 0, .85);
}

.slide-title {
  font-size: 5dvw;
  margin: 0;
}

.slide-description {
  font-size: 3dvw;
}

.carousel-control-prev,
.carousel-control-next {
  width: 10dvw;
  &:hover {
    opacity: 1;
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--secondary-color);
  background-size: 75%;
  border-radius: 50%;
}

.carousel-control-prev-icon {
  background-position: 25%;
}

.carousel-control-next-icon {
  background-position: 75%;
}

.carousel-indicators [data-bs-target] {
  width: 1.5dvw;
  height: 1.5dvw;
  border-radius: 50%;
  margin: 0 1dvw;
  background-color: var(--secondary-color);
}

.carousel-indicators .active {
  width: 2dvw;
  height: 2dvw;
}

.modal-xxl {
  width: 100%;
  max-width: 768px;
}

/* bootstrap customization end */

.uploadcare--widget__button {
  background-color: var(--dark-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 2rem;
}

.uploadcare--widget__button:hover {
  background-color: var(--dark-light-color);
}

.uploadcare--widget__button:focus {
  background-color: var(--dark-light-color);
}


/* media queries start */
/* XS Screens */
  .columns-1 {column-count: 1;}
  .columns-2 {column-count: 2;}
  .columns-3 {column-count: 3;}
  .columns-4 {column-count: 4;}
  .columns-5 {column-count: 5;}
  .columns-6 {column-count: 6;}
  .columns-7 {column-count: 7;}
  .columns-8 {column-count: 8;}
  .columns-9 {column-count: 9;}
  .columns-10 {column-count: 10;}
  .columns-11 {column-count: 11;}
  .columns-12 {column-count: 12;}

/* SM Screens */
@media screen and (min-width: 576px) {
  .columns-sm-1 {column-count: 1;}
  .columns-sm-2 {column-count: 2;}
  .columns-sm-3 {column-count: 3;}
  .columns-sm-4 {column-count: 4;}
  .columns-sm-5 {column-count: 5;}
  .columns-sm-6 {column-count: 6;}
  .columns-sm-7 {column-count: 7;}
  .columns-sm-8 {column-count: 8;}
  .columns-sm-9 {column-count: 9;}
  .columns-sm-10 {column-count: 10;}
  .columns-sm-11 {column-count: 11;}
  .columns-sm-12 {column-count: 12;}

  #mision {
    background-image: url(../img/minibus/mision.png);
  }


}


/* MD Screens */
@media screen and (min-width: 768px) {
  .columns-sm-1 {column-count: 1;}
  .columns-sm-2 {column-count: 2;}
  .columns-sm-3 {column-count: 3;}
  .columns-sm-4 {column-count: 4;}
  .columns-sm-5 {column-count: 5;}
  .columns-sm-6 {column-count: 6;}
  .columns-sm-7 {column-count: 7;}
  .columns-sm-8 {column-count: 8;}
  .columns-sm-9 {column-count: 9;}
  .columns-sm-10 {column-count: 10;}
  .columns-sm-11 {column-count: 11;}
  .columns-sm-12 {column-count: 12;}
}

/* LG Screens */
@media screen and (min-width: 992px) {
  .rounded-start-md{
    border-radius: 1rem 0 0 1rem !important;
  }  
  .rounded-top-md{
    border-radius: 1rem 1rem 0 0 !important;
  }
  .rounded-end-md{
    border-radius: 0 1rem 1rem 0 !important;
  }  
  .rounded-bottom-md{
    border-radius: 0 0 1rem 1rem !important;
  }  
  .carousel-indicators [data-bs-target] {
    width: .5dvw;
    height: .5dvw;
    margin: 0 .5dvw;
  }
  .carousel-indicators .active {
    width: .75dvw;
    height: .75dvw;
  }
  .columns-md-1 {column-count: 1;}
  .columns-md-2 {column-count: 2;}
  .columns-md-3 {column-count: 3;}
  .columns-md-4 {column-count: 4;}
  .columns-md-5 {column-count: 5;}
  .columns-md-6 {column-count: 6;}
  .columns-md-7 {column-count: 7;}
  .columns-md-8 {column-count: 8;}
  .columns-md-9 {column-count: 9;}
  .columns-md-10 {column-count: 10;}
  .columns-md-11 {column-count: 11;}
  .columns-md-12 {column-count: 12;}
}

/* XL Screens */
@media screen and (min-width: 1200px) {
  
}

/* XXL Screens */
@media screen and (min-width: 1400px) {

}

/* media queries end */