:root {
    --azul: #032A45;
    --rojo: #CA0B15; 
    --blanco: #fff; 
    --negro: #221f1f; 
}


  /*estilo gral*/
  body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
 
.bg-zorbel {
  background-image: url(/img/Recurso\ 1.webp);
  background-repeat: no-repeat;
  background-size:cover;

}

p {
    color: var(--negro);
}

 /*scrollbar style */
 ::-webkit-scrollbar-track
 {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   background-color: var(--azul); /* Color de fondo  */
 }
 
 ::-webkit-scrollbar
 {
   width: 6px;
   background-color: #F5F5F5;
 }
 
 ::-webkit-scrollbar-thumb
 {
   background-color: var(--rojo); /*Color de barra*/
 }
 
 .hover-brand:hover {
  opacity: 0.8;
  
}

.navbar-brand {
  display: none;
}

/*navbar*/

.navbar-brand:hover {
    opacity: 0.8;
  }

  .main-brand-show  {
    display:block;
   
  }

  

/*
.navbar-brand img {
 display: none;   
} 
*/ 

.navbar {
  height: 96px;
}


@media (max-width: 768px) {
.navbar-brand img {
    display: block;   
   } 
}

@media (max-width: 768px) {
  .navbar-brand { 
    display: block;
  }
 .main-brand-resp {
  display: block;
 }
}
  .navbar a {
    font-weight: bold;
    color: var(--azul);
}

@media (max-width: 768px) {
  .navbar-nav { 
    background-color: white;
}
}


.navbar ul.navbar-nav li.nav-link a.nav-link {
  margin-left: 10px;
  display: inline;
  padding-left: 15px;
  padding-right: 15px;
 
}

.navbar ul.navbar-nav li.nav-link a.nav-link:hover {
 background-color: var(--azul);
 color: var(--blanco);
 border-radius: 18px;
 
}


/*fin navbar */

/* */
  /* hamburger menu */
  .menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
  }
  
  .menu.navbar-toggler:focus {
    box-shadow: none;
  }
  
  .line {
    fill: none;
    stroke: #747474; /*color de hamburguer*/
  
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  
  .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }
  
  .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  
  .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  
  .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }
  
  .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  
  .navbar-toggler {
    border: none !important;
    font-size: 1em !important;
  }
  
/*fin hamburguer*/


/*banner ppal*/  

.banner-sec {
  margin-top: 5em;
  margin-bottom: 5em;
}

@media (max-width: 768px) {
  .banner-sec {
   margin-bottom: 2em;
  }
}

.btn-zorbel {
    background-color: var(--rojo);
    color: var(--blanco);
    font-weight: bold;
}

.btn-zorbel:hover {
    background-color: var(--azul);
    color: var(--blanco);
}

@media (max-width: 768px) {
    div.logo-banner {
        display: none;
    }
}

/*fin banner ppal*/

/*sec 1*/

.quienes-sec {
  padding-top: 6em;
  padding-bottom: 5em;
}

@media (max-width: 768px) {
  .quienes-sec {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

h1.heading {
  color: var(--rojo);
  font-weight: bold;



 }
/*fin sec 1*/

/*sec 2*/

.que-sec {
  padding-top: 5em;
  padding-bottom: 5em;
}

@media (max-width: 768px) {
  .que-sec {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}


.interests-desc {
  transition: all 0.2s ease;
  background-color: var(--azul);
  color: var(--blanco);
}

.interests-desc .title {
  font-weight: 500
}

.interests-desc:hover {
  background-color: var(--rojo);
  box-shadow: 0 10px 25px rgba(60, 72, 88, 0.15);
  transform: translateY(-5px)
}


/*fin sec 2*/

/*anim on scroll*/



.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}
/*fin anim on*/

/*slider clientes*/



.slide img {
    width: 140px;
    height: 140px;
    animation: scroll 20s alternate infinite;
  }
  
  .slide-track {
    width: 100%;
    display: flex;
    gap: 3em;
    overflow: hidden;
  }
  
  @media (max-width: 768px){
    
  .slide-track {
    width: 100%;
    display: flex;
    gap: 1em;
    overflow: hidden;
  }
  }

  
  @keyframes scroll {
    0% {transform: translateX(0);}
    100% {transform: translatex(-2450%)}
  }

  .slider-sec {
    padding-top: 5em ;
    padding-bottom: 5em ;
  }

 @media (max-width: 768px) {
  .slider-sec {
   padding-top: 2em ;
   padding-bottom: 2em ;
  }
 }


  /*fin slider clientes*/

/*testimonios*/

.card{
    
  border:none;
}

.review p {
  margin-top:5px;
  font-size:12px;
}

/*fin testimonios*/
  /*contacto*/
.contacto-sec  {
  padding-top: 2em ;
  padding-bottom: 5em ;  
}

.contacto-sec h2.heading {
  color: var(--azul);
  font-weight: bold;
  border-bottom: 1px solid #CA0B15;
}

.contacto p.span-text {
  margin-bottom: 8px !important;
  font-size: 0.9em;
}
p.subtitle {
  font-size: 0.95em  ;
}

.zorbel-link {
  color: var(--negro);
  font-weight: bold;
  text-decoration: none;
}

.zorbel-link:hover {
  color: var(--rojo);
  font-weight: bold;
}


  /*fin contacto*/

  /*footer*/
  #footer {
    margin-top: auto;
   
  }
  
  .icon.hover-brand:hover svg {
    fill: var(--azul) !important;
  }

  /*Fin footer*/ 

  /*btn whatsapp*/
  .whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
    animation: breathe  3s ease-in-out infinite;
  }
  
  
  .whatsapp-icon {
    margin-top:9px ;
  }


@keyframes 

breathe {
  
0% {
    box-shadow: 0 0 0 0 #25d366;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/*switch secc resp*/

@media (max-width: 768px) {
.quienes-sec {
  padding-top: 7em !important;
}
}

@media (max-width: 768px) {
  section.banner-md {
    display: none !important;
  }
  h1.heading-md {
    display: none !important;
  }
}

@media (min-width: 768px) {
  section.banner-xs {
    display: none !important;
  }
}