/* ############# HEADER SECTION ##############  */

#header-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background-color: var(--accent-3);
    background-image: url("../assets/images/hero-image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
    position: relative;
}

#header-section .container {
    height: 50rem;
}

.header-section-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    height: 75%;
    max-height: 50rem;
    position: relative;
    z-index: 100;
    background-color: var(--bg-primary-dark-translucent-2);
}

.header-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 100;
}

.header-title-container h1,
.header-title-container h5 {
    color: var(--text-primary-light);
    text-align: center;
}

.header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.header-title h1 {
    margin: 0;
}

/* svg */

.node-line {
    stroke: var(--accent-2);
}

.node-end {
    stroke: var(--accent-2);
}

/* ############# ABOUT_APP SECTION ##############  */

#about-app-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-secondary-light);
    padding-top: 5rem;
}

.about-app-contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

#about-app-section h2 {
    color: var(--accent-2-light);
    background-color: var(--bg-primary-dark);
    padding: .2rem .3rem;
}

.iniationware-logo img {
    max-height: 180px;
    justify-content: center;
}

.rounded-img img {
    border-radius: .5rem;
    /* border: .15rem var(--accent-2-faded) solid; */
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
}

/* ############# USE-CASES SECTION ##############  */

#use-cases-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-primary-dark);
}

.use-cases-contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: center;
    max-width: 80rem;
}

.use-cases-contents .section-title-container h2 {
    color: var(--accent-2-light);
}

.use-cases-contents .section-title-container h5 {
    font-weight: 300;
}

.services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 2rem;
}

.service {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
}

.service_text {
    width: 100%;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;
}

.service_text h3 {
    color: var(--accent-2-light);
}

.service_text h5 {
    color: var(--accent-3-faded);
}

.service_text li {
    margin-top: .8rem;
    margin-left: 1.5rem;
    list-style-type: unset;
    color: var(--text-primary-light);
}

/* ############# ABOUT_US SECTION ##############  */

#about-us-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: var(--bg-secondary-light);
}

.about-us-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}

.about-us-section-desc {
    padding: 1rem 0;
}

#about-us-section .section-title-container {
    position: relative;
    z-index: 100;
    padding: 3rem 2rem;
}

#about-us-section .section-title-content h2 {
    color: var(--accent-4-light) ;
    width: 100%;
    text-align: center;
    padding: .3rem 0;
}

#about-us-section .section-title-content h4 {
    color: var(--accent-2);
    font-weight: 400;
}


/* partners */
#partners {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(var(--accent-3) 0%, var(--accent-3) 90%, var(--bg-primary-dark) 90%);
}

.partners-section-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    padding: 0 2rem;
}

.partners-section-top h2,
.partners-section-top p {
    color: var(--text-primary-light);
}

.partners-section-top h2 {
    color: var(--accent-2-light);
    padding: .3rem 0rem;
}

.partner-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

.partner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 80rem;
    background-color: var(--bg-primary-light);
}

.partner:not(:first-child) {
    margin-top: 3rem;
}

.partner_top {
    width: 100%;
    height: 15rem;
    background-size: cover;
    background-position: 50% 50%;
}

.insys .partner_top {
    background-image: url("../assets/images/insys_header.webp");
}

.wago .partner_top {
    background-image: url("../assets/images/wago-header.webp");
    background-position: 50% 65%;
}

.snapdaq .partner_top {
    background-image: url("../assets/images/snapdaq-header.webp");
}


.partner-card {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 8rem;
    height: 5rem;
    padding: 1rem;
    background-color: var(--bg-primary-light);
}

.partner-card img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

.partner-showcase-container {
    width: 100%;
    overflow: hidden;
}

.partner-showcase-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.partner-showcase_text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
    padding: 0 2rem;
}

.partner-showcase-title {
    margin: 1rem 0;
    font-weight: 600;
    text-align: left;
}

.partner-showcase-description ul {
    margin: 1rem 0.5rem;
}

.partner-showcase-description li {
    list-style-type: square;
    margin-left: .5rem;
    margin-bottom: 1rem;
}

.insys-text {
    color: var(--insys)
}

.partner-showcase-description {
    text-align: justify;
}

.partner-showcase-description li {
    color: var(--text-primary-dark);
}

.partner-showcase-contents h3 {
    margin: 2rem 0;
    font-size: 2rem;
}

.partner-showcase-products-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5rem;
    width: 100%;
    padding: 2rem 0;
    background-color: #fafafa;
}

.partner-showcase-products-title {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--insys);
}

.partner-showcase-products-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
}

.products-prev-btn,
.products-next-btn {
    color: var(--accent-2);
    display: flex;
    align-items: center;
    cursor: pointer;

    position: absolute;
    top: 50%;
    z-index: 100;
}

.products-prev-btn {
    left: 1%;
}

.products-next-btn {
    right: 1%;
}


.products-prev-btn svg,
.products-next-btn svg {
    width: 3rem;
}

.products-prev-btn path,
.products-next-btn path {
    stroke: var(--accent-2);
}

.partner-showcase-products {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 20rem;
    border-radius: .3rem;
    padding: 1rem;
    position: relative;
    gap: 5rem;
    height: 40rem;
}

.partner-product-card {
    flex: 0 0 auto;
    width: 18rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.partner-product-card-header {
    background-color: var(--accent-2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image-container {
    width: 10rem;
    height: 10rem;
    margin-top: -5rem;
}

.partner-product-card-header img {
    height: auto; /* reset the height, otherwise it causes overflow, since height is set 100% in base.css for img */
    transition: transform .2s ease-in-out;
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
}

.partner-product-card:hover {
    box-shadow: 0 0 .4rem .4rem var(--shadow-primary);
    transform: scaleX(101%) scaleY(101%) translateY(-3%);
}

.partner-product-card:hover .partner-product-card-header img {
    transform: scale(115%) translateY(-5%);
}

.partner-product-card-body {
    padding: 2rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    background-color: var(--bg-primary-light);
}

.partner-product-card-body_title {
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
}

.partner-product-card-body_title p {
    font-size: .9rem;
}

.partner-product-card-body_desc {
    flex-grow: 1;
}

.partner-product-card-body_desc ul {
    margin: 1rem 0;
}

.partner-product-card-body_desc li {
    list-style-type: square;
    margin-top: .3rem ;
    color: var(--text-primary-dark);
}

.partner-product-card-footer {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-product-card-footer a {
    width: 100%;
    color: var(--text-primary-light);
    background-color: var(--accent-2);
    font-size: 1.1rem;
    padding: .8rem 0;
    /*clip-path: polygon(100% 0, 100% 81%, 62% 100%, 0 73%, 0 0);*/
}

.partner-product-card-footer a:hover {
    color: var(--text-primary-dark);
    background-color: var(--accent-2);
}

/* ############## CONTACT_US SECTION */

.contact-us-section-divider {
    width: 100vw;
    height: 1rem;
    background-color: var(--bg-primary-dark);
}

#contact-us-section-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--bg-primary);
    overflow: hidden;
    padding-bottom: 0;
}

.contact-us-section-divider svg {
    fill: var(--bg-primary-dark);
}

.contact-us-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 2rem;
}

.contact-us-section-left {
    align-self: stretch;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    /* width: 60%; */
}

.contact-us-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
}

.contact-us-title-container .section-title,
.contact-us-title-container .section-subtitle {
    text-align: center;
    color: var(--text-primary-light);
}

.contact-us-title-container h4 {
    font-weight: 400;
}

.contact-us-image-container {
    padding: 0 1rem;
}

.contact-us-image-container img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: .3rem #ddd solid;
    box-shadow: 0 0 .5rem .1rem #4444;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}

.contact-us-section-left svg {
    width: 100%;
}

.left {
    justify-content: flex-start;
    gap: 1rem;
}

.left .button {
    margin: 0;
    font-size: 1.2rem;
    padding: .5rem;
}

.contact-us-call-to-action {
    width: 100vw;
    padding: 1rem 0;
    padding-top: 2.5rem;
    padding-bottom: 5rem;
    background-color: var(--bg-primary-light);
}

/* divider */
.divider .lock.top {
    fill: #fff;
}

.divider .lock.bottom {
    stroke: #fff;
}

.divider .node-end {
    stroke: var(--accent-2);
    fill: none;
}

/* ######################################################################################## */
/* ######################################################################################## */
/* ######################################################################################## */
/* ######################################################################################## */

@media screen and  (min-width: 1080px) {
    .header-section-top {
        width: 50rem;
        height: 25rem;
        margin: 0;
    }

    .header-image-container, .about-app-image-container {
        width: 80%;
    }

    .header-section-top::after {
    }

    #about-app-section {
        padding-top: 8rem;
        overflow: hidden;
    }

    .about-app-contents {
        gap: 3rem;
        flex-direction: row;
        padding: 0 5rem;
    }

    .about-app-contents > .section-full-width-image-container {
        margin-right: -10rem;
    }

    .about-app-section-top {
        max-width: 50rem;
    }

    #about-us-section  {
        padding: 0;
    }

    .about-us-contents {
        gap: 3rem;
    }

    #use-cases-section {
        border-top: 2rem solid var(--accent-3);
        border-bottom: 2rem solid var(--accent-3);
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .use-cases-contents {
        gap: 3rem;
    }

    .services {
        gap: 8rem;
    }

    .service {
        flex-direction: row-reverse;
        align-items: start;
        gap: 4rem;
    }

    .service:nth-child(2) {
        flex-direction: row;
        flex-direction: row;
        gap: 0;
        position: relative;
    }

    .service:nth-child(2) img {
        width: 80%;
    }

    .service:nth-child(2)::after {
        content: "";
        position: absolute;
    }

    .service_image-container {
        min-width: 35rem;
    }



    .description {
        font-size: 1.2rem;
    }

    #partners {
        width: 100vw;
        padding: 1rem;
    }

    .partners-section-top {
        margin-top: 5rem;
    }

    .partner_top {
        height: 25rem;
        width: 100%;
    }

    .insys .partner_top {
        clip-path: polygon(100% 0, 100% 89%, 74% 100%, 0 89%, 0 0);
    }

    .wago .partner_top {
        clip-path: polygon(100% 0, 100% 100%, 25% 82%, 0 100%, 0 0);
    }

    .snapdaq .partner_top {
        clip-path: polygon(100% 0, 100% 83%, 52% 100%, 0 82%, 0 0);
    }

    .partner-showcase-container {
        gap: 0;
        overflow: unset;
    }

    .partner-showcase_title-description {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .partner-showcase_text {
        max-width: 40rem;
        padding-bottom: 3rem;
    }

    .partner-showcase_text h4,
    .partner-showcase_text p {
        text-align: justify;
    }

    .partner-card {
        border: none;
        padding: 0;
        height: auto;
    }

    .partner-showcase-products-container {
        gap: 7rem;
    }

    .partner-showcase-products-wrapper {
        justify-content: center;
    }

    .partner-showcase-products {
        width: auto;
    }

    .products-prev-btn,
    .products-next-btn {
        display: none;
    }

    .partner-product-card {
        box-shadow: 0 0 .1rem .1rem var(--shadow-primary);
    }

    .partner-product-card-body_title {
        height: 5rem;
    }

    .wago .partner-product-card-body_title {
        height: 8rem;
    }

    .partner-product-card-body {
        flex-grow: 1;
    }

    .section-desc {
        font-size: 1.2rem;
    }

    /* ############## CONTACT_US SECTION */
    .contact-us-section-divider {
        height: 2rem;
    }

    #contact-us-section-container {
        all: unset;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .contact-us-call-to-action {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    .contact-us-section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 4rem 0;
        max-width: 1280px;
    }

    .contact-us-section-left {
        align-self: stretch;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
        gap: 3rem;
        text-align: left;
        padding: 0rem 4rem;

        /* width: 60%; */
    }

    .contact-us-title-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
        gap: 1rem;
    }

    .contact-us-title-container .section-title,
    .contact-us-title-container .section-subtitle {
        text-align: left;
        color: var(--text-primary-light);
    }

    .contact-us-title-container h4 {
        font-weight: 400;
    }

    .contact-us-image-container {
        width: 100%;
        margin-right: -15rem;
    }

    .contact-us-section-left svg {
        width: 100%;
    }

    .left {
        justify-content: flex-start;
        gap: 1rem;
    }

    /* .left .button {
        margin: 0;
        font-size: 1.2rem;
        padding: .5rem;
    } */


}


@media screen and  (min-width: 1920px) {
    .contact-us-image-container {
        width: 100%;
        margin-right: 0rem;
    }
}