/* ------------------------------------------ CONTENT ----------------------------------*/
.card h2{font-size: 1.5em; color: var(--lightbluecolor)}
.card h3{color: var(--lightbluecolor)}
.benefits{display: flex;flex-wrap: wrap;justify-content: center;}
.benefits:hover .benefit:after{opacity: 1}
.benefits .benefit{position: relative;display: flex;flex-direction: column;justify-content: space-around;padding: 15px;border: 1px solid var(--lightbluecolor);border-radius: 10px;text-align: center;color: var(--brightwhitecolor);transition: all ease-in-out .3s;box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);}
.benefits .benefit:before, .benefits .benefit:after{border-radius: inherit;content: "";height: 100%;left: 0;opacity: 0;position: absolute;top: 0;transition: opacity 500ms;width: 100%}
.benefits .benefit:before{background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.2), transparent 30%);z-index: 3}
.benefits .benefit:after{background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.5), transparent 30%);z-index: 1}
.numbers{color: var(--bluecolor);letter-spacing: 2px;}
.numbers span{background: var(--bluecolor);border-radius: 10px;color: var(--whitecolor);padding: 3px 6px 5px 6px;margin-right: 10px;font-size: 1.2em;text-shadow: 2px 2px 3px #000;}
.description-head{font-size: 0.9em;padding: 15px 0;color: var(--brightwhitecolor)}
.text-divider{display: flex;align-items: center;color: var(--lightbluecolor);text-transform: uppercase;}
.text-divider::before, .text-divider::after {content: "";flex: 1;height: 1px;border-top: 1px dotted var(--linecolor)}
.divider-label{padding: 0 15px;}
.list-landing p{letter-spacing: 0}
.service-ul{padding-left: 0;color: var(--linecolor);list-style: none;}
.service-ul li{position: relative;padding: 10px 0 10px 20px;color: var(--brightwhitecolor);font-size: 0.9em;}
.service-ul li:before{position: absolute;width: 7px;height: 7px;border-radius: 50%;background: var(--lightbluecolor);content: "";left: 0;top: 50%;transform: translateY(-50%)}
.service-ul li:after{content: "";position: absolute;border-left: 1px dotted var(--linecolor);bottom: 50%;left: 3px;top: 0;transform: translateY(-50%);}
.service-ul li:first-child:after{border-left: 1px dotted transparent;}
.brace {width: auto !important;min-width: 35px;padding-bottom: 20px;margin: 0 15px 15px;background-image: radial-gradient(circle at 0 0, rgba(255,255,255,0) 14.5px, var(--whitecolor) 15.5px, var(--whitecolor) 19.5px, rgba(255,255,255,0) 20.5px), radial-gradient(circle at 35px 0, rgba(255,255,255,0) 14.5px, var(--whitecolor) 15.5px, var(--whitecolor) 19.5px, rgba(255,255,255,0) 20.5px);background-size: 35px 20px;background-position: center bottom;background-repeat: no-repeat;transform: rotate(180deg);overflow: visible;}
.brace:before {width: 50%;border-top: 5px solid var(--whitecolor);border-left: 1px solid transparent;border-top-left-radius: 20% 30px;height: 100%;content: "";position: absolute;top: 100%;left: -15px;margin-top: -5px}
.brace:after {width: 50%;border-top: 5px solid var(--whitecolor);border-right: 1px solid transparent;border-top-right-radius: 20% 30px;height: 100%;content: "";position: absolute;top: 100%;right: -15px;margin-top: -5px}
.carousel-indicators{margin-bottom: 0;}
.carousel-control-next, .carousel-control-prev{align-items: flex-end;}
.carousel-indicators [data-bs-target]{background-color: var(--lightbluecolor)}
.carousel-control-next-icon{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300BCD4'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
.carousel-control-prev-icon{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300BCD4'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}
.case-short h3{font-size: 1em; letter-spacing: 1px}
.cases-block .case-toggle{position: absolute;opacity: 0;}
.cases-block .case-drawer{position: fixed;top: 0;left: 0;height: 100vh;width: 70vw;transform: translateX(-100%);transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;z-index: 60;box-shadow: 6px 0 24px rgba(0, 0, 0, .25);overflow-y: auto;visibility: hidden;opacity: 0;}
.case-drawer__inner{background: radial-gradient(circle, rgb(27 39 53 / 97%) 0%, rgb(9 10 15) 100%); min-height: 100%}
.cases-block .case-drawer__close{border: 0;background: transparent;font-size: 28px;line-height: 1;color: var(--whitecolor);float: right;margin-top: -6px;}
.cases-block .case-backdrop{position: fixed;inset: 0;background: rgba(0, 0, 0, .7);visibility: hidden;opacity: 0;transition: all ease-in-out .3s;z-index: 55;}
.cases-block .case-toggle:checked ~ .case-drawer{transform: translateX(0);visibility: visible;opacity: 1;}
.cases-block .case-toggle:checked ~ .case-backdrop{visibility: visible;opacity: 1;}
.cases-block .case-short{display: flex;flex-direction: column;}
.case-image{float: left;shape-outside: circle(50%);object-fit: none;height: 100px;width: 100px;border-radius: 50%;box-shadow: inset -10px 0 10px #0000008c;margin-right: 50px;}
.case-image img{width: 100%}
.case-more{padding: 15px 30px;margin: 0 auto;display: inline-block;transform: translate(0%, 0%);overflow: hidden;color: var(--whitecolor);font-size: 1em;letter-spacing: 2px;text-align: center;text-transform: uppercase;text-decoration: none;box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
.case-more::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--bluecolor);opacity: 0;transition: .2s opacity ease-in-out;}
.case-more:hover::before{opacity: 0.2}
.case-more span{position: absolute}
.case-more span:nth-child(1){top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(to left, transparent, var(--lightbluecolor));animation: 2s animateTop linear infinite;}
.case-more span:nth-child(2){top: 0;right: 0;height: 100%;width: 2px;background: linear-gradient(to top, transparent, var(--lightbluecolor));animation: 2s animateRight linear -1s infinite;}
.case-more span:nth-child(3){bottom: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(to right, transparent, var(--lightbluecolor));animation: 2s animateBottom linear infinite;}
.case-more span:nth-child(4){top: 0;left: 0;height: 100%;width: 2px;background: linear-gradient(to bottom, transparent, var(--lightbluecolor));animation: 2s animateLeft linear -1s infinite;}
@keyframes animateTop{ 0%{transform: translateX(100%)} 100%{transform: translateX(-100%)} }
@keyframes animateRight{ 0%{transform: translateY(100%)} 100%{transform: translateY(-100%)} }
@keyframes animateBottom{ 0%{transform: translateX(-100%)} 100%{transform: translateX(100%)} }
@keyframes animateLeft{ 0%{transform: translateY(-100%)} 100%{transform: translateY(100%)} }
@media (max-width: 1200px){.cases-block .case-drawer{width: 80vw;}}
@media (max-width: 768px){.cases-block .case-drawer{width: 100vw;}}
.accordion-item{background: var(--gradientopasitycolor);border: 1px solid var(--linecolor);}
.accordion-body{color: var(--whitecolor);box-shadow: inset 0 0 10px #000;}
.accordion-button{background: var(--gradientcolor); color: var(--whitecolor);min-height: 5em;}
.accordion-button:focus{box-shadow: none}
.accordion-button:not(.collapsed){background: var(--gradientcolor);color: var(--bluecolor)}
/* -------------------------------------- /CONTENT ------------------------------------*/