/*----------------------------------*/
/*          General Styles          */
/*   ---------------------------    */
/*   Topbar                         */
/*----------------------------------*/
.navbar-brand img {
    content: url('/uploads/template/logo-ayudarme-regular.svg'); /* Default logo */
}
body.frontpage .navbar-brand img {
    content: url('/uploads/template/logo-ayudarme-blanco.svg'); /* Logo for frontpage */
}
.NavbarDesk {
    z-index: 100;
    background: rgb(221 220 220 / 14%);
    box-shadow: 0 0 30px rgb(0 0 0 / 75%);
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .NavbarDesk {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}
ul.navbar-nav > li.nav-item > a {
    color: #233a74 ;
    font-weight: 100;
    font-size: 1rem;
    letter-spacing: 1px;
    &:hover {
        color: #000 !important;
    }
}
body.frontpage ul.navbar-nav > li.nav-item > a {
    color: #fff;
    &:hover {
        color: #77CDFF !important;
    }
}

/*   ---------------------------    */
/*   Backgrounds
/*   ---------------------------    */
.back-gradient-primary {
    background: linear-gradient(90deg, #445d9b 0%, #2e4683 25%, #233a74 50%, #2e4683 75%, #445d9b 100%) !important;
}
.btn-outline-primary {
    --bs-btn-color: #233a74;
    --bs-btn-border-color: #233a74;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #233a74;
    --bs-btn-hover-border-color: #233a74;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #233a74;
    --bs-btn-active-border-color: #233a74;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #233a74;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #233a74;
    --bs-gradient: none;
}
.bg-gradient-blue {
    background: #3f3caf linear-gradient(180deg, #3f3caf, #1b1469) repeat-x !important;
    color: #fff;
    &:hover{
        border: 1px solid #1b1469 !important;
        color: #1b1469 !important;
        background: #fff !important;
    }
}
.BlueLogoBack {
    background: #233a74;
    background-color: #233a74 !important;
}
.BlueLightBack {
    background: #a8dadc;
}
/* frontpage */




.content-wrapper {
    position: relative; /* Needed for z-index */
    z-index: 1; /* Ensure content is above the slider */
    padding-top: 20px; /* Add padding to content area */
    padding-bottom: 20px;
}
.blue-text {
    color: #233a74;
}

.DivAlignCenter {
    margin: auto !important;
} 
#slogan .row .col {
    padding: 3rem;
}
#slogan .row .col i {
    font-size: 6em;
}
#FrontAbout .row > div > p {
    max-width: 650px;
    margin-bottom: 4rem;
}
.separator1rem { height: 1rem; } 
.separator1-5rem { height: 1.5rem; } 
.separator2rem { height: 2rem; }
.separator3rem { height: 3rem; }
.separator7rem { height: 7rem; }
.separator8rem { height: 8rem; }
.ComoIcon {
    width: 80%;
}
.TextUppercase {
    text-transform: uppercase;
}
.LogoFooter {
    width: 100%;
    max-width: 200px;
}
.dropdown-menu[data-bs-popper] {
    left: -4rem;
    width: 250px;
    border-radius: 10px;
}
.NavBarCartList {
    list-style-type: none;
    padding-left: 15px;
}

.outline-frame-blue {
    border: 2px solid #233a74;
    padding: 10px;
}
.img-fit-cover {
    object-fit:cover;
}
/* Frontpage Slider */
#HomeSlider {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    & .carousel-item {
        background: #000;
        height: 876px;
        & img {
            object-fit: cover;
            object-position: 47% 45%;
            height: 876px;
            opacity: .5;
        }
        & .carousel-caption {
            bottom: 42%;
        }
        & h5  {
            color: #fff;
            font-size: 3em;
        }
        & h6  {
            color: #fff;
            font-size: 2em;
        }
        & p {
            color: #fff;
            font-size: 1.5em;
        }
    }
}
/* .frontpage ul.navbar-nav > li.nav-item > a */

.AyudarLogo {
    width: 250px;
    margin-top: 20px;
}
Section img {
    width: 100%;
}


.radius-25 {
    border-radius: 25px !important;
}
.blue-border {
    border: 10px solid #1b1469;
}
.box-shadow {
    box-shadow: 9px 4px 12px 6px #919191e6 !important;
}
.IconHowto {
    width: 100%;
    max-width: 250px;
}
.shape {
  position: absolute;
  pointer-events: none;
}

.shape svg {
    width: 100%;
}
.shape > * {
  display: block;
}

.shape-top {
  top: -1px;
  right: 0;
  left: 0;
}

.shape-top > * {
  transform-origin: bottom center;
}

.shape-end {
  top: 0;
  right: -1px;
  bottom: 0;
  left: 0;
}

.shape-end > * {
  position: inherit;
  top: inherit;
  bottom: inherit;
  right: inherit;
  transform-origin: center left;
}

.shape-bottom {
  right: 0;
  bottom: -1px;
  left: 0;
}

.shape-bottom > * {
  transform-origin: top center;
}

.shape-bottom-100 {
  right: 0;
  bottom: 100%;
  left: 0;
}

.shape-bottom-100 > * {
  transform-origin: top center;
}

.shape-start {
  top: 0;
  right: 0;
  bottom: 0;
  left: -1px;
}

.shape-start > * {
  position: inherit;
  top: inherit;
  bottom: inherit;
  left: inherit;
  transform-origin: center right;
}

.shape-fluid-x > * {
  width: 100%;
  height: auto;
}

.shape-fluid-y > * {
  width: auto;
  height: 100%;
}

.shape-flip-x {
  transform: scaleX(-1);
}

.shape-flip-y {
  transform: scaleY(-1);
}

#servicesCarousel .carousel-inner p {
    height: 96px;
}
#servicesCarousel .carousel-inner h5 {
    height: 70px;
}
.shadow-bubble-white {
    background-color: rgb(165 176 193 / 25%) !important;
}
.bubble-white {
    --bs-text-opacity: 1;
    color: rgb(225 225 225) !important;
}

.card-product {
    object-fit: cover;
}
/* Product Carrousel Styles */
.carousel-control-next, .carousel-control-prev {
    top: 30%;
    bottom: 30%;
    background: #000;
    width: 40px;
    border-radius: 5px;
}
/* Store */
#FrontStore h5 {
    font-size: 1rem;
}


/* Text Styles */
.Capitalized {
    text-transform: capitalize;
}

/*Blog Styles */
.RowPost {
    border-radius: 10px;
    padding: 5px 15px 15px 15px;
    box-shadow: 0px 0px 15px #33333336;
    & img {
        box-shadow: 3px 3px 3px 1px #333;
    }
}

.img-thumbnail {
    width: 200px;
    height: auto;
}

.linkfooter {
    text-decoration: none;
    color: #fff;
    &:hover {
        color: #9ba4b9;
    }
}

.owl-nav button {
  position: absolute;
  top: 50%;
  background-color: #000;
  color: #fff;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
.owl-nav button.owl-prev {
  left: 0;
}
.owl-nav button.owl-next {
  right: 0;
}

.owl-dots {
  text-align: center;
  padding-top: 15px;
}
.owl-dots button.owl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
.owl-dots button.owl-dot.active {
  background-color: #000;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.38) !important;
}

.owl-nav button:focus {
    outline: none;
}
.owl-item {
  height: 300px !important; /* Adjust this value as needed */
  display: flex;
}
.img-cart {
    width: 100px;
}
.cartthumb {
    width: 40px;
    border-radius: 10px;
    padding-right: 5px;
}
.NavBarCartList li {
    padding-top: 10px;
    
    & div {
        display: inline-block;
        vertical-align: middle;
    }
    & .list-thumb {
        width: 40px;
    }
    & .list-content {
        width: 140px;
        font-size: .75rem;
    }
    & .list-qty {
        width: 40px;
    }
}
ul.CheckoutSummaryList {
    list-style-type: none;
    padding-left: 15px;
    & li {
        padding-top: 10px;
    }
    & li div {
        display: inline-block;
        vertical-align: middle;
    }
    & li .list-thumb {
        width: 100%;
        max-width: 70px;
        & .cartthumb {
            width: 70px;
        }
    }
    & li .list-content {
        width: 100%;
        max-width: 200px;
        font-size: .9rem;
    }
    & li .list-qty {
        width: 80px;
        font-size: .8rem;
    
    }
}
/* Style for mobile devices */
@media only screen and (max-width: 600px) {

    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        /* .NavbarDesk {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        } */
    }
}
body, html {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
  }

  .owl-carousel .owl-item {
    min-height: 515px;
  }