@import '../Headers/Header_02/header_02.css';

.bk-grad-full:after {
    background: radial-gradient(
        ellipse 243% 67% at 68% 78%, /* width height - X Y */ 
        rgba(0, 0, 0, 1) 1%, 
        rgba(0, 0, 0, 0) 76%
    );
    bottom: -40vw;
    height: 102%;
}
section#workflow:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(
        360deg
        ,rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 1) 82%, 
        rgba(0, 0, 0, 0) 100%
    );
}


/* Intro Stripe
--------------------------------------------------------------------*/
    #intro-stripe .col-img {
        width: 15.1vw; /* 290 */
        height: 19.27vw; /* 370 */
        min-width: 15.1vw; /* 290 */
    }

    #intro-stripe .col {
        padding-bottom: 4.17vw; /* 80 */
        position: relative;
    }
    #intro-stripe .col-container:before {
        content: attr(data-count);
        position: absolute;
        top: 50%;
        left: -6.25vw; /* 120 */
        transform: translateY(-50%);
        height: 4.17vw;  /* 80 */
        width: 4.17vw; /* 80 */
        background-color: #333743;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.82vw; /* 35 */
        font-family: var(--sbd-font);
        color: #535760;
    }
    #intro-stripe .col-container-inner {
        height: 23.44vw; /* 450 */
        background-color: #0000000d;
        backdrop-filter: blur(12px);
    }

    #intro-stripe .sticked-boxes .stripe-container-inner {
        position: relative;
    }
    #intro-stripe .sticked-boxes .stripe-container-inner .col {
        position: sticky;
        top: 11.979vw;
    }


/* Sistem Integrations
--------------------------------------------------------------------*/
    #sistem-integrations .stripe-content .two-col-grid {
        grid-template-columns: 62% 1fr;
    }
    #sistem-integrations .col-content {
        z-index: 2;
        padding-top: 2.08vw; /* 40 */
    }
    #sistem-integrations .cool-img-container {
        height: 25vw; /* 480 */
    }


/* Workflow
--------------------------------------------------------------------*/
    .sticky-two-col .wd_40 {
        width: 40%;
    }
    .sticky-two-col .wd_60 {
        width: 60%;
        padding-left: 5.21vw; /* 100 */
    }
    .sticky-two-col .intro-title,
    .sticky-two-col .sticky-card {
        top: 12em;
    }
    .sticky-two-col .single-card-container {
        height: 16.67vw; /* 320 */
        background-color: #0c0f1659;
        position: relative;
        backdrop-filter: blur(11px);
    }
    .sticky-two-col .single-card-content {
        width: calc(100% - 13.54vw); /* 260 */
        padding: 0 1.04vw 0 6.25vw; /* 0 20 0 120 */
    }
    .sticky-two-col .single-card-img {
        width: 13.54vw; /* 260 */
        min-width: 13.54vw; /* 260 */
        height: 12.5vw; /* 240 */
        border-radius: 1.3vw; /* 25 */
    }
    .sticky-two-col .sticky-card {
        padding-bottom: 4.17vw; /* 80 */
    }

    .sticky-two-col .pattern-img-container {
        position: sticky;
        top: -10em;
    }

    .sticky-card .card-title {
        padding-bottom: 0.78vw; /* 15 */
        position: relative;
    }
    .sticky-card .box-count {
        position: absolute;
        top: 0;
        left: -2.66vw; /* 51 */
    }

    
/* 1920x1080
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {

}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1690px) {

}

/* Team grid to set as classic team grid on four col grid
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
    #intro-stripe .col-container-inner {
        height: 350px;
    }

    #sistem-integrations .col-content {
        padding-top: 30px;
    }
    #sistem-integrations .cool-img-container {
        height: 28.47vw;
    }
    
    .sticky-two-col .single-card-container {
        height: 240px;
    }
    .sticky-two-col .single-card-content {
        padding: 0 1.04vw 0 5.25vw;
    }     
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    #intro-stripe .col-img {
        width: 194px;
        min-width: 194px;
        height: 246px;
    }
    #intro-stripe .col-container-inner {
        height: 306px;
        padding-left: 30px;
        padding-right: 30px;
    }

    #sistem-integrations .stripe-content .two-col-grid {
        grid-template-columns: 59% 1fr;
    }
    #sistem-integrations .col-content {
        padding: 30px;
    }
    
    .sticky-two-col .intro-title,
    .sticky-two-col .sticky-card {
        top: 8em;
    }
    .sticky-two-col .single-card-container {
        padding-left: 30px;
        padding-right: 30px;
        height: 220px;
    }
    .sticky-two-col .single-card-img {
        width: 173px;
        min-width: 173px;
        height: 160px;
    }
    .sticky-two-col .single-card-content {
        width: calc(100% - 173px);
        padding: 0 0 0 55px;
    }    
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
    @media screen and (max-width: 1150px) {
    #intro-stripe .sticked-boxes .stripe-container-inner {
        padding: 0 4.1667vw;
    }

    #sistem-integrations .cool-img-container {
        height: 337px;
    }
    #sistem-integrations .col-content {
        padding: 25px;
    }    
        
    .sticky-two-col .single-card-content {
        width: calc(100% - 160px);
    }
    .sticky-two-col .single-card-content {
        padding: 0 0 0 48px;
    }
    .sticky-two-col .single-card-img {
        width: 160px;
        min-width: 160px;
        height: 145px;
    }
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
    .sticky-two-col .wd_40.sticky-p {
        position: relative;
        top: unset;
        width: 100%;
        padding-right: 0;
        border-top: 1px solid rgb(255 255 255 / 20%);
    }
    .sticky-two-col .wd_60.sticky-p {
        width: 100%;
        padding-left: 0;
        position: static;
    }
    .sticky-two-col .wd_40.sticky-p * {
        position: static;
        width: 60%;
    }
    .sticky-two-col .pattern-img {
        transform: scale(3) rotate(25deg);
        top: 0em;
    }
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {

}