@import url("font.css");
@import url("header.css");
@import url("footer.css");
@import url("single.css");
@import url("blocks/hero.css");
@import url("blocks/icons_and_text.css");
@import url("blocks/quad_panel_block.css");
@import url("blocks/solutions.css");
@import url("blocks/products.css");
@import url("blocks/technology.css");
@import url("blocks/cta.css");
@import url("blocks/about_us.css");
@import url("blocks/team.css");
@import url("blocks/history.css");
@import url("blocks/subpage_hero.css");
@import url("blocks/seperator.css");
@import url("blocks/icons.css");
@import url("blocks/text_image.css");
@import url("blocks/teaser.css");
@import url("blocks/blog.css");
@import url("blocks/fade.css");


:root {
    --color-white: #ffffff;
    --color-black: #1c1c1c;
    --color-primary: #FF7732;
    --color-background: #CCD0F3;
    --color-pruple: #837CD8;

    --font-family-dm_sans: 'DM Sans';
    --font-family-bricolage: 'Bricolage Grotesque';

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-normal: clamp(1.65rem, 1.75vw, 1.75rem); 
    --line-height-small: 1.25rem;    
    --line-height-big: clamp(2rem, 4vw, 4.125rem);               
    --line-height-24: 1.5rem;

    --font-size-sm: .875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.25rem, 1.3vw, 1.375rem);
    --font-size-2xl: clamp(1.375rem, 1.5vw, 1.5rem);
    --font-size-25xl: clamp(1.5rem, 2vw, 2rem);
    --font-size-3xl: clamp(1.75rem, 2.5vw, 2.5rem);
    --font-size-35xl: clamp(1.25rem, 2vw, 2.6rem);
    --font-size-4xl: clamp(2rem, 4vw, 4rem);
    --font-size-5xl: clamp(2.25rem, 5vw, 5rem);
    --font-size-6xl: clamp(2rem, 4vw, 6rem);
    --font-size-7xl: clamp(2.75rem, 7vw, 7rem);
    --font-size-8xl: clamp(3rem, 8vw, 8rem);

    --footer-vpad: 2rem;
}

body {
    background-color: var(--color-background);
}

.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-black);
}

.btn-primary {
    color: white;
    padding: 10px 20px !important;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black);
    border-radius: 3.5rem;
    color: #FFF;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-size: var( --font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: normal;
}
.btn-primary:hover {
    background-color: var(--color-primary);
}

.btn-secondary {
    display: inline-flex;
    color: var(--color-black);
    padding: 10px 17px !important;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 3.5rem;
    border: 1px solid var(--color-black);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-family: "DM Sans";
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: normal;
}
.btn-secondary:hover {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

main.blocks {
    overflow-x: hidden;
}


.fade_in_element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.fixed-buttons{
    position: fixed;
    bottom: 100px;
    right:  max(0px, (100% - 1320px)/2);
    gap: 20px;
}


/* Flex container with default gab --> Start */
.flex-container {
    display: flex;
    flex-direction: row;
    gap: 7.5rem;
}

.flex-item-50 {
    flex: 1;
}

.image-block .custom_image {
    width: 100%;
    object-fit: contain;
    max-width: 855px;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.fullscreen .custom_image {
    width: 100%;
    object-fit: cover;
    max-height: 542px;
    max-width: 855px;
    padding-top: 0rem;
    padding-bottom: 0rem;
}


@media (min-width: 3150px) {
    .custom_image {
        max-width: 910px;
    }
}

@media (max-width: 992px) {
    .flex-container {
        gap: 3.5rem;
    }

}

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
        gap: .75rem
    }
}
/* Flex container with default gab --> End */


@media (max-width: 768px) {
    .fixed-buttons {
        bottom: 20px;
        right: 20px
    }
}


@media (min-width: 768px) {
    .fixed-buttons {
        bottom: 20px;
        right: 20px
    }
}

@media (min-width: 1920px) {
    .fixed-buttons{
        right:  max(0px, (100% - 1720px)/2);
    }
}

.block-my-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.block-my-default {
    padding-top: 2.1875rem !important;
    padding-bottom: 2.1875rem !important
}

.block-my-80-0 {
    padding-top: 2.1875rem !important;
    padding-bottom: 0rem !important
}

.block-my-0-80 {
    padding-top: 0rem !important;
    padding-bottom: 2.1875rem !important
}

@media(min-width: 768px) {
    .block-my-none {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .block-my-default {
        padding-top: 4.375rem !important;
        padding-bottom: 4.375rem!important
    }

    .block-my-80-0 {
        padding-top: 4.375rem !important;
        padding-bottom: 0rem !important
    }

    .block-my-0-80 {
        padding-top: 0rem !important;
        padding-bottom: 4.375rem !important
    }

}

@media (min-width: 1920px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1720px;
    }
}

.dw_margin_left {
    padding-left: calc((100vw - 1720px) / 2)
}
  
.dw_margin_right {
    padding-right: calc((100vw - 1720px) / 2);
}
  

@media (min-width: 1720px) and (max-width: 1920px){
    .dw_margin_left {
        padding-left: calc((100vw - 1720px) / 2);
    }
      
    .dw_margin_right {
        padding-right: calc((100vw - 1720px) / 2);
    }
}

@media (max-width: 1720px) {
    .dw_margin_left {
        padding-left: calc((100vw - 1320px) / 2);
    }
      
    .dw_margin_right {
        padding-right: calc((100vw - 1320px) / 2);
    }
}


@media (max-width: 1400px){
    .dw_margin_left {
        padding-left: calc((100vw - 1140px) / 2);
    }
      
    .dw_margin_right {
        padding-right: calc((100vw - 1140px) / 2);
    }
}

@media (max-width: 1320px){
    .dw_margin_left {
        padding-left: calc((100vw - 1140px) / 2);
    }
      
    .dw_margin_right {
        padding-right: calc((100vw - 1140px) / 2);
    }
}



@media (max-width: 1200px){
    .dw_margin_left {
        padding-left: calc((100vw - 960px) / 2);
    }
      
    .dw_margin_right {
        padding-right: calc((100vw - 960px) / 2);
    }
}

@media (max-width: 992px){
    .dw_margin_right {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .dw_margin_left {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .row .dw_margin_left {
        padding-left: 2rem;
        padding-right: 2rem;
    }
      
    .row .dw_margin_right {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}
  

.footer-menu{
    margin-left: 0rem !important;
}

.img-fluid {
    width: 100%;
}

a.dropdown-item {
    padding-left: 9px;
}

footer .website_logo{
    width: 220px;
}

.navbar-nav {
    margin-left: 0rem !important;
}

.blog_content p{
    overflow-wrap: break-word;
    hyphens: auto;
}


@media (min-width: 991px) {
    .block-my-80-0-no-mobile {
        padding-top: 4.375rem !important;
        padding-bottom: 0rem !important;
    }
}