body {
    font-family: 'Open Sans', sans-serif;
}

img{
    width: 100%;
}

.header {
    background-color: #222222;
}

.nav-item .nav-link,
.nav-link .active {
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 15px;
}

.navbar-brand {
    color: white;
}

.container {
    max-width: 1140px;
}

.nav.navbar.navbar-expand-lg {
    padding: 0;
}

.carousel-fade .carousel-inner .carousel-item {
    opacity: 0;
    transition: opacity 500ms ease-in-out 0s;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-indicators {
    bottom: 10px;
}

.carousel-indicators li {
    background-color: #ddd;
    border: 1px solid #ddd;
    margin: 0 3px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.carousel-indicators .active {
    background-color: #333;
}

ol {
    list-style: none;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
}

.carousel-inner {
    height: 100%;
    /* max-height: 350px; */
}

.triotagapayo{
    margin-top: 30px;
}

.box{
    box-shadow: -11px 12px 16px -1px rgba(0, 0, 0, 0.65);
    border: 1px solid #eee;
    text-align: center;
}

.context h3{
    font-size: 20px;
    color: black;
    font-weight: 600;
    margin-bottom: 0.8em;
}

.context p {
    font-size: 16px;
    color: black;
    margin-bottom: 20px;
}


.context{
        padding: 20px 20px 10px;
}

.product-box{
    box-shadow: -11px 12px 16px -1px rgba(0, 0, 0, 0.65);
    background-color: black;
    border-radius: 8px;
    padding-top: 1px;
    margin: 0 0 2.992em 0;
}

.product-sec{
        margin-top: 20px;
        background-image: url(img/p-bg100.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 30px 10px;
        background-position: center;
}

.product-sec h1{
    font-size: 35px;
    font-weight: 700;
    color: white;
    margin: 0 0 0.8em;
}

.p-image img{
    border-radius: 5% 5% 0 0;
    margin: 0 0 1em;
}
.product-sec h2 {
    font-size: 20px;
    font-weight: 700;
    color: white;
}
.product-sec p {
    font-size: 20px;
    color: white;
}
.btn-light{
    font-size: 16px;
    padding: 5px 1em;
    width: 50%;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer{
        padding: 20px;
}

.footer h2{
    color: #232323;
    margin: 0 0 0.8em;
    font-size: 24px;
    font-weight: 700;
}

.footer p a, .footer p{
    color: black;
    font-size: 15px;
    text-decoration: none;
}


@media only screen and (max-width: 600px) {
   .box{
    margin-bottom: 20px;
   }
   .btn-light {
       width: 70%;
       padding: 5px;
   }
}