/* Content/css/v2/sections/product-page.css
   Powers _ClientMangement.cshtml, _Automation.cshtml, _Compliance.cshtml
   and _FeatureFragment.cshtml (all rendered through Views/Home/... via
   ProductController -> Index.cshtml, switched on ViewBag.Filter).

   These pages were NOT redesigned -- per instruction, ported the real
   rules used by this exact markup out of the legacy assets.3.0/css/
   style.1.0.6.css, in original cascade order, rather than reloading
   that whole Bootstrap-3-era stylesheet (which would collide with
   Bootstrap 5 class names like .btn/.modal/.close/.container already
   in use by the v2 navbar/footer/modals).

   Skipped from the legacy sheet: .hero-button variants (unused by
   this markup), and rules scoped to other legacy pages
   (.registration-page, .pricing-package-area, .hero-resources, etc).
*/


.no-gutter {
    margin-right: 0;
    margin-left: 0;
}

.no-gutter .col,
.no-gutter [class*=col-] {
    padding-left: 0;
    padding-right: 0;
}

.pt-80 {
    padding-top: 80px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-80 {
    padding-bottom: 80px !important;
}

.key-benefits-area .section-title,
.interagtion-section .section-title {
    margin-bottom: 40px;
    position: relative;
}

.bg-vector2 {
    background: url("../../../../assets.3.0/img/vector-bg2.png") no-repeat center left / cover !important;
}

.hero-title h1 {
    font-weight: 700;
    color: #071A2C;
    line-height: 120%;
    font-size: 51px;
    margin-bottom: 15px;
}

.hero-title {
    padding-bottom: 55px;
}

.hero-image {
    z-index: 2;
    position: relative;
    padding-left: 68px;
    width: 92%;
}

.hero-image img {
    filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.15));
}

.hero-dot {
    position: absolute;
    right: -86px;
    bottom: 61px;
    z-index: -1;
}

.hero-area p {
    line-height: 24px;
    color: #33383D;
    font-size: 16px;
    margin-bottom: 26px;
    font-weight: 500;
}

.video-hero-area .hero-image img.banner-hero {
    filter: none;
    box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.15);
}

.hero-video-content {
    position: relative;
}

.feature-hero .hero-image .play img {
    filter: none;
}

.play.external_link ,
.play.video-popup {
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.video-hero-area.hero-area .hero-image {
    margin-left: auto;
    margin-right: -62px;
    width: 100%;
}

.video-hero-area.feature-hero .hero-image img {
    filter: none;
}

.video-hero-area .hero-dot {
    right: -40px;
}

.hero-info span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #545655;
    letter-spacing: -0.33px;
    margin-right: 13px;
}

.hero-info {
    display: flex;
    padding-top: 7px;
    padding-left: 3px;
}

.hero-info span img {
    top: -2px;
    position: relative;
    padding-right: 3px;
}

.animation-up {
    animation: up 5s linear 0s infinite normal forwards;
}

@keyframes up {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-40px);
    }

    100% {
        transform: translateY(0);
    }
}

.key-benefits-area .section-title h2,
.interagtion-section .section-title h2 {
    line-height: 53px;
}

.key-benefits-area .section-title p,
.interagtion-section .section-title p {
    font-weight: 500;
    line-height: 21px;
}

.feature-hero .hero-image img {
    filter: drop-shadow(0px 4px 25px rgba(0, 0, 0, 0.1));
}

.feature-hero .hero-image {
    margin-left: 68px;
    padding-left: 0;
}

.title-style-3.section-title p {
    margin-bottom: 5px;
}

.title-style-3.section-title h2 {
    font-weight: 700;
    line-height: 44px;
}

.tab-text h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #0B6DFF;
    margin-bottom: 15px;
}

.tab-text p {
    font-size: 20px;
    font-weight: 500;
    line-height: 37px;
    margin-bottom: 8px;
}

.tab-text {
    padding-top: 124px;
}

.video-hero-area.integration .hero-image {
    margin-right: 0;
    padding-right: 7px;
    margin-left: 0;
    padding-top: 50px;
    display: flex;
    justify-content: right;
}

.video-hero-area.integration .hero-title h1 {
    line-height: 54px;
    padding-top: 16px;
    margin-bottom: 12px;
}

.video-hero-area.integration {
    background: #F5F7F7;
}

.hero-area.integration p {
    width: 519px;
    margin-bottom: 4px;
}

.integration .hero-info img {
    top: 0px;
}

.integration .hero-title {
    padding-bottom: 97px;
    padding-top: 107px;
}

.benefit-container .col {
    padding-left: 30px;
    padding-right: 30px;
}

.benefit-container .row {
    margin-left: 30px;
    margin-right: 30px;
}

.single-key h3 {
    line-height: 24px;
    color: #151515;
    margin-bottom: 8px;
    padding-top: 13px;
}

.single-key p {
    font-size: 14px;
    line-height: 24px;
    color: #000000;
}

.key-benefits-area .section-title.title-style-3 {
    margin-bottom: 38px;
}

.interagtion-section .section-title {
    margin-bottom: 0;
}

.interagtion-content .tab-text {
    padding-top: 22px;
}

.interagtion-content .tab-text h2 {
    color: #33383D;
    margin-bottom: 9px;
}

.interagtion-content .tab-text p {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 28px;
}

.interagtion-content .tab-text p:nth-of-type(2) {
    margin-bottom: 31px
}

.integration.video-hero-area .hero-dot {
    bottom: 0;
}

.icon-product-ce {
    font-size: 6em;
    color: #2b70d6
}

.icon-product-ce-small {
    font-size: 3em;
    color: #2b70d6
}

.icon-product-ce-icon {
    font-size: 1.25em;
    color: #2b70d6
}