@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Oswald:wght@200;300;400&display=swap');

/* Redes sociales */

.social-bar {
    position: fixed;
    right: 0;
    top: 35%;
    font-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 3;
}

.bi {
    color: white;
    text-decoration: none;
    padding: 1rem 0 1rem 1rem;
    display: flex;
    transition: all 0.5s;
}

.bi-facebook {
    background: rgb(60, 73, 210);
    background: linear-gradient(21deg, rgba(60, 73, 210, 1) 0%, rgba(20, 54, 204, 1) 21%, rgba(9, 17, 121, 1) 52%, rgba(0, 104, 255, 1) 91%);
}

.bi-instagram {
    background: rgb(210, 97, 60);
    background: linear-gradient(21deg, rgba(210, 97, 60, 1) 0%, rgba(204, 66, 20, 1) 20%, rgba(121, 9, 94, 1) 57%, rgba(196, 0, 255, 1) 91%);
}

.bi-twitter {
    background: rgb(60, 125, 210);
    background: linear-gradient(21deg, rgb(43, 148, 189) 0%, rgb(108, 175, 219) 21%, rgb(53, 201, 247) 52%, rgb(18, 166, 235) 82%);
}

.bi-tiktok {
    background: rgb(73, 101, 101);
    background: linear-gradient(21deg, rgba(73, 101, 101, 1) 0%, rgb(89, 139, 141) 21%, rgb(120, 156, 160) 52%, rgb(80, 112, 116) 82%);
}

.bi-whatsapp {
    background: rgb(57, 173, 74);
    background: linear-gradient(21deg, rgba(57, 173, 74, 1) 0%, rgba(36, 139, 36, 1) 50%, rgba(89, 218, 56, 1) 82%);
}

.bi-envelope {
    background: rgb(173, 139, 57);
    background: linear-gradient(21deg, rgba(173, 139, 57, 1) 0%, rgba(187, 46, 91, 1) 50%, rgba(218, 156, 56, 1) 82%);
}

.bi:first-child {
    border-radius: 9px 0 0 0;
}

.bi:last-child {
    border-radius: 0 0 0 9px;
}

.bi:hover {
    padding-right: 4rem;
    border-radius: 9px 0 0 9px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.42);
    font-size: 1.5rem;
    color: white;
}


/* Redea sociales */

.root {
    --primary: #0d6efd;
    --dark: #21252f;
    --body: #888;
    --box-shadow: 0 8px 22px rgba(0, 0, 0, 0.644);
    --bg-info: red;
}

body {
    font-family: 'Oswald', sans-serif;
    line-height: 1.7;
    color: var(--body);
}

h1,
h2,
h4,
h5,
h6,
.display-4 {
    color: var(--dark);
    font-weight: 700;
}

nav {
    transition: top 0.5s;
}

a {
    color: var(--dark);
    text-decoration: none;
}

.navbar {
    box-shadow: var(--box-shadow);
}

.navbar .logo {
    width: 160px;
}

.navbar .nav-link {
    font-size: 14px;
    font-weight: 700;
}

.btn {
    padding: 14px 18px;
    border-width: 2px;
    border-radius: 0;
}

.hero {
    background-image: url(/resources/img/slider/24-7.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
}

.hero:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(21, 20, 51, 0.8);
    z-index: -1;
}

#logo-inicio {
    width: 90%;
}

section {
    padding-top: 12px;
    padding-bottom: 12px;
}

.card-effect {
    box-shadow: var(--box-shadow);
    background-color: #fff;
    padding: 25px;
    transition: all 0.35s ease;
}

.card-effect:hover {
    box-shadow: none;
    transform: translateY(5px);
}

.iconbox {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #76b3d9;
    color: #fff;
    font-size: 32px;
    border-radius: 100px;
}

.service {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.service::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    background-color: #76b3d9;
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease;
}

.service:hover .iconbox {
    background-color: #fff;
    color: #b81e28;
}

.service:hover h5,
.service:hover p {
    color: #fff;
}

.service:hover::after {
    opacity: 1;
    top: 0;
}

#carouselEsp.carousel {
    background-color: rgba(144, 242, 210, 0.4);
}

.carousel-caption {
    left: 55%;
    bottom: 35%;
}

.carousel-caption h3 {
    color: #21252f;
    font-size: 33px;
}

.carousel-indicators {
    visibility: hidden;
}

.picture {
    width: 250px;
    height: 250px;
    position: relative;
    right: 30%;
    /* border-radius: 100%; */
}

@media screen and(max-width:1024px) {
    .comentimg {
        height: 200px;
    }
}

@media screen and (max-width:768px) {
    .social-bar {
        position: fixed;
        right: 0;
        top: 35%;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 3;
    }
    .bi {
        color: white;
        text-decoration: none;
        padding: 5px;
        display: flex;
    }
    .picture {
        width: 150px;
        height: 150px;
        position: relative;
        right: 30%;
        border-radius: 100%;
    }
    .carousel-caption h3 {
        color: #21252f;
        font-size: 17px;
    }
}

@media screen and (max-width:425px) {
    .social-bar {
        position: fixed;
        right: 0;
        top: 35%;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 3;
    }
    .bi {
        color: white;
        text-decoration: none;
        padding: 5px;
        display: flex;
    }
    .picture {
        width: 100px;
        height: 100px;
        position: relative;
        right: 30%;
        border-radius: 100%;
    }
}

.progress {
    height: 5%;
}

.porcentajeText {
    background-color: #76b3d9;
}

.calidad {
    width: 450px;
    margin-top: 30px;
}

.comentimg {
    width: 90%;
    height: 30vh;
}

.footerimg {
    width: 45%;
}

.btnaviso {
    background-color: #76b3d9;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}

.btnaviso:hover {
    background-color: #127fc4;
    color: white;
}