/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: "Gothic A1", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #585DF6; line-height: 170%; 
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
 font-weight: 700
}
h4 {
    font-weight: 600;    
}
p { font-size: 12pt}

h5 {
    font-weight: 600;
    font-size: 1.15rem;
}

body {
 background-image: 
     radial-gradient(25% 25% at 25% 25%,#FCFAFB 80%,#0000 81%),
     radial-gradient(25% 25% at 75% 75%,#FCFAFB 80%,#0000 81%);
   background-size: 50px 50px;
    
}

body .container-sm {max-width: 800px; margin: 0 auto}

header .row {margin-top: 10px;}
header.fixed .row {
  
  width: 100%; max-width: 800px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
    position: fixed;
    top: 10px;
    width: 100%;
    border: 1px solid rgb(235, 238, 241);
  border-radius: 72px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 150ms ease 0s, transform 150ms ease 0s, -webkit-backdrop-filter 150ms ease 0s;
  backdrop-filter: blur(10px);}

header.fixed .row .logo {display: block}
header.fixed .row .logo img {width: 40px}
header.fixed .row .bell span {display: none}
header.fixed .row .bell i {background: #000; color: #fff; border-radius: 50%; width: 40px; height: 40px; display: inline-block; line-height: 40px; font-size: 20px}

header .row .logo {display: none}
header .bell {border-radius: 20px; padding: 5px 20px; border: 1px solid rgb(226, 226, 226);
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0); display: inline-block; font-weight: 600}
header .bot-dots {background: #ededed; border: 1px solid #ccc; border-radius: 50%; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px;  color: #000 }
header.fixed .bell {background: none; border: none; padding: 0}
.social a {margin: 0 5px; display: inline-block}
.social a:hover {transform: scale(1.2)}

body .card {background: #585DF6; color: #fff; border-radius: 8px; border: 1px solid #0A1467; box-shadow: 8px 8px #0A1467; text-align: center; color: #fff; padding: 15px 0; margin: 20px 0}
body .card a {color: #fff}

.link-1 {margin: 20px 0; font-weight: 700; display: block}
.vin1 {position: absolute;
  left: 5px; top: 50%;
  transform: translateY(-50%);
  font-size: 30px; width: 50px; height: 50px; line-height: 50px; text-align: center;overflow: hidden}
.vin1 img {height: 100%}

.card .bot-dots {
  opacity: 0;    
  color: #fff;
  position: absolute;
  right: 10px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background: rgba(255,255,255,0.1);
  display: inline-block;
  line-height: 35px;
  bottom: 10px;
  z-index: 999; cursor: pointer}

.bot-dots:before {   
  content: "\F5D4";
  font-family: "Bootstrap-icons";}

.card:hover .bot-dots {
    opacity: 1;
}

.card.destacada {padding: 0; overflow: hidden}
.card.destacada .label {position: absolute;
  bottom: 5%; left: 5%;
  z-index: 999;
  display: block;}

.card:hover {transform: scale(0.99)}

.list-group-item  {text-align: start}
.list-group-item  a {color: #000; display: block}
.list-group-item  i {display: inline-block; margin-right: 10px}
.list-group-item a:after {content: "\F285"; font-family: "Bootstrap-icons"; position: absolute; right: 2%}

@media (max-width: 768px) {
  .section-header p {
    font-size: 1.2rem;
  
  }
   
}