@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root {
    /* *  Var Background*/
    --clrbg-000: #000;
    --clrbg-999: #fff;
    --clrbg-100: hsla(178, 93%, 88%, 1);
    --clrbg-300: hsla(188, 70%, 51%, 1);
    --clrbg-600: hsla(194, 100%, 28%, 1);
    --clrbg-900: hsla(225, 62%, 10%, 1);
    --clrbg-905: hsla(225, 62%, 10%, 0.7);
    --clrbg-950: hsla(315, 77%, 5%, 1);

    /* * Var Text*/
    --clrtxt-000: #000;
    --clrtxt-999: #fff;
    --clrtxt-100: hsla(188, 70%, 51%, 1);
    --clrtxt-200: hsla(194, 100%, 28%, 1);
    --clrtxt-300: hsla(225, 62%, 10%, 1);
    --clrtxt-contrast: hsla(356, 100%, 67%, 1);


    font-family: 'Roboto', 'Franklin Gothic Medium', sans-serif;
    
}
body {
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

address {
    display: block;
    font-style: normal;
}

iframe {
    margin: 0 2em 0 0;
    padding: 0.5em;
    border: none;
    width: auto;
    height: auto;
}

.sr_only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }

/** NAV */

header  {
    background-color: var(--clrbg-999);
    position: fixed;
    margin-top: 5px;
    margin-left: 7vw;
    
    z-index: 100;
}



.head-box {
    width: 86vw;
    height: max(10vh, 4.5em);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 150;
}
header::after {
    content: "";
    width: 100%;
    height: 15%;
    position: absolute;
    background-image: linear-gradient(
        var(--clrbg-600), var(--clrbg-600) 33%,
        var(--clrbg-999) 33%, var(--clrbg-999) 66%, 
        var(--clrbg-000) 66%, var(--clrbg-000));
}
.menu_main {
    height: 85%;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    z-index: 150;
        
}

.logo_firma {
    background-image: url("media/logo_idekon-sk.png");
    background-position: center;
    background-size: cover;
    width: 4.7em;
    height: 4.7em;
    margin: 2em;
    transform: scale(1.8);
    
}
.menu_toggle {
    display: none;
    border: none;
    cursor: pointer;

    position: absolute;
    width: 3rem;
    aspect-ratio: 1;

    font-size: 2rem;
    color: var(--clrtxt-000);
    background-color: var(--clrbg-600);
    z-index: 9999;
    top: 0.8rem;
    right: 1.8rem;
}

.menu_toggle::after {
    content: "\f0c9";
    transform: translate(0.24rem, 0rem);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    padding-right: 0.3em;
}

.menu_toggle[aria-expanded="true"]::after {
    content: "\f057";
}

.menu_toggle:hover::after{
    color: var(--clrtxt-contrast)
}
.menu_toggle:active{
    background-color: var(--clrbg-999);
}
.menu_toggle:active::after{
    color: var(--clrtxt-contrast);
}

.nav_prim {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: right;
    align-items: center;
}
.nav_prim a {
    display: inline-block;
    font-size: 0.65rem;
    position: relative;
    margin-right: 1%;
    padding-inline: 0.8em;
    padding-block: 0.3em;
    
    background-color: var(--clrbg-600);
    color: var(--clrtxt-999);
    text-transform: uppercase;
    transition: all 400ms;
    
}
.hide {
    display: initial;
    transition: all 500ms;
}

.nav_prim a::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    padding-right: 0.3em;
    
}
.nav_prim a:first-child::before {
    content: "\f015";
}
.nav_prim [pgtp="index"]:nth-child(2)::before {
    content: "\f2b5";
}

.nav_prim [pgtp="projekty"]:nth-child(2)::before {
    content: "\f0ae";
}

.nav_prim a:nth-child(3)::before {
    content: "\f1b3";
}
.nav_prim a:nth-child(4)::before {
    content: "\e533";
}
.nav_prim a:last-child::before {
    content: "\40";
}

.nav_prim a:hover {
    font-size: 1.0rem;
    box-shadow: 5px 5px 7px 1px #29303c;       
}

.nav_prim a:hover::before {
    color: var(--clrtxt-contrast);
}

.nav_prim a:active {
    font-weight: 900;
    letter-spacing: 4px;
}

/* * -------------------- */ 
/* * ------- MAIN ------- */
/* * -------------------- */

main {
    height: 95vh;
    scroll-snap-type: y mandatory;
    overflow-y: auto;
}
.main {
    width: 100%;
    height:95vh;
    padding-top: 10vh;
    overflow: auto;
    scroll-snap-align: start;
}
.reset_a {
    text-decoration: none;
    
}

h1 {
    font-size: clamp(1rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.2em 0.5em;
    color: var(--clrtxt-200);
    transition: all 500ms;
}

.h1-center {
    background-color: var(--clrbg-950);
    display: flex;
    align-items: center;
    justify-content: center;
}

h2 {
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;    
    padding: 0.2em;
    margin-block: 0.9em;
}

.motto {
    font-size: 1.8rem;
    font-weight: 500;
    text-align: end;
    width: 70%;
    padding: 0.8em;
    margin: 2em 0 2em auto;
    transition: all 500ms;
}

.img {
    width: 100%;
    height: auto;
}

.flexy {
    display: flex;
}

.gridy {
    display: grid;
    gap: 1em;
    
}
.margin_xl {
    margin-bottom: 5em;

}

.txt-clr-blk {
    color: var(--clrtxt-000);
    background-color: var(--clrbg-600);
}
.txt-clr-med {
    color: var(--clrtxt-999);
    background-color: var(--clrbg-600);
}

.font_s {
    font-size: small;
    font-weight: 500;
    line-height: 1.3rem;
}
.pad_m {
    padding: 1em;
}
.pad_s {
    padding: 0.5em;
}

.ico--cubes::before {
    content: "\f1b3";
    font-weight: 900;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    padding-right: 0.3em;
}

.ico--hands::before {
    content: "\f2b5";
    font-weight: 900;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    padding-right: 0.3em;
}

.button {
    transition: all 600ms;
}

.button:hover {
    color: var(--clrtxt-contrast);
    font-size: 2rem;
    letter-spacing: 0.15rem;
    box-shadow: 7px 7px 7px 1px #29303c;
}

.dis-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 1.5em 0em 2.5em 0em;
    outline: var(--clrbg-000) solid 2px;

}

.dis-inline p {
    font-size: 1.1rem;
    line-height: 1.5rem;

}

.parag {
    margin-top: 3em;
}


.parag li {
    padding-top: 0.5em;
}

.bg-contrast {
    width: 75%;
    padding: 1.2em;
    background-color: hsla(178, 0%, 0%, 0.2);
}

.frame_1 {
    width: 84vw;
    max-width: 1200px;
    margin-inline: auto;

    height: 78vh;
}


.frame_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    flex: 1 1 calc(50% - 2rem);
    transition: all 500ms;
}


.reflogo {
    width: auto;
    min-height: 5em;
    display: grid;
    place-content: center;
    
}

.cent_v {
    padding-inline: 0.2em;
    padding-block: 0.1em;
    font-size: 1.3rem;
    color: var(--clrtxt-100);
    background-color: var(--clrbg-905);
    transition: all 200ms ease-out;
}

.e-shop-frame {
    position: fixed;
    margin-top: 13em;
    z-index: 50;
}


.button-eShop {
    
    padding: 0.6em;
    
    border: none;
    border-top-right-radius: 0.8em;
    border-bottom-right-radius: 0.8em ;
    background-color: var(--clrbg-950);
    font-size: 1rem;
    font-weight: 900;
    color: var(--clrtxt-contrast);

    cursor: pointer;
}

/** -----▼ SECTON STYLE ▼----- */

/** ------ DARK ------ */
.pg-dark {
    background-color: var(--clrbg-600);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.title-black {
    color: var(--clrtxt-999);
    background-color: var(--clrbg-950);
}

.title-dark {
    color: var(--clrtxt-100);
    background-color: var(--clrbg-900);
}

.motto-black {
    color: var(--clrtxt-100);
    background-color: var(--clrbg-950);
}

/** ------ MEDIUM ------ */
.pg-med {
    background-color: var(--clrbg-300);
    background-image: url("#");
    background-repeat: no-repeat;
    background-position: bottom right;
}
.title-med {
    color: var(--clrtxt-000);
    background-color: var(--clrbg-600);
}
.motto-med {
    color: var(--clrtxt-100);
    background-color: var(--clrbg-950);
}

/** ------ LIGHT ------ */
.pg-light {
    background-color: var(--clrbg-100);
    background-image: url("#");
    background-repeat: no-repeat;
    background-position: bottom right;
}
.title-light {
    color: var(--clrtxt-200);
    background-color: var(--clrbg-000);
}
.motto-light {
    color: var(--clrtxt-000);
    background-color: var(--clrbg-300);
}



/** -----▲ SECTON STYLE ▲------ */

.pg-office {
    background-image: url("media/pg_office.png");
}

.pg-drw {
    background-image: url("media/pg_drawing_idekon.png");
}

.pg-3d-prt {
    background-image: url("media/pg_3d-prt.png");
}

.pg-handshake {
    background-image: url("media/pg_prj_handshake.png");
}


.box_kontakty {
    display: flex;
    flex-wrap:wrap;
}

.card-kont {
    background-color: var(--clrbg-600);
    flex: 1 1 calc(50% - 2rem);
    margin: 0.5em;
}

.card-tit {
    color: var(--clrtxt-200);
    background-color: var(--clrbg-100);
    font-size: 1.4rem;
    font-weight: 500;
    width: 70%;
    padding: 0.5em 1em 0.5em 1em;
    margin-top: 0.5em;
    margin-left: auto;
    margin-bottom: 0.3em;
    margin-right: 0.8em;
    transition: all 500ms;
    
}

.info-bg {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--clrbg-950));
    margin: 1% 15% 2% 2em;
}

.info {
    color: var(--clrtxt-999);
    text-align: center;
    position: relative;
    padding-block: 1em;
    padding-right: 1.5em;
    transition: all 500ms;
}

.info li {
    list-style: none;
    font-size: 0.8rem;
    line-height: 1.3rem;
}
.magni-txt {
    font-size: 1.2rem !important;
    font-weight: 500;
}

.contrast {
    color: var(--clrtxt-contrast);
}

.contrast:visited {
    color: var(--clrtxt-contrast);
}

.contrast:hover {
    color: var(--clrtxt-100);
}

.contrast:visited:hover {
    color: var(--clrtxt-100);
}

.inwork {
    display: none;

    font-size: 150%;
    text-align: end;
    width: fit-content;
    max-height: fit-content;
    padding: 1em;
    margin-left: auto;
    margin-right: 1em;
    background-color: var(--clrbg-999);

}

.vision {
    color: var(--clrtxt-999);
}

.prj-prew {
    display: grid;
    place-content: center;
    box-shadow: 5px 5px 7px 1px #29303c;;
}

.prj-nfo {
    margin-left: 3em;
}

 
/** -----▼▼ CAROUSEL ▼▼------ */
/** ------------------------- */
.frame_ref {
    display: flex;
    max-width: 1200px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.btn_caro{
    --size_pointer: 50px;
    bottom: 1%;
    height: var(--size_pointer);
    width: var(--size_pointer);
    line-height: var(--size_pointer);
    color: var(--clrbg-300);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 900;
    position: absolute;
    text-align: center;
    background: var(--clrbg-000);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.1s linear;
  }
  .btn_caro:active{
    transform: translateY(-50%) scale(0.85);
  }
  .btn_caro:hover{
    background: var(--clrbg-900);
  }
  .frame_ref button:first-child{
    left: 0em;
}
  .frame_ref button:last-child{
    right: 0em;
}

.carousel {
    height: 60vh;
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    -ms-overflow-style: none;  /** IE and Edge */
    scrollbar-width: none;  /** Firefox */

    scroll-behavior: smooth;
}

/** Chrome, Safari, Opera */
.carousel::-webkit-scrollbar {
    display: none;
}

.caro_item {
    list-style: none;

}

.disp_inl {
    display: inline-block;

}



/** -----▲▲ CAROUSEL ▲▲------ */
/** ------------------------- */

.comp-pic {
    height: 95%;
    width: calc(100% / 3);
    margin: 0.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

ul.flexy li {
    flex-shrink: 0;
}

.comp-pic-zkw {
    background-image: url("media/REF/CompanyLogo-ZKW.jpg");
}

.comp-pic-inat {
    background-image: url("media/REF/CompanyLogo-Inat.png");
}
.comp-pic-loewe {
    background-image: url("media/REF/CompanyLogo-Loewe.jpg");
}

.comp-pic-elsys {
    background-image: url("media/REF/CompanyLogo-elsys_pro.png");
}

.comp-pic-team_ind {
    background-image: url("media/REF/CompanyLogo-team_industries.png");
}

.comp-pic-max {
    background-image: url("media/REF/CompanyLogo-max_blinker.png");
}
.frame_prj {
    height: 70%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 45%;
    gap: 0.5em;
    margin-bottom: 1em;
}

/** --------▼▼ CARD ▼▼-------- */
/** -------------------------- */


.card {
    --offset_bottom: 5%;

    height: calc(100% - (var(--offset_bottom)));
    margin: auto 0.8em 0 0.8em;
    padding-bottom: var(--offset_bottom);
}

.card_nfo {
    height: 4rem;
    
}

.card_nfo ul li {
    width: 100%;
    white-space: normal;
}

.card h3 {
    font-size: 0.8rem;
    padding-left: 1em;
    color: var(--clrtxt-100);
    background-color: var(--clrbg-905);
}

.card ul {
    font-size: 0.8rem;
    padding-left: 2em ;
}
.img_wrap {
    display: inherit;
    background-color: hsla(178, 0%, 0%, 0.05);
}

.img_wrap img {
    object-fit: contain;
    height: 40vh;
    
}

.prj-pic {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}



/* * FOOTER */
footer {
    font-size: smaller;
    color: var(--clrbg-999);
    background: var(--clrbg-900);
    display: block;
    height: max(5vh, 2.3em);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
}

footer p {
    color: var(--clrbg-300);
}

footer p a {
    background: var(--clrbg-000);
    padding: 5px 7px;
    border-radius: 15px;
    color: var(--clrtxt-999);
}



footer p a:hover {
    color: var(--clrtxt-000);
    background: var(--clrbg-999);
}

/** ----------------------------------- **/
/**  MEDIA **/
/** ----------------------------------- **/


@media only screen and (max-width: 1000px) {
        .nav_prim a {
        font-size: 0.6rem;
    }


    main {
        height: fit-content;
        scroll-snap-type: none;
    }
    main .main {
        height: fit-content;
        scroll-snap-align: none;
    }
    .frame_1 {
        height: auto;
    }

    .button-eShop {
        padding: 0.5em;
        font-size: 0.8rem;
        -webkit-writing-mode: vertical-rl;
        writing-mode: sideways-lr;
        transition: all 150ms ease;
    }

    .button-eShop:active {
        scale: 1.5;

    }
    .bg-contrast {
        width: 100%;
        background-color: hsla(178, 0%, 0%, 0.4);
        margin-bottom: 23em;
    }
    

    .kontakt {
        flex: 100%;
    }        
    .bg-white {
        width: 100%;
        line-height: 1.2rem;
    }
    
}

@media only screen and (max-width: 860px) {
    h1 {
        margin-block: 1em;
    }
    .info-bg {
        margin: 1em 10% 1em 2em;
    }
    .pg02 ul {
        width: 100%;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
    }   
}

@media only screen and (max-width: 780px) {
    .hide {
        display: none;
    }
    .nav_prim a {
        font-size: 0.9rem;
    }

    iframe {
        width: 100%;
}

    .frame_2 {
        justify-content: center;
    }
    .carousel .caro_item{
        width: calc(100% / 2);
        }
}

@media only screen and (max-width: 670px) {
    .hide {
        display: initial;
    }
    .head-box {
        justify-content: flex-start ;
    }

    h1 {
        inset: 1em 0 0 2em;
        font-size: 1rem;
    }

    .motto {
        margin-top: 1em;
        width: 100%;
    }

    .logo_firma {
        width: 4.0em;
        height: 4.0em;
        margin: 0.8em;
        transform: scale(1.5);
    }
    .menu_main {
        background-color: var(--clrbg-905);
        position: fixed;
        height: 100%;
        flex-direction: column;
        inset: 0 0 0 30%;
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .menu_main[data-visible="true"] {
        transform: translateX(0%);
    }
    


    .nav_prim {
        padding: min(30vh, 10rem ) 2em;
        flex-direction: column;
        align-items: stretch;
        gap: 2em;
    }

    .nav_prim a {
        display: inline-flex;
        gap: 0.8em;
    }
    
    .menu_toggle {
        display: block;

    }
}

@media screen and (max-width: 430px) {
    
    h2 {
        font-size: 2.5rem;
        margin-block: 0.8em;
    }
    .motto {
        font-size: 1.3rem;
    }
    .frame_ref span{
        --size_pointer: 60px;
        height: var(--size_pointer);
        width: var(--size_pointer);
        line-height: var(--size_pointer);
    }

    .carousel .caro_item{
        width: 100%;
    }
        
    .img_wrap img {
        max-width: 80dvw;
    }
    .btn_caro {
        --size_pointer: 60px;
    }
    section#id-prj ul.carousel {
        margin-bottom: 4em;
    }

    
    footer {
        height: 7vh;
    }
}